dots background, p5.js

package.json

@@ -23,13 +23,13 @@
     "@trpc/server": "^10.0.0",
     "@vercel/analytics": "^0.1.6",
     "next": "^15.1.1",
+    "p5i": "^0.6.0",
     "plaiceholder": "^3.0.0",
     "prettier": "^3.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
     "react-markdown": "^9.0.1",
-    "react-ogp": "^0.0.3",
     "react-wrap-balancer": "^0.4.0",
     "sass": "^1.56.2",
     "sharp": "^0.32.1",

src/components/Dots.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useRef } from 'react';
+import { p5i, P5I } from 'p5i';
+
+const Dots: React.FC = () => {
+    const canvasRef = useRef<HTMLDivElement | null>(null);
+
+    const {
+        mount,
+        unmount,
+        createCanvas,
+        background,
+        noFill,
+        stroke,
+        noise,
+        noiseSeed,
+        resizeCanvas,
+        cos,
+        sin,
+        TWO_PI,
+    } = p5i();
+
+    let w = window.innerWidth;
+    let h = window.innerHeight;
+    let offsetY = window.scrollY;
+
+    const SCALE = 200;
+    const LENGTH = 10;
+    const SPACING = 15;
+
+    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 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);
+                points.push({ x, y, opacity: Math.random() * 0.5 + 0.5 });
+            }
+        }
+    }
+
+    function setup() {
+        createCanvas(w, h);
+        background('#000000');
+        stroke('rgba(170, 170, 170, 0.05)');
+        noFill();
+
+        noiseSeed(+new Date());
+
+        addPoints();
+
+
+    }
+
+    function draw({ circle }: P5I) {
+        background('#000000');
+        const t = +new Date() / 10000;
+
+        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;
+
+            let opacity = 0.5;
+            const center_distance = Math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2);
+            // if (center_distance < 350)
+            //     opacity = 
+            stroke(200, 200, 200, (Math.abs(cos(rad)) * 0.8 + 0.2) * p.opacity * 255 * opacity);
+            circle(nx, ny - offsetY, 1);
+        }
+    }
+
+    function restart() {
+        if (canvasRef.current) {
+            mount(canvasRef.current, { setup, draw });
+        }
+    }
+
+    useEffect(() => {
+        restart();
+
+        const handleResize = () => {
+            w = window.innerWidth;
+            h = window.innerHeight;
+            resizeCanvas(w, h);
+            addPoints();
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // Uncomment to enable scroll-based animation
+        // Tho there is some lag when scrolling, not sure if it's solvable
+        // const handleScroll = () => {
+        //   offsetY = window.scrollY;
+        //   addPoints();
+        // };
+        // window.addEventListener('scroll', handleScroll, { passive: true });
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            // window.removeEventListener('scroll', handleScroll);
+            unmount();
+        };
+    }, []);
+
+    return <div ref={canvasRef} className='fixed left-0 right-0 top-0 bottom-0 pointer-events-none -z-1 animate-bg' />;
+};
+
+export default Dots;

yarn.lock

@@ -3032,6 +3032,11 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p5i@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/p5i/-/p5i-0.6.0.tgz#c23c0d687650473fa10ecd2ba855e2c738b6516b"
+  integrity sha512-Hw+J6Fq0ovVnC/h+6wInwZZyAu63eUzFW030+OksWs+MGftExxckKpKG8BRMQakj27oLpVwZEt63jNO17fYwcw==
+
 package-json-from-dist@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
@@ -3294,11 +3299,6 @@ react-markdown@^9.0.1:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
-react-ogp@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/react-ogp/-/react-ogp-0.0.3.tgz#f3d49ff49e593576778f6a11824a4ccb2d8b427d"
-  integrity sha512-+m5my7G6dxzN79e1e/M5VV2MmM2sXrTqs+hfL8sFHsjWn4PMv3P8eD/aMSHPibvp6BYsiFCeWMMSzcqUCIQr9w==
-
 react-ssr-prepass@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz#bc4ca7fcb52365e6aea11cc254a3d1bdcbd030c5"