@basmilius/sparkle 2.0.0 → 2.1.0

package/src/bubbles/layer.ts

@@ -0,0 +1,233 @@
+import { SimulationLayer } from '../layer';
+import { MULBERRY } from './consts';
+import type { BubbleSimulationConfig } from './simulation';
+import type { Bubble, PopParticle } from './types';
+
+const DEFAULT_COLORS = ['#88ccff', '#aaddff', '#ccbbff'];
+
+export class BubbleLayer extends SimulationLayer {
+    readonly #scale: number;
+    readonly #speed: number;
+    readonly #sizeRange: [number, number];
+    readonly #wobbleAmount: number;
+    readonly #popOnClick: boolean;
+    readonly #popRadius: number;
+    readonly #baseHues: number[];
+    readonly #onClickBound: (evt: MouseEvent) => void;
+    #maxCount: number;
+    #time: number = 0;
+    #bubbles: Bubble[] = [];
+    #popParticles: PopParticle[] = [];
+    #canvas: HTMLCanvasElement | null = null;
+
+    constructor(config: BubbleSimulationConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 30;
+        this.#sizeRange = config.sizeRange ?? [10, 40];
+        this.#speed = config.speed ?? 1;
+        this.#wobbleAmount = config.wobbleAmount ?? 1;
+        this.#popOnClick = config.popOnClick ?? true;
+        this.#popRadius = config.popRadius ?? 50;
+
+        const colors = config.colors ?? DEFAULT_COLORS;
+        this.#baseHues = colors.map(c => this.#colorToHue(c));
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#bubbles.push(this.#createBubble(true));
+        }
+
+        this.#onClickBound = this.#onClick.bind(this);
+    }
+
+    onMount(canvas: HTMLCanvasElement): void {
+        this.#canvas = canvas;
+
+        if (this.#popOnClick) {
+            canvas.addEventListener('click', this.#onClickBound, {passive: true});
+        }
+    }
+
+    onUnmount(canvas: HTMLCanvasElement): void {
+        canvas.removeEventListener('click', this.#onClickBound);
+        this.#canvas = null;
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.01 * dt;
+
+        for (let i = 0; i < this.#bubbles.length; i++) {
+            const bubble = this.#bubbles[i];
+
+            const wobble = Math.sin(this.#time * bubble.wobbleFreq + bubble.wobblePhase) * bubble.wobbleAmp * this.#wobbleAmount;
+            bubble.x += wobble * dt / (width * 3);
+            bubble.y -= (bubble.speed * this.#speed * dt) / (height * 0.8);
+
+            bubble.hue += 0.1 * dt;
+
+            if (bubble.y < -0.1) {
+                this.#bubbles[i] = this.#createBubble(false);
+            }
+        }
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#popParticles.length; i++) {
+            const particle = this.#popParticles[i];
+
+            particle.x += (particle.vx * dt) / width;
+            particle.y += (particle.vy * dt) / height;
+            particle.alpha -= particle.decay * dt;
+
+            if (particle.alpha > 0) {
+                this.#popParticles[alive++] = particle;
+            }
+        }
+
+        this.#popParticles.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        for (const bubble of this.#bubbles) {
+            const px = bubble.x * width;
+            const py = bubble.y * height;
+            const r = bubble.radius * this.#scale;
+
+            const gradient = ctx.createRadialGradient(
+                px - r * 0.3, py - r * 0.3, r * 0.1,
+                px, py, r
+            );
+
+            const hue = (bubble.hue + this.#time * 10) % 360;
+            gradient.addColorStop(0, `hsla(${hue}, 70%, 85%, ${bubble.opacity * 0.4})`);
+            gradient.addColorStop(0.7, `hsla(${hue}, 60%, 70%, ${bubble.opacity * 0.15})`);
+            gradient.addColorStop(1, `hsla(${hue}, 50%, 60%, ${bubble.opacity * 0.05})`);
+
+            ctx.beginPath();
+            ctx.arc(px, py, r, 0, Math.PI * 2);
+            ctx.fillStyle = gradient;
+            ctx.fill();
+
+            ctx.beginPath();
+            ctx.arc(px, py, r, 0, Math.PI * 2);
+            ctx.strokeStyle = `hsla(${hue}, 60%, 80%, ${bubble.opacity * 0.3})`;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.ellipse(px - r * 0.25, py - r * 0.3, r * 0.2, r * 0.12, -0.5, 0, Math.PI * 2);
+            ctx.fillStyle = `hsla(0, 0%, 100%, ${bubble.opacity * 0.5})`;
+            ctx.fill();
+        }
+
+        for (const particle of this.#popParticles) {
+            ctx.beginPath();
+            ctx.arc(particle.x * width, particle.y * height, particle.size * this.#scale, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(200, 220, 255, ${particle.alpha})`;
+            ctx.fill();
+        }
+    }
+
+    #onClick(evt: MouseEvent): void {
+        if (!this.#canvas) {
+            return;
+        }
+
+        const rect = this.#canvas.getBoundingClientRect();
+        const mx = (evt.clientX - rect.left) / rect.width;
+        const my = (evt.clientY - rect.top) / rect.height;
+        const popRadiusNorm = this.#popRadius / this.#canvas.width;
+
+        for (let i = this.#bubbles.length - 1; i >= 0; i--) {
+            const bubble = this.#bubbles[i];
+            const dx = bubble.x - mx;
+            const dy = bubble.y - my;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+
+            if (dist < popRadiusNorm + (bubble.radius * this.#scale) / this.#canvas.width) {
+                this.#createPopBurst(bubble.x, bubble.y);
+                this.#bubbles[i] = this.#createBubble(false);
+            }
+        }
+    }
+
+    #createBubble(initialSpread: boolean): Bubble {
+        const hueIndex = Math.floor(MULBERRY.next() * this.#baseHues.length);
+
+        return {
+            x: MULBERRY.next(),
+            y: initialSpread ? MULBERRY.next() : 1.1 + MULBERRY.next() * 0.1,
+            radius: this.#sizeRange[0] + MULBERRY.next() * (this.#sizeRange[1] - this.#sizeRange[0]),
+            speed: 0.5 + MULBERRY.next() * 1.5,
+            hue: this.#baseHues[hueIndex],
+            wobblePhase: MULBERRY.next() * Math.PI * 2,
+            wobbleFreq: 1 + MULBERRY.next() * 2,
+            wobbleAmp: 0.5 + MULBERRY.next() * 1,
+            opacity: 0.6 + MULBERRY.next() * 0.4
+        };
+    }
+
+    #createPopBurst(x: number, y: number): void {
+        const count = 5 + Math.floor(MULBERRY.next() * 4);
+
+        for (let i = 0; i < count; i++) {
+            const angle = MULBERRY.next() * Math.PI * 2;
+            const speed = 1 + MULBERRY.next() * 3;
+
+            this.#popParticles.push({
+                x,
+                y,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                alpha: 0.6 + MULBERRY.next() * 0.4,
+                size: 1 + MULBERRY.next() * 2,
+                decay: 0.03 + MULBERRY.next() * 0.03
+            });
+        }
+    }
+
+    #colorToHue(color: string): 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;
+
+        let r = data[0] / 255;
+        let g = data[1] / 255;
+        let b = data[2] / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const delta = max - min;
+
+        if (delta === 0) {
+            return 0;
+        }
+
+        let hue: number;
+
+        if (max === r) {
+            hue = ((g - b) / delta) % 6;
+        } else if (max === g) {
+            hue = (b - r) / delta + 2;
+        } else {
+            hue = (r - g) / delta + 4;
+        }
+
+        hue = Math.round(hue * 60);
+
+        if (hue < 0) {
+            hue += 360;
+        }
+
+        return hue;
+    }
+}

