## 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

``````//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

``````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

``````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();