birth: Diffusive Neural Accretion
This commit is contained in:
parent
7f6de4d08d
commit
849a1d027b
1 changed files with 225 additions and 0 deletions
225
index.html
Normal file
225
index.html
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Diffusive Emergence</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #333;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
font-size: 11px;
|
||||
color: #555;
|
||||
text-shadow: 0 0 5px rgba(0,0,0,0.5);
|
||||
}
|
||||
</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();
|
||||
|
||||
// Simulation parameters derived from the organism
|
||||
const params = {
|
||||
motion: 0.483,
|
||||
density: 0.480,
|
||||
complexity: 0.494,
|
||||
connectedness: 0.503,
|
||||
lifespan: 0.471,
|
||||
pulse: { avg: 0.43, min: 0.30, max: 2.00 },
|
||||
tone: { dryness: 0.90 },
|
||||
topology: {
|
||||
survivingNodes: 145,
|
||||
branchCount: 135,
|
||||
loops: 1166,
|
||||
maxDepth: 34,
|
||||
thicknessRatio: 1.50,
|
||||
fractalDim: 1.292,
|
||||
finalEnergy: 1239.5
|
||||
}
|
||||
};
|
||||
|
||||
// Reaction-diffusion system (Gray-Scott model variant)
|
||||
const size = 256;
|
||||
const grid = new Float32Array(size * size * 4);
|
||||
const next = new Float32Array(size * size * 4);
|
||||
let time = 0;
|
||||
|
||||
// Initialize with sparse, networked seed
|
||||
function init() {
|
||||
const densityFactor = Math.pow(params.density, 2) * 0.8;
|
||||
for (let i = 0; i < size * size * 4; i += 4) {
|
||||
const x = (i/4) % size;
|
||||
const y = Math.floor((i/4) / size);
|
||||
const dist = Math.sqrt((x - size/2)**2 + (y - size/2)**2) / (size/2);
|
||||
const r = Math.random() * densityFactor;
|
||||
|
||||
if (r < 0.1 + 0.3 * params.connectedness) {
|
||||
grid[i] = 0.5 + (Math.random() - 0.5) * 0.2; // U
|
||||
grid[i+1] = 0.25 + (Math.random() - 0.5) * 0.1; // V
|
||||
} else {
|
||||
grid[i] = 0.5;
|
||||
grid[i+1] = 0.25;
|
||||
}
|
||||
grid[i+2] = 0; // Energy/temperature
|
||||
grid[i+3] = 0; // Age
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
// Simulation step
|
||||
function step() {
|
||||
const F = 0.055 + 0.02 * params.motion; // Feed rate
|
||||
const K = 0.061 + 0.015 * params.connectedness; // Kill rate
|
||||
const D = 0.16 + 0.1 * params.complexity; // Diffusion rate
|
||||
const pulseFactor = params.pulse.avg + (Math.sin(time * 0.003) * 0.5) * (params.pulse.max - params.pulse.min);
|
||||
|
||||
for (let i = 0; i < size; i++) {
|
||||
for (let j = 0; j < size; j++) {
|
||||
const idx = (i * size + j) * 4;
|
||||
const idxL = ((i - 1 + size) % size * size + j) * 4;
|
||||
const idxR = ((i + 1) % size * size + j) * 4;
|
||||
const idxU = (i * size + (j - 1 + size) % size) * 4;
|
||||
const idxD = (i * size + (j + 1) % size) * 4;
|
||||
|
||||
const u = grid[idx];
|
||||
const v = grid[idx+1];
|
||||
const energy = grid[idx+2];
|
||||
const age = grid[idx+3];
|
||||
|
||||
// Reaction-diffusion core
|
||||
const uvv = u * v * v;
|
||||
const reaction = uvv - (F + pulseFactor) * v;
|
||||
const du = D * (grid[idxL] + grid[idxR] + grid[idxU] + grid[idxD] - 4 * u) + reaction;
|
||||
const dv = D * (grid[idxL+1] + grid[idxR+1] + grid[idxU+1] + grid[idxD+1] - 4 * v) - reaction;
|
||||
|
||||
next[idx] = u + du * 0.1;
|
||||
next[idx+1] = v + dv * 0.1;
|
||||
|
||||
// Energy dissipation and accumulation
|
||||
if (Math.random() < 0.01 * params.lifespan) {
|
||||
next[idx+2] = Math.min(1, energy + 0.1 * params.finalEnergy / 1000);
|
||||
} else {
|
||||
next[idx+2] = Math.max(0, energy - 0.01);
|
||||
}
|
||||
|
||||
// Age and spread
|
||||
next[idx+3] = age + 0.01;
|
||||
if (age > 100) {
|
||||
const spread = 0.1 * params.connectedness;
|
||||
if (Math.random() < spread) {
|
||||
const x = i + (Math.random() - 0.5) * 2;
|
||||
const y = j + (Math.random() - 0.5) * 2;
|
||||
const nx = Math.floor((x + size) % size);
|
||||
const ny = Math.floor((y + size) % size);
|
||||
const nidx = (nx * size + ny) * 4;
|
||||
next[nidx] += 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Swap buffers
|
||||
[grid, next].forEach((arr) => {
|
||||
arr.set(next);
|
||||
});
|
||||
time++;
|
||||
}
|
||||
|
||||
// Drawing
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const cellSize = Math.max(1, Math.min(4, Math.floor(canvas.width / size)));
|
||||
const scaleX = canvas.width / size;
|
||||
const scaleY = canvas.height / size;
|
||||
|
||||
// Dynamic palette based on dryness
|
||||
const hue = 0; // Monochrome
|
||||
const saturation = 0;
|
||||
const brightness = 0.3 + 0.7 * grid[Math.floor(size*size/2)*4+2];
|
||||
|
||||
// Composite all channels
|
||||
for (let i = 0; i < size; i++) {
|
||||
for (let j = 0; j < size; j++) {
|
||||
const idx = (i * size + j) * 4;
|
||||
const u = grid[idx];
|
||||
const v = grid[idx+1];
|
||||
const energy = grid[idx+2];
|
||||
const age = grid[idx+3];
|
||||
|
||||
// Combined reaction value
|
||||
const reaction = Math.min(1, u * v * 10);
|
||||
const value = Math.max(0, Math.min(1, reaction + energy * 0.5));
|
||||
|
||||
// Fade with age if lifespan is low
|
||||
const alpha = params.lifespan > 0.5 ? 1 : 1 - (age / 150);
|
||||
|
||||
ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${Math.floor(value * 100 + 20 * energy)}%, ${alpha})`;
|
||||
ctx.fillRect(
|
||||
i * scaleX,
|
||||
j * scaleY,
|
||||
cellSize,
|
||||
cellSize
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Draw some loops/patterns (responding to topology.loops)
|
||||
if (time % 50 === 0) {
|
||||
const centerX = size / 2;
|
||||
const centerY = size / 2;
|
||||
const maxRadius = size / 3;
|
||||
const loops = Math.min(params.topology.loops / 100, 50);
|
||||
|
||||
for (let i = 0; i < loops; i++) {
|
||||
const angle = (time + i * 100) * 0.01;
|
||||
const radius = 0.3 * maxRadius + Math.sin(angle * 0.3) * 0.2 * maxRadius;
|
||||
const x = centerX + Math.cos(angle) * radius;
|
||||
const y = centerY + Math.sin(angle) * radius;
|
||||
const idx = (Math.floor(x) * size + Math.floor(y)) * 4;
|
||||
|
||||
ctx.fillStyle = `hsla(0, 0%, 100%, 0.1)`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
x * scaleX,
|
||||
y * scaleY,
|
||||
cellSize * 2,
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
step();
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
Loading…
Add table
Reference in a new issue