neurameba/drifting-gray-particulates-834a
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Drifting Gray Particulates

Browse source
This commit is contained in:
motd_admin 2026-07-21 05:47:20 +00:00
parent 50c9c153eb
commit 101696707b
1 changed files with 143 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
index.html Normal file
View file

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cellular Drift</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #0a0a0a;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
}
#attribution {
position: fixed;
bottom: 10px;
left: 10px;
color: #444;
font-size: 10px;
pointer-events: none;
z-index: 100;
}
</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 derived from input
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.06, min: 0.9, max: 1.2 },
tone: { anger: 0, sadness: 0, curiosity: 0.1, dryness: 0.9, playfulness: 0, tension: 0 }
};
// Derived settings
const gridSize = Math.max(20, Math.floor(20 * params.density));
const cellSize = Math.max(2, Math.floor(canvas.width / gridSize));
const cols = Math.ceil(canvas.width / cellSize);
const rows = Math.ceil(canvas.height / cellSize);
// Cell states: 0=dead, 1=alive (initially random)
const grid = Array(rows).fill().map(() => Array(cols).fill().map(() => Math.random() > 0.7 ? 1 : 0));
const nextGrid = Array(rows).fill().map(() => Array(cols).fill(0));
// Palette based on tone
const palette = params.tone.dryness > 0.7 ?
[ '#f0f0f0', '#d0d0d0', '#a0a0a0', '#707070' ] :
[ '#e0e0e0', '#c0c0c0', '#909090', '#606060' ];
// Animation state
let frameCount = 0;
const ruleSet = [1, 0, 1, 0, 0, 1, 0, 0]; // Custom rule pattern
function updateGrid() {
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
// Count live neighbors
let neighbors = 0;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
if (dx === 0 && dy === 0) continue;
const nx = x + dx;
const ny = y + dy;
if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
neighbors += grid[ny][nx];
}
}
}
// Apply rule
const idx = neighbors;
nextGrid[y][x] = ruleSet[idx] ? 1 : 0;
// Morphing based on complexity
if (params.complexity > 0.3 && Math.random() < params.complexity * 0.02) {
nextGrid[y][x] = grid[y][x] ? 0 : 1;
}
}
}
// Swap grids
[grid, nextGrid].forEach(arr => arr.forEach(row => row.fill(0)));
grid.forEach((row, y) => row.forEach((_, x) => grid[y][x] = nextGrid[y][x]));
}
function drawGrid() {
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
if (grid[y][x]) {
const size = cellSize * (0.3 + 0.7 * params.pulse.avg * (1 + Math.sin(frameCount * params.motion * 0.05) * 0.1));
const colorIdx = Math.floor(params.tone.dryness * (palette.length - 1));
ctx.fillStyle = palette[colorIdx];
ctx.beginPath();
ctx.arc(
x * cellSize + cellSize/2,
y * cellSize + cellSize/2,
size/2,
0,
Math.PI * 2
);
ctx.fill();
}
}
}
}
function animate() {
frameCount++;
updateGrid();
drawGrid();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>