Wire up movement and multiple shapes

vocoder/static/vocoder.js

@@ -8,8 +8,10 @@
 //
 
 var archiveUrl = serverUrl + "/add-to-archive/";
+var canvasColour = "white";
 var canvasHeight = 500;
 var canvasWidth = 500;
+var frameRate = 30;
 var microphone;
 var newSoundJustRecorded = false;
 var playButton;
@@ -109,21 +111,40 @@ class GeneratedShape {
     /**
      * Initialise the new shape.
      **/
-    this.displayed = false;
+    this.w = 10;
+    this.h = 10;
+
+    this.x = random(width);
+    this.y = random(height);
+
+    this.xSpeed = 1.3;
+    this.ySpeed = 0.7;
+
+    this.xDirection = 1; // left or right
+    this.yDirection = 1; // top or bottom
   }
 
   move() {
     /**
-     * Move the shape in some direction.
+     * Move the shape around the canvas.
      **/
+    this.x = this.x + this.xSpeed * this.xDirection;
+    this.y = this.y + this.ySpeed * this.yDirection;
+
+    if (this.x > width - this.w || this.x < this.w) {
+      this.xDirection *= -1;
+    }
+
+    if (this.y > height - this.h || this.y < this.h) {
+      this.yDirection *= -1;
+    }
   }
 
   display() {
     /**
      * Show the shape on the canvas.
      **/
-    ellipse(random(canvasWidth), random(canvasHeight), 10, 10); // TODO: experimenting for now ...
+    ellipse(this.x, this.y, this.w, this.h); // TODO: experimenting for now ...
-    this.displayed = true;
   }
 }
 
@@ -133,12 +154,15 @@ function setup() {
    **/
   createCanvas(canvasWidth, canvasHeight); // TODO: experimenting for now ...
   setupRecording();
+  frameRate(frameRate);
 }
 
 function draw() {
   /**
    * The p5.js draw loop.
    **/
+  background(canvasColour);
+
   if (newSoundJustRecorded === true) {
     shapes.push(new GeneratedShape());
     newSoundJustRecorded = false;
@@ -146,8 +170,7 @@ function draw() {
 
   for (var i = 0; i < shapes.length; i++) {
     var shape = shapes[i];
-    if (!shape.displayed) {
+    shape.move();
     shape.display();
   }
 }
-}