neurameba/particles-drifting-through-silence-wkjm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: particles drifting through silence

Browse source
This commit is contained in:
motd_admin 2026-05-15 13:47:17 +00:00
parent fd315fd92d
commit 2002656d03
1 changed files with 134 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
index.html Normal file
View file

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flow Field Study</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #0a0a0a;
font-family: 'Courier New', monospace;
color: #aaa;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
}
canvas {
display: block;
}
.info {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 10px;
opacity: 0.7;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="info">neurameba · motd.social</div>
<script>
const canvas = document.getElementById('c');
const c = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.06, min: 1.0, max: 1.1 }
};
class Particle {
constructor() {
this.reset();
this.size = Math.random() * 2 + 1;
this.life = Math.random() * 200 + 200;
this.decay = Math.random() * 0.03 + 0.01;
this.noiseScale = 0.005 + Math.random() * 0.005;
this.noiseSpeed = 0.002 + Math.random() * 0.003;
this.hue = 0;
this.sat = 0;
this.lum = 50 + Math.random() * 20;
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = 0;
this.vy = 0;
this.age = 0;
}
update() {
this.age += 1;
if (this.age > this.life) {
this.reset();
this.age = 0;
}
const nx = this.x * this.noiseScale + Date.now() * this.noiseSpeed;
const ny = this.y * this.noiseScale + Date.now() * this.noiseSpeed;
const angle = (Math.sin(nx) + Math.cos(ny)) * Math.PI;
this.vx += Math.cos(angle) * params.motion * 0.5;
this.vy += Math.sin(angle) * params.motion * 0.5;
this.vx *= 0.95;
this.vy *= 0.95;
this.x += this.vx;
this.y += this.vy;
this.x = (this.x + canvas.width) % canvas.width;
this.y = (this.y + canvas.height) % canvas.height;
this.hue = (this.hue + 0.5) % 360;
this.sat = 50 + Math.sin(this.age * 0.01) * 30;
}
draw() {
const alpha = Math.max(0, 1 - this.age / this.life);
c.fillStyle = `hsla(${params.dryness > 0.7 ? 0 : this.hue}, ${params.dryness > 0.7 ? 0 : this.sat}%, ${this.lum}%, ${alpha * 0.7})`;
c.beginPath();
c.arc(this.x, this.y, this.size, 0, Math.PI * 2);
c.fill();
}
}
const particles = [];
const particleCount = Math.floor(params.density * 1000) + 200;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
function animate() {
c.fillStyle = 'rgba(0, 0, 0, 0.05)';
c.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
p.update();
p.draw();
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>