defalt2111/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ball with click

Browse Source
This commit is contained in:
Antonio Ledebuhr
2026-01-21 18:27:02 +01:00
parent 010520f722
commit 47920509d3
1 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/components/dot-background/dot-background.ts
View File

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