Author: Jasper

Jasper Face 2

// Face variables
var eyeSize = 30;
var faceWidth = 80;
var faceHeight = 125;
var noseSize = 335;
var earSize = 15;
var mouthSize = 345;

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

function draw() {
    background('blue');
    //hair
    fill('brown');
    ellipse(width / 2, height / 2 -20, faceWidth,  faceHeight);
    //face
    fill(253, 228, 200);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    fill('white'); 
    //eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //iris
    fill('brown');
    ellipse(eyeLX, height / 2, eyeSize * .25, eyeSize * .25);
    ellipse(eyeRX, height / 2, eyeSize * .25, eyeSize * .25);
    //nose
    fill(253, 228, 200);
    triangle(240,  320, 237, noseSize, 243, noseSize);
    //mouth
    arc(width / 2, mouthSize, 10, 10, 0, PI, OPEN);
    //ears
    ellipse(240 - faceWidth * .5, 285, 10, earSize);
    ellipse(240 + faceWidth * .5, 285, 10, earSize);
}

function mousePressed() {
    faceWidth = random(70, 125);
    faceHeight = random(120, 160);
    eyeSize = random(18, 37);
    noseSize = random(330, 340);
    earSize = random(12, 18);
    mouthSize = random(343, 348)
}

I had trouble with variables at first, but once I understood them more it was fine.

Jasper Face

function setup() {
  createCanvas(300, 200);
}

function draw() {
    background(76, 45, 143);
    //neck
    fill(253, 228, 200);
    rect(140, 140, 20, 70);
    //face
    ellipse(150, 150, 55, 65);
    //eye
    fill('white');
    ellipse(140, 140, 12, 10);
    ellipse(160, 140, 12, 10);
    //iris
    fill('brown');
    ellipse(140, 140, 6, 6);
    ellipse(160, 140, 6, 6);
    //pupil
    fill('black');
    ellipse(140, 140, 2, 2);
    ellipse(160, 140, 2, 2);
    //nose
    fill(253, 228, 200);
    triangle(150, 150, 148, 160, 153, 160);
    //mouth
    arc(150, 166, 10, 10, 0, PI, OPEN);
    //eylashes left side
    line(140, 134, 140, 131);
    line(136, 135, 136, 131);
    line(138, 134, 138, 131);
    line(134, 135, 134, 131);
    line(142, 134, 142, 131);
    line(144, 135, 144, 131);
    //eyelashes right side
    line(160, 134, 160, 131);
    line(162, 134, 162, 131);
    line(164, 136, 164, 131);
    line(166, 136, 166, 131);
    line(160, 134, 160, 131);
    line(158, 134, 158, 131);
    line(156, 135, 156, 131);
    //hair
    stroke('brown');
    line(mouseX, 105, 150, 116);
    line(mouseX+5, 105, 155, 118);
    line(mouseX+10, 105, 160, 120);
    line(mouseX+15, 105, 165, 122);
    line(mouseX-5, 105, 145, 118);
    line(mouseX-10, 105, 140, 120);
    line(mouseX-15, 105, 135, 122);
}

This is my first time coding. Also my hair is animated.