05XXanimation

var headsize = 40;

var bodyrotate = 0;

var legoffset = -10;

var legincr = 0.3;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CENTER);

}

​

function draw() {

  background(255);

  resetMatrix(); // reset everything

​

  translate(mouseX, mouseY); // move the whole situation to center on the mouse

​

  // HEAD

  fill(0, 0, 255); // blue!

  push(); // up one level on the drawing stack

  translate(0, -40); // move 40 pixels up

  ellipse(0, 0, headsize, headsize); // draw head

  pop(); // restore

  // modify head size

  headsize+=0.2;

  if(headsize>50) headsize=30;

  // BODY

  fill(255, 0, 0); // red!

  push(); // up one level on the drawing stack

  rotate(bodyrotate);

  rect(0, 0, 40, 40); // body

  pop(); // restore

  // modify rotation

  bodyrotate-=0.03;

​

  // LEG

  fill(0, 255, 0); // green!

  push(); // up one level on the drawing stack

  translate(legoffset, 40); // move 40 pixels down and left/right based on leg offset

  rect(0, 0, 20, 50); // leg

  pop(); // restore

  // modify position

  legoffset+=legincr;

  if(legoffset>10) legincr*=-1;

  if(legoffset<-10) legincr*=-1;

​

}