From 4cc1fa107b8545a3763c06baa2d31023dec296ec Mon Sep 17 00:00:00 2001 From: Luke Murphy Date: Wed, 12 Feb 2020 22:02:33 +0100 Subject: [PATCH] Remove timing, refactor hovering --- voicegardens/static/voicegardens.js | 75 +++++++++-------------------- 1 file changed, 24 insertions(+), 51 deletions(-) diff --git a/voicegardens/static/voicegardens.js b/voicegardens/static/voicegardens.js index 5625f76..c254288 100644 --- a/voicegardens/static/voicegardens.js +++ b/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 - 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.hover(); shape.draw(); shape.move(); // play recordings when shapes collide let [collision, collidedShape] = shape.collide(shapes); if (collision === true) { - if (secondTick) { - shape.sound(); - collidedShape.sound(); - } + shape.sound(); + collidedShape.sound(); } } - - // reset random shape position time ticker - positionTick = false; } function mouseDragged() {