Tag: Project-02-Variable-Face

Project 02: Faces and Variables

Within my project, what I wanted to do was to examine what we call faces. What exactly are the processes by which we determine what is a face or not? In such, I attempted to use the most chaotic combinations by randomizing virtually every color combination on screen possible.

sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var x = 1;
var y = 255;
var z = 2;
var mouth = 1
var hair = 1



 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    strokeWeight(3);
    stroke(y,x,z);
    fill(x,y,z);
    background(y - 100, x + 30, z + 5);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(x - 80, y - 80, z - 80);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    if (mouth == 1) {
        //happy mouth
        arc(width / 2, (height / 2) + 25, faceWidth - 40, faceHeight / 2, 0, radians(180));
    }
    if (mouth == 2) {
        //sad face
        noFill();
        arc(width / 2, (height / 2) + 50, faceWidth - 40, faceHeight / 2, radians(180), 0);
    }
   if (mouth == 3) {
        //shocked mouth
        fill(255,102,102);
        ellipse(width / 2, (height / 2) + 50, faceHeight / 2, faceWidth / 2);
    }
    if (hair == 1) {
        //party hat
        fill(z,x,y);
        triangle((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), width / 2, (height / 4) - 70, (width / 2) + (faceWidth / 2), (height / 2) - (faceHeight / 2));
    }
    if (hair == 2) {
        //beret
        fill(0);
        ellipse(width / 2, (height / 2) - 70, faceWidth + 20, faceHeight / 2);
    }
   if (hair == 3) {
        //bowl cut
        fill(z,y,x + 10);
        arc(width / 2, (height / 2) - (faceHeight / 2) + 30, faceHeight - 15,(faceWidth / 2) + 30, radians(180), 0);
        rect((width / 2) - (faceWidth / 1.5), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
        rect((width / 2) + (faceWidth / 3), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
    }

}
 
function mousePressed() {
    if (mouseIsPressed == true) {
        x = random(0,255);
        y = random(0,255);
        z = random(0,255);
        fill(x,y,z);
        }
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    faceColor = random(0,255);
    hair += 1;
    if (hair > 3) {
        hair = 1;
    }
    mouth += 1;
    if (mouth > 3) {
        mouth = 1;
    }
}

Srishty’s Project 2: Variable Face

sketch 
//Srishty Bhavsar
//Section C
//15-104


// GLOBAL VARIABLES 

var headsize = 100;
var eye = 1;
var mouth = 1;
var earring = 1;
var shirtcol = 1;
var hair = 1;

function setup() {
    createCanvas(500, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    createCanvas(500,300);
    if (mouseY < (width/2)) { // If mouse is in top half of canvas, color is yellow. If in lower half, color is blue
        background(252,239,145);
    } else { 
        background(204, 204, 255);
    }  
    strokeWeight(0);
    triangle(240,180,260,180,250,195); //mouth
    fill(164,116,73); // TAN
    rect(240,208,20,40); //neck

//HEAD CHANGE, HAIR CHANGE, EAR CHANGE 
    if (headsize <= 88 ) { 
        fill(0);
        ellipse(250,280,180,400); // hair     
        fill(164,116,73); // TAN
        rect(240,208,20,40); //neck
        ellipse(200,160,15,25); //ear
        ellipse(300,160,15,25); //ear 2 

        //EARRING CHANGE WITHIN IF      
        if ( earring == 1) {
            fill(255); // white
            ellipse(300,170,3,10); //earrings
            ellipse(200,170,3,10); //earrings
        } else if (earring == 2) {
            fill(255); //pink
            ellipse(300,170,5,5) //earrings
            ellipse(200,170,5,5); //earrings 
        } else {
            fill(207,255,229); //mint
            rect(297, 170, 3, 8); // rect earrings
            rect(200, 170, 3, 8); // rect earrings
        }

        fill(189,154,122); //  skin color
        ellipse(250,150,100,120); // head + ears
        fill(0);
        arc(280, 105, 55, 70, 1, PI + QUARTER_PI, CHORD); //front bang
        rect(270,93,10,23); //bangs
        rect(260,93,10,23); //bangs
        rect(280,101,10,23); //bangs
        rect(289,110,9,23); //bangs
        triangle(200,140,210,103,260,82); // strand
        ellipse(225,133,17,10); // one eye
        fill(189,154,122); // SKIN
        ellipse(225,135,17,10); // skin carve
 
    } else if (headsize >= 88 & headsize <= 100) {
        fill(132, 34, 34); // AUBURN HAIR
        ellipse(250,150,130,150); // TIED UP
        fill(164,116,73); // TAN
        rect(240,208,20,40); //neck
        ellipse(290,160,15,25); //ear adjusted slim
        ellipse(210,160,15,25); //ear 2 adjusted slim

        //EARRING CHANGE WITHIN IF
        if ( earring >= 10 & earring <= 20) {
            fill(255); // white
            ellipse(290,170,3,10); //earrings
            ellipse(210,170,3,10); //earrings
        } else if (earring >= 20 & earring <= 30) {
            fill('pink'); // pink
            ellipse(290,170,5,5); // circle earrings
            ellipse(210,170,5,5); // circle earrings 
        } else {
            fill(207,255,229); //mint 
            rect(290, 170, 3, 8); // rect earrings
            rect(210, 170, 3, 8); // rect earrings
        }

        fill(189,154,122); // skin color
        ellipse(250,150,75,120); // slim head + ears 
        fill(132, 34, 34);
        arc(280, 105, 55, 70, 1, PI + QUARTER_PI, CHORD); //front bang
        rect(270,93,10,23); //bangs
        rect(260,93,10,23); //bangs
        rect(280,101,10,23); //bangs
        rect(289,110,9,23); //bangs
        fill(132, 34, 34); // AUBURN EYEBROWS
        ellipse(225,133,17,10); // one eyebrow
        fill(189,154,122); // SKIN
        ellipse(225,135,17,10); // skin carve

    } else {
        fill(108,25,96); // MAGENTA HAIR
        ellipse(250,280,200,400); // hair
        fill(164,116,73); // TAN
        rect(240,208,20,40); //neck
        ellipse(310,160,15,25); //ear adjusted wide
        ellipse(190,160,15,25); //ear 2 adjusted wide
        fill(63, 20, 20);
        ellipse(310,170,3,10); //earrings
        ellipse(190,170,3,10); //earrings 
        fill(189,154,122);
        ellipse(250,150,120,120); // widest head + wider hair + ears
        fill(108,25,96); // MAGENTA eyebrow
        ellipse(225,133,19,10); // one eyebrow
        ellipse(275,133,19,10); //second eyebrow
        fill(189,154,122); // SKIN
        ellipse(225,135,19,10); // skin carve
        ellipse(275,135,19,10); //skin carve 
        fill(108,25,96);
        triangle(180,140,210,103,255,80); // hair strand
    }   

    if (eye >= 10 & eye <= 20){
        fill(72,60,50); // BROWN 
        ellipse(225,145,10,10); // one eye
        ellipse(275,145,10,10); //second eye 
    } else if (eye >= 20 & eye <= 30) { 
        fill(72,60,50); // BROWN 
        ellipse(225,145,10,10); // one eye
        ellipse(275,145,10,10); //second eye
        fill(189,154,122); // SKIN
        ellipse(225,147,10,10); // one eye SKIN COLOR
        ellipse(275,147,10,10); //second eye SKIN COLOR
    } else if (eye >= 30 & eye <= 40) {
        fill(72,60,50); // BROWN
        ellipse(225,145,10,10); // one eye
        ellipse(275,146,10,10); //second eye
        fill(189,154,122); // SKIN
        ellipse(275,148,10,10); //second eye  
    } else {
        fill(72,60,50); // BROWN 
        ellipse(225,145,10,10); // one eye
        ellipse(275,145,10,10); //second eye

    }

    strokeWeight(0);
    fill(0); 
    stroke(72,60,50); // BLUSH PINK
    fill(242,212,215);
    ellipse(220,170,10,5); //blush1
    ellipse(280,170,10,5); //blush2
    strokeWeight(.5);
    stroke(101,67,33); // DARK BROWN
    line(255,140,255,160); // nose long
    line(245,160,255,160); // nose short
    strokeWeight(0);

// SHIRT COLOR CHANGE 

    if (shirtcol >= 10 & shirtcol <= 20) {
        fill(79, 121, 66); //DARK GREEN
        ellipse(250,330,140,200); //arms
        fill(134,169,111);
        ellipse(250,360,115,280); // body
    } else if (shirtcol >= 20 & shirtcol <= 30) {
        fill(172, 112, 136); //DARK GREEN
        ellipse(250,330,140,200); //arms
        fill(222, 182, 171);
        ellipse(250,360,115,280); // body
    } else if (shirtcol >= 30 & shirtcol <= 40) {
        fill(241, 166, 97); //DARK GREEN
        ellipse(250,330,140,200); //arms
        fill(255, 216, 169);
        ellipse(250,360,115,280); // body    
    } else if (shirtcol >= 40 & shirtcol <= 50) {
        fill(134, 88, 88); //DARK GREEN
        ellipse(250,330,140,200); //arms
        fill(142, 127, 127);
        ellipse(250,360,115,280); // body 
    } else if (shirtcol >= 50 & shirtcol <= 60) {
        fill(110, 133, 183); //DARK GREEN
        ellipse(250,330,140,200); //arms
        fill(196, 215, 224);
        ellipse(250,360,115,280); // body     
    } else { 
        fill(79, 121, 66); //DARK GREEN
        ellipse(250,330,140,200); //arms
        fill(134,169,111);
        ellipse(250,360,115,280); // body
    }

// MOUTH CHANGE

    if (mouth >= 10 & mouth <= 20) {
        fill(255,182,193); // pink
        triangle(240,180,260,180,250,195); // MOUTH HAPPY
    } else if (mouth >= 20 & mouth <= 30) {
        fill(203, 76, 78); // light red
        ellipse(250,180,10,20); // MOUTH SHOCKED
    } else if (mouth >= 30 & mouth <= 40) {
        strokeWeight(1);
        stroke(0); //BLAXK
        line(240,180,260,180) //PLAIN MOUTH
    } else {
        strokeWeight(1);
        stroke(0);
        line(240,180,260,180);
    }

}

function mousePressed() {
    //when the user clicks, the variables of the following features are reassigned to random values within their respective ranges
    
    headsize = random(75,120); // head witdth
    eye = random(10,40); // 4 eye types
    mouth = random(10,40); // 4 mouth types
    earring = random (10,30); // 3 earring types
    shirtcol = random(10,60); // 6 color shirts
}

Project 2

sketch_bpdohert_02
// Bridget Doherty
// Section C

var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 300;
var noseWidth = 20
var on = true;

var color1 = 50;
var color2 = 50;
var color3 = 50;
 
function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
}
 
function draw() {
    let backgroundColor = color(color3, color2, color1);
    background(backgroundColor);
    let eyeColor = (color('#7d754f'));
    let skinColor = (color(255, 220, 177));
    let hairColor = (color('#80643d'));
    var centerX = width / 2;
    var centerY = height / 2;
  
    //neck
    fill(skinColor);
    rect(centerX-(faceWidth/3), centerY+30, faceWidth/1.5, 200);
  
    // main face
    ellipse(centerX, centerY, faceWidth,  faceHeight);
  
    // nose
    triangle(centerX, centerY+40, centerX, centerY, centerX+noseWidth, centerY+40);
  
    //shirt
    let shirtColor = color(color1, color2, color3)
    fill(shirtColor);
    rect(centerX-(faceWidth/2), centerY+170, faceWidth, 70)  
    let sleeveColor = color(color1-50, color2-50, color3-50)
    fill(sleeveColor);
    triangle(centerX-(faceWidth/2), centerY+170, centerX-(faceWidth/2)-30, 480, centerX-(faceWidth/2), 480);
    triangle(centerX+(faceWidth/2), centerY+170, centerX+(faceWidth/2)+30, 480, centerX+(faceWidth/2), 480)
  
    // eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
  
    fill('white'); // left eye
    ellipse(eyeLX, centerY, eyeSize+20, eyeSize);
    fill(eyeColor);
    ellipse(eyeLX, centerY, eyeSize, eyeSize);
    fill('black')
    ellipse(eyeLX, centerY, eyeSize/2, eyeSize/2);
   
    fill('white'); // right eye
    ellipse(eyeRX, centerY, eyeSize+20, eyeSize);
    fill(eyeColor);
    ellipse(eyeRX, centerY, eyeSize, eyeSize);
    fill('black')
    ellipse(eyeRX, centerY, eyeSize/2, eyeSize/2);
  
    // bowl cut hair
    var hairY = (height / 2) - faceHeight/8
    fill(hairColor);
    arc(centerX, hairY, faceWidth, faceHeight, 180, 0);
  
    // happy or sad mouth
    var mouthY = (height / 2) + faceHeight/3.5
    stroke(10);
    noFill();
    if (on == true) {
    arc(centerX, mouthY, 80, 60, 0, 180);
    } else if (on == false) {
    arc(centerX, mouthY, 80, 60, 180, 0);
   
  }
  
}
 
function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 350);
    eyeSize = random(10, 30);
    noseWidth = random(-40, 40);
  
    if (on == true) {
    on = false;
    } else {
      on = true; }
  
    getRandomColor();
}

