neurameba/fractal-uncertainty-veins-6x3c
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractal Uncertainty Veins

Browse source
This commit is contained in:
motd_admin 2026-09-05 02:21:18 +00:00
parent 1a00d394d3
commit e5b925bd39
1 changed files with 136 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
index.html Normal file
View file

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strange Attractor</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 10px;
right: 10px;
color: #333;
font-family: monospace;
font-size: 10px;
opacity: 0.5;
}
</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
const params = {
a: 1.5,
b: 0.5,
c: 1.0,
d: 0.1,
e: 1.0,
scale: 100,
hue: 0,
hueSpeed: 0.01,
motion: 0.5,
density: 0.5,
connectedness: 0.5,
pointSize: 2 * (0.5 + 0.5 * Math.random())
};
let time = 0;
const points = [];
// Generate initial points
for (let i = 0; i < 100 * params.density; i++) {
points.push({
x: Math.random() * 2 - 1,
y: Math.random() * 2 - 1,
z: Math.random() * 2 - 1,
trail: []
});
}
function draw() {
// Clear with dark background
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update time with pulse variation
const pulse = 1.0 + (Math.sin(time * 0.001) * 0.05);
time += 0.5 * params.motion * pulse;
// Update and draw points
ctx.strokeStyle = `hsl(${params.hue}, 70%, 80%)`;
ctx.lineWidth = params.pointSize;
points.forEach(point => {
// Strange Attractor equations (Thomas attractor)
const x = point.x;
const y = point.y;
const z = point.z;
const dx = -y - x * x * x + params.a * x + params.b * Math.sin(time * 0.001);
const dy = -z - y * y * y + params.c * y;
const dz = -x - z * z * z + params.d * z;
point.x += dx * 0.01 * params.connectedness;
point.y += dy * 0.01 * params.connectedness;
point.z += dz * 0.01 * params.connectedness;
// Store trail
point.trail.push({
x: point.x,
y: point.y
});
// Limit trail length
if (point.trail.length > 20 * params.connectedness) {
point.trail.shift();
}
// Draw trail
ctx.beginPath();
point.trail.forEach((pos, i) => {
const alpha = i / point.trail.length;
ctx.globalAlpha = alpha * alpha * 0.5;
ctx.lineTo(
canvas.width/2 + pos.x * params.scale * (0.5 + 0.5 * params.density),
canvas.height/2 + pos.y * params.scale * (0.5 + 0.5 * params.density)
);
});
ctx.stroke();
ctx.globalAlpha = 1;
});
// Update hue for color variation
params.hue = (params.hue + params.hueSpeed) % 360;
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>