add ball with click

src/app/components/dot-background/dot-background.ts

@@ -16,7 +16,8 @@ export class DotBackground implements OnDestroy {
   private animationId = 0;
   private initialized = false;
 
-  private readonly DOT_COUNT = 12;
+  private readonly INIT_DOT_COUNT = 12;
+  private readonly MAX_DOT_COUNT = 100;
   private readonly COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#3b82f6'];
   private readonly MOUSE_RADIUS = 150;
 
@@ -46,6 +47,7 @@ export class DotBackground implements OnDestroy {
 
     window.addEventListener('resize', this.resize);
     window.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('click', this.onMouseClick);
 
     this.initialized = true;
     this.ngZone.runOutsideAngular(() => this.animate());
@@ -82,9 +84,22 @@ export class DotBackground implements OnDestroy {
     this.mouse.y = e.clientY;
   };
 
+  private onMouseClick = () => {
+    if (this.dots.length < this.MAX_DOT_COUNT) {
+      this.dots.push({
+        x: this.mouse.x,
+        y: this.mouse.y,
+        vx: (Math.random() - 0.5) * 0.5,
+        vy: (Math.random() - 0.5) * 0.5,
+        radius: Math.random() * 60 + 40,
+        color: this.COLORS[Math.floor(Math.random() * this.COLORS.length)],
+      });
+    }
+  };
+
   private initDots() {
     const { width, height } = this.canvasRef.nativeElement;
-    for (let i = 0; i < this.DOT_COUNT; i++) {
+    for (let i = 0; i < this.INIT_DOT_COUNT; i++) {
       this.dots.push({
         x: Math.random() * width,
         y: Math.random() * height,
@@ -106,7 +121,7 @@ export class DotBackground implements OnDestroy {
       const dy = dot.y - this.mouse.y;
       const dist = Math.sqrt(dx * dx + dy * dy);
 
-      if (dist < this.MOUSE_RADIUS) {
+      if (dist != 0 && dist < this.MOUSE_RADIUS) {
         const force = (this.MOUSE_RADIUS - dist) / this.MOUSE_RADIUS;
         dot.vx += (dx / dist) * force * 0.5;
         dot.vy += (dy / dist) * force * 0.5;