birth: Diffusing Currents of Time
This commit is contained in:
parent
4fcc7ac885
commit
507e9fb7e0
1 changed files with 173 additions and 0 deletions
173
index.html
Normal file
173
index.html
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Diffuse Pulse</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: monospace;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
font-size: 11px;
|
||||
text-shadow: 0 0 5px rgba(0,0,0,0.8);
|
||||
}
|
||||
</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 derived from prompt
|
||||
const params = {
|
||||
motion: 0.531,
|
||||
density: 0.502,
|
||||
complexity: 0.474,
|
||||
connectedness: 0.448,
|
||||
lifespan: 0.496,
|
||||
pulse: { avg: 0.59, min: 0.30, max: 2.00 },
|
||||
tone: { sadness: 0.00, anger: 0.00, curiosity: 0.30, dryness: 0.80, playfulness: 0.00, tension: 0.00 }
|
||||
};
|
||||
|
||||
// Reaction-diffusion parameters
|
||||
const D_A = 0.2 + params.motion * 0.8; // Diffusion rate of A
|
||||
const D_B = 0.2 + params.motion * 0.8; // Diffusion rate of B
|
||||
const feed = 0.036 + params.pulse.avg * 0.02; // Feed rate
|
||||
const kill = 0.06 + params.pulse.avg * 0.04; // Kill rate
|
||||
const timeStep = 0.1;
|
||||
const scale = 8 / (1 + params.density * 3); // Grid scale
|
||||
|
||||
// Initialize grid
|
||||
const rows = Math.floor(canvas.height / scale) + 2;
|
||||
const cols = Math.floor(canvas.width / scale) + 2;
|
||||
let grid = Array(rows).fill().map(() =>
|
||||
Array(cols).fill().map(() =>
|
||||
[Math.random(), Math.random()]
|
||||
)
|
||||
);
|
||||
|
||||
let nextGrid = JSON.parse(JSON.stringify(grid));
|
||||
let pulseTimer = 0;
|
||||
let pulseActive = false;
|
||||
let pulseX = 0, pulseY = 0;
|
||||
|
||||
function update() {
|
||||
// Random pulse
|
||||
pulseTimer += params.pulse.avg * 0.01;
|
||||
if (pulseTimer > 1 && !pulseActive && Math.random() < 0.02) {
|
||||
pulseActive = true;
|
||||
pulseX = Math.floor(Math.random() * cols);
|
||||
pulseY = Math.floor(Math.random() * rows);
|
||||
}
|
||||
|
||||
for (let y = 1; y < rows - 1; y++) {
|
||||
for (let x = 1; x < cols - 1; x++) {
|
||||
let a = grid[y][x][0];
|
||||
let b = grid[y][x][1];
|
||||
|
||||
// Apply pulse influence
|
||||
if (pulseActive && x === pulseX && y === pulseY) {
|
||||
a += 0.2;
|
||||
b += 0.1;
|
||||
}
|
||||
|
||||
// Reaction term
|
||||
const reaction = a * b * b;
|
||||
const newA = a + (D_A * laplacianA(x, y) - reaction + feed * (1 - a)) * timeStep;
|
||||
const newB = b + (D_B * laplacianB(x, y) + reaction - (kill + feed) * b) * timeStep;
|
||||
|
||||
nextGrid[y][x][0] = Math.max(0, Math.min(1, newA));
|
||||
nextGrid[y][x][1] = Math.max(0, Math.min(1, newB));
|
||||
}
|
||||
}
|
||||
|
||||
// Swap grids
|
||||
[grid, nextGrid] = [nextGrid, grid];
|
||||
if (pulseActive) pulseActive = false;
|
||||
|
||||
// Draw
|
||||
ctx.fillStyle = 'rgba(10,10,10,0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for (let y = 1; y < rows - 1; y++) {
|
||||
for (let x = 1; x < cols - 1; x++) {
|
||||
const a = grid[y][x][0];
|
||||
const b = grid[y][x][1];
|
||||
const val = (a - b + 1) / 2; // Output value
|
||||
|
||||
if (val > 0.1) {
|
||||
const size = scale * 0.8;
|
||||
const hue = 180 + val * 60; // Teal tones
|
||||
const saturation = 30 + val * 20;
|
||||
const lightness = 20 + val * 15;
|
||||
const alpha = 0.5 + val * 0.5;
|
||||
|
||||
ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
|
||||
ctx.fillRect(x * scale, y * scale, size, size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
function laplacianA(x, y) {
|
||||
let sum = 0;
|
||||
sum += grid[y-1][x][0] * 0.05;
|
||||
sum += grid[y+1][x][0] * 0.05;
|
||||
sum += grid[y][x-1][0] * 0.05;
|
||||
sum += grid[y][x+1][0] * 0.05;
|
||||
sum += grid[y-1][x-1][0] * 0.02;
|
||||
sum += grid[y+1][x+1][0] * 0.02;
|
||||
sum += grid[y-1][x+1][0] * 0.02;
|
||||
sum += grid[y+1][x-1][0] * 0.02;
|
||||
sum += grid[y][x][0] * -1;
|
||||
return sum;
|
||||
}
|
||||
|
||||
function laplacianB(x, y) {
|
||||
let sum = 0;
|
||||
sum += grid[y-1][x][1] * 0.05;
|
||||
sum += grid[y+1][x][1] * 0.05;
|
||||
sum += grid[y][x-1][1] * 0.05;
|
||||
sum += grid[y][x+1][1] * 0.05;
|
||||
sum += grid[y-1][x-1][1] * 0.02;
|
||||
sum += grid[y+1][x+1][1] * 0.02;
|
||||
sum += grid[y-1][x+1][1] * 0.02;
|
||||
sum += grid[y+1][x-1][1] * 0.02;
|
||||
sum += grid[y][x][1] * -1;
|
||||
return sum;
|
||||
}
|
||||
|
||||
update();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue