Shapes have independent rythym

voicegardens/static/voicegardens.js

@@ -276,6 +276,12 @@ class GeneratedShape {
     this.deltaX = this.destX - this.centerX - toScreenX;
     this.deltaY = this.destY - this.centerY - toScreenY;
 
+    // time management for timing when to make new random position
+    // movements
+    this.drawTimer = 0;
+    this.nextTick = random(1000, 9000);
+    this.tickTimer = 0;
+
     this.initialise();
   }
 
@@ -397,6 +403,21 @@ class GeneratedShape {
     endShape(CLOSE);
   }
 
+  tick() {
+    /**
+     * Manage internal time for each shape.
+     **/
+    this.drawTimer = millis();
+
+    if (this.drawTimer >= this.nextTick + this.tickTimer) {
+      this.tickTimer = millis();
+      this.nextTick = random(1000, 9000);
+      return true;
+    }
+
+    return false;
+  }
+
   draw() {
     /**
      * Draw the shape vectors.
@@ -507,6 +528,11 @@ function draw() {
     shape.draw();
     shape.move();
 
+    if (shape.tick() === true) {
+      shape.destX = random(windowWidth);
+      shape.destY = random(windowHeight);
+    }
+
     // play recordings when shapes collide
     let [collision, collidedShape] = shape.collide(shapes);
     if (collision === true) {