@basmilius/sparkle 2.1.0 → 2.3.0

package/src/confetti/particle.ts

@@ -1,4 +1,5 @@
 import type { Point } from '../point';
+import { MULBERRY } from './consts';
 import { SHAPE_PATHS } from './shapes';
 import type { Shape } from './types';
 
@@ -47,29 +48,29 @@ export class ConfettiParticle {
         const startVelocity = (config.startVelocity ?? 45) * scale;
         const launchAngle = -(direction * Math.PI / 180)
             + (0.5 * spread * Math.PI / 180)
-            - (Math.random() * spread * Math.PI / 180);
-        const speed = startVelocity * (0.5 + Math.random());
-        const rotAngle = Math.random() * Math.PI * 2;
+            - (MULBERRY.next() * spread * Math.PI / 180);
+        const speed = startVelocity * (0.5 + MULBERRY.next());
+        const rotAngle = MULBERRY.next() * Math.PI * 2;
 
         this.#colorStr = color;
         this.#gravity = (config.gravity ?? 1) * scale;
         this.#shape = shape;
-        this.#size = (5 + Math.random() * 5) * scale;
+        this.#size = (5 + MULBERRY.next() * 5) * scale;
         this.#totalTicks = config.ticks ?? 200;
         this.#x = position.x;
         this.#y = position.y;
         this.#vx = Math.cos(launchAngle) * speed;
         this.#vy = Math.sin(launchAngle) * speed;
-        this.#decay = (config.decay ?? 0.9) - 0.05 + Math.random() * 0.1;
-        this.#flipAngle = Math.random() * Math.PI * 2;
-        this.#flipSpeed = 0.03 + Math.random() * 0.05;
+        this.#decay = (config.decay ?? 0.9) - 0.05 + MULBERRY.next() * 0.1;
+        this.#flipAngle = MULBERRY.next() * Math.PI * 2;
+        this.#flipSpeed = 0.03 + MULBERRY.next() * 0.05;
         this.#rotAngle = rotAngle;
         this.#rotCos = Math.cos(rotAngle);
         this.#rotSin = Math.sin(rotAngle);
-        this.#rotSpeed = (Math.random() - 0.5) * 0.06;
-        this.#swing = Math.random() * Math.PI * 2;
-        this.#swingAmp = 0.5 + Math.random() * 1.5;
-        this.#swingSpeed = 0.025 + Math.random() * 0.035;
+        this.#rotSpeed = (MULBERRY.next() - 0.5) * 0.06;
+        this.#swing = MULBERRY.next() * Math.PI * 2;
+        this.#swingAmp = 0.5 + MULBERRY.next() * 1.5;
+        this.#swingSpeed = 0.025 + MULBERRY.next() * 0.035;
     }
 
     draw(ctx: CanvasRenderingContext2D): void {

package/src/confetti/shapes.ts

@@ -2,103 +2,90 @@ import type { Shape } from './types';
 
 const TWO_PI = Math.PI * 2;
 
-export const SHAPE_PATHS: Record<Shape, Path2D> = {
-    bowtie: (() => {
-        const path = new Path2D();
-        path.moveTo(-1, -0.7);
-        path.lineTo(0, 0);
-        path.lineTo(-1, 0.7);
-        path.closePath();
-        path.moveTo(1, -0.7);
-        path.lineTo(0, 0);
-        path.lineTo(1, 0.7);
-        path.closePath();
-        return path;
-    })(),
-    circle: (() => {
-        const path = new Path2D();
-        path.ellipse(0, 0, 0.6, 1, 0, 0, TWO_PI);
-        return path;
-    })(),
-    crescent: (() => {
-        const path = new Path2D();
-        path.arc(0, 0, 1, 0, TWO_PI, false);
-        path.arc(0.45, 0, 0.9, 0, TWO_PI, true);
-        return path;
-    })(),
-    diamond: (() => {
-        const path = new Path2D();
-        path.moveTo(0, -1);
-        path.lineTo(0.6, 0);
-        path.lineTo(0, 1);
-        path.lineTo(-0.6, 0);
-        path.closePath();
-        return path;
-    })(),
-    heart: (() => {
-        const path = new Path2D();
-        path.moveTo(0, 1);
-        path.bezierCurveTo(-0.4, 0.55, -1, 0.1, -1, -0.35);
-        path.bezierCurveTo(-1, -0.8, -0.5, -1, 0, -0.6);
-        path.bezierCurveTo(0.5, -1, 1, -0.8, 1, -0.35);
-        path.bezierCurveTo(1, 0.1, 0.4, 0.55, 0, 1);
-        path.closePath();
-        return path;
-    })(),
-    hexagon: (() => {
-        const path = new Path2D();
-        for (let i = 0; i < 6; i++) {
-            const angle = (i * Math.PI / 3) - Math.PI / 2;
-            if (i === 0) {
-                path.moveTo(Math.cos(angle), Math.sin(angle));
-            } else {
-                path.lineTo(Math.cos(angle), Math.sin(angle));
-            }
+function buildShapePaths(): Record<Shape, Path2D> {
+    const bowtie = new Path2D();
+    bowtie.moveTo(-1, -0.7);
+    bowtie.lineTo(0, 0);
+    bowtie.lineTo(-1, 0.7);
+    bowtie.closePath();
+    bowtie.moveTo(1, -0.7);
+    bowtie.lineTo(0, 0);
+    bowtie.lineTo(1, 0.7);
+    bowtie.closePath();
+
+    const circle = new Path2D();
+    circle.ellipse(0, 0, 0.6, 1, 0, 0, TWO_PI);
+
+    const crescent = new Path2D();
+    crescent.arc(0, 0, 1, 0, TWO_PI, false);
+    crescent.arc(0.45, 0, 0.9, 0, TWO_PI, true);
+
+    const diamond = new Path2D();
+    diamond.moveTo(0, -1);
+    diamond.lineTo(0.6, 0);
+    diamond.lineTo(0, 1);
+    diamond.lineTo(-0.6, 0);
+    diamond.closePath();
+
+    const heart = new Path2D();
+    heart.moveTo(0, 1);
+    heart.bezierCurveTo(-0.4, 0.55, -1, 0.1, -1, -0.35);
+    heart.bezierCurveTo(-1, -0.8, -0.5, -1, 0, -0.6);
+    heart.bezierCurveTo(0.5, -1, 1, -0.8, 1, -0.35);
+    heart.bezierCurveTo(1, 0.1, 0.4, 0.55, 0, 1);
+    heart.closePath();
+
+    const hexagon = new Path2D();
+    for (let i = 0; i < 6; i++) {
+        const angle = (i * Math.PI / 3) - Math.PI / 2;
+        if (i === 0) {
+            hexagon.moveTo(Math.cos(angle), Math.sin(angle));
+        } else {
+            hexagon.lineTo(Math.cos(angle), Math.sin(angle));
         }
-        path.closePath();
-        return path;
-    })(),
-    ribbon: (() => {
-        const path = new Path2D();
-        path.rect(-0.2, -1, 0.4, 2);
-        return path;
-    })(),
-    ring: (() => {
-        const path = new Path2D();
-        path.arc(0, 0, 1, 0, TWO_PI, false);
-        path.arc(0, 0, 0.55, 0, TWO_PI, true);
-        return path;
-    })(),
-    square: (() => {
-        const path = new Path2D();
-        path.rect(-0.7, -0.7, 1.4, 1.4);
-        return path;
-    })(),
-    star: (() => {
-        const path = new Path2D();
-        for (let i = 0; i < 10; i++) {
-            const r = i % 2 === 0 ? 1 : 0.42;
-            const angle = (i * Math.PI / 5) - Math.PI / 2;
-            if (i === 0) {
-                path.moveTo(r * Math.cos(angle), r * Math.sin(angle));
-            } else {
-                path.lineTo(r * Math.cos(angle), r * Math.sin(angle));
-            }
+    }
+    hexagon.closePath();
+
+    const ribbon = new Path2D();
+    ribbon.rect(-0.2, -1, 0.4, 2);
+
+    const ring = new Path2D();
+    ring.arc(0, 0, 1, 0, TWO_PI, false);
+    ring.arc(0, 0, 0.55, 0, TWO_PI, true);
+
+    const square = new Path2D();
+    square.rect(-0.7, -0.7, 1.4, 1.4);
+
+    const star = new Path2D();
+    for (let i = 0; i < 10; i++) {
+        const r = i % 2 === 0 ? 1 : 0.42;
+        const angle = (i * Math.PI / 5) - Math.PI / 2;
+        if (i === 0) {
+            star.moveTo(r * Math.cos(angle), r * Math.sin(angle));
+        } else {
+            star.lineTo(r * Math.cos(angle), r * Math.sin(angle));
         }
-        path.closePath();
-        return path;
-    })(),
-    triangle: (() => {
-        const path = new Path2D();
-        for (let i = 0; i < 3; i++) {
-            const angle = (i * 2 * Math.PI / 3) - Math.PI / 2;
-            if (i === 0) {
-                path.moveTo(Math.cos(angle), Math.sin(angle));
-            } else {
-                path.lineTo(Math.cos(angle), Math.sin(angle));
-            }
+    }
+    star.closePath();
+
+    const triangle = new Path2D();
+    for (let i = 0; i < 3; i++) {
+        const angle = (i * 2 * Math.PI / 3) - Math.PI / 2;
+        if (i === 0) {
+            triangle.moveTo(Math.cos(angle), Math.sin(angle));
+        } else {
+            triangle.lineTo(Math.cos(angle), Math.sin(angle));
         }
-        path.closePath();
-        return path;
-    })()
-};
+    }
+    triangle.closePath();
+
+    return {bowtie, circle, crescent, diamond, heart, hexagon, ribbon, ring, square, star, triangle};
+}
+
+let _shapePaths: Record<Shape, Path2D> | null = null;
+
+export const SHAPE_PATHS: Record<Shape, Path2D> = new Proxy({} as Record<Shape, Path2D>, {
+    get(_, key: string) {
+        return (_shapePaths ??= buildShapePaths())[key as Shape];
+    }
+});

package/src/donuts/consts.ts

@@ -1,9 +1,9 @@
 import { type Mulberry32, mulberry32 } from '@basmilius/utils';
-import type { DonutSimulationConfig } from './simulation';
+import type { DonutsConfig } from './layer';
 
 export const MULBERRY: Mulberry32 = mulberry32(13);
 
-export const DEFAULT_CONFIG: DonutSimulationConfig = {
+export const DEFAULT_CONFIG: DonutsConfig = {
     background: '#a51955',
     collisionPadding: 20,
     colors: ['#bd1961', '#da287c'],

package/src/donuts/index.ts

@@ -1,3 +1,9 @@
-export { DonutLayer } from './layer';
-export { DonutSimulation } from './simulation';
-export type { DonutSimulationConfig } from './simulation';
+import { Donuts } from './layer';
+import type { DonutsConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createDonuts(config?: DonutsConfig): Effect<DonutsConfig> {
+    return new Donuts(config);
+}
+
+export type { DonutsConfig };

package/src/donuts/layer.ts

@@ -1,18 +1,33 @@
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { DEFAULT_CONFIG, MULBERRY } from './consts';
 import type { Donut } from './donut';
-import type { DonutSimulationConfig } from './simulation';
 
-export class DonutLayer extends SimulationLayer {
+export interface DonutsConfig {
+    readonly background?: string;
+    readonly collisionPadding?: number;
+    readonly colors?: string[];
+    readonly count?: number;
+    readonly mouseAvoidance?: boolean;
+    readonly mouseAvoidanceRadius?: number;
+    readonly mouseAvoidanceStrength?: number;
+    readonly radiusRange?: [number, number];
+    readonly repulsionStrength?: number;
+    readonly rotationSpeedRange?: [number, number];
+    readonly scale?: number;
+    readonly speedRange?: [number, number];
+    readonly thickness?: number;
+}
+
+export class Donuts extends Effect<DonutsConfig> {
     readonly #background: string;
     readonly #collisionPadding: number;
     readonly #colors: string[];
     readonly #count: number;
-    readonly #mouseAvoidance: boolean;
-    readonly #mouseAvoidanceRadius: number;
-    readonly #mouseAvoidanceStrength: number;
+    #mouseAvoidance: boolean;
+    #mouseAvoidanceRadius: number;
+    #mouseAvoidanceStrength: number;
     readonly #radiusRange: [number, number];
-    readonly #repulsionStrength: number;
+    #repulsionStrength: number;
     readonly #rotationSpeedRange: [number, number];
     readonly #scale: number;
     readonly #speedRange: [number, number];
@@ -27,7 +42,7 @@ export class DonutLayer extends SimulationLayer {
     #height: number = 540;
     #initialized: boolean = false;
 
-    constructor(config: DonutSimulationConfig = {}) {
+    constructor(config: DonutsConfig = {}) {
         super();
 
         const scale = config.scale ?? 1;
@@ -82,6 +97,21 @@ export class DonutLayer extends SimulationLayer {
         canvas.removeEventListener('mouseleave', this.#onMouseLeaveBound);
     }
 
+    configure(config: Partial<DonutsConfig>): void {
+        if (config.mouseAvoidance !== undefined) {
+            this.#mouseAvoidance = config.mouseAvoidance;
+        }
+        if (config.mouseAvoidanceRadius !== undefined) {
+            this.#mouseAvoidanceRadius = config.mouseAvoidanceRadius;
+        }
+        if (config.mouseAvoidanceStrength !== undefined) {
+            this.#mouseAvoidanceStrength = config.mouseAvoidanceStrength;
+        }
+        if (config.repulsionStrength !== undefined) {
+            this.#repulsionStrength = config.repulsionStrength;
+        }
+    }
+
     tick(dt: number, width: number, height: number): void {
         this.#width = width;
         this.#height = height;
@@ -103,9 +133,9 @@ export class DonutLayer extends SimulationLayer {
         ctx.fillRect(0, 0, width, height);
 
         for (const donut of this.#donuts) {
-            ctx.save();
-            ctx.translate(donut.x, donut.y);
-            ctx.rotate(donut.angle);
+            const cos = Math.cos(donut.angle);
+            const sin = Math.sin(donut.angle);
+            ctx.setTransform(cos, sin, -sin, cos, donut.x, donut.y);
 
             ctx.beginPath();
             ctx.arc(0, 0, donut.outerRadius, 0, Math.PI * 2);
@@ -114,8 +144,9 @@ export class DonutLayer extends SimulationLayer {
 
             ctx.fillStyle = donut.color;
             ctx.fill();
-            ctx.restore();
         }
+
+        ctx.resetTransform();
     }
 
     #updateDonut(donut: Donut, dt: number): void {

package/src/effect.ts

@@ -0,0 +1,107 @@
+import { SimulationCanvas } from './simulation-canvas';
+import type { EdgeFade, EdgeFadeSide, SimulationLayer } from './layer';
+
+export type { EdgeFade, EdgeFadeSide };
+
+/**
+ * Base class for all visual effects. Implements the internal SimulationLayer interface
+ * so that effects can be used both standalone (via mount()) and composed in a Scene.
+ *
+ * @example Standalone usage
+ * const snow = new Snow({ particles: 200 });
+ * snow.mount(canvas).start();
+ *
+ * @example Scene composition
+ * const scene = new Scene()
+ *     .mount(canvas)
+ *     .layer(new Aurora())
+ *     .layer(new Snow())
+ *     .start();
+ */
+export abstract class Effect<TConfig = Record<string, unknown>> implements SimulationLayer {
+    #canvas: SimulationCanvas | null = null;
+    fade: EdgeFade | null = null;
+
+    abstract tick(dt: number, width: number, height: number): void;
+
+    abstract draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
+
+    configure(_config: Partial<TConfig>): void {
+    }
+
+    onResize(_width: number, _height: number): void {
+    }
+
+    onMount(_canvas: HTMLCanvasElement): void {
+    }
+
+    onUnmount(_canvas: HTMLCanvasElement): void {
+    }
+
+    /**
+     * Apply an edge fade mask when rendering this effect standalone or in a Scene.
+     */
+    withFade(fade: EdgeFade): this {
+        this.fade = fade;
+        return this;
+    }
+
+    /**
+     * Mount this effect to a canvas element or CSS selector, creating the render loop.
+     * Must be called before start().
+     */
+    mount(canvas: HTMLCanvasElement | string, options: CanvasRenderingContext2DSettings = {colorSpace: 'display-p3'}, frameRate: number = 60): this {
+        if (typeof canvas === 'string') {
+            const el = document.querySelector<HTMLCanvasElement>(canvas);
+
+            if (!el) {
+                throw new Error(`Effect.mount(): no element found for selector "${canvas}".`);
+            }
+
+            canvas = el;
+        }
+
+        this.#canvas = new SimulationCanvas(canvas, this as unknown as SimulationLayer, frameRate, options);
+        return this;
+    }
+
+    /**
+     * Remove this effect from its canvas and clean up the render loop.
+     */
+    unmount(): this {
+        this.#canvas?.destroy();
+        this.#canvas = null;
+        return this;
+    }
+
+    /**
+     * Start the render loop. Call mount() first.
+     */
+    start(): this {
+        this.#canvas?.start();
+        return this;
+    }
+
+    /**
+     * Pause rendering without destroying state. Use resume() to continue.
+     */
+    pause(): this {
+        this.#canvas?.pause();
+        return this;
+    }
+
+    /**
+     * Resume rendering after a pause().
+     */
+    resume(): this {
+        this.#canvas?.resume();
+        return this;
+    }
+
+    /**
+     * Stop rendering and call onUnmount(). Safe to call multiple times.
+     */
+    destroy(): void {
+        this.unmount();
+    }
+}

package/src/fade.ts

@@ -0,0 +1,87 @@
+import type { EdgeFade, EdgeFadeSide } from './layer';
+
+function parseSide(side: EdgeFadeSide): [number, number] {
+    return typeof side === 'number' ? [0, side] : side;
+}
+
+export function applyEdgeFade(ctx: CanvasRenderingContext2D, width: number, height: number, fade: EdgeFade): void {
+    ctx.globalCompositeOperation = 'destination-out';
+
+    if (fade.top !== undefined) {
+        const [near, far] = parseSide(fade.top);
+        const nearPx = near * height;
+        const farPx = far * height;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(0, 0, width, nearPx);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(0, nearPx, 0, farPx);
+            gradient.addColorStop(0, 'rgba(0,0,0,1)');
+            gradient.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, nearPx, width, farPx - nearPx);
+        }
+    }
+
+    if (fade.bottom !== undefined) {
+        const [near, far] = parseSide(fade.bottom);
+        const nearPx = near * height;
+        const farPx = far * height;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(0, height - nearPx, width, nearPx);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(0, height - farPx, 0, height - nearPx);
+            gradient.addColorStop(0, 'rgba(0,0,0,0)');
+            gradient.addColorStop(1, 'rgba(0,0,0,1)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, height - farPx, width, farPx - nearPx);
+        }
+    }
+
+    if (fade.left !== undefined) {
+        const [near, far] = parseSide(fade.left);
+        const nearPx = near * width;
+        const farPx = far * width;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(0, 0, nearPx, height);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(nearPx, 0, farPx, 0);
+            gradient.addColorStop(0, 'rgba(0,0,0,1)');
+            gradient.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(nearPx, 0, farPx - nearPx, height);
+        }
+    }
+
+    if (fade.right !== undefined) {
+        const [near, far] = parseSide(fade.right);
+        const nearPx = near * width;
+        const farPx = far * width;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(width - nearPx, 0, nearPx, height);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(width - farPx, 0, width - nearPx, 0);
+            gradient.addColorStop(0, 'rgba(0,0,0,0)');
+            gradient.addColorStop(1, 'rgba(0,0,0,1)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(width - farPx, 0, farPx - nearPx, height);
+        }
+    }
+
+    ctx.globalCompositeOperation = 'source-over';
+}

package/src/fireflies/index.ts

@@ -1,6 +1,12 @@
-export { FireflyLayer } from './layer';
+import { Fireflies } from './layer';
+import type { FirefliesConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createFireflies(config?: FirefliesConfig): Effect<FirefliesConfig> {
+    return new Fireflies(config);
+}
+
 export { FireflyParticle, createFireflySprite } from './particle';
-export { FireflySimulation } from './simulation';
+export type { FirefliesConfig };
 export type { FireflyParticleConfig } from './particle';
-export type { FireflySimulationConfig } from './simulation';
 export type { Firefly } from './types';

package/src/fireflies/layer.ts

@@ -1,23 +1,31 @@
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MULBERRY } from './consts';
-import type { FireflySimulationConfig } from './simulation';
 import type { Firefly } from './types';
 
 const SPRITE_SIZE = 64;
 const SPRITE_CENTER = SPRITE_SIZE / 2;
 const SPRITE_RADIUS = SPRITE_SIZE / 2;
 
-export class FireflyLayer extends SimulationLayer {
+export interface FirefliesConfig {
+    readonly count?: number;
+    readonly color?: string;
+    readonly size?: number;
+    readonly speed?: number;
+    readonly glowSpeed?: number;
+    readonly scale?: number;
+}
+
+export class Fireflies extends Effect<FirefliesConfig> {
     readonly #scale: number;
     readonly #size: number;
-    readonly #speed: number;
-    readonly #glowSpeed: number;
+    #speed: number;
+    #glowSpeed: number;
     #maxCount: number;
     #time: number = 0;
     #fireflies: Firefly[] = [];
     #sprite: HTMLCanvasElement;
 
-    constructor(config: FireflySimulationConfig = {}) {
+    constructor(config: FirefliesConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -39,15 +47,24 @@ export class FireflyLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<FirefliesConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.glowSpeed !== undefined) {
+            this.#glowSpeed = config.glowSpeed;
+        }
+    }
+
     tick(dt: number, _width: number, _height: number): void {
         this.#time += 0.02 * dt * this.#speed;
 
         for (const firefly of this.#fireflies) {
             const moveX = Math.sin(this.#time * firefly.freqX1 + firefly.phaseX1) * firefly.amplitudeX
-                        + Math.sin(this.#time * firefly.freqX2 + firefly.phaseX2) * firefly.amplitudeX * 0.5;
+                + Math.sin(this.#time * firefly.freqX2 + firefly.phaseX2) * firefly.amplitudeX * 0.5;
 
             const moveY = Math.sin(this.#time * firefly.freqY1 + firefly.phaseY1) * firefly.amplitudeY
-                        + Math.sin(this.#time * firefly.freqY2 + firefly.phaseY2) * firefly.amplitudeY * 0.5;
+                + Math.sin(this.#time * firefly.freqY2 + firefly.phaseY2) * firefly.amplitudeY * 0.5;
 
             firefly.x += moveX * dt / (3000 * (1 / this.#speed));
             firefly.y += moveY * dt / (3000 * (1 / this.#speed));
@@ -94,7 +111,7 @@ export class FireflyLayer extends SimulationLayer {
         ctx.globalAlpha = 1;
     }
 
-    #parseColor(color: string): {r: number; g: number; b: number} {
+    #parseColor(color: string): { r: number; g: number; b: number } {
         const canvas = document.createElement('canvas');
         canvas.width = 1;
         canvas.height = 1;

package/src/fireflies/particle.ts

@@ -101,10 +101,10 @@ export class FireflyParticle {
         this.#time += 0.02 * dt * this.#speed;
 
         const moveX = Math.sin(this.#time * this.#freqX1 + this.#phaseX1) * this.#amplitudeX * this.#bounds.width
-                    + Math.sin(this.#time * this.#freqX2 + this.#phaseX2) * this.#amplitudeX * this.#bounds.width * 0.5;
+            + Math.sin(this.#time * this.#freqX2 + this.#phaseX2) * this.#amplitudeX * this.#bounds.width * 0.5;
 
         const moveY = Math.sin(this.#time * this.#freqY1 + this.#phaseY1) * this.#amplitudeY * this.#bounds.height
-                    + Math.sin(this.#time * this.#freqY2 + this.#phaseY2) * this.#amplitudeY * this.#bounds.height * 0.5;
+            + Math.sin(this.#time * this.#freqY2 + this.#phaseY2) * this.#amplitudeY * this.#bounds.height * 0.5;
 
         this.#x += (moveX / 3000) * dt;
         this.#y += (moveY / 3000) * dt;