From e52855f9540e1ef496e1766c580700bc94d09e4d Mon Sep 17 00:00:00 2001
From: Asif Bacchus <asif@bacchus.cloud>
Date: Wed, 8 Apr 2020 04:18:55 -0600
Subject: [PATCH] change stroke colour when mouse nearby

---
 js/particles.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/js/particles.js b/js/particles.js
index 130ffbe..a799360 100644
--- a/js/particles.js
+++ b/js/particles.js
@@ -102,7 +102,16 @@ function connect(){
             let distance = ((particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) + ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y));
             if (distance < (canvas.width / 7) * (canvas.height / 7)){
                 opacityValue = 1 - (distance / 20000);
-                canvasContext.strokeStyle = `rgba(140, 85, 31, ${opacityValue})`;
+                // if the mouse is close to particles, change the line colour
+                let dx = mousePosition.x - particlesArray[a].x;
+                let dy = mousePosition.y - particlesArray[a].y;
+                let mouseDistance = Math.sqrt((dx * dx) + (dy * dy));
+                if (mouseDistance < 200) {
+                    canvasContext.strokeStyle = `rgba(60, 40, 15, ${opacityValue})`;
+                }
+                else {
+                    canvasContext.strokeStyle = `rgba(140, 85, 31, ${opacityValue})`;
+                }
                 canvasContext.lineWidth = 1;
                 canvasContext.beginPath();
                 canvasContext.moveTo(particlesArray[a].x, particlesArray[a].y);