@basmilius/sparkle 2.1.0 → 2.2.0

package/src/fireworks/layer.ts

@@ -1,30 +1,33 @@
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import type { Point } from '../point';
 import { MULBERRY } from './consts';
+import { createExplosion } from './create-explosion';
 import { Explosion } from './explosion';
 import { Firework } from './firework';
 import { Spark } from './spark';
-import { EXPLOSION_CONFIGS, type ExplosionType, type FireworkSimulationConfig, type FireworkVariant } from './types';
+import { FIREWORK_VARIANTS, type FireworksConfig, type FireworkVariant } from './types';
 
-export class FireworkLayer extends SimulationLayer {
+export class Fireworks extends Effect<FireworksConfig> {
     #explosions: Explosion[] = [];
     #fireworks: Firework[] = [];
     #sparks: Spark[] = [];
     #hue: number = 120;
     #spawnTimer: number = 0;
     #positionRandom = MULBERRY.fork();
-    readonly #autoSpawn: boolean;
+    #autoSpawn: boolean;
+    #variants: FireworkVariant[];
     readonly #baseSize: number;
-    readonly #scale: number;
+    #scale: number;
     readonly #tailWidth: number;
     #width: number = 960;
     #height: number = 540;
 
-    constructor(config: FireworkSimulationConfig = {}) {
+    constructor(config: FireworksConfig = {}) {
         super();
 
         const scale = config.scale ?? 1;
         this.#autoSpawn = config.autoSpawn ?? true;
+        this.#variants = config.variants?.length ? [...config.variants] : [...FIREWORK_VARIANTS];
         this.#baseSize = 5 * scale;
         this.#scale = scale;
         this.#tailWidth = 2 * scale;
@@ -35,10 +38,22 @@ export class FireworkLayer extends SimulationLayer {
         this.#height = height;
     }
 
-    fireExplosion(variant: FireworkVariant, position?: Point): void {
+    launch(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);
+        this.#spawnExplosion(pos, this.#hue, variant);
+    }
+
+    configure(config: Partial<FireworksConfig>): void {
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+        if (config.autoSpawn !== undefined) {
+            this.#autoSpawn = config.autoSpawn;
+        }
+        if (Array.isArray(config.variants) && config.variants.length > 0) {
+            this.#variants = [...config.variants];
+        }
     }
 
     tick(dt: number, width: number, height: number): void {
@@ -61,7 +76,10 @@ export class FireworkLayer extends SimulationLayer {
 
         for (const firework of this.#fireworks) {
             firework.tick(dt);
-            this.#sparks.push(...firework.collectSparks());
+            const collected = firework.collectSparks();
+            for (let i = 0; i < collected.length; i++) {
+                this.#sparks.push(collected[i]);
+            }
         }
 
         for (const explosion of this.#explosions) {
@@ -93,10 +111,15 @@ export class FireworkLayer extends SimulationLayer {
             }
 
             if (explosion.checkCrackle()) {
-                for (let j = 0; j < 8; j++) {
+                for (let j = 0; j < 14; j++) {
+                    const angle = MULBERRY.nextBetween(0, Math.PI * 2);
+                    const speed = MULBERRY.nextBetween(3, 8);
+
                     newSparks.push(new Spark(
                         explosion.position,
-                        explosion.hue + MULBERRY.nextBetween(-30, 30)
+                        explosion.hue + MULBERRY.nextBetween(-30, 30),
+                        Math.cos(angle) * speed,
+                        Math.sin(angle) * speed
                     ));
                 }
             }
@@ -105,8 +128,21 @@ export class FireworkLayer extends SimulationLayer {
         this.#explosions.push(...newExplosions);
         this.#sparks.push(...newSparks);
 
-        this.#explosions = this.#explosions.filter(e => !e.isDead);
-        this.#sparks = this.#sparks.filter(s => !s.isDead);
+        let aliveExplosions = 0;
+        for (let i = 0; i < this.#explosions.length; i++) {
+            if (!this.#explosions[i].isDead) {
+                this.#explosions[aliveExplosions++] = this.#explosions[i];
+            }
+        }
+        this.#explosions.length = aliveExplosions;
+
+        let aliveSparks = 0;
+        for (let i = 0; i < this.#sparks.length; i++) {
+            if (!this.#sparks[i].isDead) {
+                this.#sparks[aliveSparks++] = this.#sparks[i];
+            }
+        }
+        this.#sparks.length = aliveSparks;
     }
 
     draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
@@ -132,278 +168,10 @@ export class FireworkLayer extends SimulationLayer {
         ctx.globalCompositeOperation = 'source-over';
     }
 
-    #createExplosion(position: Point, hue: number, variant?: FireworkVariant): void {
+    #spawnExplosion(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);
-        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)
-            ));
-        }
-
-        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
-            ));
-        }
-
-        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;
-
-            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;
-
-            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;
-            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)
-            ));
-        }
+        const rng = () => MULBERRY.nextBetween(0, 1);
+        this.#explosions.push(...createExplosion(selected, position, hue, {lineWidth: this.#baseSize, scale: this.#scale}, rng));
     }
 
     #createFirework(position?: Point): void {
