Random shape movements

voicegardens/static/voicegardens.js

@@ -53,6 +53,10 @@ var shapes = [];
 var amplitude;
 var duration;
 
+// random shape positioning
+var secondTick = false;
+var timer = 0;
+
 function record() {
   /**
    * Start recording a sound.
@@ -221,6 +225,10 @@ class GeneratedShape {
     this.centerX = random(windowWidth);
     this.centerY = random(windowHeight);
 
+    // new destination for the shapes
+    this.destX = random(windowWidth);
+    this.destY = random(windowHeight);
+
     this.initialise();
   }
 
@@ -333,8 +341,8 @@ class GeneratedShape {
     /**
      * Move the shape vectors.
      **/
-    this.deltaX = mouseX - this.centerX - toScreenX;
-    this.deltaY = mouseY - this.centerY - toScreenY;
+    this.deltaX = this.destX - this.centerX - toScreenX;
+    this.deltaY = this.destY - this.centerY - toScreenY;
 
     this.deltaX *= this.springing;
     this.deltaY *= this.springing;
@@ -378,6 +386,11 @@ function draw() {
   smooth();
   noStroke();
 
+  if (millis() >= 1000 + timer) {
+    secondTick = true;
+    timer = millis();
+  }
+
   // offset the window view based on new values of x,y related to the screen.
   // These values are generated once the user drags the screen with the mouse.
   screenX = lerp(screenX, toScreenX, 0.2);
@@ -397,10 +410,19 @@ function draw() {
     shape.draw();
     shape.move();
 
+    if (secondTick) {
+      setTimeout(function() {
+        shape.destX = random(windowWidth);
+        shape.destY = random(windowHeight);
+      }, random(100, 3000));
+    }
+
     if (shape.collide(shapes) === true) {
       shape.sound();
     }
   }
+
+  secondTick = false;
 }
 
 function mouseDragged() {