Frame Rate & Movement

sketch.js

function setup() {
  createCanvas(640, 480);

  // use anti-aliasing
  smooth();

  // no stroke on my shapes
  noStroke();

  /*
    use upper left corner
    not the center
  */
  ellipseMode( CORNER );

  /*
   set the speed of the draw loop
   */
  frameRate( 1 );
}

function makeEllipse( x ) {
    fill( random(0,255), random(0,255), random(0,255) );
    
    ellipse( x, 20, 20, 20 );
}

function makeRect( x, y ) {
    fill( random(0,255), random(0,255), random(0,255) );
    
    rect( x, y, 20, 20 );
}


function draw() {
  background( 255 );

  var x = 20;
  for( var i = 0; i < 6; i++ ) {
    if( (i % 2) == 0 ) {
      makeEllipse( x );
    } else {
      makeRect( x, random( 60, 100 ) );
    }
    
    x = x + 30;  
  }
}