Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Update particles-background.component.ts
Some checks failed
Build, Test & Push Frontend / quality-check (push) Failing after 31s
Details
Build, Test & Push Frontend / docker (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lobo
2026-02-23 10:07:26 +01:00
parent 96d4659652
commit b61eb4eb73
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/shared/components/particles-background/particles-background.component.ts
View File

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