Remove timing, refactor hovering

voicegardens/static/voicegardens.js

@@ -55,12 +55,6 @@ var shapes = [];
 var amplitude;
 var duration;
 
-// random shape positioning
-var positionTick = false;
-var secondTick = false;
-var secondTimer = 0;
-var positionTimer = 0;
-
 function record() {
   /**
    * Start recording a sound.
@@ -201,7 +195,7 @@ class GeneratedShape {
     else this.soundAmplitude = soundAmplitude;
 
     // mouse hover awareness for sound playing
-    this.hover = false;
+    this.hovering = false;
 
     // The opacity of the shape. This controls whether we can see the shape or
     // not (transparency). It starts at zero as we want to fade the shapes in
@@ -420,6 +414,26 @@ class GeneratedShape {
     this.curve();
   }
 
+  hover() {
+    /**
+     * React to mouse hovering.
+     **/
+    let isHovering = collidePointPoly(
+      mouseX - screenX,
+      mouseY - screenY,
+      this.vectors
+    );
+
+    if (isHovering === true) {
+      if (this.hovering === false) {
+        this.sound();
+        this.hovering = true;
+      }
+    } else {
+      this.hovering = false;
+    }
+  }
+
   move() {
     /**
      * Move the shape vectors.
@@ -470,22 +484,6 @@ function draw() {
   smooth();
   noStroke();
 
-  // count random waiting times in seconds until choosing a new destX, destY
-  // for a moving shape
-  let nextPositionTick = random(3000, 8000);
-  let positionTickingTime = millis();
-  if (positionTickingTime >= nextPositionTick + positionTimer) {
-    positionTick = true;
-    positionTimer = millis();
-  }
-
-  let nextSecondTick = 1000;
-  let secondTickingTime = millis();
-  if (secondTickingTime >= nextSecondTick + secondTimer) {
-    secondTick = true;
-    secondTimer = 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);
@@ -505,42 +503,17 @@ function draw() {
   for (let i = 0; i < shapes.length; i++) {
     let shape = shapes[i];
 
-    // if hovering over the shape, play the recorded sound
+    shape.hover();
-    let hovering = collidePointPoly(
-      mouseX - screenX,
-      mouseY - screenY,
-      shape.vectors
-    );
-    if (hovering === true) {
-      if (shape.hover === false) {
-        shape.sound();
-        shape.hover = true;
-      }
-    } else {
-      shape.hover = false;
-    }
-
-    // randomly move the shapes
-    if (positionTick) {
-      shape.destX = random(windowWidth);
-      shape.destY = random(windowHeight);
-    }
-
     shape.draw();
     shape.move();
 
     // play recordings when shapes collide
     let [collision, collidedShape] = shape.collide(shapes);
     if (collision === true) {
-      if (secondTick) {
       shape.sound();
       collidedShape.sound();
     }
   }
-  }
-
-  // reset random shape position time ticker
-  positionTick = false;
 }
 
 function mouseDragged() {