@basmilius/sparkle 2.0.0 → 2.2.0

package/src/plasma/layer.ts

@@ -0,0 +1,107 @@
+import { Effect } from '../effect';
+import type { PlasmaColor } from './types';
+
+export interface PlasmaConfig {
+    readonly speed?: number;
+    readonly scale?: number;
+    readonly resolution?: number;
+    readonly palette?: PlasmaColor[];
+}
+
+const DEFAULT_PALETTE: PlasmaColor[] = [
+    {r: 0, g: 255, b: 255},
+    {r: 255, g: 0, b: 255},
+    {r: 255, g: 255, b: 0},
+    {r: 0, g: 100, b: 255},
+    {r: 0, g: 255, b: 100}
+];
+
+export class Plasma extends Effect<PlasmaConfig> {
+    #speed: number;
+    #scale: number;
+    readonly #resolution: number;
+    readonly #palette: PlasmaColor[];
+    #time: number = 0;
+    #offscreen: HTMLCanvasElement | null = null;
+    #offscreenCtx: CanvasRenderingContext2D | null = null;
+    #imageData: ImageData | null = null;
+
+    constructor(config: PlasmaConfig = {}) {
+        super();
+
+        this.#speed = config.speed ?? 1;
+        this.#scale = config.scale ?? 1;
+        this.#resolution = config.resolution ?? 4;
+        this.#palette = config.palette ?? DEFAULT_PALETTE;
+    }
+
+    configure(config: Partial<PlasmaConfig>): 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 freq = 50 * scale;
+        const palette = this.#palette;
+        const paletteLen = palette.length;
+
+        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 / freq + time)
+                    + Math.sin(worldY / freq + time * 0.7)
+                    + Math.sin((worldX + worldY) / (freq * 1.3) + time * 1.3)
+                    + Math.sin(Math.sqrt(worldX * worldX + worldY * worldY) / freq + time * 0.5);
+
+                const normalized = (value + 4) / 8;
+                const mapped = normalized * (paletteLen - 1);
+                const index = Math.floor(mapped);
+                const frac = mapped - index;
+
+                const colorA = palette[index];
+                const colorB = palette[Math.min(index + 1, paletteLen - 1)];
+
+                const red = colorA.r + (colorB.r - colorA.r) * frac;
+                const green = colorA.g + (colorB.g - colorA.g) * frac;
+                const blue = colorA.b + (colorB.b - colorA.b) * frac;
+
+                const offset = (py * offWidth + px) * 4;
+                data[offset] = red;
+                data[offset + 1] = green;
+                data[offset + 2] = blue;
+                data[offset + 3] = 255;
+            }
+        }
+
+        this.#offscreenCtx!.putImageData(this.#imageData!, 0, 0);
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.drawImage(this.#offscreen!, 0, 0, width, height);
+    }
+}

package/src/plasma/types.ts

@@ -0,0 +1,5 @@
+export type PlasmaColor = {
+    r: number;
+    g: number;
+    b: number;
+};

package/src/rain/consts.ts

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

package/src/rain/index.ts

