Variable Face

variableface
var faceWidth = 300;
var faceHeight = 320;
var eyeSize = 60;
var faceC = 180
var eyeC = 255
var pC = 0
var maskC = 200
var eyebC = 50
var hairC = 255
function setup() {
    createCanvas(640, 480);
    background(220);
}

function draw() {
	var colorR = random(0, 255); //red
    var colorG = random(0, 255); //green
    var colorB = random(0, 255); //blue
    background(colorR, colorG, colorB)
    stroke(0)
    strokeWeight(1)
    fill(0,0,0)
    rect(25, 25, 590, 430)
    //hair back
    fill(hairC)
    noStroke()
    ellipse(width / 2, height / 2, faceWidth + 150, faceHeight + 150)
    //face
    stroke(0)
    fill(faceC)
    strokeWeight(1)
    ellipse(width / 2, height/ 2, faceWidth, faceHeight);
    var eyeL = width / 2 - faceWidth * .25
    var eyeR = width / 2 + faceWidth * .25
    //hair front
    fill(hairC)
    noStroke()
    ellipse(width / 2, height / 6, faceWidth/ 1.3, faceHeight / 3.1)
    fill(eyeC)
    stroke(0)
    ellipse(eyeL, height / 2, eyeSize, eyeSize); //eyeLeft
    ellipse(eyeR, height / 2, eyeSize, eyeSize); //eye Right
    var eyeP = 30
    fill(pC)
    ellipse(eyeL + eyeSize / 8, height / 2 + eyeSize / 5, eyeP, eyeP); //pupil L
    ellipse(eyeR + eyeSize / 8, height / 2 + eyeSize / 5, eyeP, eyeP); //pupil R
    //mask string
    noFill()
    stroke(hairC)
    strokeWeight(10)
    ellipse(eyeL - 60, height / 1.4, faceWidth / 3, faceHeight / 3)
    ellipse(eyeR + 50, height / 1.4, faceWidth / 3, faceHeight / 3)
    //mask
    fill(maskC)
    strokeWeight(1)
    rect(eyeL - 25, height/1.7, faceWidth / 1.5, faceHeight /3.5 ) //mask
    fill(0)
    line(eyeL - 25, height/1.7 + 10, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 10 ) // mask lines
    line(eyeL - 25, height/1.7 + 20, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 20 )
    line(eyeL - 25, height/1.7 + 30, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 30 )
    line(eyeL - 25, height/1.7 + 40, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 40 )
    line(eyeL - 25, height/1.7 + 50, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 50 )
    line(eyeL - 25, height/1.7 + 60, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 60 )
    line(eyeL - 25, height/1.7 + 70, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 70 )
    line(eyeL - 25, height/1.7 + 80, eyeL - 25 + faceWidth / 1.5, height / 1.7 + 80 )
    //eyelash
    stroke(0)
    strokeWeight(5)
    line(eyeL- eyeSize/ 2, height/2, eyeL - eyeSize / 2 - 20, height/2.1)
    line(eyeR + eyeSize/ 2, height/2, eyeR + eyeSize / 2 + 20, height/2.1)
    line(eyeL - eyeSize/2, height/2.1, eyeL - eyeSize / 2 - 20, height/2.2)
    line(eyeR + eyeSize/2, height/2.1, eyeR + eyeSize / 2 + 20, height/2.2)
    //eyebrow
    noStroke()
    fill(eyebC)
    rect(eyeL - eyeSize / 2, height/3, eyeSize, eyeSize / 6)
    rect(eyeR - eyeSize / 2, height/3, eyeSize, eyeSize / 6)
}

function mouseClicked(){
    faceWidth = random(250, 450);
    faceHeight = random(270, 470);
    eyeSize = random(40, 80);
    eyeP = random(20, 40);
    faceC = color(random (0, 255), random(0, 255), random (0, 255))
    maskC = color(random (0, 255), random(0, 255), random (0, 255))
    eyeC = color(random (180, 255), random(180, 255), random (180, 255))
    pC = color(random (0, 255), random(0, 255), random (0, 255))
    eyebC = color(random (0, 255), random(0, 255), random (0, 255))
    hairC = color(random (0, 150), random(0, 150), random (0, 150))

}

For this project I decided I wanted a face with the mask. As I started coding I chose to make a female face that would change colors and sizes. The hard part was getting the mask to align correctly with each face same goes for the top of the hair. I wanted my faces to look like a cartoon would during Covid.

Leave a Reply