function getRandomColor(){
    // function generates a random number for color variables
    color1 = random(40, 255); 
    color2 = random(40, 255);
    color3 = random(40, 255);
}

Project – 02

//Katie Makarska
//Section C

var eyeWidth = 20;
var eyeHeight = 20
var faceWidth = 100;
var faceHeight = 150;
var smileWidth = 80;
var smileHeight = 40;

function setup() {
createCanvas(300, 300);
bgColor = color( random(255), random(255), random(255));
}

function draw() {
background(bgColor);
//eyes
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 – faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
//smile
var smile1 = width/2 – faceWidth *0.01;
var smile2 = width/2 + faceHeight *0.25;
arc(smile1, smile2, smileWidth, smileHeight, 0, PI);

//random colors
r = random(50, 255);
g = random(100,200);
b = random(100, 200);

}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// ‘faceWidth’ gets a random value between 75 and 150.
faceWidth = random(90, 150);
faceHeight = random(100, 200);
eyeWidth = random(10, 30);
eyeHeight = random(10, 30);
smileWidth = random(50, 80);
smileHeight = random(20, 40);
//random face color
fill(r, g, b);
//random background color
bgColor = color( random(255), random(255), random(255));

}

Project 02 – Variable Faces

My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.

sketch
//Favour Adesina Section B

var faceWidth = 300;
var lipHeight = 20;
var lipWidth = 60;
var BlipWidth = 100;
var eyeWidth = 70;
var eyeHeight = 100;
var pupSize = 60;
var faceHeight = 400;


function setup() {
    createCanvas(600, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    noStroke()
    background(247, 195, 218);

    //SHOULDER
    fill(255, 67, 89);
    ellipse(width/2, height/2 + faceHeight/2, 2*faceWidth, faceHeight);

    //EARS
    fill(141, 75, 36);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/4, faceHeight/4); //right ear outer
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/4, faceHeight/4);  //left ear outer
    fill(34, 20, 13);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //right ear inner
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //left ear inner
    //FACE
    fill(141, 75, 36);
    ellipse(width/2, height/2, faceWidth, faceHeight);    // face

    //EARRINGS
    fill(255, 255, 0);
    triangle((width/2 - (faceWidth/2 + faceWidth/50)), height/2 + faceHeight/4, width/2 - faceWidth/2, height/2 + faceHeight/16, width/2 - faceWidth/1.5, height/2 + faceHeight/4);
    triangle((width/2 + (faceWidth/2 - faceWidth/100)), height/2 + faceHeight/4, width/2 + faceWidth/2, height/2 + faceHeight/16, width/2 + faceWidth/1.55, height/2 + faceHeight/4);


    //EYES
    var LXeye = width/2 - faceWidth * 0.26;          
    var RXeye = width/2 + faceWidth * 0.26;
    fill(255, 255, 255);
    ellipse(LXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites 
    ellipse(RXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites
    fill(104, 54, 37);
    ellipse(LXeye, height/2, pupSize, pupSize);    //Pupils 
    ellipse(RXeye, height/2, pupSize, pupSize);     //pupils 
    fill(0);
    ellipse(LXeye, height/2, 20, 20);                //inner pupils 
    ellipse(RXeye, height/2, 20, 20);                //inner pupils
       
    //NOSE
    stroke(35, 31, 32);
    strokeWeight(7);
    line(width/2, height/2, width/2, (height/2)+ eyeHeight/3);                         //Nose bridge
    ellipse((width/2)-5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose 
    ellipse((width/2)+5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose

    //LIPS
    strokeWeight(2);
    var BlipY = height/2 + faceHeight * 0.27 + lipHeight/2;
    fill(122, 22, 25);
    ellipse(width/2, BlipY, BlipWidth, lipHeight);
    noStroke();
    fill(173, 69, 87);                                   //light pink 
    ellipse(width/2, BlipY, lipWidth/2, lipHeight/2);  //inner mouth

    


    //HAIR
    fill(34, 20, 13);
    ellipse(width/2, height/2 - faceHeight/2, width/7, height/6);
    ellipse(width/2 - 55, height/2 - faceHeight/2, width/8, height/7);
    ellipse(width/2 + 55, height/2 - faceHeight/2, width/8, height/7);
 

        }

function mousePressed() {

    faceWidth = random(300, 500);
    faceHeight = random(260, 400);
    lipHeight = random(10, 50);
    pupSize = random(20, 70);
    lipWidth = random(10, 60);
    BlipWidth = random(30, 100);
    eyeWidth = random(20, 150);
    eyeHeight = random(80, 170);

}

Project 02 Variable Face

Variables:

  1. The face changes color as u move your mouse.
  2. Eyes and arms follows the mouse.
  3. When mouse is pressed, the hands will grow fingers.

var mouse = false;

function setup() {
    createCanvas(480, 640);
    background(220);
}

function draw() {
    background(220);
    drawFace();
    noFill();
    drawMouth();
    drawTeeth();
    drawLip();
    eyeBallOne();
    eyeBallTwo();
    handOne();
    handTwo();
}

function drawMouth() {
    strokeWeight(4);
    fill(255,0,0,255);
    curve(145, 250, 145, 200, 335, 200, 335, 250);
    curve(145, -400, 145, 200, 335, 200, 335, -400);
}

function drawLip() {
    strokeWeight(4);
    stroke(0);
    noFill();
    curve(145, 250, 145, 200, 335, 200, 335, 250);
    curve(145, -400, 145, 200, 335, 200, 335, -400);
}

function drawTeeth() {
    strokeWeight(3);
    stroke(255);
    line(145, 200, 175, 248);
    line(335, 200, 305, 248);
    line(175, 248, 205, 195);
    line(305, 248, 275, 195);
    line (205, 195, 240, 275);
    line (275, 195, 240, 275);
}

function drawFace() {
    strokeWeight(5);
    let xValue = mouseX/width*255;
    let yValue = mouseY/width*255;
    let zValue = (xValue+yValue)/4;
    fill(xValue,yValue,zValue+120);
    rect (100,100,280,320);
}

function eyeBallOne() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (150,150,50);
    let angle = atan2(mouseY - 150, mouseX - 150); // calculate arctangent //
    let x = 150 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(255,0,255);
    circle (x,y,15);
}

function eyeBallTwo() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (330,150,50);
    let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
    let x = 330 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(150,150,0);
    circle (x,y,15);
}


function handOne() {
  var x = 100;
  var y = 420;
  var tan = atan2(mouseX-x,mouseY-y);
  if (dist (mouseX,mouseY,x,y) < 200)
    //if arm mouse is within arm distance//
  { var dis = dist (mouseX,mouseY,x,y) /2;
    // mid point of distance between mouse and arm//
    var num = (10000)-(dis*dis);
    var sid = sqrt(num);
    //pathegoriam therom//
    stroke (10);
    line (x,y, (mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid);
    line ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, mouseX, mouseY);
    fill(255,255,255);
    ellipse ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (mouseX, mouseY, mouseX+30, mouseY-30);
        line (mouseX, mouseY, mouseX-30, mouseY-30);
        line (mouseX, mouseY, mouseX, mouseY-60);
        ellipse (mouseX,mouseY,50,50);
    }
    else {
        ellipse (mouseX,mouseY,50,50);
    }
  }

  else
    {
        stroke(10);
        line (x,y, x+sin(tan)*200, y+cos(tan)*200);
        fill(255,255,255);
        ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
        if (mouse)
    {
        //hand//
        strokeWeight(5);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
        //fingers//
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    else {
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    }
}

function handTwo() {
  var x = 380;
  var y = 420;
  var tan = atan2(mouseX-x,mouseY-y);
  if (dist (mouseX,mouseY,x,y) < 200)
    //if arm mouse is within arm distance//
  { var dis = dist (mouseX,mouseY,x,y) /2;
    // mid point of distance between mouse and arm//
    var num = (10000)-(dis*dis);
    var sid = sqrt(num);
    //pathegoriam therom//
    stroke (10);
    line (x,y, (mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid); 
    //origin point to the medien of the triangle (isosceles)//
    line ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, mouseX, mouseY);
    fill(255,255,255);
    ellipse ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (mouseX, mouseY, mouseX+30, mouseY-30);
        line (mouseX, mouseY, mouseX-30, mouseY-30);
        line (mouseX, mouseY, mouseX, mouseY-60);
        ellipse (mouseX,mouseY,50,50);
    }
    else {
        ellipse (mouseX,mouseY,50,50);
    }
  }

  else
    {
        stroke(10);
        line (x,y, x+sin(tan)*200, y+cos(tan)*200);
        fill(255,255,255);
        ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
    if (mouse)
    {
        strokeWeight(5);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
        line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    else {
        ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
    }
    }
}


function mousePressed() {
    mouse =!mouse;
    // when pressed show fingers//
}

Project 02

Variable Face

sketchDownload
// Ilia Urgen
// Section B

//background color
var r = 128;
var g = 235;
var b = 255;

//shirt color
var r1 = 217;
var g1 = 0;
var b1 = 0;

var faceWidth = 480;
var faceHeight = 660;

var neckWidth = 250; 

var eyebrowHeight = 518;
var eyebrowThickness = 30;

var eyeDiameter = 60;

var eyeCenterX1 = 400;
var eyeCenterY1 = 575;
var eyeCenterX2 = 600;

//nose width coordinates
var noseX = 500;
var noseY = 540;

var mouth = 3;

function setup() {
    createCanvas (1000, 1000);
}                                   
                                    
function draw() {                   
    background (r, g, b);

    //neck outline
    noStroke();
    fill (243, 207, 187);
    rect (375, 500, neckWidth, 800);        
    
    //face outline                      
    ellipse (500, 600, faceWidth, faceHeight);  

    //left ear
    arc (500-(faceWidth/2)-15,620,80,160,PI + HALF_PI,PI + HALF_PI);  
    
    //right ear
    arc (500+(faceWidth/2)+15,620,80,160,PI + HALF_PI,PI + HALF_PI);  

    //left eye
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 50, eyeDiameter);  
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 30, eyeDiameter); 
    fill (102,51,0); //brown
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1,5,5);

    //right eye
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 50, eyeDiameter);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 30, eyeDiameter);
    fill (102,51,0); //brown
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1,5,5);

    //nose
    fill (240,190,180);
    triangle (noseX - 50,700,500,noseY,noseX + 50,700);
    
    //t-shirt                                                              
    fill (r1,g1,b1);                                              
    quad (500-(neckWidth/2),920,200,1000,800,1000,500+(neckWidth/2),920);

    //left eyebrow
    noFill();
    strokeWeight (eyebrowThickness);
    stroke (55,39,45);
    arc (400,eyebrowHeight,120,30,PI,0);

    //right eyebrow
    arc (600,eyebrowHeight,120,30,PI,0);

    //mouth
    noFill();
    strokeWeight (35);
    stroke (193,104,115);
    
    //sad face
    if (mouth == 1) { 
        arc (500,785,180,40,PI,0);
    }

    //happy face
    else if (mouth == 2) {
        arc (500,775,180,40,0, PI);
    }

    //shocked face
    else if (mouth == 3) {
        fill (255);
        stroke (255);
        ellipse (500,790,115,10);

        noFill();
        strokeWeight (35);
        stroke (193,104,115);
        arc (500,770,180,40,PI,0);
        arc (500,780,180,40,0, PI);
    }

    //ear lines
    noFill();
    stroke (55,39,45);
    strokeWeight (2);

    arc (500-(faceWidth/2)-20,625,30,100,HALF_PI, PI + HALF_PI);
    arc (500+(faceWidth/2)+20,625,30,100,PI + HALF_PI, HALF_PI);

    //hair
    strokeWeight (eyebrowThickness);

    line (300,660-(faceHeight/2.5),100,(faceHeight/2)-20);
    line (310,660-(faceHeight/2.5),120,(faceHeight/2)-25);
    line (320,660-(faceHeight/2.5),140,(faceHeight/2)-30);

    line (330,660-(faceHeight/2.5),160,(faceHeight/2)-35);
    line (340,660-(faceHeight/2.5),180,(faceHeight/2)-40);
    line (350,660-(faceHeight/2.5),200,(faceHeight/2)-45);

    line (360,660-(faceHeight/2.5),220,(faceHeight/2)-50);
    line (370,660-(faceHeight/2.5),240,(faceHeight/2)-55);
    line (380,660-(faceHeight/2.5),260,(faceHeight/2)-60);

    line (390,660-(faceHeight/2.5),280,(faceHeight/2)-65);
    line (400,660-(faceHeight/2.5),300,(faceHeight/2)-70);
    line (410,660-(faceHeight/2.5),320,(faceHeight/2)-75);

    line (420,660-(faceHeight/2.5),340,(faceHeight/2)-80);
    line (430,660-(faceHeight/2.5),360,(faceHeight/2)-85);
    line (440,660-(faceHeight/2.5),380,(faceHeight/2)-90);

    line (450,660-(faceHeight/2.5),400,(faceHeight/2)-95);
    line (460,660-(faceHeight/2.5),420,(faceHeight/2)-100);
    line (470,660-(faceHeight/2.5),440,(faceHeight/2)-105);

    line (480,660-(faceHeight/2.5),460,(faceHeight/2)-110);
    line (490,660-(faceHeight/2.5),480,(faceHeight/2)-115);
    
    line (500,660-(faceHeight/2.5),500,(faceHeight/2)-120);
    
    line (510,660-(faceHeight/2.5),520,(faceHeight/2)-115);
    line (520,660-(faceHeight/2.5),540,(faceHeight/2)-110);

    line (530,660-(faceHeight/2.5),560,(faceHeight/2)-105);
    line (540,660-(faceHeight/2.5),580,(faceHeight/2)-100);
    line (550,660-(faceHeight/2.5),600,(faceHeight/2)-95);

    line (560,660-(faceHeight/2.5),620,(faceHeight/2)-90);
    line (570,660-(faceHeight/2.5),640,(faceHeight/2)-85);
    line (580,660-(faceHeight/2.5),660,(faceHeight/2)-80);

    line (590,660-(faceHeight/2.5),680,(faceHeight/2)-75);
    line (600,660-(faceHeight/2.5),700,(faceHeight/2)-70);
    line (610,660-(faceHeight/2.5),720,(faceHeight/2)-65);

    line (620,660-(faceHeight/2.5),740,(faceHeight/2)-60);
    line (630,660-(faceHeight/2.5),760,(faceHeight/2)-55);
    line (640,660-(faceHeight/2.5),780,(faceHeight/2)-50);

    line (650,660-(faceHeight/2.5),800,(faceHeight/2)-45);
    line (660,660-(faceHeight/2.5),820,(faceHeight/2)-40);
    line (670,660-(faceHeight/2.5),840,(faceHeight/2)-35);

    line (680,660-(faceHeight/2.5),860,(faceHeight/2)-30);
    line (690,660-(faceHeight/2.5),880,(faceHeight/2)-25);
    line (700,660-(faceHeight/2.5),900,(faceHeight/2)-20);

}

function mousePressed() {
    
    //background color
    r = random (0,255);
    g = random (0,255);
    b = random (0,255);

    //shirt color
    r1 = random (0,255);
    g1 = random (0,255);
    b1 = random (0,255);

    faceWidth = random (400, 900);
    faceHeight = random (400, 800);

    eyebrowThickness = random (10,50);
    eyebrowHeight = random (500, 545);

    eyeDiameter = random (20,80);
    eyeCenterY1 = random (570,600);

    //nose width coordinates
    noseX = random (480,520);
    noseY = random (500,590);

    //mouth option 1,2, or 3
    mouth = int(random (1,4));
}