createCanvas(400, 600);

  ellipseMode(CENTER);

  angleMode(DEGREES);

  rectMode(CENTER);

}

​

function draw() {

  background(220);

​

  let noseX = width / 2;

  let noseY = 115;

  let eyeX1 = noseX - 40;

  let eyeY1 = noseY - 20;

  let eyeX2 = noseX + 40;

  let eyeY2 = noseY - 20;

​

  let face = 100;

  let armX1 = 70;

  let armY1 = 240;

  let armX2 = 325;

  let armY2 = 240;

  let m1 = mouseX;

  let m2 = mouseY;

​

  push(); //Water waves

  noStroke();

  fill(208, 233, 241); //

  rect(200, 50, 400, 100);

  ellipse(150 + m1, 50 + m2, 300, 200);

​

  fill(126, 202, 221); //

  rect(200, 150, 400, 100);

  ellipse(400 - m1 / 4, 150, 300, 200);

​

  fill(176, 218, 232); //

  rect(200, 150, 400, 100);

  ellipse(100 + m1 / 4, 150, 300, 200);

​

  fill(78, 182, 208); //

  rect(200, 200, 400, 100);

  ellipse(400 - m1 / 4, 200, 300, 200);

​

  fill(129, 196, 218); //

  rect(200, 250, 400, 100);

  ellipse(100 + m1 / 2, 250, 300, 200);

​

  fill(62, 175, 226); //

  rect(200, 300, 400, 100);

  ellipse(300 - m1 / 2, 300, 300, 200);

​

  fill(47, 151, 177); //

  rect(200, 350, 400, 100);

  ellipse(200 - m1 / 2, 350, 300, 200);

​

  fill(50, 143, 174); //

  rect(200, 400, 400, 100);

  ellipse(250 - m1 / 3, 400, 300, 200);

​

  fill(36, 102, 124); //

  rect(200, 450, 400, 100);

  ellipse(150 + m1 / 4, 450, 300, 200);

​

  fill(39, 124, 145); //

  rect(200, 500, 400, 100);

  ellipse(250 - m1 / 3, 500, 300, 200);

​

  fill(30, 96, 113); //

  rect(200, 550, 400, 100);

  ellipse(150 + m1 / 4, 550, 300, 200);

​

  fill(28, 78, 105); //

  rect(200, 590, 400, 100);

  ellipse(250 - m1 / 4, 580, 300, 200);

  pop();

​

  legs(m1, m2);

  body(m1, m2);

  head(noseX, noseY, face);

  arms(armX1, armY1, armX2, armY2,m1,m2);

  eyes(eyeX1, eyeX2, eyeY1, eyeY2, noseX, noseY);

​

 // text("(" + mouseX + ", " + mouseY + ")", 10, 10);

}

​

// head

function head(noseX, noseY, face) {

  let ear1 = noseX - face;

  let ear2 = noseX + face;

  let earY = noseY + 10;

  noStroke();

  //ears

  push(); //right & left

  fill(121, 62, 66);

  ellipse(ear1, earY, 28, 38);

  ellipse(ear2, earY, 28, 38);

  pop();

  push(); //right & left inside

  fill(200, 100, 71);

  ellipse(ear1, earY, 10, 22);

  ellipse(ear2, earY, 10, 22);

  pop();

  //base

  push();

  fill(121, 62, 66);

  ellipse(noseX, noseY, 190, 170);

  pop();

  //mouth

  push();

  translate(noseX, noseY);

  noFill();

  stroke(25, 17, 15);

  strokeWeight(3);

  arc(-10, 40, 30, 50, 300, 20);

  arc(0, 60, 50, 30, 220, 320);

  arc(23, 44, 30, 10, 10, 170);

  scale(-1, 1);

  arc(21, 35, 30, 30, 30, 120);

  pop();

  //nose

  push();

  stroke(34, 23, 20);

  fill(34, 23, 20);

  ellipse(noseX, noseY, 43, 43);

  pop();

}

​

//eyes

function eyes(eyeX1, eyeX2, eyeY1, eyeY2, noseX, noseY) {

  //eyes

  stroke(25, 17, 15);

  push(); //left eye

  translate(eyeX1, eyeY1);

  rotate(20);

  strokeWeight(4);

  fill(255, 103, 39);

  ellipse(0, 0, 28, 38);

  fill(0, 0, 0);

  ellipse(4, 0, 20, 24);

  strokeWeight(0);

  fill(255);

  ellipse(4, -4, 8, 8);

  ellipse(0, 4, 5, 5);

  pop();

​

  push(); //righteye

  translate(eyeX2, eyeY2);

  scale(-1, 1);

  rotate(20);

  strokeWeight(4);

  fill(255, 103, 39);

  ellipse(0, 0, 28, 38);

  fill(0, 0, 0);

  ellipse(4, 0, 20, 24);

  strokeWeight(0);

  fill(255);

  ellipse(4, -4, 8, 8);

  ellipse(0, 4, 5, 5);

  pop();

​

  //whiskers

​

  push(); //right

  noFill();

  strokeWeight(2);

  arc(225, noseY + 80, 150, 80, 270, 0);

  arc(220, noseY + 70, 150, 80, 270, 0);

  arc(220, noseY + 65, 150, 80, 270, 0);

  arc(222, noseY + 62, 150, 80, 270, 0);

  pop();

​

  push(); //left

  noFill();

  strokeWeight(2);

  arc(170, noseY + 90, 160, 100, 200, 280);

  arc(160, noseY + 70, 150, 80, 200, 300);

  arc(165, noseY + 74, 150, 80, 200, 290);

  arc(160, noseY + 78, 150, 80, 200, 300);

  arc(164, noseY + 65, 140, 80, 190, 300);

  pop();

}

