![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-02
var val = 0
var headW = 400
var headH = 371
var backR = 225
var backG = 225
var backB = 225
function setup() {
createCanvas(600,600);
backR = random(0,255);
backG = random(0,255);
backB = random(0,255);
background(backR,backG,backB);
}
//when mouse is clicked, do these functions
function mouseClicked() {
if (val <= 0) {
//sad background
backR = random(0,43);
backG = random(151,255);
backB = random(207,255);
push(new sad);
val += 1;
} else{
//angry background
if (val == 1) {
backR = random(188,255);
backG = random(0,30);
backB = random(0,55);
push(new hungry);
val += 1;
} else{
//happy background
backR = random(180,255);
backG = random(190,255);
backB = random(0,50);
push(new happy);
val = 0;
}
}
}
function sad() {
headW = random(300,400);
background(backR,backG,backB);
//hair
strokeWeight(0);
fill(132,81,36);
triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
//shadow
fill(132,81,36);
ellipse(width/2,280,headW+15,headH - 11);
ellipse(125,height/2,190,170);
ellipse(475,height/2,190,170);
strokeWeight(0);
//ears
fill(194,128,69);
ellipse(125,height/2,171,157);
ellipse(476,height/2,171,157);
fill(234,161,178);
ellipse(125,height/2,119,105);
ellipse(475,height/2,119,105);
//head
fill(194,128,68);
ellipse(width/2,height/2,headW,headH);
fill(249,214,159);
ellipse(220,height/2,175,216);
ellipse(380,height/2,175,216);
ellipse(300,388,390,255);
ellipse(300,468,209,124);
//eyes
strokeWeight(1);
fill(255);
ellipse(230,312,115,115);
ellipse(375,312,115,115);
fill(0);
ellipse(230,312,65,65);
ellipse(375,312,65,65);
strokeWeight(0);
fill(255);
ellipse(248,293,20,20);
ellipse(390,290,20,20);
//nose
fill(194,128,68);
ellipse(width/2,420,105,105);
ellipse(width/2,455,168,115);
//mouth
strokeWeight(3);
arc(width/2,470,145,65, PI,0);
//nostrils
fill(0);
strokeWeight(0);
ellipse(285,403,20,20);
ellipse(318,403,20,20);
//eyebrows
fill(110,75,33);
ellipse(208,226,50,45);
ellipse(385,226,50,45);
fill(249,214,159);
ellipse(201,222,70,41);
ellipse(395,222,70,41);
//worrymark
strokeWeight(2);
arc(400,470,5,12,HALF_PI, 3*HALF_PI);
arc(200,470,5,12,3*HALF_PI, HALF_PI);
//eyebag
fill(132,81,36);
strokeWeight(0);
ellipse(222,385,40,11);
ellipse(380,385,40,11);
}
function hungry() {
headW = random(350,400);
background(backR,backG,backB);
//hair
fill(132,81,36);
triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
//shadow
fill(132,81,36);
ellipse(width/2,280,headW+15,headH - 11);
ellipse(125,height/2,190,170);
ellipse(475,height/2,190,170);
strokeWeight(0);
//ears
fill(194,128,69);
ellipse(125,height/2,171,157);
ellipse(476,height/2,171,157);
fill(234,161,178);
ellipse(125,height/2,119,105);
ellipse(475,height/2,119,105);
//head
fill(194,128,68);
ellipse(width/2,height/2,headW,headH);
fill(249,214,159);
ellipse(220,height/2,175,216);
ellipse(380,height/2,175,216);
ellipse(300,388,390,255);
ellipse(300,468,209,124);
//eyes
strokeWeight(1);
fill(255);
ellipse(230,312,115,115);
ellipse(375,312,115,115);
fill(0);
ellipse(230,312,65,65);
ellipse(375,312,65,65);
strokeWeight(0);
fill(255);
ellipse(248,293,20,20);
ellipse(390,290,20,20);
//nose
fill(194,128,68);
ellipse(width/2,420,105,105);
ellipse(width/2,455,168,115);
//mouth
fill(132,81,36);
ellipse(width/2,455,100,80);
//nostrils
fill(0);
strokeWeight(0);
ellipse(285,403,20,20);
ellipse(318,403,20,20);
//eyebrows
fill(110,75,33);
ellipse(230,226,50,45);
ellipse(375,226,50,45);
fill(249,214,159);
ellipse(240,220,67,39);
ellipse(364,220,70,41);
//angry lines
strokeWeight(2);
line(150,350,170,370);
line(430,370,450,350);
//banana
fill(255,255,0);
strokeWeight(0);
beginShape();
vertex(mouseX, mouseY);
bezierVertex(mouseX + 50, mouseY - 20,
mouseX + 50, mouseY + 55,
mouseX, mouseY + 55);
bezierVertex(mouseX + 20, mouseY + 60,
mouseX + 30, mouseY + 5,
mouseX, mouseY);
endShape();
}
function happy() {
headW = random(400,450);
background(backR,backG,backB);
//hair
fill(132,81,36);
triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
//shadow
fill(132,81,36);
ellipse(width/2,280,headW+15,headH - 11);
ellipse(125,height/2,190,170);
ellipse(475,height/2,190,170);
strokeWeight(0);
//ears
fill(194,128,69);
ellipse(125,height/2,171,157);
ellipse(476,height/2,171,157);
fill(234,161,178);
ellipse(125,height/2,119,105);
ellipse(475,height/2,119,105);
//head
fill(194,128,68);
ellipse(width/2,height/2,headW,headH);
fill(249,214,159);
ellipse(220,height/2,175,216);
ellipse(380,height/2,175,216);
ellipse(300,388,390,255);
ellipse(300,468,209,124);
//eyes
strokeWeight(1);
fill(255);
ellipse(230,312,115,115);
ellipse(375,312,115,115);
fill(0);
ellipse(230,312,65,65);
ellipse(375,312,65,65);
strokeWeight(0);
fill(255);
ellipse(248,293,20,20);
ellipse(390,290,20,20);
//nose
fill(194,128,68);
ellipse(width/2,420,105,105);
ellipse(width/2,455,168,115);
//mouth
strokeWeight(3);
arc(width/2,440,145,65, 0, PI);
//nostrils
fill(0);
strokeWeight(0);
ellipse(285,403,20,20);
ellipse(318,403,20,20);
//eyebrows
fill(110,75,33);
ellipse(188,239,50,35);
ellipse(410,239,50,35);
fill(249,214,159);
ellipse(193,245,50,30);
ellipse(405,245,50,28);
//laugh
strokeWeight(2);
arc(400,470,5,12,HALF_PI, 3*HALF_PI);
arc(200,470,5,12,3*HALF_PI, HALF_PI);
}
I chose to do a sequence of emotions of a monkey: sad, then hungry (with a banana toying him), then happy. I started out sketching my monkey faces using Illustrator. Starting with this really streamlined my process when coding. I had a lot of fun with this project and am happy with my result.