package/src/bubbles/simulation.ts

@@ -0,0 +1,20 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { BubbleLayer } from './layer';
+
+export interface BubbleSimulationConfig {
+    readonly count?: number;
+    readonly sizeRange?: [number, number];
+    readonly speed?: number;
+    readonly popOnClick?: boolean;
+    readonly popRadius?: number;
+    readonly colors?: string[];
+    readonly wobbleAmount?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class BubbleSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: BubbleSimulationConfig = {}) {
+        super(canvas, new BubbleLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/bubbles/types.ts

@@ -0,0 +1,21 @@
+export type Bubble = {
+    x: number;
+    y: number;
+    radius: number;
+    speed: number;
+    hue: number;
+    wobblePhase: number;
+    wobbleFreq: number;
+    wobbleAmp: number;
+    opacity: number;
+};
+
+export type PopParticle = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    alpha: number;
+    size: number;
+    decay: number;
+};

package/src/canvas.ts

@@ -1,4 +1,14 @@
 export class LimitedFrameRateCanvas {
+    static #globalSpeed: number = 1;
+
+    static get globalSpeed(): number {
+        return LimitedFrameRateCanvas.#globalSpeed;
+    }
+
+    static set globalSpeed(value: number) {
+        LimitedFrameRateCanvas.#globalSpeed = value;
+    }
+
     readonly #canvas: HTMLCanvasElement;
     readonly #context: CanvasRenderingContext2D;
     readonly #frameRate: number;
@@ -7,6 +17,7 @@ export class LimitedFrameRateCanvas {
     #delta: number = 0;
     #frame: number = 0;
     #now: number = 0;
+    #speed: number = 1;
     #then: number = 0;
     #ticks: number = 0;
     #isStopped: boolean = true;
@@ -26,7 +37,15 @@ export class LimitedFrameRateCanvas {
     }
 
     get deltaFactor(): number {
-        return this.#then === 0 ? 1 : this.#target / this.#delta;
+        return this.#then === 0 ? 1 : (this.#target / this.#delta) * this.#speed * LimitedFrameRateCanvas.#globalSpeed;
+    }
+
+    get speed(): number {
+        return this.#speed;
+    }
+
+    set speed(value: number) {
+        this.#speed = value;
     }
 
     get frameRate(): number {

package/src/color.ts

@@ -0,0 +1,10 @@
+export function parseColor(fillStyle: string): {r: number; g: number; b: number; a: number} {
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    const ctx = canvas.getContext('2d')!;
+    ctx.fillStyle = fillStyle;
+    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], a: data[3] / 255};
+}

package/src/confetti/consts.ts

@@ -1,21 +1,21 @@
-import { mulberry32 } from '@basmilius/utils';
-import type { Config } from './types';
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+import type { Config, Palette } from './types';
+
+export const PALETTES: Record<Palette, string[]> = {
+    classic: ['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff'],
+    pastel: ['#a8d8ea', '#c3aed6', '#f9b4c4', '#ffd6a5', '#caffbf', '#fdffb6'],
+    vibrant: ['#6366f1', '#8b5cf6', '#ec4899', '#f97316', '#eab308', '#22c55e', '#06b6d4'],
+    warm: ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#5f27cd', '#01a3a4']
+};
 
 export const DEFAULT_CONFIG: Config = {
     angle: 90,
-    colors: [
-        '#26ccff',
-        '#a25afd',
-        '#ff5e7e',
-        '#88ff5a',
-        '#fcff42',
-        '#ffa62d',
-        '#ff36ff'
-    ],
+    colors: PALETTES.vibrant,
     decay: 0.9,
     gravity: 1,
+    palette: 'vibrant',
     particles: 50,
-    shapes: ['circle', 'diamond', 'ribbon', 'square', 'star', 'triangle'],
+    shapes: ['bowtie', 'circle', 'crescent', 'diamond', 'heart', 'hexagon', 'ribbon', 'ring', 'square', 'star', 'triangle'],
     spread: 45,
     ticks: 200,
     startVelocity: 45,
@@ -23,4 +23,4 @@ export const DEFAULT_CONFIG: Config = {
     y: 0.5
 };
 
-export const MULBERRY = mulberry32(13);
+export const MULBERRY: Mulberry32 = mulberry32(13);

package/src/confetti/index.ts

@@ -1,2 +1,8 @@
+export { ConfettiLayer } from './layer';
+export { ConfettiParticle } from './particle';
 export { ConfettiSimulation } from './simulation';
+export { PALETTES } from './consts';
+export { SHAPE_PATHS } from './shapes';
+export type { ConfettiParticleConfig } from './particle';
 export type { ConfettiSimulationConfig } from './simulation';
+export type { Palette, Shape as ConfettiShape } from './types';

package/src/confetti/layer.ts

@@ -0,0 +1,152 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { DEFAULT_CONFIG, MULBERRY, PALETTES } from './consts';
+import { SHAPE_PATHS } from './shapes';
+import type { ConfettiSimulationConfig } from './simulation';
+import type { Config, Particle, ParticleConfig } from './types';
+
+const TWO_PI = Math.PI * 2;
+
+export class ConfettiLayer extends SimulationLayer {
+    readonly #scale: number;
+    #particles: Particle[] = [];
+    #width: number = 0;
+    #height: number = 0;
+    #isFiring: boolean = false;
+
+    constructor(config: ConfettiSimulationConfig = {}) {
+        super();
+        this.#scale = config.scale ?? 1;
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+    }
+
+    fire(config: Partial<Config>): void {
+        const width = this.#width;
+        const height = this.#height;
+
+        const resolved = {...DEFAULT_CONFIG, ...config};
+        const colors = config.colors ?? PALETTES[resolved.palette];
+        const {angle, decay, gravity, shapes, spread, startVelocity, ticks, x, y} = resolved;
+        const numberOfParticles = Math.max(1, resolved.particles);
+
+        for (let i = 0; i < numberOfParticles; i++) {
+            const particle = this.#createParticle({
+                angle,
+                color: hexToRGB(colors[Math.floor(MULBERRY.next() * colors.length)]),
+                decay,
+                gravity: gravity * this.#scale,
+                shape: shapes[Math.floor(MULBERRY.next() * shapes.length)],
+                spread,
+                startVelocity: startVelocity * this.#scale,
+                ticks,
+                x: width * x,
+                y: height * y
+            });
+
+            this.#tickParticle(particle);
+            this.#particles.push(particle);
+        }
+
+        this.#isFiring = true;
+    }
+
+    get hasParticles(): boolean {
+        return this.#particles.length > 0;
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        const particles = this.#particles;
+        let alive = 0;
+
+        for (let i = 0; i < particles.length; i++) {
+            const p = particles[i];
+
+            if (p.tick < p.totalTicks) {
+                this.#tickParticle(p, dt);
+
+                if (p.tick < p.totalTicks) {
+                    particles[alive++] = p;
+                }
+            }
+        }
+
+        particles.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        const particles = this.#particles;
+
+        for (let i = 0; i < particles.length; i++) {
+            const p = particles[i];
+            const flipCos = Math.cos(p.flipAngle);
+            const size = p.size;
+
+            ctx.setTransform(
+                p.rotCos * flipCos * size,
+                p.rotSin * flipCos * size,
+                -p.rotSin * size,
+                p.rotCos * size,
+                p.x,
+                p.y
+            );
+            ctx.globalAlpha = 1 - p.tick / p.totalTicks;
+            ctx.fillStyle = p.colorStr;
+            ctx.fill(SHAPE_PATHS[p.shape]);
+        }
+
+        ctx.resetTransform();
+        ctx.globalAlpha = 1;
+    }
+
+    #createParticle(config: ParticleConfig): Particle {
+        const launchAngle = -(config.angle * Math.PI / 180)
+            + (0.5 * config.spread * Math.PI / 180)
+            - (MULBERRY.next() * config.spread * Math.PI / 180);
+
+        const speed = config.startVelocity * (0.5 + MULBERRY.next());
+        const rotAngle = MULBERRY.next() * TWO_PI;
+
+        return {
+            colorStr: `rgb(${config.color[0]}, ${config.color[1]}, ${config.color[2]})`,
+            decay: config.decay - 0.05 + MULBERRY.next() * 0.1,
+            flipAngle: MULBERRY.next() * TWO_PI,
+            flipSpeed: 0.03 + MULBERRY.next() * 0.05,
+            gravity: config.gravity,
+            rotAngle,
+            rotCos: Math.cos(rotAngle),
+            rotSin: Math.sin(rotAngle),
+            rotSpeed: (MULBERRY.next() - 0.5) * 0.06,
+            shape: config.shape,
+            size: (5 + MULBERRY.next() * 5) * this.#scale,
+            swing: MULBERRY.next() * TWO_PI,
+            swingAmp: 0.5 + MULBERRY.next() * 1.5,
+            swingSpeed: 0.025 + MULBERRY.next() * 0.035,
+            tick: 0,
+            totalTicks: config.ticks,
+            vx: Math.cos(launchAngle) * speed,
+            vy: Math.sin(launchAngle) * speed,
+            x: config.x,
+            y: config.y
+        };
+    }
+
+    #tickParticle(particle: Particle, dt: number = 1): void {
+        const decayFactor = Math.pow(particle.decay, dt);
+        particle.vx *= decayFactor;
+        particle.vy *= decayFactor;
+        particle.vy += particle.gravity * 0.35 * dt;
+        particle.swing += particle.swingSpeed * dt;
+        particle.x += (particle.vx + particle.swingAmp * Math.cos(particle.swing)) * dt;
+        particle.y += particle.vy * dt;
+        particle.rotAngle += particle.rotSpeed * dt;
+        particle.rotCos = Math.cos(particle.rotAngle);
+        particle.rotSin = Math.sin(particle.rotAngle);
+        particle.flipAngle += particle.flipSpeed * dt;
+        particle.tick += dt;
+    }
+}

