148 lines
No EOL
4.4 KiB
HTML
148 lines
No EOL
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fractal Drift</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background-color: #0a0a0a;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #333;
|
|
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();
|
|
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
tone: { dryness: 0.9 }
|
|
};
|
|
|
|
const nodes = [];
|
|
const maxDepth = 3 + Math.floor(params.complexity * 3);
|
|
const branchCount = 3 + Math.floor(params.connectedness * 5);
|
|
const thickness = 1 + Math.floor(params.density * 3);
|
|
|
|
// Initialize the root node
|
|
nodes.push({
|
|
x: canvas.width / 2,
|
|
y: canvas.height / 2,
|
|
size: thickness,
|
|
depth: 0,
|
|
angle: 0,
|
|
branches: [],
|
|
life: 1
|
|
});
|
|
|
|
// Recursively build the fractal
|
|
function buildFractal(node) {
|
|
if (node.depth >= maxDepth) return;
|
|
|
|
const branchLength = 50 / (1 + node.depth * params.motion * 1.5);
|
|
const spread = Math.PI * (0.2 + params.connectedness * 0.5);
|
|
|
|
for (let i = 0; i < branchCount; i++) {
|
|
const angle = node.angle + spread * (i / branchCount - 0.5);
|
|
const endX = node.x + Math.cos(angle) * branchLength * (0.7 + Math.random() * 0.6);
|
|
const endY = node.y + Math.sin(angle) * branchLength * (0.7 + Math.random() * 0.6);
|
|
|
|
node.branches.push({
|
|
x: endX,
|
|
y: endY,
|
|
size: Math.max(0.5, node.size * (0.7 - params.motion * 0.3)),
|
|
depth: node.depth + 1,
|
|
angle,
|
|
branches: [],
|
|
life: 1
|
|
});
|
|
}
|
|
|
|
node.branches.forEach(buildFractal);
|
|
}
|
|
|
|
buildFractal(nodes[0]);
|
|
|
|
// Animation variables
|
|
let time = 0;
|
|
const pulseSpeed = 1.08;
|
|
const pulseVariation = 0.02;
|
|
|
|
function animate() {
|
|
time += 0.01;
|
|
|
|
// Clear with slight fade
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Adjust for pulse
|
|
const pulse = pulseSpeed + pulseVariation * Math.sin(time * 2);
|
|
const scale = 1 + 0.1 * (params.motion * 0.5 + 0.5) * pulse;
|
|
|
|
// Draw fractal
|
|
drawFractal(nodes[0], canvas.width/2, canvas.height/2, scale);
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
function drawFractal(node, startX, startY, scale) {
|
|
// Fade out older branches
|
|
node.life *= 0.99;
|
|
if (node.life < 0.01) return;
|
|
|
|
const currentSize = node.size * scale * node.life;
|
|
const gradient = ctx.createLinearGradient(startX, startY, node.x, node.y);
|
|
gradient.addColorStop(0, `rgba(255, 255, 255, ${node.life * 0.8})`);
|
|
gradient.addColorStop(1, `rgba(200, 200, 200, ${node.life * 0.3})`);
|
|
|
|
ctx.strokeStyle = gradient;
|
|
ctx.lineWidth = currentSize;
|
|
ctx.lineCap = 'round';
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX, startY);
|
|
ctx.lineTo(node.x, node.y);
|
|
ctx.stroke();
|
|
|
|
if (node.branches.length === 0) return;
|
|
|
|
node.branches.forEach(branch => {
|
|
drawFractal(branch, node.x, node.y, scale);
|
|
});
|
|
}
|
|
|
|
setTimeout(() => {
|
|
requestAnimationFrame(animate);
|
|
}, 100);
|
|
</script>
|
|
</body>
|
|
</html> |