​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  drawBG();

  drawBody();

  drawHair();

  drawFace();

  drawFrontHair();

}

​

function drawBG() {

  r = random(200, 255);

  g = random(200, 255);

  b = random(200, 255);

  background(r, g, b);

}

​

function drawBody() {

  //body

  fill(248, 222, 206);

  noStroke();

  rect(20, 430, 560, 170, 140, 140, 0, 0);

  // button & neck point

  fill(199, 155, 127);

  noStroke();

  ellipse(300, 510, 20, 20);

  ellipse(300, 560, 20, 20);

  stroke(199, 155, 127);

  strokeWeight(6);

  noFill();

  arc(300, 470, 116, 40, 0, PI);

}

​

function drawHair() {

  Haircolor = map(mouseX, 0, width, 255, 0);

  fill(Haircolor);

  noStroke();

  ellipse(300, 245, 300, 400);

  rect(150, 245, 90, 240);

  rect(360, 245, 90, 240);

  arc(240, 485, 180, 180, HALF_PI, PI);

  arc(360, 485, 180, 180, 0, HALF_PI);

}

​

function drawFace() {

  //neck

  fill(255, 190, 190);

  noStroke();

  rect(240, 350, 120, 120);

  ellipse(300, 470, 120, 40);

  // face

  fill(255, 218, 216);

  noStroke();

  ellipse(300, 245, 220, 300);

  // ear

  fill(255, 218, 216);

  noStroke();

  ellipse(190, 257, 52, 64);

  ellipse(410, 257, 52, 64);

  // lips

  fill(232, 105, 118);

  noStroke();

  arc(300, 325, 80, 40, 0, PI);

  arc(285, 325, 50, 28, PI, 0);

  arc(315, 325, 50, 28, PI, 0);

  stroke(202, 69, 83);

  strokeWeight(4);

  line(270, 327, 330, 327);

  // earrings

  fill(255);

  noStroke();

  ellipse(190, 290, 20);

  ellipse(410, 290, 20);

  // nose

  fill(255, 190, 190);

  noStroke();

  triangle(280, 280, 300, 230, 320, 280);

}

​

function drawFrontHair() {

  Haircolor = map(mouseX, 0, width, 255, 0);

  stroke(Haircolor);

  strokeWeight(60);

  bezier(190, 200, 210, 190, 260, 160, 280, 95);

  bezier(400, 200, 390, 200, 350, 160, 320, 95);

}