From 965d63fbb80bd2bf583f4d2f6a715fa3cb7266af Mon Sep 17 00:00:00 2001
From: "A. Bryant" <W.Sword.09@hotmail.com>
Date: Wed, 19 Jul 2023 15:54:37 -0600
Subject: [PATCH] responsive-dots

---
 src/components/Dots.tsx | 46 +++++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx
index 6994aad..6fc77a3 100644
--- a/src/components/Dots.tsx
+++ b/src/components/Dots.tsx
@@ -7,12 +7,12 @@ const Dots = () => {
   const sketchRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const dotSize:number = 4;
-    const spacing:number = dotSize * 10;
-    const minTvalue:number = 50;
-    const areaAffected:number = 50;
-    let mouseIsMoving:boolean = false;
-    let dots:any[] = [];
+    let dotSize: number = 4;
+    let spacing: number = dotSize * 10;
+    let minTvalue: number = 50;
+    let areaAffected: number = 50;
+    let mouseIsMoving: boolean = false;
+    let dots: Dot[] = [];
 
     const sketch = (p: p5) => {
 
@@ -20,14 +20,7 @@ const Dots = () => {
 
       p.setup = () => {
         p.createCanvas(p.windowWidth, p.windowHeight);
-        for (let i = 0; i < p.width; i += spacing) 
-        {
-          for (let j = 0; j < p.height; j += spacing) 
-          {
-            let dot = new Dot(i + spacing / 2, j + spacing / 2, dotSize);
-            dots.push(dot);
-          }
-        }
+        createDots();
       };
 
       p.draw = () => {
@@ -44,6 +37,23 @@ const Dots = () => {
           mouseIsMoving = false;
         }, 100);
       };
+
+      p.windowResized = () => {
+        p.resizeCanvas(p.windowWidth, p.windowHeight);
+        createDots();
+      };
+
+      const createDots = () => {
+        dots = [];
+        for (let i = 0; i < p.width; i += spacing) 
+        {
+          for (let j = 0; j < p.height; j += spacing) 
+          {
+            let dot = new Dot(i + spacing / 2, j + spacing / 2, dotSize);
+            dots.push(dot);
+          }
+        }
+      };
     };
 
     class Dot {
@@ -69,9 +79,13 @@ const Dots = () => {
         let distance = Math.sqrt(
           Math.pow(mouseX - this.x, 2) + Math.pow(mouseY - this.y, 2)
         );
-        if (mouseIsMoving && distance < areaAffected) {
+        
+        if (mouseIsMoving && distance < areaAffected) 
+        {
           this.transparency = 255;
-        } else {
+        } 
+        else 
+        {
           this.transparency = Math.max(minTvalue, this.transparency - 10);
         }
       }