@@ -0,0 +1,12 @@
+import { Rain } from './layer';
+import type { RainConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createRain(config?: RainConfig): Effect<RainConfig> {
+    return new Rain(config);
+}
+
+export { RaindropParticle, SplashParticle } from './particle';
+export type { RainConfig };
+export type { RaindropParticleConfig, SplashParticleConfig } from './particle';
+export type { Raindrop, RainVariant, Splash } from './types';

package/src/rain/layer.ts

@@ -0,0 +1,194 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { Raindrop, RainVariant, Splash } from './types';
+
+export interface RainConfig {
+    readonly variant?: RainVariant;
+    readonly drops?: number;
+    readonly wind?: number;
+    readonly speed?: number;
+    readonly splashes?: boolean;
+    readonly color?: string;
+    readonly groundLevel?: number;
+    readonly scale?: number;
+}
+
+const VARIANT_PRESETS: Record<RainVariant, { drops: number; speed: number; wind: number; splashes: boolean }> = {
+    drizzle: {drops: 70, speed: 0.55, wind: 0.1, splashes: false},
+    downpour: {drops: 200, speed: 0.85, wind: 0.25, splashes: true},
+    thunderstorm: {drops: 300, speed: 1, wind: 0.4, splashes: true}
+};
+
+export class Rain extends Effect<RainConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #wind: number;
+    readonly #groundLevel: number;
+    #enableSplashes: boolean;
+    readonly #colorR: number;
+    readonly #colorG: number;
+    readonly #colorB: number;
+    #maxDrops: number;
+    #drops: Raindrop[] = [];
+    #splashes: Splash[] = [];
+
+    constructor(config: RainConfig = {}) {
+        super();
+
+        const variant = config.variant ?? 'downpour';
+        const preset = VARIANT_PRESETS[variant];
+
+        this.#scale = config.scale ?? 1;
+        this.#maxDrops = config.drops ?? preset.drops;
+        this.#speed = config.speed ?? preset.speed;
+        this.#wind = config.wind ?? preset.wind;
+        this.#groundLevel = config.groundLevel ?? 1.0;
+        this.#enableSplashes = config.splashes ?? preset.splashes;
+
+        const {r, g, b} = parseColor(config.color ?? 'rgba(174, 194, 224, 0.6)');
+        this.#colorR = r;
+        this.#colorG = g;
+        this.#colorB = b;
+
+        if (innerWidth < 991) {
+            this.#maxDrops = Math.floor(this.#maxDrops / 2);
+        }
+
+        for (let i = 0; i < this.#maxDrops; ++i) {
+            this.#drops.push(this.#createDrop(true));
+        }
+    }
+
+    configure(config: Partial<RainConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.wind !== undefined) {
+            this.#wind = config.wind;
+        }
+        if (config.splashes !== undefined) {
+            this.#enableSplashes = config.splashes;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        // Update raindrops
+        let aliveDrops = 0;
+
+        for (let i = 0; i < this.#drops.length; i++) {
+            const drop = this.#drops[i];
+
+            drop.x += (drop.vx * dt) / width;
+            drop.y += (drop.vy * dt) / height;
+
+            if (drop.y >= this.#groundLevel) {
+                if (this.#enableSplashes) {
+                    this.#createSplashBurst(drop.x, this.#groundLevel);
+                }
+
+                this.#drops[aliveDrops++] = this.#createDrop(false);
+            } else {
+                this.#drops[aliveDrops++] = drop;
+            }
+        }
+
+        this.#drops.length = aliveDrops;
+
+        // Refill drops
+        while (this.#drops.length < this.#maxDrops) {
+            this.#drops.push(this.#createDrop(false));
+        }
+
+        // Update splashes
+        let aliveSplashes = 0;
+
+        for (let i = 0; i < this.#splashes.length; i++) {
+            const splash = this.#splashes[i];
+
+            splash.x += (splash.vx * dt) / width;
+            splash.y += (splash.vy * dt) / height;
+            splash.vy += splash.gravity * dt;
+            splash.alpha -= 0.04 * dt;
+
+            if (splash.alpha > 0) {
+                this.#splashes[aliveSplashes++] = splash;
+            }
+        }
+
+        this.#splashes.length = aliveSplashes;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        // Raindrops
+        ctx.lineCap = 'round';
+        for (const drop of this.#drops) {
+            const px = drop.x * width;
+            const py = drop.y * height;
+            const lineWidth = (0.4 + drop.depth * 1) * this.#scale;
+
+            // Draw line along velocity direction
+            const speed = Math.sqrt(drop.vx * drop.vx + drop.vy * drop.vy);
+            const nx = speed > 0 ? drop.vx / speed : 0;
+            const ny = speed > 0 ? drop.vy / speed : -1;
+            const tailLength = drop.length * drop.depth;
+
+            ctx.beginPath();
+            ctx.moveTo(px, py);
+            ctx.lineTo(px - nx * tailLength, py - ny * tailLength);
+            ctx.strokeStyle = `rgba(${this.#colorR}, ${this.#colorG}, ${this.#colorB}, ${drop.opacity * drop.depth})`;
+            ctx.lineWidth = lineWidth;
+            ctx.stroke();
+        }
+
+        // Splashes
+        for (const splash of this.#splashes) {
+            const px = splash.x * width;
+            const py = splash.y * height;
+
+            ctx.beginPath();
+            ctx.arc(px, py, splash.size * this.#scale, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(${this.#colorR}, ${this.#colorG}, ${this.#colorB}, ${splash.alpha})`;
+            ctx.fill();
+        }
+    }
+
+    #createDrop(initialSpread: boolean): Raindrop {
+        const depth = 0.3 + MULBERRY.next() * 0.7;
+        const fallSpeed = (3.5 + MULBERRY.next() * 5) * depth * this.#speed;
+
+        // Extend spawn range upstream of wind direction so the windward edge stays covered.
+        // Drops blowing right need to also spawn left of the canvas (negative x), and vice versa.
+        const windOffset = Math.abs(this.#wind) * 0.5;
+        const xMin = this.#wind > 0 ? -windOffset : 0;
+        const xMax = this.#wind < 0 ? 1 + windOffset : 1;
+
+        return {
+            x: xMin + MULBERRY.next() * (xMax - xMin),
+            y: initialSpread ? MULBERRY.next() * this.#groundLevel : -MULBERRY.next() * 0.1,
+            vx: this.#wind * fallSpeed * 0.6,
+            vy: fallSpeed,
+            length: (8 + MULBERRY.next() * 15) * this.#scale,
+            speed: fallSpeed,
+            depth,
+            opacity: 0.3 + MULBERRY.next() * 0.4
+        };
+    }
+
+    #createSplashBurst(x: number, y: number): void {
+        const count = 2 + Math.floor(MULBERRY.next() * 2);
+
+        for (let i = 0; i < count; i++) {
+            this.#splashes.push({
+                x,
+                y,
+                vx: (MULBERRY.next() - 0.5) * 2,
+                vy: -(1 + MULBERRY.next() * 2),
+                alpha: 0.5 + MULBERRY.next() * 0.3,
+                size: 1 + MULBERRY.next() * 2,
+                gravity: 0.15
+            });
+        }
+    }
+
+}

