Spork Editor

/*
Animation Loop
This code demonstrates using the animation loop
to draw a moving circle. In this example, we add
a constant acceleration to mimic gravity.

We also add a coefficient of restitution so to 
keep the circle from accelerating on each bounce.
*/

var x,y; 	//Circle coordinates
var vx, vy; //Circle velocity
var ax, ay; //circle acceleration
var r;		//radius of circle
var e;		//coefficient of restitution

/*
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(){
  //note the multiplication by e
  //this dampens the velocity on bounce
  
  //see if x is within r of left side
  if (x<r) 
    vx=e*abs(vx); //make vx positive
  //see if x is within r of right
  else if (x>width-r)
    vx=-e*abs(vx); //make vx negative
  //see if too close to top
  if (y<r)
    vy=e*abs(vy);	//make vy positive
  //see if too close to bottom
  else if (y>height-r)
    vy=-e*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;
  //acceleration for y only
  ax=0;
  ay=0.01;
  //restitution
  e=0.95;
  //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;
  vx=vx+ax;
  vy=vy+ay;
  bounce();
}