187 lines
No EOL
6.3 KiB
HTML
187 lines
No EOL
6.3 KiB
HTML
<!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> |