## Katherine Hua – Project 02 – Variable Face

``````/*
Katherine Hua
Section A
khua@andrew.cmu.edu
Project-02
*/

var x = 60;
var y = 120;
var z = 180;
var a = 240;
var b = 300;
var c = 360;
var d = 420;
var e = 3;
var f = 477;
var speed = 1;
var backgroundColorR = 250;
var backgroundColorG = 250;
var backgroundColorB = 250;
var eyeWidth = 30;
var eyeHeight = 30;
var pupilWidth = 5;
var pupilHeight = 5;
var skin = 30;
var lips = 0;
var hair = 0;
var brows = 0;
var cheekColorR = 245;
var cheekColorG = 195;
var cheekColorB = 194;

function setup() {
createCanvas(480, 640);
background(backgroundColorR, backgroundColorG, backgroundColorB);
}

function draw() {

//background
background(backgroundColorR, backgroundColorG, backgroundColorB);

ellipse(x, 80, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 160, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 240, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 320, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 400, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 480, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 560, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
//y
ellipse(y, 80, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 160, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 240, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 320, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 400, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 480, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 560, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
//z
ellipse(z, 80, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 160, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 240, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 320, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 400, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 480, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 560, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
//a
ellipse(a, 80, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 160, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 240, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 320, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 400, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 480, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 560, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
//b
ellipse(b, 80, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 160, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 240, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 320, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 400, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 480, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 560, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
//c
ellipse(c, 80, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 160, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 240, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 320, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 400, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 480, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 560, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
//d
ellipse(d, 80, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 160, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 240, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 320, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 400, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 480, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 560, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
//e
ellipse(e, 80, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 160, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 240, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 320, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 400, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 480, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 560, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
//f
ellipse(f, 80, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 160, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 240, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 320, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 400, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 480, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 560, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}

//character shape
strokeWeight(5);
point(0, 640);
point(40, 440);
point(70,320);
point(150, 160);
point(300, 160);
point(380, 300);
point(420, 440);
point(480, 640);
strokeWeight(5);
fill(250-skin, 223-skin, 198-skin);
beginShape();
curveVertex(0, 640);
curveVertex(0, 640);
curveVertex(40, 440);
curveVertex(70, 320);
curveVertex(150, 160);
curveVertex(300, 160);
curveVertex(380, 300);
curveVertex(420, 440);
curveVertex(480, 640);
curveVertex(480, 640);
endShape();
beginShape();
curveVertex(120, 500);
curveVertex(120, 500);
curveVertex(170, 560);
curveVertex(210, 565);
curveVertex(170, 440);
curveVertex(150, 400);
curveVertex(150, 440);
endShape();
beginShape();
curveVertex(360, 500);
curveVertex(360, 500);
curveVertex(310, 560);
curveVertex(270, 565);
curveVertex(310, 440);
curveVertex(330, 400);
curveVertex(330, 440);
endShape();

//hair
if (hair < 1) {
fill(0, 0, 0)
arc(230, 280, 300, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 2) {
fill(0, 0, 0)
arc(230, 280, 350, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
fill(0,0,0);
rect(52, 275, 50, 125, 5);
rect(358, 275, 50, 125 ,5);
}
else if (hair < 3) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(120, 120, 75, 75);
ellipse(340, 120, 75, 75);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 4) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(57, 280, 80, 50);
ellipse(403, 280, 80, 50);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}

//brows
if (brows < 1) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
arc(270, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
}
else if (brows < 2) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI, PI+HALF_PI);
arc(270, 275, 30, 30, PI+HALF_PI, 0);
}
else if (brows < 3) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+HALF_PI, 0);
arc(270, 275, 30, 30, PI, PI+HALF_PI);
}
else if (brows < 4) {
stroke(0,0,0);
noFill();
arc(180, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
arc(270, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
}

//eyes
//whites
fill(255);
ellipse(180, 300, eyeWidth, eyeHeight);
ellipse(270, 300, eyeWidth, eyeHeight);
//pupil
fill(0);
ellipse(180, 300, pupilWidth, pupilHeight);
ellipse(270, 300, pupilWidth, pupilHeight);

//lips
if (lips < 1) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
}
else if (lips < 2) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
}
else if (lips < 3) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}
else if (lips < 4) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}

//cheeks
fill(cheekColorR, cheekColorG, cheekColorB);
noStroke();
ellipse(140, 320, 40, 20);
ellipse(320, 320, 40, 20);

stroke(0,0,0);
}

function mousePressed() {
backgroundColorR = random(200, 255);
backgroundColorG = random(137, 255);
backgroundColorB = random(175, 255);
eyeWidth = random (30, 40);
eyeHeight = random(15, 30);
pupilWidth = random(1,7);
pupilHeight = random(1,7);
skin = random(1, 150);
lips = random(4);
hair = random(4);
brows = random(4);
cheekColorR = random(220, 255);
cheekColorG = random(180, 255);
cheekColorB = random(139, 255);
}

``````

This character is inspired by one of my favorite visual artists, Ton Mak’s character, flabjacks. At first, I had a difficult time figuring out how to randomize characteristics such as the mouth, hair, and eyebrows because the it was not simply randomizing components such as width, height, and color. Finally, after a lot of trial and error, I figured out I could use the if, else if functions to accomplish what I wanted. This project also allowed me to become more familiar with the arc and curveshape functions.

## Katherine Hua – LookingOutwards – 02

Parag K. Mital is an audiovisual computational artist and researcher. He creates his artwork through the building of artificial intelligence algorithms. I am captivated by the way Mital has explored deep learning, machine learning, film, eye-tracking, EEG, and fMRI recordings to generate his artistic productions.  In his work “In the Style of Klee,” he utilizes these generative model processes and constructs an audiovisual perception of what looks like a video from the view from a car window as the car is driving through the streets. In this piece of work, it can be seen that it is inspired by the art style of Paul Klee. I admire how the Mital is able to bring what looks like a painting with Paul Klee’s style to life. He demonstrates the complexity yet simplicity of traditional fine art styles and brings it together with modern experimental generative art, giving his audience a unique film experience through traditional art and generative augmented computational science.

“In the Style of Klee” by Parag K. Mital, 2015

## LookingOutward-01

Japan holds technological fascinations that are perhaps years ahead of US day-to-day technology. That’s why it’s no wonder why the world’s first digital art museum (by digital art collective teamLab and Mori Building)  opened in Tokyo, opening up a world that projects fantasy onto an immersive setting. The environment reflects child-like imagination and wonders, and although this does attract many children, it also engorges adults with elicited feelings of nostalgia.

The exhibits also elicit feelings of awe and innocence due to the sheer beauty of the many colors that are on display. I thought that this is truly the most immersive work of art that I could ever encounter and that because the works requires and reacts to human interaction, that the art is truly an experience more than a medium. Perhaps it was the artists’ intentions to throw the audience’s visuals and to promote “thinking out of the box”.

## Katherine Hua – Project01- Face

``````function setup() {
createCanvas(600,600);
background(237, 176, 176);
}

function draw() {
noStroke();
//background
fill(209, 52, 126);
rect(25, 25, 550, 550);
fill(246, 192, 66);
rect(50, 50, 500, 500);
fill(237, 176, 176);
rect(75, 75, 450, 450);
fill(209, 52, 126);
rect(100, 100, 400, 400);
//hair
fill(30, 22, 18);
ellipse(300,250, 450, 450);
rect(75, 250, 450, 500);
//body
fill(247, 197, 82);
ellipse(325, 700, 375, 500);
//face shape
fill(251, 227, 167);
quad(150, 300, 400, 150, 500, 250, 250, 400);
arc(325, 300, 350, 400, 0, PI, CHORD);
rect(400, 250, 100, 50);
//hairline
ellipse(337.5, 200, 170, 150);
quad(260, 170, 150, 300, 250, 350, 300, 300);
ellipse(405, 200, 100, 100);
quad(450, 180, 500, 250, 450, 300, 400, 290);
//eyes
//undereye
fill(236, 198, 179);
ellipse(260, 310, 40, 50);
ellipse(420, 310, 40, 50);
fill(251, 227, 167);
ellipse(265, 305, 50, 50);
ellipse(425, 305, 50, 50);
//white part
fill(255, 255, 255);
ellipse(265, 300, 40, 50);
ellipse(425, 300, 40, 50);
//pupil
fill(40, 24, 23);
ellipse(270, 295, 25, 35);
ellipse(430, 295, 25, 35);
fill(255, 255, 255)
ellipse(260, 300, 10, 10);
ellipse(420, 300, 10, 10);
//eyelash
fill(40, 24, 23);
ellipse(285, 275, 15, 15);
ellipse(445, 275, 15, 15);
fill(251, 227, 167);
ellipse(282, 270, 18, 15);
ellipse(442, 270, 18, 15);
fill(40, 24, 23);
ellipse(265, 280, 50, 10);
ellipse(425, 280, 50, 10);
//eyebrows
ellipse(265, 250, 50, 10);
ellipse(425, 250, 50, 10);
//mouth
fill(240, 178, 151);
ellipse(325, 415, 80, 80);
fill(251, 227, 167);
ellipse(330, 380, 80, 50);
//nose
fill(240, 178, 151);
ellipse(365, 360, 30, 40);
fill(251, 227, 167);
ellipse(361, 363, 27, 32);
}``````

Doing this project made me look at my face in terms of the shapes that make it up. I first sketched out my self character on paper, and then looked for what shapes could create this drawing.