let radius;

let percent = 0;

let tx;

let ty;

let yoff = 0.0;

let bodyWidth = 200;

​

function setup() {

  createCanvas(400, 600);

​

}

​

function draw() {

  background(176,196,222);

//Kyle Head

  //hat

  push();

  fill(0, 34, 85);

  translate(200,200);

  rotate(3*HALF_PI);

  arc(0, 0, 220, 300, 0, HALF_PI);

  pop();

  push();

  noStroke();

  fill(0, 34, 85);

  quad(165, 177, 185, 173, 190, 200, 161, 200);

  pop();

​

  //right ear

  push();

  noStroke();

  let Rearx1 = 194;

  let Reary1 = 17;

  let Rearx2 = 175;

  let Reary2 = 109;

  let Rearx3 = 205;

  let Reary3 = 99;

  fill(0);

  triangle(Rearx1, Reary1, Rearx2, Reary2, Rearx3, Reary3);

  //left ear

  let Learx1 = 239;

  let Leary1 = 8;

  let Learx2 = 213;

  let Leary2 = 99;

  let Learx3 = 248;

  let Leary3 = 109;

  triangle(Learx1, Leary1, Learx2, Leary2, Learx3, Leary3);

  fill(255);

  let Learx1i = 236;

  let Leary1i = 39;

  let Learx2i = 222;

  let Leary2i = 99;

  let Learx3i= 240;

  let Leary3i = 105;

  triangle(Learx1i, Leary1i, Learx2i, Leary2i, Learx3i, Leary3i);

  //face front 

  fill(0);

  beginShape();

  vertex(213,99);

  vertex(205,99);

  vertex(173,107);

  vertex(79,155);

  vertex(100,185);

  vertex(184,175);

  vertex(189,200);

  vertex(208,200);

  endShape();

  fill(0);

  beginShape();

  vertex(213, 99);

  bezierVertex(300, 109, 280, 160, 208, 169);

  endShape();

  //eye frame

  push();

  fill(250);

  beginShape();

  vertex(190,123);

  bezierVertex(208,110,217,119,226,123);

  bezierVertex(200,130,210,130,190,123);

  endShape();

  //pupils

  fill(0);

  movingEye(208,122,12,12);

  //eyebrows

  noFill();

  strokeWeight(3);

  stroke(255);

  strokeCap(SQUARE);

  beginShape();

  vertex(193,115);

  bezierVertex(205, 110, 215, 110, 226,117);

  endShape();

  pop();

//Yao leg

  push();

  noStroke();

  fill(157,60,42);

  ellipse(204, 505, 200, 60)

  fill(246,193,58);

  beginShape();

  curveVertex(95, 440);

  curveVertex(95, 430);

  curveVertex(133, 514);

  curveVertex(277, 514);

  curveVertex(309,430);

  curveVertex(309,440);

  endShape();

  mouth(205,480);

  pop();

​

//Ziyan body 1

  //backgroundColor

  noStroke();

  push();

  fill(0);

  rect(0, 194, 400, 125);

  //goat body left

  fill(255);

  beginShape();

  vertex(0, 249);

  vertex(114, 249);

  vertex(118, 307);

  vertex(103, 314);

  vertex(0, 314);

  endShape();

  beginShape();

  vertex(113, 238);

  vertex(121, 238);

  vertex(140, 251);

  vertex(143, 295);

  vertex(128, 306);

  vertex(117, 307);

  endShape();

  beginShape();

  vertex(97,196);

  bezierVertex(116, 215, 146, 229, 156, 251);

  bezierVertex(80, 300 ,134, 230, 140, 250);

  endShape();

  beginShape();

  vertex(156,251);

  vertex(184,299);

  vertex(184,309);

  vertex(174,311);

  vertex(140,295);

  vertex(139,250);

  vertex(156,251);

  endShape();

  //right body

  beginShape();

  vertex(295, 249);

  vertex(400, 249);

  vertex(400, 313);

  vertex(307, 314);

  vertex(291,306);

  endShape();

  beginShape();

  vertex(292,306);

  vertex(280, 306);

  vertex(265, 295);

  vertex(269, 250);

  vertex(285, 239);

  vertex(296, 238);

  endShape(CLOSE);

  beginShape();

  vertex(311,196);

  bezierVertex(260, 234, 264, 227, 253, 252);

  bezierVertex(330, 215, 273, 312, 269, 251);

  endShape();

  beginShape();

  vertex(275, 242);

  vertex(253, 251);

  vertex(224, 299);

  vertex(228, 309);

  vertex(238, 310);

  vertex(266, 295);

  endShape(CLOSE);

  fill(0);

  ellipse(149, 265, 22, 10);

  ellipse(259, 265, 22,10);

  fill(255);

  movingEye(149, 265, 5, 5);

  movingEye(259, 265, 5, 5);

  pop();

//Scarllet body 2

  //backgroundColor

  push();

  fill(0);

  rect(0, 320, 400, 125);

  //blueLine

  stroke(4,51,254);

  strokeWeight(1);

  line(0,332,150,332);

  line(0,336,150,336);

  line(0,340,150,340);

  line(150,332,251,345);

  line(150,336,251,349);

  line(150,340,251,353);

  line(251,345,402,345);

  line(251,349,402,349);

  line(251,353,402,353);

  //CyanLine

  stroke(0,252,254);

  line(0,420,150,420);

  line(0,424,150,424);

  line(0,428,150,428);

  line(150,420,252,433);

  line(150,424,252,437);

  line(150,428,252,441);

  line(252,433,400,434);

  line(252,437,400,438);

  line(252,441,400,442);

  //darkPinkLine

  stroke(235,43,140);

  line(95,321,95,367);

  line(99,321,99,367);

  line(103,321,103,367);

  line(95,367,110,405);

  line(99,367,114,405);

  line(103,367,118,405);

  line(110,405,110,445);

  line(114,405,114,445);

  line(118,405,118,445);

  //lightPinkLine

  stroke(252,139,252);

  line(296,321,296,367);

  line(300,321,300,367);

  line(304,321,304,367);

  line(296,367,282,405);

  line(300,367,286,405);

  line(304,367,290,405);

  line(282,405,282,445);

  line(286,405,286,445);

  line(290,405,290,445);

  pop();

  //heart

  push();

  cardio(370,420);

  heart(15,40,388);

  heart(15,368,388);

  pop();

}

