@basmilius/sparkle 2.0.0 → 2.1.0

package/src/leaves/consts.ts

@@ -0,0 +1,16 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const LEAF_COLORS: string[] = [
+    '#c0392b', // deep red
+    '#e74c3c', // bright red
+    '#d35400', // burnt orange
+    '#e67e22', // orange
+    '#f39c12', // amber
+    '#f1c40f', // golden yellow
+    '#d4a017', // dark gold
+    '#8b4513', // saddle brown
+    '#a0522d', // sienna
+    '#6b8e23'  // olive (some green still)
+];

package/src/leaves/index.ts

@@ -0,0 +1,4 @@
+export { LeafLayer } from './layer';
+export { LeafSimulation } from './simulation';
+export type { LeafSimulationConfig } from './simulation';
+export type { Leaf } from './types';

package/src/leaves/layer.ts

@@ -0,0 +1,251 @@
+import { SimulationLayer } from '../layer';
+import { LEAF_COLORS, MULBERRY } from './consts';
+import type { LeafSimulationConfig } from './simulation';
+import type { Leaf } from './types';
+
+export class LeafLayer extends SimulationLayer {
+    readonly #scale: number;
+    readonly #size: number;
+    readonly #speed: number;
+    readonly #wind: number;
+    readonly #colors: string[];
+    #maxCount: number;
+    #time: number = 0;
+    #leaves: Leaf[] = [];
+    #sprites: HTMLCanvasElement[] = [];
+    #height: number = 540;
+
+    constructor(config: LeafSimulationConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 80;
+        this.#size = (config.size ?? 22) * this.#scale;
+        this.#speed = config.speed ?? 1;
+        this.#wind = config.wind ?? 0.3;
+        this.#colors = config.colors ?? LEAF_COLORS;
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        this.#sprites = this.#createSprites();
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#leaves.push(this.#createLeaf(true));
+        }
+    }
+
+    onResize(_width: number, height: number): void {
+        this.#height = height;
+    }
+
+    tick(dt: number, _width: number, height: number): void {
+        this.#height = height;
+        const speedFactor = (height / 540) / this.#speed;
+
+        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;
+
+        for (let index = 0; index < this.#leaves.length; index++) {
+            const leaf = this.#leaves[index];
+
+            const swing = Math.sin(this.#time * leaf.swingFrequency + leaf.swingOffset) * leaf.swingAmplitude;
+
+            leaf.x += (swing + (this.#wind + globalWind * 0.5) * leaf.depth) * dt / (2500 * speedFactor);
+            leaf.y += (leaf.fallSpeed * 2 + leaf.depth + leaf.size * 0.05) * dt / (500 * speedFactor);
+
+            leaf.rotation += leaf.rotationSpeed * dt;
+            leaf.flipAngle += leaf.flipSpeed * dt;
+
+            if (leaf.x > 1.15 || leaf.x < -0.15 || leaf.y > 1.05) {
+                const recycled = this.#createLeaf(false);
+
+                if (this.#wind + globalWind > 0.15) {
+                    recycled.x = -0.15;
+                    recycled.y = MULBERRY.next() * 0.7;
+                } else if (this.#wind + globalWind < -0.15) {
+                    recycled.x = 1.15;
+                    recycled.y = MULBERRY.next() * 0.7;
+                } else {
+                    recycled.x = MULBERRY.next();
+                    recycled.y = -0.05 - MULBERRY.next() * 0.15;
+                }
+
+                this.#leaves[index] = recycled;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        for (const leaf of this.#leaves) {
+            const px = leaf.x * width;
+            const py = leaf.y * height;
+            const displaySize = leaf.size * leaf.depth;
+            const scaleX = Math.cos(leaf.flipAngle);
+
+            ctx.save();
+            ctx.translate(px, py);
+            ctx.rotate(leaf.rotation);
+            ctx.scale(scaleX, 1);
+            ctx.globalAlpha = 0.3 + leaf.depth * 0.7;
+            ctx.drawImage(
+                this.#sprites[leaf.colorIndex % this.#sprites.length],
+                -displaySize / 2,
+                -displaySize / 2,
+                displaySize,
+                displaySize
+            );
+            ctx.restore();
+        }
+
+        ctx.globalAlpha = 1;
+    }
+
+    #createSprites(): HTMLCanvasElement[] {
+        const sprites: HTMLCanvasElement[] = [];
+
+        for (const color of this.#colors) {
+            sprites.push(this.#createLeafSprite(color, 0));
+            sprites.push(this.#createLeafSprite(color, 1));
+            sprites.push(this.#createLeafSprite(color, 2));
+        }
+
+        return sprites;
+    }
+
+    #createLeafSprite(color: string, shape: number): HTMLCanvasElement {
+        const size = 64;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext('2d')!;
+
+        const cx = size / 2;
+        const cy = size / 2;
+
+        ctx.fillStyle = color;
+
+        switch (shape) {
+            case 0:
+                this.#drawOvalLeaf(ctx, cx, cy, size);
+                break;
+            case 1:
+                this.#drawMapleLeaf(ctx, cx, cy, size);
+                break;
+            case 2:
+                this.#drawPointedLeaf(ctx, cx, cy, size);
+                break;
+        }
+
+        return canvas;
+    }
+
+    #drawOvalLeaf(ctx: CanvasRenderingContext2D, cx: number, cy: number, size: number): void {
+        const hw = size * 0.3;
+        const hh = size * 0.42;
+
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - hh);
+        ctx.bezierCurveTo(cx + hw * 1.2, cy - hh * 0.5, cx + hw, cy + hh * 0.5, cx, cy + hh);
+        ctx.bezierCurveTo(cx - hw, cy + hh * 0.5, cx - hw * 1.2, cy - hh * 0.5, cx, cy - hh);
+        ctx.fill();
+
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.15)';
+        ctx.lineWidth = 0.8;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - hh * 0.8);
+        ctx.lineTo(cx, cy + hh * 0.8);
+        ctx.stroke();
+
+        for (const offset of [-0.3, 0, 0.3]) {
+            const py = cy + hh * offset;
+            ctx.beginPath();
+            ctx.moveTo(cx, py);
+            ctx.quadraticCurveTo(cx + hw * 0.5, py - 3, cx + hw * 0.7, py - 1);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(cx, py);
+            ctx.quadraticCurveTo(cx - hw * 0.5, py - 3, cx - hw * 0.7, py - 1);
+            ctx.stroke();
+        }
+    }
+
+    #drawMapleLeaf(ctx: CanvasRenderingContext2D, cx: number, cy: number, size: number): void {
+        const r = size * 0.38;
+
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - r);
+
+        const points = 5;
+        for (let i = 0; i < points; i++) {
+            const angle = (i / points) * Math.PI * 2 - Math.PI / 2;
+            const nextAngle = ((i + 1) / points) * Math.PI * 2 - Math.PI / 2;
+            const outerR = r * (0.85 + (i % 2) * 0.15);
+            const innerR = r * 0.45;
+            const midAngle = (angle + nextAngle) / 2;
+
+            ctx.lineTo(cx + Math.cos(angle) * outerR, cy + Math.sin(angle) * outerR);
+            ctx.lineTo(cx + Math.cos(midAngle) * innerR, cy + Math.sin(midAngle) * innerR);
+        }
+
+        ctx.closePath();
+        ctx.fill();
+
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.12)';
+        ctx.lineWidth = 0.7;
+        for (let i = 0; i < points; i++) {
+            const angle = (i / points) * Math.PI * 2 - Math.PI / 2;
+            const outerR = r * 0.7;
+            ctx.beginPath();
+            ctx.moveTo(cx, cy);
+            ctx.lineTo(cx + Math.cos(angle) * outerR, cy + Math.sin(angle) * outerR);
+            ctx.stroke();
+        }
+    }
+
+    #drawPointedLeaf(ctx: CanvasRenderingContext2D, cx: number, cy: number, size: number): void {
+        const hw = size * 0.22;
+        const hh = size * 0.44;
+
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - hh);
+        ctx.quadraticCurveTo(cx + hw * 1.6, cy - hh * 0.1, cx + hw * 0.3, cy + hh * 0.6);
+        ctx.quadraticCurveTo(cx, cy + hh, cx, cy + hh);
+        ctx.quadraticCurveTo(cx, cy + hh, cx - hw * 0.3, cy + hh * 0.6);
+        ctx.quadraticCurveTo(cx - hw * 1.6, cy - hh * 0.1, cx, cy - hh);
+        ctx.fill();
+
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.15)';
+        ctx.lineWidth = 0.8;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - hh * 0.7);
+        ctx.lineTo(cx, cy + hh * 0.9);
+        ctx.stroke();
+    }
+
+    #createLeaf(initialSpread: boolean): Leaf {
+        const depth = 0.3 + MULBERRY.next() * 0.7;
+
+        return {
+            x: MULBERRY.next(),
+            y: initialSpread ? MULBERRY.next() * 2 - 1 : -0.05 - MULBERRY.next() * 0.15,
+            size: (MULBERRY.next() * 0.6 + 0.5) * this.#size,
+            depth,
+            rotation: MULBERRY.next() * Math.PI * 2,
+            rotationSpeed: (MULBERRY.next() - 0.5) * 0.04,
+            flipAngle: MULBERRY.next() * Math.PI * 2,
+            flipSpeed: 0.02 + MULBERRY.next() * 0.04,
+            swingAmplitude: 0.4 + MULBERRY.next() * 0.8,
+            swingFrequency: 0.5 + MULBERRY.next() * 1.5,
+            swingOffset: MULBERRY.next() * Math.PI * 2,
+            fallSpeed: 0.3 + MULBERRY.next() * 0.7,
+            shape: Math.floor(MULBERRY.next() * 3),
+            colorIndex: Math.floor(MULBERRY.next() * this.#colors.length * 3)
+        };
+    }
+}

