@basmilius/sparkle 2.3.0 → 2.5.0

package/src/tornado/layer.ts

@@ -0,0 +1,271 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { TornadoDebris, TornadoParticle } from './types';
+
+export interface TornadoConfig {
+    readonly speed?: number;
+    readonly debris?: number;
+    readonly width?: number;
+    readonly intensity?: number;
+    readonly color?: string;
+    readonly scale?: number;
+}
+
+export class Tornado extends Effect<TornadoConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #intensity: number;
+    readonly #funnelWidth: number;
+    readonly #particleCount: number;
+    readonly #debrisCount: number;
+    #time: number = 0;
+    #particles: TornadoParticle[] = [];
+    #debris: TornadoDebris[] = [];
+    #colorR: number;
+    #colorG: number;
+    #colorB: number;
+
+    constructor(config: TornadoConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#funnelWidth = config.width ?? 0.3;
+        this.#intensity = config.intensity ?? 1;
+
+        let particleCount = 400;
+        let debrisCount = config.debris ?? 40;
+
+        if (innerWidth < 991) {
+            particleCount = Math.floor(particleCount / 2);
+            debrisCount = Math.floor(debrisCount / 2);
+        }
+
+        this.#particleCount = particleCount;
+        this.#debrisCount = debrisCount;
+
+        const {r, g, b} = this.#parseColor(config.color ?? '#8B7355');
+        this.#colorR = r;
+        this.#colorG = g;
+        this.#colorB = b;
+
+        for (let i = 0; i < this.#particleCount; ++i) {
+            this.#particles.push(this.#createParticle());
+        }
+
+        for (let i = 0; i < this.#debrisCount; ++i) {
+            this.#debris.push(this.#createDebris(true));
+        }
+    }
+
+    configure(config: Partial<TornadoConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.intensity !== undefined) {
+            this.#intensity = config.intensity;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.015 * dt * this.#speed;
+
+        for (const particle of this.#particles) {
+            const speedMultiplier = 1 + (1 - particle.height) * 2;
+            particle.angle += particle.speed * speedMultiplier * this.#intensity * 0.06 * dt;
+            particle.height += 0.0008 * dt * this.#speed * (0.5 + particle.layer * 0.5);
+
+            if (particle.height > 1.1) {
+                particle.height = -0.05;
+                particle.angle = MULBERRY.next() * Math.PI * 2;
+                particle.radiusOffset = 0.6 + MULBERRY.next() * 0.8;
+            }
+        }
+
+        const baseY = height * 0.92;
+        const swayX = this.#getSway(width);
+        const baseCX = width * 0.5 + swayX * 0.3;
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#debris.length; ++i) {
+            const debris = this.#debris[i];
+            debris.life += dt;
+
+            if (debris.life > debris.maxLife) {
+                this.#debris[alive++] = this.#createDebris(false);
+                continue;
+            }
+
+            debris.vy += 0.12 * dt;
+            debris.vx *= 0.995;
+            debris.vy *= 0.995;
+
+            const distToCenter = debris.x - baseCX;
+            debris.vx -= distToCenter * 0.0003 * dt * this.#intensity;
+            debris.vy -= 0.15 * dt * this.#intensity;
+
+            debris.x += debris.vx * dt;
+            debris.y += debris.vy * dt;
+            debris.rotation += debris.rotationSpeed * dt;
+            debris.opacity = 1 - debris.life / debris.maxLife;
+
+            if (debris.y > baseY + 10) {
+                debris.y = baseY + 10;
+                debris.vy = -Math.abs(debris.vy) * 0.3;
+            }
+
+            this.#debris[alive++] = debris;
+        }
+
+        this.#debris.length = alive;
+
+        while (this.#debris.length < this.#debrisCount) {
+            this.#debris.push(this.#createDebris(false));
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const baseY = height * 0.92;
+        const topY = height * 0.05;
+        const funnelHeight = baseY - topY;
+        const swayX = this.#getSway(width);
+        const baseCX = width * 0.5 + swayX * 0.3;
+        const topCX = width * 0.5 + swayX;
+        const baseRadius = this.#funnelWidth * width * 0.12 * this.#scale;
+        const topRadius = this.#funnelWidth * width * 0.5 * this.#scale;
+        const cr = this.#colorR;
+        const cg = this.#colorG;
+        const cb = this.#colorB;
+
+        this.#drawDustCloud(ctx, baseCX, baseY, width, cr, cg, cb);
+
+        for (const particle of this.#particles) {
+            if (particle.height < 0 || particle.height > 1) {
+                continue;
+            }
+
+            const t = particle.height;
+            const easeT = t * t;
+
+            const cx = baseCX + (topCX - baseCX) * easeT;
+            const cy = baseY - funnelHeight * t;
+            const radius = baseRadius + (topRadius - baseRadius) * easeT;
+
+            const orbitRadius = radius * particle.radiusOffset;
+            const px = cx + Math.cos(particle.angle) * orbitRadius;
+            const py = cy + Math.sin(particle.angle * 0.4) * radius * 0.08;
+
+            const depthFactor = (Math.sin(particle.angle) + 1) * 0.5;
+            const heightFade = t < 0.05 ? t / 0.05 : (t > 0.95 ? (1 - t) / 0.05 : 1);
+            const layerAlpha = particle.layer === 0 ? 0.3 : (particle.layer === 1 ? 0.2 : 0.12);
+            const alpha = particle.opacity * heightFade * (0.4 + depthFactor * 0.6) * layerAlpha * this.#intensity;
+
+            if (alpha < 0.01) {
+                continue;
+            }
+
+            const size = particle.size * this.#scale * (0.6 + t * 0.8);
+
+            ctx.globalAlpha = alpha;
+            ctx.fillStyle = `rgb(${cr + (255 - cr) * depthFactor * 0.3 | 0}, ${cg + (255 - cg) * depthFactor * 0.2 | 0}, ${cb + (255 - cb) * depthFactor * 0.15 | 0})`;
+            ctx.beginPath();
+            ctx.arc(px, py, size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        ctx.fillStyle = `rgb(${cr}, ${cg}, ${cb})`;
+        ctx.strokeStyle = `rgb(${cr * 0.6 | 0}, ${cg * 0.6 | 0}, ${cb * 0.6 | 0})`;
+        ctx.lineCap = 'round';
+
+        for (const debris of this.#debris) {
+            if (debris.opacity < 0.05) {
+                continue;
+            }
+
+            const size = debris.size * this.#scale;
+            ctx.globalAlpha = debris.opacity * 0.8;
+            ctx.lineWidth = Math.max(1, size * 0.5);
+
+            const cos = Math.cos(debris.rotation);
+            const sin = Math.sin(debris.rotation);
+            const hx = cos * size;
+            const hy = sin * size;
+
+            ctx.beginPath();
+            ctx.moveTo(debris.x - hx, debris.y - hy);
+            ctx.lineTo(debris.x + hx, debris.y + hy);
+            ctx.stroke();
+        }
+
+        ctx.globalAlpha = 1;
+    }
+
+    #drawDustCloud(ctx: CanvasRenderingContext2D, cx: number, baseY: number, _width: number, r: number, g: number, b: number): void {
+        const cloudRadius = this.#funnelWidth * 80 * this.#scale;
+
+        const gradient = ctx.createRadialGradient(
+            cx, baseY, 0,
+            cx, baseY, cloudRadius
+        );
+        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${0.15 * this.#intensity})`);
+        gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${0.06 * this.#intensity})`);
+        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(cx, baseY, cloudRadius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+
+    #getSway(width: number): number {
+        return Math.sin(this.#time * 0.8) * width * 0.06
+            + Math.sin(this.#time * 1.9 + 1.5) * width * 0.03
+            + Math.sin(this.#time * 3.1 + 0.7) * width * 0.01;
+    }
+
+    #createParticle(): TornadoParticle {
+        const layer = MULBERRY.next() < 0.4 ? 0 : (MULBERRY.next() < 0.6 ? 1 : 2);
+
+        return {
+            angle: MULBERRY.next() * Math.PI * 2,
+            height: MULBERRY.next(),
+            radiusOffset: layer === 0
+                ? (0.85 + MULBERRY.next() * 0.3)
+                : layer === 1
+                    ? (0.5 + MULBERRY.next() * 0.5)
+                    : (1.1 + MULBERRY.next() * 0.4),
+            speed: 0.5 + MULBERRY.next() * 0.8,
+            size: (1.5 + MULBERRY.next() * 3) * (layer === 2 ? 0.7 : 1),
+            opacity: 0.6 + MULBERRY.next() * 0.4,
+            layer
+        };
+    }
+
+    #createDebris(spread: boolean): TornadoDebris {
+        return {
+            x: 0,
+            y: 0,
+            vx: (MULBERRY.next() - 0.5) * 4 * this.#intensity,
+            vy: -MULBERRY.next() * 3 * this.#intensity,
+            size: 2 + MULBERRY.next() * 5,
+            rotation: MULBERRY.next() * Math.PI * 2,
+            rotationSpeed: (MULBERRY.next() - 0.5) * 0.15,
+            opacity: spread ? MULBERRY.next() : 1,
+            life: spread ? MULBERRY.next() * 120 : 0,
+            maxLife: 120 + MULBERRY.next() * 180
+        };
+    }
+
+    #parseColor(color: string): { r: number; g: number; b: number } {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const colorCtx = canvas.getContext('2d')!;
+        colorCtx.fillStyle = color;
+        colorCtx.fillRect(0, 0, 1, 1);
+        const data = colorCtx.getImageData(0, 0, 1, 1).data;
+        return {r: data[0], g: data[1], b: data[2]};
+    }
+}

package/src/tornado/types.ts

@@ -0,0 +1,22 @@
+export type TornadoParticle = {
+    angle: number;
+    height: number;
+    radiusOffset: number;
+    speed: number;
+    size: number;
+    opacity: number;
+    layer: number;
+};
+
+export type TornadoDebris = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    rotation: number;
+    rotationSpeed: number;
+    opacity: number;
+    life: number;
+    maxLife: number;
+};

package/src/volcano/consts.ts

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

package/src/volcano/index.ts

@@ -0,0 +1,10 @@
+import { Volcano } from './layer';
+import type { VolcanoConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createVolcano(config?: VolcanoConfig): Effect<VolcanoConfig> {
+    return new Volcano(config);
+}
+
+export type { VolcanoConfig };
+export type { VolcanoProjectile } from './types';

package/src/volcano/layer.ts

@@ -0,0 +1,261 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { VolcanoProjectile } from './types';
+
+export interface VolcanoConfig {
+    readonly speed?: number;
+    readonly projectiles?: number;
+    readonly embers?: number;
+    readonly intensity?: number;
+    readonly color?: string;
+    readonly smokeColor?: string;
+    readonly scale?: number;
+}
+
+export class Volcano extends Effect<VolcanoConfig> {
+    readonly #scale: number;
+    readonly #color: string;
+    readonly #smokeColor: string;
+    #speed: number;
+    #intensity: number;
+    #maxProjectiles: number;
+    #maxEmbers: number;
+    #time: number = 0;
+    #particles: VolcanoProjectile[] = [];
+    #canvasWidth: number = 800;
+    #canvasHeight: number = 600;
+
+    constructor(config: VolcanoConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#maxProjectiles = config.projectiles ?? 30;
+        this.#maxEmbers = config.embers ?? 60;
+        this.#intensity = config.intensity ?? 1;
+        this.#color = config.color ?? '#ff4400';
+        this.#smokeColor = config.smokeColor ?? '#444444';
+
+        if (innerWidth < 991) {
+            this.#maxProjectiles = Math.floor(this.#maxProjectiles / 2);
+            this.#maxEmbers = Math.floor(this.#maxEmbers / 2);
+        }
+    }
+
+    configure(config: Partial<VolcanoConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.intensity !== undefined) {
+            this.#intensity = config.intensity;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#canvasWidth = width;
+        this.#canvasHeight = height;
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#canvasWidth = width;
+        this.#canvasHeight = height;
+        this.#time += 0.02 * dt * this.#speed;
+
+        const eruptX = width * 0.5;
+        const eruptY = height * 0.85;
+
+        const lavaCount = this.#countByType('lava');
+        const emberCount = this.#countByType('ember');
+        const smokeCount = this.#countByType('smoke');
+
+        if (lavaCount < this.#maxProjectiles && MULBERRY.next() < 0.15 * this.#intensity * dt) {
+            this.#particles.push(this.#createLava(eruptX, eruptY));
+        }
+
+        if (emberCount < this.#maxEmbers && MULBERRY.next() < 0.4 * this.#intensity * dt) {
+            this.#particles.push(this.#createEmber(eruptX, eruptY));
+        }
+
+        if (smokeCount < 40 && MULBERRY.next() < 0.2 * this.#intensity * dt) {
+            this.#particles.push(this.#createSmoke(eruptX, eruptY));
+        }
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#particles.length; i++) {
+            const particle = this.#particles[i];
+
+            particle.x += particle.vx * dt * this.#speed;
+            particle.y += particle.vy * dt * this.#speed;
+            particle.life += dt;
+
+            if (particle.type === 'lava') {
+                particle.vy += 0.015 * dt;
+                particle.vx *= 0.999;
+            } else if (particle.type === 'ember') {
+                particle.vy -= 0.002 * dt;
+                particle.vx += (MULBERRY.next() - 0.5) * 0.02 * dt;
+            } else {
+                particle.vy -= 0.003 * dt;
+                particle.vx += (MULBERRY.next() - 0.5) * 0.01 * dt;
+                particle.size += 0.03 * dt;
+            }
+
+            if (particle.life < particle.maxLife) {
+                this.#particles[alive++] = particle;
+            }
+        }
+
+        this.#particles.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        this.#drawGlow(ctx, width, height);
+        this.#drawSmoke(ctx);
+        this.#drawLavaAndEmbers(ctx);
+    }
+
+    #drawGlow(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const eruptX = width * 0.5;
+        const eruptY = height * 0.85;
+        const glowRadius = 120 * this.#scale * this.#intensity;
+        const flicker = 0.8 + Math.sin(this.#time * 5) * 0.2;
+
+        const gradient = ctx.createRadialGradient(eruptX, eruptY, 0, eruptX, eruptY, glowRadius);
+        gradient.addColorStop(0, `rgba(255, 200, 50, ${0.4 * flicker * this.#intensity})`);
+        gradient.addColorStop(0.3, `rgba(255, 100, 20, ${0.2 * flicker * this.#intensity})`);
+        gradient.addColorStop(0.6, `rgba(255, 50, 0, ${0.08 * flicker * this.#intensity})`);
+        gradient.addColorStop(1, 'rgba(255, 30, 0, 0)');
+
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(eruptX, eruptY, glowRadius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.globalCompositeOperation = 'source-over';
+    }
+
+    #drawSmoke(ctx: CanvasRenderingContext2D): void {
+        for (const particle of this.#particles) {
+            if (particle.type !== 'smoke') {
+                continue;
+            }
+
+            const lifeRatio = particle.life / particle.maxLife;
+            const alpha = (1 - lifeRatio) * 0.3 * this.#intensity;
+            const size = particle.size * this.#scale;
+
+            if (alpha < 0.01) {
+                continue;
+            }
+
+            ctx.globalAlpha = alpha;
+            ctx.fillStyle = this.#smokeColor;
+            ctx.beginPath();
+            ctx.arc(particle.x, particle.y, size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        ctx.globalAlpha = 1;
+    }
+
+    #drawLavaAndEmbers(ctx: CanvasRenderingContext2D): void {
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (const particle of this.#particles) {
+            if (particle.type === 'smoke') {
+                continue;
+            }
+
+            const lifeRatio = particle.life / particle.maxLife;
+            const alpha = (1 - lifeRatio) * this.#intensity;
+            const size = particle.size * this.#scale;
+
+            if (alpha < 0.02) {
+                continue;
+            }
+
+            if (particle.type === 'lava') {
+                const gradient = ctx.createRadialGradient(
+                    particle.x, particle.y, 0,
+                    particle.x, particle.y, size * 2
+                );
+                gradient.addColorStop(0, `rgba(255, 220, 100, ${alpha})`);
+                gradient.addColorStop(0.4, `rgba(255, 100, 20, ${alpha * 0.7})`);
+                gradient.addColorStop(1, `rgba(200, 30, 0, 0)`);
+
+                ctx.fillStyle = gradient;
+                ctx.beginPath();
+                ctx.arc(particle.x, particle.y, size * 2, 0, Math.PI * 2);
+                ctx.fill();
+
+                ctx.fillStyle = `rgba(255, 240, 180, ${alpha * 0.9})`;
+                ctx.beginPath();
+                ctx.arc(particle.x, particle.y, size * 0.5, 0, Math.PI * 2);
+                ctx.fill();
+            } else {
+                ctx.fillStyle = `rgba(255, ${150 + MULBERRY.next() * 80 | 0}, 30, ${alpha})`;
+                ctx.beginPath();
+                ctx.arc(particle.x, particle.y, size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #countByType(type: VolcanoProjectile['type']): number {
+        let count = 0;
+
+        for (let i = 0; i < this.#particles.length; i++) {
+            if (this.#particles[i].type === type) {
+                count++;
+            }
+        }
+
+        return count;
+    }
+
+    #createLava(eruptX: number, eruptY: number): VolcanoProjectile {
+        const angle = -Math.PI / 2 + (MULBERRY.next() - 0.5) * 0.8;
+        const force = (3 + MULBERRY.next() * 4) * this.#intensity;
+
+        return {
+            x: eruptX + (MULBERRY.next() - 0.5) * 20 * this.#scale,
+            y: eruptY,
+            vx: Math.cos(angle) * force,
+            vy: Math.sin(angle) * force,
+            size: 3 + MULBERRY.next() * 5,
+            life: 0,
+            maxLife: 80 + MULBERRY.next() * 60,
+            type: 'lava'
+        };
+    }
+
+    #createEmber(eruptX: number, eruptY: number): VolcanoProjectile {
+        return {
+            x: eruptX + (MULBERRY.next() - 0.5) * 30 * this.#scale,
+            y: eruptY - MULBERRY.next() * 10,
+            vx: (MULBERRY.next() - 0.5) * 1.5,
+            vy: -(0.5 + MULBERRY.next() * 1.5),
+            size: 1 + MULBERRY.next() * 2,
+            life: 0,
+            maxLife: 60 + MULBERRY.next() * 80,
+            type: 'ember'
+        };
+    }
+
+    #createSmoke(eruptX: number, eruptY: number): VolcanoProjectile {
+        return {
+            x: eruptX + (MULBERRY.next() - 0.5) * 40 * this.#scale,
+            y: eruptY - MULBERRY.next() * 20,
+            vx: (MULBERRY.next() - 0.5) * 0.5,
+            vy: -(0.3 + MULBERRY.next() * 0.5),
+            size: 8 + MULBERRY.next() * 12,
+            life: 0,
+            maxLife: 120 + MULBERRY.next() * 100,
+            type: 'smoke'
+        };
+    }
+}

package/src/volcano/types.ts

@@ -0,0 +1,10 @@
+export type VolcanoProjectile = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    life: number;
+    maxLife: number;
+    type: 'lava' | 'ember' | 'smoke';
+};

package/src/voronoi/consts.ts

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

package/src/voronoi/index.ts

@@ -0,0 +1,10 @@
+import { Voronoi } from './layer';
+import type { VoronoiConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createVoronoi(config?: VoronoiConfig): Effect<VoronoiConfig> {
+    return new Voronoi(config);
+}
+
+export type { VoronoiConfig };
+export type { VoronoiCell } from './types';