​

​

​

//FUNCTIONS

function mouth(mouthPositionX,mouthPositionY){

  push();

  let mouthWidth = mouseX/4+20

  let mouthHeight = mouseY/8+20

  strokeWeight(5);

  stroke(151,0,36);

  fill(94,0,12);

  ellipse(mouthPositionX,mouthPositionY,mouthWidth,mouthHeight)

  pop();

}

​

function cardio(rangeX, rangeY){

  noFill();

  stroke(0,191,0);

  beginShape();

  let xoff = yoff; 

  // Iterate over horizontal pixels

  for (let x = 0; x <= width; x += 10) {

    // Calculate a y value according to noise, map to

​

    let y = map(noise(xoff), 0, 1, rangeX,rangeY);

    // Set the vertex

    vertex(x, y);

    // Increment x dimension for noise

    xoff += 0.05;

  }

  // increment y dimension for noise

  yoff += 0.01;

  vertex(width, height);

  vertex(0,height);

  endShape(CLOSE);

}

​

function heart(radius,tx,ty){

  push();

  translate(tx, ty);

  //translate(40, 388);

  var angle = TWO_PI / npoints;

  fill(150,0,100);

  noStroke();

  beginShape();

  for (var a = 0; a < TWO_PI; a += angle) {

    // cardioid

    let ac = a;

    let r = (1 - sin(ac)) * 0.66;

    let cx = cos(ac) * r * radius;

    let cy = ((sin(ac) * r) + 0.5) * radius;

    // heart 1

    let ah = PI / 2 - a;

    let hx = 16 * pow(sin(ah), 3) * radius * 0.05;

    let hy = (13 * cos(ah) - 5 * cos( 2 * ah) - 2 * cos(3 * ah) - cos(4 * ah)) * radius * 0.05;

    let coef = sin(percent * PI);

    let sx = cx * coef + hx * (1 - coef);

    let sy = cy * coef + hy * (1 - coef);

    vertex(sx, -sy);

  }

  endShape(CLOSE);

  pop();

  percent += 0.02;

  if (percent >= 1)

  {

    percent = 0;

  }

}

function movingEye(x,y,dx,dy){ 

  let positionX = x;

  let positionY = y;

  let ellipseX = dx;

  let ellipseY = dy;

  y = map(mouseY, 0, height, y-10, y+10, true);

  x = map(mouseX, 0, width, x-10, x+10, true);

  ellipse(x,y,dx,dy);

  }