221 lines
No EOL
7.7 KiB
HTML
221 lines
No EOL
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Diffusion Nebula</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #0a0a0a;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
font-family: monospace;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: rgba(255, 255, 255, 0.3);
|
|
font-size: 10px;
|
|
pointer-events: none;
|
|
}
|
|
</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');
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
window.addEventListener('resize', resizeCanvas);
|
|
resizeCanvas();
|
|
|
|
// Reaction-diffusion parameters derived from organism metrics
|
|
const params = {
|
|
feedRate: 0.05, // 0.48 pulse average mapped
|
|
killRate: 0.062, // inverted mortality (1-lifespan=0.514)
|
|
diffusionA: 0.16, // moderate motion/connectivity
|
|
diffusionB: 0.08, // sparse density compensation
|
|
initRadius: 0.15, // moderate organism size
|
|
colorScheme: {
|
|
r: 100, g: 200, b: 255 // teal (curiosity dominant)
|
|
},
|
|
paletteVariation: 40, // dryness monochrome variation
|
|
timeScale: 0.00005 // moderate speed (motion=0.574)
|
|
};
|
|
|
|
// Simulation grid
|
|
const size = 128;
|
|
const grid = new Array(size).fill().map(() => new Array(size).fill(0));
|
|
const nextGrid = new Array(size).fill().map(() => new Array(size).fill(0));
|
|
|
|
// Initialize with organism clusters
|
|
function initialize() {
|
|
const center = size / 2;
|
|
for (let i = 0; i < size; i++) {
|
|
for (let j = 0; j < size; j++) {
|
|
const dist = Math.sqrt((i - center) ** 2 + (j - center) ** 2) / center;
|
|
grid[i][j] = (1 - dist) * 0.5 * (Math.random() * 0.3 + 0.2);
|
|
}
|
|
}
|
|
// Add some randomness for complexity
|
|
for (let i = 0; i < size * 0.4; i++) {
|
|
const x = Math.floor(Math.random() * size);
|
|
const y = Math.floor(Math.random() * size);
|
|
grid[x][y] = 1;
|
|
}
|
|
}
|
|
|
|
// Reaction-diffusion kernel
|
|
function step() {
|
|
for (let x = 0; x < size; x++) {
|
|
for (let y = 0; y < size; y++) {
|
|
const cell = grid[x][y];
|
|
const neighbors = countNeighbors(x, y);
|
|
const laplace = (neighbors / 4) - cell;
|
|
|
|
nextGrid[x][y] = cell +
|
|
(params.diffusionA * laplace -
|
|
params.feedRate * cell * (cell - 1 + params.killRate * (cell - 0.5))) *
|
|
params.timeScale;
|
|
nextGrid[x][y] = Math.min(1, Math.max(0, nextGrid[x][y]));
|
|
}
|
|
}
|
|
|
|
// Swap grids
|
|
const temp = grid;
|
|
grid.length = 0;
|
|
grid.push(...nextGrid.map(row => [...row]));
|
|
nextGrid.length = 0;
|
|
nextGrid.push(...temp.map(row => [...row]));
|
|
}
|
|
|
|
function countNeighbors(x, y) {
|
|
let sum = 0;
|
|
for (let i = -1; i <= 1; i++) {
|
|
for (let j = -1; j <= 1; j++) {
|
|
if (i === 0 && j === 0) continue;
|
|
const nx = (x + i + size) % size;
|
|
const ny = (y + j + size) % size;
|
|
sum += grid[nx][ny];
|
|
}
|
|
}
|
|
return sum;
|
|
}
|
|
|
|
// Color palette based on tone parameters
|
|
function getColor(value) {
|
|
const hue = 180 + (value * 60); // 180-240 (teals/cyans)
|
|
const saturation = 70 + (value * 20);
|
|
const lightness = 50 + (value * 10);
|
|
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
|
}
|
|
|
|
// Drawing with fractal elements
|
|
function draw() {
|
|
ctx.globalAlpha = 0.8;
|
|
ctx.fillStyle = '#050505';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const cellWidth = canvas.width / size;
|
|
const cellHeight = canvas.height / size;
|
|
|
|
// Draw diffusion field
|
|
for (let x = 0; x < size; x++) {
|
|
for (let y = 0; y < size; y++) {
|
|
const value = grid[x][y];
|
|
if (value > 0.01) {
|
|
const color = getColor(value);
|
|
ctx.fillStyle = color;
|
|
ctx.globalAlpha = value * 0.6;
|
|
|
|
// Add some complexity with small variations
|
|
const xPos = x * cellWidth + (Math.random() - 0.5) * cellWidth * 0.2;
|
|
const yPos = y * cellHeight + (Math.random() - 0.5) * cellHeight * 0.2;
|
|
|
|
// Draw connected patches
|
|
if (value > 0.3) {
|
|
ctx.beginPath();
|
|
ctx.arc(xPos + cellWidth/2, yPos + cellHeight/2,
|
|
cellWidth * (0.5 + value * 0.3), 0, Math.PI * 2);
|
|
ctx.fill();
|
|
} else {
|
|
ctx.fillRect(xPos, yPos, cellWidth * 0.8, cellHeight * 0.8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw some loop formations (from loops count)
|
|
ctx.globalAlpha = 0.3;
|
|
ctx.strokeStyle = '#ffffff';
|
|
ctx.lineWidth = 1;
|
|
for (let i = 0; i < size * 0.2; i++) {
|
|
const x = Math.floor(Math.random() * size);
|
|
const y = Math.floor(Math.random() * size);
|
|
if (grid[x][y] > 0.2) {
|
|
drawSpiral(x * cellWidth + cellWidth/2,
|
|
y * cellHeight + cellHeight/2,
|
|
cellWidth * 2);
|
|
}
|
|
}
|
|
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
|
|
function drawSpiral(cx, cy, radius) {
|
|
ctx.beginPath();
|
|
for (let i = 0; i < 20; i++) {
|
|
const angle = (i / 20) * Math.PI * 8;
|
|
const x = cx + Math.cos(angle) * radius * (i / 20);
|
|
const y = cy + Math.sin(angle) * radius * (i / 20) * 0.7;
|
|
ctx.lineTo(x, y);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Animation loop
|
|
let lastTime = 0;
|
|
function animate(time) {
|
|
if (!lastTime) lastTime = time;
|
|
const delta = time - lastTime;
|
|
lastTime = time;
|
|
|
|
// Adjust speed based on pulse
|
|
params.timeScale = 0.00005 + (Math.sin(time * 0.0001) * 0.00002);
|
|
|
|
step();
|
|
draw();
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
initialize();
|
|
animate();
|
|
|
|
// Touch interaction for playfulness
|
|
canvas.addEventListener('mousemove', (e) => {
|
|
const x = Math.floor((e.clientX / canvas.width) * size);
|
|
const y = Math.floor((e.clientY / canvas.height) * size);
|
|
if (x >= 0 && x < size && y >= 0 && y < size) {
|
|
grid[x][y] = 1;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |