Update genesis/static/animation.js

genesis/static/animation.js

@@ -1,43 +1,70 @@
-const canvas = document.getElementById('molecule-canvas');
+// ===== MOLECULAR PARTICLE ANIMATION =====
+
+// Create a canvas background
+const canvas = document.createElement('canvas');
+canvas.id = 'moleculeCanvas';
+document.body.appendChild(canvas);
 const ctx = canvas.getContext('2d');
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
 
+// 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 < 120; i++) {
+for (let i = 0; i < numParticles; i++) {
     particles.push({
         x: Math.random() * canvas.width,
         y: Math.random() * canvas.height,
-        r: Math.random() * 3,
-        dx: (Math.random() - 0.5) * 1,
-        dy: (Math.random() - 0.5) * 1
+        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
     });
 }
 
-function draw() {
+// Animation loop
+function animate() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = '#00ff9d';
-    particles.forEach(p => {
+
+    // 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.r, 0, Math.PI * 2);
+        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
+        ctx.fillStyle = p.color;
         ctx.fill();
-    });
-}
 
-function update() {
-    particles.forEach(p => {
-        p.x += p.dx;
-        p.y += p.dy;
-        if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
-        if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
+        // 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();
+            }
+        }
     });
-}
 
-function loop() {
-    draw();
-    update();
-    requestAnimationFrame(loop);
+    requestAnimationFrame(animate);
 }
 
-loop();
+animate();