neurameba/fractal-echoes-in-motion-1mo5
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractal Echoes in Motion

Browse source
This commit is contained in:
motd_admin 2026-04-18 21:47:14 +00:00
parent 2dbc788992
commit 3b0a1fe63d
1 changed files with 135 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
index.html Normal file
View file

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strange Attraction</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #000;
color: #fff;
font-family: monospace;
}
canvas {
display: block;
}
#attribution {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
text-shadow: 1px 1px 2px #000;
}
</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');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Parameters from prompt
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: {
avg: 1.1,
min: 1.0,
max: 1.2
},
tone: {
anger: 0.0,
sadness: 0.0,
curiosity: 0.3,
dryness: 0.8,
playfulness: 0.0,
tension: 0.0
}
};
// Strange attractor parameters (modified by input params)
const attractor = {
a: 1.4 + params.motion * 0.6,
b: 2.3 + params.connectedness * 0.7,
c: 0.8 - params.dryness * 0.3,
d: 2.0 + params.complexity * 0.5,
points: [],
maxPoints: 10000 * params.density,
color: `hsl(180, ${20 + params.tone.curiosity * 30}%, ${50 + params.tone.dryness * 20}%)`
};
// Initialize points
for (let i = 0; i < attractor.maxPoints; i++) {
attractor.points.push({
x: Math.random() * 2 - 1,
y: Math.random() * 2 - 1
});
}
// Animation parameters
let time = 0;
const maxTrailLength = 500 * params.lifespan;
const pulseRange = params.pulse.max - params.pulse.min;
const pulseFreq = 0.002 + params.pulse.avg * 0.005;
function animate() {
// Clear with slight fade
ctx.fillStyle = `rgba(0, 0, 0, 0.02)`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Calculate pulse effect
const pulse = params.pulse.min + Math.sin(time * pulseFreq) * pulseRange;
// Update and draw points
attractor.points.forEach(point => {
// Strange attractor equations (modified)
const x1 = point.x;
const y1 = point.y;
point.x = Math.sin(params.a * y1) - Math.cos(params.b * x1);
point.y = Math.sin(params.c * x1) - Math.cos(params.d * y1);
// Scale and center
const scale = Math.min(canvas.width, canvas.height) * 0.4;
const x = point.x * scale + canvas.width / 2;
const y = point.y * scale + canvas.height / 2;
// Draw with trail
const trailLength = maxTrailLength * pulse;
const alpha = Math.min(1, 1 - (attractor.points.indexOf(point) / attractor.maxPoints));
// Create gradient for smoky effect
const gradient = ctx.createRadialGradient(x, y, 0, x, y, 5);
gradient.addColorStop(0, attractor.color + ', 0.8)');
gradient.addColorStop(1, attractor.color + ', 0');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, alpha * trailLength * 0.01, 0, Math.PI * 2);
ctx.fill();
});
time += 0.005 * params.motion;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>