Project-02-Variable-Face-The Dango

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

}