@basmilius/sparkle 1.0.0

package/src/confetti/types.ts

@@ -0,0 +1,53 @@
+export type Config = {
+    readonly angle: number;
+    readonly colors: string[];
+    readonly decay: number;
+    readonly gravity: number;
+    readonly particles: number;
+    readonly shapes: Shape[];
+    readonly spread: number;
+    readonly ticks: number;
+    readonly startVelocity: number;
+    readonly x: number;
+    readonly y: number;
+};
+
+export type Particle = {
+    colorStr: string;
+    decay: number;
+    flipAngle: number;
+    flipSpeed: number;
+    gravity: number;
+    rotAngle: number;
+    rotCos: number;
+    rotSin: number;
+    rotSpeed: number;
+    shape: Shape;
+    size: number;
+    swing: number;
+    swingAmp: number;
+    swingSpeed: number;
+    tick: number;
+    totalTicks: number;
+    vx: number;
+    vy: number;
+    x: number;
+    y: number;
+};
+
+export type ParticleConfig = {
+    readonly angle: number;
+    readonly color: RGB;
+    readonly decay: number;
+    readonly gravity: number;
+    readonly shape: Shape;
+    readonly spread: number;
+    readonly startVelocity: number;
+    readonly ticks: number;
+    readonly x: number;
+    readonly y: number;
+};
+
+export type RGB = [r: number, g: number, b: number];
+
+export type Shape = 'circle' | 'diamond' | 'ribbon' | 'square' | 'star' | 'triangle';

package/src/distance.ts

@@ -0,0 +1,8 @@
+import type { Point } from './point';
+
+export function distance(a: Point, b: Point): number {
+    let x = a.x - b.x;
+    let y = a.y - b.y;
+
+    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+}

package/src/fireworks/consts.ts

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

package/src/fireworks/explosion.ts

