@basmilius/sparkle 2.3.0 → 2.5.0

package/src/crystallization/layer.ts

@@ -0,0 +1,318 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { CrystalBranch, CrystalSeed } from './types';
+
+const DEG_TO_RAD = Math.PI / 180;
+const TAU = Math.PI * 2;
+const MAX_BRANCHES_PER_SEED = 80;
+
+export interface CrystallizationConfig {
+    readonly seeds?: number;
+    readonly speed?: number;
+    readonly branchAngle?: number;
+    readonly maxDepth?: number;
+    readonly color?: string;
+    readonly scale?: number;
+}
+
+const enum SeedPhase {
+    Growing,
+    Holding,
+    Fading
+}
+
+export class Crystallization extends Effect<CrystallizationConfig> {
+    readonly #scale: number;
+    readonly #seedCount: number;
+    readonly #branchAngle: number;
+    readonly #maxDepth: number;
+    #speed: number;
+    #seeds: CrystalSeed[] = [];
+    #time: number = 0;
+    #width: number = 0;
+    #height: number = 0;
+    #colorR: number;
+    #colorG: number;
+    #colorB: number;
+
+    constructor(config: CrystallizationConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#seedCount = config.seeds ?? 5;
+        this.#speed = config.speed ?? 1;
+        this.#branchAngle = (config.branchAngle ?? 60) * DEG_TO_RAD;
+        this.#maxDepth = config.maxDepth ?? 5;
+
+        const {r, g, b} = this.#parseColor(config.color ?? '#88ccff');
+        this.#colorR = r;
+        this.#colorG = g;
+        this.#colorB = b;
+    }
+
+    configure(config: Partial<CrystallizationConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+        this.#seeds = [];
+
+        for (let idx = 0; idx < this.#seedCount; ++idx) {
+            this.#seeds.push(this.#createSeed(idx * 1.5));
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.02 * dt * this.#speed;
+        const growSpeed = 0.8 * dt * this.#speed;
+
+        for (let idx = 0; idx < this.#seeds.length; ++idx) {
+            const seed = this.#seeds[idx];
+
+            if (seed.delay > 0) {
+                seed.delay -= 0.02 * dt * this.#speed;
+                continue;
+            }
+
+            if (seed.phase === SeedPhase.Growing) {
+                const allGrown = this.#tickBranches(seed, seed.branches, growSpeed);
+
+                if (allGrown) {
+                    seed.phase = SeedPhase.Holding;
+                    seed.holdTimer = 120;
+                }
+            } else if (seed.phase === SeedPhase.Holding) {
+                seed.holdTimer -= dt * this.#speed;
+
+                if (seed.holdTimer <= 0) {
+                    seed.phase = SeedPhase.Fading;
+                }
+            } else {
+                seed.alpha -= 0.008 * dt * this.#speed;
+
+                if (seed.alpha <= 0) {
+                    this.#seeds[idx] = this.#createSeed(0);
+                }
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, _width: number, _height: number): void {
+        const cr = this.#colorR;
+        const cg = this.#colorG;
+        const cb = this.#colorB;
+
+        ctx.lineCap = 'round';
+
+        for (const seed of this.#seeds) {
+            if (seed.delay > 0 || seed.alpha <= 0) {
+                continue;
+            }
+
+            const baseAlpha = seed.alpha;
+
+            this.#drawBranches(ctx, seed.branches, baseAlpha, cr, cg, cb);
+            this.#drawSparkles(ctx, seed.branches, baseAlpha, seed.sparklePhase);
+        }
+
+        ctx.globalAlpha = 1;
+    }
+
+    #tickBranches(seed: CrystalSeed, branches: CrystalBranch[], growSpeed: number): boolean {
+        let allGrown = true;
+
+        for (const branch of branches) {
+            if (branch.growing) {
+                branch.currentLength += growSpeed * (1 + branch.depth * 0.3);
+
+                if (branch.currentLength >= branch.targetLength) {
+                    branch.currentLength = branch.targetLength;
+                    branch.growing = false;
+                    branch.grown = true;
+
+                    if (branch.depth < this.#maxDepth && seed.branchCount < MAX_BRANCHES_PER_SEED) {
+                        this.#spawnChildren(seed, branch);
+                    }
+                }
+
+                allGrown = false;
+            }
+
+            if (branch.children.length > 0) {
+                if (!this.#tickBranches(seed, branch.children, growSpeed)) {
+                    allGrown = false;
+                }
+            }
+
+            if (!branch.grown) {
+                allGrown = false;
+            }
+        }
+
+        return allGrown;
+    }
+
+    #drawBranches(ctx: CanvasRenderingContext2D, branches: CrystalBranch[], baseAlpha: number, cr: number, cg: number, cb: number): void {
+        for (const branch of branches) {
+            if (branch.currentLength <= 0) {
+                continue;
+            }
+
+            const endX = branch.x + Math.cos(branch.angle) * branch.currentLength;
+            const endY = branch.y + Math.sin(branch.angle) * branch.currentLength;
+            const depthFade = 1 - branch.depth * 0.12;
+
+            ctx.globalAlpha = baseAlpha * 0.12 * depthFade;
+            ctx.strokeStyle = `rgb(${cr}, ${cg}, ${cb})`;
+            ctx.lineWidth = branch.width + 4 * this.#scale;
+            ctx.beginPath();
+            ctx.moveTo(branch.x, branch.y);
+            ctx.lineTo(endX, endY);
+            ctx.stroke();
+
+            ctx.globalAlpha = baseAlpha * 0.8 * depthFade;
+            ctx.lineWidth = branch.width;
+            ctx.beginPath();
+            ctx.moveTo(branch.x, branch.y);
+            ctx.lineTo(endX, endY);
+            ctx.stroke();
+
+            if (branch.children.length > 0) {
+                this.#drawBranches(ctx, branch.children, baseAlpha, cr, cg, cb);
+            }
+        }
+    }
+
+    #drawSparkles(ctx: CanvasRenderingContext2D, branches: CrystalBranch[], baseAlpha: number, phase: number): void {
+        for (const branch of branches) {
+            if (branch.currentLength <= 0) {
+                continue;
+            }
+
+            if (branch.growing || (branch.grown && branch.children.length === 0)) {
+                const tipX = branch.x + Math.cos(branch.angle) * branch.currentLength;
+                const tipY = branch.y + Math.sin(branch.angle) * branch.currentLength;
+                const sparkle = 0.5 + 0.5 * Math.sin(this.#time * 10 + phase + branch.angle * 3);
+                const radius = (1 + sparkle * 1.5) * this.#scale;
+
+                ctx.globalAlpha = baseAlpha * sparkle * 0.8;
+                ctx.fillStyle = '#ffffff';
+                ctx.beginPath();
+                ctx.arc(tipX, tipY, radius, 0, TAU);
+                ctx.fill();
+            }
+
+            if (branch.children.length > 0) {
+                this.#drawSparkles(ctx, branch.children, baseAlpha, phase);
+            }
+        }
+    }
+
+    #createSeed(delay: number): CrystalSeed {
+        const seed: CrystalSeed = {
+            x: MULBERRY.next() * this.#width,
+            y: MULBERRY.next() * this.#height,
+            branches: [],
+            sparklePhase: MULBERRY.next() * TAU,
+            alpha: 1,
+            phase: SeedPhase.Growing,
+            holdTimer: 0,
+            delay,
+            branchCount: 0
+        };
+
+        const baseLength = (30 + MULBERRY.next() * 40) * this.#scale;
+
+        for (let branchIdx = 0; branchIdx < 6; ++branchIdx) {
+            const angle = (TAU / 6) * branchIdx + MULBERRY.next() * 0.1;
+
+            seed.branches.push({
+                x: seed.x,
+                y: seed.y,
+                angle,
+                length: 0,
+                targetLength: baseLength + MULBERRY.next() * 20 * this.#scale,
+                currentLength: 0,
+                depth: 0,
+                children: [],
+                width: (2.5 + MULBERRY.next()) * this.#scale,
+                growing: true,
+                grown: false
+            });
+
+            seed.branchCount += 1;
+        }
+
+        return seed;
+    }
+
+    #spawnChildren(seed: CrystalSeed, parent: CrystalBranch): void {
+        const tipX = parent.x + Math.cos(parent.angle) * parent.targetLength;
+        const tipY = parent.y + Math.sin(parent.angle) * parent.targetLength;
+        const childLength = parent.targetLength * (0.5 + MULBERRY.next() * 0.2);
+        const childWidth = Math.max(0.5 * this.#scale, parent.width * 0.65);
+        const nextDepth = parent.depth + 1;
+
+        const spawnChance = 1 - nextDepth * 0.15;
+
+        const angles = [
+            parent.angle + this.#branchAngle,
+            parent.angle - this.#branchAngle
+        ];
+
+        for (const angle of angles) {
+            if (MULBERRY.next() > spawnChance || seed.branchCount >= MAX_BRANCHES_PER_SEED) {
+                continue;
+            }
+
+            parent.children.push({
+                x: tipX,
+                y: tipY,
+                angle,
+                length: 0,
+                targetLength: childLength + MULBERRY.next() * 10 * this.#scale,
+                currentLength: 0,
+                depth: nextDepth,
+                children: [],
+                width: childWidth,
+                growing: true,
+                grown: false
+            });
+
+            seed.branchCount += 1;
+        }
+
+        if (MULBERRY.next() > 0.5 && seed.branchCount < MAX_BRANCHES_PER_SEED) {
+            parent.children.push({
+                x: tipX,
+                y: tipY,
+                angle: parent.angle + (MULBERRY.next() - 0.5) * 0.15,
+                length: 0,
+                targetLength: childLength * 0.7 + MULBERRY.next() * 8 * this.#scale,
+                currentLength: 0,
+                depth: nextDepth,
+                children: [],
+                width: childWidth,
+                growing: true,
+                grown: false
+            });
+
+            seed.branchCount += 1;
+        }
+    }
+
+    #parseColor(color: string): { r: number; g: number; b: number } {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d')!;
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 1, 1);
+        const data = ctx.getImageData(0, 0, 1, 1).data;
+        return {r: data[0], g: data[1], b: data[2]};
+    }
+}

