let head;

let legLength;

function preload() {

  head = loadImage('assets/updated_head.png');

  bottom = 

loadImage('assets/bottom.png');

}

​

function setup() {

  createCanvas(400, 600);

  angleMode(DEGREES);

  //image(head, 65, 0, 240, 120);

  //middle black section

  fill(0);

  rect(0, 120, 400, 250);

}

​

function draw() {

  drawSpine(130, 346);

  drawBones(190, 330); 

  drawArm();

  drawHeart();

  if(mouseY > 120 && mouseY < 370 && mouseX > 0 && mouseX < width){

    drawGlasses();

    //pants

    noStroke();

    fill(201, 147, 64);

    rect(0, 370, 400, 230);

    fill(186, 189, 222);

    quad(130, 370, 175, 370,160, 460, 135, 460);

    quad(135, 460,160, 460, 155, 490, 125, 490);

    quad(205, 380, 245, 380,225, 465, 195, 465);

    quad(225, 465, 195, 465, 212, 510, 240, 490);

    fill(33, 37, 87);

    arc(190, 370, 130, 50, 0, 180, CHORD);

    drawLegs(5, 33, -10);

    drawLegs(-35, -250, 55);

  } else {

    //images of head and legs

    fill(201, 147, 64);

    noStroke();

    rect(0, 0, 400, 120);

    image(head, 65, 0, 240, 120);

    rect(0, 370, 400, 290);

    image(bottom, 40, 370, 300, 285);

  }

}

​

function drawHeart(){

  //if mouse in middle section, heart beats.

  let red;  

  if(mouseY > 120 && mouseY < 370 && mouseX > 0 && mouseX < width){

  red = map((millis() % 500), 0, 300, 255, 0);   

  } else {

  red = fill(255, 0, 0);

  }

  push();

  translate(-28, -150);

  rotate(5);

  noStroke();

  fill(red, 0, 0);

  quad(300, 300, 275, 325, 300, 350, 326, 325);

  ellipse(288, 313, 35, 35);

  ellipse(313, 313, 35, 35);

  pop();

}

​

function drawGlasses(){

  //sunglasses

  push();

  translate(185, 55);

  fill(59, 20, 66);

  // quad(0,0, 30,10, 60,0, 55,25, 40,35, 30,25, 20,35, 5,25);

  stroke(59, 20, 66);

  strokeJoin(ROUND);

  beginShape();

  vertex(0,0);

  vertex(30, 6);

  vertex(60, 0);

  vertex(55, 15);

  vertex(40, 23);

  vertex(30, 18);

  vertex(20, 23);

  vertex(5, 15);

  endShape(CLOSE);

  pop();

  //star

  push();

  translate(215, 50);

  scale(0.5);

  rotate(45);

  fill(255,255,0);

  noStroke();

  beginShape();

  vertex(-10, 10);

  vertex(0, 35);

  vertex(10, 10);

  vertex(35, 0);

  vertex(10, -8);

  vertex(0, -35);

  vertex(-10, -8);

  vertex(-35, 0);

  endShape();

  pop();

}

​

function drawLegs(a,distX, distY){

  push();

  rotate(a);

  translate(distX, distY);

  fill('red');

  rect(125, 495, 45, 90);

  //toe box

  fill(97, 12, 40);

  beginShape();

  vertex(130, 586);

  quadraticVertex(155, 525, 175, 586);

  endShape(CLOSE);

  //yellow thingy

  strokeWeight(12);

  stroke(252, 186, 3);

  strokeCap(ROUND);

  fill(252, 186, 3);

  line(130, 490, 165, 490);

  line(170, 525, 170, 545);

  line(125, 525, 125, 545);

  pop();

}

​

​

function drawSpine(yStart, yEnd){

  //spine

  fill(240);

  noStroke();

  beginShape();

  curveVertex(180, 112)

  curveVertex(180, 120);

  curveVertex(200, 127);

  curveVertex(195, 200);

  curveVertex(200, 350);

  curveVertex(180, 350);

  curveVertex(175, 200);

  endShape();

​

  //spiral

  noFill();

  stroke(255, 102, 0);

  strokeWeight(3);

  stroke(0, 255, 255);

  for (let y = yStart; y < yEnd; y += 19){

    bezier(203, y, 113, y, 263, y+20, 173, y+20);

  }

}

​

function drawBones(xMid, yMid){

  //collar bones & pelvil bones

  strokeWeight(2);

  stroke(240);

  ellipse(140, 130, 90, 10);

  ellipse(240, 130, 90, 10);

  strokeWeight(4);

  quad(xMid-70, yMid, xMid-10, yMid+5, xMid-10, yMid+30, xMid-35, yMid+35);

  quad(xMid+70, yMid, xMid+10, yMid+5, xMid+10, yMid+30, xMid+35, yMid+35);

  push();

  rotate(-25);

  translate(-165, 25);

  ellipse(xMid-55, yMid+25, 50, 15);

  pop();  

  push();

  rotate(25);

  translate(125,-135);

  ellipse(xMid+55, yMid+25, 50, 15);

  pop();

}

​

function drawArm(){

  //left arm

  strokeWeight(2)

  ellipse(100, 155, 15);

  strokeWeight(12);

  line(107,175,142,265);

  strokeWeight(2)

  ellipse(150, 285, 15);

  strokeWeight(6);

  line(165,276,208,248);  

  //ellipse(220, 240, 5);

  noFill();

  strokeWeight(3);

  beginShape();

  vertex(210, 220);

  quadraticVertex(210, 255, 225, 233);

  endShape();

  push();

  translate(185,0);

  strokeWeight(2)

  ellipse(100, 155, 15);

  strokeWeight(12);

  line(107,175,142,265);

  strokeWeight(2)

  ellipse(150, 285, 15);

  translate(295,0);

  rotate(70);

  strokeWeight(6);

  line(165,276,208,248);   

  pop();

  noFill();

  strokeWeight(3);

  beginShape();

  vertex(260, 235);

  quadraticVertex(275, 255, 275, 223);

  endShape(); 

}