Timed and independant movements

voicegardens/static/voicegardens.js

@@ -20,7 +20,8 @@ var shapes = [];
 var stopButton;
 var canvasWidth;
 var canvasHeight;
-var timer;
+var timer = 0;
+var secondTick = false;
 
 function record() {
   /**
@@ -170,6 +171,9 @@ class GeneratedShape {
     this.destX = random(canvasWidth);
     this.destY = random(canvasHeight);
 
+    this.centerX = centerX;
+    this.centerY = centerY;
+
     this.initialise();
   }
 
@@ -243,9 +247,13 @@ class GeneratedShape {
 
     for (let i = 0; i < this.edges; i++) {
       this.startXs[i] =
-        centerX + cos(radians(this.rotAngle) * i) * this.radius + this.randomX;
+        this.centerX +
+        cos(radians(this.rotAngle) * i) * this.radius +
+        this.randomX;
       this.startYs[i] =
-        centerY + sin(radians(this.rotAngle) * i) * this.radius + this.randomY;
+        this.centerY +
+        sin(radians(this.rotAngle) * i) * this.radius +
+        this.randomY;
       this.rotAngle += 360 / this.edges;
     }
 
@@ -261,8 +269,8 @@ class GeneratedShape {
     /**
      * Move the shape vectors.
      **/
-    this.deltaX = this.destX - centerX;
-    this.deltaY = this.destY - centerY;
+    this.deltaX = this.destX - this.centerX;
+    this.deltaY = this.destY - this.centerY;
 
     this.deltaX *= this.springing;
     this.deltaY *= this.springing;
@@ -270,8 +278,8 @@ class GeneratedShape {
     this.accelX += this.deltaX;
     this.accelY += this.deltaY;
 
-    centerX += this.accelX;
-    centerY += this.accelY;
+    this.centerX += this.accelX;
+    this.centerY += this.accelY;
 
     this.accelX *= this.damping;
     this.accelY *= this.damping;
@@ -318,11 +326,16 @@ function draw() {
     newSoundJustRecorded = false;
   }
 
+  if (millis() >= 2000 + timer) {
+    secondTick = true;
+    timer = millis();
+  }
+
   for (var shape of shapes) {
     shape.draw();
     shape.move();
 
-    if (millis() >= 500 + timer) {
+    if (secondTick) {
       shape.destX = random(canvasWidth);
       shape.destY = random(canvasHeight);
     }
@@ -331,6 +344,5 @@ function draw() {
       shape.sound();
     }
   }
-
-  timer = millis();
+  secondTick = false;
 }