birth: Teal Pulse Nebula
This commit is contained in:
parent
18e412121d
commit
b431e6462a
1 changed files with 221 additions and 0 deletions
221
index.html
Normal file
221
index.html
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue