From 216513d82d1d07633c1643d5084a66cdc50a9bfa Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 26 Dec 2024 17:13:31 -0600
Subject: [PATCH] performance improvements, lower frameRate target

---
 src/components/Dots.tsx | 44 +++++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx
index acd9d4d..b90be8b 100644
--- a/src/components/Dots.tsx
+++ b/src/components/Dots.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from 'react';
 import { p5i, P5I } from 'p5i';
+import React, { useEffect, useRef } from 'react';
 
 const Dots: React.FC = () => {
     const canvasRef = useRef<HTMLDivElement | null>(null);
@@ -7,12 +7,9 @@ const Dots: React.FC = () => {
     const {
         mount,
         unmount,
-        createCanvas,
         background,
-        noFill,
         stroke,
         noise,
-        noiseSeed,
         resizeCanvas,
         cos,
         sin,
@@ -26,57 +23,56 @@ const Dots: React.FC = () => {
     const SCALE = 200;
     const LENGTH = 10;
     const SPACING = 15;
+    const TARGET_FRAMERATE = 12;
+    const TIMESCALE = 18 / TARGET_FRAMERATE;
 
     function getForceOnPoint(x: number, y: number, z: number) {
         return (noise(x / SCALE, y / SCALE, z) - 0.5) * 2 * TWO_PI;
     }
 
-    const existingPoints = new Set<string>();
+    const pointIds = new Set<string>();
     const points: { x: number, y: number, opacity: number }[] = [];
 
     function addPoints() {
         for (let x = -SPACING / 2; x < w + SPACING; x += SPACING) {
             for (let y = -SPACING / 2; y < h + offsetY + SPACING; y += SPACING) {
                 const id = `${x}-${y}`;
-                if (existingPoints.has(id)) continue;
-                existingPoints.add(id);
+                if (pointIds.has(id)) continue;
+                pointIds.add(id);
                 points.push({ x, y, opacity: Math.random() * 0.5 + 0.5 });
             }
         }
     }
 
-    function setup() {
+    function setup({ createCanvas, stroke, frameRate, background, noFill, noiseSeed }: P5I) {
         createCanvas(w, h);
         background('#000000');
         stroke('rgba(170, 170, 170, 0.05)');
         noFill();
 
-        noiseSeed(+new Date());
+        frameRate(TARGET_FRAMERATE);
+        noiseSeed(Date.now());
 
         addPoints();
-
-
     }
 
-    function draw({ circle }: P5I) {
+    function draw({ circle, frameCount }: P5I) {
         background('#000000');
-        const t = +new Date() / 10000;
+        const t = (frameCount / 80) * TIMESCALE;
+
+        // if (frameCount % 10000) console.log(frameRate());
 
         for (const p of points) {
-            const { x, y } = p;
-            const rad = getForceOnPoint(x, y, t);
-            const length = (noise(x / SCALE, y / SCALE, t * 2) + 0.5) * LENGTH;
-            const nx = x + cos(rad) * length;
-            const ny = y + sin(rad) * length;
+            const rad = getForceOnPoint(p.x, p.y, t);
+            const length = (noise(p.x / SCALE, p.y / SCALE, t * 2) + 0.5) * LENGTH;
+            const nx = p.x + cos(rad) * length;
+            const ny = p.y + sin(rad) * length;
 
-            const opacity = 1;
-            
             // const center_distance = Math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2);
             // if (center_distance < 350)
             //     opacity = 0;
-
             //     opacity = 
-            stroke(200, 200, 200, (Math.abs(cos(rad)) * 0.8 + 0.2) * p.opacity * 255 * 0.5 * opacity);
+            stroke(200, 200, 200, (Math.abs(cos(rad)) * 0.8 + 0.2) * p.opacity * 255 * 0.5);
             circle(nx, ny - offsetY, 1);
         }
     }
@@ -89,14 +85,14 @@ const Dots: React.FC = () => {
 
     useEffect(() => {
         restart();
-
+        
         const handleResize = () => {
             w = window.innerWidth;
             h = window.innerHeight;
             resizeCanvas(w, h);
             addPoints();
         };
-
+        
         window.addEventListener('resize', handleResize);
 
         return () => {