///my hair grows over time in loops

///my face follows the mouse. Make it nod!

​

let center_x; // center x coordinates of canvas

let hair_top_y; // top y coordinates of hair parallelogram(static)

let hair_bottom_y; // bottom y coordinates of hair parallelogram(variable)

let hair_top_bottom_ratio; // ratio of length of upper line in hair parallelogram against lower line(static)

let hair_top_length; // length of top line in hair parallelogram(static)

let hair_bottom_length; // length of bottom line in hair parallelogram(variable)

let center_face_x; // center x coordinate of face

let center_face_y; // center y coordinate of face

​

function setup() {

  //set canvas: passport size

  createCanvas(410, 530);

​

  //initialize variables

  center_x = width / 2;

  hair_top_y = 110; // static

  hair_bottom_y = 340; //variable

  hair_top_bottom_ratio = 5 / 6; // static

  hair_top_length = 250; // static

  hair_bottom_length = 300; // variable

  center_face_x = 205;

  center_face_y = 230;

}

​

function draw() {

  //white background

  background(255);

​

  //hair

  stroke(51);

  fill(51);

​

  ///top of hair

  ellipseMode(CENTER);

  circle(142.5, 130, 130);

  circle(267.5, 130, 130);

​

  ///hair length changes in loops over time. needs to be initialized to a static value

  hair_bottom_y = 340 + second() * 3;

  hair_bottom_length = 300 + second() * 3 * hair_top_bottom_ratio;

​

  quad(

    center_x - hair_top_length / 2,

    hair_top_y,

    center_x - hair_bottom_length / 2,

    hair_bottom_y,

    center_x + hair_bottom_length / 2,

    hair_bottom_y,

    center_x + hair_top_length / 2,

    hair_top_y

  );

​

  //bodice

  fill(255);

  stroke(0);

  strokeWeight(3);

  quad(140, 265, 70, 530, 340, 530, 270, 265);

​

  //head

  circle(205, 230, 220); //static

​

  //face orientation changes to mouse

  if ((mouseX >= 150) && (mouseX <= 260)) {

    center_face_x = mouseX;

  }

  if ((mouseY >= 170) && (mouseY <= 280)) {

    center_face_y = mouseY;

  }

​

  ///smile

  noFill();

  arc(center_face_x, center_face_y, 100, 100, (1 / 4) * PI, (3 / 4) * PI);

​

  ///eyes

  stroke(0);

  fill(0);

  line(

    center_face_x - 40,

    center_face_y - 14,

    center_face_x - 40,

    center_face_y - 8

  );

  line(

    center_face_x + 40,

    center_face_y - 14,

    center_face_x + 40,

    center_face_y - 8

  );

​

  ///eyebrows

  line(

    center_face_x - 55,

    center_face_y - 35,

    center_face_x - 35,

    center_face_y - 37

  );

  line(

    center_face_x + 35,

    center_face_y - 37,

    center_face_x + 55,

    center_face_y - 35

  );

​

  //draw pin and pose after a certain frameCount

  if (frameCount >= 20) {

    //hairpin

    stroke("#E1F050");

    strokeWeight(5);

    noFill();

    triangle(125, 130, 130, 170, 150, 150);

​

    //arm and hand

    stroke(0);

    strokeWeight(3);

    ///arm

    line(300, 420, 362, 340);

​

    ///hand

    line(362, 340, 360, 287);

    line(362, 340, 380, 291);

    fill(255);

    circle(362, 340, 45);

  }

}

​