Update particles-background.component.ts

src/app/shared/components/particles-background/particles-background.component.ts

@@ -18,7 +18,7 @@ export class ParticleBackgroundComponent implements AfterViewInit, OnDestroy {
   private readonly maxDistance = 150;
   private readonly particleSpeed = 0.8;
 
-  constructor(private ngZone: NgZone) {}
+  constructor(private readonly ngZone: NgZone) {}
 
   ngAfterViewInit(): void {
     const canvas = this.canvasRef.nativeElement;
@@ -58,13 +58,13 @@ export class ParticleBackgroundComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  private animate = (): void => {
+  private readonly animate = (): void => {
     const canvas = this.canvasRef.nativeElement;
 
     this.ctx.clearRect(0, 0, canvas.width, canvas.height);
 
     for (let i = 0; i < this.numParticles; i++) {
-      let p = this.particles[i];
+      const p = this.particles[i];
 
       p.x += p.vx;
       p.y += p.vy;
@@ -78,18 +78,18 @@ export class ParticleBackgroundComponent implements AfterViewInit, OnDestroy {
       this.ctx.fill();
 
       for (let j = i + 1; j < this.numParticles; j++) {
-        let p2 = this.particles[j];
+        const p2 = this.particles[j];
 
-        let dx = p.x - p2.x;
-        let dy = p.y - p2.y;
-        let distance = Math.sqrt(dx * dx + dy * dy);
+        const dx = p.x - p2.x;
+        const dy = p.y - p2.y;
+        const distance = Math.hypot(dx, dy);
 
         if (distance < this.maxDistance) {
           this.ctx.beginPath();
           this.ctx.moveTo(p.x, p.y);
           this.ctx.lineTo(p2.x, p2.y);
 
-          let opacity = (1 - (distance / this.maxDistance)) * 0.5;
+          const opacity = (1 - (distance / this.maxDistance)) * 0.5;
           this.ctx.strokeStyle = `rgba(120, 150, 170, ${opacity})`;
           this.ctx.lineWidth = 1;
           this.ctx.stroke();