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