birth: Entropic Choreography of Strange

This commit is contained in:
motd_admin 2026-03-25 21:42:26 +00:00
parent 5b616f22ef
commit 0953ef3994

139
index.html Normal file
View file

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neurameba Motion</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #0a0a0a;
color: #ccc;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 10px;
opacity: 0.5;
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 resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
// Strange attractor parameters (Rössler attractor variation)
let params = {
a: 0.2,
b: 0.2,
c: 5.7,
dt: 0.05,
hue: 0
};
// Particle system-like trails
const particles = [];
const maxParticles = Math.floor(150 + 500 * 0.5); // density-based
function init() {
for (let i = 0; i < maxParticles; i++) {
particles.push({
x: 0,
y: 0,
z: 0,
trail: []
});
}
}
function attractor(x, y, z) {
const a = params.a + (Math.random() * 0.1 - 0.05);
const b = params.b + (Math.random() * 0.1 - 0.05);
const c = params.c;
const dx = -y - z;
const dy = x + a * y;
const dz = b + z * (x - c);
return { x: x + dx * params.dt, y: y + dy * params.dt, z: z + dz * params.dt };
}
function draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update attractor parameters with motion
params.a = 0.2 + Math.sin(Date.now() * 0.0005) * 0.1 * 0.5;
params.b = 0.2 + Math.cos(Date.now() * 0.0007) * 0.1 * 0.5;
params.c = 5.7 + Math.sin(Date.now() * 0.0003) * 0.5 * 0.5;
// Update particles
particles.forEach((p, i) => {
const next = attractor(p.x, p.y, p.z);
p.x = next.x;
p.y = next.y;
p.z = next.z;
// Add to trail
p.trail.push({
x: p.x * 20 + canvas.width * 0.5,
y: p.y * 20 + canvas.height * 0.5,
age: 0
});
if (p.trail.length > 50) p.trail.shift();
});
// Draw trails
particles.forEach((p, i) => {
p.trail.forEach((point, j) => {
const age = point.age / 50;
const size = Math.max(0.1, (1 - age) * (0.5 + 0.5 * Math.random()));
const opacity = (1 - age) * 0.8;
const hue = (params.hue + i * 0.1) % 360;
ctx.strokeStyle = `hsla(${hue}, 5%, ${95 - age * 30}%, ${opacity})`;
ctx.lineWidth = size;
ctx.beginPath();
ctx.moveTo(point.x, point.y);
if (j > 0) {
const prev = p.trail[j - 1];
ctx.lineTo(prev.x, prev.y);
}
ctx.stroke();
point.age++;
});
});
// Update hue slowly
params.hue = (params.hue + 0.05) % 360;
}
function animate() {
draw();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>