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

Leave a Reply