Fixed canvas width and timed movements

voicegardens/static/voicegardens.js

@@ -18,6 +18,9 @@ var recording;
 var recordingTimeout = 30000; // 30 seconds (in milliseconds)
 var shapes = [];
 var stopButton;
+var canvasWidth;
+var canvasHeight;
+var timer;
 
 function record() {
   /**
@@ -164,6 +167,9 @@ class GeneratedShape {
     this.randomX = random(-77, 77);
     this.randomY = random(-77, 77);
 
+    this.destX = random(canvasWidth);
+    this.destY = random(canvasHeight);
+
     this.initialise();
   }
 
@@ -255,8 +261,8 @@ class GeneratedShape {
     /**
      * Move the shape vectors.
      **/
-    this.deltaX = mouseX - centerX;
-    this.deltaY = mouseY - centerY;
+    this.deltaX = this.destX - centerX;
+    this.deltaY = this.destY - centerY;
 
     this.deltaX *= this.springing;
     this.deltaY *= this.springing;
@@ -286,13 +292,16 @@ function setup() {
   /**
    * The p5.js initial setup function.
    **/
-  createCanvas(windowWidth, windowHeight);
+  canvasWidth = 600;
+  canvasHeight = 600;
+
+  createCanvas(canvasWidth, canvasHeight);
   frameRate(frameRate);
 
   setupRecording();
 
-  centerX = windowWidth / 2;
-  centerY = windowHeight / 2;
+  centerX = canvasWidth / 2;
+  centerY = canvasHeight / 2;
 }
 
 function draw() {
@@ -312,8 +321,16 @@ function draw() {
   for (var shape of shapes) {
     shape.draw();
     shape.move();
+
+    if (millis() >= 500 + timer) {
+      shape.destX = random(canvasWidth);
+      shape.destY = random(canvasHeight);
+    }
+
     if (shape.collide(shapes) === true) {
       shape.sound();
     }
   }
+
+  timer = millis();
 }