@@ -422,31 +190,14 @@ export class FireworkLayer extends SimulationLayer {
 
         firework.addEventListener('remove', () => {
             this.#fireworks.splice(this.#fireworks.indexOf(firework), 1);
-            this.#createExplosion(firework.position, hue);
+            this.#spawnExplosion(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';
+        const index = Math.floor(MULBERRY.nextBetween(0, this.#variants.length));
+        return this.#variants[index];
     }
 }

package/src/fireworks/spark.ts

@@ -8,7 +8,7 @@ export class Spark {
     readonly #size: number;
     readonly #decay: number;
     readonly #friction: number = 0.94;
-    readonly #gravity: number = 0.6;
+    readonly #gravity: number = 0.3;
     #alpha: number = 1;
 
     get isDead(): boolean {
@@ -26,7 +26,7 @@ export class Spark {
         this.#decay = MULBERRY.nextBetween(0.03, 0.08);
         this.#velocity = {
             x: velocityX + MULBERRY.nextBetween(-1.5, 1.5),
-            y: velocityY + MULBERRY.nextBetween(-2, 0.5)
+            y: velocityY + MULBERRY.nextBetween(-2, 2)
         };
     }
 

package/src/fireworks/types.ts

@@ -21,10 +21,10 @@ export interface ExplosionConfig {
     readonly glowSize: number;
 }
 
-export interface FireworkSimulationConfig {
+export interface FireworksConfig {
     readonly scale?: number;
     readonly autoSpawn?: boolean;
-    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+    readonly variants?: FireworkVariant[];
 }
 
 export const FIREWORK_VARIANTS: FireworkVariant[] = [

package/src/glitter/index.ts

@@ -1,4 +1,9 @@
-export { GlitterLayer } from './layer';
-export { GlitterSimulation } from './simulation';
-export type { GlitterSimulationConfig } from './simulation';
-export type { FallingGlitter, SettledGlitter } from './types';
+import { Glitter } from './layer';
+import type { GlitterConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createGlitter(config?: GlitterConfig): Effect<GlitterConfig> {
+    return new Glitter(config);
+}
+
+export type { GlitterConfig, FallingGlitter, SettledGlitter } from './types';

package/src/glitter/layer.ts

@@ -1,14 +1,13 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { GLITTER_COLORS, MULBERRY } from './consts';
-import type { GlitterSimulationConfig } from './simulation';
-import type { FallingGlitter, SettledGlitter } from './types';
+import type { FallingGlitter, GlitterConfig, SettledGlitter } from './types';
 
-export class GlitterLayer extends SimulationLayer {
+export class Glitter extends Effect<GlitterConfig> {
     readonly #scale: number;
     readonly #size: number;
-    readonly #speed: number;
-    readonly #groundLevel: number;
+    #speed: number;
+    #groundLevel: number;
     readonly #maxSettled: number;
     readonly #colorRGBs: [number, number, number][];
     #maxCount: number;
@@ -16,7 +15,7 @@ export class GlitterLayer extends SimulationLayer {
     #falling: FallingGlitter[] = [];
     #settled: SettledGlitter[] = [];
 
-    constructor(config: GlitterSimulationConfig = {}) {
+    constructor(config: GlitterConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -38,6 +37,15 @@ export class GlitterLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<GlitterConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.groundLevel !== undefined) {
+            this.#groundLevel = config.groundLevel;
+        }
+    }
+
     tick(dt: number, _width: number, _height: number): void {
         this.#time += 0.03 * dt;
 

package/src/glitter/types.ts

@@ -1,3 +1,13 @@
+export interface GlitterConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly groundLevel?: number;
+    readonly maxSettled?: number;
+    readonly scale?: number;
+}
+
 export type FallingGlitter = {
     x: number;
     y: number;

package/src/index.ts

@@ -1,18 +1,16 @@
 export * from './aurora';
-export * from './color';
 export * from './balloons';
 export * from './bubbles';
 export * from './canvas';
+export * from './color';
 export * from './confetti';
 export * from './donuts';
+export * from './effect';
 export * from './fireflies';
 export * from './firepit';
 export * from './fireworks';
 export * from './glitter';
 export * from './lanterns';
-export * from './layer';
-export * from './layered';
-export * from './simulation-canvas';
 export * from './leaves';
 export * from './lightning';
 export * from './matrix';
@@ -22,6 +20,7 @@ export * from './petals';
 export * from './plasma';
 export * from './rain';
 export * from './sandstorm';
+export * from './scene';
 export * from './shooting-stars';
 export * from './snow';
 export * from './sparklers';

package/src/lanterns/index.ts

@@ -1,4 +1,9 @@
-export { LanternLayer } from './layer';
-export { LanternSimulation } from './simulation';
-export type { LanternSimulationConfig } from './simulation';
-export type { Lantern } from './types';
+import { Lanterns } from './layer';
+import type { LanternsConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createLanterns(config?: LanternsConfig): Effect<LanternsConfig> {
+    return new Lanterns(config);
+}
+
+export type { LanternsConfig, Lantern } from './types';

package/src/lanterns/layer.ts

@@ -1,19 +1,20 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { LANTERN_COLORS, MULBERRY } from './consts';
-import type { LanternSimulationConfig } from './simulation';
-import type { Lantern } from './types';
+import type { Lantern, LanternsConfig } from './types';
 
-export class LanternLayer extends SimulationLayer {
+export class Lanterns extends Effect<LanternsConfig> {
     readonly #scale: number;
-    readonly #speed: number;
+    #speed: number;
     readonly #size: number;
     readonly #colorRGBs: [number, number, number][];
     #maxCount: number;
     #time: number = 0;
     #lanterns: Lantern[] = [];
+    #sortedLanterns: Lantern[] = [];
+    #sortDirty: boolean = true;
 
-    constructor(config: LanternSimulationConfig = {}) {
+    constructor(config: LanternsConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -33,6 +34,12 @@ export class LanternLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<LanternsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
     tick(dt: number, width: number, height: number): void {
         this.#time += 0.02 * dt * this.#speed;
 
@@ -46,13 +53,19 @@ export class LanternLayer extends SimulationLayer {
 
             if (lantern.y < -0.15) {
                 this.#lanterns[i] = this.#createLantern(false);
+                this.#sortDirty = true;
             }
         }
     }
 
     draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
 
-        const sorted = [...this.#lanterns].sort((a, b) => a.size - b.size);
+        if (this.#sortDirty) {
+            this.#sortedLanterns = [...this.#lanterns].sort((a, b) => a.size - b.size);
+            this.#sortDirty = false;
+        }
+
+        const sorted = this.#sortedLanterns;
 
         for (const lantern of sorted) {
             const px = lantern.x * width;
@@ -75,8 +88,7 @@ export class LanternLayer extends SimulationLayer {
             ctx.arc(px, py, glowRadius, 0, Math.PI * 2);
             ctx.fill();
 
-            ctx.save();
-            ctx.translate(px, py);
+            ctx.setTransform(1, 0, 0, 1, px, py);
 
             const bodyW = size * 0.8;
             const bodyH = size;
@@ -140,7 +152,7 @@ export class LanternLayer extends SimulationLayer {
             ctx.lineWidth = size * 0.04;
             ctx.stroke();
 
-            ctx.restore();
+            ctx.resetTransform();
         }
     }
 

package/src/lanterns/types.ts

@@ -1,3 +1,11 @@
+export interface LanternsConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly scale?: number;
+}
+
 export type Lantern = {
     x: number;
     y: number;