@basmilius/sparkle 2.0.0 → 2.1.0

package/src/stars/layer.ts

@@ -0,0 +1,133 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { ShootingStarSystem } from '../shooting-stars';
+import { MULBERRY } from './consts';
+import type { StarSimulationConfig } from './simulation';
+import type { Star, StarMode } from './types';
+
+export class StarLayer extends SimulationLayer {
+    readonly #mode: StarMode;
+    readonly #twinkleSpeed: number;
+    readonly #colorRGB: [number, number, number];
+    readonly #scale: number;
+    readonly #verticalFade: [number, number] | null;
+    readonly #shootingStarSystem: ShootingStarSystem | null;
+    #starCount: number;
+    #time: number = 0;
+    #stars: Star[] = [];
+
+    constructor(config: StarSimulationConfig = {}) {
+        super();
+
+        this.#mode = config.mode ?? 'both';
+        this.#starCount = config.starCount ?? 150;
+        this.#twinkleSpeed = config.twinkleSpeed ?? 1;
+        this.#scale = config.scale ?? 1;
+        this.#verticalFade = config.verticalFade ?? null;
+
+        this.#colorRGB = hexToRGB(config.color ?? '#ffffff');
+
+        const shootingColorRGB = hexToRGB(config.shootingColor ?? '#ffffff');
+        const enableShooting = this.#mode === 'shooting' || this.#mode === 'both';
+
+        this.#shootingStarSystem = enableShooting
+            ? new ShootingStarSystem(
+                {
+                    interval: config.shootingInterval ?? [120, 360],
+                    color: shootingColorRGB,
+                    trailLength: config.trailLength ?? 15,
+                    trailAlphaFactor: 0.6,
+                    speed: config.shootingSpeed ?? 1,
+                    scale: this.#scale,
+                    alphaMin: 0.8,
+                    alphaRange: 0.2,
+                    decayMin: 0.01,
+                    decayRange: 0.015,
+                    verticalFade: this.#verticalFade ?? undefined
+                },
+                () => MULBERRY.next()
+            )
+            : null;
+
+        if (this.#mode === 'sky' || this.#mode === 'both') {
+            for (let i = 0; i < this.#starCount; ++i) {
+                this.#stars.push(this.#createStar());
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.02 * dt;
+        this.#shootingStarSystem?.tick(dt, width, height);
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const [sr, sg, sb] = this.#colorRGB;
+
+        // Background stars
+        if (this.#mode === 'sky' || this.#mode === 'both') {
+            ctx.globalCompositeOperation = 'source-over';
+
+            for (const star of this.#stars) {
+                const px = star.x * width;
+                const py = star.y * height;
+                let alpha = star.brightness * (0.3 + 0.7 * (0.5 + 0.5 * Math.sin(this.#time * star.twinkleSpeed * this.#twinkleSpeed + star.twinklePhase)));
+
+                if (this.#verticalFade) {
+                    const [fadeStart, fadeEnd] = this.#verticalFade;
+                    const fadeFactor = 1 - Math.max(0, Math.min(1, (star.y - fadeStart) / (fadeEnd - fadeStart)));
+                    alpha *= fadeFactor;
+
+                    if (alpha <= 0) {
+                        continue;
+                    }
+                }
+
+                const size = star.size * this.#scale;
+
+                ctx.globalAlpha = alpha;
+
+                // Star dot
+                ctx.beginPath();
+                ctx.arc(px, py, size, 0, Math.PI * 2);
+                ctx.fillStyle = `rgb(${sr}, ${sg}, ${sb})`;
+                ctx.fill();
+
+                // Cross sparkle for larger stars
+                if (star.size > 1.5) {
+                    const sparkleLength = size * 3;
+                    const sparkleAlpha = alpha * 0.4;
+                    ctx.globalAlpha = sparkleAlpha;
+                    ctx.strokeStyle = `rgb(${sr}, ${sg}, ${sb})`;
+                    ctx.lineWidth = 0.5;
+
+                    ctx.beginPath();
+                    ctx.moveTo(px - sparkleLength, py);
+                    ctx.lineTo(px + sparkleLength, py);
+                    ctx.stroke();
+
+                    ctx.beginPath();
+                    ctx.moveTo(px, py - sparkleLength);
+                    ctx.lineTo(px, py + sparkleLength);
+                    ctx.stroke();
+                }
+            }
+        }
+
+        // Shooting stars
+        this.#shootingStarSystem?.draw(ctx);
+
+        ctx.globalAlpha = 1;
+    }
+
+    #createStar(): Star {
+        return {
+            x: MULBERRY.next(),
+            y: MULBERRY.next(),
+            size: 0.5 + MULBERRY.next() * 2,
+            twinklePhase: MULBERRY.next() * Math.PI * 2,
+            twinkleSpeed: 0.5 + MULBERRY.next() * 2,
+            brightness: 0.3 + MULBERRY.next() * 0.7
+        };
+    }
+}

package/src/stars/simulation.ts

@@ -0,0 +1,22 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { StarLayer } from './layer';
+
+export interface StarSimulationConfig {
+    readonly mode?: import('./types').StarMode;
+    readonly starCount?: number;
+    readonly shootingInterval?: [number, number];
+    readonly shootingSpeed?: number;
+    readonly twinkleSpeed?: number;
+    readonly color?: string;
+    readonly shootingColor?: string;
+    readonly trailLength?: number;
+    readonly scale?: number;
+    readonly verticalFade?: [number, number];
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class StarSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: StarSimulationConfig = {}) {
+        super(canvas, new StarLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/stars/types.ts

@@ -0,0 +1,12 @@
+export type { ShootingStar } from '../shooting-stars/types';
+
+export type StarMode = 'sky' | 'shooting' | 'both';
+
+export type Star = {
+    x: number;
+    y: number;
+    size: number;
+    twinklePhase: number;
+    twinkleSpeed: number;
+    brightness: number;
+};

package/src/streamers/consts.ts

@@ -0,0 +1,14 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const STREAMER_COLORS: string[] = [
+    '#ff6b6b', // red
+    '#ffd93d', // yellow
+    '#6bcb77', // green
+    '#4d96ff', // blue
+    '#ff6bb5', // pink
+    '#845ec2', // purple
+    '#ff9671', // coral
+    '#00c9a7'  // teal
+];

package/src/streamers/index.ts

@@ -0,0 +1,4 @@
+export { StreamerLayer } from './layer';
+export { StreamerSimulation } from './simulation';
+export type { StreamerSimulationConfig } from './simulation';
+export type { Streamer } from './types';

package/src/streamers/layer.ts

@@ -0,0 +1,211 @@
+import { SimulationLayer } from '../layer';
+import { MULBERRY, STREAMER_COLORS } from './consts';
+import type { StreamerSimulationConfig } from './simulation';
+import type { Streamer } from './types';
+
+export class StreamerLayer extends SimulationLayer {
+    readonly #colors: string[];
+    readonly #scale: number;
+    readonly #speed: number;
+    #count: number;
+    #streamers: Streamer[] = [];
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: StreamerSimulationConfig = {}) {
+        super();
+
+        this.#colors = config.colors ?? STREAMER_COLORS;
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#count = config.count ?? 20;
+
+        if (innerWidth < 991) {
+            this.#count = Math.floor(this.#count / 2);
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#streamers = [];
+
+            for (let i = 0; i < this.#count; i++) {
+                this.#streamers.push(this.#createStreamer(true));
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#streamers.length; i++) {
+            const streamer = this.#streamers[i];
+
+            streamer.y += streamer.fallSpeed * this.#speed * dt;
+            streamer.swayPhase += streamer.swaySpeed * dt;
+
+            const swayOffset = Math.sin(streamer.swayPhase) * streamer.swayAmplitude;
+            streamer.x += swayOffset * dt * 0.3;
+
+            this.#updateSegments(streamer, dt);
+
+            const tail = streamer.segments[streamer.segments.length - 1];
+            const tailY = tail ? tail.y : streamer.y;
+
+            if (tailY > height + 50) {
+                this.#streamers[alive++] = this.#createStreamer(false);
+            } else {
+                this.#streamers[alive++] = streamer;
+            }
+        }
+
+        this.#streamers.length = alive;
+
+        while (this.#streamers.length < this.#count) {
+            this.#streamers.push(this.#createStreamer(false));
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        for (const streamer of this.#streamers) {
+            this.#drawStreamer(ctx, streamer);
+        }
+    }
+
+    #createStreamer(initialSpread: boolean): Streamer {
+        const scale = this.#scale;
+        const segmentCount = 12 + Math.floor(MULBERRY.next() * 8);
+        const length = (80 + MULBERRY.next() * 120) * scale;
+        const width = (3 + MULBERRY.next() * 5) * scale;
+        const startX = MULBERRY.next() * this.#width;
+        const startY = initialSpread
+            ? MULBERRY.next() * this.#height
+            : -(MULBERRY.next() * 100 + length);
+        const depth = 0.4 + MULBERRY.next() * 0.6;
+        const curl = (0.3 + MULBERRY.next() * 0.7) * scale;
+        const fallSpeed = (1.5 + MULBERRY.next() * 2.5) * depth * scale;
+        const swayAmplitude = (0.3 + MULBERRY.next() * 0.6) * scale;
+        const swaySpeed = 0.02 + MULBERRY.next() * 0.04;
+        const swayPhase = MULBERRY.next() * Math.PI * 2;
+        const color = this.#colors[Math.floor(MULBERRY.next() * this.#colors.length)];
+
+        const segments: {x: number; y: number}[] = [];
+        const segmentLength = length / segmentCount;
+
+        for (let i = 0; i < segmentCount; i++) {
+            segments.push({
+                x: startX + Math.sin(i * curl * 0.5) * curl * 8,
+                y: startY - i * segmentLength
+            });
+        }
+
+        return {
+            x: startX,
+            y: startY,
+            length,
+            width,
+            segments,
+            fallSpeed,
+            swayPhase,
+            swaySpeed,
+            swayAmplitude,
+            color,
+            curl,
+            depth
+        };
+    }
+
+    #updateSegments(streamer: Streamer, dt: number): void {
+        const segments = streamer.segments;
+
+        if (segments.length === 0) {
+            return;
+        }
+
+        segments[0].x = streamer.x;
+        segments[0].y = streamer.y;
+
+        const segmentLength = streamer.length / segments.length;
+
+        for (let i = 1; i < segments.length; i++) {
+            const prev = segments[i - 1];
+            const curr = segments[i];
+
+            const curlOffset = Math.sin(streamer.swayPhase + i * streamer.curl * 0.8) * streamer.curl * 6;
+
+            const targetX = prev.x + curlOffset;
+            const targetY = prev.y - segmentLength;
+
+            const follow = 0.08 * dt;
+            curr.x += (targetX - curr.x) * follow;
+            curr.y += (targetY - curr.y) * follow;
+
+            const dx = curr.x - prev.x;
+            const dy = curr.y - prev.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+
+            if (dist > segmentLength * 1.5) {
+                const nx = dx / dist;
+                const ny = dy / dist;
+                curr.x = prev.x + nx * segmentLength * 1.5;
+                curr.y = prev.y + ny * segmentLength * 1.5;
+            }
+        }
+    }
+
+    #drawStreamer(ctx: CanvasRenderingContext2D, streamer: Streamer): void {
+        const segments = streamer.segments;
+
+        if (segments.length < 2) {
+            return;
+        }
+
+        const alpha = 0.6 + streamer.depth * 0.4;
+        const maxWidth = streamer.width * streamer.depth;
+        const last = segments[segments.length - 1];
+
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+
+        ctx.beginPath();
+        ctx.moveTo(segments[0].x, segments[0].y);
+
+        for (let i = 1; i < segments.length - 1; i++) {
+            const curr = segments[i];
+            const next = segments[i + 1];
+            const midX = (curr.x + next.x) / 2;
+            const midY = (curr.y + next.y) / 2;
+
+            ctx.quadraticCurveTo(curr.x, curr.y, midX, midY);
+        }
+
+        ctx.lineTo(last.x, last.y);
+
+        const gradient = ctx.createLinearGradient(
+            segments[0].x, segments[0].y,
+            last.x, last.y
+        );
+        gradient.addColorStop(0, this.#adjustAlpha(streamer.color, alpha * 0.3));
+        gradient.addColorStop(0.3, this.#adjustAlpha(streamer.color, alpha));
+        gradient.addColorStop(0.7, this.#adjustAlpha(streamer.color, alpha));
+        gradient.addColorStop(1, this.#adjustAlpha(streamer.color, alpha * 0.1));
+
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = maxWidth;
+        ctx.stroke();
+    }
+
+    #adjustAlpha(color: string, alpha: number): string {
+        const clampedAlpha = Math.max(0, Math.min(1, alpha));
+        return color + Math.round(clampedAlpha * 255).toString(16).padStart(2, '0');
+    }
+}

package/src/streamers/simulation.ts

@@ -0,0 +1,16 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { StreamerLayer } from './layer';
+
+export interface StreamerSimulationConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly speed?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class StreamerSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: StreamerSimulationConfig = {}) {
+        super(canvas, new StreamerLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/streamers/types.ts

@@ -0,0 +1,14 @@
+export type Streamer = {
+    x: number;
+    y: number;
+    length: number;
+    width: number;
+    segments: {x: number; y: number}[];
+    fallSpeed: number;
+    swayPhase: number;
+    swaySpeed: number;
+    swayAmplitude: number;
+    color: string;
+    curl: number;
+    depth: number;
+};

package/src/trail.ts

@@ -0,0 +1,140 @@
+import { distance } from './distance';
+import { Spark } from './fireworks/spark';
+import type { Point } from './point';
+
+export interface TrailConfig {
+    readonly acceleration?: number;
+    readonly brightness?: number;
+    readonly glow?: number;
+    readonly hue?: number;
+    readonly length?: number;
+    readonly speed?: number;
+    readonly width?: number;
+}
+
+export class Trail {
+    readonly #startPosition: Point;
+    readonly #position: Point;
+    readonly #angle: number;
+    readonly #totalDistance: number;
+    readonly #trail: Point[];
+    readonly #acceleration: number;
+    readonly #brightness: number;
+    readonly #glow: number;
+    readonly #hue: number;
+    readonly #width: number;
+    #speed: number;
+    #distanceTraveled: number = 0;
+    #isDone: boolean = false;
+    #sparkTimer: number = 0;
+    #pendingSparks: Spark[] = [];
+
+    get hue(): number {
+        return this.#hue;
+    }
+
+    get isDone(): boolean {
+        return this.#isDone;
+    }
+
+    get position(): Point {
+        return {...this.#position};
+    }
+
+    collectSparks(): Spark[] {
+        const sparks = this.#pendingSparks;
+        this.#pendingSparks = [];
+        return sparks;
+    }
+
+    constructor(start: Point, end: Point, config: TrailConfig = {}) {
+        this.#startPosition = {...start};
+        this.#position = {...start};
+        this.#angle = Math.atan2(end.y - start.y, end.x - start.x);
+        this.#totalDistance = distance(start, end);
+        this.#acceleration = config.acceleration ?? 1.05;
+        this.#brightness = config.brightness ?? 65;
+        this.#glow = config.glow ?? 10;
+        this.#hue = config.hue ?? Math.random() * 360;
+        this.#speed = config.speed ?? 1;
+        this.#width = config.width ?? 2;
+
+        const length = config.length ?? 6;
+        this.#trail = Array.from({length}, () => ({...start}));
+    }
+
+    draw(ctx: CanvasRenderingContext2D): void {
+        if (this.#isDone) {
+            return;
+        }
+
+        ctx.save();
+        ctx.lineCap = 'round';
+
+        for (let i = this.#trail.length - 1; i > 0; i--) {
+            const progress = i / this.#trail.length;
+            const alpha = (1 - progress) * 0.8;
+            const width = this.#width * (1 - progress * 0.5);
+
+            ctx.beginPath();
+            ctx.moveTo(this.#trail[i].x, this.#trail[i].y);
+            ctx.lineTo(this.#trail[i - 1].x, this.#trail[i - 1].y);
+            ctx.lineWidth = width;
+            ctx.strokeStyle = `hsla(${this.#hue}, 100%, ${this.#brightness}%, ${alpha})`;
+            ctx.stroke();
+        }
+
+        ctx.shadowBlur = this.#glow;
+        ctx.shadowColor = `hsl(${this.#hue}, 100%, 60%)`;
+
+        ctx.beginPath();
+        ctx.moveTo(this.#trail[0].x, this.#trail[0].y);
+        ctx.lineTo(this.#position.x, this.#position.y);
+        ctx.lineWidth = this.#width;
+        ctx.strokeStyle = `hsl(${this.#hue}, 100%, ${this.#brightness}%)`;
+        ctx.stroke();
+
+        ctx.shadowBlur = this.#glow * 1.5;
+        ctx.shadowColor = `hsl(${this.#hue}, 80%, 80%)`;
+        ctx.beginPath();
+        ctx.arc(this.#position.x, this.#position.y, this.#width * 0.6, 0, Math.PI * 2);
+        ctx.fillStyle = `hsl(${this.#hue}, 20%, 92%)`;
+        ctx.fill();
+
+        ctx.restore();
+    }
+
+    tick(dt: number = 1): void {
+        if (this.#isDone) {
+            return;
+        }
+
+        this.#trail.pop();
+        this.#trail.unshift({...this.#position});
+
+        this.#speed *= Math.pow(this.#acceleration, dt);
+
+        const vx = Math.cos(this.#angle) * this.#speed;
+        const vy = Math.sin(this.#angle) * this.#speed;
+
+        this.#distanceTraveled = distance(this.#startPosition, {
+            x: this.#position.x + vx * dt,
+            y: this.#position.y + vy * dt
+        });
+
+        if (this.#distanceTraveled >= this.#totalDistance) {
+            this.#isDone = true;
+            return;
+        }
+
+        this.#position.x += vx * dt;
+        this.#position.y += vy * dt;
+
+        this.#sparkTimer += dt;
+
+        if (this.#sparkTimer >= 3) {
+            this.#sparkTimer -= 3;
+            this.#pendingSparks.push(new Spark(this.#position, this.#hue, -vx * 0.1, -vy * 0.1));
+        }
+    }
+}

package/src/waves/consts.ts

@@ -0,0 +1,3 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);

package/src/waves/index.ts

@@ -0,0 +1,4 @@
+export { WaveLayer } from './layer';
+export { WaveSimulation } from './simulation';
+export type { WaveSimulationConfig } from './simulation';
+export type { Wave } from './types';