neurameba/sparse-cellular-dreaming-xyyh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Sparse Cellular Dreaming

Browse source
This commit is contained in:
motd_admin 2026-08-08 18:21:20 +00:00
parent 0c47a6e89e
commit 191441b8a9
1 changed files with 167 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
index.html Normal file
View file

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cellular Nebula</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #0a0a0a;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
}
#attr {
position: fixed;
bottom: 10px;
left: 10px;
color: #333;
font-size: 10px;
opacity: 0.5;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="attr">neurameba · motd.social</div>
<script>
const canvas = document.getElementById('c');
const c = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
function lerp(a, b, t) { return a + (b - a) * t; }
const Motion = 0.5;
const Density = 0.5;
const Complexity = 0.5;
const Connectedness = 0.5;
const Lifespan = 0.5;
const PulseAvg = 1.09;
const PulseMin = 0.95;
const PulseMax = 1.25;
const Dryness = 0.9;
function generatePalette() {
const baseHue = 0;
const saturation = Dryness > 0.7 ? lerp(10, 30, 1 - Dryness) : 60;
const lightness = 5 + lerp(5, 15, Lifespan);
return `hsl(${baseHue}, ${saturation}%, ${lightness}%)`;
}
const palette = generatePalette();
class Cell {
constructor(x, y, type) {
this.x = x;
this.y = y;
this.type = type;
this.nextType = type;
this.age = 0;
this.energy = 0;
this.targetEnergy = 0;
this.velocity = { x: 0, y: 0 };
}
update() {
this.age++;
this.energy = lerp(this.energy, this.targetEnergy, 0.1);
if (Complexity > 0.3 && Math.random() < 0.05 * Motion) {
this.nextType = (this.type + 1) % 4;
}
const neighbors = this.getNeighbors();
if (neighbors.length > 0 && Connectedness > 0.3) {
const avgType = neighbors.reduce((sum, cell) => sum + cell.type, 0) / neighbors.length;
this.nextType = Math.floor(avgType);
}
if (Motion > 0.3) {
this.velocity.x += (Math.random() - 0.5) * Motion * 0.2;
this.velocity.y += (Math.random() - 0.5) * Motion * 0.2;
this.velocity.x *= 0.8;
this.velocity.y *= 0.8;
this.x += this.velocity.x;
this.y += this.velocity.y;
}
if (Density > 0.7 && Math.random() < 0.02) {
this.targetEnergy = this.energy > 0 ? 0 : Math.random() > 0.5 ? 1 : 0;
}
}
getNeighbors() {
const neighbors = [];
const radius = 20 * (1 - Density);
for (let i = 0; i < cells.length; i++) {
const dx = cells[i].x - this.x;
const dy = cells[i].y - this.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < radius && dist > 0) {
neighbors.push(cells[i]);
}
}
return neighbors;
}
draw() {
const size = lerp(1, 5, this.energy);
const alpha = lerp(0.5, 1, this.energy);
c.fillStyle = `${palette}ee`;
c.beginPath();
c.arc(this.x, this.y, size, 0, Math.PI * 2);
c.fill();
}
}
let cells = [];
function initCells() {
cells = [];
const count = 200 + Math.floor(Density * 800);
for (let i = 0; i < count; i++) {
cells.push(new Cell(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.floor(Math.random() * 4)
));
}
}
function updateCells() {
for (let i = 0; i < cells.length; i++) {
cells[i].update();
cells[i].type = cells[i].nextType;
cells[i].targetEnergy = Math.random() < 0.01 * PulseAvg ? Math.random() : cells[i].targetEnergy;
}
}
function drawCells() {
c.fillStyle = '#0a0a0a11';
c.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < cells.length; i++) {
cells[i].draw();
}
}
function animate() {
updateCells();
drawCells();
requestAnimationFrame(animate);
}
initCells();
animate();
</script>
</body>
</html>