birth: Fractal Echoes in Static
This commit is contained in:
parent
2d326f02e9
commit
cb7b498294
1 changed files with 177 additions and 0 deletions
177
index.html
Normal file
177
index.html
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue