![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
/*
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.
