Fix bad code with less bad code

js/bg.js

@@ -22,7 +22,7 @@ class Particle {
         this.speedY = (Math.random() - 0.5) * 0.2;
         this.growthSpeed = (Math.random() * 0.02) + 0.01; // Growth speed for breathing effect
         this.shape = ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)]; // Randomly decide shape
-        this.angle = Math.random() * 360; // Initial rotation angle for squares
+        this.angle = Math.random() * 360; // Initial rotation angle for squares and triangles
         this.rotationSpeed = Math.random() * 2 - 1; // Random rotation speed
     }
 
@@ -53,7 +53,6 @@ class Particle {
     }
 
     draw() {
-        this.update();
         ctx.fillStyle = '#bbb';
         ctx.save();
         ctx.translate(this.x, this.y);
@@ -116,21 +115,6 @@ class Gradient {
         this.dAlpha = (Math.random() - 0.5) * 0.01;
     }
 
-    draw() {
-        this.update();
-        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
-        gradient.addColorStop(0, this.color);
-        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
-
-        ctx.globalAlpha = this.alpha;
-        ctx.fillStyle = gradient;
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-        ctx.closePath();
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-    }
-
     update() {
         this.x += this.speedX;
         this.y += this.speedY;
@@ -151,15 +135,29 @@ class Gradient {
         }
         this.y = clamp(0, this.y, canvas.height);
     }
+
+    draw() {
+        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
+        gradient.addColorStop(0, this.color);
+        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+        ctx.globalAlpha = this.alpha;
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.closePath();
+        ctx.fill();
+        ctx.globalAlpha = 1.0;
+    }
 }
 
-let gradients = [];
+let gradientsArray = [];
 
 function getRandomColor() {
     const r = Math.floor((Math.random() * 100) + 155);
     const g = Math.floor((Math.random() * 100) + 155);
     const b = Math.floor((Math.random() * 100) + 155);
-    return `rgba(${r}, ${g}, ${b}, 1)`;
+    return `rgb(${r}, ${g}, ${b})`;
 }
 
 function init() {
@@ -167,18 +165,24 @@ function init() {
     for (let i = 0; i < 100; i++) {
         particlesArray.push(new Particle());
     }
-    gradients = [];
-    for (let i = 0; i < 5; i++) {
-        gradients.push(new Gradient());
+    gradientsArray = [];
+    for (let i = 0; i < 10; i++) {
+        gradientsArray.push(new Gradient());
     }
 }
 
 function animate() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    gradients.forEach(gradient => gradient.draw());
+    gradientsArray.forEach((gradient) => {
+        gradient.update();
+        gradient.draw();
+    });
 
-    particlesArray.forEach(particle => particle.draw());
+    particlesArray.forEach((particle) => {
+        particle.update();
+        particle.draw();
+    });
 
     requestAnimationFrame(animate);
 }