birth: Teal Currents in Motion

2026-05-10 21:47:16 +00:00 · 2026-05-10 21:47:16 +00:00 · fd47af717a
commit fd47af717a
parent 7e9e640417
1 changed files with 163 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flow Field Study</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            font-family: 'Courier New', monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: fixed;
+            bottom: 10px;
+            right: 10px;
+            color: #444;
+            font-size: 10px;
+            z-index: 100;
+        }
+    </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 resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Flow field parameters
+        const particleCount = 150 * (0.5 + 0.5);
+        const particleSize = 1.5 * (0.5 + 0.5);
+        const motionStrength = 0.8 * (0.5 + 0.5);
+        const complexityFactor = 0.7;
+        const connectednessFactor = 0.6;
+        const baseSpeed = 0.5;
+        const maxSpeed = 2.0;
+        const trailLength = 5 * (1.1 - 0.5);
+
+        // Tone parameters
+        const dryness = 0.9;
+        const playfulness = 0.1;
+        const curiosity = 0.8;
+
+        // Color palette based on tone
+        const hue = (curiosity * 180) + 100; // Teal range
+        const saturation = 0.8 - (dryness * 0.5);
+        const brightness = 0.7 - (playfulness * 0.2);
+
+        // Flow field grid
+        const gridSize = 30;
+        const cols = Math.floor(canvas.width / gridSize) + 1;
+        const rows = Math.floor(canvas.height / gridSize) + 1;
+
+        // Precompute flow field
+        const flowField = [];
+        for (let y = 0; y < rows; y++) {
+            for (let x = 0; x < cols; x++) {
+                const angle = Math.sin(x * complexityFactor) * Math.cos(y * complexityFactor) * Math.PI * 2;
+                const vx = Math.cos(angle) * motionStrength;
+                const vy = Math.sin(angle) * motionStrength;
+                flowField.push({ x: x * gridSize, y: y * gridSize, vx, vy });
+            }
+        }
+
+        // Particles
+        class Particle {
+            constructor() {
+                this.reset();
+            }
+
+            reset() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.speed = baseSpeed + Math.random() * (maxSpeed - baseSpeed);
+                this.direction = Math.random() * Math.PI * 2;
+                this.velocity = { x: 0, y: 0 };
+                this.history = [];
+            }
+
+            update() {
+                // Find nearest flow field point
+                const col = Math.floor(this.x / gridSize);
+                const row = Math.floor(this.y / gridSize);
+                const index = row * cols + col;
+                if (index >= 0 && index < flowField.length) {
+                    const field = flowField[index];
+                    this.direction += (Math.atan2(field.vy, field.vx) - this.direction) * 0.1;
+                }
+
+                // Update velocity
+                this.velocity.x = Math.cos(this.direction) * this.speed;
+                this.velocity.y = Math.sin(this.direction) * this.speed;
+
+                // Apply motion
+                this.x += this.velocity.x;
+                this.y += this.velocity.y;
+
+                // Boundary check
+                if (this.x < 0) this.x = canvas.width;
+                if (this.x > canvas.width) this.x = 0;
+                if (this.y < 0) this.y = canvas.height;
+                if (this.y > canvas.height) this.y = 0;
+
+                // Add to history
+                this.history.push({ x: this.x, y: this.y });
+                if (this.history.length > trailLength) {
+                    this.history.shift();
+                }
+            }
+
+            draw() {
+                ctx.strokeStyle = `hsla(${hue}, ${saturation * 100}%, ${brightness * 100}%, 0.8)`;
+                ctx.lineWidth = particleSize * (0.5 + 0.5);
+
+                ctx.beginPath();
+                for (let i = 0; i < this.history.length; i++) {
+                    const point = this.history[i];
+                    const alpha = i / this.history.length;
+                    ctx.globalAlpha = alpha * 0.7;
+                    if (i === 0) {
+                        ctx.moveTo(point.x, point.y);
+                    } else {
+                        ctx.lineTo(point.x, point.y);
+                    }
+                }
+                ctx.stroke();
+                ctx.globalAlpha = 1.0;
+            }
+        }
+
+        const particles = Array.from({ length: particleCount }, () => new Particle());
+
+        function animate() {
+            // Fade background slightly
+            ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Update and draw all particles
+            particles.forEach(particle => {
+                particle.update();
+                particle.draw();
+            });
+
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+    </script>
+</body>
+</html>