@basmilius/sparkle 2.3.0 → 2.5.0

package/src/roots/layer.ts

@@ -0,0 +1,218 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { RootSystem, RootTip } from './types';
+
+export interface RootsConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly branchProbability?: number;
+    readonly maxSegments?: number;
+    readonly scale?: number;
+}
+
+export class Roots extends Effect<RootsConfig> {
+    readonly #scale: number;
+    #speed: number;
+    readonly #colorR: number;
+    readonly #colorG: number;
+    readonly #colorB: number;
+    readonly #branchProbability: number;
+    readonly #maxSegments: number;
+    readonly #count: number;
+    #systems: RootSystem[] = [];
+    #initialized: boolean = false;
+    #width: number = 800;
+    #height: number = 600;
+
+    constructor(config: RootsConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#branchProbability = config.branchProbability ?? 0.3;
+        this.#maxSegments = config.maxSegments ?? 200;
+        this.#count = config.count ?? 5;
+
+        const parsed = parseColor(config.color ?? '#4a3728');
+        this.#colorR = parsed.r;
+        this.#colorG = parsed.g;
+        this.#colorB = parsed.b;
+    }
+
+    configure(config: Partial<RootsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized && width > 0 && height > 0) {
+            this.#initialized = true;
+            this.#systems = [];
+            for (let i = 0; i < this.#count; i++) {
+                this.#systems.push(this.#createSystem(width, height));
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const growSteps = Math.ceil(this.#speed * dt / 16 * 2);
+
+        for (const system of this.#systems) {
+            if (system.phase === 'growing') {
+                for (let step = 0; step < growSteps; step++) {
+                    this.#growSystem(system);
+                }
+            } else {
+                system.opacity -= 0.04 * this.#speed * dt / 16;
+                if (system.opacity <= 0) {
+                    this.#resetSystem(system, width, height);
+                }
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, _width: number, _height: number): void {
+        for (const system of this.#systems) {
+            if (system.opacity <= 0) {
+                continue;
+            }
+
+            ctx.globalAlpha = system.opacity;
+            this.#drawSystem(ctx, system);
+        }
+
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+    }
+
+    #growSystem(system: RootSystem): void {
+        if (system.segmentCount >= this.#maxSegments) {
+            system.phase = 'fading';
+            return;
+        }
+
+        const activeTips = system.tips.filter(tip => tip.alive);
+        if (activeTips.length === 0) {
+            system.phase = 'fading';
+            return;
+        }
+
+        for (const tip of activeTips) {
+            // Grow upward with slight deviation
+            const angleDeviation = (MULBERRY.next() - 0.5) * 0.6;
+            tip.angle += angleDeviation;
+
+            // Keep growing upward (bias)
+            tip.angle = tip.angle * 0.85 + (-Math.PI / 2) * 0.15;
+
+            const stepSize = (3 + MULBERRY.next() * 4) * this.#scale;
+            const newX = tip.x + Math.cos(tip.angle) * stepSize;
+            const newY = tip.y + Math.sin(tip.angle) * stepSize;
+
+            tip.points.push({ x: newX, y: newY });
+            tip.x = newX;
+            tip.y = newY;
+            system.segmentCount++;
+
+            // Branch
+            if (tip.depth < 6 && MULBERRY.next() < this.#branchProbability * 0.04 && system.segmentCount < this.#maxSegments * 0.8) {
+                const branchAngle = tip.angle + (MULBERRY.next() > 0.5 ? 1 : -1) * (0.3 + MULBERRY.next() * 0.5);
+                const newTip: RootTip = {
+                    x: tip.x,
+                    y: tip.y,
+                    angle: branchAngle,
+                    depth: tip.depth + 1,
+                    points: [{ x: tip.x, y: tip.y }],
+                    alive: true,
+                    lineWidth: Math.max(0.5, tip.lineWidth * 0.7),
+                    colorVariant: MULBERRY.next() * 0.3
+                };
+                system.tips.push(newTip);
+                system.allTips.push(newTip);
+            }
+
+            // Kill tips that go off screen
+            if (newX < -50 || newX > this.#width + 50 || newY < -50) {
+                tip.alive = false;
+            }
+        }
+    }
+
+    #drawSystem(ctx: CanvasRenderingContext2D, system: RootSystem): void {
+        const r = this.#colorR;
+        const g = this.#colorG;
+        const b = this.#colorB;
+
+        for (const tip of system.allTips) {
+            if (tip.points.length < 2) {
+                continue;
+            }
+
+            const darkness = tip.colorVariant;
+            const cr = Math.max(0, r - darkness * 40);
+            const cg = Math.max(0, g - darkness * 30);
+            const cb = Math.max(0, b - darkness * 20);
+
+            ctx.strokeStyle = `rgb(${cr}, ${cg}, ${cb})`;
+            ctx.lineWidth = tip.lineWidth * this.#scale;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+
+            ctx.beginPath();
+            ctx.moveTo(tip.points[0].x, tip.points[0].y);
+
+            for (let i = 1; i < tip.points.length - 1; i++) {
+                const mx = (tip.points[i].x + tip.points[i + 1].x) / 2;
+                const my = (tip.points[i].y + tip.points[i + 1].y) / 2;
+                ctx.quadraticCurveTo(tip.points[i].x, tip.points[i].y, mx, my);
+            }
+
+            const last = tip.points[tip.points.length - 1];
+            ctx.lineTo(last.x, last.y);
+            ctx.stroke();
+        }
+    }
+
+    #createSystem(width: number, height: number): RootSystem {
+        const startX = width * (0.2 + MULBERRY.next() * 0.6);
+        const startY = height + 10;
+        const baseWidth = 3 + MULBERRY.next() * 3;
+
+        const rootTip: RootTip = {
+            x: startX,
+            y: startY,
+            angle: -Math.PI / 2 + (MULBERRY.next() - 0.5) * 0.3,
+            depth: 0,
+            points: [{ x: startX, y: startY }],
+            alive: true,
+            lineWidth: baseWidth,
+            colorVariant: MULBERRY.next() * 0.2
+        };
+
+        return {
+            tips: [rootTip],
+            allTips: [rootTip],
+            segmentCount: 0,
+            phase: 'growing',
+            opacity: 0.8 + MULBERRY.next() * 0.2
+        };
+    }
+
+    #resetSystem(system: RootSystem, width: number, height: number): void {
+        const newSystem = this.#createSystem(width, height);
+        system.tips = newSystem.tips;
+        system.allTips = newSystem.allTips;
+        system.segmentCount = 0;
+        system.phase = 'growing';
+        system.opacity = 0.8 + MULBERRY.next() * 0.2;
+    }
+}

package/src/roots/types.ts

@@ -0,0 +1,23 @@
+export type RootPoint = {
+    x: number;
+    y: number;
+};
+
+export type RootTip = {
+    x: number;
+    y: number;
+    angle: number;
+    depth: number;
+    points: RootPoint[];
+    alive: boolean;
+    lineWidth: number;
+    colorVariant: number;
+};
+
+export type RootSystem = {
+    tips: RootTip[];
+    allTips: RootTip[];
+    segmentCount: number;
+    phase: 'growing' | 'fading';
+    opacity: number;
+};

package/src/smoke/consts.ts

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

package/src/smoke/index.ts

@@ -0,0 +1,9 @@
+import { Smoke } from './layer';
+import type { SmokeConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createSmoke(config?: SmokeConfig): Effect<SmokeConfig> {
+    return new Smoke(config);
+}
+
+export type { SmokeConfig };

package/src/smoke/layer.ts

@@ -0,0 +1,182 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { SmokeParticle } from './types';
+
+export interface SmokeConfig {
+    readonly color?: string;
+    readonly count?: number;
+    readonly scale?: number;
+    readonly speed?: number;
+    readonly spread?: number;
+}
+
+const SPRITE_SIZE = 128;
+const SPRITE_CENTER = SPRITE_SIZE / 2;
+const SPRITE_RADIUS = SPRITE_SIZE / 2;
+const SPRITE_VARIANTS = 4;
+
+export class Smoke extends Effect<SmokeConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #count: number;
+    #spread: number;
+    #time: number = 0;
+    #particles: SmokeParticle[] = [];
+    #sprites: HTMLCanvasElement[] = [];
+    #colorR: number = 136;
+    #colorG: number = 136;
+    #colorB: number = 136;
+
+    constructor(config: SmokeConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#count = config.count ?? 40;
+        this.#spread = config.spread ?? 0.3;
+
+        const {r, g, b} = parseColor(config.color ?? '#888888');
+        this.#colorR = r;
+        this.#colorG = g;
+        this.#colorB = b;
+
+        if (innerWidth < 991) {
+            this.#count = Math.floor(this.#count / 2);
+        }
+
+        this.#sprites = this.#createSprites(r, g, b);
+
+        for (let i = 0; i < this.#count; ++i) {
+            this.#particles.push(this.#createParticle(true));
+        }
+    }
+
+    configure(config: Partial<SmokeConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+
+        if (config.spread !== undefined) {
+            this.#spread = config.spread;
+        }
+
+        if (config.color !== undefined) {
+            const {r, g, b} = parseColor(config.color);
+            this.#colorR = r;
+            this.#colorG = g;
+            this.#colorB = b;
+            this.#sprites = this.#createSprites(r, g, b);
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.008 * dt;
+
+        for (let index = 0; index < this.#particles.length; index++) {
+            const particle = this.#particles[index];
+
+            particle.age += dt;
+
+            const progress = particle.age / particle.lifetime;
+
+            const turbulence = Math.sin(this.#time * particle.turbulenceSpeed + particle.turbulenceOffset) * 0.0002
+                + Math.sin(this.#time * particle.turbulenceSpeed * 1.7 + particle.turbulenceOffset + 2.1) * 0.0001;
+
+            particle.x += (particle.vx + turbulence) * dt;
+            particle.y += particle.vy * dt;
+            particle.radius = particle.maxRadius * Math.min(1, progress * 3);
+            particle.opacity = progress < 0.15
+                ? progress / 0.15 * 0.35
+                : (1 - progress) * 0.35;
+
+            if (particle.age >= particle.lifetime || particle.y < -0.3) {
+                this.#particles[index] = this.#createParticle(false);
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalCompositeOperation = 'screen';
+
+        for (const particle of this.#particles) {
+            const px = particle.x * width;
+            const py = particle.y * height;
+            const displayRadius = particle.radius * this.#scale * Math.min(width, height) * 0.5;
+
+            if (displayRadius < 1) {
+                continue;
+            }
+
+            ctx.globalAlpha = particle.opacity;
+            ctx.drawImage(
+                this.#sprites[particle.spriteIndex],
+                px - displayRadius,
+                py - displayRadius,
+                displayRadius * 2,
+                displayRadius * 2
+            );
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+    }
+
+    #createSprites(r: number, g: number, b: number): HTMLCanvasElement[] {
+        const sprites: HTMLCanvasElement[] = [];
+
+        for (let variant = 0; variant < SPRITE_VARIANTS; variant++) {
+            const canvas = document.createElement('canvas');
+            canvas.width = SPRITE_SIZE;
+            canvas.height = SPRITE_SIZE;
+            const spriteCtx = canvas.getContext('2d')!;
+
+            const offsets = [
+                {dx: 0, dy: 0, r: SPRITE_RADIUS},
+                {dx: SPRITE_RADIUS * 0.15, dy: -SPRITE_RADIUS * 0.1, r: SPRITE_RADIUS * 0.85},
+                {dx: -SPRITE_RADIUS * 0.1, dy: SPRITE_RADIUS * 0.05, r: SPRITE_RADIUS * 0.7}
+            ];
+
+            for (const offset of offsets) {
+                const cx = SPRITE_CENTER + offset.dx;
+                const cy = SPRITE_CENTER + offset.dy;
+                const gradient = spriteCtx.createRadialGradient(cx, cy, 0, cx, cy, offset.r);
+                gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.25)`);
+                gradient.addColorStop(0.4, `rgba(${r}, ${g}, ${b}, 0.12)`);
+                gradient.addColorStop(0.75, `rgba(${r}, ${g}, ${b}, 0.03)`);
+                gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+                spriteCtx.fillStyle = gradient;
+                spriteCtx.beginPath();
+                spriteCtx.arc(cx, cy, offset.r, 0, Math.PI * 2);
+                spriteCtx.fill();
+            }
+
+            sprites.push(canvas);
+        }
+
+        return sprites;
+    }
+
+    #createParticle(initialSpread: boolean): SmokeParticle {
+        const lifetime = (4 + MULBERRY.next() * 6) * (1 / this.#speed) * 60;
+        const startX = 0.5 + (MULBERRY.next() - 0.5) * this.#spread;
+        const startY = initialSpread ? 0.6 + MULBERRY.next() * 0.5 : 1.05;
+
+        return {
+            x: startX,
+            y: startY,
+            vx: (MULBERRY.next() - 0.5) * 0.0002,
+            vy: -(0.0008 + MULBERRY.next() * 0.001) * this.#speed,
+            age: initialSpread ? MULBERRY.next() * lifetime : 0,
+            lifetime,
+            radius: 0,
+            maxRadius: 0.15 + MULBERRY.next() * 0.25,
+            opacity: 0,
+            turbulenceOffset: MULBERRY.next() * Math.PI * 2,
+            turbulenceSpeed: 0.5 + MULBERRY.next() * 1.5,
+            spriteIndex: Math.floor(MULBERRY.next() * SPRITE_VARIANTS)
+        };
+    }
+}

package/src/smoke/types.ts

@@ -0,0 +1,14 @@
+export interface SmokeParticle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    age: number;
+    lifetime: number;
+    radius: number;
+    maxRadius: number;
+    opacity: number;
+    turbulenceOffset: number;
+    turbulenceSpeed: number;
+    spriteIndex: number;
+}

package/src/snow/layer.ts

@@ -119,7 +119,8 @@ export class Snow extends Effect<SnowConfig> {
             if (snowflake.spriteIndex === 3) {
                 const cos = Math.cos(snowflake.rotation);
                 const sin = Math.sin(snowflake.rotation);
-                ctx.setTransform(cos, sin, -sin, cos, px, py);
+                ctx.save();
+                ctx.transform(cos, sin, -sin, cos, px, py);
                 ctx.drawImage(
                     this.#sprites[snowflake.spriteIndex],
                     -displayRadius,
@@ -127,7 +128,7 @@ export class Snow extends Effect<SnowConfig> {
                     displaySize,
                     displaySize
                 );
-                ctx.resetTransform();
+                ctx.restore();
             } else {
                 ctx.drawImage(
                     this.#sprites[snowflake.spriteIndex],

package/src/topography/consts.ts

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

package/src/topography/index.ts

@@ -0,0 +1,9 @@
+import { Topography } from './layer';
+import type { TopographyConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createTopography(config?: TopographyConfig): Effect<TopographyConfig> {
+    return new Topography(config);
+}
+
+export type { TopographyConfig };

package/src/topography/layer.ts

@@ -0,0 +1,141 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+
+export interface TopographyConfig {
+    readonly speed?: number;
+    readonly scale?: number;
+    readonly resolution?: number;
+    readonly contourSpacing?: number;
+    readonly lineWidth?: number;
+    readonly color?: string;
+}
+
+export class Topography extends Effect<TopographyConfig> {
+    #speed: number;
+    #scale: number;
+    readonly #resolution: number;
+    readonly #contourSpacing: number;
+    readonly #lineWidth: number;
+    readonly #colorR: number;
+    readonly #colorG: number;
+    readonly #colorB: number;
+    #time: number = 0;
+    #offscreen: HTMLCanvasElement | null = null;
+    #offscreenCtx: CanvasRenderingContext2D | null = null;
+    #imageData: ImageData | null = null;
+
+    constructor(config: TopographyConfig = {}) {
+        super();
+
+        this.#speed = config.speed ?? 0.5;
+        this.#scale = config.scale ?? 1;
+        this.#resolution = config.resolution ?? 2;
+        this.#contourSpacing = config.contourSpacing ?? 0.1;
+        this.#lineWidth = config.lineWidth ?? 1.5;
+
+        const [cr, cg, cb] = hexToRGB(config.color ?? '#2d5016');
+        this.#colorR = cr;
+        this.#colorG = cg;
+        this.#colorB = cb;
+    }
+
+    configure(config: Partial<TopographyConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.02 * dt * this.#speed;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const resolution = this.#resolution;
+        const offWidth = Math.ceil(width / resolution);
+        const offHeight = Math.ceil(height / resolution);
+
+        if (!this.#offscreen || this.#offscreen.width !== offWidth || this.#offscreen.height !== offHeight) {
+            this.#offscreen = document.createElement('canvas');
+            this.#offscreen.width = offWidth;
+            this.#offscreen.height = offHeight;
+            this.#offscreenCtx = this.#offscreen.getContext('2d');
+            this.#imageData = this.#offscreenCtx!.createImageData(offWidth, offHeight);
+        }
+
+        const data = this.#imageData!.data;
+        const time = this.#time;
+        const scale = this.#scale;
+        const spacing = this.#contourSpacing;
+        const lineWidth = this.#lineWidth;
+        const colorR = this.#colorR;
+        const colorG = this.#colorG;
+        const colorB = this.#colorB;
+
+        const freq1 = 80 * scale;
+        const freq2 = 50 * scale;
+        const freq3 = 30 * scale;
+
+        const heightField = new Float32Array(offWidth * offHeight);
+
+        for (let py = 0; py < offHeight; py++) {
+            const worldY = py * resolution;
+
+            for (let px = 0; px < offWidth; px++) {
+                const worldX = px * resolution;
+
+                const value = Math.sin(worldX / freq1 + time) * Math.sin(worldY / freq1 + time * 0.7)
+                    + 0.5 * Math.sin(worldX / freq2 + worldY / freq2 + time * 1.3)
+                    + 0.25 * Math.sin(worldX / freq3 - time * 0.5) * Math.sin(worldY / freq3 + time * 0.9);
+
+                heightField[py * offWidth + px] = value;
+            }
+        }
+
+        for (let py = 0; py < offHeight; py++) {
+            for (let px = 0; px < offWidth; px++) {
+                const index = py * offWidth + px;
+                const value = heightField[index];
+                const contourLevel = Math.floor(value / spacing);
+
+                let isContour = false;
+
+                if (px < offWidth - 1) {
+                    const rightLevel = Math.floor(heightField[index + 1] / spacing);
+                    if (contourLevel !== rightLevel) {
+                        isContour = true;
+                    }
+                }
+
+                if (!isContour && py < offHeight - 1) {
+                    const belowLevel = Math.floor(heightField[index + offWidth] / spacing);
+                    if (contourLevel !== belowLevel) {
+                        isContour = true;
+                    }
+                }
+
+                const offset = index * 4;
+
+                if (isContour) {
+                    const alpha = Math.min(255, 255 * lineWidth);
+                    data[offset] = colorR;
+                    data[offset + 1] = colorG;
+                    data[offset + 2] = colorB;
+                    data[offset + 3] = alpha;
+                } else {
+                    data[offset] = colorR;
+                    data[offset + 1] = colorG;
+                    data[offset + 2] = colorB;
+                    data[offset + 3] = 10;
+                }
+            }
+        }
+
+        this.#offscreenCtx!.putImageData(this.#imageData!, 0, 0);
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.drawImage(this.#offscreen!, 0, 0, width, height);
+    }
+}

package/src/tornado/consts.ts

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

package/src/tornado/index.ts

@@ -0,0 +1,10 @@
+import { Tornado } from './layer';
+import type { TornadoConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createTornado(config?: TornadoConfig): Effect<TornadoConfig> {
+    return new Tornado(config);
+}
+
+export type { TornadoConfig };
+export type { TornadoDebris, TornadoParticle } from './types';