122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
import { Component, ElementRef, HostListener, inject, ViewChild } from '@angular/core';
|
|
import { ThemeSwitchService } from '../../service/theme-switch.service';
|
|
|
|
@Component({
|
|
selector: 'app-background',
|
|
imports: [],
|
|
templateUrl: './background.html',
|
|
styleUrl: './background.scss'
|
|
})
|
|
export class Background {
|
|
|
|
private themeSwitchService = inject(ThemeSwitchService);
|
|
|
|
constructor() {}
|
|
|
|
@ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
|
|
|
|
// Config
|
|
private numStars = 150;
|
|
private minBlink = 0.2;
|
|
private maxBlink = 1;
|
|
private blinkSpeed = 0.002; // Stern blinkt langsamer oder schneller
|
|
private maxSpeed = 0.1; // Sternbewegungsgeschwindigkeit
|
|
private parallaxFactor = 0.5; // Scroll-Parallax-Faktor
|
|
|
|
// Feature toggles
|
|
private enableBlink = true;
|
|
private enableMovement = true;
|
|
|
|
private ctx!: CanvasRenderingContext2D;
|
|
private stars: Star[] = [];
|
|
private width = window.innerWidth;
|
|
private height = window.innerHeight;
|
|
private animationId!: number;
|
|
private scrollY = window.scrollY;
|
|
|
|
ngOnInit() {
|
|
const canvas = this.canvasRef.nativeElement;
|
|
this.ctx = canvas.getContext('2d')!;
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
|
|
for (let i = 0; i < (this.numStars) * (document.body.scrollHeight / this.height); i++) {
|
|
this.stars.push({
|
|
x: Math.random() * this.width,
|
|
y: Math.random() * document.body.scrollHeight,
|
|
radius: Math.random() * 1.5 + 0.5,
|
|
alpha: this.minBlink + Math.random() * (this.maxBlink - this.minBlink),
|
|
alphaChange: (Math.random() * this.blinkSpeed) + 0.0005,
|
|
vx: (Math.random() - 0.5) * this.maxSpeed,
|
|
vy: (Math.random() - 0.5) * this.maxSpeed
|
|
});
|
|
}
|
|
|
|
this.animate();
|
|
}
|
|
|
|
@HostListener('window:resize')
|
|
onResize() {
|
|
this.width = window.innerWidth;
|
|
this.height = window.innerHeight;
|
|
const canvas = this.canvasRef.nativeElement;
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
}
|
|
|
|
@HostListener('window:scroll')
|
|
onScroll() {
|
|
this.scrollY = window.scrollY;
|
|
}
|
|
|
|
private animate() {
|
|
const ctx = this.ctx;
|
|
ctx.clearRect(0, 0, this.width, this.height);
|
|
|
|
for (let star of this.stars) {
|
|
// Blinken
|
|
if (this.enableBlink) {
|
|
star.alpha += star.alphaChange;
|
|
if (star.alpha > this.maxBlink || star.alpha < this.minBlink) star.alphaChange *= -1;
|
|
}
|
|
|
|
// Bewegung
|
|
if (this.enableMovement) {
|
|
star.x += star.vx;
|
|
star.y += star.vy;
|
|
}
|
|
|
|
// Bildschirm-Ränder
|
|
if (star.x < 0) star.x = this.width;
|
|
if (star.x > this.width) star.x = 0;
|
|
if (star.y < 0) star.y = document.body.scrollHeight;
|
|
if (star.y > document.body.scrollHeight) star.y = 0;
|
|
|
|
// Stern zeichnen mit Scroll-Parallax
|
|
ctx.beginPath();
|
|
ctx.arc(star.x, star.y - this.scrollY * this.parallaxFactor, star.radius, 0, Math.PI * 2);
|
|
ctx.fillStyle = this.themeSwitchService.darkMode()
|
|
? `rgba(255, 215, 0, ${star.alpha})`
|
|
: `rgba(184, 134, 11, ${star.alpha})`;
|
|
ctx.fill();
|
|
}
|
|
|
|
this.animationId = requestAnimationFrame(() => this.animate());
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
cancelAnimationFrame(this.animationId);
|
|
}
|
|
|
|
}
|
|
|
|
interface Star {
|
|
x: number;
|
|
y: number;
|
|
radius: number;
|
|
alpha: number;
|
|
alphaChange: number;
|
|
vx: number;
|
|
vy: number;
|
|
}
|