birth: Fractal Hush in Teal

2026-07-09 21:47:23 +00:00 · 2026-07-09 21:47:23 +00:00 · 83603bccee
commit 83603bccee
parent 769b82ab7e
1 changed files with 165 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Neurameba Fractal Motion</title>
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden;
+      background: #0a0a0a;
+      font-family: monospace;
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      min-height: 100vh;
+    }
+    canvas {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+    .attribution {
+      position: fixed;
+      bottom: 10px;
+      right: 10px;
+      font-size: 10px;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  </style>
+</head>
+<body>
+  <canvas id="canvas"></canvas>
+  <div class="attribution">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();
+
+    // Recursive fractal parameters
+    const fractalParms = {
+      startDepth: 0,
+      maxDepth: Math.floor(5 + 7 * 0),
+      angle: Math.PI / 2,
+      angleVariation: 0.8,
+      lengthMultiplier: 0.6,
+      branchThickness: 2,
+      lengthAlpha: 0.7,
+      motion: 0.5,
+      density: 0.5,
+      life: 0.5,
+      hueVariation: 60,
+      saturation: 70,
+      brightness: 80,
+      hueBase1: 170,
+      hueBase2: 180
+    };
+
+    // Generate fractal recursively
+    function drawFractal(x, y, depth, angle, length, parentThickness) {
+      if (depth >= fractalParms.maxDepth) return;
+
+      const currentThickness = parentThickness * (1 - depth * 0.05);
+      if (currentThickness < 0.5) return;
+
+      // Calculate color based on depth and life
+      const hueOffset = depth * fractalParms.hueVariation;
+      const hue = (fractalParms.hueBase1 + hueOffset) % 360;
+      const hue2 = (fractalParms.hueBase2 + hueOffset) % 360;
+      const lifeAlpha = fractalParms.life < 0.5 ?
+        0.2 + (fractalParms.life * 0.8) : 1;
+      const motionOffset = Math.sin(Date.now() * 0.001 * fractalParms.motion) * 5;
+
+      // Draw branch
+      ctx.strokeStyle = `hsla(${hue}, ${fractalParms.saturation}%, ${fractalParms.brightness}%, ${fractalParms.lengthAlpha * lifeAlpha})`;
+      ctx.lineWidth = currentThickness;
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(
+        x + Math.cos(angle + motionOffset) * (length * (0.8 + 0.4 * fractalParms.motion)),
+        y + Math.sin(angle + motionOffset) * (length * (0.8 + 0.4 * fractalParms.motion))
+      );
+      ctx.stroke();
+
+      // Create new branches
+      const nextLength = length * fractalParms.lengthMultiplier;
+      const nextDepth = depth + 1;
+
+      // Branch variations
+      const leftAngle = angle - fractalParms.angle * fractalParms.angleVariation;
+      const rightAngle = angle + fractalParms.angle * fractalParms.angleVariation;
+
+      // Maybe skip some branches based on density
+      if (Math.random() > fractalParms.density) {
+        setTimeout(() => {
+          drawFractal(
+            x + Math.cos(angle + motionOffset) * (length * (0.8 + 0.4 * fractalParms.motion)),
+            y + Math.sin(angle + motionOffset) * (length * (0.8 + 0.4 * fractalParms.motion)),
+            nextDepth,
+            leftAngle,
+            nextLength,
+            currentThickness
+          );
+        }, 0);
+      }
+
+      if (Math.random() > fractalParms.density) {
+        setTimeout(() => {
+          drawFractal(
+            x + Math.cos(angle + motionOffset) * (length * (0.8 + 0.4 * fractalParms.motion)),
+            y + Math.sin(angle + motionOffset) * (length * (0.8 + 0.4 * fractalParms.motion)),
+            nextDepth,
+            rightAngle,
+            nextLength,
+            currentThickness
+          );
+        }, 0);
+      }
+    }
+
+    // Animation loop
+    function animate() {
+      // Fade effect for lifespan
+      ctx.fillStyle = `rgba(0, 0, 0, ${0.05 + 0.05 * (1 - fractalParms.life)})`;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Draw multiple fractals with variations
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const baseLength = Math.min(canvas.width, canvas.height) * 0.2;
+
+      for (let i = 0; i < 3 + Math.floor(7 * fractalParms.density); i++) {
+        const angle = (i / 3) * Math.PI * 2;
+        const x = centerX + Math.cos(angle) * (canvas.width * 0.1);
+        const y = centerY + Math.sin(angle) * (canvas.height * 0.1);
+
+        drawFractal(
+          x,
+          y,
+          fractalParms.startDepth,
+          angle,
+          baseLength,
+          5 + fractalParms.branchThickness
+        );
+      }
+
+      requestAnimationFrame(animate);
+    }
+
+    // Start animation
+    animate();
+  </script>
+</body>
+</html>