package/src/leaves/simulation.ts

@@ -0,0 +1,18 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { LeafLayer } from './layer';
+
+export interface LeafSimulationConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly wind?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class LeafSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: LeafSimulationConfig = {}) {
+        super(canvas, new LeafLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/leaves/types.ts

@@ -0,0 +1,16 @@
+export type Leaf = {
+    x: number;
+    y: number;
+    size: number;
+    depth: number;
+    rotation: number;
+    rotationSpeed: number;
+    flipAngle: number;
+    flipSpeed: number;
+    swingAmplitude: number;
+    swingFrequency: number;
+    swingOffset: number;
+    fallSpeed: number;
+    shape: number;
+    colorIndex: number;
+};

package/src/lightning/consts.ts

@@ -0,0 +1,3 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);

package/src/lightning/index.ts

@@ -0,0 +1,6 @@
+export { LightningLayer } from './layer';
+export { LightningSimulation } from './simulation';
+export type { LightningSimulationConfig } from './simulation';
+export { LightningSystem } from './system';
+export type { LightningSystemConfig } from './system';
+export type { LightningBolt, LightningBranch } from './types';

package/src/lightning/layer.ts

@@ -0,0 +1,41 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { MULBERRY } from './consts';
+import type { LightningSimulationConfig } from './simulation';
+import { LightningSystem } from './system';
+
+export class LightningLayer extends SimulationLayer {
+    readonly #system: LightningSystem;
+    readonly #enableFlash: boolean;
+
+    constructor(config: LightningSimulationConfig = {}) {
+        super();
+
+        this.#enableFlash = config.flash ?? true;
+
+        const [r, g, b] = hexToRGB(config.color ?? '#b4c8ff');
+        this.#system = new LightningSystem(
+            {
+                frequency: config.frequency ?? 1,
+                color: [r, g, b],
+                branches: config.branches ?? true,
+                flash: this.#enableFlash,
+                scale: config.scale ?? 1
+            },
+            () => MULBERRY.next()
+        );
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#system.tick(dt);
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        if (this.#system.flashAlpha > 0) {
+            ctx.fillStyle = `rgba(255, 255, 255, ${this.#system.flashAlpha})`;
+            ctx.fillRect(0, 0, width, height);
+        }
+
+        this.#system.draw(ctx, width, height);
+    }
+}

