neurameba/pulsing-strange-abyss-4pyf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Pulsing Strange Abyss

Browse source
This commit is contained in:
motd_admin 2026-07-31 02:21:21 +00:00
parent 576e14b2c8
commit faa8b20c5d
1 changed files with 133 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
index.html Normal file
View file

@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neurameba Strange Attractor</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #0a0a0a;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 20px;
left: 20px;
color: #444;
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();
// Strange attractor parameters
let points = [];
let time = 0;
const pulse = { avg: 1.12, min: 0.90, max: 1.30 };
function initAttractor() {
points = [];
for (let i = 0; i < 100; i++) {
points.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: 0,
vy: 0
});
}
}
function updateAttractor() {
const attractor = {
a: 1.4 + 0.5 * (Math.sin(time * 0.05) * pulse.min + Math.cos(time * 0.03) * pulse.max),
b: 2.0 + 0.5 * (Math.sin(time * 0.07) * pulse.max + Math.cos(time * 0.04) * pulse.min),
c: 0.9 - 0.2 * (Math.sin(time * 0.06) * pulse.avg),
d: 2.0 + 0.5 * (Math.cos(time * 0.08) * pulse.max)
};
points.forEach(p => {
const x = p.x - canvas.width / 2;
const y = p.y - canvas.height / 2;
const newX = Math.sin(attractor.a * y) - Math.cos(attractor.b * x);
const newY = Math.sin(attractor.c * x) - Math.cos(attractor.d * y);
p.vx += newX * 0.1 * (0.5 + 0.5 * pulse.avg);
p.vy += newY * 0.1 * (0.5 + 0.5 * pulse.avg);
p.vx *= 0.95;
p.vy *= 0.95;
p.x += p.vx;
p.y += p.vy;
p.x = (p.x + canvas.width) % canvas.width;
p.y = (p.y + canvas.height) % canvas.height;
});
time += 0.01;
}
function drawAttractor() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Fade trails
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'source-over';
// Draw points
points.forEach(p => {
const hue = (180 + Math.sin(time * 0.1) * 30) % 360;
const saturation = 80 + Math.sin(time * 0.2) * 20;
const lightness = 60 + Math.cos(time * 0.15) * 10;
const alpha = 0.7 + Math.sin(time * 0.08) * 0.3;
ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
ctx.beginPath();
ctx.arc(p.x, p.y, 1.5 + 0.5 * Math.sin(time * 0.3), 0, Math.PI * 2);
ctx.fill();
});
}
function animate() {
updateAttractor();
drawAttractor();
requestAnimationFrame(animate);
}
initAttractor();
animate();
// Handle window focus/blur for performance
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
points.forEach(p => {
p.vx *= 0.9;
p.vy *= 0.9;
});
}
});
</script>
</body>
</html>