@basmilius/sparkle 1.0.0 → 2.1.0

package/src/fireworks/simulation.ts

@@ -1,493 +1,18 @@
-import { LimitedFrameRateCanvas } from '../canvas';
+import { SimulationCanvas } from '../simulation-canvas';
+import { FireworkLayer } from './layer';
 import type { Point } from '../point';
-import { MULBERRY } from './consts';
-import { Explosion } from './explosion';
-import { Firework } from './firework';
-import { Spark } from './spark';
-import { EXPLOSION_CONFIGS, type ExplosionType, type FireworkSimulationConfig, type FireworkVariant } from './types';
+import type { FireworkSimulationConfig, FireworkVariant } from './types';
 
-export class FireworkSimulation extends LimitedFrameRateCanvas {
-    #explosions: Explosion[] = [];
-    #fireworks: Firework[] = [];
-    #sparks: Spark[] = [];
-    #hue: number = 120;
-    #positionRandom = MULBERRY.fork();
-    readonly #autoSpawn: boolean;
-    readonly #baseSize: number;
-    readonly #scale: number;
-    readonly #tailWidth: number;
+export class FireworkSimulation extends SimulationCanvas {
+    readonly #layer: FireworkLayer;
 
     constructor(canvas: HTMLCanvasElement, config: FireworkSimulationConfig = {}) {
-        super(canvas, 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
-
-        const scale = config.scale ?? 1;
-        this.#autoSpawn = config.autoSpawn ?? true;
-        this.#baseSize = 5 * scale;
-        this.#scale = scale;
-        this.#tailWidth = 2 * scale;
-
-        this.canvas.style.position = 'absolute';
-        this.canvas.style.top = '0';
-        this.canvas.style.left = '0';
-        this.canvas.style.height = '100%';
-        this.canvas.style.width = '100%';
-    }
-
-    draw(): void {
-        if (this.canvas.width !== this.width || this.canvas.height !== this.height) {
-            this.canvas.width = this.width;
-            this.canvas.height = this.height;
-        }
-
-        this.context.clearRect(0, 0, this.width, this.height);
-        this.context.globalCompositeOperation = 'lighter';
-
-        for (const spark of this.#sparks) {
-            spark.draw(this.context);
-        }
-
-        for (const explosion of this.#explosions) {
-            explosion.draw(this.context);
-        }
-
-        for (const firework of this.#fireworks) {
-            firework.draw(this.context);
-        }
+        const layer = new FireworkLayer(config);
+        super(canvas, layer, 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+        this.#layer = layer;
     }
 
     fireExplosion(variant: FireworkVariant, position?: Point): void {
-        const pos = position ?? {x: this.width / 2, y: this.height * 0.4};
-        this.#hue = MULBERRY.nextBetween(0, 360);
-        this.#createExplosion(pos, this.#hue, variant);
-    }
-
-    tick(): void {
-        if (this.#autoSpawn && this.#fireworks.length < 6 && this.ticks % (this.isSmall ? 60 : 30) === 0) {
-            let count = MULBERRY.nextBetween(1, 100) < 10 ? 2 : 1;
-
-            while (count--) {
-                this.#hue = MULBERRY.nextBetween(0, 360);
-                this.#createFirework();
-            }
-        }
-
-        for (const firework of this.#fireworks) {
-            firework.tick();
-            this.#sparks.push(...firework.collectSparks());
-        }
-
-        for (const explosion of this.#explosions) {
-            explosion.tick();
-        }
-
-        for (const spark of this.#sparks) {
-            spark.tick();
-        }
-
-        const newExplosions: Explosion[] = [];
-        const newSparks: Spark[] = [];
-
-        for (const explosion of this.#explosions) {
-            if (explosion.checkSplit()) {
-                for (let i = 0; i < 4; i++) {
-                    const angle = explosion.angle + (Math.PI / 2) * i + Math.PI / 4;
-
-                    newExplosions.push(new Explosion(
-                        explosion.position,
-                        explosion.hue,
-                        this.#baseSize * 0.6,
-                        'peony',
-                        this.#scale,
-                        angle,
-                        MULBERRY.nextBetween(3, 6)
-                    ));
-                }
-            }
-
-            if (explosion.checkCrackle()) {
-                for (let j = 0; j < 8; j++) {
-                    newSparks.push(new Spark(
-                        explosion.position,
-                        explosion.hue + MULBERRY.nextBetween(-30, 30)
-                    ));
-                }
-            }
-        }
-
-        this.#explosions.push(...newExplosions);
-        this.#sparks.push(...newSparks);
-
-        this.#explosions = this.#explosions.filter(e => !e.isDead);
-        this.#sparks = this.#sparks.filter(s => !s.isDead);
-    }
-
-    #createExplosion(position: Point, hue: number, variant?: FireworkVariant): void {
-        const selected = variant ?? this.#pickVariant();
-
-        if (selected === 'saturn') {
-            this.#createSaturnExplosion(position, hue);
-            return;
-        }
-
-        if (selected === 'dahlia') {
-            this.#createDahliaExplosion(position, hue);
-            return;
-        }
-
-        if (selected === 'heart') {
-            this.#createHeartExplosion(position, hue);
-            return;
-        }
-
-        if (selected === 'spiral') {
-            this.#createSpiralExplosion(position, hue);
-            return;
-        }
-
-        if (selected === 'flower') {
-            this.#createFlowerExplosion(position, hue);
-            return;
-        }
-
-        if (selected === 'concentric') {
-            this.#createConcentricExplosion(position, hue);
-            return;
-        }
-
-        const type: ExplosionType = selected;
-        const config = EXPLOSION_CONFIGS[type];
-        const particleCount = Math.floor(MULBERRY.nextBetween(config.particleCount[0], config.particleCount[1]));
-
-        const effectiveHue = type === 'brocade'
-            ? MULBERRY.nextBetween(35, 50)
-            : hue;
-
-        for (let i = 0; i < particleCount; i++) {
-            let angle: number | undefined;
-            let speed: number | undefined;
-
-            if (type === 'ring') {
-                angle = (i / particleCount) * Math.PI * 2;
-                speed = MULBERRY.nextBetween(config.speed[0], config.speed[1]) * 0.5 + config.speed[0] * 0.5;
-            } else if (type === 'palm' || type === 'horsetail') {
-                const spread = type === 'horsetail' ? Math.PI / 8 : Math.PI / 5;
-                angle = -Math.PI / 2 + MULBERRY.nextBetween(-spread, spread);
-            }
-
-            this.#explosions.push(new Explosion(position, effectiveHue, this.#baseSize, type, this.#scale, angle, speed));
-        }
-    }
-
-    #createSaturnExplosion(position: Point, hue: number): void {
-        const velocity = MULBERRY.nextBetween(4, 6);
-
-        // Outer shell — evenly spaced circle
-        const shellCount = Math.floor(MULBERRY.nextBetween(25, 35));
-
-        for (let i = 0; i < shellCount; i++) {
-            const rad = (i / shellCount) * Math.PI * 2;
-
-            this.#explosions.push(new Explosion(
-                position,
-                hue,
-                this.#baseSize,
-                'peony',
-                this.#scale,
-                rad + MULBERRY.nextBetween(-0.05, 0.05),
-                velocity + MULBERRY.nextBetween(-0.25, 0.25)
-            ));
-        }
-
-        // Filled interior — random speeds from 0 to velocity for sphere fill
-        const fillCount = Math.floor(MULBERRY.nextBetween(40, 60));
-
-        for (let i = 0; i < fillCount; i++) {
-            const rad = MULBERRY.nextBetween(0, Math.PI * 2);
-            const speed = velocity * MULBERRY.nextBetween(0, 1);
-
-            this.#explosions.push(new Explosion(
-                position,
-                hue,
-                this.#baseSize,
-                'peony',
-                this.#scale,
-                rad,
-                speed
-            ));
-        }
-
-        // Elliptical ring — rotated 2D ellipse with z-depth
-        const ringRotation = MULBERRY.nextBetween(0, Math.PI * 2);
-        const ringCount = Math.floor(MULBERRY.nextBetween(40, 55));
-        const ringVx = velocity * MULBERRY.nextBetween(2, 3);
-        const ringVy = velocity * 0.6;
-
-        for (let i = 0; i < ringCount; i++) {
-            const rad = (i / ringCount) * Math.PI * 2;
-
-            const cx = Math.cos(rad) * ringVx + MULBERRY.nextBetween(-0.25, 0.25);
-            const cy = Math.sin(rad) * ringVy + MULBERRY.nextBetween(-0.25, 0.25);
-
-            const cosR = Math.cos(ringRotation);
-            const sinR = Math.sin(ringRotation);
-            const vx = cx * cosR - cy * sinR;
-            const vy = cx * sinR + cy * cosR;
-
-            const screenAngle = Math.atan2(vy, vx);
-            const screenSpeed = Math.sqrt(vx * vx + vy * vy);
-            const vz = Math.sin(rad) * velocity * 0.8;
-
-            this.#explosions.push(new Explosion(
-                position,
-                hue + 60,
-                this.#baseSize,
-                'ring',
-                this.#scale,
-                screenAngle,
-                screenSpeed,
-                vz
-            ));
-        }
-    }
-
-    #createDahliaExplosion(position: Point, hue: number): void {
-        const petalCount = Math.floor(MULBERRY.nextBetween(6, 9));
-        const particlesPerPetal = Math.floor(MULBERRY.nextBetween(8, 12));
-
-        for (let petal = 0; petal < petalCount; petal++) {
-            const baseAngle = (petal / petalCount) * Math.PI * 2;
-            const petalHue = hue + (petal % 2 === 0 ? 25 : -25);
-
-            for (let i = 0; i < particlesPerPetal; i++) {
-                const angle = baseAngle + MULBERRY.nextBetween(-0.3, 0.3);
-
-                this.#explosions.push(new Explosion(
-                    position,
-                    petalHue,
-                    this.#baseSize,
-                    'dahlia',
-                    this.#scale,
-                    angle
-                ));
-            }
-        }
-    }
-
-    #createHeartExplosion(position: Point, hue: number): void {
-        const velocity = MULBERRY.nextBetween(3, 5);
-        const count = Math.floor(MULBERRY.nextBetween(60, 80));
-        const rotation = MULBERRY.nextBetween(-0.3, 0.3);
-
-        for (let i = 0; i < count; i++) {
-            const t = (i / count) * Math.PI * 2;
-
-            // Parametric heart curve
-            const hx = 16 * Math.pow(Math.sin(t), 3);
-            const hy = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
-
-            const scale = velocity / 16;
-            const vx = hx * scale;
-            const vy = hy * scale;
-
-            // Rotate slightly
-            const cosR = Math.cos(rotation);
-            const sinR = Math.sin(rotation);
-            const rvx = vx * cosR - vy * sinR;
-            const rvy = vx * sinR + vy * cosR;
-
-            const angle = Math.atan2(rvy, rvx);
-            const speed = Math.sqrt(rvx * rvx + rvy * rvy);
-
-            this.#explosions.push(new Explosion(
-                position,
-                hue,
-                this.#baseSize,
-                'heart',
-                this.#scale,
-                angle,
-                Math.max(0.1, speed + MULBERRY.nextBetween(-0.15, 0.15))
-            ));
-        }
-    }
-
-    #createSpiralExplosion(position: Point, hue: number): void {
-        const arms = Math.floor(MULBERRY.nextBetween(3, 5));
-        const particlesPerArm = Math.floor(MULBERRY.nextBetween(15, 20));
-        const twist = MULBERRY.nextBetween(2, 3.5);
-        const baseRotation = MULBERRY.nextBetween(0, Math.PI * 2);
-
-        for (let arm = 0; arm < arms; arm++) {
-            const baseAngle = baseRotation + (arm / arms) * Math.PI * 2;
-            const armHue = hue + arm * (360 / arms / 3);
-
-            for (let i = 0; i < particlesPerArm; i++) {
-                const progress = i / particlesPerArm;
-                const angle = baseAngle + progress * twist;
-                const speed = 2 + progress * 8;
-
-                this.#explosions.push(new Explosion(
-                    position,
-                    armHue,
-                    this.#baseSize,
-                    'spiral',
-                    this.#scale,
-                    angle,
-                    speed + MULBERRY.nextBetween(-0.3, 0.3)
-                ));
-            }
-        }
-    }
-
-    #createFlowerExplosion(position: Point, hue: number): void {
-        const velocity = MULBERRY.nextBetween(4, 7);
-        const count = Math.floor(MULBERRY.nextBetween(70, 90));
-        const petals = Math.floor(MULBERRY.nextBetween(2, 4));
-        const rotation = MULBERRY.nextBetween(0, Math.PI * 2);
-
-        for (let i = 0; i < count; i++) {
-            const t = (i / count) * Math.PI * 2;
-
-            // Rose curve: r = |cos(n * theta)|
-            const r = Math.abs(Math.cos(petals * t));
-            const speed = velocity * r;
-
-            if (speed < 0.3) {
-                continue;
-            }
-
-            this.#explosions.push(new Explosion(
-                position,
-                hue + MULBERRY.nextBetween(-15, 15),
-                this.#baseSize,
-                'flower',
-                this.#scale,
-                t + rotation,
-                speed + MULBERRY.nextBetween(-0.2, 0.2)
-            ));
-        }
-    }
-
-    #createConcentricExplosion(position: Point, hue: number): void {
-        const outerCount = Math.floor(MULBERRY.nextBetween(35, 50));
-        const outerSpeed = MULBERRY.nextBetween(7, 10);
-
-        for (let i = 0; i < outerCount; i++) {
-            const angle = (i / outerCount) * Math.PI * 2;
-
-            this.#explosions.push(new Explosion(
-                position,
-                hue,
-                this.#baseSize,
-                'ring',
-                this.#scale,
-                angle + MULBERRY.nextBetween(-0.05, 0.05),
-                outerSpeed + MULBERRY.nextBetween(-0.25, 0.25)
-            ));
-        }
-
-        const innerCount = Math.floor(MULBERRY.nextBetween(25, 35));
-        const innerSpeed = MULBERRY.nextBetween(3, 5);
-
-        for (let i = 0; i < innerCount; i++) {
-            const angle = (i / innerCount) * Math.PI * 2;
-
-            this.#explosions.push(new Explosion(
-                position,
-                hue + 120,
-                this.#baseSize,
-                'ring',
-                this.#scale,
-                angle + MULBERRY.nextBetween(-0.05, 0.05),
-                innerSpeed + MULBERRY.nextBetween(-0.25, 0.25)
-            ));
-        }
-    }
-
-    #createFirework(position?: Point): void {
-        const hue = this.#hue;
-        const targetX = position?.x || this.#positionRandom.nextBetween(this.width * .1, this.width * .9);
-        const targetY = position?.y || this.height * .1 + this.#positionRandom.nextBetween(0, this.height * .5);
-        const startX = this.width * 0.3 + this.#positionRandom.nextBetween(0, this.width * 0.4);
-
-        const firework = new Firework(
-            {x: startX, y: this.height},
-            {x: targetX, y: targetY},
-            hue,
-            this.#tailWidth,
-            this.#baseSize
-        );
-
-        firework.addEventListener('remove', () => {
-            this.#fireworks.splice(this.#fireworks.indexOf(firework), 1);
-            this.#createExplosion(firework.position, hue);
-        }, {once: true});
-
-        this.#fireworks.push(firework);
-    }
-
-    #pickVariant(): FireworkVariant {
-        const roll = MULBERRY.nextBetween(0, 100);
-
-        if (roll < 12) {
-            return 'peony';
-        }
-
-        if (roll < 22) {
-            return 'chrysanthemum';
-        }
-
-        if (roll < 29) {
-            return 'willow';
-        }
-
-        if (roll < 34) {
-            return 'ring';
-        }
-
-        if (roll < 39) {
-            return 'palm';
-        }
-
-        if (roll < 44) {
-            return 'crackle';
-        }
-
-        if (roll < 48) {
-            return 'crossette';
-        }
-
-        if (roll < 55) {
-            return 'saturn';
-        }
-
-        if (roll < 62) {
-            return 'dahlia';
-        }
-
-        if (roll < 67) {
-            return 'brocade';
-        }
-
-        if (roll < 71) {
-            return 'horsetail';
-        }
-
-        if (roll < 75) {
-            return 'strobe';
-        }
-
-        if (roll < 82) {
-            return 'heart';
-        }
-
-        if (roll < 89) {
-            return 'spiral';
-        }
-
-        if (roll < 94) {
-            return 'flower';
-        }
-
-        return 'concentric';
+        this.#layer.fireExplosion(variant, position);
     }
 }

