neurameba/fractal-breath-of-time-5klg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractal Breath of Time

Browse source
This commit is contained in:
motd_admin 2026-09-12 06:21:19 +00:00
parent 464de9a40e
commit 36a1e9b327
1 changed files with 160 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
index.html Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neurameba · motd.social</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #0a0a0a;
font-family: 'Courier New', monospace;
color: #555;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 10px;
font-size: 10px;
pointer-events: none;
}
</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();
// L-system parameters
const params = {
axiom: 'F',
rules: {
'F': 'F[+F]F[-F]F'
},
iterations: 4,
angle: Math.PI / 7,
length: 120,
lengthDecay: 0.7,
initialX: canvas.width / 2,
initialY: canvas.height,
color: '#44cccc',
strokeWidth: 1.5,
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5
};
// Generate L-system string
function generateLSystem(axiom, rules, iterations) {
let current = axiom;
for (let i = 0; i < iterations; i++) {
let next = '';
for (const c of current) {
next += rules[c] || c;
}
current = next;
}
return current;
}
// Draw L-system turtle
function drawLSystem(ctx, str, params, x, y, angle, length) {
const stack = [];
let currentX = x;
let currentY = y;
let currentAngle = angle;
let currentLength = length;
ctx.beginPath();
ctx.moveTo(currentX, currentY);
for (const c of str) {
switch (c) {
case 'F':
currentX += Math.sin(currentAngle) * currentLength;
currentY -= Math.cos(currentAngle) * currentLength;
ctx.lineTo(currentX, currentY);
break;
case '+':
currentAngle += params.angle * (0.5 + 0.5 * params.motion);
break;
case '-':
currentAngle -= params.angle * (0.5 + 0.5 * params.motion);
break;
case '[':
stack.push({x: currentX, y: currentY, angle: currentAngle, length: currentLength});
break;
case ']':
const state = stack.pop();
currentX = state.x;
currentY = state.y;
currentAngle = state.angle;
currentLength = state.length;
break;
}
}
ctx.strokeStyle = params.color;
ctx.lineWidth = params.strokeWidth * (0.5 + 0.5 * params.density);
ctx.stroke();
}
// Animation parameters
let time = 0;
let lSystemString = generateLSystem(params.axiom, params.rules, params.iterations);
let branches = [];
let branchCount = 0;
function draw() {
// Clear with semi-transparent background for trail effect
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update branch parameters
params.length = 120 * (0.7 + 0.3 * Math.sin(time * 0.001));
params.angle = Math.PI / 7 * (0.8 + 0.4 * Math.sin(time * 0.0007));
params.strokeWidth = 1.5 * (0.5 + 0.5 * params.density);
// Draw L-system
ctx.save();
ctx.translate(
canvas.width / 2 + 50 * Math.sin(time * 0.0005),
canvas.height + 50 * Math.sin(time * 0.0003)
);
drawLSystem(ctx, lSystemString, params,
params.initialX,
params.initialY,
Math.PI / 2,
params.length);
ctx.restore();
time += 1000 / 60;
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>