package/src/crystallization/types.ts

@@ -0,0 +1,25 @@
+export type CrystalBranch = {
+    x: number;
+    y: number;
+    angle: number;
+    length: number;
+    targetLength: number;
+    currentLength: number;
+    depth: number;
+    children: CrystalBranch[];
+    width: number;
+    growing: boolean;
+    grown: boolean;
+};
+
+export type CrystalSeed = {
+    x: number;
+    y: number;
+    branches: CrystalBranch[];
+    sparklePhase: number;
+    alpha: number;
+    phase: number;
+    holdTimer: number;
+    delay: number;
+    branchCount: number;
+};

package/src/digital-rain/consts.ts

@@ -0,0 +1,7 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const BINARY_CHARS = '01';
+export const HEX_CHARS = '0123456789ABCDEF';
+export const MIXED_CHARS = '01023456789ABCDEF';

package/src/digital-rain/index.ts

@@ -0,0 +1,10 @@
+import { DigitalRain } from './layer';
+import type { DigitalRainConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createDigitalRain(config?: DigitalRainConfig): Effect<DigitalRainConfig> {
+    return new DigitalRain(config);
+}
+
+export type { DigitalRainConfig };
+export type { DigitalRainColumn, DigitalRainMode } from './types';

package/src/digital-rain/layer.ts

@@ -0,0 +1,195 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { BINARY_CHARS, HEX_CHARS, MIXED_CHARS, MULBERRY } from './consts';
+import type { DigitalRainColumn, DigitalRainMode } from './types';
+
+export interface DigitalRainConfig {
+    readonly speed?: number;
+    readonly fontSize?: number;
+    readonly columns?: number;
+    readonly mode?: DigitalRainMode;
+    readonly color?: string;
+    readonly trailLength?: number;
+    readonly scale?: number;
+}
+
+export class DigitalRain extends Effect<DigitalRainConfig> {
+    #speed: number;
+    #trailLength: number;
+    readonly #fontSize: number;
+    readonly #mode: DigitalRainMode;
+    readonly #colorRGB: [number, number, number];
+    readonly #scale: number;
+    #maxColumns: number;
+    #columns: DigitalRainColumn[] = [];
+    #respawnTimers: number[] = [];
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: DigitalRainConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#fontSize = (config.fontSize ?? 14) * this.#scale;
+        this.#maxColumns = config.columns ?? 0;
+        this.#mode = config.mode ?? 'hex';
+        this.#colorRGB = hexToRGB(config.color ?? '#00ffaa');
+        this.#trailLength = config.trailLength ?? 20;
+
+        if (innerWidth < 991 && this.#maxColumns > 0) {
+            this.#maxColumns = Math.floor(this.#maxColumns / 2);
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#columns = [];
+            this.#respawnTimers = [];
+
+            const columnWidth = this.#fontSize;
+            const totalSlots = Math.floor(width / columnWidth);
+            let columnCount: number;
+
+            if (this.#maxColumns === 0) {
+                columnCount = totalSlots;
+            } else {
+                columnCount = Math.min(this.#maxColumns, totalSlots);
+            }
+
+            if (innerWidth < 991 && this.#maxColumns === 0) {
+                columnCount = Math.floor(columnCount / 2);
+            }
+
+            for (let i = 0; i < columnCount; ++i) {
+                const column = this.#createColumn(totalSlots, height);
+                this.#columns.push(column);
+                this.#respawnTimers.push(0);
+            }
+        }
+    }
+
+    configure(config: Partial<DigitalRainConfig>): 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;
+
+        const columnWidth = this.#fontSize;
+        const totalSlots = Math.floor(width / columnWidth);
+
+        for (let i = 0; i < this.#columns.length; ++i) {
+            if (this.#respawnTimers[i] > 0) {
+                this.#respawnTimers[i] -= dt;
+
+                if (this.#respawnTimers[i] <= 0) {
+                    this.#columns[i] = this.#createColumn(totalSlots, height);
+                }
+
+                continue;
+            }
+
+            const column = this.#columns[i];
+
+            column.y += column.speed * this.#speed * dt;
+            column.life += dt;
+
+            // Randomly change characters as they fall
+            for (let ci = 0; ci < column.chars.length; ++ci) {
+                if (MULBERRY.next() < 0.04) {
+                    column.chars[ci] = this.#randomChar();
+                }
+            }
+
+            const topOfTrail = column.y - (column.chars.length - 1) * this.#fontSize;
+
+            if (topOfTrail > height) {
+                this.#respawnTimers[i] = 10 + MULBERRY.next() * 60;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.fillStyle = 'rgb(0, 0, 0)';
+        ctx.fillRect(0, 0, width, height);
+
+        const [cr, cg, cb] = this.#colorRGB;
+
+        ctx.font = `${this.#fontSize}px monospace`;
+        ctx.textAlign = 'center';
+
+        for (const column of this.#columns) {
+            const charCount = column.chars.length;
+
+            for (let ci = 0; ci < charCount; ++ci) {
+                const charY = column.y - (charCount - 1 - ci) * this.#fontSize;
+
+                if (charY < -this.#fontSize || charY > height + this.#fontSize) {
+                    continue;
+                }
+
+                const isHead = ci === charCount - 1;
+
+                if (isHead) {
+                    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
+                } else {
+                    const trailProgress = ci / (charCount - 1);
+                    const alpha = trailProgress * 0.8 + 0.05;
+                    ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${alpha})`;
+                }
+
+                ctx.fillText(column.chars[ci], column.x, charY);
+            }
+        }
+    }
+
+    #randomChar(): string {
+        let charset: string;
+
+        switch (this.#mode) {
+            case 'binary':
+                charset = BINARY_CHARS;
+                break;
+            case 'hex':
+                charset = HEX_CHARS;
+                break;
+            case 'mixed':
+                charset = MIXED_CHARS;
+                break;
+        }
+
+        return charset[Math.floor(MULBERRY.next() * charset.length)];
+    }
+
+    #createColumn(totalSlots: number, height: number): DigitalRainColumn {
+        const columnWidth = this.#fontSize;
+        const slot = Math.floor(MULBERRY.next() * totalSlots);
+        const length = Math.floor(this.#trailLength * 0.5 + MULBERRY.next() * this.#trailLength);
+        const chars: string[] = [];
+
+        for (let ci = 0; ci < length; ++ci) {
+            chars.push(this.#randomChar());
+        }
+
+        return {
+            x: slot * columnWidth + columnWidth / 2,
+            y: -(MULBERRY.next() * height),
+            speed: 1.5 + MULBERRY.next() * 3,
+            chars,
+            length,
+            life: 0
+        };
+    }
+}

package/src/digital-rain/types.ts

@@ -0,0 +1,10 @@
+export type DigitalRainMode = 'binary' | 'hex' | 'mixed';
+
+export type DigitalRainColumn = {
+    x: number;
+    y: number;
+    speed: number;
+    chars: string[];
+    length: number;
+    life: number;
+};

package/src/donuts/layer.ts

@@ -135,7 +135,9 @@ export class Donuts extends Effect<DonutsConfig> {
         for (const donut of this.#donuts) {
             const cos = Math.cos(donut.angle);
             const sin = Math.sin(donut.angle);
-            ctx.setTransform(cos, sin, -sin, cos, donut.x, donut.y);
+
+            ctx.save();
+            ctx.transform(cos, sin, -sin, cos, donut.x, donut.y);
 
             ctx.beginPath();
             ctx.arc(0, 0, donut.outerRadius, 0, Math.PI * 2);
@@ -144,9 +146,9 @@ export class Donuts extends Effect<DonutsConfig> {
 
             ctx.fillStyle = donut.color;
             ctx.fill();
-        }
 
-        ctx.resetTransform();
+            ctx.restore();
+        }
     }
 
     #updateDonut(donut: Donut, dt: number): void {

package/src/glitch/consts.ts

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

package/src/glitch/index.ts

@@ -0,0 +1,9 @@
+import { Glitch } from './layer';
+import type { GlitchConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createGlitch(config?: GlitchConfig): Effect<GlitchConfig> {
+    return new Glitch(config);
+}
+
+export type { GlitchConfig, GlitchSlice, GlitchBlock } from './types';