package/src/fireworks/spark.ts

@@ -37,14 +37,14 @@ export class Spark {
         ctx.fill();
     }
 
-    tick(): void {
-        this.#velocity.x *= this.#friction;
-        this.#velocity.y *= this.#friction;
-        this.#velocity.y += this.#gravity;
+    tick(dt: number): void {
+        this.#velocity.x *= Math.pow(this.#friction, dt);
+        this.#velocity.y *= Math.pow(this.#friction, dt);
+        this.#velocity.y += this.#gravity * dt;
 
-        this.#position.x += this.#velocity.x;
-        this.#position.y += this.#velocity.y;
+        this.#position.x += this.#velocity.x * dt;
+        this.#position.y += this.#velocity.y * dt;
 
-        this.#alpha -= this.#decay;
+        this.#alpha -= this.#decay * dt;
     }
 }

package/src/glitter/consts.ts

@@ -0,0 +1,13 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const GLITTER_COLORS: string[] = [
+    '#ffd700', // gold
+    '#c0c0c0', // silver
+    '#ff69b4', // pink
+    '#00bfff', // sky blue
+    '#ff4500', // orange-red
+    '#7fff00', // chartreuse
+    '#9370db'  // medium purple
+];

package/src/glitter/index.ts

@@ -0,0 +1,4 @@
+export { GlitterLayer } from './layer';
+export { GlitterSimulation } from './simulation';
+export type { GlitterSimulationConfig } from './simulation';
+export type { FallingGlitter, SettledGlitter } from './types';