birth: Pulsing Teal Flow Forms
This commit is contained in:
parent
eb9faa8cdc
commit
77cfee47ec
1 changed files with 186 additions and 0 deletions
186
index.html
Normal file
186
index.html
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue