birth: Dry pulses in the gray tide

This commit is contained in:
motd_admin 2026-08-26 14:21:21 +00:00
parent beb62cd37d
commit 3300dff0bb

134
index.html Normal file
View file

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neurameba · motd.social</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
font-family: monospace;
}
canvas {
display: block;
}
#info {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 10px;
text-align: center;
}
</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');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
// Parameters adjusted by input values
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.08, min: 1.0, max: 1.2 },
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.1, dryness: 0.9, playfulness: 0.0, tension: 0.0 }
};
// Reaction-diffusion grid
const size = 128; // Grid size
const grid = new Array(size * size).fill(0);
const nextGrid = new Array(size * size).fill(0);
// Initialize with random values
for (let i = 0; i < grid.length; i++) {
grid[i] = Math.random() * 0.1;
}
// Palette based on dryness and curiosity
function getColor(value) {
const dryness = params.tone.dryness;
const curiosity = params.tone.curiosity;
// Grayscale with slight teal influence
const base = Math.floor(100 + value * 155 * (0.7 + curiosity * 0.3));
const r = base + Math.sin(Date.now() * 0.0005) * 10 * curiosity;
const g = base + Math.cos(Date.now() * 0.0003) * 10 * curiosity;
return `rgb(${r}, ${g}, ${base})`;
}
function update() {
const scaleX = canvas.width / size;
const scaleY = canvas.height / size;
const timeFactor = params.motion * 0.1;
// Reaction-diffusion parameters (Gray-Scott model)
const F = 0.055;
const k = 0.062;
const dt = 0.1;
const diffusionRateA = 0.16;
const diffusionRateB = 0.16;
// Update grid
for (let x = 1; x < size - 1; x++) {
for (let y = 1; y < size - 1; y++) {
const idx = x + y * size;
const a = grid[idx];
const b = grid[idx + size * size]; // Second layer for B
const laplacianA = (grid[idx - 1] + grid[idx + 1] + grid[idx - size] + grid[idx + size] - 4 * a) * diffusionRateA;
const laplacianB = (grid[idx - 1 + size * size] + grid[idx + 1 + size * size] +
grid[idx - size + size * size] + grid[idx + size + size * size] - 4 * b) * diffusionRateB;
nextGrid[idx] = a + dt * (-a * b * b + F * (1 - a) + laplacianA);
nextGrid[idx + size * size] = b + dt * (a * b * b - (F + k) * b + laplacianB);
}
}
// Swap grids
for (let i = 0; i < grid.length; i++) {
grid[i] = nextGrid[i];
}
// Draw
ctx.globalAlpha = 0.8;
for (let x = 0; x < size - 1; x++) {
for (let y = 0; y < size - 1; y++) {
const idx = x + y * size;
const value = grid[idx];
if (value > 0.1) {
ctx.fillStyle = getColor(value * 2);
ctx.fillRect(x * scaleX, y * scaleY, scaleX, scaleY);
}
if (value > 0.2) {
ctx.fillStyle = getColor(value * 1.5);
ctx.beginPath();
ctx.arc(x * scaleX + scaleX/2, y * scaleY + scaleY/2, scaleX * 0.3 * (value - 0.2), 0, Math.PI * 2);
ctx.fill();
}
}
}
ctx.globalAlpha = 1;
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>