Yoonseo1 – Variable Faces -Project 2

Face Dave

//Yoonseo(Dave) Choi
//Section B 
//yoonseo1@andrew.cmu.edu
//Project-Variable Face
function setup() {
    
    createCanvas(640,480);
    background(100);
}
var val = 0; //define for the face rotation factor
var colorV = 0;// color variable define
var d = 1; // dividing factor define
var St = 0; // Stroke color factor define
function draw() {

}
function mouseClicked() {
    colorV = random(100,230);// change of background color
    division = random(1,16);//change of dividing factor
    St = random(0,255);// change of stroke color 
    if (val <= 0){
        background(colorV/d,colorV/d,colorV/2*d)
        push(new Face1);
        val += 1;
    } else {
    if (val == 1) {
        background(colorV/3*d,colorV/d,colorV);
        push(new Face2);
       val += 1;
    } else
    if (val == 2){
        background(colorV,colorV/d,colorV/d*4);
        push(new Face3);
       val += 1;;
    }else {
        if (val == 3){
        background(colorV/d,colorV,colorV/d*2);
        push(new Face4);
       val =0;
        }
        
    }
    }
 
  
 
}
//Face 1 
function Face1() {

    //left Face 
    //facial shape
    stroke(St/d*2,St,St/d*9) //stroke color for the faces

    strokeWeight(1);
    noFill();
    beginShape();
    vertex(177.91,184.25);
    quadraticVertex(155.28,181.5,139.25,182.41);
    quadraticVertex(129.75,184.5,121.5,186.58);
    endShape();
    line(121.5,186.58,107.08,201.16);
    line(107.08,201.16,100.91,220.91);
    line(100.91,220.91,102.58,225.91);
    line(102.58,225.91,90.58,241.41);
    //tip of nose
    beginShape();
    vertex(89.75,243.08);
    quadraticVertex(93.41,247.25,92,246);
    endShape();
    beginShape();
    vertex(93.41,243.08,);
    quadraticVertex(96.75,243,99.58,243.08);
    vertex(99.58,243.08);
    endShape();
    //starting lip and chin
    line(97.75,248.91,95.58,253.08);
    //lips
    beginShape();
    vertex(96.5,257.41);
    quadraticVertex(103.08,254.91,105.5,255.25);
    vertex(108.41,255.91);
    endShape();
    //chin
    beginShape();
    vertex(96.5,260.08);
    quadraticVertex(99.58,266.91,100.58,266.91);
    quadraticVertex(98.06,271.75,97.75,272.5);
    vertex(101.25,278.08);
    endShape();
    //neckand chin
    beginShape();
    vertex(120.08,284.08);
    quadraticVertex(103.66,279.33,103.66,279.33);
    quadraticVertex(126.25,259,135.25,255.76);
    vertex(148.58,252.08);
    endShape();
    line(126.75,284.08,143.91,295.75);
    //back of head and ears
    line(180.25,184.91,197.58,208.41);
    beginShape();
    vertex(196.75,223.91);
    quadraticVertex(189.25,234.25,184.75,248.5);
    vertex(192.41,261.58);
    endShape();
    //ears
    beginShape();
    vertex(167.91,208.41);
    quadraticVertex(174.25,213.75,171.25,223.25);
    quadraticVertex(167,234.5,158.91,230.41);
    vertex(160.75,221.5);
    endShape();
    //eyes
    beginShape();
    vertex(106.08,222.91);
    quadraticVertex(109.5,223.5,114.25,223.08);
    quadraticVertex(114.25,223.08,117.5,221);
    vertex(120.41,218.75);
    endShape();
}
function Face2(){
   strokeWeight(1);
    noFill();
    //head shape
    beginShape();
    vertex(296.25,253.08)
    quadraticVertex(296.25,237.25,300,220.25);
    quadraticVertex(300,220.25,289.25,192.25);
    quadraticVertex(289.25,192.25,258,184.91);
    quadraticVertex(237,190.25,212,204.25);
    quadraticVertex(204.25,216,199.5,234.49);
    quadraticVertex(199.5,234.49,199.25,243.25);
    vertex(202.25,251);
    endShape();
    //nose and eyes
    beginShape();
    vertex(201.75,253.25);
    quadraticVertex(202.75,252.25,209,262.75);
    quadraticVertex(209,262.75,211,266);
    endShape();
    //eyes
    beginShape();
    vertex(209.41,257.41);
    quadraticVertex(209.41,257.41,212.75,257.41);
    endShape();
    beginShape();
    vertex(226.41,261.58);
    quadraticVertex(226.41,261.58,230.25,262.5);
    vertex(238.91,259.08);
    endShape();
    //top of nose
    beginShape();
    vertex(218.5,246);
    quadraticVertex(218.5,246,214,271);
    quadraticVertex(214,271,198.5,294.5)
    endShape();
    beginShape();
    vertex(202,295.5);
    quadraticVertex(202,295.75,214.5,288);
    quadraticVertex(214.5,286,220.5,280);
    vertex(224.75,275.13);
    endShape();
    //lips
    beginShape();
    vertex(218.58,281.75); 
    quadraticVertex(218.58,281.75,221.58,285.91);
    quadraticVertex(221.58,285.91,231.5,281.5);
    vertex(241.08,284.33);
    endShape();
    beginShape();
    vertex(226.41,289.08);
    quadraticVertex(229,288.75,233.58,286.75);
    endShape();
    beginShape();
    vertex(224.75,289.91);
    quadraticVertex(226.75,293.5,228.5,297);
    quadraticVertex(228.5,297,237.75,298.25);
    quadraticVertex(237.75,298.25,247,296);
    vertex(278.41,274.08);
    endShape();
    //neck
    line(233.58,298.78,238,308);
    beginShape();
    vertex(296.25,241.41);
    quadraticVertex(302,253.5,313.25,263.5);
    endShape();
    //ears
    beginShape();
    vertex(272.75,252.25);
    quadraticVertex(276.5,263,282,263.5);
    quadraticVertex(282,263.5,287.5,242.25);
    quadraticVertex(287,235.5,280.75,234.25);
    vertex(271.5,238.5);
    endShape();

}
function Face3() {
    noFill();
    //hair
    beginShape();
    vertex(336,262);
    quadraticVertex(336,262,326.25,252.08);
    quadraticVertex(325.273,218,336.25,205.58);
    quadraticVertex(335.258,204.027,338.25,200.58);
    quadraticVertex(338.25,200.58,356,187.5);
    quadraticVertex(356,187.5,386.5,184);
    quadraticVertex(386.5,184,401.41,193.08);
    quadraticVertex(401.41,193.08,412.58,209.75);
    quadraticVertex(412.58,209.75,421.91,225.41);
    quadraticVertex(421.91,225.41,420.75,244);
    vertex(409.33,260.33);
    endShape();
    beginShape();
    vertex(335,221);
    quadraticVertex(343,204.667,354.667,202);
    quadraticVertex(362.667,202.333,376.91,200.5);
    quadraticVertex(380.667,200.667,403.5,208.41);
    quadraticVertex(407,212.667,413.44,223.91);
    quadraticVertex(413.667,241.667,409.667,254);
    quadraticVertex(408,262,400.91,277.91);
    quadraticVertex(389.3,275.66,375.3,271.3);
    quadraticVertex(368,271.33,344.41,277.91);
    quadraticVertex(340,269,332,251);
    quadraticVertex(331,244.33,333.41,226.75);
    endShape();
    //neck
    beginShape();
    vertex(346.75,278.08);
    quadraticVertex(348.667,279,349.833,279.75);
    vertex(353.55,292.08);
    endShape();
    beginShape();
    vertex(396.667,278);
    quadraticVertex(395.33,282.5,394.08,295.58);
    endShape();
    //eyes
    beginShape();
    vertex(344.87,213);
    quadraticVertex(353.24,213.25,366.25,210.25);
    endShape();
    beginShape();
    vertex(381,209.75);
    quadraticVertex(387.5,212.5,400.9,213.96);
    endShape();
    //nose
    line(371.25,206.91,371.25,226.75);

    beginShape(); 
    vertex(375.08,210.4);
    quadraticVertex(375.5,218.167,377,226.5);
    vertex(378.75,230.75);
    endShape();
    beginShape();
    vertex(363.75,233.58);
    quadraticVertex(369,230.58,375.667,230.667);
    vertex(378.75,233.667);
    endShape();
    //mouth
    beginShape();
    vertex(368.833,245.167);
    quadraticVertex(380.667,243.833,390.97,242.41);
    quadraticVertex(387.33,246.5,382.08,250.75);
    quadraticVertex(363.667,250,354.66,245.32);
    quadraticVertex(353.667,243.167,361.33,244.667);
    vertex(370.25,245.25);
    endShape();
}
function Face4(){
    noFill();
    //head shape
    beginShape();
    vertex(426.91,239.2);
    quadraticVertex(434,208,445.91,191.58);
    endShape();
    beginShape();
    vertex(453.75,189.08);
    quadraticVertex(472.75,186.25,483.5,187.25);
    quadraticVertex(501.75,194,513.08,200.5);
    endShape();
    beginShape();
    vertex(513.08,202.41);
    quadraticVertex(515,211,520,215);
    vertex(525.75,218);
    endShape();
    beginShape();
    vertex(523.91,220.57);
    quadraticVertex(523.5,222.5,522.75,224.91);
    endShape();
    beginShape();
    vertex(518.41,224.91);
    quadraticVertex(521.25,227.5,524.01,230.02);
    endShape();
    //chin
    beginShape();
    vertex(526.25,239.2);
    quadraticVertex(527.25,244.5,528.41,248.75);
    quadraticVertex(530.41,251.75,530.41,259.08);
    quadraticVertex(515.75,258.25,493.25,259.75);
    vertex(475.08,263.5);
    endShape();
    beginShape();
    vertex(468.58,258.08);
    quadraticVertex(459.75,254,453.75,246.65);
    endShape();
    //neck
    beginShape()
    vertex(529.08,261.41);
    quadraticVertex(513,267.5,502.78,273.08);
    quadraticVertex(502.25,275,500.41,289.75);
    endShape();
    //eyes
    beginShape();
    vertex(477.37,208.37);
    quadraticVertex(485,208,489.5,209.75);
    quadraticVertex(491.25,209.25,493.5,208.47);
    endShape();
    beginShape();
    vertex(511.41,209.13);
    vertex(514.54,209.13);
    endShape();
    //nose
    beginShape();
    vertex(504.87,208.2);
    quadraticVertex(519.35,218.84,516.75,219.25);
    quadraticVertex(514.75,220.5,511.08,222.17);
    endShape();
    //mouth
    beginShape();
    vertex(504.87,233.81);
    quadraticVertex(509.25,236.5,518.25,237);
    vertex(525.62,235.41);
    endShape();

}

For this project I wanted to show the 4 different variable faces with emotions and change of colors as effect to provoke the viewers. I have set variable for the stroke line and background so when the mouse is pressed, color of whole thing changes as face rotates.

Leave a Reply