Project 1 – Self Portrait

var bgColor;  
var hairColor;
var hairShadow;
var skinColor;
var blushColor;
var shirtColor;
var glassesColor;
var mouthColor;
var shirtOutline;

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);

    bgColor = color(255, 247, 191);
    hairColor = color(233, 148, 105);
    hairShadow = color(216, 105, 71);
    skinColor = color(244, 190, 130);
    blushColor = color(237, 163, 118);
    shirtColor = color(172, 188, 138);
    glassesColor = color(66, 31, 14);
    mouthColor = color(188, 89, 82);
    shirtOutline = color(104, 149, 129);
}

function draw() {
    background(bgColor);
  
    //back hair
    noStroke();
    fill(hairColor);
    rect(75, 90, 250, 200, 80);
    
    noStroke();
    fill(hairColor);
    rect(75, 140, 250, 170, 40);
  
    //back hair shadow
    fill(hairShadow);
    rect(90, 120, 220, 190, 40);
  
    //shirt
    fill(shirtColor);
    rect(width/4, height/1.25, 200, 250, 75);
  
    //ears
    fill(skinColor);
    ellipse(width/3.75, height/1.9, 50, 50);
    ellipse(width/1.35, height/1.9, 50, 50);
  
    //ear outlines
    noFill();
    stroke(blushColor);
    strokeWeight(3);
    ellipse(width/3.75, height/1.9, 35, 35);
    ellipse(width/1.35, height/1.9, 35, 35);
  
    //neck
    noStroke();
    fill(skinColor);
    rect(width/2.28, height/1.75, 50, 125, 50);
  
    //neck shadow
    fill(blushColor);
    rect(width/2.28, height/1.75, 50, 80, 15);
  
    //face
    fill(skinColor);
    ellipse(width/2, height/2, 200, 200);
  
    //shirt collar
    noFill();
    stroke(shirtOutline);
    strokeWeight(3);
    arc(width/2, height/1.24, 65, 75, 0, HALF_PI + HALF_PI);
  
    //blush
    noStroke();
    fill(blushColor);
    ellipse(width/2.85, height/1.7, 45, 45);
    ellipse(width/1.54, height/1.7, 45, 45);
    
    //mouth
    fill(mouthColor);
    arc(width/2, height/1.65, 50, 50, 0, HALF_PI + HALF_PI);
  
    //bangs
    fill(hairColor);
    arc(width/2, height/2.35, 250, 200, HALF_PI + HALF_PI, TWO_PI);
  
    //glasses
    noFill();
    stroke(glassesColor);
    strokeWeight(4);
    ellipse(width/2.65, height/2.1, 75, 75);
    ellipse(width/1.6, height/2.1, 75, 75);
    line(210, 190, 190, 190);
  
    //eyes
    arc(width/2.65, height/2, 40, 35, HALF_PI + HALF_PI, TWO_PI);
    arc(width/1.6, height/2, 40, 35, HALF_PI + HALF_PI, TWO_PI);
}