birth: Fractal Echoes in Void
This commit is contained in:
parent
15c6b9ca1a
commit
00919ad0fb
1 changed files with 207 additions and 0 deletions
207
index.html
Normal file
207
index.html
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Neurameba Fractal Stream</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
color: #aaa;
|
||||
font-family: 'Courier New', monospace;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
.attribution {
|
||||
text-align: right;
|
||||
padding: 8px 16px;
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="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();
|
||||
|
||||
// Strange attractor parameters
|
||||
const params = {
|
||||
a: 3.1,
|
||||
b: 0.3,
|
||||
c: 1.2,
|
||||
d: 4.0,
|
||||
scale: 80,
|
||||
motion: 0.5,
|
||||
density: 0.5,
|
||||
complexity: 0.5,
|
||||
connectedness: 0.5,
|
||||
lifespan: 0.5,
|
||||
pulse: 1.12,
|
||||
hue: 160, // teal (curiosity)
|
||||
saturation: 70,
|
||||
lightness: 60,
|
||||
trailLength: 100
|
||||
};
|
||||
|
||||
// Initialize with random starting points
|
||||
const points = [];
|
||||
const maxPoints = 100 * (params.density + 0.1);
|
||||
for (let i = 0; i < maxPoints; i++) {
|
||||
points.push({
|
||||
x: (Math.random() - 0.5) * 2,
|
||||
y: (Math.random() - 0.5) * 2,
|
||||
dx: 0,
|
||||
dy: 0,
|
||||
history: [],
|
||||
energy: Math.random() * 0.5 + 0.75,
|
||||
size: Math.random() * 2 + 1
|
||||
});
|
||||
}
|
||||
|
||||
// Animation state
|
||||
let frameCount = 0;
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let prevMouseX = 0;
|
||||
let prevMouseY = 0;
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
prevMouseX = mouseX;
|
||||
prevMouseY = mouseY;
|
||||
mouseX = (e.clientX - canvas.width/2) / canvas.width * 4;
|
||||
mouseY = (e.clientY - canvas.height/2) / canvas.height * 4;
|
||||
});
|
||||
|
||||
// Strange attractor function
|
||||
function attractor(x, y, t) {
|
||||
const a = params.a + 0.5 * Math.sin(t * 0.01);
|
||||
const b = params.b + 0.2 * Math.cos(t * 0.015);
|
||||
const c = params.c + 0.3 * Math.sin(t * 0.012);
|
||||
const d = params.d + 0.4 * Math.cos(t * 0.018);
|
||||
|
||||
const xNew = Math.sin(a * y) + c * Math.cos(a * x);
|
||||
const yNew = Math.sin(b * x) + d * Math.cos(b * y);
|
||||
|
||||
return { x: xNew, y: yNew };
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// Clear with fading effect
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Adjust parameters based on pulse
|
||||
const pulseFactor = params.pulse + 0.2 * Math.sin(frameCount * 0.03);
|
||||
|
||||
// Update and draw points
|
||||
points.forEach(point => {
|
||||
// Update position using strange attractor
|
||||
const t = frameCount * 0.01 * params.motion * pulseFactor;
|
||||
const { x, y } = attractor(point.x, point.y, t);
|
||||
|
||||
// Add small perturbation
|
||||
point.x += (x - point.x) * 0.1 * params.connectedness;
|
||||
point.y += (y - point.y) * 0.1 * params.connectedness;
|
||||
|
||||
// Store position in history
|
||||
point.history.push({ x: point.x, y: point.y });
|
||||
if (point.history.length > params.trailLength * params.lifespan) {
|
||||
point.history.shift();
|
||||
}
|
||||
|
||||
// Energy decay
|
||||
point.energy *= 0.99;
|
||||
|
||||
// Size based on energy
|
||||
const size = point.size * point.energy * 2;
|
||||
|
||||
// Draw trail
|
||||
if (point.history.length > 1) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(
|
||||
canvas.width/2 + point.history[0].x * params.scale * (canvas.width/800),
|
||||
canvas.height/2 + point.history[0].y * params.scale * (canvas.width/800)
|
||||
);
|
||||
|
||||
const gradient = ctx.createLinearGradient(
|
||||
canvas.width/2 + point.history[0].x * params.scale * (canvas.width/800),
|
||||
canvas.height/2 + point.history[0].y * params.scale * (canvas.width/800),
|
||||
canvas.width/2 + point.x * params.scale * (canvas.width/800),
|
||||
canvas.height/2 + point.y * params.scale * (canvas.width/800)
|
||||
);
|
||||
|
||||
gradient.addColorStop(0, `hsla(${params.hue}, ${params.saturation}%, ${params.lightness * point.energy}%, 0)`);
|
||||
gradient.addColorStop(0.5, `hsla(${params.hue}, ${params.saturation}%, ${params.lightness * point.energy}%, ${point.energy * 0.7})`);
|
||||
gradient.addColorStop(1, `hsla(${params.hue}, ${params.saturation}%, ${params.lightness}%, 0)`);
|
||||
|
||||
ctx.strokeStyle = gradient;
|
||||
ctx.lineWidth = size * 0.8;
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
for (let i = 1; i < point.history.length; i++) {
|
||||
ctx.lineTo(
|
||||
canvas.width/2 + point.history[i].x * params.scale * (canvas.width/800),
|
||||
canvas.height/2 + point.history[i].y * params.scale * (canvas.width/800)
|
||||
);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw current position
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
canvas.width/2 + point.x * params.scale * (canvas.width/800),
|
||||
canvas.height/2 + point.y * params.scale * (canvas.width/800),
|
||||
size * (canvas.width/800),
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
ctx.fillStyle = `hsla(${params.hue}, ${params.saturation}%, ${params.lightness}%, ${point.energy * 0.8})`;
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
// Occasionally add new points
|
||||
if (frameCount % 20 === 0 && Math.random() < params.density * 0.1) {
|
||||
points.push({
|
||||
x: (Math.random() - 0.5) * 2,
|
||||
y: (Math.random() - 0.5) * 2,
|
||||
dx: 0,
|
||||
dy: 0,
|
||||
history: [],
|
||||
energy: 1,
|
||||
size: Math.random() * 2 + 1
|
||||
});
|
||||
|
||||
if (points.length > maxPoints) {
|
||||
points.shift();
|
||||
}
|
||||
}
|
||||
|
||||
frameCount++;
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue