animation :)

var headsize = 500;

var lefteye = 150;

var righteye =150;

var b1 = 50;

var b2 = 50;

var b1rotate = 0;

var test = 1;

var test2 = 0.3;

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CENTER);

}

​

function draw() {

  background(255);

​

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

​

  // HEAD

  fill(31,125,192); // blue!

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

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

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

  fill("white");

  push();

  translate(-100,-175);

  ellipse(0,0,lefteye,lefteye);

  fill("black");

  arc(100, 150, 450, 400, PI/10, PI*9/10, PIE);

​

​

  fill("white");

  push();

  translate(200,0);

  ellipse(0,0,righteye,righteye);

  fill("black");

  push();

  translate(0,-20);

  translate(test, 40);

  ellipse(0,0,b1,b1);

  pop();

  test+=test2;

  if(test>10) test2*=-1;

  if(test<-10) test2*=-1;

  fill("black");

  push();

  translate(-200,30);

  translate(test, -30);

  ellipse(0,0,b2,b2);

  pop();

  test+=test2;

  if(test>10) test2*=-1;

  if(test<-10) test2*=-1;

​

  fill("sienna");

  translate(test, -30);

  ellipse(-100, 500, 300, 300);

  fill("black");

  ellipse(-50,500,40,40);

  ellipse(-25,424,40,40);

  ellipse(-150,560,40,40);

  ellipse(-123,453,40,40);

  pop();

  test+=test2;

  if(test>10) test2*=-1;

  if(test<-10) test2*=-1;

​

​

}