Spaces:
Sleeping
Sleeping
File size: 2,012 Bytes
c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 b32bc19 c174942 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
// ===== MOLECULAR PARTICLE ANIMATION =====
// Create a canvas background
const canvas = document.createElement('canvas');
canvas.id = 'moleculeCanvas';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
// Resize canvas to full window
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Create particles
let particles = [];
const numParticles = 80;
for (let i = 0; i < numParticles; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 4 + 1,
color: Math.random() > 0.5 ? '#00ff88' : '#ffaa00',
speedX: (Math.random() - 0.5) * 1.5,
speedY: (Math.random() - 0.5) * 1.5
});
}
// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw and move particles
particles.forEach((p, index) => {
p.x += p.speedX;
p.y += p.speedY;
// Bounce off edges
if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
// Draw particle
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
// Connect lines if particles are close
for (let j = index + 1; j < particles.length; j++) {
let dx = particles[j].x - p.x;
let dy = particles[j].y - p.y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 120) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = p.color === '#00ff88' ? '#00ff88aa' : '#ffaa00aa';
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
});
requestAnimationFrame(animate);
}
animate();
|