@basmilius/sparkle 2.1.0 → 2.3.0

package/src/simulation-canvas.ts

@@ -1,12 +1,17 @@
 import { LimitedFrameRateCanvas } from './canvas';
-import type { SimulationLayer } from './layer';
+import { applyEdgeFade } from './fade';
+import type { EdgeFade, SimulationLayer } from './layer';
 
 export class SimulationCanvas extends LimitedFrameRateCanvas {
     readonly #simulation: SimulationLayer;
+    readonly #contextOptions: CanvasRenderingContext2DSettings;
+    #offscreen: HTMLCanvasElement | null = null;
+    #offscreenCtx: CanvasRenderingContext2D | null = null;
 
     constructor(canvas: HTMLCanvasElement, simulation: SimulationLayer, frameRate: number = 60, options: CanvasRenderingContext2DSettings = {colorSpace: 'display-p3'}) {
         super(canvas, frameRate, options);
         this.#simulation = simulation;
+        this.#contextOptions = options;
 
         canvas.style.position = 'absolute';
         canvas.style.top = '0';
@@ -15,6 +20,11 @@ export class SimulationCanvas extends LimitedFrameRateCanvas {
         canvas.style.width = '100%';
     }
 
+    withFade(fade: EdgeFade): this {
+        this.#simulation.fade = fade;
+        return this;
+    }
+
     start(): void {
         this.#simulation.onMount(this.canvas);
         super.start();
@@ -26,13 +36,25 @@ export class SimulationCanvas extends LimitedFrameRateCanvas {
     }
 
     draw(): void {
-        this.canvas.height = this.height;
-        this.canvas.width = this.width;
+        const dpr = this.dpr;
+        this.canvas.height = this.height * dpr;
+        this.canvas.width = this.width * dpr;
 
         const ctx = this.context;
-        ctx.save();
-        this.#simulation.draw(ctx, this.width, this.height);
-        ctx.restore();
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+        if (this.#simulation.fade) {
+            const offCtx = this.#getOffscreenCtx(this.width * dpr, this.height * dpr);
+            offCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            offCtx.clearRect(0, 0, this.width, this.height);
+            this.#simulation.draw(offCtx, this.width, this.height);
+            applyEdgeFade(offCtx, this.width, this.height, this.#simulation.fade);
+            ctx.drawImage(this.#offscreen!, 0, 0, this.width, this.height);
+        } else {
+            ctx.save();
+            this.#simulation.draw(ctx, this.width, this.height);
+            ctx.restore();
+        }
     }
 
     tick(): void {
@@ -42,6 +64,23 @@ export class SimulationCanvas extends LimitedFrameRateCanvas {
 
     onResize(): void {
         super.onResize();
+
+        if (this.#offscreen) {
+            this.#offscreen.width = this.width * this.dpr;
+            this.#offscreen.height = this.height * this.dpr;
+        }
+
         this.#simulation.onResize(this.width, this.height);
     }
+
+    #getOffscreenCtx(width: number, height: number): CanvasRenderingContext2D {
+        if (!this.#offscreen) {
+            this.#offscreen = document.createElement('canvas');
+            this.#offscreen.width = width;
+            this.#offscreen.height = height;
+            this.#offscreenCtx = this.#offscreen.getContext('2d', this.#contextOptions)!;
+        }
+
+        return this.#offscreenCtx!;
+    }
 }

package/src/snow/index.ts

@@ -1,3 +1,9 @@
-export { SnowLayer } from './layer';
-export { SnowSimulation } from './simulation';
-export type { SnowSimulationConfig } from './simulation';
+import { Snow } from './layer';
+import type { SnowConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createSnow(config?: SnowConfig): Effect<SnowConfig> {
+    return new Snow(config);
+}
+
+export type { SnowConfig };

package/src/snow/layer.ts

@@ -1,17 +1,24 @@
 import { parseColor } from '../color';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MULBERRY } from './consts';
-import type { SnowSimulationConfig } from './simulation';
 import type { Snowflake } from './snowflake';
 
+export interface SnowConfig {
+    readonly fillStyle?: string;
+    readonly particles?: number;
+    readonly scale?: number;
+    readonly size?: number;
+    readonly speed?: number;
+}
+
 const SPRITE_SIZE = 64;
 const SPRITE_CENTER = SPRITE_SIZE / 2;
 const SPRITE_RADIUS = SPRITE_SIZE / 2;
 
-export class SnowLayer extends SimulationLayer {
+export class Snow extends Effect<SnowConfig> {
     readonly #scale: number;
     readonly #size: number;
-    readonly #speed: number;
+    #speed: number;
     readonly #baseOpacity: number;
     #maxParticles: number;
     #time: number = 0;
@@ -20,7 +27,7 @@ export class SnowLayer extends SimulationLayer {
     #sprites: HTMLCanvasElement[] = [];
     #height: number = 540;
 
-    constructor(config: SnowSimulationConfig = {}) {
+    constructor(config: SnowConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -42,6 +49,12 @@ export class SnowLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<SnowConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
     onResize(_width: number, height: number): void {
         this.#height = height;
     }
@@ -54,8 +67,8 @@ export class SnowLayer extends SimulationLayer {
         this.#time += 0.015 * speedFactor * dt;
 
         const wind = Math.sin(this.#time * 0.7) * 0.5
-                   + Math.sin(this.#time * 1.9 + 3) * 0.25
-                   + Math.sin(this.#time * 4.3 + 1) * 0.1;
+            + Math.sin(this.#time * 1.9 + 3) * 0.25
+            + Math.sin(this.#time * 4.3 + 1) * 0.1;
 
         for (let index = 0; index < this.#snowflakes.length; index++) {
             const snowflake = this.#snowflakes[index];
@@ -104,9 +117,9 @@ export class SnowLayer extends SimulationLayer {
             ctx.globalAlpha = this.#baseOpacity * (0.15 + snowflake.depth * 0.85);
 
             if (snowflake.spriteIndex === 3) {
-                ctx.save();
-                ctx.translate(px, py);
-                ctx.rotate(snowflake.rotation);
+                const cos = Math.cos(snowflake.rotation);
+                const sin = Math.sin(snowflake.rotation);
+                ctx.setTransform(cos, sin, -sin, cos, px, py);
                 ctx.drawImage(
                     this.#sprites[snowflake.spriteIndex],
                     -displayRadius,
@@ -114,7 +127,7 @@ export class SnowLayer extends SimulationLayer {
                     displaySize,
                     displaySize
                 );
-                ctx.restore();
+                ctx.resetTransform();
             } else {
                 ctx.drawImage(
                     this.#sprites[snowflake.spriteIndex],

package/src/sparklers/index.ts

@@ -1,6 +1,16 @@
-export { SparklerLayer } from './layer';
+import { Sparklers } from './layer';
+import type { SparklersConfig } from './layer';
+import type { Effect } from '../effect';
+
+export interface SparklersInstance extends Effect<SparklersConfig> {
+    moveTo(x: number, y: number): void;
+}
+
+export function createSparklers(config?: SparklersConfig): SparklersInstance {
+    return new Sparklers(config) as SparklersInstance;
+}
+
 export { SparklerParticle } from './particle';
-export { SparklerSimulation } from './simulation';
+export type { SparklersConfig };
 export type { SparklerParticleConfig } from './particle';
-export type { SparklerSimulationConfig } from './simulation';
 export type { SparklerSpark } from './types';

package/src/sparklers/layer.ts

@@ -1,30 +1,44 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MULBERRY } from './consts';
-import type { SparklerSimulationConfig } from './simulation';
 import type { SparklerSpark } from './types';
 
+export interface SparklersConfig {
+    readonly emitRate?: number;
+    readonly maxSparks?: number;
+    readonly colors?: string[];
+    readonly speed?: [number, number];
+    readonly friction?: number;
+    readonly gravity?: number;
+    readonly decay?: [number, number];
+    readonly trailLength?: number;
+    readonly hoverMode?: boolean;
+    readonly scale?: number;
+}
+
 const DEFAULT_COLORS = ['#ffcc33', '#ff9900', '#ffffff', '#ffee88'];
 
-export class SparklerLayer extends SimulationLayer {
-    readonly #scale: number;
-    readonly #emitRate: number;
+export class Sparklers extends Effect<SparklersConfig> {
+    #scale: number;
+    #emitRate: number;
     readonly #maxSparks: number;
     readonly #colorRGBs: [number, number, number][];
     readonly #speedRange: [number, number];
-    readonly #friction: number;
-    readonly #gravity: number;
+    #friction: number;
+    #gravity: number;
     readonly #decayRange: [number, number];
-    readonly #trailLength: number;
-    readonly #hoverMode: boolean;
+    #trailLength: number;
+    #hoverMode: boolean;
     readonly #onMouseMoveBound: (evt: MouseEvent) => void;
     readonly #onMouseLeaveBound: () => void;
     #emitX: number = 0.5;
     #emitY: number = 0.5;
     #mouseOnCanvas: boolean = false;
     #sparks: SparklerSpark[] = [];
+    #mountedCanvas: HTMLCanvasElement | null = null;
+    #cachedRect: DOMRect | null = null;
 
-    constructor(config: SparklerSimulationConfig = {}) {
+    constructor(config: SparklersConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -44,12 +58,15 @@ export class SparklerLayer extends SimulationLayer {
         this.#onMouseLeaveBound = this.#onMouseLeave.bind(this);
     }
 
-    setPosition(x: number, y: number): void {
+    moveTo(x: number, y: number): void {
         this.#emitX = x;
         this.#emitY = y;
     }
 
     onMount(canvas: HTMLCanvasElement): void {
+        this.#mountedCanvas = canvas;
+        this.#cachedRect = canvas.getBoundingClientRect();
+
         if (this.#hoverMode) {
             canvas.addEventListener('mousemove', this.#onMouseMoveBound, {passive: true});
             canvas.addEventListener('mouseleave', this.#onMouseLeaveBound, {passive: true});
@@ -59,6 +76,35 @@ export class SparklerLayer extends SimulationLayer {
     onUnmount(canvas: HTMLCanvasElement): void {
         canvas.removeEventListener('mousemove', this.#onMouseMoveBound);
         canvas.removeEventListener('mouseleave', this.#onMouseLeaveBound);
+        this.#mountedCanvas = null;
+        this.#cachedRect = null;
+    }
+
+    onResize(): void {
+        if (this.#mountedCanvas) {
+            this.#cachedRect = this.#mountedCanvas.getBoundingClientRect();
+        }
+    }
+
+    configure(config: Partial<SparklersConfig>): void {
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+        if (config.emitRate !== undefined) {
+            this.#emitRate = config.emitRate;
+        }
+        if (config.friction !== undefined) {
+            this.#friction = config.friction;
+        }
+        if (config.gravity !== undefined) {
+            this.#gravity = config.gravity;
+        }
+        if (config.trailLength !== undefined) {
+            this.#trailLength = config.trailLength;
+        }
+        if (config.hoverMode !== undefined) {
+            this.#hoverMode = config.hoverMode;
+        }
     }
 
     tick(dt: number, width: number, height: number): void {
@@ -70,6 +116,7 @@ export class SparklerLayer extends SimulationLayer {
             }
         }
 
+        const frictionFactor = Math.pow(this.#friction, dt);
         let alive = 0;
 
         for (let i = 0; i < this.#sparks.length; i++) {
@@ -81,8 +128,8 @@ export class SparklerLayer extends SimulationLayer {
                 spark.trail.shift();
             }
 
-            spark.vx *= Math.pow(this.#friction, dt);
-            spark.vy *= Math.pow(this.#friction, dt);
+            spark.vx *= frictionFactor;
+            spark.vy *= frictionFactor;
             spark.vy += this.#gravity * this.#scale * dt;
 
             spark.x += spark.vx * dt;
@@ -143,8 +190,7 @@ export class SparklerLayer extends SimulationLayer {
     }
 
     #onMouseMove(evt: MouseEvent): void {
-        const target = evt.currentTarget as HTMLCanvasElement;
-        const rect = target.getBoundingClientRect();
+        const rect = this.#cachedRect ?? (evt.currentTarget as HTMLCanvasElement).getBoundingClientRect();
         this.#emitX = (evt.clientX - rect.left) / rect.width;
         this.#emitY = (evt.clientY - rect.top) / rect.height;
         this.#mouseOnCanvas = true;

package/src/stars/index.ts

@@ -1,4 +1,10 @@
-export { StarLayer } from './layer';
-export { StarSimulation } from './simulation';
-export type { StarSimulationConfig } from './simulation';
+import { Stars } from './layer';
+import type { StarsConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createStars(config?: StarsConfig): Effect<StarsConfig> {
+    return new Stars(config);
+}
+
+export type { StarsConfig };
 export type { Star, StarMode, ShootingStar } from './types';

package/src/stars/layer.ts

@@ -1,29 +1,38 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 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 {
+export interface StarsConfig {
+    readonly mode?: 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;
+}
+
+export class Stars extends Effect<StarsConfig> {
     readonly #mode: StarMode;
-    readonly #twinkleSpeed: number;
+    #twinkleSpeed: number;
     readonly #colorRGB: [number, number, number];
-    readonly #scale: number;
-    readonly #verticalFade: [number, number] | null;
+    #scale: number;
     readonly #shootingStarSystem: ShootingStarSystem | null;
     #starCount: number;
     #time: number = 0;
     #stars: Star[] = [];
 
-    constructor(config: StarSimulationConfig = {}) {
+    constructor(config: StarsConfig = {}) {
         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');
 
@@ -42,8 +51,7 @@ export class StarLayer extends SimulationLayer {
                     alphaMin: 0.8,
                     alphaRange: 0.2,
                     decayMin: 0.01,
-                    decayRange: 0.015,
-                    verticalFade: this.#verticalFade ?? undefined
+                    decayRange: 0.015
                 },
                 () => MULBERRY.next()
             )
@@ -56,6 +64,15 @@ export class StarLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<StarsConfig>): void {
+        if (config.twinkleSpeed !== undefined) {
+            this.#twinkleSpeed = config.twinkleSpeed;
+        }
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+    }
+
     tick(dt: number, width: number, height: number): void {
         this.#time += 0.02 * dt;
         this.#shootingStarSystem?.tick(dt, width, height);
@@ -71,18 +88,7 @@ export class StarLayer extends SimulationLayer {
             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 alpha = star.brightness * (0.3 + 0.7 * (0.5 + 0.5 * Math.sin(this.#time * star.twinkleSpeed * this.#twinkleSpeed + star.twinklePhase)));
                 const size = star.size * this.#scale;
 
                 ctx.globalAlpha = alpha;

package/src/streamers/index.ts

@@ -1,4 +1,10 @@
-export { StreamerLayer } from './layer';
-export { StreamerSimulation } from './simulation';
-export type { StreamerSimulationConfig } from './simulation';
+import { Streamers } from './layer';
+import type { StreamersConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createStreamers(config?: StreamersConfig): Effect<StreamersConfig> {
+    return new Streamers(config);
+}
+
+export type { StreamersConfig };
 export type { Streamer } from './types';

package/src/streamers/layer.ts

@@ -1,19 +1,25 @@
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MULBERRY, STREAMER_COLORS } from './consts';
-import type { StreamerSimulationConfig } from './simulation';
 import type { Streamer } from './types';
 
-export class StreamerLayer extends SimulationLayer {
+export interface StreamersConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly speed?: number;
+    readonly scale?: number;
+}
+
+export class Streamers extends Effect<StreamersConfig> {
     readonly #colors: string[];
     readonly #scale: number;
-    readonly #speed: number;
+    #speed: number;
     #count: number;
     #streamers: Streamer[] = [];
     #width: number = 960;
     #height: number = 540;
     #initialized: boolean = false;
 
-    constructor(config: StreamerSimulationConfig = {}) {
+    constructor(config: StreamersConfig = {}) {
         super();
 
         this.#colors = config.colors ?? STREAMER_COLORS;
@@ -40,6 +46,12 @@ export class StreamerLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<StreamersConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
     tick(dt: number, width: number, height: number): void {
         this.#width = width;
         this.#height = height;
@@ -98,7 +110,7 @@ export class StreamerLayer extends SimulationLayer {
         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 segments: { x: number; y: number }[] = [];
         const segmentLength = length / segmentCount;
 
         for (let i = 0; i < segmentCount; i++) {

package/src/streamers/types.ts

@@ -3,7 +3,7 @@ export type Streamer = {
     y: number;
     length: number;
     width: number;
-    segments: {x: number; y: number}[];
+    segments: { x: number; y: number }[];
     fallSpeed: number;
     swayPhase: number;
     swaySpeed: number;

package/src/waves/index.ts

@@ -1,4 +1,10 @@
-export { WaveLayer } from './layer';
-export { WaveSimulation } from './simulation';
-export type { WaveSimulationConfig } from './simulation';
+import { Waves } from './layer';
+import type { WavesConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createWaves(config?: WavesConfig): Effect<WavesConfig> {
+    return new Waves(config);
+}
+
+export type { WavesConfig };
 export type { Wave } from './types';