@basmilius/sparkle 2.0.0 → 2.2.0

package/src/fireflies/layer.ts

@@ -0,0 +1,169 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { Firefly } from './types';
+
+const SPRITE_SIZE = 64;
+const SPRITE_CENTER = SPRITE_SIZE / 2;
+const SPRITE_RADIUS = SPRITE_SIZE / 2;
+
+export interface FirefliesConfig {
+    readonly count?: number;
+    readonly color?: string;
+    readonly size?: number;
+    readonly speed?: number;
+    readonly glowSpeed?: number;
+    readonly scale?: number;
+}
+
+export class Fireflies extends Effect<FirefliesConfig> {
+    readonly #scale: number;
+    readonly #size: number;
+    #speed: number;
+    #glowSpeed: number;
+    #maxCount: number;
+    #time: number = 0;
+    #fireflies: Firefly[] = [];
+    #sprite: HTMLCanvasElement;
+
+    constructor(config: FirefliesConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 60;
+        this.#size = (config.size ?? 6) * this.#scale;
+        this.#speed = config.speed ?? 1;
+        this.#glowSpeed = config.glowSpeed ?? 1;
+
+        const {r, g, b} = this.#parseColor(config.color ?? '#b4ff6a');
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        this.#sprite = this.#createSprite(r, g, b);
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#fireflies.push(this.#createFirefly());
+        }
+    }
+
+    configure(config: Partial<FirefliesConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.glowSpeed !== undefined) {
+            this.#glowSpeed = config.glowSpeed;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.02 * dt * this.#speed;
+
+        for (const firefly of this.#fireflies) {
+            const moveX = Math.sin(this.#time * firefly.freqX1 + firefly.phaseX1) * firefly.amplitudeX
+                + Math.sin(this.#time * firefly.freqX2 + firefly.phaseX2) * firefly.amplitudeX * 0.5;
+
+            const moveY = Math.sin(this.#time * firefly.freqY1 + firefly.phaseY1) * firefly.amplitudeY
+                + Math.sin(this.#time * firefly.freqY2 + firefly.phaseY2) * firefly.amplitudeY * 0.5;
+
+            firefly.x += moveX * dt / (3000 * (1 / this.#speed));
+            firefly.y += moveY * dt / (3000 * (1 / this.#speed));
+
+            if (firefly.x > 1.1) {
+                firefly.x = -0.1;
+            } else if (firefly.x < -0.1) {
+                firefly.x = 1.1;
+            }
+
+            if (firefly.y > 1.1) {
+                firefly.y = -0.1;
+            } else if (firefly.y < -0.1) {
+                firefly.y = 1.1;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (const firefly of this.#fireflies) {
+            const alpha = 0.5 + 0.5 * Math.sin(this.#time * firefly.glowSpeed * this.#glowSpeed + firefly.phase);
+
+            if (alpha < 0.05) {
+                continue;
+            }
+
+            const px = firefly.x * width;
+            const py = firefly.y * height;
+            const displaySize = firefly.size * 2;
+
+            ctx.globalAlpha = alpha;
+            ctx.drawImage(
+                this.#sprite,
+                px - firefly.size,
+                py - firefly.size,
+                displaySize,
+                displaySize
+            );
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 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]};
+    }
+
+    #createSprite(r: number, g: number, b: number): HTMLCanvasElement {
+        const canvas = document.createElement('canvas');
+        canvas.width = SPRITE_SIZE;
+        canvas.height = SPRITE_SIZE;
+        const ctx = canvas.getContext('2d')!;
+
+        const gradient = ctx.createRadialGradient(
+            SPRITE_CENTER, SPRITE_CENTER, 0,
+            SPRITE_CENTER, SPRITE_CENTER, SPRITE_RADIUS
+        );
+
+        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1)`);
+        gradient.addColorStop(0.1, `rgba(${r}, ${g}, ${b}, 0.8)`);
+        gradient.addColorStop(0.4, `rgba(${r}, ${g}, ${b}, 0.3)`);
+        gradient.addColorStop(0.7, `rgba(${r}, ${g}, ${b}, 0.08)`);
+        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(SPRITE_CENTER, SPRITE_CENTER, SPRITE_RADIUS, 0, Math.PI * 2);
+        ctx.fill();
+
+        return canvas;
+    }
+
+    #createFirefly(): Firefly {
+        return {
+            x: MULBERRY.next(),
+            y: MULBERRY.next(),
+            size: (MULBERRY.next() * 0.6 + 0.4) * this.#size,
+            phase: MULBERRY.next() * Math.PI * 2,
+            glowSpeed: 0.5 + MULBERRY.next() * 1.5,
+            freqX1: 0.3 + MULBERRY.next() * 0.7,
+            freqX2: 1.2 + MULBERRY.next() * 1.8,
+            freqY1: 0.3 + MULBERRY.next() * 0.7,
+            freqY2: 1.2 + MULBERRY.next() * 1.8,
+            phaseX1: MULBERRY.next() * Math.PI * 2,
+            phaseX2: MULBERRY.next() * Math.PI * 2,
+            phaseY1: MULBERRY.next() * Math.PI * 2,
+            phaseY2: MULBERRY.next() * Math.PI * 2,
+            amplitudeX: 0.3 + MULBERRY.next() * 0.7,
+            amplitudeY: 0.3 + MULBERRY.next() * 0.7
+        };
+    }
+}

package/src/fireflies/particle.ts

@@ -0,0 +1,124 @@
+export interface FireflyParticleConfig {
+    readonly glowSpeed?: number;
+    readonly scale?: number;
+    readonly size?: number;
+    readonly speed?: number;
+}
+
+export function createFireflySprite(color: string, size: number = 64): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+
+    const ctx = canvas.getContext('2d')!;
+    const center = size / 2;
+    const radius = size / 2;
+
+    const tmp = document.createElement('canvas');
+    tmp.width = 1;
+    tmp.height = 1;
+    const tmpCtx = tmp.getContext('2d')!;
+    tmpCtx.fillStyle = color;
+    tmpCtx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = tmpCtx.getImageData(0, 0, 1, 1).data;
+
+    const gradient = ctx.createRadialGradient(center, center, 0, center, center, radius);
+    gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1)`);
+    gradient.addColorStop(0.1, `rgba(${r}, ${g}, ${b}, 0.8)`);
+    gradient.addColorStop(0.4, `rgba(${r}, ${g}, ${b}, 0.3)`);
+    gradient.addColorStop(0.7, `rgba(${r}, ${g}, ${b}, 0.08)`);
+    gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(center, center, radius, 0, Math.PI * 2);
+    ctx.fill();
+
+    return canvas;
+}
+
+export class FireflyParticle {
+    readonly #sprite: HTMLCanvasElement;
+    readonly #bounds: { width: number; height: number };
+    readonly #glowSpeed: number;
+    readonly #size: number;
+    readonly #speed: number;
+    readonly #phase: number;
+    readonly #freqX1: number;
+    readonly #freqX2: number;
+    readonly #freqY1: number;
+    readonly #freqY2: number;
+    readonly #phaseX1: number;
+    readonly #phaseX2: number;
+    readonly #phaseY1: number;
+    readonly #phaseY2: number;
+    readonly #amplitudeX: number;
+    readonly #amplitudeY: number;
+    #x: number;
+    #y: number;
+    #time: number = 0;
+
+    get position(): { x: number; y: number } {
+        return {x: this.#x, y: this.#y};
+    }
+
+    constructor(x: number, y: number, bounds: { width: number; height: number }, sprite: HTMLCanvasElement, config: FireflyParticleConfig = {}) {
+        this.#x = x;
+        this.#y = y;
+        this.#bounds = bounds;
+        this.#sprite = sprite;
+        this.#glowSpeed = config.glowSpeed ?? (0.5 + Math.random() * 1.5);
+        this.#size = (config.size ?? 6) * (config.scale ?? 1);
+        this.#speed = config.speed ?? 1;
+        this.#phase = Math.random() * Math.PI * 2;
+        this.#freqX1 = 0.3 + Math.random() * 0.7;
+        this.#freqX2 = 1.2 + Math.random() * 1.8;
+        this.#freqY1 = 0.3 + Math.random() * 0.7;
+        this.#freqY2 = 1.2 + Math.random() * 1.8;
+        this.#phaseX1 = Math.random() * Math.PI * 2;
+        this.#phaseX2 = Math.random() * Math.PI * 2;
+        this.#phaseY1 = Math.random() * Math.PI * 2;
+        this.#phaseY2 = Math.random() * Math.PI * 2;
+        this.#amplitudeX = 0.3 + Math.random() * 0.7;
+        this.#amplitudeY = 0.3 + Math.random() * 0.7;
+    }
+
+    draw(ctx: CanvasRenderingContext2D): void {
+        const alpha = 0.5 + 0.5 * Math.sin(this.#time * this.#glowSpeed + this.#phase);
+
+        if (alpha < 0.05) {
+            return;
+        }
+
+        const displaySize = this.#size * 2;
+
+        ctx.globalAlpha = alpha;
+        ctx.drawImage(this.#sprite, this.#x - this.#size, this.#y - this.#size, displaySize, displaySize);
+        ctx.globalAlpha = 1;
+    }
+
+    tick(dt: number = 1): void {
+        this.#time += 0.02 * dt * this.#speed;
+
+        const moveX = Math.sin(this.#time * this.#freqX1 + this.#phaseX1) * this.#amplitudeX * this.#bounds.width
+            + Math.sin(this.#time * this.#freqX2 + this.#phaseX2) * this.#amplitudeX * this.#bounds.width * 0.5;
+
+        const moveY = Math.sin(this.#time * this.#freqY1 + this.#phaseY1) * this.#amplitudeY * this.#bounds.height
+            + Math.sin(this.#time * this.#freqY2 + this.#phaseY2) * this.#amplitudeY * this.#bounds.height * 0.5;
+
+        this.#x += (moveX / 3000) * dt;
+        this.#y += (moveY / 3000) * dt;
+
+        if (this.#x > this.#bounds.width + this.#size) {
+            this.#x = -this.#size;
+        } else if (this.#x < -this.#size) {
+            this.#x = this.#bounds.width + this.#size;
+        }
+
+        if (this.#y > this.#bounds.height + this.#size) {
+            this.#y = -this.#size;
+        } else if (this.#y < -this.#size) {
+            this.#y = this.#bounds.height + this.#size;
+        }
+    }
+}

package/src/fireflies/types.ts

@@ -0,0 +1,17 @@
+export type Firefly = {
+    x: number;
+    y: number;
+    size: number;
+    phase: number;
+    glowSpeed: number;
+    freqX1: number;
+    freqX2: number;
+    freqY1: number;
+    freqY2: number;
+    phaseX1: number;
+    phaseX2: number;
+    phaseY1: number;
+    phaseY2: number;
+    amplitudeX: number;
+    amplitudeY: number;
+};

package/src/firepit/consts.ts

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

package/src/firepit/index.ts

@@ -0,0 +1,10 @@
+import { Firepit } from './layer';
+import type { FirepitConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createFirepit(config?: FirepitConfig): Effect<FirepitConfig> {
+    return new Firepit(config);
+}
+
+export type { FirepitConfig };
+export type { Ember, FlameLayer } from './types';

package/src/firepit/layer.ts

@@ -0,0 +1,193 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { Ember, FlameLayer } from './types';
+
+export interface FirepitConfig {
+    readonly embers?: number;
+    readonly flameWidth?: number;
+    readonly flameHeight?: number;
+    readonly intensity?: number;
+    readonly scale?: number;
+}
+
+export class Firepit extends Effect<FirepitConfig> {
+    readonly #scale: number;
+    #flameWidth: number;
+    #flameHeight: number;
+    #intensity: number;
+    #maxEmbers: number;
+    #time: number = 0;
+    #embers: Ember[] = [];
+    #flameLayers: FlameLayer[] = [];
+
+    constructor(config: FirepitConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxEmbers = config.embers ?? 60;
+        this.#flameWidth = config.flameWidth ?? 0.4;
+        this.#flameHeight = config.flameHeight ?? 0.35;
+        this.#intensity = config.intensity ?? 1;
+
+        if (innerWidth < 991) {
+            this.#maxEmbers = Math.floor(this.#maxEmbers / 2);
+        }
+
+        for (let i = 0; i < 5; i++) {
+            this.#flameLayers.push({
+                x: 0.5 + (MULBERRY.next() - 0.5) * 0.1,
+                phase: MULBERRY.next() * Math.PI * 2,
+                speed: 1.5 + MULBERRY.next() * 2,
+                amplitude: 0.02 + MULBERRY.next() * 0.03,
+                width: this.#flameWidth * (0.6 + MULBERRY.next() * 0.4),
+                height: this.#flameHeight * (0.7 + MULBERRY.next() * 0.3)
+            });
+        }
+    }
+
+    configure(config: Partial<FirepitConfig>): void {
+        if (config.intensity !== undefined) {
+            this.#intensity = config.intensity;
+        }
+        if (config.flameWidth !== undefined) {
+            this.#flameWidth = config.flameWidth;
+        }
+        if (config.flameHeight !== undefined) {
+            this.#flameHeight = config.flameHeight;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.03 * dt * this.#intensity;
+
+        if (this.#embers.length < this.#maxEmbers && MULBERRY.next() < 0.3 * this.#intensity * dt) {
+            this.#embers.push(this.#createEmber());
+        }
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#embers.length; i++) {
+            const ember = this.#embers[i];
+
+            ember.x += ember.vx * dt;
+            ember.y += ember.vy * dt;
+            ember.vx += (MULBERRY.next() - 0.5) * 0.0002 * dt;
+            ember.vy -= 0.00005 * dt;
+            ember.life -= dt;
+            ember.flicker = 0.6 + Math.sin(this.#time * 8 + ember.brightness * 20) * 0.4;
+
+            if (ember.life > 0) {
+                this.#embers[alive++] = ember;
+            }
+        }
+
+        this.#embers.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        this.#drawFlames(ctx, width, height);
+        this.#drawEmbers(ctx, width, height);
+    }
+
+    #drawFlames(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const baseY = height * 0.85;
+        const centerX = width * 0.5;
+
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (let layerIndex = 0; layerIndex < this.#flameLayers.length; layerIndex++) {
+            const layer = this.#flameLayers[layerIndex];
+            const wobbleX = Math.sin(this.#time * layer.speed + layer.phase) * layer.amplitude * width;
+            const flameW = layer.width * width * this.#scale * 0.5;
+            const flameH = layer.height * height * this.#scale;
+
+            const gradient = ctx.createRadialGradient(
+                centerX + wobbleX, baseY, 0,
+                centerX + wobbleX, baseY - flameH * 0.5, flameH * 0.6
+            );
+
+            const alphaBase = (0.15 + layerIndex * 0.03) * this.#intensity;
+            const flicker = 0.85 + Math.sin(this.#time * (3 + layerIndex) + layer.phase) * 0.15;
+            const alpha = alphaBase * flicker;
+
+            if (layerIndex < 2) {
+                gradient.addColorStop(0, `rgba(255, 255, 200, ${alpha})`);
+                gradient.addColorStop(0.3, `rgba(255, 180, 50, ${alpha * 0.8})`);
+                gradient.addColorStop(0.6, `rgba(255, 100, 20, ${alpha * 0.5})`);
+                gradient.addColorStop(1, `rgba(200, 30, 0, 0)`);
+            } else {
+                gradient.addColorStop(0, `rgba(255, 200, 80, ${alpha * 0.7})`);
+                gradient.addColorStop(0.4, `rgba(255, 120, 30, ${alpha * 0.5})`);
+                gradient.addColorStop(1, `rgba(180, 40, 0, 0)`);
+            }
+
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.ellipse(centerX + wobbleX, baseY, flameW, flameH, 0, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        const glowGradient = ctx.createRadialGradient(
+            centerX, height * 0.85, 0,
+            centerX, height * 0.85, width * 0.35 * this.#scale
+        );
+        const glowAlpha = 0.06 * this.#intensity * (0.9 + Math.sin(this.#time * 2) * 0.1);
+        glowGradient.addColorStop(0, `rgba(255, 150, 50, ${glowAlpha})`);
+        glowGradient.addColorStop(0.5, `rgba(255, 80, 20, ${glowAlpha * 0.3})`);
+        glowGradient.addColorStop(1, 'rgba(255, 50, 0, 0)');
+        ctx.fillStyle = glowGradient;
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.globalCompositeOperation = 'source-over';
+    }
+
+    #drawEmbers(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (const ember of this.#embers) {
+            const px = ember.x * width;
+            const py = ember.y * height;
+            const lifeRatio = ember.life / ember.maxLife;
+            const alpha = lifeRatio * ember.flicker * this.#intensity;
+            const size = ember.size * this.#scale * (0.5 + lifeRatio * 0.5);
+
+            if (alpha < 0.02) {
+                continue;
+            }
+
+            const gradient = ctx.createRadialGradient(px, py, 0, px, py, size * 3);
+            gradient.addColorStop(0, `rgba(255, ${180 + ember.brightness * 75}, ${50 + ember.brightness * 100}, ${alpha})`);
+            gradient.addColorStop(0.3, `rgba(255, ${120 + ember.brightness * 50}, 20, ${alpha * 0.5})`);
+            gradient.addColorStop(1, `rgba(255, 80, 0, 0)`);
+
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.arc(px, py, size * 3, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.fillStyle = `rgba(255, ${200 + ember.brightness * 55}, ${100 + ember.brightness * 100}, ${alpha * 0.8})`;
+            ctx.beginPath();
+            ctx.arc(px, py, size * 0.5, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+    }
+
+    #createEmber(): Ember {
+        const baseY = 0.85;
+        const maxLife = 60 + MULBERRY.next() * 120;
+
+        return {
+            x: 0.5 + (MULBERRY.next() - 0.5) * this.#flameWidth * 0.6,
+            y: baseY - MULBERRY.next() * this.#flameHeight * 0.3,
+            vx: (MULBERRY.next() - 0.5) * 0.002,
+            vy: -(0.001 + MULBERRY.next() * 0.003),
+            size: (1 + MULBERRY.next() * 2.5) * this.#scale,
+            life: maxLife,
+            maxLife,
+            brightness: MULBERRY.next(),
+            flicker: 1
+        };
+    }
+}

package/src/firepit/types.ts

@@ -0,0 +1,20 @@
+export type Ember = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    life: number;
+    maxLife: number;
+    brightness: number;
+    flicker: number;
+};
+
+export type FlameLayer = {
+    x: number;
+    phase: number;
+    speed: number;
+    amplitude: number;
+    width: number;
+    height: number;
+};