501 matchingnose animation

​

var x,y;

var minRadius = 50;

var maxRadius = 120;

var speedX = 2;

var speedY = 2;

var angle = 0;

var headsize = 40;

var bodyrotate = 0;

var legoffset = -10;

var legincr = 0.3;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  x = width/2;

  y = height/2;

  rectMode(CENTER);

}

​

function draw() {

  background(0);

​

  let radius = map(x, 0, width, minRadius, maxRadius);

  //let from = color (237, 187, 153);

  //let to = color (203, 67, 53);

  //let a = lerpColor (from, to, 0.5);

  drawEarth(x, y, angle, radius);

  x += speedX;

  y += speedY;

  if (x<radius|| x> width-radius){

    speedX *= -1;

  }

  if (y <radius || y > height - radius){

    speedY *= -1;

  }

3

​

function drawEarth(x, y, angle, radius){

  push();

  translate(x, y);

  rotate(angle);

  //outside

  fill(52, 152, 219);

  noStroke();

  circle( 0, 0, radius*2);

  //inside

  fill(255);

  circle(-radius/2, -radius/4, radius/2);

  circle(radius/2, -radius/4, radius /2);

  pop();

}

    resetMatrix();

  translate(mouseX, mouseY); 

  //head

  fill(214, 137, 16);

  noStroke();

  push();

  ellipse(0, 0, headsize, headsize);

  pop();

  headsize+=0.2;

  if(headsize>50) headsize=30;

​

// LEG

  fill(147, 81, 22 ); 

  push(); 

  translate(legoffset, 40); 

  rect(0, 0, 50, 10); 

  pop(); 

  legoffset+=legincr;

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

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

}