Yiran Xuan Project-02-Variable-Face

This sketch was made by adapting the template. The rectangular face and many other elements are centered on the canvas by frequent use of the canvas dimensions (stored as variables) divided by half, in the shape parameters.

sketch

var noseheight = 150
var nosewidth = 50;

var facewidth = 200;
var faceheight = 150;

var eyesize = 20;
var eyedistance = 100;

var eyecolor = 0;

var canvasheight = 640;
var canvaswidth = 480;

function setup() {
    createCanvas(canvaswidth, canvasheight );
}

function draw() {
    background(180);

    fill(100);
    //draw the face;
    rect((canvaswidth-facewidth)/2, (canvasheight-faceheight)/2, facewidth, faceheight);
    //draw the eyes
    fill(eyecolor);
    ellipse((canvaswidth - eyedistance)/2, 300, eyesize, eyesize);
    ellipse((canvaswidth + eyedistance)/2, 300, eyesize, eyesize);
 	//draw the nose
 	fill(100);
 	triangle((canvaswidth - nosewidth)/2, canvasheight/2, (canvaswidth + nosewidth)/2, canvasheight/2, canvaswidth/2, noseheight);
 	//draw the mouth

 	line(canvaswidth/2-50, (canvasheight+faceheight)/2 - 50, canvaswidth/2+50, (canvasheight+faceheight)/2 - 50);
}	

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.
    eyecolor = random(0, 255);

    eyesize = random(10, 30);
    eyedistance = random(75, 125);

    nosewidth = random(30, 70);
    noseheight = random(canvasheight/2 - 20, canvasheight/2 + 20);
}