Spork Editor

/*
Animation Loop
This code demonstrates using the animation loop
to draw a moving circle. In this example, we use
velocity variables to specify how fast the circle
moves.

The circle will start at a random position and 
move with a random velocity. When the circle hits
the side of the canvas, its velocity is changed 
to make it bounce.
*/

var x,y; 	//Circle coordinates
var vx, vy; //Circle velocity
var r;		//radius of circle

/*
The function which makes the circle bounce
off the sides. We check if the circle is too
close to the edge of the canvas and then set
the velocity to move away from the side.
*/
function bounce(){
  //see if x is within r of left side
  if (x<r) 
    vx=abs(vx); //make vx positive
  //see if x is within r of right
  else if (x>width-r)
    vx=-abs(vx); //make vx negative
  //see if too close to top
  if (y<r)
    vy=abs(vy);	//make vy positive
  //see if too close to bottom
  else if (y>height-r)
    vy=-abs(vy); //make vy negative
}

function setup(){
  //Set the initial position and velocity
  x=random()*width;
  y=random()*height;
  //velocity will be between -0.5 and 0.5
  vx=random()-0.5;
  vy=random()-0.5;
  //circle radius
  r=5;
  
  timestep(1); //timestep

loop();		//animation loop
}
function draw(){
  //clear canvas for next frame
  clear();
  
  //draw filled circle
  circle(x,y,r);
  fill();
  
  //update x coordinate to move the circle
  x=x+vx;
  y=y+vy;
  bounce();
}