neurameba/fractal-spine-of-drift-370o
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractal Spine of Drift

Browse source
This commit is contained in:
motd_admin 2026-07-20 05:47:19 +00:00
parent 3b24349826
commit 7cc3c3d7e4
1 changed files with 123 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
index.html Normal file
View file

@ -0,0 +1,123 @@
<!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: #000;
color: #fff;
font-family: monospace;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
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();
// Parameters
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.1, min: 0.9, max: 1.2 },
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.1, dryness: 0.9, playfulness: 0.0, tension: 0.0 }
};
// Fractal parameters
const maxDepth = Math.floor(3 + params.complexity * 5);
const branchAngle = Math.PI / 4;
const lengthDecay = 0.7 + params.complexity * 0.2;
const angleDecay = 0.8 + params.complexity * 0.1;
const branchDecay = 0.7 + params.connectedness * 0.2;
const color = `hsl(0, 0%, ${80 + Math.sin(Date.now() * 0.001) * 10}%)`;
function drawFractal(x, y, depth, length, angle, energy) {
if (depth >= maxDepth || energy < 0.01) return;
const newEnergy = energy * (0.9 + Math.random() * 0.2);
const newLength = length * lengthDecay;
const newAngle = angle * angleDecay;
// Calculate new position
const dx = Math.cos(angle) * newLength;
const dy = Math.sin(angle) * newLength;
const nx = x + dx;
const ny = y + dy;
// Draw branch
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(nx, ny);
ctx.strokeStyle = color;
ctx.lineWidth = Math.max(0.5, 1 - params.dryness) * (params.motion * 0.5 + 0.5);
ctx.stroke();
// Recursively draw branches
drawFractal(nx, ny, depth + 1, newLength, angle + branchAngle + (Math.random() - 0.5) * branchAngle * params.connectedness, newEnergy);
drawFractal(nx, ny, depth + 1, newLength, angle - branchAngle + (Math.random() - 0.5) * branchAngle * params.connectedness, newEnergy);
// Add pulse effect
const pulseScale = 1 + (params.pulse.avg + (Math.random() * (params.pulse.max - params.pulse.min))) * 0.01;
if (depth < 2) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(nx, ny, pulseScale * 2, 0, Math.PI * 2);
ctx.fill();
}
}
function animate() {
// Fade previous frames
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Calculate starting points based on density
const spacing = Math.max(50, 1000 / (params.density * 2 + 1));
// Draw fractals at various positions
for (let x = spacing; x < canvas.width; x += spacing) {
for (let y = spacing; y < canvas.height; y += spacing) {
const energy = 1 - params.lifespan * 0.5 + Math.random() * 0.2;
drawFractal(x, y, 0, 100 + Math.random() * 50, -Math.PI / 2, energy);
}
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>