///make my hair grow over time

​

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)

​

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

}

​

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);

​

  //face

  ///smile

  fill(255);

  arc(205, 230, 100, 100, (1 / 4) * PI, (3 / 4) * PI);

​

  ///eyes

  stroke(0);

  fill(0);

  line(165, 216, 165, 222);

  line(245, 216, 245, 222);

​

  ///eyebrows

  line(150, 195, 170, 193);

  line(240, 193, 260, 195);

​

  //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);

  }

}

​