Steamboat Willie (1928), a famous Disney animation that demonstrates Disney’s earliest attempts toward animations with realistic sound.

Animation studios started putting background music and soundtrack into their animations in the 1920s and the 30s. With the Jazz Singer (1928) being the earliest form of “talking picture,” the sound technology got more acknowledged in the animation industry. Warner Bros. and Disney animations were the two biggest studios that sought to realize the sound of outside world into animations. One of the most famous works by Disney, Steamboat Willie (1928) introduced the world with synchronized soundtrack. It was so remarkable at the time that made this whole picture of Mickey Mouse whistling into the iconic symbol of Walt Disney Studio. The recording machines were enormous at the time that limited technicians to record the actual sound from the outside world. So Disney hired musicians, especially percussionists to imitate various sounds that imitate what is happening outside of their studio. With new computational technique in the music industry, people’s conceptions toward animations changed drastically.

sketch

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project - 04 - String Art */


function setup() {
    createCanvas(300, 400);
    background(10);
}

function draw() {
    var changeX = 10;  // changing increment of x
    var changeY = 20;  // changing increment of y
    var lineX = 10;
    var lineY = -10;

    for (var m = 10; m <= 500; m += 10) { // 1st layer : sun beam
        stroke(240, 200, 120);
        strokeWeight(1.5);
        line(100, m, m, m);
        lineX += changeX;
        lineY += changeY;
    }

    for (var i = 0; i < 400; i += 10) { // 1st layer of the wave (light purple), filling the left bottom
        stroke(120, 80, 120);
        strokeWeight(1);
        line(0, i, i, 400);
        lineX -= changeX;
        lineY += changeY;
    }

    for (var j = 0; j <= 300; j += 10) {
        stroke(180, 80, 170); // 2nd layer of the wave (purple)
        strokeWeight(1.5);
        line(20, j, j, 300);
        lineX += changeX;
        lineY += changeY;

        stroke(230, 100, 70); // 3rd layer of the wave (orange)
        strokeWeight(1);
        line(50, j, j, 270);

        stroke(240, 40, 30); // 4th layer of the wave (red)
        line(70, j, j, 220);
    }
}

When I heard about string art, I had the impression that it is very wavy. With different layers of intersecting lines, the drawing starts to have three dimensional flow even though it is two dimensional. I wanted to to incorporate this into one of my favorite sports, surfing. I used different layers to show the movement of the waves, as well as rather systematic lines to show the bright sunlight at beaches.

sketch

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project-03 */

function setup() {
    createCanvas(640, 480);
}

function draw() {
    // background color changes based on mouse position
    var bckX = mouseX / width * 150;
    var bckY = mouseY / height * 150;
    background(bckX, 0, bckY);
    noStroke();

    var sqSize = 80;
    var sqPosX = 20;
    fill(255);

    // bigger circle, bigger, clockwise
    push();
    translate(width / 2, height / 2);
    rotate(mouseX / 400);
    rect(sqPosX + 20, sqPosX + 20, mouseX + 20, mouseX + 20);
    pop();

    // smaller square, bigger, counter-clockwise
    push();
    translate(width / 2, height / 2);
    rotate(mouseX / -400);
    rect(sqPosX - 20, sqPosX + 20, mouseX + 10, mouseX + 10);
    pop();

    // circle appears in the middle
    push();
    translate(width / 2, height / 2);
    ellipse(sqPosX - 20, sqPosX - 20, mouseX / 5, mouseX / 5);
    pop();

    // black circlr appears in the circle
    push();
    fill(0);
    translate(width / 2, height / 2);
    ellipse(sqPosX - 20, sqPosX - 20, mouseX / 40, mouseX / 40);
    pop();

    // non-rotating enlarging rect
    var move = max(min(mouseX, 700), 0);
    var big = move * 4;
    fill(200, bckY, bckX);
    rect(300 + move, 180 + move, big, big);
}

I was randomly playing with the rotation and translations of simple geometries. I found out that it would be really interesting if I played around with the depth and perspective in this animation. I programmed the colors and sizes of the shapes to transform so to achieve the dynamic and interactive animation that I wanted to make.

In the highly parametric society we have today, architects are getting more interested in biomimetics. Using generative modeling, architects and designers  utilize computational science to create systematic pattern and structure that mimic the ecology of the nature. Achim Menges has his research field concentrated at the area of digital fabrication and computational design in relations to morphology. In this project, he attempts to integrate biomimetic investigations and cutting-edge robotic fabrication together. Menges employs fiber as the outer skin that wraps the whole structure, which in other words, is demonstrating how natural organic materials and artificial steel frames harmonize the overall design of the installation. Achim Menges tries to challenge the conventional ways of thinking towards architecture, and approaches to the designs that unfold morphological complexity. Trying to find a balance between the opposites such as space and material, form and structure, Menges uses digital fabrication to create novel designs that have not yet been done previously.

The link below has more detailed information about this installation.

ICD/ITKE Research Pavilion 2013/14, Design Society

