Author: Yunzhou Song

yunzhous-Looking Outward-03

Oblique Circulation 3

My eyes were immediately drawn to this image when I opened Pinterest. I’m an architecture student and this computer-generated building looks almost magical to me. As an architectural student I need to think about how to divide up space when I design. Using algorithm to do the work might not be the most functional solution but the result is definitely interesting. The artists tries to show circulation around the building through computer-generated curves. I didn’t find what algorithm the artist used but this reminds me of Grasshopper, a plug-in for Rhino that architect students often uses. Grasshopper is designed for parametric modeling. Using grasshopper to generate geometries is like using grasshopper’s language to tell it to do certain things.
The artist is Benjamin Dillenburger and the work title is Oblique Circulation 3. You can see more of his work here.

yunzhous-project-03

sketch

//elephant
var LeftEarW = 110;
var LeftEarH = 150;
var RightEarW = 70;
var RightEarH = 100;
//heights of mountains
var mh1 = 150;
var mh2 = 230;
var mh3 = 260;
var mh4 = 300;
var mh5 = 200;
var Y = 300; // y coordinate of snow
var R = 229;    
var G = 247;
var B = 224;

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

function draw() {
    background(R, G, B);
    //skycolor change
    if (mouseX > 0 & mouseX < width){
        R = 229 - mouseX/20;
        G = 247 - mouseX/50;
        B = 224 + mouseX/20;
    }
    
    //mountains
    //mountains decrease
    if (mouseX < width/2){
        mh1 ++;
        mh2 ++;
        mh3 ++;
        mh4 ++;
        mh5 ++;
    }

    //mountain stop decreasing
    if (mh1 > 250){
        mh1 = 250;
    }
    if (mh2 > 330){
        mh2 = 330;
    }
    if (mh3 > 360){
        mh3 = 360;
    }
    if (mh4 > 400){
        mh4 = 400;
    }
    if (mh5 > 300){
        mh5 = 300;
    }

    //mountains increase
    if (mouseX > width/2){
        mh1 --;
        mh2 --;
        mh3 --;
        mh4 --;
        mh5 --;
    }

    //mountains stop increasing
    if (mh1 < 150){
        mh1 = 150;
    }
    if (mh2 < 230){
        mh2 = 230;
    }
    if (mh3 < 260){
        mh3 = 260;
    }
    if (mh4 < 300){
        mh4 = 300;
    }
    if (mh5 < 200){
        mh5 = 200;
    }
    //mountains
    noStroke();
    fill(185, 230, 191);
    triangle(400, height, 700, height, 530, mh1);
    fill(164, 201, 169);
    triangle(300, height, 700, height, 470, mh2);
    fill(97, 147, 147);
    triangle(300, height, 400, height, 350, mh3);
    triangle(450, height, 580, height, 520, mh4);
    fill(62, 109, 92);
    triangle(360, height, 500, height, 430, mh5);

    //sun turns to moon
    fill(255, 255, 238);
    ellipse(mouseX, 90, 70, 70);

    if (mouseX > width/2){
        var offset = map(mouseX, 0, width, 100, 0); //offset of the ellipse to make moon
        fill(R, G, B);
        ellipse(mouseX - offset, 90, 70, 70);
    }

    //snow
    if (mouseX > width/2){
        Y ++;
        if (Y > 400){
            Y = 400;
        } 
    } else {
        Y = 300;
    }
    fill(255, 255, 238);
    ellipse(350, Y, 10, 10);
    ellipse(390, Y + 20, 10, 10);
    ellipse(450, Y - 30, 10, 10);
    ellipse(500, Y + 40, 10, 10);
    ellipse(530, Y + 20, 10, 10);
    ellipse(600, Y - 50, 10, 10);

    //elephant
    //body
    push();
    translate(-150, 130);
    noStroke();
    fill(210);
    beginShape();
    curveVertex(200,  250);
    curveVertex(220,  260);
    curveVertex(175,  330);
    curveVertex(165, 400);
    curveVertex(300, 400);
    curveVertex(330, 240);
    curveVertex(350, 240);
    endShape();
    pop();

    push();
    translate(-150, 130);
    var angle = map(mouseX, 0, width, 0, 5);
    rotate(angle);
    if (mouseX > 640){
        mouseX = 640;
    }

    //right ear
    push();
    rotate(10);
    noStroke();
    fill(210);
    ellipse(270, 120, RightEarW, RightEarH);
    fill(252, 225, 225);
    ellipse(270, 120, RightEarW/1.5, RightEarH/1.5); //inner ear
    pop();

    //Left ear
    noStroke();
    fill(210);
    ellipse(220, 210, LeftEarW, LeftEarH);
    fill(252, 225, 225);
    ellipse(220, 210, LeftEarW/1.5, LeftEarH/1.5); //inner ear

    //face
    noStroke();
    fill(210);
    ellipse(300, 220, 150, 150);

    //eye
    fill(50, 32, 32);
    ellipse(345, 220, 10, 10);

    //cheek
    fill(232, 200, 200);
    ellipse(330, 250, 35, 20);
   

    //nose
    fill(210);
    beginShape();
    curveVertex(350, 200);
    curveVertex(355, 190);
    curveVertex(375, 180);
    curveVertex(425, 130);
    curveVertex(420, 145);
    curveVertex(420, 175);
    curveVertex(400, 195);
    curveVertex(390, 220);
    curveVertex(365, 255);
    curveVertex(365, 260);
    endShape();

    fill(255, 255, 238);
    ellipse(450, 150, 10, 10);
    ellipse(470, 110, 10, 10);
    pop();

}

