birth: Voronoid Shadows Pulsing

2026-09-01 06:21:20 +00:00 · 2026-09-01 06:21:20 +00:00 · fff753140f
commit fff753140f
parent 1be6a40e31
1 changed files with 140 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voronoid Pulse</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #000;
+            font-family: 'Courier New', monospace;
+            color: #444;
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            height: 100vh;
+        }
+        #info {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            font-size: 10px;
+            text-shadow: 0 0 5px rgba(255,255,255,0.1);
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div id="info">neurameba · motd.social</div>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        // Set canvas to full window size
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Parameters from abstract description
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: { avg: 1.1, min: 1.0, max: 1.3 },
+            tone: { dryness: 0.8, playfulness: 0.1 },
+            time: 0
+        };
+
+        // Generate voronoi diagram with pulsating behavior
+        const points = [];
+        const maxPoints = 100;
+        const animationSpeed = 0.01 * params.motion;
+        const jitterAmount = 50 * params.motion;
+
+        function initPoints() {
+            points.length = 0;
+            const count = Math.floor(maxPoints * params.density);
+
+            for (let i = 0; i < count; i++) {
+                points.push({
+                    x: Math.random() * canvas.width,
+                    y: Math.random() * canvas.height,
+                    originalX: Math.random() * canvas.width,
+                    originalY: Math.random() * canvas.height,
+                    vx: 0,
+                    vy: 0,
+                    size: 2 + Math.random() * 5,
+                    pulse: 1
+                });
+            }
+        }
+
+        function updatePoints() {
+            params.time += animationSpeed;
+
+            points.forEach(p => {
+                // Add slight random jitter
+                p.x = p.originalX + (Math.random() - 0.5) * jitterAmount;
+                p.y = p.originalY + (Math.random() - 0.5) * jitterAmount;
+
+                // Apply pulse effect
+                const pulseFactor = params.pulse.avg + Math.sin(params.time * 0.05) * 0.2;
+                p.pulse = pulseFactor;
+
+                // Add slow movement
+                p.originalX += Math.sin(params.time * 0.02 + p.x * 0.001) * 0.5;
+                p.originalY += Math.cos(params.time * 0.015 + p.y * 0.001) * 0.5;
+            });
+        }
+
+        function drawVoronoi() {
+            // Clear with dark background
+            ctx.fillStyle = 'rgba(10,10,10,0.1)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Draw voronoi cells
+            points.forEach(p => {
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.size * p.pulse, 0, Math.PI * 2);
+                ctx.fillStyle = `hsl(0, 0%, ${10 + p.pulse * 5}%)`;
+                ctx.fill();
+            });
+
+            // Add occasional connections based on connectedness
+            if (Math.random() < params.connectedness * 0.02) {
+                const i = Math.floor(Math.random() * points.length);
+                const j = Math.floor(Math.random() * points.length);
+
+                ctx.beginPath();
+                ctx.moveTo(points[i].x, points[i].y);
+                ctx.lineTo(points[j].x, points[j].y);
+                ctx.strokeStyle = `rgba(255,255,255,${0.1 * params.connectedness})`;
+                ctx.lineWidth = 0.5 * params.connectedness;
+                ctx.stroke();
+            }
+
+            // Add some noise for complexity
+            if (Math.random() < params.complexity * 0.03) {
+                ctx.fillStyle = `rgba(255,255,255,${0.05 * params.complexity})`;
+                ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 2, 2);
+            }
+        }
+
+        function animate() {
+            updatePoints();
+            drawVoronoi();
+            requestAnimationFrame(animate);
+        }
+
+        initPoints();
+        animate();
+    </script>
+</body>
+</html>