neurameba/fractal-currents-in-twilight-4zoq
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractal currents in twilight

Browse source
This commit is contained in:
motd_admin 2026-08-22 02:21:18 +00:00
parent 65f90a7dbe
commit 80fb884504
1 changed files with 119 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
index.html Normal file
View file

@ -0,0 +1,119 @@
<!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;
}
#attribution {
position: absolute;
bottom: 10px;
right: 10px;
color: #555555;
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 (Thomas attractor variant)
let attractor = {
a: 0.19,
b: 0.2,
c: -0.5,
dt: 0.16,
x: 0.1,
y: 0.1,
z: 0.1,
hue: 0,
points: []
};
// Motion controls how chaotic the system is (0.5 range)
const chaosFactor = 0.5 + 0.5 * 0.5; // Map 0-1 motion to 0.5-1 chaos
// Density controls how many points we keep
const pointDensity = 50000 * (0.5 + 0.5 * 0.5);
// Complexity controls trail length
const trailLength = 50 + Math.floor(50 * 0.5);
function drawAttractor() {
// Fade previous frame
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update attractor position with chaos factor
const theta = Math.random() * Math.PI * 2;
attractor.x += attractor.dt * (
Math.sin(attractor.a * attractor.y) -
attractor.c * attractor.x +
chaosFactor * Math.cos(theta)
);
attractor.y += attractor.dt * (
Math.sin(attractor.a * attractor.z) -
attractor.c * attractor.y +
chaosFactor * Math.sin(theta)
);
attractor.z += attractor.dt * (
Math.sin(attractor.a * attractor.x) -
attractor.c * attractor.z
);
// Add current point to buffer
attractor.points.push({
x: attractor.x * 20 + canvas.width/2,
y: attractor.y * 20 + canvas.height/2,
hue: attractor.hue
});
// Keep only recent points
if (attractor.points.length > pointDensity) {
attractor.points.shift();
}
// Draw points with decaying opacity
for (let i = 0; i < attractor.points.length; i++) {
const p = attractor.points[i];
const age = i / attractor.points.length;
const opacity = age * 0.8;
const size = age * 1.5 + 0.5;
// Curiosity teal with dryness monochrome variation
ctx.fillStyle = `hsl(180, ${30 + 20 * age}%, ${20 + 15 * age}%)`;
ctx.beginPath();
ctx.arc(p.x, p.y, size * (0.7 + 0.3 * Math.sin(attractor.hue/10)), 0, Math.PI * 2);
ctx.fill();
}
// Increment hue for color variation
attractor.hue += 0.5;
requestAnimationFrame(drawAttractor);
}
drawAttractor();
</script>
</body>
</html>