The field of architecture has been developing a new type of design strategy in the past few decades. Based on conventional modern space designs, some architects are passionate about so-called “parametric design,” which is a style of architectural design that is generated through the use of algorithms and computer programming. One of the most well-known pioneers of this field is the principal of Zaha Hadid Architects Patrik Schumacher. Schumacher spearheaded this concept called “parametricism.” This type of  design methodologies are highly computer-based, employing 3D modeling softwares like Rhino and Revit, as well as scripting platforms like Grasshopper and GH Python. Generative modeling enables complex forms and structures to be created through scripts easily, which is almost impossible to model by hand. However, the fabrication methods are not caught up with the parametric designs that architects theorize today. Fabrication of parametric architecture requires an extraordinary amount of money and time. In fact, the original design of the 2020 main stadium of the Olympics in Tokyo, designed by Zaha Hadid, was renounced because of the difficulties in terms of the budget.

Though still encountering a lot of difficulties in the reality, parametric architecture is a theory that will dominate the architecture industry sooner or later. As architecture majors, we heavily focus on modern world software society, and we take generative modeling courses that teach grasshopper and gh python. Getting more familiar with parametric architecture, I am looking forward to capturing more of the yet abstract concepts and theories about algorithms in the field of art and architecture.

sketch

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project-02 */

// shape variables
var faceW = 280;
var faceH = 380;
var eyeSize = 50;
var mouthSize = 70;
var noseH = 70;
var noseW = 30;
// color variables
var mouthColor = 200;
var skinColor = 220;
var eyeColor = 80;


function setup() {
    createCanvas(630, 480);
}

function draw() {
    background(220, 50, 120);
    noStroke();
    // hair
    fill(70,20,130);
    ellipse(width/2, height/2.5, faceW*1.2, faceH/2);
    // drawing face
    fill(skinColor, 180, 95);
    ellipse(width/2, height/2, faceW, faceH);
    // eye
    fill(240);
    ellipse(width / 2 - 0.2 * faceW, height / 2, eyeSize, eyeSize);
    ellipse(width / 2 + 0.2 * faceW, height / 2, eyeSize, eyeSize);
    // pupils
    fill(50, 60, eyeColor);
    ellipse(width / 2 - 0.2 * faceW, height / 2.1, eyeSize / 3, eyeSize / 3);
    ellipse(width / 2+ 0.2 * faceW, height / 2.1, eyeSize / 3, eyeSize / 3);
    // nose
    fill(skinColor, 20, 170);
    rect(width / 2 - noseW / 2, height / 1.8, noseW, noseH);
    // mouth
    fill(mouthColor, 20, 80);
    ellipse(width / 2, height / 2 + faceH / 2.5, mouthSize * 1.4, mouthSize);
}

function mousePressed() {
    faceW = random(200, 320);
    faceH = random(250, 400);
    eyeSize = random(30, 100);
    mouthSize = random(20, 100);
    skinColor = random(150, 220);
    eyeColor = random(20, 180);
    noseH = random(20,100);
    noseW = random(10, 40);
    mouthColor = random(100, 255);
}

This project was more interesting than the previous project because variable faces create an interactive platform between the developer and the viewers. A lot of interfaces are meant to produce an interlinked space between different people, and I am glad that I scripted something a little closer to that kind of program.

I first encountered Pixar when I just got into elementary school. I had watched a lot of two dimensional cartoons. Animations were not really a special thing. But when I saw a Pixar movie, I was astonished. How can people make an animation in such realistic forms and movements. It seemed to be a magic to me that designers and computer scientists could generate such realistic and stylistic animation on computers.

Pixar began in 1979 under a group of talented people. Edwin Catmull and Steve Jobs, two of the most important figures, changed the whole animation  industry as well as the film industry. The GCI animations were just as realistic and complex as real man actings. With its unique concepts and messages hidden in each film, Pixar’s animations immediately became well-known starting from the masterpiece Toy Story (1995).

I am currently learning a lot about three dimensional modeling and renderings, and I started to formerly understand the complexity and difficulties behind just creating one three dimensional rendering. Pixar invented its own rendering software, Renderman, and contributed greatly to the virtual computer graphics in the recent decades. Pixar appeared to be a magic when I was little, but now, I am starting to grasp the tricks behind those magics.

sketch-169.js

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project-01 */

function setup() {
    createCanvas(500, 600);
    background(1,92,180);
}

function draw() {
    noStroke();
    // face and neck
    fill(217,174,90);
    rect(58,400,100,50);
    ellipse(110,260,240,310);
    // eyes (white)
    fill(244,242,230);
    arc(60,250,80,80,0,PI,OPEN);
    arc(160,250,80,80,0,PI,OPEN);
    // eyes (black)
    fill(10,10,10);
    arc(66,250,40,40,0,PI,OPEN);
    arc(155,250,40,40,0,PI,OPEN);
    // eyes (small dots)
    fill(150);
    ellipse(68,255,10,10);
    ellipse(160,255,10,10);
    // mouth
    fill(219,37,26);
    ellipse(110,367,97,20);
    // nose
    fill(166,127,44);
    rect(115,280,4,50);
    // hair
    fill(223,195,114);
    arc(50,130,250,250,0,PI);
    ellipse(110,130,240,120);
    arc(180,130,200,200,0,PI+QUARTER_PI,PIE);
    // shirt
    fill(129,204,235);
    quad(58,450,158,450,230,500,-20,500);
    rect(-10,560,238,50);
    fill(220,220,220);
    rect(-10,500,238,60);
}

It was my first time programming and I thought it was impossible to draw a face using codes. Figuring out the coordinates and color parameters, I slowly understood how programming works, and the portrait turned out better than I expected.