package/src/lightning/simulation.ts

@@ -0,0 +1,17 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { LightningLayer } from './layer';
+
+export interface LightningSimulationConfig {
+    readonly frequency?: number;
+    readonly color?: string;
+    readonly branches?: boolean;
+    readonly flash?: boolean;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class LightningSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: LightningSimulationConfig = {}) {
+        super(canvas, new LightningLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/lightning/system.ts

@@ -0,0 +1,196 @@
+import type { LightningBolt, LightningBranch } from './types';
+
+export interface LightningSystemConfig {
+    readonly frequency?: number;
+    readonly color?: [number, number, number];
+    readonly branches?: boolean;
+    readonly flash?: boolean;
+    readonly scale?: number;
+    readonly groundLevel?: number;
+}
+
+export class LightningSystem {
+    readonly #frequency: number;
+    readonly #colorR: number;
+    readonly #colorG: number;
+    readonly #colorB: number;
+    readonly #enableBranches: boolean;
+    readonly #enableFlash: boolean;
+    readonly #scale: number;
+    readonly #groundLevel: number;
+    readonly #rng: () => number;
+    #bolts: LightningBolt[] = [];
+    #flashAlpha: number = 0;
+    #cooldown: number = 0;
+
+    get flashAlpha(): number {
+        return this.#flashAlpha;
+    }
+
+    constructor(config: LightningSystemConfig, rng: () => number) {
+        this.#frequency = config.frequency ?? 1;
+        this.#enableBranches = config.branches ?? true;
+        this.#enableFlash = config.flash ?? true;
+        this.#scale = config.scale ?? 1;
+        this.#groundLevel = config.groundLevel ?? 1;
+        this.#rng = rng;
+
+        const color = config.color ?? [180, 200, 255];
+        this.#colorR = color[0];
+        this.#colorG = color[1];
+        this.#colorB = color[2];
+
+        this.#cooldown = this.#nextCooldown();
+    }
+
+    tick(dt: number): void {
+        this.#cooldown -= dt;
+
+        if (this.#cooldown <= 0) {
+            this.#bolts.push(this.#createBolt());
+
+            if (this.#enableFlash) {
+                this.#flashAlpha = 0.3;
+            }
+
+            this.#cooldown = this.#nextCooldown();
+        }
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#bolts.length; i++) {
+            const bolt = this.#bolts[i];
+
+            bolt.ticksAlive += dt;
+            bolt.alpha = Math.max(0, 1 - bolt.ticksAlive / bolt.lifetime);
+
+            if (bolt.alpha > 0) {
+                this.#bolts[alive++] = bolt;
+            }
+        }
+
+        this.#bolts.length = alive;
+
+        if (this.#flashAlpha > 0) {
+            this.#flashAlpha -= 0.012 * dt;
+
+            if (this.#flashAlpha < 0) {
+                this.#flashAlpha = 0;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+
+        for (const bolt of this.#bolts) {
+            if (bolt.alpha <= 0) {
+                continue;
+            }
+
+            this.#drawSegments(ctx, bolt.segments, bolt.alpha, 6 * this.#scale, 2 * this.#scale, width, height);
+
+            for (const branch of bolt.branches) {
+                const branchAlpha = bolt.alpha * branch.alpha;
+                this.#drawSegments(ctx, branch.segments, branchAlpha, 3 * this.#scale, 1 * this.#scale, width, height);
+            }
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+    }
+
+    #drawSegments(ctx: CanvasRenderingContext2D, segments: {x: number; y: number}[], alpha: number, outerWidth: number, innerWidth: number, width: number, height: number): void {
+        if (segments.length < 2) {
+            return;
+        }
+
+        // Outer glow
+        ctx.beginPath();
+        ctx.moveTo(segments[0].x * width, segments[0].y * height);
+
+        for (let i = 1; i < segments.length; i++) {
+            ctx.lineTo(segments[i].x * width, segments[i].y * height);
+        }
+
+        ctx.strokeStyle = `rgba(${this.#colorR}, ${this.#colorG}, ${this.#colorB}, ${alpha * 0.4})`;
+        ctx.lineWidth = outerWidth;
+        ctx.stroke();
+
+        // Inner bright line
+        ctx.beginPath();
+        ctx.moveTo(segments[0].x * width, segments[0].y * height);
+
+        for (let i = 1; i < segments.length; i++) {
+            ctx.lineTo(segments[i].x * width, segments[i].y * height);
+        }
+
+        ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
+        ctx.lineWidth = innerWidth;
+        ctx.stroke();
+    }
+
+    #createBolt(): LightningBolt {
+        const startX = 0.1 + this.#rng() * 0.8;
+        const segments: {x: number; y: number}[] = [{x: startX, y: 0}];
+        const branches: LightningBranch[] = [];
+
+        let currentX = startX;
+        let currentY = 0;
+        const steps = 10 + Math.floor(this.#rng() * 10);
+
+        for (let i = 0; i < steps; i++) {
+            currentX += (this.#rng() - 0.5) * 0.1;
+            currentY += (0.6 + this.#rng() * 0.4) / steps;
+            currentX = Math.max(0.02, Math.min(0.98, currentX));
+            segments.push({x: currentX, y: Math.min(currentY, this.#groundLevel)});
+
+            if (this.#enableBranches && i > 1 && i < steps - 2 && this.#rng() < 0.35) {
+                branches.push(this.#createBranch(currentX, currentY));
+            }
+
+            if (currentY >= this.#groundLevel) {
+                break;
+            }
+        }
+
+        return {
+            segments,
+            branches,
+            alpha: 1,
+            lifetime: 40 + this.#rng() * 40,
+            ticksAlive: 0
+        };
+    }
+
+    #createBranch(startX: number, startY: number): LightningBranch {
+        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);
+
+        let bx = startX;
+        let by = startY;
+
+        for (let i = 0; i < branchSteps; i++) {
+            bx += (0.02 + this.#rng() * 0.04) * direction;
+            by += (0.02 + this.#rng() * 0.04);
+            bx = Math.max(0.02, Math.min(0.98, bx));
+            segments.push({x: bx, y: Math.min(by, this.#groundLevel)});
+
+            if (by >= this.#groundLevel) {
+                break;
+            }
+        }
+
+        return {
+            segments,
+            alpha: 0.4 + this.#rng() * 0.4
+        };
+    }
+
+    #nextCooldown(): number {
+        const baseCooldown = 180 / this.#frequency;
+        return baseCooldown + this.#rng() * baseCooldown;
+    }
+}

package/src/lightning/types.ts

@@ -0,0 +1,12 @@
+export type LightningBranch = {
+    segments: {x: number; y: number}[];
+    alpha: number;
+};
+
+export type LightningBolt = {
+    segments: {x: number; y: number}[];
+    branches: LightningBranch[];
+    alpha: number;
+    lifetime: number;
+    ticksAlive: number;
+};

package/src/matrix/consts.ts

@@ -0,0 +1,5 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const MATRIX_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

package/src/matrix/index.ts

@@ -0,0 +1,4 @@
+export { MatrixLayer } from './layer';
+export { MatrixSimulation } from './simulation';
+export type { MatrixSimulationConfig } from './simulation';
+export type { MatrixColumn } from './types';