Looking Outwards 11: Hans Zimmer and his music technology

Hans Zimmer is well known for his epic movie scores, but little do people know about the computational power behind his music.

Though Zimmer is more associated with his orchestral scores now, his early film work was largely composed solo, on the synthesizer and through the use of samples that Zimmer took himself. But as his career expanded, so did the scope of his music, and it’s that scope that’s made him so enduring in the musical cultural consciousness. Zimmer is a constant innovator, and his embrace of technology means he’s able to adapt without compromising for the sake of whatever is trendy at the moment. More recently, Zimmer helped develop an app showcasing the score for Inception that took into account the user’s whereabouts and movements, and even launched a viral event to help populate the 100,000 voices he wanted for the “rise up” chant that forms the base of much of The Dark Knight Rises’ score.

Hans composing

So much of his music nowadays are composed and performed with custom built and programmed synthesizers that create the iconic sound that is so often associated with him.

My grand musical education is two weeks of piano lessons. So I’m not a good player, but I’m a good programmer. I’ve always felt that the computer was my instrument.

Project 10: Pat

pat


var terrainSpeed = 0.0005;
var terrainDetail = 0.002;
var terrainDetail1 = 0.00125;
var terrainDetail2 = 0.001;
var terrainDetail3 = 0.0005;
var yaxis = 1;
var c;
var c1;
var c2;
var xStart = 0, pat, patY;
var swimmer = 'https://vignette.wikia.nocookie.net/spongebob-polska/images/d/d5/Patryk.gif/revision/latest?cb=20180830203043&path-prefix=pl';

function preload(){
    pat = loadImage(swimmer);
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    c2 = color(179, 77, 37);
    c1 = color(200, 200, 200);
    c = color(247, 222, 85);
 patY = height/2;
		

}



function waveback() {
	beginShape();
	stroke(250, 250, 255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 5, 0, height / 4);
        line(x, y + (height / 10), x, height); 
    }
    endShape();
}

function wavemidback() {
	beginShape();
	stroke(224, 224, 224);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 4, 0, height / 2);
        line(x, y + 15 + (height / 10), x, height); 
    }
    endShape();
}

function wavemidfront() {
	beginShape();
	stroke(192, 192, 192);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3.5, 0, height);
        line(x, y + 25 + (height / 10), x, height); 
    }
    endShape();
}

function wavefront() {
	beginShape();
	stroke(160, 160, 160);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3, 0, height);
        line(x, y + 50 + (height / 1.9), x, height); 
    }
    endShape();
	
	imageMode(CENTER);
    image(pat, width/1.5, (15*noise((width/5+xStart)))+height/2);
	xStart+=10;

}

 
function draw() {
    background("white");
    setGradient(0, 0, width, height / 3, c1, c2, yaxis);
    setGradient(0, height / 3, width, 2 * (height / 3), c2, c, yaxis);

    fill(247, 222, 125);
    //ellipse(width / 2, 25 + (height / 2), 50, 50);

    push();
    waveback();
    wavemidback();
    wavemidfront();
    wavefront();
    noFill();
    rect(0, 0, width, height);
    pop();
}



function setGradient(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yaxis) {  // Top to bottom gradient
	    for (var i = y; i <= y+h; i++) {
		    var inter = map(i, y, y+h, 0, 1);
		    var c = lerpColor(c1, c2, inter);
		    stroke(c);
		    line(x, i, x + w, i);
		}
	}

}

 

I came about this thinking that I wanted to do something just very very weird. I found this gif on giphy, but could not effectively call it in my code, I ended up resolving the issue by just moving the static image

Looking Outwards 10: Neri Oxman

Neri Oxman is well known for a plethora of things around Mediated Matter and creating Material Ecology. As an associate professor at MIT Media Lab, she’s a well-recognized artist, designer, and architect that speaks, most famously, about the intersection of design, technology, and biology. I want to focus specifically on her collaboration with another prolific female designer, Iris Van Herpen. Anthozoa is a wearable feat of 3D printing technology where they created a custom program to enable printing in both rigid and soft materials.

close-up of 3D printing advancement

 

Iris van Herpen X Neri Oxman

Project 09: Portrait

sketch

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/24gq2P9.jpg"
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noFill();
    stroke(theColorAtLocationXY);
    line(px, py, px, py+24);
    
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, 6, 6);

}

So like the code below wasn’t showing up and I literally did not understand what was wrong. I straight up have tried multiple methods of coding this, even duplicated the sample code(which should’ve worked) and it is still not returning the correct image. After a long period of troubleshooting I had to relent. I tried essentially the same code on a mac using the p5.js text editor and it finally worked. Still don’t really know what was wrong.