​

// body

function body(m1, m2) {

  if (m1 > width || m2 > height) {

    push();

    translate(width / 2 - 20, height / 2);

    rotate(20);

    noStroke();

    fill(169, 146, 145);

    rect(0, 0, 200, 230);

    fill(195, 188, 200);

    strokeWeight(4);

    stroke(116, 82, 108);

    rect(0, 0, 160, 100);

    ellipse(-75, 75, 30, 30);

    pop();

  } else {

    noStroke();

    fill(169, 146, 145);

    rect(width / 2, height / 2, 200, 230);

    fill(195, 188, 200);

    strokeWeight(4);

    stroke(116, 82, 108);

    rect(width / 2, height / 2, 160, 100);

    ellipse(135, 375, 30, 30);

  }

}

​

//arms

function arms(armX1, armY1, armX2, armY2,m1,m2) {

  strokeWeight(4);

  stroke(116, 82, 108);

  push(); //left

  noStroke();

  translate(armX1, armY1);

  rotate(-60);

  fill(169, 146, 145);

  rect(0, 0, 100, 30);

  pop();

​

  push();

  translate(45, 280);

    if (m1 > width || m2 > height) {

  rotate(-60);

    }

  else { rotate(0);

       }

  push();

  translate(-10, 20);

  rotate(-55);

  rect(0, 0, 50, 30);

  pop();

  rotate(2);

  // triangle(9, 314, 23, 322, 8, 332);

  // triangle(24, 322, 36, 329, 22, 340);

  triangle(-36, 34, -22, 42, -37, 52);

  triangle(-21, 42, -9, 49, -23, 60);

​

  pop();

  push(); //right

  noStroke();

  fill(169, 146, 145);

  translate(armX2, armY2);

  rotate(60);

  rect(0, 0, 100, 30);

  pop();

​

  push();

  translate(armX2 + 35, armY2 + 60);

  rotate(60);

  rect(0, 0, 50, 30);

  pop();

  push();

  strokeWeight(4);

  triangle(360, 330, 375, 320, 375, 338);

  triangle(375, 320, 385, 313, 387, 329);

  pop();

}

​

// legs

function legs(m1, m2) {

  if (m1 > width || m2 > height) {

    push(); //left

    noFill();

    strokeWeight(10);

    stroke(62, 20, 37);

    arc(70, 370, 200, 300, 300, 90);

    arc(70, 410, 150, 200, 300, 90);

    pop();

​

    push(); //right

    noFill();

    strokeWeight(10);

    stroke(62, 20, 37);

    arc(320, 370, 220, 300, 90, 200);

    arc(320, 410, 160, 200, 90, 200);

    pop();

​

    push();

    noStroke();

    fill(81, 190, 22);

    star(80, 510, 15, 30, 7);

    ellipse(80, 510, 70, 20);

    star(350, 510, 15, 30, 7);

    ellipse(350, 510, 70, 20);

    pop();

  } else {

    push(); //left

    noFill();

    strokeWeight(10);

    stroke(62, 20, 37);

    line(150, 410, 150, 530);

    line(135, 410, 135, 530);

    pop();

​

    push(); //right

    noFill();

    strokeWeight(10);

    stroke(62, 20, 37);

    arc(340, 370, 200, 300, 90, 200);

    arc(340, 410, 150, 200, 90, 200);

    pop();

​

    push();

    noStroke();

  //  fill(100, 230, 100);

    fill(81, 190, 22);

    star(140, 530, 15, 30, 7);

    ellipse(140, 530, 70, 20);

    star(350, 510, 15, 30, 7);

    ellipse(350, 510, 70, 20);

    pop();

  }

}

​

function star(x, y, radius1, radius2, npoints) {

  let angle = 360 / npoints;

  let halfAngle = angle / 2.0;

  beginShape();

  for (let a = 0; a < 360; a += angle) {

    let sx = x + cos(a) * radius2;

    let sy = y + sin(a) * radius2;

    vertex(sx, sy);

    sx = x + cos(a + halfAngle) * radius1;

    sy = y + sin(a + halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

​