drawing with javascript ['p5js', 'animation'] Creeper Walking

I made my first Creeper walk!

All about my creeper

My creeper was the first ever time I made a JavaScript picture move!

It was so cool making my first JavaScript project move and learning how!

I made the eyes and mouth change different colour, and it looked so weird!

How I made it

I made a bunch of different sized rectangles, like square-like ones and narrow ones.

Then I filled it in with its exact colour. The colours are dark-green, green and black.

The spots are dark-green, the body is green and the mouth & eyes are black.

Then I made it move. feet up and down, and as an add on, make the eyes & mouth change colour.

function setup() {
  createCanvas(200, 200).parent("container");
  frameRate(4);
}


function draw() {

  background("slategray");

  fill(73, 252, 29)
  rect(50, 0, 90, 90) // head
  rect(80, 90, 30, 80) // body 

  if (frameCount % 2) {
    rect(60, 160, 30, 20) // left foot
    rect(100, 170, 30, 20) // right foot
    fill(0, 177, 0)
    rect(60, 160, 10, 10) // left spot
    rect(110, 180, 10, 10) // right spot
  } else {
    rect(60, 170, 30, 20) // left foot
    rect(100, 160, 30, 20) // right foot
    fill(0, 177, 0)
    rect(60, 170, 10, 10) // left spot
    rect(110, 170, 10, 10) // right spot
  }

  fill(random(255), random(255), random(255))
  rect(60, 20, 20, 20) // left eye
  rect(100, 20, 20, 20) // right eye
  fill(random(177), random(177), random(177))
  rect(70, 60, 10, 10) // bottom mouth left
  rect(110, 60, 10, 10) // bottom mouth right
  rect(80, 50, 30, 10) // upper mouth

  // spots
  fill(0, 177, 0)
  rect(90, 10, 10, 10)
  rect(130, 40, 10, 10)
  rect(60, 80, 10, 10)
  rect(100, 110, 10, 10)
  rect(90, 140, 10, 10)
}