In this project, I try to depict the change from day to night. The background color, the sun and moon, the snow, and the elephant’s head all changes with mouseX. I also use map function to set limit for the change.

yunzhous-Project-02-Variable-Face

sketch

var faceD = 150;
var cheekW = 35;
var cheekH = 20;
var LeftEarW = 110;
var LeftEarH = 150;
var RightEarW = 70;
var RightEarH = 100;
var R = 252;
var G = 200;
var B = 200;
var BubbleD = 40; // diameter of bubble
var x = 425; //point position of nose
var y = 130; //point position of nose
var eyeW = 10;
var eyeH = 10;
var Px = 240; //point position of line

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

function mousePressed() {
    faceD = random(150, 170);
    LeftEarW = random(100, 180);
    LeftEarH = random(145, 185);
    RightEarW = random(60, 140);
    RightEarH = random(95, 135);
    R = random(200, 255);
    G = random(100, 220);
    B = random(100, 220);
    BubbleD = random(20, 60);
    x = random(415, 475);
    y = random(110, 170);
    Px = random(240, 280);
    eyeW = random(10, 20);
    eyeH = random(10, 20);

}

function draw() {
    background(255, 236, 236);
    
    //body
    noStroke()
    fill(210);
    beginShape();
    curveVertex(200,  250);
    curveVertex(220,  260);
    curveVertex(175,  330);
    curveVertex(165, 400);
    curveVertex(300, 400);
    curveVertex(330, 240);
    curveVertex(350, 240);
    endShape();

    //body division
    stroke(50, 32, 32);
    strokeWeight(2);
    curve(240, 300, 240, 350, 290, 330, 300, 330);
    line(260, 345, Px, 400)

    //right ear
    push();
    rotate(10);
    noStroke();
    fill(210);
    ellipse(270, 120, RightEarW, RightEarH);
    fill(252, 225, 225);
    ellipse(270, 120, RightEarW/1.5, RightEarH/1.5); //inner ear
    pop();

    //Left ear
    noStroke();
    fill(210);
    ellipse(220, 210, LeftEarW, LeftEarH);
    fill(252, 225, 225);
    ellipse(220, 210, LeftEarW/1.5, LeftEarH/1.5); //inner ear

    //face
    noStroke();
    fill(210);
    ellipse(300, 220, faceD, faceD);

    //eye
    fill(50, 32, 32);
    ellipse(345, 220, eyeW, eyeH);

    //cheek
    fill(R - 20, G - 20, B - 50);
    ellipse(330, 250, cheekW, cheekH);
   

    //nose
    fill(210);
    beginShape();
    curveVertex(350, 200);
    curveVertex(355, 190);
    curveVertex(375, 180);
    curveVertex(x, y);
    curveVertex(x - 5, y +15);
    curveVertex(x - 5, y + 45);
    curveVertex(400, 195);
    curveVertex(390, 220);
    curveVertex(365, 255);
    curveVertex(365, 260);
    endShape();

    //bubble
    fill(R, G, B);
    ellipse(x + 25, y + 20, BubbleD, BubbleD); //large bubble
    fill(255);
    ellipse(x + 25, y + 20, BubbleD*.7, BubbleD*.7); //white part
    fill(R, G, B)
    ellipse(x + 22, y + 17, BubbleD*.7, BubbleD*.7); //to cut white part
}

