186 lines
No EOL
6 KiB
HTML
186 lines
No EOL
6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Flow Field Organism</title>
|
|
<style>
|
|
body { margin: 0; overflow: hidden; background: #0a0a0a; }
|
|
#canvas { display: block; }
|
|
#attribution {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #333;
|
|
font-family: monospace;
|
|
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');
|
|
|
|
// Set canvas to full window size
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
window.addEventListener('resize', resizeCanvas);
|
|
resizeCanvas();
|
|
|
|
// Parameters derived from the prompt
|
|
const params = {
|
|
motion: 0.493,
|
|
density: 0.635,
|
|
complexity: 0.596,
|
|
connectedness: 0.372,
|
|
lifespan: 0.605,
|
|
pulse: { avg: 0.35, min: 0.30, max: 1.20 },
|
|
tone: {
|
|
anger: 0.00,
|
|
sadness: 0.00,
|
|
curiosity: 0.80,
|
|
dryness: 0.90,
|
|
playfulness: 0.00,
|
|
tension: 0.00
|
|
},
|
|
topology: {
|
|
nodes: 6,
|
|
branches: 6,
|
|
loops: 22,
|
|
maxDepth: 6,
|
|
thicknessRatio: 1.00,
|
|
fractalDimension: 0.500
|
|
}
|
|
};
|
|
|
|
// Color palette (teals due to high curiosity, dryness = monochrome)
|
|
const colors = {
|
|
background: '#0a0a0a',
|
|
main: '#1afff2',
|
|
secondary: '#0e8b90',
|
|
pulse: '#ff4d7a'
|
|
};
|
|
|
|
// Flow field particle system
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = 1 + Math.random() * 2;
|
|
this.speed = 0.1 + Math.random() * 0.5;
|
|
this.direction = Math.random() * Math.PI * 2;
|
|
this.life = 5 + Math.random() * 10;
|
|
this.maxLife = this.life;
|
|
this.trail = [];
|
|
this.trailLength = 5 + Math.floor(params.density * 20);
|
|
this.connectedness = params.connectedness;
|
|
this.color = colors.main;
|
|
this.pulseOffset = Math.random() * Math.PI * 2;
|
|
}
|
|
|
|
update() {
|
|
// Simple flow field - 2D noise based on position
|
|
const nx = this.x / canvas.width * 5;
|
|
const ny = this.y / canvas.height * 5;
|
|
|
|
// Perturb direction based on noise
|
|
const angle = Math.atan2(
|
|
ny - 0.5,
|
|
nx - 0.5
|
|
) + Math.sin(Date.now() * 0.0005 * params.motion) * 0.3;
|
|
|
|
this.direction += (angle - this.direction) * 0.05 * params.motion;
|
|
|
|
// Move particle
|
|
this.x += Math.cos(this.direction) * this.speed;
|
|
this.y += Math.sin(this.direction) * this.speed;
|
|
|
|
// Wrap around edges
|
|
if (this.x < 0) this.x = canvas.width;
|
|
if (this.x > canvas.width) this.x = 0;
|
|
if (this.y < 0) this.y = canvas.height;
|
|
if (y > canvas.height) this.y = 0;
|
|
|
|
// Update trail
|
|
this.trail.push({x: this.x, y: this.y});
|
|
if (this.trail.length > this.trailLength) {
|
|
this.trail.shift();
|
|
}
|
|
|
|
// Update life based on pulse
|
|
const pulse = params.pulse.avg + Math.sin(this.pulseOffset + Date.now() * 0.001) * (params.pulse.max - params.pulse.min) * 0.5;
|
|
this.life -= 0.01 * pulse;
|
|
|
|
// Fade out near end of life
|
|
const alpha = this.life / this.maxLife;
|
|
this.color = `rgba(26, 255, 242, ${alpha * 0.8})`;
|
|
}
|
|
|
|
draw() {
|
|
// Draw trail
|
|
ctx.strokeStyle = this.color;
|
|
ctx.lineWidth = this.size * 0.5;
|
|
ctx.beginPath();
|
|
|
|
for (let i = 0; i < this.trail.length; i++) {
|
|
const t = this.trail[i];
|
|
const progress = i / this.trail.length;
|
|
const size = this.size * progress * 0.5;
|
|
const alpha = progress * 0.8;
|
|
|
|
if (i === 0) {
|
|
ctx.moveTo(t.x, t.y);
|
|
} else {
|
|
ctx.lineTo(t.x, t.y);
|
|
}
|
|
}
|
|
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Create particles based on density
|
|
const particles = [];
|
|
const particleCount = Math.floor(50 + params.density * 200);
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
particles.push(new Particle());
|
|
}
|
|
|
|
// Animation loop
|
|
function animate() {
|
|
// Clear with semi-transparent background for trails
|
|
ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Update and draw particles
|
|
particles.forEach(particle => {
|
|
particle.update();
|
|
particle.draw();
|
|
});
|
|
|
|
// Occasionally add new particles
|
|
if (Math.random() < 0.05 * params.density) {
|
|
particles.push(new Particle());
|
|
if (particles.length > particleCount * 1.5) {
|
|
particles.shift(); // Remove old particles if we exceed target count
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |