![[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)
sijings-02
My intention for this project is to create a narrative story around the given instructions. When I first started the project, I want to do something with the shape of the face, such as dividing the face from the middle and have a new face coming out of it. My changing variables here are the blush’s color, the eyes’ movements, the mouth’s size, face’s movement and size at the last two clicks. When I nearly finished the project, I wanted to create a completely different image from what I had. I wanted to scale the face and complete my narration (which is, the emotions of a “dango”(a Japanese riceball snack) when it is being pierced through by a stick). To achieve this, I used several variables to control my clicks, for example, I used “var deter” in my coding work. Therefore, a new image will appear when I click my mouse.
//clair(sijing) sun
//session C
//sijings@andrew.cmu.edu
//Project-02-Variable-Face
var eyeSize1 = 10;
var eyeSize2 = 15;
var faceWidth = 350;
var faceHeight = 300;
var blushW=30;
var eyeLX = 640 / 2 - 122.5;//note, do not use width here
var eyeRX = 640 / 2 + 157.5;
var dir=1;//for chaning direction
var deter=1; //to determine when to call out different part of drawings
var deter2=1;
var deter3=1;
var deter4=1;
var color1=109; //for color randomnization
var color2=109;
var color3=109;
var mouthopen=2;
var hairlength=50;
var mouthlength=130;
function setup() {
createCanvas(640, 480);
}
function draw() {
//First Face
background(246,246,246);//called again later
fill(246,246,246);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
fill(39,40,34);
ellipse(eyeLX, height / 2+20, eyeSize1, eyeSize2);//all used variables here for later randomnization
ellipse(eyeRX, height / 2+35, eyeSize2, eyeSize1);
ellipse(eyeLX, height / 2+22, eyeSize1-5, eyeSize2);
ellipse(eyeRX, height / 2+37, eyeSize2-5, eyeSize1);
fill(246,246,246);
noFill();
arc(width/2, height/2+20, 60, 60, 90, 180);
//Left eyebrow
arc(width/2-135, height/2-25, 120, 20, 0, 90);
//right eyebrow
noFill();
line(width-210,height/2+10,width-170,height/2+25);
stroke(126);
line(width-205,height/2+11,width-170,height/2+26);
stroke(126);
line(width-190,height/2+20,width-170,height/2+28);
line(width-183,height/2+24,width-170,height/2+30);
stroke(255);
//Left Check
stroke(109,109,109,150);
fill(color1,color2,color3,150);
ellipse(width/2-120, height/2+40, blushW+20, blushW);
noFill();
ellipse(width/2-119, height/2+39, blushW+21, blushW-1);//to create strokes effect
ellipse(width/2-122, height/2+38, blushW+23, blushW-1);
stroke(43,43,43,100);
ellipse(width/2-120, height/2+38, blushW+23, blushW+2);
//Right Check
stroke(109,109,109,150);
fill(color1,color2,color3,150);
ellipse(width/2+130, height/2+60, blushW+25, blushW+17);
noFill();
ellipse(width/2+132, height/2+61, blushW+25, blushW+16);
ellipse(width/2+131, height/2+59, blushW+24, blushW+17);
stroke(43,43,43,100);
ellipse(width/2+132, height/2+61, blushW+30, blushW+17);
stroke(43,43,43);
//moving eyes
if (deter==2) {//for making them shaking(later realized that random can do the same work)
eyeLX += dir * 1;
eyeRX += dir * 1;
if (eyeLX > 199.2 || eyeLX < 195.2 ) {
dir = -dir;
}
}
//mouth
fill(196,208,67);
ellipse(width/2+30,height/2+100,mouthlength,mouthopen);
//Third Condition
if (deter3>2&deter3<6){
strokeWeight(7);
line(width/2+40,0,width/2,height/2-60);
line(width/2-38,width/2+70,259,height);
strokeWeight(3);
stroke(167,167,167);
line(width/2+44,0,width/2+3,height/2-60);
line(width/2-35,width/2+69,264.5,height);
noFill();
angleMode(DEGREES);
arc(width/2, height/2-60, 20, 20, 60, 120);
stroke(0,0,0);
strokeWeight(1);
}
//Fourth Condition
if (deter4>3){
background(246,246,246);
ellipse(width/2+40,100,70,70);
ellipse(width/2,200,70,70);
ellipse(width/2-40,300,70,70);
fill(0,0,0);
ellipse(width/2-60,310,5,10);
ellipse(width/2-32,317,5,10);
stroke(0,0,0);
strokeWeight(3);
line(width/2+80,0,width/2+50,80);
line(width/2+30,132.8,width/2+7,187);
line(width/2-10,233,width/2-38,294);
line(width/2-53,332,width/2-75,380);
noFill();
arc(width/2+50, 70, 20, 20, 60, 120);
arc(width/2+5, 179, 20, 20, 60, 120);
arc(width/2-37, 287, 20, 20, 60, 120);
}
}
function mousePressed() {
deter=2;
deter2+=1;//for calculating how many times should the face change
deter3+=1;
deter4+=0.5;
color1=random(180,250);
color2=random(10,86);
color3=random(70,103);
mouthopen=random(5,30);
mouthlength=random(1,140);
faceWidth = random(350,500);
}
