neurameba/fractal-bloom-in-slow-motion-38h2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractal Bloom in Slow Motion

Browse source
This commit is contained in:
motd_admin 2026-09-01 22:21:19 +00:00
parent 0be762494e
commit 3a7364e1a5
1 changed files with 144 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
index.html Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractal Bloom</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #0a0a0a;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
}
#attribution {
position: fixed;
bottom: 10px;
right: 10px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
pointer-events: none;
text-align: right;
}
</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,
pulse: { avg: 1.07, min: 1.0, max: 1.1 },
tone: { anger: 0.0, sadness: 0.0, curiosity: 0.7, dryness: 0.8, playfulness: 0.2, tension: 0.0 }
};
let time = 0;
let trails = [];
const maxTrails = 30;
const trailLength = 50;
function generateColor() {
const hue = 180 + Math.sin(time * 0.001) * 30;
const saturation = 30 + params.tone.playfulness * 20;
const lightness = 60 + params.tone.dryness * 10 * Math.sin(time * 0.002);
const alpha = 0.7 + params.tone.playfulness * 0.3;
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
}
function updateTrails() {
if (trails.length < maxTrails && Math.random() < 0.1) {
trails.push({
points: [],
maxLength: 20 + Math.floor(params.complexity * 20),
color: generateColor(),
size: 1 + params.density * 2,
pulse: params.pulse.avg * (0.9 + Math.random() * 0.2),
lifespan: 100 + Math.floor(params.lifespan * 200),
decayRate: 0.9 + params.motion * 0.1
});
}
for (let i = trails.length - 1; i >= 0; i--) {
const trail = trails[i];
if (trail.points.length > trail.maxLength) {
trail.points.shift();
}
trail.lifespan--;
if (trail.lifespan <= 0) {
trails.splice(i, 1);
continue;
}
const angle = (time * 0.005 + i * 0.1) * trail.pulse;
const distance = 10 + params.density * 20;
const newX = Math.cos(angle) * distance + canvas.width / 2;
const newY = Math.sin(angle) * distance + canvas.height / 2;
trail.points.push({ x: newX, y: newY });
// Fade out
trail.color = trail.color.replace('1)', '0.1)');
}
}
function draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (const trail of trails) {
if (trail.points.length < 2) continue;
ctx.strokeStyle = trail.color;
ctx.lineWidth = trail.size;
ctx.beginPath();
ctx.moveTo(trail.points[0].x, trail.points[0].y);
for (let i = 1; i < trail.points.length; i++) {
const point = trail.points[i];
const nextPoint = trail.points[i + 1] || point;
const controlX = point.x + (nextPoint.x - point.x) * 0.3;
const controlY = point.y + (nextPoint.y - point.y) * 0.3;
ctx.quadraticCurveTo(point.x, point.y, controlX, controlY);
}
ctx.stroke();
}
}
function animate() {
updateTrails();
draw();
time++;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>