Spork Editor

/*
Animation Loop
This code demonstrates using the animation loop
to draw a moving circle. In this example, we do 
not clear the canvas between frames. The result
is a geometric pattern.
*/

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 -1 and 1
  vx=2*(random()-0.5);
  vy=2*(random()-0.5);
  //circle radius
  r=1;
  
  
  timestep(1); //timestep

loop();		//animation loop
}
function draw(){
  //Note we do not clear
  
  //draw filled circle
  circle(x,y,r);
  fill();
  
  //update x coordinate to move the circle
  x=x+vx;
  y=y+vy;
  bounce();
}