172 lines
No EOL
5.8 KiB
HTML
172 lines
No EOL
5.8 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 Dynamics</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #0a0a0a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100vh;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
#attribution {
|
|
color: #555;
|
|
font-family: monospace;
|
|
font-size: 10px;
|
|
padding: 8px;
|
|
text-align: right;
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
</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 resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
// Flow field parameters
|
|
const params = {
|
|
motion: 0.5,
|
|
density: 0.5,
|
|
complexity: 0.5,
|
|
connectedness: 0.5,
|
|
lifespan: 0.5,
|
|
pulse: 1.08,
|
|
dryness: 0.9
|
|
};
|
|
|
|
// Particle system
|
|
const particles = [];
|
|
const maxParticles = Math.floor(200 * params.density);
|
|
const baseSize = 1 + params.complexity * 2;
|
|
const baseSpeed = 0.5 + params.motion * 0.5;
|
|
|
|
// Field vectors
|
|
const fieldResolution = 30 + Math.floor(params.complexity * 40);
|
|
const field = new Array(fieldResolution * fieldResolution);
|
|
|
|
function initField() {
|
|
for (let i = 0; i < field.length; i++) {
|
|
const x = (i % fieldResolution) / fieldResolution;
|
|
const y = Math.floor(i / fieldResolution) / fieldResolution;
|
|
const angle = (Math.sin(x * Math.PI * 20) + Math.cos(y * Math.PI * 15)) * Math.PI;
|
|
const strength = 0.5 + 0.5 * (Math.sin(x * 10) * Math.cos(y * 8));
|
|
field[i] = {
|
|
x: Math.cos(angle) * strength,
|
|
y: Math.sin(angle) * strength
|
|
};
|
|
}
|
|
}
|
|
|
|
function initParticles() {
|
|
particles.length = 0;
|
|
for (let i = 0; i < maxParticles; i++) {
|
|
particles.push({
|
|
x: Math.random(),
|
|
y: Math.random(),
|
|
size: baseSize * (0.5 + Math.random() * 0.5),
|
|
speed: baseSpeed * (0.5 + Math.random() * 0.5) * params.pulse,
|
|
angle: Math.random() * Math.PI * 2,
|
|
life: Math.random(),
|
|
maxLife: 20 + params.lifespan * 80,
|
|
trail: []
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateParticles() {
|
|
particles.forEach(p => {
|
|
// Update direction based on flow field
|
|
const fieldX = Math.floor(p.x * (fieldResolution - 1));
|
|
const fieldY = Math.floor(p.y * (fieldResolution - 1));
|
|
const fieldIdx = fieldY * fieldResolution + fieldX;
|
|
const flow = field[fieldIdx];
|
|
|
|
p.angle = Math.atan2(flow.y, flow.x) + (Math.random() - 0.5) * params.motion;
|
|
|
|
// Update position
|
|
p.x += Math.cos(p.angle) * p.speed * 0.01;
|
|
p.y += Math.sin(p.angle) * p.speed * 0.01;
|
|
|
|
// Wrap around edges
|
|
p.x = (p.x + 1) % 1;
|
|
p.y = (p.y + 1) % 1;
|
|
|
|
// Update life and trail
|
|
p.life += 0.01;
|
|
if (p.life > p.maxLife) {
|
|
p.life = 0;
|
|
p.x = Math.random();
|
|
p.y = Math.random();
|
|
p.angle = Math.random() * Math.PI * 2;
|
|
}
|
|
|
|
// Add to trail
|
|
p.trail.push({x: p.x, y: p.y});
|
|
if (p.trail.length > 10) p.trail.shift();
|
|
});
|
|
}
|
|
|
|
function draw() {
|
|
// Fade background
|
|
ctx.fillStyle = `rgba(10, 10, 10, 0.1)`;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw particles and trails
|
|
particles.forEach(p => {
|
|
// Trail
|
|
if (p.trail.length > 1) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(p.trail[0].x * canvas.width, p.trail[0].y * canvas.height);
|
|
for (let i = 1; i < p.trail.length; i++) {
|
|
const pos = p.trail[i];
|
|
const alpha = 1 - (i / p.trail.length) * 0.7;
|
|
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * params.dryness})`;
|
|
ctx.lineWidth = p.size * (0.5 + (i / p.trail.length) * 0.5) * 0.5;
|
|
ctx.lineTo(pos.x * canvas.width, pos.y * canvas.height);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Particle
|
|
const ageRatio = p.life / p.maxLife;
|
|
const size = p.size * (1 - ageRatio * 0.3);
|
|
const hue = 0; // Monochrome
|
|
const brightness = 50 + ageRatio * 50;
|
|
ctx.fillStyle = `hsl(${hue}, 0%, ${brightness}%)`;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x * canvas.width, p.y * canvas.height, size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
|
|
function animate() {
|
|
updateParticles();
|
|
draw();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
initField();
|
|
initParticles();
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |