@basmilius/sparkle 2.3.0 → 2.5.0

package/src/butterflies/layer.ts

@@ -0,0 +1,246 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { Butterfly } from './types';
+
+export interface ButterfliesConfig {
+    readonly colors?: string[];
+    readonly count?: number;
+    readonly scale?: number;
+    readonly size?: number;
+    readonly speed?: number;
+}
+
+const DEFAULT_COLORS = [
+    '#f4a261',
+    '#e76f51',
+    '#e9c46a',
+    '#2a9d8f',
+    '#8ecae6',
+    '#ffb7c5',
+    '#c77dff',
+    '#f8edeb'
+];
+
+export class Butterflies extends Effect<ButterfliesConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #count: number;
+    #size: number;
+    #time: number = 0;
+    #butterflies: Butterfly[] = [];
+
+    constructor(config: ButterfliesConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#count = config.count ?? 12;
+        this.#size = (config.size ?? 20) * this.#scale;
+
+        const colors = config.colors ?? DEFAULT_COLORS;
+
+        if (innerWidth < 991) {
+            this.#count = Math.floor(this.#count / 2);
+        }
+
+        for (let i = 0; i < this.#count; ++i) {
+            this.#butterflies.push(this.#createButterfly(colors));
+        }
+    }
+
+    configure(config: Partial<ButterfliesConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.003 * this.#speed * dt;
+
+        for (const butterfly of this.#butterflies) {
+            const timeX = this.#time * butterfly.orbitSpeedX + butterfly.orbitOffsetX;
+            const timeY = this.#time * butterfly.orbitSpeedY + butterfly.orbitOffsetY;
+
+            const orbitX = Math.sin(timeX) * butterfly.orbitRadiusX;
+            const orbitY = Math.cos(timeY) * butterfly.orbitRadiusY;
+
+            const targetX = butterfly.driftX + orbitX;
+            const targetY = butterfly.driftY + orbitY;
+
+            const dx = targetX - butterfly.x;
+            const dy = targetY - butterfly.y;
+
+            butterfly.x += dx * 0.05 * dt;
+            butterfly.y += dy * 0.05 * dt;
+
+            butterfly.driftX += butterfly.driftVX * dt;
+            butterfly.driftY += butterfly.driftVY * dt;
+
+            if (butterfly.driftX < 0.05 || butterfly.driftX > 0.95) {
+                butterfly.driftVX *= -1;
+            }
+
+            if (butterfly.driftY < 0.05 || butterfly.driftY > 0.95) {
+                butterfly.driftVY *= -1;
+            }
+
+            const moveDx = dx * 0.05 * dt;
+            const moveDy = dy * 0.05 * dt;
+
+            if (Math.abs(moveDx) > 0.000001 || Math.abs(moveDy) > 0.000001) {
+                const targetAngle = Math.atan2(moveDy, moveDx) + Math.PI / 2;
+                let angleDiff = targetAngle - butterfly.angle;
+
+                if (angleDiff > Math.PI) {
+                    angleDiff -= Math.PI * 2;
+                } else if (angleDiff < -Math.PI) {
+                    angleDiff += Math.PI * 2;
+                }
+
+                butterfly.angle += angleDiff * 0.08 * dt;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const globalTime = this.#time * 1000;
+
+        for (const butterfly of this.#butterflies) {
+            const px = butterfly.x * width;
+            const py = butterfly.y * height;
+            const flapAngle = Math.sin(globalTime * butterfly.flapSpeed * 0.012 + butterfly.flapOffset);
+            const wingScale = Math.abs(flapAngle);
+            const isFlipped = flapAngle < 0;
+
+            const size = butterfly.size * this.#size;
+
+            ctx.globalAlpha = 0.85;
+
+            this.#drawButterfly(ctx, px, py, butterfly.angle, size, wingScale, isFlipped, butterfly.colorR, butterfly.colorG, butterfly.colorB);
+        }
+
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+    }
+
+    #drawButterfly(
+        ctx: CanvasRenderingContext2D,
+        px: number,
+        py: number,
+        angle: number,
+        size: number,
+        wingScale: number,
+        isFlipped: boolean,
+        r: number,
+        g: number,
+        b: number
+    ): void {
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+
+        ctx.save();
+        ctx.transform(cos, sin, -sin, cos, px, py);
+
+        const ws = Math.max(0.05, wingScale);
+
+        const wingColor = `rgba(${r}, ${g}, ${b}, 0.75)`;
+        const wingEdgeColor = `rgba(${r}, ${g}, ${b}, 0.4)`;
+        const bodyColor = `rgba(${Math.floor(r * 0.4)}, ${Math.floor(g * 0.4)}, ${Math.floor(b * 0.4)}, 0.9)`;
+
+        for (const side of [-1, 1]) {
+            const scaleX = side * ws;
+
+            ctx.save();
+            ctx.scale(scaleX, 1);
+
+            ctx.fillStyle = wingColor;
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.bezierCurveTo(
+                size * 0.8, -size * 0.2,
+                size * 1.1, -size * 0.9,
+                size * 0.5, -size * 1.0
+            );
+            ctx.bezierCurveTo(
+                size * 0.1, -size * 1.1,
+                -size * 0.1, -size * 0.6,
+                0, 0
+            );
+            ctx.fill();
+
+            ctx.fillStyle = wingEdgeColor;
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.bezierCurveTo(
+                size * 0.9, size * 0.1,
+                size * 1.0, size * 0.7,
+                size * 0.4, size * 0.8
+            );
+            ctx.bezierCurveTo(
+                size * 0.0, size * 0.85,
+                -size * 0.1, size * 0.4,
+                0, 0
+            );
+            ctx.fill();
+
+            ctx.restore();
+        }
+
+        ctx.fillStyle = bodyColor;
+        const bodyLength = size * 1.2;
+        ctx.beginPath();
+        ctx.ellipse(0, 0, size * 0.08, bodyLength * 0.5, 0, 0, Math.PI * 2);
+        ctx.fill();
+
+        const antennaLength = size * 0.7;
+        ctx.strokeStyle = bodyColor;
+        ctx.lineWidth = 1;
+
+        for (const antSide of [-1, 1]) {
+            ctx.beginPath();
+            ctx.moveTo(antSide * size * 0.04, -bodyLength * 0.4);
+            ctx.quadraticCurveTo(
+                antSide * size * 0.3, -bodyLength * 0.6,
+                antSide * size * 0.25, -bodyLength * 0.5 - antennaLength
+            );
+            ctx.stroke();
+
+            ctx.fillStyle = bodyColor;
+            ctx.beginPath();
+            ctx.arc(antSide * size * 0.25, -bodyLength * 0.5 - antennaLength, size * 0.06, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        ctx.restore();
+    }
+
+    #createButterfly(colors: string[]): Butterfly {
+        const colorStr = colors[Math.floor(MULBERRY.next() * colors.length)];
+        const {r, g, b} = parseColor(colorStr);
+
+        return {
+            x: MULBERRY.next(),
+            y: MULBERRY.next(),
+            angle: MULBERRY.next() * Math.PI * 2 + Math.PI / 2,
+            speed: 0.5 + MULBERRY.next() * 0.5,
+            flapSpeed: 4 + MULBERRY.next() * 4,
+            flapOffset: MULBERRY.next() * Math.PI * 2,
+            size: 0.7 + MULBERRY.next() * 0.6,
+            color: colorStr,
+            colorR: r,
+            colorG: g,
+            colorB: b,
+            orbitRadiusX: 0.06 + MULBERRY.next() * 0.15,
+            orbitRadiusY: 0.05 + MULBERRY.next() * 0.12,
+            orbitSpeedX: 0.6 + MULBERRY.next() * 1.2,
+            orbitSpeedY: 0.5 + MULBERRY.next() * 1.0,
+            orbitOffsetX: MULBERRY.next() * Math.PI * 2,
+            orbitOffsetY: MULBERRY.next() * Math.PI * 2,
+            driftX: 0.15 + MULBERRY.next() * 0.7,
+            driftY: 0.15 + MULBERRY.next() * 0.7,
+            driftVX: (MULBERRY.next() - 0.5) * 0.0005,
+            driftVY: (MULBERRY.next() - 0.5) * 0.0004
+        };
+    }
+}

package/src/butterflies/types.ts

@@ -0,0 +1,23 @@
+export interface Butterfly {
+    x: number;
+    y: number;
+    angle: number;
+    speed: number;
+    flapSpeed: number;
+    flapOffset: number;
+    size: number;
+    color: string;
+    colorR: number;
+    colorG: number;
+    colorB: number;
+    orbitRadiusX: number;
+    orbitRadiusY: number;
+    orbitSpeedX: number;
+    orbitSpeedY: number;
+    orbitOffsetX: number;
+    orbitOffsetY: number;
+    driftX: number;
+    driftY: number;
+    driftVX: number;
+    driftVY: number;
+}

package/src/caustics/consts.ts

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

package/src/caustics/index.ts

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

package/src/caustics/layer.ts

@@ -0,0 +1,107 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+
+export interface CausticsConfig {
+    readonly speed?: number;
+    readonly scale?: number;
+    readonly resolution?: number;
+    readonly intensity?: number;
+    readonly color?: string;
+}
+
+export class Caustics extends Effect<CausticsConfig> {
+    #speed: number;
+    readonly #scale: number;
+    readonly #resolution: number;
+    #intensity: 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: CausticsConfig = {}) {
+        super();
+
+        this.#speed = config.speed ?? 1;
+        this.#scale = config.scale ?? 1;
+        this.#resolution = config.resolution ?? 4;
+        this.#intensity = config.intensity ?? 0.7;
+
+        const [r, g, b] = hexToRGB(config.color ?? '#4488cc');
+        this.#colorR = r;
+        this.#colorG = g;
+        this.#colorB = b;
+    }
+
+    configure(config: Partial<CausticsConfig>): 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;
+    }
+
+    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 intensity = this.#intensity;
+        const colorR = this.#colorR;
+        const colorG = this.#colorG;
+        const colorB = this.#colorB;
+
+        const freq1 = 40 * scale;
+        const freq2 = 30 * scale;
+        const freq3 = 35 * scale;
+        const freq4 = 25 * scale;
+        const freq5 = 45 * scale;
+        const amplitude = 2.5;
+
+        for (let py = 0; py < offHeight; py++) {
+            const worldY = py * resolution;
+
+            for (let px = 0; px < offWidth; px++) {
+                const worldX = px * resolution;
+
+                const v1 = Math.sin(worldX / freq1 + Math.sin(worldY / freq2 + time) * amplitude);
+                const v2 = Math.sin(worldY / freq3 + Math.sin(worldX / freq4 + time * 0.7) * amplitude);
+                const v3 = Math.sin((worldX + worldY) / freq5 + time * 0.5);
+
+                const caustic = (v1 + v2 + v3) / 3;
+                const clamped = Math.max(0, caustic);
+                const brightness = Math.pow(clamped, 2) * intensity;
+
+                const offset = (py * offWidth + px) * 4;
+                data[offset] = Math.min(255, colorR * brightness + (1 - brightness) * colorR * 0.15);
+                data[offset + 1] = Math.min(255, colorG * brightness + (1 - brightness) * colorG * 0.15);
+                data[offset + 2] = Math.min(255, colorB * brightness + (1 - brightness) * colorB * 0.15);
+                data[offset + 3] = 255;
+            }
+        }
+
+        this.#offscreenCtx!.putImageData(this.#imageData!, 0, 0);
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.drawImage(this.#offscreen!, 0, 0, width, height);
+    }
+}

