Author: sophiaq@andrew.cmu.edu

sketch

//Sophia Qin
//15-104 Section B
//sophiaq@andrew.cmu.edu
//Project-02
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 250;
var eyeBrowHeight = 50;
var color = 50;
var hair = 30;

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

function draw() {
    //structure of the face
    background(255,color,0);
    //face is mid of canvas
    fill(0,0,color);
    strokeWeight(5);
    fill(color,200,20);
    ellipse(width/2,height/2,faceWidth,faceHeight);
    //eye position
    var eyeLX = width/2-faceWidth*0.25;
    var eyeRX = width/2+faceWidth*0.25;
    //drawing eye
    fill(50);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //minieye
    fill(255);
    ellipse(eyeLX,height/2,eyeSize*0.5,eyeSize*0.5);
    ellipse(eyeRX,height/2,eyeSize*0.5,eyeSize*0.5);
    //eyebrow
    noFill();
    arc(eyeLX,height / 2,50,eyeBrowHeight, PI, 7/4*PI);
    arc(eyeRX,height / 2,50,eyeBrowHeight,PI+QUARTER_PI,0);
    //white mouth
    fill(255);
    ellipse(width/2, (height/2)+40,faceWidth/3,faceHeight/4);
    //mouth inside
    fill(color,0,10);
    ellipse(width/2, (height/2)+40+(faceHeight/8),faceWidth/4,faceHeight/6);
    //cheeks
    fill(250,192,255)
    ellipse(eyeLX,height/2+30,faceWidth/5,faceHeight/9);
    ellipse(eyeRX,height/2+30,faceWidth/5,faceHeight/9);
    //hair
    fill(20,39,hair);
    quad(width/2,height/2-(faceHeight/2)+30,(width/2)+faceWidth/2,height/2-(faceHeight/8),
        eyeRX,faceHeight/2,eyeLX,faceHeight/2);
    quad(width/2,height/2-(faceHeight/1.3),(width/2)+faceWidth/2,height/2-(faceHeight/1.3),
        eyeRX,faceHeight/2,eyeLX,faceHeight/2);
    quad(width/2+3,height/2-(faceHeight/1.3),(width/3)+faceWidth/3,height/2-(faceHeight/1.3),
        eyeRX,faceHeight/2+3,eyeLX+30,faceHeight/2);
}
    

function mousePressed() {
    //when the user clicks, the variables are reassigned
    //to random values within specified ranges. For example,
    //'face width' gets a random value between 75 and 150
    faceWidth = random(230, 300);
    faceHeight = random(220, 300);
    eyeSize = random(10, 40);
    eyeBrowHeight = random(30,80);
    color = random(100,255);
    hair = random(0,190);
}

I wanted the face shaped to be relatively similar and I wanted to look cartoony. I didn’t sketch out beforehand, and I figured out my plan of changing colors, sizes, hair, etc along the way

sketch

function setup() {
    createCanvas(600, 600);
    background(250,140,171);
    //text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
    //hair
    noStroke();
    fill(0);
    ellipse(300,280,300,400);
    //head
    strokeWeight(0);
    fill(255,232,212);
    ellipse(300,250,250,300);
    //body
    fill(140,217,250);
    ellipse(320,450,140,90);
    //neck
    fill(255,232,212);
    rect(300,380,40,30);
    //eyes
    fill(255,255,255);
    ellipse(250,250,30,30);
    ellipse(350,250,30,30);
    //pupil
    fill(0,0,0);
    ellipse(250,250,10,10);
    ellipse(350,250,10,10);
    //nose
    noFill();
    stroke(255,209,168);
    strokeWeight(2);
    arc(300,290,25,10,0,180)
    //smile
    noFill();
    stroke(255,158,206);
    strokeWeight(2);
    arc(300,330,30,50,290,90);
    //lips
    fill(255,158,206);
    ellipse();
    //cheek
    noStroke();
    fill(0);
    noFill();
    stroke(255,158,206);
    strokeWeight(2);
    ellipse(200,300,40,40);
    ellipse(400,300,40,40);
    //eyebrows
    noFill();
    stroke(0);
    arc(250,250,100,100, PI, 3/2*PI);
    arc(350,250,100,100,PI+QUARTER_PI,0);

}

It was a bit difficult figuring out the geometry of the face, so I tried my best! I think sketching it on photoshop would have been easier for me to code and to create a better looking face

sketch

function setup() {
    createCanvas(200, 200);
    background(0,0,0);
}

function draw() {
    noStroke();
    fill(0,0,255);
    ellipse(100,100,100,70);
}