package/src/rain/particle.ts

@@ -0,0 +1,132 @@
+import type { Point } from '../point';
+
+export interface RaindropParticleConfig {
+    readonly depth?: number;
+    readonly groundY?: number;
+    readonly length?: number;
+    readonly scale?: number;
+}
+
+export interface SplashParticleConfig {
+    readonly gravity?: number;
+    readonly scale?: number;
+    readonly size?: number;
+}
+
+export class RaindropParticle {
+    readonly #color: [number, number, number];
+    readonly #depth: number;
+    readonly #length: number;
+    readonly #groundY: number;
+    readonly #scale: number;
+    readonly #opacity: number;
+    readonly #vx: number;
+    readonly #vy: number;
+    #x: number;
+    #y: number;
+
+    get isDead(): boolean {
+        return this.#y >= this.#groundY;
+    }
+
+    get position(): Point {
+        return {x: this.#x, y: this.#y};
+    }
+
+    constructor(position: Point, velocity: Point, color: [number, number, number], config: RaindropParticleConfig = {}) {
+        this.#x = position.x;
+        this.#y = position.y;
+        this.#vx = velocity.x;
+        this.#vy = velocity.y;
+        this.#color = color;
+        this.#depth = config.depth ?? (0.3 + Math.random() * 0.7);
+        this.#groundY = config.groundY ?? Number.POSITIVE_INFINITY;
+        this.#length = (config.length ?? (8 + Math.random() * 15)) * (config.scale ?? 1);
+        this.#opacity = 0.3 + Math.random() * 0.4;
+        this.#scale = config.scale ?? 1;
+    }
+
+    draw(ctx: CanvasRenderingContext2D): void {
+        const [r, g, b] = this.#color;
+        const speed = Math.sqrt(this.#vx * this.#vx + this.#vy * this.#vy);
+        const nx = speed > 0 ? this.#vx / speed : 0;
+        const ny = speed > 0 ? this.#vy / speed : -1;
+
+        ctx.beginPath();
+        ctx.moveTo(this.#x, this.#y);
+        ctx.lineTo(this.#x - nx * this.#length * this.#depth, this.#y - ny * this.#length * this.#depth);
+        ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${this.#opacity * this.#depth})`;
+        ctx.lineWidth = (0.4 + this.#depth * 1) * this.#scale;
+        ctx.lineCap = 'round';
+        ctx.stroke();
+    }
+
+    tick(dt: number = 1): void {
+        this.#x += this.#vx * dt;
+        this.#y += this.#vy * dt;
+    }
+}
+
+export class SplashParticle {
+    readonly #color: [number, number, number];
+    readonly #gravity: number;
+    readonly #size: number;
+    readonly #scale: number;
+    #x: number;
+    #y: number;
+    #vx: number;
+    #vy: number;
+    #alpha: number;
+
+    get isDead(): boolean {
+        return this.#alpha <= 0;
+    }
+
+    get position(): Point {
+        return {x: this.#x, y: this.#y};
+    }
+
+    constructor(position: Point, velocity: Point, color: [number, number, number], config: SplashParticleConfig = {}) {
+        this.#x = position.x;
+        this.#y = position.y;
+        this.#vx = velocity.x;
+        this.#vy = velocity.y;
+        this.#color = color;
+        this.#alpha = 0.5 + Math.random() * 0.3;
+        this.#gravity = config.gravity ?? 0.15;
+        this.#size = config.size ?? (1 + Math.random() * 2);
+        this.#scale = config.scale ?? 1;
+    }
+
+    static burst(position: Point, color: [number, number, number], config?: SplashParticleConfig): SplashParticle[] {
+        const count = 2 + Math.floor(Math.random() * 3);
+        const particles: SplashParticle[] = [];
+
+        for (let i = 0; i < count; i++) {
+            particles.push(new SplashParticle(
+                position,
+                {x: (Math.random() - 0.5) * 4, y: -(1 + Math.random() * 3)},
+                color,
+                config
+            ));
+        }
+
+        return particles;
+    }
+
+    draw(ctx: CanvasRenderingContext2D): void {
+        const [r, g, b] = this.#color;
+
+        ctx.beginPath();
+        ctx.arc(this.#x, this.#y, this.#size * this.#scale, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${this.#alpha})`;
+        ctx.fill();
+    }
+
+    tick(dt: number = 1): void {
+        this.#x += this.#vx * dt;
+        this.#y += this.#vy * dt;
+        this.#vy += this.#gravity * dt;
+        this.#alpha -= 0.04 * dt;
+    }
+}

package/src/rain/types.ts

@@ -0,0 +1,22 @@
+export type RainVariant = 'drizzle' | 'downpour' | 'thunderstorm';
+
+export type Raindrop = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    length: number;
+    speed: number;
+    depth: number;
+    opacity: number;
+};
+
+export type Splash = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    alpha: number;
+    size: number;
+    gravity: number;
+};

package/src/sandstorm/consts.ts

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

package/src/sandstorm/index.ts

@@ -0,0 +1,10 @@
+import { Sandstorm } from './layer';
+import type { SandstormConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createSandstorm(config?: SandstormConfig): Effect<SandstormConfig> {
+    return new Sandstorm(config);
+}
+
+export type { SandstormConfig };
+export type { SandGrain } from './types';

package/src/sandstorm/layer.ts

@@ -0,0 +1,152 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { SandGrain } from './types';
+
+export interface SandstormConfig {
+    readonly count?: number;
+    readonly wind?: number;
+    readonly turbulence?: number;
+    readonly color?: string;
+    readonly hazeOpacity?: number;
+    readonly scale?: number;
+}
+
+export class Sandstorm extends Effect<SandstormConfig> {
+    readonly #scale: number;
+    #wind: number;
+    #turbulence: number;
+    readonly #colorR: number;
+    readonly #colorG: number;
+    readonly #colorB: number;
+    readonly #hazeOpacity: number;
+    #maxCount: number;
+    #time: number = 0;
+    #grains: SandGrain[] = [];
+
+    constructor(config: SandstormConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 300;
+        this.#wind = config.wind ?? 1;
+        this.#turbulence = config.turbulence ?? 1;
+        this.#hazeOpacity = config.hazeOpacity ?? 0.15;
+
+        const {r, g, b} = this.#parseColor(config.color ?? '#c2956b');
+        this.#colorR = r;
+        this.#colorG = g;
+        this.#colorB = b;
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#grains.push(this.#createGrain(true));
+        }
+    }
+
+    configure(config: Partial<SandstormConfig>): void {
+        if (config.wind !== undefined) {
+            this.#wind = config.wind;
+        }
+        if (config.turbulence !== undefined) {
+            this.#turbulence = config.turbulence;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.02 * dt;
+
+        const gustX = Math.sin(this.#time * 0.3) * 0.5
+            + Math.sin(this.#time * 0.8 + 1) * 0.3
+            + Math.sin(this.#time * 2.1) * 0.2;
+
+        const gustY = Math.sin(this.#time * 0.5 + 2) * 0.15;
+
+        const baseWindX = (3 + gustX * 2) * this.#wind;
+        const baseWindY = gustY * this.#turbulence;
+
+        for (let index = 0; index < this.#grains.length; index++) {
+            const grain = this.#grains[index];
+
+            const turbX = Math.sin(this.#time * 3 + grain.turbulenceOffset) * this.#turbulence * 0.5;
+            const turbY = Math.cos(this.#time * 2.5 + grain.turbulenceOffset * 1.3) * this.#turbulence * 0.3;
+
+            grain.vx = (baseWindX + turbX) * grain.depth;
+            grain.vy = (baseWindY + turbY) * grain.depth + 0.3 * grain.depth;
+
+            grain.x += (grain.vx * dt) / width;
+            grain.y += (grain.vy * dt) / height;
+
+            if (grain.x > 1.1 || grain.x < -0.1 || grain.y > 1.1 || grain.y < -0.1) {
+                const recycled = this.#createGrain(false);
+
+                if (baseWindX > 0) {
+                    recycled.x = -0.1;
+                } else {
+                    recycled.x = 1.1;
+                }
+
+                recycled.y = MULBERRY.next();
+                this.#grains[index] = recycled;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        const hazeFlicker = 0.9 + Math.sin(this.#time * 0.7) * 0.1;
+        ctx.fillStyle = `rgba(${this.#colorR}, ${this.#colorG}, ${this.#colorB}, ${this.#hazeOpacity * hazeFlicker})`;
+        ctx.fillRect(0, 0, width, height);
+
+        for (const grain of this.#grains) {
+            const px = grain.x * width;
+            const py = grain.y * height;
+            const size = grain.size * grain.depth * this.#scale;
+
+            if (size < 0.3) {
+                continue;
+            }
+
+            const speed = Math.sqrt(grain.vx * grain.vx + grain.vy * grain.vy);
+            const nx = speed > 0 ? grain.vx / speed : 1;
+            const ny = speed > 0 ? grain.vy / speed : 0;
+            const streakLength = size * 2 + speed * 3;
+
+            ctx.beginPath();
+            ctx.moveTo(px, py);
+            ctx.lineTo(px - nx * streakLength, py - ny * streakLength);
+            ctx.strokeStyle = `rgba(${this.#colorR}, ${this.#colorG}, ${this.#colorB}, ${grain.opacity * grain.depth})`;
+            ctx.lineWidth = size;
+            ctx.lineCap = 'round';
+            ctx.stroke();
+        }
+    }
+
+    #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]};
+    }
+
+    #createGrain(initialSpread: boolean): SandGrain {
+        const depth = 0.2 + MULBERRY.next() * 0.8;
+
+        return {
+            x: initialSpread ? MULBERRY.next() : -0.1,
+            y: MULBERRY.next(),
+            vx: 0,
+            vy: 0,
+            size: (0.5 + MULBERRY.next() * 2) * this.#scale,
+            depth,
+            opacity: 0.3 + MULBERRY.next() * 0.5,
+            turbulenceOffset: MULBERRY.next() * Math.PI * 2
+        };
+    }
+}

package/src/sandstorm/types.ts

@@ -0,0 +1,10 @@
+export type SandGrain = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    depth: number;
+    opacity: number;
+    turbulenceOffset: number;
+};