@basmilius/sparkle 2.2.0 → 2.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@basmilius/sparkle",
     "license": "MIT",
-    "version": "2.2.0",
+    "version": "2.3.0",
     "author": {
         "email": "bas@mili.us",
         "name": "Bas Milius",

package/src/canvas.ts

@@ -1,5 +1,7 @@
 export class LimitedFrameRateCanvas {
     static #globalSpeed: number = 1;
+    static #globalFrameRate: number | null = null;
+    static #showFps: boolean = false;
 
     static get globalSpeed(): number {
         return LimitedFrameRateCanvas.#globalSpeed;
@@ -9,6 +11,28 @@ export class LimitedFrameRateCanvas {
         LimitedFrameRateCanvas.#globalSpeed = value;
     }
 
+    /**
+     * Global frame rate override for all canvas instances.
+     * null = use each instance's own frame rate.
+     * 0 = unlimited (render as fast as the browser allows).
+     * Any positive number = cap at that many frames per second.
+     */
+    static get globalFrameRate(): number | null {
+        return LimitedFrameRateCanvas.#globalFrameRate;
+    }
+
+    static set globalFrameRate(value: number | null) {
+        LimitedFrameRateCanvas.#globalFrameRate = value;
+    }
+
+    static get showFps(): boolean {
+        return LimitedFrameRateCanvas.#showFps;
+    }
+
+    static set showFps(value: boolean) {
+        LimitedFrameRateCanvas.#showFps = value;
+    }
+
     readonly #canvas: HTMLCanvasElement;
     readonly #context: CanvasRenderingContext2D;
     readonly #frameRate: number;
@@ -23,6 +47,9 @@ export class LimitedFrameRateCanvas {
     #isStopped: boolean = true;
     #height: number = 540;
     #width: number = 960;
+    #fps: string = '0.0';
+    #fpsFrames: number = 0;
+    #fpsTime: number = 0;
 
     get canvas(): HTMLCanvasElement {
         return this.#canvas;
@@ -48,6 +75,10 @@ export class LimitedFrameRateCanvas {
         this.#speed = value;
     }
 
+    get dpr(): number {
+        return devicePixelRatio;
+    }
+
     get frameRate(): number {
         return this.#frameRate;
     }
@@ -76,7 +107,7 @@ export class LimitedFrameRateCanvas {
         this.#canvas = canvas;
         this.#context = canvas.getContext('2d', options);
         this.#frameRate = frameRate;
-        this.#target = 1000 / frameRate;
+        this.#target = frameRate > 0 ? 1000 / frameRate : 0;
 
         this.onVisibilityChange = this.onVisibilityChange.bind(this);
         this.onResize = this.onResize.bind(this);
@@ -93,7 +124,10 @@ export class LimitedFrameRateCanvas {
         this.#current = Date.now();
         this.#frame = requestAnimationFrame(this.loop.bind(this));
 
-        if (this.#then > 0 && this.#current - this.#then + 1 < this.#target) {
+        const globalRate = LimitedFrameRateCanvas.#globalFrameRate;
+        const effectiveTarget = globalRate !== null ? (globalRate > 0 ? 1000 / globalRate : 0) : this.#target;
+
+        if (effectiveTarget > 0 && this.#then > 0 && this.#current - this.#then + 1 < effectiveTarget) {
             return;
         }
 
@@ -105,6 +139,24 @@ export class LimitedFrameRateCanvas {
         this.tick();
         this.draw();
 
+        if (LimitedFrameRateCanvas.#showFps) {
+            ++this.#fpsFrames;
+
+            if (this.#fpsTime === 0) {
+                this.#fpsTime = this.#current;
+            } else {
+                const elapsed = this.#current - this.#fpsTime;
+
+                if (elapsed >= 1000) {
+                    this.#fps = (Math.round(this.#fpsFrames * 10000 / elapsed) / 10).toFixed(1);
+                    this.#fpsFrames = 0;
+                    this.#fpsTime = this.#current;
+                }
+            }
+
+            this.#drawFps();
+        }
+
         this.#then = this.#now;
     }
 
@@ -132,6 +184,32 @@ export class LimitedFrameRateCanvas {
         }
     }
 
+    #drawFps(): void {
+        const ctx = this.#context;
+        const text = `${this.#fps} FPS`;
+        const x = 9;
+        const y = 9;
+        const paddingX = 6;
+        const paddingY = 4;
+
+        ctx.save();
+        ctx.font = '700 10px ui-monospace, monospace';
+
+        const textWidth = ctx.measureText(text).width;
+        const boxWidth = textWidth + paddingX * 2;
+        const boxHeight = 11 + paddingY * 2;
+
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+        ctx.beginPath();
+        ctx.roundRect(x, y, boxWidth, boxHeight, 3);
+        ctx.fill();
+
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, x + paddingX, y + boxHeight / 1.9);
+        ctx.restore();
+    }
+
     draw(): void {
         throw new Error('LimitedFrameRateCanvas::draw() should be overwritten.');
     }

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/effect.ts

@@ -50,7 +50,7 @@ export abstract class Effect<TConfig = Record<string, unknown>> implements Simul
      * 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'}): this {
+    mount(canvas: HTMLCanvasElement | string, options: CanvasRenderingContext2DSettings = {colorSpace: 'display-p3'}, frameRate: number = 60): this {
         if (typeof canvas === 'string') {
             const el = document.querySelector<HTMLCanvasElement>(canvas);
 
@@ -61,7 +61,7 @@ export abstract class Effect<TConfig = Record<string, unknown>> implements Simul
             canvas = el;
         }
 
-        this.#canvas = new SimulationCanvas(canvas, this as unknown as SimulationLayer, 60, options);
+        this.#canvas = new SimulationCanvas(canvas, this as unknown as SimulationLayer, frameRate, options);
         return this;
     }
 

package/src/scene.ts

@@ -38,19 +38,22 @@ class SceneCanvas 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.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, this.width, this.height);
 
         for (const layer of this.#layers) {
             if (layer.fade) {
-                const offCtx = this.#getOffscreenCtx(this.width, this.height);
+                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);
                 layer.draw(offCtx, this.width, this.height);
                 applyEdgeFade(offCtx, this.width, this.height, layer.fade);
-                ctx.drawImage(this.#offscreen!, 0, 0);
+                ctx.drawImage(this.#offscreen!, 0, 0, this.width, this.height);
             } else {
                 ctx.save();
                 layer.draw(ctx, this.width, this.height);
@@ -71,8 +74,8 @@ class SceneCanvas extends LimitedFrameRateCanvas {
         super.onResize();
 
         if (this.#offscreen) {
-            this.#offscreen.width = this.width;
-            this.#offscreen.height = this.height;
+            this.#offscreen.width = this.width * this.dpr;
+            this.#offscreen.height = this.height * this.dpr;
         }
 
         for (const layer of this.#layers) {

package/src/simulation-canvas.ts

@@ -36,17 +36,20 @@ 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.setTransform(dpr, 0, 0, dpr, 0, 0);
 
         if (this.#simulation.fade) {
-            const offCtx = this.#getOffscreenCtx(this.width, this.height);
+            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);
+            ctx.drawImage(this.#offscreen!, 0, 0, this.width, this.height);
         } else {
             ctx.save();
             this.#simulation.draw(ctx, this.width, this.height);
@@ -63,8 +66,8 @@ export class SimulationCanvas extends LimitedFrameRateCanvas {
         super.onResize();
 
         if (this.#offscreen) {
-            this.#offscreen.width = this.width;
-            this.#offscreen.height = this.height;
+            this.#offscreen.width = this.width * this.dpr;
+            this.#offscreen.height = this.height * this.dpr;
         }
 
         this.#simulation.onResize(this.width, this.height);