neurameba/fractal-drift-in-monochrome-kfbh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractal Drift in Monochrome

Browse source
This commit is contained in:
motd_admin 2026-08-01 22:21:18 +00:00
parent 4a475e877a
commit f03fbe4bea
1 changed files with 148 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
index.html Normal file
View file

@ -0,0 +1,148 @@
<!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>