package/src/confetti/particle.ts

@@ -0,0 +1,105 @@
+import type { Point } from '../point';
+import { SHAPE_PATHS } from './shapes';
+import type { Shape } from './types';
+
+export interface ConfettiParticleConfig {
+    readonly decay?: number;
+    readonly gravity?: number;
+    readonly scale?: number;
+    readonly spread?: number;
+    readonly startVelocity?: number;
+    readonly ticks?: number;
+}
+
+export class ConfettiParticle {
+    readonly #colorStr: string;
+    readonly #gravity: number;
+    readonly #shape: Shape;
+    readonly #size: number;
+    readonly #totalTicks: number;
+    #decay: number;
+    #flipAngle: number;
+    #flipSpeed: number;
+    #rotAngle: number;
+    #rotCos: number;
+    #rotSin: number;
+    #rotSpeed: number;
+    #swing: number;
+    #swingAmp: number;
+    #swingSpeed: number;
+    #tick: number = 0;
+    #vx: number;
+    #vy: number;
+    #x: number;
+    #y: number;
+
+    get isDead(): boolean {
+        return this.#tick >= this.#totalTicks;
+    }
+
+    get position(): Point {
+        return {x: this.#x, y: this.#y};
+    }
+
+    constructor(position: Point, direction: number, shape: Shape, color: string, config: ConfettiParticleConfig = {}) {
+        const scale = config.scale ?? 1;
+        const spread = config.spread ?? 45;
+        const startVelocity = (config.startVelocity ?? 45) * scale;
+        const launchAngle = -(direction * Math.PI / 180)
+            + (0.5 * spread * Math.PI / 180)
+            - (Math.random() * spread * Math.PI / 180);
+        const speed = startVelocity * (0.5 + Math.random());
+        const rotAngle = Math.random() * Math.PI * 2;
+
+        this.#colorStr = color;
+        this.#gravity = (config.gravity ?? 1) * scale;
+        this.#shape = shape;
+        this.#size = (5 + Math.random() * 5) * scale;
+        this.#totalTicks = config.ticks ?? 200;
+        this.#x = position.x;
+        this.#y = position.y;
+        this.#vx = Math.cos(launchAngle) * speed;
+        this.#vy = Math.sin(launchAngle) * speed;
+        this.#decay = (config.decay ?? 0.9) - 0.05 + Math.random() * 0.1;
+        this.#flipAngle = Math.random() * Math.PI * 2;
+        this.#flipSpeed = 0.03 + Math.random() * 0.05;
+        this.#rotAngle = rotAngle;
+        this.#rotCos = Math.cos(rotAngle);
+        this.#rotSin = Math.sin(rotAngle);
+        this.#rotSpeed = (Math.random() - 0.5) * 0.06;
+        this.#swing = Math.random() * Math.PI * 2;
+        this.#swingAmp = 0.5 + Math.random() * 1.5;
+        this.#swingSpeed = 0.025 + Math.random() * 0.035;
+    }
+
+    draw(ctx: CanvasRenderingContext2D): void {
+        ctx.save();
+        ctx.setTransform(
+            this.#rotCos * Math.cos(this.#flipAngle) * this.#size,
+            this.#rotSin * Math.cos(this.#flipAngle) * this.#size,
+            -this.#rotSin * this.#size,
+            this.#rotCos * this.#size,
+            this.#x,
+            this.#y
+        );
+        ctx.globalAlpha = Math.max(0, 1 - this.#tick / this.#totalTicks);
+        ctx.fillStyle = this.#colorStr;
+        ctx.fill(SHAPE_PATHS[this.#shape]);
+        ctx.restore();
+    }
+
+    tick(dt: number = 1): void {
+        const decayFactor = Math.pow(this.#decay, dt);
+        this.#vx *= decayFactor;
+        this.#vy *= decayFactor;
+        this.#vy += this.#gravity * 0.35 * dt;
+        this.#swing += this.#swingSpeed * dt;
+        this.#x += (this.#vx + this.#swingAmp * Math.cos(this.#swing)) * dt;
+        this.#y += this.#vy * dt;
+        this.#rotAngle += this.#rotSpeed * dt;
+        this.#rotCos = Math.cos(this.#rotAngle);
+        this.#rotSin = Math.sin(this.#rotAngle);
+        this.#flipAngle += this.#flipSpeed * dt;
+        this.#tick += dt;
+    }
+}