177 lines
No EOL
5.8 KiB
HTML
177 lines
No EOL
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Generative Fractal Bloom</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
font-family: monospace;
|
|
}
|
|
#canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
</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();
|
|
|
|
// Fractal parameters derived from input
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
pulse: 1.08
|
|
};
|
|
|
|
// Fractal generation state
|
|
const fractals = [];
|
|
const maxDepth = Math.floor(params.complexity * 8) + 2;
|
|
const baseSize = canvas.width * 0.05;
|
|
const fractalCount = Math.floor(params.density * 50) + 1;
|
|
|
|
// Initialize fractals
|
|
for (let i = 0; i < fractalCount; i++) {
|
|
fractals.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
depth: 0,
|
|
targetDepth: Math.floor(Math.random() * maxDepth) + 2,
|
|
angle: Math.random() * Math.PI * 2,
|
|
rotationSpeed: (Math.random() - 0.5) * 0.01 * params.motion,
|
|
color: Math.floor(Math.random() * 30 + 20),
|
|
thickness: params.density * 2 + 0.5,
|
|
growthSpeed: (Math.random() * 0.02 + 0.01) * params.motion,
|
|
pulse: 1 + (Math.random() * 0.05 - 0.025) * params.pulse
|
|
});
|
|
}
|
|
|
|
// Recursive fractal drawing
|
|
function drawFractal(x, y, angle, depth, maxDepth, thickness, pulse, color) {
|
|
if (depth > maxDepth) return;
|
|
|
|
const length = baseSize * Math.pow(0.6, depth) * pulse;
|
|
const endX = x + Math.cos(angle) * length;
|
|
const endY = y + Math.sin(angle) * length;
|
|
|
|
// Set color based on depth and parameters
|
|
const hue = 30 * color + depth * 5;
|
|
const saturation = 70 + depth * 5;
|
|
const lightness = 30 + depth * 2;
|
|
const alpha = params.lifespan * 0.7 + 0.1;
|
|
|
|
ctx.strokeStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
|
|
ctx.lineWidth = thickness * (1 - depth / maxDepth);
|
|
ctx.lineCap = 'round';
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(endX, endY);
|
|
ctx.stroke();
|
|
|
|
// Recursive branches
|
|
const branches = 2 + Math.floor(params.connectedness * (4 + Math.random() * 3));
|
|
for (let i = 0; i < branches; i++) {
|
|
const branchAngle = angle + (Math.random() - 0.5) * Math.PI * params.motion;
|
|
drawFractal(
|
|
endX, endY,
|
|
branchAngle,
|
|
depth + 1,
|
|
maxDepth,
|
|
thickness * 0.8,
|
|
pulse * params.pulse,
|
|
color * 0.9
|
|
);
|
|
}
|
|
}
|
|
|
|
// Starfield background
|
|
function drawStarfield() {
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Add some static stars
|
|
for (let i = 0; i < 200; i++) {
|
|
ctx.fillStyle = `hsl(0, 0%, ${Math.random() * 100}%)`;
|
|
ctx.beginPath();
|
|
ctx.arc(
|
|
Math.random() * canvas.width,
|
|
Math.random() * canvas.height,
|
|
Math.random() * 2,
|
|
0,
|
|
Math.PI * 2
|
|
);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
// Animation loop
|
|
function animate() {
|
|
drawStarfield();
|
|
|
|
fractals.forEach(fractal => {
|
|
// Update position
|
|
fractal.x += Math.cos(fractal.angle) * fractal.growthSpeed;
|
|
fractal.y += Math.sin(fractal.angle) * fractal.growthSpeed;
|
|
fractal.angle += fractal.rotationSpeed;
|
|
|
|
// Bounce at edges
|
|
if (fractal.x < 0 || fractal.x > canvas.width) fractal.angle = Math.PI - fractal.angle;
|
|
if (fractal.y < 0 || fractal.y > canvas.height) fractal.angle = -fractal.angle;
|
|
|
|
// Draw fractal
|
|
drawFractal(
|
|
fractal.x,
|
|
fractal.y,
|
|
fractal.angle,
|
|
0,
|
|
fractal.targetDepth,
|
|
fractal.thickness,
|
|
fractal.pulse,
|
|
fractal.color
|
|
);
|
|
|
|
// Reset if far from center
|
|
if (Math.abs(fractal.x - canvas.width/2) > canvas.width ||
|
|
Math.abs(fractal.y - canvas.height/2) > canvas.height) {
|
|
fractal.x = canvas.width/2;
|
|
fractal.y = canvas.height/2;
|
|
}
|
|
});
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |