Implement sound playing when hovering the mouse

voicegardens/static/voicegardens.js

@@ -143,6 +143,9 @@ class GeneratedShape {
      * Initialise the new shape.
      **/
 
+    // mouse hover awareness for sound playing
+    this.hover = 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
     // when they enter the environment
@@ -434,6 +437,7 @@ function draw() {
 
   // generate a new shape after a sound recording
   if (newSoundJustRecorded === true) {
+    // build a new copy of the recording to store on the shape object
     let soundBlob = recording.getBlob();
     let recordedSound = new p5.SoundFile(new p5.File(soundBlob));
     let newShape = new GeneratedShape(recordedSound);
@@ -446,6 +450,17 @@ function draw() {
   for (let i = 0; i < shapes.length; i++) {
     let shape = shapes[i];
 
+    // if hovering over the shape, play the recorded sound
+    let hovering = collidePointPoly(mouseX, mouseY, 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);