@basmilius/sparkle 2.1.0 → 2.3.0

package/src/layer.ts

@@ -7,18 +7,20 @@ export type EdgeFade = {
     readonly right?: EdgeFadeSide;
 };
 
-export abstract class SimulationLayer {
-    fade: EdgeFade | null = null;
+/**
+ * Internal interface implemented by all Effect subclasses. Used by SimulationCanvas
+ * and Scene to drive rendering without depending on the generic Effect<TConfig> type.
+ */
+export interface SimulationLayer {
+    fade: EdgeFade | null;
 
-    abstract tick(dt: number, width: number, height: number): void;
-    abstract draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
+    tick(dt: number, width: number, height: number): void;
 
-    onResize(_width: number, _height: number): void {}
-    onMount(_canvas: HTMLCanvasElement): void {}
-    onUnmount(_canvas: HTMLCanvasElement): void {}
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
 
-    withFade(fade: EdgeFade): this {
-        this.fade = fade;
-        return this;
-    }
+    onResize(width: number, height: number): void;
+
+    onMount(canvas: HTMLCanvasElement): void;
+
+    onUnmount(canvas: HTMLCanvasElement): void;
 }

package/src/leaves/index.ts

@@ -1,4 +1,9 @@
-export { LeafLayer } from './layer';
-export { LeafSimulation } from './simulation';
-export type { LeafSimulationConfig } from './simulation';
-export type { Leaf } from './types';
+import { Leaves } from './layer';
+import type { LeavesConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createLeaves(config?: LeavesConfig): Effect<LeavesConfig> {
+    return new Leaves(config);
+}
+
+export type { LeavesConfig, Leaf } from './types';

package/src/leaves/layer.ts

@@ -1,13 +1,12 @@
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { LEAF_COLORS, MULBERRY } from './consts';
-import type { LeafSimulationConfig } from './simulation';
-import type { Leaf } from './types';
+import type { Leaf, LeavesConfig } from './types';
 
-export class LeafLayer extends SimulationLayer {
+export class Leaves extends Effect<LeavesConfig> {
     readonly #scale: number;
     readonly #size: number;
-    readonly #speed: number;
-    readonly #wind: number;
+    #speed: number;
+    #wind: number;
     readonly #colors: string[];
     #maxCount: number;
     #time: number = 0;
@@ -15,7 +14,7 @@ export class LeafLayer extends SimulationLayer {
     #sprites: HTMLCanvasElement[] = [];
     #height: number = 540;
 
-    constructor(config: LeafSimulationConfig = {}) {
+    constructor(config: LeavesConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -40,6 +39,15 @@ export class LeafLayer extends SimulationLayer {
         this.#height = height;
     }
 
+    configure(config: Partial<LeavesConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.wind !== undefined) {
+            this.#wind = config.wind;
+        }
+    }
+
     tick(dt: number, _width: number, height: number): void {
         this.#height = height;
         const speedFactor = (height / 540) / this.#speed;
@@ -47,8 +55,8 @@ export class LeafLayer extends SimulationLayer {
         this.#time += 0.015 * dt;
 
         const globalWind = Math.sin(this.#time * 0.5) * 0.4
-                         + Math.sin(this.#time * 1.3 + 2) * 0.2
-                         + Math.sin(this.#time * 3.1) * 0.1;
+            + Math.sin(this.#time * 1.3 + 2) * 0.2
+            + Math.sin(this.#time * 3.1) * 0.1;
 
         for (let index = 0; index < this.#leaves.length; index++) {
             const leaf = this.#leaves[index];
@@ -87,11 +95,10 @@ export class LeafLayer extends SimulationLayer {
             const py = leaf.y * height;
             const displaySize = leaf.size * leaf.depth;
             const scaleX = Math.cos(leaf.flipAngle);
+            const cos = Math.cos(leaf.rotation);
+            const sin = Math.sin(leaf.rotation);
 
-            ctx.save();
-            ctx.translate(px, py);
-            ctx.rotate(leaf.rotation);
-            ctx.scale(scaleX, 1);
+            ctx.setTransform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
             ctx.globalAlpha = 0.3 + leaf.depth * 0.7;
             ctx.drawImage(
                 this.#sprites[leaf.colorIndex % this.#sprites.length],
@@ -100,9 +107,9 @@ export class LeafLayer extends SimulationLayer {
                 displaySize,
                 displaySize
             );
-            ctx.restore();
         }
 
+        ctx.resetTransform();
         ctx.globalAlpha = 1;
     }
 

package/src/leaves/types.ts

@@ -1,3 +1,12 @@
+export interface LeavesConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly wind?: number;
+    readonly scale?: number;
+}
+
 export type Leaf = {
     x: number;
     y: number;

package/src/lightning/index.ts

@@ -1,6 +1,11 @@
-export { LightningLayer } from './layer';
-export { LightningSimulation } from './simulation';
-export type { LightningSimulationConfig } from './simulation';
+import { Lightning } from './layer';
+import type { LightningConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createLightning(config?: LightningConfig): Effect<LightningConfig> {
+    return new Lightning(config);
+}
+
 export { LightningSystem } from './system';
 export type { LightningSystemConfig } from './system';
-export type { LightningBolt, LightningBranch } from './types';
+export type { LightningConfig, LightningBolt, LightningBranch } from './types';

package/src/lightning/layer.ts

@@ -1,14 +1,14 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MULBERRY } from './consts';
-import type { LightningSimulationConfig } from './simulation';
+import type { LightningConfig } from './types';
 import { LightningSystem } from './system';
 
-export class LightningLayer extends SimulationLayer {
+export class Lightning extends Effect<LightningConfig> {
     readonly #system: LightningSystem;
     readonly #enableFlash: boolean;
 
-    constructor(config: LightningSimulationConfig = {}) {
+    constructor(config: LightningConfig = {}) {
         super();
 
         this.#enableFlash = config.flash ?? true;

package/src/lightning/system.ts

@@ -101,7 +101,7 @@ export class LightningSystem {
         ctx.globalCompositeOperation = 'source-over';
     }
 
-    #drawSegments(ctx: CanvasRenderingContext2D, segments: {x: number; y: number}[], alpha: number, outerWidth: number, innerWidth: number, width: number, height: number): void {
+    #drawSegments(ctx: CanvasRenderingContext2D, segments: { x: number; y: number }[], alpha: number, outerWidth: number, innerWidth: number, width: number, height: number): void {
         if (segments.length < 2) {
             return;
         }
@@ -133,7 +133,7 @@ export class LightningSystem {
 
     #createBolt(): LightningBolt {
         const startX = 0.1 + this.#rng() * 0.8;
-        const segments: {x: number; y: number}[] = [{x: startX, y: 0}];
+        const segments: { x: number; y: number }[] = [{x: startX, y: 0}];
         const branches: LightningBranch[] = [];
 
         let currentX = startX;
@@ -165,7 +165,7 @@ export class LightningSystem {
     }
 
     #createBranch(startX: number, startY: number): LightningBranch {
-        const segments: {x: number; y: number}[] = [{x: startX, y: startY}];
+        const segments: { x: number; y: number }[] = [{x: startX, y: startY}];
         const direction = this.#rng() > 0.5 ? 1 : -1;
         const branchSteps = 3 + Math.floor(this.#rng() * 5);
 

package/src/lightning/types.ts

@@ -1,10 +1,18 @@
+export interface LightningConfig {
+    readonly frequency?: number;
+    readonly color?: string;
+    readonly branches?: boolean;
+    readonly flash?: boolean;
+    readonly scale?: number;
+}
+
 export type LightningBranch = {
-    segments: {x: number; y: number}[];
+    segments: { x: number; y: number }[];
     alpha: number;
 };
 
 export type LightningBolt = {
-    segments: {x: number; y: number}[];
+    segments: { x: number; y: number }[];
     branches: LightningBranch[];
     alpha: number;
     lifetime: number;

package/src/matrix/index.ts

@@ -1,4 +1,9 @@
-export { MatrixLayer } from './layer';
-export { MatrixSimulation } from './simulation';
-export type { MatrixSimulationConfig } from './simulation';
-export type { MatrixColumn } from './types';
+import { Matrix } from './layer';
+import type { MatrixConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createMatrix(config?: MatrixConfig): Effect<MatrixConfig> {
+    return new Matrix(config);
+}
+
+export type { MatrixConfig, MatrixColumn } from './types';

package/src/matrix/layer.ts

@@ -1,14 +1,13 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MATRIX_CHARS, MULBERRY } from './consts';
-import type { MatrixSimulationConfig } from './simulation';
-import type { MatrixColumn } from './types';
+import type { MatrixColumn, MatrixConfig } from './types';
 
-export class MatrixLayer extends SimulationLayer {
+export class Matrix extends Effect<MatrixConfig> {
     readonly #scale: number;
-    readonly #speed: number;
+    #speed: number;
     readonly #fontSize: number;
-    readonly #trailLength: number;
+    #trailLength: number;
     readonly #colorRGB: [number, number, number];
     #maxColumns: number;
     #columns: MatrixColumn[] = [];
@@ -17,7 +16,7 @@ export class MatrixLayer extends SimulationLayer {
     #height: number = 540;
     #initialized: boolean = false;
 
-    constructor(config: MatrixSimulationConfig = {}) {
+    constructor(config: MatrixConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -53,6 +52,15 @@ export class MatrixLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<MatrixConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.trailLength !== undefined) {
+            this.#trailLength = config.trailLength;
+        }
+    }
+
     tick(dt: number, width: number, height: number): void {
         this.#width = width;
         this.#height = height;

package/src/matrix/types.ts

@@ -1,3 +1,12 @@
+export interface MatrixConfig {
+    readonly columns?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly fontSize?: number;
+    readonly trailLength?: number;
+    readonly scale?: number;
+}
+
 export type MatrixColumn = {
     x: number;
     y: number;

package/src/orbits/index.ts

@@ -1,4 +1,9 @@
-export { OrbitLayer } from './layer';
-export { OrbitSimulation } from './simulation';
-export type { OrbitSimulationConfig } from './simulation';
-export type { OrbitalCenter, Orbiter } from './types';
+import { Orbits } from './layer';
+import type { OrbitsConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createOrbits(config?: OrbitsConfig): Effect<OrbitsConfig> {
+    return new Orbits(config);
+}
+
+export type { OrbitsConfig, OrbitalCenter, Orbiter } from './types';

package/src/orbits/layer.ts

@@ -1,23 +1,22 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MULBERRY, ORBIT_COLORS } from './consts';
-import type { OrbitSimulationConfig } from './simulation';
-import type { OrbitalCenter, Orbiter } from './types';
+import type { OrbitalCenter, Orbiter, OrbitsConfig } from './types';
 
-export class OrbitLayer extends SimulationLayer {
+export class Orbits extends Effect<OrbitsConfig> {
     readonly #centerCount: number;
     readonly #orbitersPerCenter: number;
-    readonly #speed: number;
+    #speed: number;
     readonly #colors: string[];
-    readonly #trailLength: number;
-    readonly #showCenters: boolean;
-    readonly #scale: number;
+    #trailLength: number;
+    #showCenters: boolean;
+    #scale: number;
     #centers: OrbitalCenter[] = [];
     #orbiters: Orbiter[] = [];
     #time: number = 0;
     #initialized: boolean = false;
 
-    constructor(config: OrbitSimulationConfig = {}) {
+    constructor(config: OrbitsConfig = {}) {
         super();
 
         this.#centerCount = config.centers ?? 3;
@@ -54,6 +53,21 @@ export class OrbitLayer extends SimulationLayer {
         }
     }
 
+    configure(config: Partial<OrbitsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.trailLength !== undefined) {
+            this.#trailLength = config.trailLength;
+        }
+        if (config.showCenters !== undefined) {
+            this.#showCenters = config.showCenters;
+        }
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+    }
+
     tick(dt: number, width: number, height: number): void {
         this.#time += 0.01 * dt * this.#speed;
 
@@ -77,10 +91,17 @@ export class OrbitLayer extends SimulationLayer {
             const px = cx + rotatedX;
             const py = cy + rotatedY;
 
-            orbiter.trail.push({x: px, y: py});
-
-            if (orbiter.trail.length > this.#trailLength) {
-                orbiter.trail.shift();
+            const trail = orbiter.trail;
+            const maxLen = this.#trailLength;
+
+            if (trail.length < maxLen) {
+                trail.push({x: px, y: py});
+                orbiter.trailHead = trail.length - 1;
+            } else {
+                const next = (orbiter.trailHead + 1) % maxLen;
+                trail[next].x = px;
+                trail[next].y = py;
+                orbiter.trailHead = next;
             }
         }
     }
@@ -114,10 +135,15 @@ export class OrbitLayer extends SimulationLayer {
 
         for (const orbiter of this.#orbiters) {
             const [cr, cg, cb] = hexToRGB(orbiter.color);
+            const trail = orbiter.trail;
+            const trailLen = trail.length;
 
-            if (orbiter.trail.length > 1) {
-                for (let ti = 0; ti < orbiter.trail.length - 1; ti++) {
-                    const progress = (ti + 1) / orbiter.trail.length;
+            if (trailLen > 1) {
+                const isFull = trailLen === this.#trailLength;
+                const oldest = isFull ? (orbiter.trailHead + 1) % trailLen : 0;
+
+                for (let ti = 0; ti < trailLen - 1; ti++) {
+                    const progress = (ti + 1) / trailLen;
                     const trailAlpha = progress * 0.5;
                     const trailWidth = orbiter.size * progress * this.#scale;
 
@@ -125,18 +151,21 @@ export class OrbitLayer extends SimulationLayer {
                         continue;
                     }
 
+                    const idx0 = (oldest + ti) % trailLen;
+                    const idx1 = (oldest + ti + 1) % trailLen;
+
                     ctx.globalAlpha = trailAlpha;
                     ctx.strokeStyle = `rgb(${cr}, ${cg}, ${cb})`;
                     ctx.lineWidth = trailWidth;
                     ctx.beginPath();
-                    ctx.moveTo(orbiter.trail[ti].x, orbiter.trail[ti].y);
-                    ctx.lineTo(orbiter.trail[ti + 1].x, orbiter.trail[ti + 1].y);
+                    ctx.moveTo(trail[idx0].x, trail[idx0].y);
+                    ctx.lineTo(trail[idx1].x, trail[idx1].y);
                     ctx.stroke();
                 }
             }
 
-            if (orbiter.trail.length > 0) {
-                const head = orbiter.trail[orbiter.trail.length - 1];
+            if (trailLen > 0) {
+                const head = trail[orbiter.trailHead];
                 const headSize = orbiter.size * this.#scale;
 
                 const glow = ctx.createRadialGradient(
@@ -177,7 +206,8 @@ export class OrbitLayer extends SimulationLayer {
             tilt: MULBERRY.next() * Math.PI,
             size: 1.5 + MULBERRY.next() * 2.5,
             color: this.#colors[Math.floor(MULBERRY.next() * this.#colors.length)],
-            trail: []
+            trail: [],
+            trailHead: 0
         };
     }
 }

package/src/orbits/types.ts

@@ -1,3 +1,13 @@
+export interface OrbitsConfig {
+    readonly centers?: number;
+    readonly orbitersPerCenter?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly trailLength?: number;
+    readonly showCenters?: boolean;
+    readonly scale?: number;
+}
+
 export type OrbitalCenter = {
     x: number;
     y: number;
@@ -12,5 +22,6 @@ export type Orbiter = {
     tilt: number;
     size: number;
     color: string;
-    trail: {x: number; y: number}[];
+    trail: { x: number; y: number }[];
+    trailHead: number;
 };

package/src/particles/index.ts

@@ -1,4 +1,10 @@
-export { ParticleLayer } from './layer';
-export { ParticleSimulation } from './simulation';
-export type { ParticleSimulationConfig } from './simulation';
+import { Particles } from './layer';
+import type { ParticlesConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createParticles(config?: ParticlesConfig): Effect<ParticlesConfig> {
+    return new Particles(config);
+}
+
+export type { ParticlesConfig };
 export type { NetworkParticle, ParticleMouseMode } from './types';

package/src/particles/layer.ts

@@ -1,18 +1,34 @@
 import { hexToRGB } from '@basmilius/utils';
-import { SimulationLayer } from '../layer';
+import { Effect } from '../effect';
 import { MULBERRY } from './consts';
-import type { ParticleSimulationConfig } from './simulation';
 import type { NetworkParticle, ParticleMouseMode } from './types';
 
-export class ParticleLayer extends SimulationLayer {
-    readonly #scale: number;
-    readonly #connectionDistance: number;
-    readonly #lineWidth: number;
-    readonly #mouseMode: ParticleMouseMode;
-    readonly #mouseRadius: number;
-    readonly #mouseStrength: number;
-    readonly #particleForces: boolean;
-    readonly #glow: boolean;
+export interface ParticlesConfig {
+    readonly count?: number;
+    readonly color?: string;
+    readonly lineColor?: string;
+    readonly size?: [number, number];
+    readonly speed?: [number, number];
+    readonly connectionDistance?: number;
+    readonly lineWidth?: number;
+    readonly mouseMode?: ParticleMouseMode;
+    readonly mouseRadius?: number;
+    readonly mouseStrength?: number;
+    readonly particleForces?: boolean;
+    readonly glow?: boolean;
+    readonly background?: string | null;
+    readonly scale?: number;
+}
+
+export class Particles extends Effect<ParticlesConfig> {
+    #scale: number;
+    #connectionDistance: number;
+    #lineWidth: number;
+    #mouseMode: ParticleMouseMode;
+    #mouseRadius: number;
+    #mouseStrength: number;
+    #particleForces: boolean;
+    #glow: boolean;
     readonly #background: string | null;
     readonly #colorRGB: [number, number, number];
     readonly #lineColorRGB: [number, number, number];
@@ -31,7 +47,7 @@ export class ParticleLayer extends SimulationLayer {
     #height: number = 540;
     #initialized: boolean = false;
 
-    constructor(config: ParticleSimulationConfig = {}) {
+    constructor(config: ParticlesConfig = {}) {
         super();
 
         this.#scale = config.scale ?? 1;
@@ -60,6 +76,33 @@ export class ParticleLayer extends SimulationLayer {
         this.#onMouseLeaveBound = this.#onMouseLeave.bind(this);
     }
 
+    configure(config: Partial<ParticlesConfig>): void {
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+        if (config.connectionDistance !== undefined) {
+            this.#connectionDistance = config.connectionDistance * this.#scale;
+        }
+        if (config.lineWidth !== undefined) {
+            this.#lineWidth = config.lineWidth;
+        }
+        if (config.mouseMode !== undefined) {
+            this.#mouseMode = config.mouseMode;
+        }
+        if (config.mouseRadius !== undefined) {
+            this.#mouseRadius = config.mouseRadius * this.#scale;
+        }
+        if (config.mouseStrength !== undefined) {
+            this.#mouseStrength = config.mouseStrength;
+        }
+        if (config.particleForces !== undefined) {
+            this.#particleForces = config.particleForces;
+        }
+        if (config.glow !== undefined) {
+            this.#glow = config.glow;
+        }
+    }
+
     onResize(width: number, height: number): void {
         this.#width = width;
         this.#height = height;

package/src/petals/index.ts

@@ -1,4 +1,10 @@
-export { PetalLayer } from './layer';
-export { PetalSimulation } from './simulation';
-export type { PetalSimulationConfig } from './simulation';
+import { Petals } from './layer';
+import type { PetalsConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createPetals(config?: PetalsConfig): Effect<PetalsConfig> {
+    return new Petals(config);
+}
+
+export type { PetalsConfig };
 export type { Petal } from './types';