Animation Loop

This code demonstrates using the animation loop

to draw a moving circle.

​

The circle will start at the center of the 

left side canvas and move off the canvas to the

right.

*/

​

/*

Variables for the center of the moving circle.

These are declared outside of any function so 

that they are global and can be used in any 

function

*/

var x,y;

​

function setup(){

  //Set the initial position of the circle

  x=0;

  y=height/2;

  /*

  Set the number of miliseconds to wait

  between drawing. The larger this number is,

  the slower the animation will be.

  */

  timestep(50);

  //call loop to make the draw function be 

  //called repeatedly.

  loop();

}

function draw(){

  //clear canvas for next frame

  clear();

  //draw filled circle

  circle(x,y,10);

  fill();

  //update x coordinate to move the circle

  x=x+1;

}

​