Add camera movement, fix shape iteration

voicegardens/static/voicegardens.js

@@ -6,6 +6,8 @@
 
 var archiveUrl = window.location + "add-to-archive";
 var canvas;
+var canvasHeight;
+var canvasWidth;
 var centerX;
 var centerY;
 var frameRate = 30;
@@ -16,12 +18,14 @@ var recordButton;
 var recorder;
 var recording;
 var recordingTimeout = 30000; // 30 seconds (in milliseconds)
+var screenX;
+var screenY;
+var secondTick = false;
 var shapes = [];
 var stopButton;
-var canvasWidth;
-var canvasHeight;
 var timer = 0;
-var secondTick = false;
+var toScreenX;
+var toScreenY;
 
 function record() {
   /**
@@ -300,8 +304,8 @@ function setup() {
   /**
    * The p5.js initial setup function.
    **/
-  canvasWidth = 600;
-  canvasHeight = 600;
+  canvasWidth = windowWidth;
+  canvasHeight = windowHeight;
 
   createCanvas(canvasWidth, canvasHeight);
   frameRate(frameRate);
@@ -310,6 +314,9 @@ function setup() {
 
   centerX = canvasWidth / 2;
   centerY = canvasHeight / 2;
+
+  screenX = toScreenX = 0;
+  screenY = toScreenY = 0;
 }
 
 function draw() {
@@ -321,28 +328,52 @@ function draw() {
   smooth();
   noStroke();
 
+  screenX = lerp(screenX, toScreenX, 0.2);
+  screenY = lerp(screenY, toScreenY, 0.2);
+  translate(screenX, screenY);
+
   if (newSoundJustRecorded === true) {
     shapes.push(new GeneratedShape());
     newSoundJustRecorded = false;
   }
 
-  if (millis() >= 2000 + timer) {
+  if (millis() >= 6000 + timer) {
     secondTick = true;
     timer = millis();
   }
 
-  for (var shape of shapes) {
+  for (let i = 0; i < shapes.length; i++) {
+    let shape = shapes[i];
+
     shape.draw();
     shape.move();
 
     if (secondTick) {
+      setTimeout(function() {
         shape.destX = random(canvasWidth);
         shape.destY = random(canvasHeight);
+      }, random(100, 1000));
     }
 
     if (shape.collide(shapes) === true) {
       shape.sound();
     }
   }
+
   secondTick = false;
 }
+
+function mouseDragged() {
+  /**
+   * Mouse drag movement handling.
+   **/
+  toScreenX += mouseX - pmouseX;
+  toScreenY += mouseY - pmouseY;
+}
+
+function windowResized() {
+  /**
+   * Canvas re-draw handling.
+   **/
+  resizeCanvas(canvasWidth, canvasHeight);
+}