sketch try 2

// Samantha Ho
// sch1
// Project-09
// Section E

var underlyingImage;

function preload() {
    var myImageURL = "http://saho.studio/img/2018-06-28%2017_41_16.194.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480   , 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, 6, 6);

   
}

Looking Outwards 09

For this week I’m analyzing  Sean Meng’s review of Avatar from week 5.

It’s been a while since this movie came out and I had nearly forgotten the sheer computational power involved in this movie. To create such realistic environments and personalities, animators had to work with a new system of motion-capture that revolutionized the industry.

What I think is worth mentioning that not only on the generated computer graphics front, there was a huge amount of processing power necessary for the film to exist. The film used a company called Weta Digital and rendered the movie, which consisted of processing 8 gigabytes of data per second running 24 hours for over a month. Often each of Avatar’s frames took several hours to render. And when you consider that is just one frame out of 24 for every second of film, you can imagine why the major processing power at Weta Digital was needed.

avatar computer generated graphics

Project 07: Curves

sketch

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Project 07*/

var x;
var y;


function setup() {
	createCanvas(480 , 480);
        frameRate(25);
	}

function draw(){
 background(255, 255, 200);
    
    var nPoints = 20;
    var radius = 250;
    var separation = 125;
    
    // draw the squares in the back
    push();
    translate(2*separation, height / 4);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        rect(px - 5, py - 5, 10, 10);
    }
    pop(); 
    
    
    // draw the baseline squiggle 
    strokeWeight(1.5);
    stroke(0,0,255);
    fill(250, 255, 250, 80);
    push();
    translate(2*separation, height /2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * sin(theta);
        var py = radius * sin(theta);
        vertex(px + random(-5, 10), py + random(-5, 10));
    }
    endShape(CLOSE);
    pop();
    
    //green squiggle
    strokeWeight(1.5);
    stroke(0,190,200);
    fill(0, 195, 220, 80);
    push();
    translate(2*separation, height /2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * sin(theta);
        var py = radius * sin(theta);
        vertex(px + random(-mouseX/3, 10), py + random(-mouseX/3, 10));
    }
    endShape(CLOSE);
    pop();
    
    //yellow squiggle
    strokeWeight(1.5);
    stroke(0,190,200);
    fill(255, 255, 0, 80);
    push();
    translate(2*separation, height /2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * sin(theta);
        var py = radius * sin(theta);
        vertex(px + random(-mouseX/3, 10), py + random(-mouseX/3, 10));
    }
    endShape(CLOSE);
    pop();
  
}



After playing around with the circles and the graphs, I liked the animated rendering effect so I continued to play around. I created this layered squiggle and baseline whose form is contingent on the cursor’s X-position.

initial vibrating squiggle
max-position squiggle
minimum position squiggle

Looking Outwards 07: Nike Fuel

I really liked Fathom’s project with Nike because not only is it visually stunning, but also it’s extremely interactive with the user. The charts break down a user’s daily movement and visualizes their active lifestyle. This is really cool because this feature is enhances the entire Nike+ FuelBand system. It creates a collaborative community aspect to the product that further engages the user

year in NikeFuel

Additionally to the community aspect, the details and features of each graph are unique to the user completely.

The top of the poster serves as a unique “fingerprint” of a person’s behavior, routines, and lifestyle, while the bottom portion offers a detailed summary of their year in hard numbers.

No user will receive the same graph, thus the sharing aspect is further encouraged so people can share with their friends and compare.

Project 06: tap tap

sketch

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Assignment 03A*/

var x;
var y;
var m;
var size;
 

function setup() {
    createCanvas(500, 500);
    frameRate(10);
    
}
 /*
function isEven(tapIndex) {
   return tapIndex % 2 == 0;
}

function isOdd(n) {
   return Math.abs(tapIndex % 2) == 1;
} */

