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);
}