let ellY;

let eyeX;

let eyeY;

let dia;

let armSpace;

let rClaw;

let lClaw;

let clawSize;

let rLegSpace;

let lLegSpace;

let colorX;

let bgcolor = 0;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(44 + bgcolor, 62 + bgcolor, 107 + bgcolor);

  fill(255);

  textSize(11);

  textAlign(CENTER, CENTER);

  text("CLICK TO CHANGE BACKGROUND COLOR!", 200, 380);

  colorX = map(mouseX, 0, width, 0, 55);

  //Arms:

  armSpace = map(mouseX, 0, width, 0, 40);

  rClaw = map(mouseY, 0, height, 0, -1/6 * PI);//right arm

  push();

  translate(width/2, height/2);

  fill(255, 140, 0);

  noStroke();

  rotate(PI/3 + rClaw);

  rect(0 + armSpace, -30, 10, -130);

  pop();

  lClaw = map(mouseY, 0, height, 0, 1/6 * PI);//left arm

  push();

  translate(width/2, height/2);

  fill(255, 140, 0);

  noStroke();

  rotate(PI + 2/3 * PI + lClaw );

  rect(0 - armSpace, -30, -10, -130);

  pop();

  //Legs:

  rLegSpace = map(mouseX, 0, width, 0, 15);

  push();

  translate(width/2, height/2);

  noStroke();

  fill(255, 150 - colorX, 51);

  rotate(-1/7 * PI);

  rect(0, 0, 10, 160);

  rect(rLegSpace + 20, 0, 10, 162);

  rect(rLegSpace + rLegSpace + 40, 0, 10, 164);

  pop();

  lLegSpace = map(mouseX, 0, width, 0, -15);

  push();

  translate(width/2, height/2);

  noStroke();

  fill(255, 150 - colorX, 51);

  rotate(1/7 * PI);

  rect(0, 0, 10, 160);

  rect(-20 + lLegSpace, 0, 10, 162);

  rect(-40 + lLegSpace + lLegSpace, 0, 10, 164);

  pop();

  //Claws:

  clawSize = map(mouseY, 0, height, 0, 30);

  push();//right claw

  translate(width/2, height/2);

  noStroke();

  fill(255, 150 - colorX, 51);

  rotate(PI/3 + rClaw);

  arc(0 + armSpace, -190, 50 + clawSize, 70 + clawSize, HALF_PI - 1/7 * PI, PI + QUARTER_PI, CHORD);

  arc(0 + armSpace, -190, 50 + clawSize, 70 + clawSize, 3/2 * PI + QUARTER_PI, HALF_PI + 1/7 * PI, CHORD);

  pop();

  push();//left claw

  translate(width/2, height/2);

  noStroke();

  fill(255, 150 - colorX, 51);

  rotate(-PI/3 + lClaw);

  arc(0 - armSpace, -190, 50 + clawSize, 70 + clawSize, HALF_PI - 1/7 * PI, PI + QUARTER_PI, CHORD);

  arc(0 - armSpace, -190, 50 + clawSize, 70 + clawSize, 3/2 * PI + QUARTER_PI, HALF_PI + 1/7 * PI, CHORD);

  pop();

  //Body:

  ellX = mouseX * 0.4 + 120;

  ellY = mouseY * 0.3 + 90;

  noStroke();

  fill(255, 180, 28);

  ellipse(width/2, height/2, ellX, ellY);

  //Eyes:

  eyeX = mouseX / 7 + 30;

  eyeY = mouseY / 7 + 30;

  dia = random(40, 50);

  //Eyelid:

  ellipse(width/2 + eyeX, height/2 - eyeY, dia + 15, dia + 15);//right

  ellipse(width/2 - eyeX, height/2 - eyeY, dia + 15, dia + 15);//left

  //Eyeball:

  fill(0);

  ellipse(width/2 + eyeX, height/2 - eyeY, dia, dia);//right

  ellipse(width/2 - eyeX, height/2 - eyeY, dia, dia);//left

  //Light reflection:

  fill(255);

  ellipse(width/2 + eyeX - 5, height/2 - eyeY - 5, 20, 20);//right

  ellipse(width/2 - eyeX - 5, height/2 - eyeY - 5, 20, 20);//left

  //Brows:

  push();

  translate(width/2, height/2);

  stroke(0);

  strokeWeight(8);

  line(0 + eyeX - 10, 0 - eyeY -30, 0 + eyeX + 10, 0 - eyeY - 45);

  line(0 - eyeX + 10, 0 - eyeY - 30, 0 - eyeX - 10, 0 - eyeY - 45);

  pop();

  //Mouth:

  stroke(0);

  strokeWeight(5);

  noFill();

  arc(width/2 + random(3), height/2, 40, 20, 0, PI);

  //Blush:

  fill(255, 155 - colorX * 2, 110 - colorX * 2);

  noStroke();

  ellipse(width/2 + eyeX + 20, height/2 - eyeY + 30, 35, 13);//right

  ellipse(width/2 - eyeX - 20, height/2 - eyeY + 30, 35, 13);//left

}

​

function mousePressed(){

  bgcolor = random(-30, 30);

}