A tribute to Roland 2 - P5JS

Attempting to add more fun with P5.JS. Bets viewed in Chrome to get the background sound playing nicely. Click anywhere to stop or play and flash the background. P5JS is the future of Processing in the Javascript realm, and you can find out more here: http://p5js.org/

Source code:

var palette;
var mySpots = [];
var song;

function preload() {
  song = loadSound('tennis.mp3');
}

function setup() {
  var myCanvas = createCanvas(600, 400);
  myCanvas.parent('qd');
  //song.loop();
  // The Roland Garros palette
  palette = [color(200,90,39,12), color(34,81,61), color(250,218,67), color(255,255,255)];
  noStroke();
  var numSpots = 40; // Number of objects
  var dia = (width-20)/numSpots; // Calculate diameter
  mySpots = new Array(numSpots); // Create array
  for (i = 0; i < mySpots.length; i++) {
    // Create each object
    mySpots[i] = new Spot();
    mySpots[i].x = 10+dia/2 + i*(dia);
    mySpots[i].y = 10+dia/2;
    mySpots[i].rate = random(1.0, 3.0);
    mySpots[i].diameter = dia;
  }
}

function draw() {
  // the orange ground background, with increasing alpha
  fill(palette[0]);
  rect(10, 10, width-20, height-20);
  // the white line
  fill(palette[3], 100);
  rect(10,10+(height-10)/2, width-20, 10);
  // the green borders
  fill(palette[1]);
  rect(0,0,width, 10);
  rect(0,height-10,width, 10);
  rect(0,0,10, height);
  rect(width-10,0,10, height);
  //the bouncing balls
  fill(palette[2]);
  if (song.isPlaying()) {
    for (var i=0; i < mySpots.length; i++) {
      mySpots[i].move(); // Move each object
      mySpots[i].display(); // Display each object
    }
  }
}

function Spot() {
  this.x=0;
  this.y=0;
  this.direction = 1; // Direction of motion (1 is down, -1 is up)
  this.diameter = 0;

  this.move = function() {
    this.y += (this.rate * this.direction);
    if ((this.y > (height-10 - this.diameter/2)) || (this.y < 10+this.diameter/2)) {
      this.direction *= -1;
    }
  }

  this.display = function () {
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

function mousePressed() {
  if (song.isPlaying()) {
    song.pause();
    background(255,0,0);
  } else {
    song.play();
    background(0,255,0);
  }
}