createCanvas(400, 400);

  rectMode(CENTER);

  ellipseMode(CENTER);

  s = second();

  a = s % 12

}

​

function draw() {

  background(220);

  fill('#F8DFDE');

  rect(width/2, height/6, width, height/3);

  fill('#FDD0D0');

  rect(width/2, height/2, width, height/3);

  fill('#F7C2C2');

  rect(width/2, (5*height/6), width, height/3);

  head();

  middleBody('#6DB9D8', '#F4D59F', 160);

  pattern(160, '#33667B');

  //arm

  leftArmHand(a);

  rightArmHand(a);

  //leg

  fill('#6DB9D8');

  triangle(width/2, 225, (width/2-15), 240, (width/2+15), 240);

  for (i=0; i<8; i++) {

    legLine((187-15*i), (238+20*i));

  }

  for (i=0; i<8; i++) {

    legLine((187-25*i), (238+30*i));

  }

  for (i=0; i<8; i++) {

    legLine((205-5*i), (238+15*i));

  }

  for (i=0; i<8; i++) {

    legLine((205-8*i), (238+20*i));

  }

​

}

​

function head() {

  push();

  fill('#F4D59F');

  rect(width/2, 90, 20, 20)

  pop();

  push();

  stroke('#6DB9D8');

  strokeWeight(10);

  strokeJoin(ROUND);

  fill('#6DB9D8');

  triangle(width/2, 30, (width/2-40), 80, (width/2+40), 80);

  pop();

  push();

  fill('#33667B');

  ellipse(190, 60, 45, 45);

  ellipse(220, 60, 25, 25);

  fill('#F4D59F');

  ellipse(190, 60, 30, 30);

  ellipse(220, 60, 15, 15);

  pop();

}

​

​

function middleBody(color1, color2, middleY) {

  noStroke();

  fill(color1);

  rect(width/2, middleY, 120, 120);

  fill(color2);

  rect(width/2, (middleY-60), 120, 10);

  rect(width/2, (middleY+60), 120, 10);

}

​

function pattern(h, patternColor) {

  noStroke();

  fill(patternColor);

  beginShape();

  vertex((width/2-30), (h-20));

  vertex((width/2-40), (h-10));

  vertex((width/2-30), h);

  vertex((width/2-40), (h+10));

  vertex((width/2-30), (h+20));

  vertex((width/2+30), (h+7.5));

  vertex((width/2+30), h+2.5);

  vertex((width/2+35), (h+7.5));

  vertex((width/2+35), (h-7.5));

  vertex((width/2+30), (h-2.5));

  vertex((width/2+30), (h-7.5));

  endShape(CLOSE)

}

​

function keyPressed() {

  s = second();

  a = s % 12

}

​

function leftArmHand(armLength) {

    //left arm

    push();

    stroke(5);

    noFill();

    for(i=0; i<=armLength; i++) {

      ellipse((140-8*i), (140+8*i), 16, 16);

    }

    pop();

    //left hand

    hand((140-8*armLength), (140+8*armLength));

}

function rightArmHand(armLength) {

    //right arm

    push();

    stroke(5);

    noFill();

    for(i=0; i<=armLength; i++) {

      ellipse((260+8*i), (140+8*i), 16, 16);

    }

    pop();

    //right hand

    hand((260+8*armLength), (140+8*armLength));

}

function hand(positionX, positionY) {

  push();

  noStroke();

  fill('#C7F4F0');

  beginShape();

  vertex((positionX), (positionY+5));

  vertex((positionX-20), (positionY+15));

  vertex((positionX-20), (positionY+35));

  vertex((positionX-10), (positionY+35));

  vertex((positionX-10), (positionY+15));

  vertex((positionX), (positionY+13));

  vertex((positionX+10), (positionY+15));

  vertex((positionX+10), (positionY+35));

  vertex((positionX+20), (positionY+35)); 

  vertex((positionX+20), (positionY+15));

  endShape();

  pop();

}

​

function leg(){

  legLine (200, 225);

}

​

function legLine (x, y) {

  push();

  translate(x, y)

  noFill();

  stroke('#6DB9D8');

  strokeWeight(3)

  curve(-200, 45, 0, 0, -10, 40, 200, 65);

  pop();

}

​