@@ -0,0 +1,227 @@
+import type { Point } from '../point';
+import { MULBERRY } from './consts';
+import { EXPLOSION_CONFIGS, type ExplosionConfig, type ExplosionType, type ParticleShape } from './types';
+
+const PERSPECTIVE = 800;
+
+export class Explosion {
+    readonly #position: Point;
+    readonly #angle: number;
+    readonly #brightness: number;
+    readonly #config: ExplosionConfig;
+    readonly #decay: number;
+    readonly #hue: number;
+    readonly #lineWidth: number;
+    readonly #shape: ParticleShape;
+    readonly #trail: Point[] = [];
+    readonly #type: ExplosionType;
+    #alpha: number = 1;
+    #depthScale: number = 1;
+    #hasCrackled: boolean = false;
+    #hasSplit: boolean = false;
+    #speed: number;
+    #sparkleTimer: number = 0;
+    #vz: number;
+    #z: number = 0;
+
+    get angle(): number {
+        return this.#angle;
+    }
+
+    get hue(): number {
+        return this.#hue;
+    }
+
+    get isDead(): boolean {
+        return this.#alpha <= 0;
+    }
+
+    get position(): Point {
+        return this.#position;
+    }
+
+    get type(): ExplosionType {
+        return this.#type;
+    }
+
+    constructor(position: Point, hue: number, lineWidth: number, type: ExplosionType, scale: number = 1, angle?: number, speed?: number, vz?: number) {
+        const config = EXPLOSION_CONFIGS[type];
+
+        this.#config = config;
+        this.#type = type;
+        this.#shape = config.shape;
+        this.#position = {...position};
+        this.#alpha = 1;
+        this.#angle = angle ?? MULBERRY.nextBetween(0, Math.PI * 2);
+        this.#brightness = MULBERRY.nextBetween(config.brightness[0], config.brightness[1]);
+        this.#decay = MULBERRY.nextBetween(config.decay[0], config.decay[1]);
+        this.#hue = hue + MULBERRY.nextBetween(-config.hueVariation, config.hueVariation);
+        this.#lineWidth = lineWidth * config.lineWidthScale;
+        this.#speed = (speed ?? MULBERRY.nextBetween(config.speed[0], config.speed[1])) * scale;
+
+        if (vz !== undefined) {
+            this.#vz = vz * scale;
+        } else if (config.spread3d) {
+            this.#vz = MULBERRY.nextBetween(-this.#speed * 0.5, this.#speed * 0.5);
+        } else {
+            this.#vz = 0;
+        }
+
+        for (let i = 0; i < config.trailMemory; i++) {
+            this.#trail.push({...position});
+        }
+    }
+
+    checkCrackle(): boolean {
+        if (this.#type !== 'crackle' || this.#hasCrackled) {
+            return false;
+        }
+
+        if (this.#alpha <= this.#decay * 3) {
+            this.#hasCrackled = true;
+            return true;
+        }
+
+        return false;
+    }
+
+    checkSplit(): boolean {
+        if (this.#type !== 'crossette' || this.#hasSplit) {
+            return false;
+        }
+
+        if (this.#alpha < 0.5) {
+            this.#hasSplit = true;
+            return true;
+        }
+
+        return false;
+    }
+
+    draw(ctx: CanvasRenderingContext2D): void {
+        if (this.#config.strobe && this.#sparkleTimer % 6 < 3) {
+            return;
+        }
+
+        const ds = this.#depthScale;
+        const trailEnd = this.#trail[this.#trail.length - 1];
+        const effectiveWidth = this.#shape === 'line' ? this.#lineWidth * ds : this.#lineWidth * 0.4 * ds;
+        const effectiveAlpha = this.#alpha * Math.min(ds, 1.2);
+
+        ctx.save();
+        ctx.lineCap = 'round';
+
+        if (this.#trail.length > 2) {
+            for (let i = this.#trail.length - 1; i > 0; i--) {
+                const progress = i / this.#trail.length;
+                const alpha = (1 - progress) * effectiveAlpha * 0.5;
+                const width = effectiveWidth * (1 - progress * 0.4);
+
+                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 * 0.7}%, ${alpha})`;
+                ctx.stroke();
+            }
+        }
+
+        ctx.beginPath();
+        ctx.moveTo(trailEnd.x, trailEnd.y);
+        ctx.lineTo(this.#position.x, this.#position.y);
+        ctx.lineWidth = effectiveWidth;
+        ctx.strokeStyle = `hsla(${this.#hue}, 100%, ${this.#brightness}%, ${effectiveAlpha})`;
+        ctx.stroke();
+
+        if (this.#shape !== 'line') {
+            this.#drawShape(ctx, ds, effectiveAlpha);
+        }
+
+        if (this.#config.sparkle && this.#sparkleTimer % 4 < 2) {
+            ctx.beginPath();
+            ctx.arc(this.#position.x, this.#position.y, this.#lineWidth * 0.8 * ds, 0, Math.PI * 2);
+            ctx.fillStyle = `hsla(${this.#hue}, 30%, 95%, ${effectiveAlpha * 0.9})`;
+            ctx.fill();
+        }
+
+        ctx.restore();
+    }
+
+    tick(): void {
+        this.#trail.pop();
+        this.#trail.unshift({...this.#position});
+
+        this.#speed *= this.#config.friction;
+        this.#vz *= this.#config.friction;
+
+        this.#position.x += Math.cos(this.#angle) * this.#speed;
+        this.#position.y += Math.sin(this.#angle) * this.#speed + this.#config.gravity;
+        this.#z += this.#vz;
+
+        this.#depthScale = PERSPECTIVE / (PERSPECTIVE + this.#z);
+
+        this.#alpha -= this.#decay;
+        this.#sparkleTimer++;
+    }
+
+    #drawShape(ctx: CanvasRenderingContext2D, ds: number, alpha: number): void {
+        const size = this.#lineWidth * 1.2 * ds;
+        const color = `hsla(${this.#hue}, 100%, ${this.#brightness}%, ${alpha})`;
+
+        switch (this.#shape) {
+            case 'circle':
+                ctx.beginPath();
+                ctx.arc(this.#position.x, this.#position.y, size * 0.5, 0, Math.PI * 2);
+                ctx.fillStyle = color;
+                ctx.fill();
+                break;
+
+            case 'star':
+                this.#drawStarPath(ctx, this.#position.x, this.#position.y, size * 0.7, 4, this.#sparkleTimer * 0.15);
+                ctx.fillStyle = `hsla(${this.#hue}, 60%, ${Math.min(this.#brightness + 10, 100)}%, ${alpha})`;
+                ctx.fill();
+                break;
+
+            case 'diamond':
+                this.#drawDiamondPath(ctx, this.#position.x, this.#position.y, size * 0.6, this.#angle);
+                ctx.fillStyle = color;
+                ctx.fill();
+                break;
+        }
+    }
+
+    #drawStarPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, radius: number, points: number, rotation: number): void {
+        const innerRadius = radius * 0.4;
+        const totalPoints = points * 2;
+
+        ctx.beginPath();
+
+        for (let i = 0; i < totalPoints; i++) {
+            const r = i % 2 === 0 ? radius : innerRadius;
+            const angle = (i * Math.PI / points) + rotation;
+            const px = cx + Math.cos(angle) * r;
+            const py = cy + Math.sin(angle) * r;
+
+            if (i === 0) {
+                ctx.moveTo(px, py);
+            } else {
+                ctx.lineTo(px, py);
+            }
+        }
+
+        ctx.closePath();
+    }
+
+    #drawDiamondPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, size: number, rotation: number): void {
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+        const hw = size * 0.5;
+
+        ctx.beginPath();
+        ctx.moveTo(cx + cos * size - sin * 0, cy + sin * size + cos * 0);
+        ctx.lineTo(cx + cos * 0 - sin * hw, cy + sin * 0 + cos * hw);
+        ctx.lineTo(cx + cos * -size - sin * 0, cy + sin * -size + cos * 0);
+        ctx.lineTo(cx + cos * 0 - sin * -hw, cy + sin * 0 + cos * -hw);
+        ctx.closePath();
+    }
+}

package/src/fireworks/firework.ts

@@ -0,0 +1,123 @@
+import { distance } from '../distance';
+import type { Point } from '../point';
+import { FIREWORK_TRAIL_MEMORY, MULBERRY } from './consts';
+import { Spark } from './spark';
+
+export class Firework extends EventTarget {
+    readonly #position: Point;
+    readonly #startPosition: Point;
+    readonly #acceleration: number = 1.05;
+    readonly #angle: number;
+    readonly #baseSize: number;
+    readonly #brightness: number = MULBERRY.nextBetween(55, 75);
+    readonly #distance: number;
+    readonly #hue: number;
+    readonly #tailWidth: number;
+    readonly #trail: Point[] = [];
+    #distanceTraveled: number = 0;
+    #speed: number = 1;
+    #sparkTimer: number = 0;
+    #pendingSparks: Spark[] = [];
+
+    get position(): Point {
+        return this.#position;
+    }
+
+    get hue(): number {
+        return this.#hue;
+    }
+
+    constructor(start: Point, target: Point, hue: number, tailWidth: number, baseSize: number) {
+        super();
+
+        this.#hue = hue;
+        this.#tailWidth = tailWidth;
+        this.#baseSize = baseSize;
+        this.#position = {...start};
+        this.#startPosition = {...start};
+        this.#angle = Math.atan2(target.y - start.y, target.x - start.x);
+        this.#distance = distance(start, target);
+
+        for (let i = 0; i < FIREWORK_TRAIL_MEMORY; i++) {
+            this.#trail.push({...start});
+        }
+    }
+
+    collectSparks(): Spark[] {
+        const sparks = this.#pendingSparks;
+        this.#pendingSparks = [];
+        return sparks;
+    }
+
+    draw(ctx: CanvasRenderingContext2D): void {
+        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.#tailWidth * (1 - progress * 0.5);
+            const hue = this.#hue + MULBERRY.nextBetween(-15, 15);
+
+            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(${hue}, 100%, ${this.#brightness}%, ${alpha})`;
+            ctx.stroke();
+        }
+
+        ctx.shadowBlur = this.#baseSize * 4;
+        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.#tailWidth;
+        ctx.strokeStyle = `hsl(${this.#hue}, 100%, ${this.#brightness}%)`;
+        ctx.stroke();
+
+        ctx.shadowBlur = this.#baseSize * 6;
+        ctx.shadowColor = `hsl(${this.#hue}, 80%, 80%)`;
+        ctx.beginPath();
+        ctx.arc(this.#position.x, this.#position.y, this.#tailWidth * 0.6, 0, Math.PI * 2);
+        ctx.fillStyle = `hsl(${this.#hue}, 20%, 92%)`;
+        ctx.fill();
+
+        ctx.restore();
+    }
+
+    tick(): void {
+        this.#trail.pop();
+        this.#trail.unshift({...this.#position});
+
+        this.#speed *= this.#acceleration;
+
+        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,
+            y: this.#position.y + vy
+        });
+
+        if (this.#distanceTraveled >= this.#distance) {
+            this.dispatchEvent(new CustomEvent('remove'));
+            return;
+        }
+
+        this.#position.x += vx;
+        this.#position.y += vy;
+
+        this.#sparkTimer++;
+
+        if (this.#sparkTimer % 3 === 0) {
+            this.#pendingSparks.push(new Spark(
+                this.#position,
+                this.#hue,
+                -vx * 0.1,
+                -vy * 0.1
+            ));
+        }
+    }
+}

package/src/fireworks/index.ts

@@ -0,0 +1,3 @@
+export * from './simulation';
+export { FIREWORK_VARIANTS } from './types';
+export type { ExplosionType, FireworkSimulationConfig, FireworkVariant, ParticleShape } from './types';