birth: Fractured Light in Grid

2026-05-21 05:47:18 +00:00 · 2026-05-21 05:47:18 +00:00 · 278217968d
commit 278217968d
parent 089d190835
1 changed files with 148 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neurameba Tessellation Study</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            font-family: 'Courier New', monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            color: #444;
+            font-size: 10px;
+            text-shadow: 0 0 5px rgba(0,0,0,0.5);
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div id="attribution">neurameba · motd.social</div>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        function resize() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resize);
+        resize();
+
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: { avg: 1.03, min: 0.8, max: 1.2 },
+            tone: { anger: 0, sadness: 0, curiosity: 0.1, dryness: 0.8, playfulness: 0.1, tension: 0 }
+        };
+
+        const vertices = [];
+        const connections = [];
+        const maxPoints = 500;
+        const baseSize = 10 + params.density * 30;
+        const segmentVariation = 0.3 + params.complexity * 0.7;
+
+        function init() {
+            for (let i = 0; i < maxPoints; i++) {
+                const angle = (i / maxPoints) * Math.PI * 2;
+                const dist = baseSize * (0.5 + Math.random() * 0.5);
+                vertices.push({
+                    x: canvas.width/2 + Math.cos(angle) * dist,
+                    y: canvas.height/2 + Math.sin(angle) * dist,
+                    baseX: canvas.width/2 + Math.cos(angle) * dist,
+                    baseY: canvas.height/2 + Math.sin(angle) * dist,
+                    size: 1 + Math.random() * 3,
+                    phase: Math.random() * Math.PI * 2,
+                    pulse: 1
+                });
+            }
+
+            for (let i = 0; i < vertices.length; i++) {
+                for (let j = i+1; j < vertices.length; j++) {
+                    if (Math.random() < 0.1 * params.connectedness) {
+                        connections.push({
+                            a: i,
+                            b: j,
+                            distance: Math.hypot(vertices[i].x - vertices[j].x, vertices[i].y - vertices[j].y),
+                            strength: 0.5 + Math.random() * 0.5
+                        });
+                    }
+                }
+            }
+        }
+
+        function update() {
+            const pulseFactor = params.pulse.avg + Math.sin(Date.now() * 0.001) * (params.pulse.max - params.pulse.min) * 0.5;
+
+            vertices.forEach(v => {
+                const angle = Date.now() * 0.0005 * params.motion * pulseFactor;
+                const dist = baseSize * (0.5 + Math.sin(v.phase + Date.now() * 0.0002) * 0.5 * segmentVariation) * pulseFactor;
+
+                v.x = v.baseX + Math.cos(angle) * dist;
+                v.y = v.baseY + Math.sin(angle) * dist;
+                v.size = 1 + Math.sin(Date.now() * 0.0003) * 2 * params.density;
+            });
+
+            connections.forEach(c => {
+                const v1 = vertices[c.a];
+                const v2 = vertices[c.b];
+                const currentDist = Math.hypot(v1.x - v2.x, v1.y - v2.y);
+                const ratio = c.distance / currentDist;
+                const force = (1 - ratio) * c.strength * 0.1;
+
+                const angle = Math.atan2(v2.y - v1.y, v2.x - v1.x);
+                const moveX = Math.cos(angle) * force;
+                const moveY = Math.sin(angle) * force;
+
+                v1.x += moveX;
+                v1.y += moveY;
+                v2.x -= moveX;
+                v2.y -= moveY;
+            });
+        }
+
+        function draw() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Draw connections first
+            connections.forEach(c => {
+                ctx.strokeStyle = `rgba(255, 255, 255, ${0.2 + params.tone.dryness * 0.3})`;
+                ctx.lineWidth = 0.5 + params.tone.dryness * 0.5;
+                ctx.beginPath();
+                ctx.moveTo(vertices[c.a].x, vertices[c.a].y);
+                ctx.lineTo(vertices[c.b].x, vertices[c.b].y);
+                ctx.stroke();
+            });
+
+            // Draw vertices
+            vertices.forEach(v => {
+                ctx.fillStyle = `rgba(255, 255, 255, 0.1)`;
+                ctx.beginPath();
+                ctx.arc(v.x, v.y, v.size, 0, Math.PI * 2);
+                ctx.fill();
+            });
+        }
+
+        function animate() {
+            update();
+            draw();
+            requestAnimationFrame(animate);
+        }
+
+        init();
+        animate();
+    </script>
+</body>
+</html>