package/src/clouds/consts.ts

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

package/src/clouds/index.ts

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

package/src/clouds/layer.ts

@@ -0,0 +1,167 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { Cloud } from './types';
+
+export interface CloudsConfig {
+    readonly color?: string;
+    readonly count?: number;
+    readonly opacity?: number;
+    readonly scale?: number;
+    readonly speed?: number;
+}
+
+const SPRITE_COUNT = 6;
+const SPRITE_SIZE = 256;
+
+export class Clouds extends Effect<CloudsConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #count: number;
+    #opacity: number;
+    #clouds: Cloud[] = [];
+    #sprites: HTMLCanvasElement[] = [];
+    #colorR: number = 255;
+    #colorG: number = 255;
+    #colorB: number = 255;
+
+    constructor(config: CloudsConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 0.3;
+        this.#count = config.count ?? 8;
+        this.#opacity = config.opacity ?? 0.8;
+
+        const {r, g, b} = parseColor(config.color ?? '#ffffff');
+        this.#colorR = r;
+        this.#colorG = g;
+        this.#colorB = b;
+
+        if (innerWidth < 991) {
+            this.#count = Math.max(3, Math.floor(this.#count / 2));
+        }
+
+        this.#sprites = this.#createSprites(r, g, b);
+
+        for (let i = 0; i < this.#count; ++i) {
+            this.#clouds.push(this.#createCloud(true));
+        }
+    }
+
+    configure(config: Partial<CloudsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+
+        if (config.opacity !== undefined) {
+            this.#opacity = config.opacity;
+        }
+
+        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 {
+        for (const cloud of this.#clouds) {
+            const layerSpeed = this.#speed * (0.5 + cloud.layer * 0.5);
+            cloud.x += layerSpeed * 0.002 * dt;
+
+            if (cloud.x > 1.4) {
+                cloud.x = -0.4;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const sortedClouds = [...this.#clouds].sort((a, b) => a.layer - b.layer);
+
+        for (const cloud of sortedClouds) {
+            const px = cloud.x * width;
+            const py = cloud.y * height;
+            const cloudWidth = SPRITE_SIZE * cloud.scale * this.#scale * (width / 800);
+            const cloudHeight = (SPRITE_SIZE * 0.45) * cloud.scale * this.#scale * (width / 800);
+
+            const depthAlpha = 0.4 + cloud.layer * 0.3;
+            ctx.globalAlpha = this.#opacity * depthAlpha * cloud.opacity;
+
+            ctx.drawImage(
+                this.#sprites[cloud.spriteIndex],
+                px - cloudWidth * 0.5,
+                py - cloudHeight * 0.5,
+                cloudWidth,
+                cloudHeight
+            );
+        }
+
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+    }
+
+    #createSprites(r: number, g: number, b: number): HTMLCanvasElement[] {
+        const sprites: HTMLCanvasElement[] = [];
+
+        for (let variant = 0; variant < SPRITE_COUNT; variant++) {
+            const canvas = document.createElement('canvas');
+            canvas.width = SPRITE_SIZE;
+            canvas.height = Math.floor(SPRITE_SIZE * 0.5);
+            const spriteCtx = canvas.getContext('2d')!;
+
+            const blobCount = 3 + Math.floor(MULBERRY.next() * 3);
+            const cx = SPRITE_SIZE * 0.5;
+            const cy = SPRITE_SIZE * 0.2;
+
+            const blobs: Array<{bx: number; by: number; br: number}> = [];
+
+            blobs.push({bx: cx, by: cy, br: SPRITE_SIZE * (0.18 + MULBERRY.next() * 0.08)});
+
+            for (let i = 1; i < blobCount; i++) {
+                const spread = SPRITE_SIZE * 0.28;
+                blobs.push({
+                    bx: cx + (MULBERRY.next() - 0.5) * spread * 2,
+                    by: cy + (MULBERRY.next() - 0.3) * spread * 0.5,
+                    br: SPRITE_SIZE * (0.1 + MULBERRY.next() * 0.12)
+                });
+            }
+
+            for (const blob of blobs) {
+                const gradient = spriteCtx.createRadialGradient(
+                    blob.bx, blob.by, 0,
+                    blob.bx, blob.by, blob.br
+                );
+                gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.9)`);
+                gradient.addColorStop(0.35, `rgba(${r}, ${g}, ${b}, 0.7)`);
+                gradient.addColorStop(0.7, `rgba(${r}, ${g}, ${b}, 0.25)`);
+                gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+                spriteCtx.fillStyle = gradient;
+                spriteCtx.beginPath();
+                spriteCtx.arc(blob.bx, blob.by, blob.br, 0, Math.PI * 2);
+                spriteCtx.fill();
+            }
+
+            sprites.push(canvas);
+        }
+
+        return sprites;
+    }
+
+    #createCloud(initialSpread: boolean): Cloud {
+        const layer = Math.floor(MULBERRY.next() * 3);
+
+        return {
+            x: initialSpread ? MULBERRY.next() * 1.8 - 0.4 : -0.4,
+            y: 0.05 + MULBERRY.next() * 0.55,
+            speed: 0.5 + MULBERRY.next() * 0.5,
+            layer,
+            scale: 0.6 + MULBERRY.next() * 0.8 + layer * 0.3,
+            opacity: 0.6 + MULBERRY.next() * 0.4,
+            spriteIndex: Math.floor(MULBERRY.next() * SPRITE_COUNT)
+        };
+    }
+}

package/src/clouds/types.ts

@@ -0,0 +1,9 @@
+export interface Cloud {
+    x: number;
+    y: number;
+    speed: number;
+    layer: number;
+    scale: number;
+    opacity: number;
+    spriteIndex: number;
+}

package/src/confetti/layer.ts

@@ -89,7 +89,8 @@ export class Confetti extends Effect<ConfettiConfig> {
             const flipCos = Math.cos(p.flipAngle);
             const size = p.size;
 
-            ctx.setTransform(
+            ctx.save();
+            ctx.transform(
                 p.rotCos * flipCos * size,
                 p.rotSin * flipCos * size,
                 -p.rotSin * size,
@@ -100,9 +101,9 @@ export class Confetti extends Effect<ConfettiConfig> {
             ctx.globalAlpha = 1 - p.tick / p.totalTicks;
             ctx.fillStyle = p.colorStr;
             ctx.fill(SHAPE_PATHS[p.shape]);
+            ctx.restore();
         }
 
-        ctx.resetTransform();
         ctx.globalAlpha = 1;
     }
 

package/src/constellation/consts.ts

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

package/src/constellation/index.ts

@@ -0,0 +1,10 @@
+import { Constellation } from './layer';
+import type { ConstellationConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createConstellation(config?: ConstellationConfig): Effect<ConstellationConfig> {
+    return new Constellation(config);
+}
+
+export type { ConstellationConfig };
+export type { ConstellationStar } from './types';