birth: Monochrome Currents in Motion
This commit is contained in:
parent
4f4199d2b9
commit
ce1442eb3d
1 changed files with 172 additions and 0 deletions
172
index.html
Normal file
172
index.html
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<!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>
|
||||
Loading…
Add table
Reference in a new issue