Rig up working collision detection

vocoder/static/vocoder.js

@@ -9,8 +9,8 @@
 
 var archiveUrl = serverUrl + "/add-to-archive/";
 var canvasColour = "white";
-var canvasHeight = 500;
+var canvasHeight = 400;
-var canvasWidth = 500;
+var canvasWidth = 800;
 var frameRate = 30;
 var microphone;
 var newSoundJustRecorded = false;
@@ -111,36 +111,53 @@ class GeneratedShape {
     /**
      * Initialise the new shape.
      **/
-    this.w = 10;
+    this.w = 20;
-    this.h = 10;
+    this.h = 20;
 
     this.x = random(width);
     this.y = random(height);
 
-    this.xSpeed = 1.3;
+    this.xSpeed = 1.8;
-    this.ySpeed = 0.7;
+    this.ySpeed = 1.8;
 
     this.xDirection = 1;
     this.yDirection = 1;
   }
 
-  collide() {
+  collide(shapes) {
     /**
      * Detect if the shape collides with another shape.
      **/
-    // TODO: here's what I think we need to do here: there are multiple shapes
+    if (shapes.length === 1) {
-    // on the canvas so we need to take each shape (that isn't this shape) and
+      return false;
-    // find out if we're colliding. If so, then we return a "true" value which
+    }
-    // can then be used for generating sounds
+
-    return false; // TODO: placeholder for now ...
+    for (var shape of shapes) {
+      if (this === shape) {
+        continue;
+      }
+
+      var collision = collideCircleCircle(
+        this.x,
+        this.y,
+        this.w,
+        shape.x,
+        shape.y,
+        shape.w
+      );
+
+      if (collision === true) {
+        return true;
+      }
+    }
+
+    return false;
   }
 
   sound() {
     /**
      * Play a sound after a collision is detected.
      **/
-    // TODO: play some nice sounds in response to a collision
-    // thinking about https://github.com/Tonejs/Tone.js
     return; // TODO: placeholder for now ...
   }
 
@@ -189,15 +206,12 @@ function draw() {
     newSoundJustRecorded = false;
   }
 
-  for (var i = 0; i < shapes.length; i++) {
+  for (var shape of shapes) {
-    var shape = shapes[i];
     shape.move();
+    shape.display();
 
-    // TODO: need to implement this
+    if (shape.collide(shapes) === true) {
-    if (shape.collide()) {
       shape.sound();
     }
-
-    shape.display();
   }
 }