I wanted to make an elephant whose ear size, nose length and cheek color changes. In this project I tried out the curveVertex function. It was very confusing at first but I gradually learned how it works.

yunzhous-LookingOutward-02

The artwork I chose is the “Matrizenmultiplikation, Serie 40” by Frieder Nake. Using the right colors and combining colors is hard. It can be troubling when making such decision. What if the computer helped us to make the decision? I really appreciate the variety of colors and the saturation in the artwork. I think the computer has generated a beautiful image. The software that the artist used is called Matrizenmultiplikation in Algol60. I suppose the artist set a grid system through the algorithm and assign made many categories of colored squares. Then the colored squares would randomly be scattered in the grid system to make color combinations. I think Nake shows hist artistic sensibilities through dividing the grid system into several areas and each area can only have certain number of random colors. This way the colors won’t be all randomly mixed together. They would have certain order while still being random. I think it would be interesting to try out more shapes than grid system.
You can see the work here

yunzhous- Looking Outwards 01


Flower Forest1

Flower Forest2


Flower Forest3

I went to this immersive and interactive art exhibition by TeamLab this summer. The exhibition was installed in eight rooms, each room featuring one theme. The theme that interested the most is the Flower Forest. The exhibition uses digital technology to blur the boundaries between the physical world and the digital world. People can interact with the flowers, grow them, move them around, etc. The flower also “grow” on people’s clothing. I suppose the artists used commercial software because this installation only requires a sensor to detect people’s motion. A custom software wouldn’t be necessary.
I really admire the concept of the exhibition. In comparison with the traditional art exhibition where the audience should stay away from the artwork, the artists intend to have the audience to touch, feel, and even interact with the artwork. The audience can understand the artwork from their own perspective and I think it’s pretty amazing.

You can view more images here

yunzhous-Project-01-Face

yunzhous-project-01-face

function setup() {
    createCanvas(500, 500);
    background(241, 163, 111);

}

function draw() {
    

    translate(0, 65);

    //hair
    fill(0);
    ellipse(width/2, 130, 160, 160);
    rectMode(CENTER);
    rect(width/2, 250, 160, 240);

    //hat
    fill(251, 197, 197);
    noStroke();
    triangle(325, 0, 250, 50, 325, 100);
    ellipse(325, -5, 25, 25);

    //face
    noStroke();
    fill(240, 206, 183);
    ellipse(width/2, 150, 130, 140);

    //ears
    fill(240, 206, 183);
    ellipse(183, 155, 20, 25);
    ellipse(317, 155, 20, 25);

    //dark circles
    fill(125, 60);
    arc(220, 158, 25, 20, 0, PI);
    arc(280, 158, 25, 20, 0, PI);
    fill(240, 206, 183);
    ellipse(220, 152, 25, 20);
    ellipse(280, 152, 25, 20);

    //eyes
    fill(255);
    ellipse(220, 150, 25, 20);
    ellipse(280, 150, 25, 20);
    fill(0);
    ellipse(224, 152, 14, 14);
    ellipse(284, 152, 14, 14);

    //eyebrows
    stroke(0);
    strokeWeight(4);
    line(205, 135, 235, 125);
    line(265, 125, 295, 135);

    //nose
    stroke(0);
    strokeWeight(2);
    line(width/2, 160, width/2, 165);

    //smile
    noFill();
    strokeWeight(2);
    arc(250, 180, 30, 15, 0, PI);

    //dimple
    noStroke();
    rotate(radians(20));
    translate(46, -102);
    fill(245, 169, 157, 97);
    ellipse(275, 180, 8, 5);

    //bang
    fill(0);
    rotate(PI/4);
    translate(50, -140);
    ellipse(176, 79, 45, 100);

}

I sketched this out on my sketchbook first, and then draw them using Sublime. The most time consuming part is testing and moving the xy coordinates.