function draw() {
    background(240,250,255);
    noStroke();
    //time variables
    var tapIndex= second();
    var tapMiddle = minute();
    var tapThumb= hour();
    
    //THUMB 
    //raising and lifting the thumb every other hour
    if (tapThumb % 2 ==0){
    //thumb
    fill(251,189,154);
    beginShape();
    curveVertex(125, 290);
    curveVertex(86, 300);
    curveVertex(86,285);
    curveVertex(108, 270);
    curveVertex(114, 265);
    curveVertex(125, 260);
    endShape(CLOSE);
    //nail
    fill(255,255,255);
    beginShape();
    curveVertex(100, 280);
    curveVertex(86, 293);
    curveVertex(86,285);
    curveVertex(110, 266);
    curveVertex(106, 265);
    curveVertex(108, 260);
    endShape(CLOSE);
   } else{
       //thumb
    fill(251,189,154);
    beginShape();
    curveVertex(125, 280);
    curveVertex(86, 290);
    curveVertex(86, 280);
    curveVertex(108, 266);
    curveVertex(114, 265);
    curveVertex(125, 260);
    endShape(CLOSE);
    //nail
    fill(255,255,255);
    beginShape();
    curveVertex(98, 280);
    curveVertex(86, 283);
    curveVertex(86, 280);
    curveVertex(98, 266);
    curveVertex(100, 265);
    curveVertex(102, 260);
    endShape(CLOSE);
}
    
    
    
    //INDEX FINGER
    //tapping the index finger once every other second
    if (tapIndex % 2 ==0){
    //Index finger
    fill(251,189,154);
    beginShape();
    curveVertex(140, 235);
    curveVertex(140, 235);
    curveVertex(150, 245);
    curveVertex(150, 300);
    curveVertex(130, 300);
    curveVertex(130,245);
    endShape(CLOSE);
    //nail
    fill(251,255,255);
    beginShape();
    curveVertex(140, 283);
    curveVertex(140, 283);
    curveVertex(147, 286);
    curveVertex(147, 299);
    curveVertex(132, 299);
    curveVertex(132,286);
    endShape(CLOSE);
    } 
    //lift the index finger
    else {
   fill(251,189,154);
    beginShape();
    curveVertex(140, 235);
    curveVertex(140, 235);
    curveVertex(150, 245);
    curveVertex(150, 290);
    curveVertex(130, 290);
    curveVertex(130,245);
    endShape(CLOSE);
        
    //nail
     fill(251,255,255);
    beginShape();
    curveVertex(140, 272);
    curveVertex(140, 272);
    curveVertex(147, 274);
    curveVertex(147, 284);
    curveVertex(132, 284);
    curveVertex(132,274);
    endShape(CLOSE);
    }
    
    //MIDDLE FINGER
    //tapping middle finger every other minute
    if (tapMiddle % 2 == 0){
    //middle finger
    fill(251,189,154);
    beginShape();
   curveVertex(164, 230);
    curveVertex(164, 230);
    curveVertex(175, 240)
    curveVertex(175, 300);
    curveVertex(155, 300);
    curveVertex(155,240);
    endShape(CLOSE);
    //nail
   fill(251,255,255);
    beginShape();
    curveVertex(168, 283);
    curveVertex(168, 283);
    curveVertex(172, 286);
    curveVertex(172, 300);
    curveVertex(158, 300);
    curveVertex(158, 286);
    endShape(CLOSE);
    }else{
    //middle finger
    fill(251,189,154);
    beginShape();
   curveVertex(164, 230);
    curveVertex(164, 230);
    curveVertex(175, 240)
    curveVertex(174, 289);
    curveVertex(155, 289);
    curveVertex(155,240);
    endShape(CLOSE);
    //nail
   fill(251,255,255);
    beginShape();
    curveVertex(166, 272);
    curveVertex(166, 272);
    curveVertex(172, 274);
    curveVertex(172, 284);
    curveVertex(158, 284);
    curveVertex(158, 274);
    endShape(CLOSE);
    }
    
    
    //RING FINGER   
    fill(251,189,154);
    beginShape();
    curveVertex(190, 230);
    curveVertex(190, 230);
    curveVertex(200, 240)
    curveVertex(200, 300);
    curveVertex(180, 300);
    curveVertex(180,240);
     endShape(CLOSE);
    //nail
    fill(251,255,255);
    beginShape();
    curveVertex(190, 282);
    curveVertex(190, 282);
    curveVertex(197, 286);
    curveVertex(197, 300);
    curveVertex(184, 300);
    curveVertex(183, 286);
    endShape(CLOSE);
    
    
    //PINKY FINGER   
    fill(251,189,154);
    beginShape();
    curveVertex(216, 242);
    curveVertex(216, 242);
    curveVertex(223, 250)
    curveVertex(223, 300);
    curveVertex(205, 300);
    curveVertex(205, 250);
    endShape(CLOSE);
    //nail
    fill(251,255,255);
    beginShape();
    curveVertex(214, 284);
    curveVertex(214, 284);
    curveVertex(220, 286);
    curveVertex(220, 300);
    curveVertex(208, 300);
    curveVertex(208, 286);
    endShape(CLOSE);
}

  

This is my abstract clock. It was challenging to get the fingers to tap and I ended up using a modulus to determine if the number values were even or odd. Pretty proud of myself to be honest. The index finger taps every other second, the middle finger every other minute, and lastly the thumb every other hour.