birth: Static Pulse Gardens

This commit is contained in:
motd_admin 2026-05-03 05:47:18 +00:00
parent c9a2dc8334
commit dcdf37d87f

138
index.html Normal file
View file

@ -0,0 +1,138 @@
<!DOCTYPE html>
<html>
<head>
<title>Chaos Bloom</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: absolute;
bottom: 10px;
color: #444;
font-size: 10px;
user-select: 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();
// Parameters
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.1, min: 0.9, max: 1.2 },
tone: { anger: 0, sadness: 0, curiosity: 0, dryness: 0.8, playfulness: 0.1, tension: 0 },
palette: { dryness: '#ddd', playfulness: '#aaffaa' }
};
// Cellular automaton grid
const gridSize = 30;
const cellSize = Math.min(20, Math.max(5, canvas.width / gridSize / 2));
const cols = Math.floor(canvas.width / cellSize);
const rows = Math.floor(canvas.height / cellSize);
let grid = Array(rows).fill().map(() => Array(cols).fill(0));
// Initialize with some cells alive
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
grid[i][j] = Math.random() > 0.7 ? 1 : 0;
}
}
// Pulse effect
let pulsePhase = 0;
function updateGrid() {
pulsePhase += 0.005 * (params.pulse.avg + Math.sin(Date.now() * 0.001) * 0.05);
const pulseValue = params.pulse.min + (params.pulse.max - params.pulse.min) * (0.5 + 0.5 * Math.sin(pulsePhase));
const newGrid = Array(rows).fill().map(() => Array(cols).fill(0));
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const neighbors = [
grid[(i-1+rows)%rows][(j-1+cols)%cols],
grid[(i-1+rows)%rows][j],
grid[(i-1+rows)%rows][(j+1)%cols],
grid[i][(j-1+cols)%cols],
grid[i][(j+1)%cols],
grid[(i+1)%rows][(j-1+cols)%cols],
grid[(i+1)%rows][j],
grid[(i+1)%rows][(j+1)%cols]
].reduce((a,b) => a+b, 0);
// Modified Conway's rules with pulse influence
if (grid[i][j] === 1) {
newGrid[i][j] = neighbors >= 2 && neighbors <= 3 ? 1 : 0;
} else {
newGrid[i][j] = neighbors === 3 ? 1 : 0;
}
}
}
grid = newGrid;
}
function draw() {
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw cells
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
if (grid[i][j] > 0) {
const x = j * cellSize;
const y = i * cellSize;
const size = cellSize * (0.5 + 0.5 * Math.min(params.complexity, 0.8));
const alpha = grid[i][j] * (0.3 + 0.7 * params.dryness);
const hue = 0; // grayscale
const saturation = 0;
const lightness = 50 + 30 * Math.sin(Date.now() * 0.002 + i * 0.1 + j * 0.1);
ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
ctx.globalAlpha = alpha;
ctx.fillRect(x, y, size, size);
}
}
}
ctx.globalAlpha = 1;
updateGrid();
}
function animate() {
draw();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>