​

let topcolor, bottomcolor;

​

function setup() {

  createCanvas(400, 400);

  background(147, 168, 217);

​

  //gradient background

  topcolor = color(247, 176, 156);

  bottomcolor = color(16, 45, 105);

​

  for(let y=0; y<height; y++){

​

  n = map(y, 0, height, 0, 1);

​

  let newcolor = lerpColor(topcolor, bottomcolor, n);

  stroke(newcolor);

  line(0, y, width, y);

  }

}

​

function draw() {

  rectMode(CENTER);

  //hair behind

  fill(0);

  noStroke();

  rect(200, 240, 133, 130, 40);

  ellipse(200, 213, 133, 130);

​

  //shirt

  fill(250, 214, 10);

  noStroke();

  rect(199, 375, 160, 130, 45);

​

  //neck

  fill(219, 197, 154);

  noStroke();

  rect(200, 290, 50, 80, 40);

​

  //shading

  fill(191, 172, 134, 130);

  noStroke();

  angleMode(DEGREES);

  // why does enabling angleMode(Degrees) make some weird lines, and why do the angles still work in degrees after it is disabled

  arc(200, 285, 46, 40, 0, 180);

  arc(200, 285, 46, 20, 0, 180);

​

  //head

  fill(219, 197, 154);

  noStroke();

  ellipse(200, 230, 100, 125);

​

  //bangs

  fill(0);

  noStroke();

  rect(200, 192, 100, 49, 5);

  fill(219, 197, 154);

  noStroke();

  triangle(221, 195, 233, 231, 218, 231);

​

  //ears

  arc(158, 248, 30, 30, 100, PI + HALF_PI);

  arc(240, 248, 30, 30, PI + HALF_PI, HALF_PI);

​

  //eyes

  noFill();

  stroke(0);

  strokeWeight(3);

  angleMode(DEGREES);

  arc(175, 242, 25, 20, 200, 340);

  arc(220, 242, 25, 20, 200, 340);

​

  //eyelashes

  line(167, 234, 164, 234);

  line(229, 234, 231, 234);

​

  fill(0);

  ellipse(181, 237, 5, 5);

  ellipse(226, 237, 5, 5);

  ellipse(227, 249, 1, 1);

​

  //smile

  noFill();

  stroke(0);

  strokeWeight(2);

  angleMode(DEGREES);

  arc(200, 267, 28, 15, 20, 170);

  //nose

  fill(191, 172, 134, 130);

  stroke(145, 129, 116, 250);

  strokeWeight(1.5);

  angleMode(DEGREES);

  arc(199, 255, 10, 9, 10, 170);

  printMouseCoordinates();

}

​

function printMouseCoordinates() {

  print(mouseX + "," + mouseY);

  //   let foo = 20;

  // circle(50,50, foo);

  // square (90, 90, foo);

}