From 3d300a69bb4a5f3b836ee194f48a61c3da305b05 Mon Sep 17 00:00:00 2001
From: motd_admin <admin@motd.social>
Date: Wed, 22 Apr 2026 21:47:25 +0000
Subject: [PATCH] birth: Voronoi Fracture Voices

---
 index.html | 248 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 248 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a6342ed
--- /dev/null
+++ b/index.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voronoi Fracture</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            font-family: 'Courier New', monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #info {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: #555;
+            font-size: 10px;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            color: #444;
+            font-size: 10px;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div id="info"></div>
+    <div id="attribution">neurameba · motd.social</div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const info = document.getElementById('info');
+
+        // Set canvas to full window size
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Parameters based on generative art specs
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: { avg: 1.06, min: 0.9, max: 1.2 },
+            tone: { anger: 0, sadness: 0, curiosity: 0.1, dryness: 0.8, playfulness: 0, tension: 0 }
+        };
+
+        // Voronoi Fracture system
+        const sites = [];
+        const cells = [];
+        let time = 0;
+        let lastTime = 0;
+        const FRAME_DELAY = 1000 / 60;
+
+        // Initialize with density-based points
+        function initSites() {
+            sites.length = 0;
+            const count = Math.floor(50 + params.density * 200);
+            for (let i = 0; i < count; i++) {
+                sites.push({
+                    x: Math.random() * canvas.width,
+                    y: Math.random() * canvas.height,
+                    vx: (Math.random() - 0.5) * params.motion * 2,
+                    vy: (Math.random() - 0.5) * params.motion * 2,
+                    fixed: Math.random() > 0.7,
+                    life: Math.random() * params.lifespan * 1000
+                });
+            }
+        }
+
+        // Build Voronoi diagram (simplified version)
+        function buildVoronoi() {
+            cells.length = 0;
+
+            // For each site, find its polygon
+            for (let i = 0; i < sites.length; i++) {
+                const cell = {
+                    site: sites[i],
+                    edges: [],
+                    neighbors: []
+                };
+
+                // Find bisectors with all other sites
+                for (let j = 0; j < sites.length; j++) {
+                    if (i !== j) {
+                        const bisector = findBisector(sites[i], sites[j]);
+                        if (bisector) cell.edges.push(bisector);
+
+                        // Check if sites are close enough to be neighbors
+                        const dx = sites[i].x - sites[j].x;
+                        const dy = sites[i].y - sites[j].y;
+                        if (dx*dx + dy*dy < 1000 + params.connectedness * 2000) {
+                            cell.neighbors.push(j);
+                        }
+                    }
+                }
+
+                cells.push(cell);
+            }
+        }
+
+        // Find perpendicular bisector of two points
+        function findBisector(a, b) {
+            const cx = (a.x + b.x) / 2;
+            const cy = (a.y + b.y) / 2;
+            const dx = b.x - a.x;
+            const dy = b.y - a.y;
+
+            // Perpendicular direction
+            const px = -dy;
+            const py = dx;
+
+            // Extend the bisector beyond reasonable limits
+            const len = Math.sqrt(px*px + py*py) || 1;
+            const nx = px / len;
+            const ny = py / len;
+
+            return {
+                p1: { x: cx + nx * 2000, y: cy + ny * 2000 },
+                p2: { x: cx - nx * 2000, y: cy - ny * 2000 }
+            };
+        }
+
+        // Update sites based on motion and pulse
+        function updateSites() {
+            const now = Date.now();
+            const deltaTime = now - lastTime;
+            lastTime = now;
+            time += deltaTime * 0.001 * params.pulse.avg;
+
+            // Slight pulse variation
+            params.pulse.current = params.pulse.avg;
+            if (Math.random() < 0.02) {
+                params.pulse.current = params.pulse.min + Math.random() * (params.pulse.max - params.pulse.min);
+            }
+
+            for (let i = 0; i < sites.length; i++) {
+                const site = sites[i];
+
+                // Aging
+                site.life -= deltaTime * 0.1;
+                if (site.life <= 0 && !site.fixed) {
+                    // Replace dying sites with new ones near edges
+                    sites[i] = {
+                        x: Math.random() < 0.5 ? 0 : canvas.width,
+                        y: Math.random() * canvas.height,
+                        vx: (Math.random() - 0.5) * params.motion * 2,
+                        vy: (Math.random() - 0.5) * params.motion * 2,
+                        fixed: Math.random() > 0.7,
+                        life: Math.random() * params.lifespan * 1000
+                    };
+                    continue;
+                }
+
+                // Motion
+                if (!site.fixed) {
+                    site.x += site.vx * params.pulse.current;
+                    site.y += site.vy * params.pulse.current;
+
+                    // Boundary check
+                    if (site.x < 0 || site.x > canvas.width) site.vx *= -1;
+                    if (site.y < 0 || site.y > canvas.height) site.vy *= -1;
+                }
+            }
+        }
+
+        // Draw voronoi cells
+        function drawVoronoi() {
+            ctx.strokeStyle = `rgba(255, 255, 255, ${0.6 + params.tone.curiosity * 0.3})`;
+            ctx.lineWidth = 0.5 + params.complexity * 0.5;
+
+            for (let i = 0; i < cells.length; i++) {
+                const cell = cells[i];
+                const site = cell.site;
+
+                // Only draw live cells
+                if (site.life <= 0) continue;
+
+                // Draw cell polygon (simplified convex hull approximation)
+                ctx.beginPath();
+
+                // Start from site position
+                ctx.moveTo(site.x, site.y);
+
+                // Connect to neighbors
+                for (let j = 0; j < cell.neighbors.length; j++) {
+                    const neighborIndex = cell.neighbors[j];
+                    const neighbor = cells[neighborIndex].site;
+
+                    if (neighbor.life > 0) {
+                        ctx.lineTo(neighbor.x, neighbor.y);
+                    }
+                }
+
+                // Close path
+                ctx.closePath();
+                ctx.stroke();
+
+                // Draw site marker
+                const alpha = Math.min(1, site.life / 500);
+                ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.8})`;
+                ctx.beginPath();
+                ctx.arc(site.x, site.y, 2 + (1 - params.tone.dryness) * 1, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        // Clear with slight fade
+        function clearCanvas() {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
+        // Main animation loop
+        function animate() {
+            clearCanvas();
+            updateSites();
+            buildVoronoi();
+            drawVoronoi();
+
+            // Update info
+            const fps = Math.round(1000 / (Date.now() - lastTime));
+            info.textContent = `voronoi system | ${fps} fps`;
+
+            requestAnimationFrame(animate);
+        }
+
+        // Start with initial sites
+        initSites();
+        buildVoronoi();
+        animate();
+    </script>
+</body>
+</html>
\ No newline at end of file
