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