birth: Teal Echoes in Silence
This commit is contained in:
parent
0dcdccb77b
commit
efd7f8f06d
1 changed files with 187 additions and 0 deletions
187
index.html
Normal file
187
index.html
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Neurameba Growth</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
canvas {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
#attribution {
|
||||
color: #444;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</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');
|
||||
|
||||
// Set canvas to full window size
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
// Parameters based on the organic input
|
||||
const params = {
|
||||
motion: 0.522,
|
||||
density: 0.493,
|
||||
complexity: 0.441,
|
||||
connectedness: 0.526,
|
||||
lifespan: 0.417,
|
||||
pulse: { avg: 0.53, min: 0.30, max: 2.00 },
|
||||
tone: { anger: 0.00, sadness: 0.00, curiosity: 0.80, dryness: 0.90, playfulness: 0.10, tension: 0.00 },
|
||||
topology: {
|
||||
nodes: 80,
|
||||
branches: 72,
|
||||
loops: 458,
|
||||
maxDepth: 20,
|
||||
thicknessRatio: 1.25,
|
||||
fractalDim: 1.632,
|
||||
energy: 420.6
|
||||
}
|
||||
};
|
||||
|
||||
// Reaction-diffusion parameters
|
||||
const D = {
|
||||
a: 1, // Diffusion rate for chemical A
|
||||
b: 0.5, // Diffusion rate for chemical B
|
||||
feed: 0.055, // Feed rate
|
||||
kill: 0.062, // Kill rate
|
||||
scale: 3 // Render scale
|
||||
};
|
||||
|
||||
// Adjust based on complexity
|
||||
D.feed = 0.055 + (params.complexity * 0.02);
|
||||
D.kill = 0.062 + (params.connectedness * 0.02);
|
||||
|
||||
// Grid setup
|
||||
const gridSize = Math.floor(Math.min(canvas.width, canvas.height) / 3);
|
||||
const cols = Math.ceil(canvas.width / D.scale);
|
||||
const rows = Math.ceil(canvas.height / D.scale);
|
||||
const grid = new Array(cols * rows).fill(0);
|
||||
const next = new Array(cols * rows).fill(0);
|
||||
|
||||
// Random seed
|
||||
function randomSeeds() {
|
||||
const numSeeds = Math.floor(params.topology.nodes * params.density);
|
||||
for (let i = 0; i < numSeeds; i++) {
|
||||
const idx = Math.floor(Math.random() * grid.length);
|
||||
grid[idx] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Moore neighborhood
|
||||
function idx(x, y) {
|
||||
return ((y % rows) + rows) % rows * cols + ((x % cols) + cols) % cols;
|
||||
}
|
||||
|
||||
// Gray-Scott reaction-diffusion
|
||||
function updateGrid() {
|
||||
for (let x = 0; x < cols; x++) {
|
||||
for (let y = 0; y < rows; y++) {
|
||||
const i = idx(x, y);
|
||||
|
||||
const a = grid[idx(x-1, y-1)] + grid[idx(x, y-1)] + grid[idx(x+1, y-1)] +
|
||||
grid[idx(x-1, y)] + grid[i] + grid[idx(x+1, y)] +
|
||||
grid[idx(x-1, y+1)] + grid[idx(x, y+1)] + grid[idx(x+1, y+1)];
|
||||
|
||||
const laplaceA = (grid[idx(x-1, y)] + grid[idx(x+1, y)] +
|
||||
grid[idx(x, y-1)] + grid[idx(x, y+1)] -
|
||||
4 * grid[i]) / 4;
|
||||
|
||||
const laplaceB = (next[idx(x-1, y)] + next[idx(x+1, y)] +
|
||||
next[idx(x, y-1)] + next[idx(x, y+1)] -
|
||||
4 * next[i]) / 4;
|
||||
|
||||
next[i] = grid[i] + D.a * laplaceA - grid[i] * next[i] * next[i] + D.feed * (1 - grid[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// Swap grids
|
||||
[grid, next] = [next, grid];
|
||||
|
||||
// Reset boundaries
|
||||
for (let i = 0; i < cols; i++) {
|
||||
grid[idx(i, 0)] = grid[idx(i, rows-2)];
|
||||
grid[idx(i, rows-1)] = grid[idx(i, 1)];
|
||||
}
|
||||
for (let i = 0; i < rows; i++) {
|
||||
grid[idx(0, i)] = grid[idx(cols-2, i)];
|
||||
grid[idx(cols-1, i)] = grid[idx(1, i)];
|
||||
}
|
||||
}
|
||||
|
||||
// Render
|
||||
function render() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const imgData = ctx.createImageData(canvas.width, canvas.height);
|
||||
const data = imgData.data;
|
||||
|
||||
for (let y = 0; y < canvas.height; y++) {
|
||||
for (let x = 0; x < canvas.width; x++) {
|
||||
const gridX = Math.floor(x / D.scale);
|
||||
const gridY = Math.floor(y / D.scale);
|
||||
const val = grid[idx(gridX, gridY)];
|
||||
|
||||
const idx = (y * canvas.width + x) * 4;
|
||||
|
||||
// Dryness/monochrome with curiosity (teal) overlay
|
||||
const gray = Math.floor(val * params.tone.curiosity * 255);
|
||||
const teal = Math.floor((1 - params.tone.dryness) * 120 + gray * 0.3);
|
||||
|
||||
data[idx] = teal; // R
|
||||
data[idx+1] = gray; // G
|
||||
data[idx+2] = 180 + gray * 0.7; // B
|
||||
data[idx+3] = Math.min(255, val * 255 * params.topology.energy / 500);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(imgData, 0, 0);
|
||||
}
|
||||
|
||||
// Animation loop
|
||||
let lastTime = 0;
|
||||
function animate(time) {
|
||||
if (!lastTime) lastTime = time;
|
||||
const deltaTime = (time - lastTime) / 1000;
|
||||
lastTime = time;
|
||||
|
||||
// Pulsing feed/kill rates
|
||||
const pulseFactor = params.pulse.avg + Math.sin(time * 0.001) * (params.pulse.max - params.pulse.avg) * 0.5;
|
||||
D.feed = 0.055 * pulseFactor;
|
||||
D.kill = 0.062 * pulseFactor;
|
||||
|
||||
updateGrid();
|
||||
render();
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
randomSeeds();
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue