@basmilius/sparkle 1.0.0 → 2.1.0

package/src/waves/layer.ts

@@ -0,0 +1,167 @@
+import { SimulationLayer } from '../layer';
+import { MULBERRY } from './consts';
+import type { WaveSimulationConfig } from './simulation';
+import type { Wave } from './types';
+
+const DEFAULT_COLORS = ['#0a3d6b', '#0e5a8a', '#1a7ab5', '#3399cc', '#66c2e0'];
+
+export class WaveLayer extends SimulationLayer {
+    readonly #speed: number;
+    readonly #foamColor: string;
+    readonly #foamAmount: number;
+    readonly #scale: number;
+    #time: number = 0;
+    #waves: Wave[] = [];
+    #foamParticles: {x: number; y: number; alpha: number; size: number}[] = [];
+    #maxFoamParticles: number;
+
+    constructor(config: WaveSimulationConfig = {}) {
+        super();
+
+        const layers = config.layers ?? 5;
+        const colors = config.colors ?? DEFAULT_COLORS;
+        this.#speed = config.speed ?? 1;
+        this.#foamColor = config.foamColor ?? '#ffffff';
+        this.#foamAmount = config.foamAmount ?? 0.4;
+        this.#scale = config.scale ?? 1;
+        this.#maxFoamParticles = 120;
+
+        if (innerWidth < 991) {
+            this.#maxFoamParticles = Math.floor(this.#maxFoamParticles / 2);
+        }
+
+        for (let i = 0; i < layers; i++) {
+            const depth = i / Math.max(layers - 1, 1);
+            const color = colors[i % colors.length];
+
+            this.#waves.push({
+                amplitude: (20 + MULBERRY.next() * 30) * (1 - depth * 0.4),
+                frequency: 0.005 + MULBERRY.next() * 0.008 + depth * 0.002,
+                speed: (0.4 + MULBERRY.next() * 0.6 + depth * 0.3) * this.#speed,
+                phase: MULBERRY.next() * Math.PI * 2,
+                baseY: 0.35 + depth * 0.13,
+                color,
+                foamThreshold: 0.6 + MULBERRY.next() * 0.3
+            });
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.02 * dt * this.#speed;
+
+        for (const wave of this.#waves) {
+            wave.phase += 0.015 * wave.speed * dt;
+        }
+
+        let aliveFoam = 0;
+
+        for (let i = 0; i < this.#foamParticles.length; i++) {
+            const foam = this.#foamParticles[i];
+            foam.alpha -= (0.008 + MULBERRY.next() * 0.006) * dt;
+            foam.x += (MULBERRY.next() - 0.5) * 0.5 * dt;
+            foam.y += (MULBERRY.next() - 0.5) * 0.3 * dt;
+
+            if (foam.alpha > 0) {
+                this.#foamParticles[aliveFoam++] = foam;
+            }
+        }
+
+        this.#foamParticles.length = aliveFoam;
+
+        if (this.#foamAmount > 0 && width > 0 && height > 0) {
+            const spawnCount = Math.ceil(2 * this.#foamAmount * dt);
+
+            for (let s = 0; s < spawnCount && this.#foamParticles.length < this.#maxFoamParticles; s++) {
+                const waveIndex = Math.floor(MULBERRY.next() * this.#waves.length);
+                const wave = this.#waves[waveIndex];
+                const x = MULBERRY.next() * width;
+                const centerY = wave.baseY * height;
+                const primary = wave.amplitude * Math.sin(wave.frequency * x + wave.phase);
+                const secondary = wave.amplitude * 0.4 * Math.sin(wave.frequency * 2.3 * x + wave.phase * 1.7 + 1.3);
+                const waveY = centerY + (primary + secondary) * this.#scale;
+
+                const slopeCheck = Math.cos(wave.frequency * x + wave.phase);
+
+                if (slopeCheck > wave.foamThreshold - 1) {
+                    this.#foamParticles.push({
+                        x,
+                        y: waveY - MULBERRY.next() * 4 * this.#scale,
+                        alpha: 0.4 + MULBERRY.next() * 0.6,
+                        size: 1 + MULBERRY.next() * 3
+                    });
+                }
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        const step = 2;
+
+        for (let wi = 0; wi < this.#waves.length; wi++) {
+            const wave = this.#waves[wi];
+            const centerY = wave.baseY * height;
+
+            ctx.beginPath();
+            ctx.moveTo(0, height);
+
+            for (let x = 0; x <= width; x += step) {
+                const primary = wave.amplitude * Math.sin(wave.frequency * x + wave.phase);
+                const secondary = wave.amplitude * 0.4 * Math.sin(wave.frequency * 2.3 * x + wave.phase * 1.7 + 1.3);
+                const tertiary = wave.amplitude * 0.15 * Math.sin(wave.frequency * 4.1 * x + wave.phase * 0.6 + 2.8);
+                const waveY = centerY + (primary + secondary + tertiary) * this.#scale;
+
+                ctx.lineTo(x, waveY);
+            }
+
+            ctx.lineTo(width, height);
+            ctx.closePath();
+
+            const gradient = ctx.createLinearGradient(0, centerY - wave.amplitude * this.#scale, 0, height);
+            gradient.addColorStop(0, this.#adjustAlpha(wave.color, 0.85));
+            gradient.addColorStop(0.4, wave.color);
+            gradient.addColorStop(1, this.#darkenColor(wave.color, 0.6));
+
+            ctx.fillStyle = gradient;
+            ctx.fill();
+        }
+
+        if (this.#foamAmount > 0) {
+            for (const foam of this.#foamParticles) {
+                if (foam.alpha <= 0) {
+                    continue;
+                }
+
+                ctx.beginPath();
+                ctx.arc(foam.x, foam.y, foam.size * this.#scale, 0, Math.PI * 2);
+                ctx.fillStyle = this.#adjustAlpha(this.#foamColor, foam.alpha * this.#foamAmount);
+                ctx.fill();
+            }
+        }
+    }
+
+    #adjustAlpha(color: string, alpha: number): string {
+        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 `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${alpha})`;
+    }
+
+    #darkenColor(color: string, factor: number): string {
+        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;
+        const r = Math.floor(data[0] * factor);
+        const g = Math.floor(data[1] * factor);
+        const b = Math.floor(data[2] * factor);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+}

package/src/waves/simulation.ts

@@ -0,0 +1,18 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { WaveLayer } from './layer';
+
+export interface WaveSimulationConfig {
+    readonly layers?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly foamColor?: string;
+    readonly foamAmount?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class WaveSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: WaveSimulationConfig = {}) {
+        super(canvas, new WaveLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/waves/types.ts

@@ -0,0 +1,9 @@
+export type Wave = {
+    amplitude: number;
+    frequency: number;
+    speed: number;
+    phase: number;
+    baseY: number;
+    color: string;
+    foamThreshold: number;
+};

package/src/wormhole/consts.ts

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

package/src/wormhole/index.ts

@@ -0,0 +1,4 @@
+export { WormholeLayer } from './layer';
+export { WormholeSimulation } from './simulation';
+export type { WormholeSimulationConfig } from './simulation';
+export type { WormholeDirection, WormholeParticle } from './types';

package/src/wormhole/layer.ts

@@ -0,0 +1,181 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { MULBERRY } from './consts';
+import type { WormholeSimulationConfig } from './simulation';
+import type { WormholeDirection, WormholeParticle } from './types';
+
+export class WormholeLayer extends SimulationLayer {
+    readonly #speed: number;
+    readonly #colorRGB: [number, number, number];
+    readonly #direction: WormholeDirection;
+    readonly #scale: number;
+    #count: number;
+    #particles: WormholeParticle[] = [];
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: WormholeSimulationConfig = {}) {
+        super();
+
+        let count = config.count ?? 200;
+
+        this.#speed = config.speed ?? 1;
+        this.#colorRGB = hexToRGB(config.color ?? '#6699ff');
+        this.#direction = config.direction ?? 'inward';
+        this.#scale = config.scale ?? 1;
+
+        if (innerWidth < 991) {
+            count = Math.floor(count / 2);
+        }
+
+        this.#count = count;
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#particles = [];
+
+            for (let i = 0; i < this.#count; ++i) {
+                this.#particles.push(this.#createParticle(true));
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const maxRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2);
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#particles.length; ++i) {
+            const particle = this.#particles[i];
+
+            if (this.#direction === 'inward') {
+                const normalizedDistance = particle.distance / maxRadius;
+                const acceleration = 1 + (1 - normalizedDistance) * 3;
+                particle.distance -= particle.speed * this.#speed * acceleration * dt * this.#scale;
+
+                particle.trail = 5 + (1 - normalizedDistance) * 25;
+
+                if (particle.distance > 0) {
+                    this.#particles[alive++] = particle;
+                } else {
+                    this.#particles[alive++] = this.#createParticle(false);
+                }
+            } else {
+                const normalizedDistance = particle.distance / maxRadius;
+                const acceleration = 1 + normalizedDistance * 3;
+                particle.distance += particle.speed * this.#speed * acceleration * dt * this.#scale;
+
+                particle.trail = 5 + normalizedDistance * 25;
+
+                if (particle.distance < maxRadius + 20) {
+                    this.#particles[alive++] = particle;
+                } else {
+                    this.#particles[alive++] = this.#createParticle(false);
+                }
+            }
+
+            particle.angle += (MULBERRY.next() - 0.5) * 0.002 * dt;
+        }
+
+        this.#particles.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const cx = width / 2;
+        const cy = height / 2;
+        const maxRadius = Math.sqrt(cx * cx + cy * cy);
+        const [cr, cg, cb] = this.#colorRGB;
+
+
+        const glowRadius = 40 * this.#scale;
+        const glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowRadius);
+        glow.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, 0.25)`);
+        glow.addColorStop(0.4, `rgba(${cr}, ${cg}, ${cb}, 0.08)`);
+        glow.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, glowRadius, 0, Math.PI * 2);
+        ctx.fillStyle = glow;
+        ctx.fill();
+
+        for (const particle of this.#particles) {
+            const normalizedDistance = particle.distance / maxRadius;
+            const px = cx + Math.cos(particle.angle) * particle.distance;
+            const py = cy + Math.sin(particle.angle) * particle.distance;
+
+            const trailFactor = this.#direction === 'inward' ? 1 : -1;
+            const trailLength = particle.trail * this.#scale;
+            const tx = px + Math.cos(particle.angle) * trailLength * trailFactor;
+            const ty = py + Math.sin(particle.angle) * trailLength * trailFactor;
+
+            let intensity: number;
+
+            if (this.#direction === 'inward') {
+                intensity = particle.brightness * (1 - normalizedDistance);
+            } else {
+                intensity = particle.brightness * normalizedDistance;
+            }
+
+            const alpha = Math.max(0.05, Math.min(1, intensity));
+            const lineWidth = Math.max(0.5, particle.size * this.#scale * (0.5 + intensity * 0.5));
+
+            const gradient = ctx.createLinearGradient(px, py, tx, ty);
+            gradient.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, ${alpha})`);
+            gradient.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+            ctx.globalAlpha = 1;
+            ctx.beginPath();
+            ctx.moveTo(px, py);
+            ctx.lineTo(tx, ty);
+            ctx.strokeStyle = gradient;
+            ctx.lineWidth = lineWidth;
+            ctx.stroke();
+
+            ctx.globalAlpha = alpha;
+            ctx.beginPath();
+            ctx.arc(px, py, lineWidth * 0.6, 0, Math.PI * 2);
+            ctx.fillStyle = `rgb(${cr}, ${cg}, ${cb})`;
+            ctx.fill();
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #createParticle(spread: boolean): WormholeParticle {
+        const maxRadius = Math.sqrt((this.#width / 2) ** 2 + (this.#height / 2) ** 2);
+        const angle = MULBERRY.next() * Math.PI * 2;
+
+        let distance: number;
+
+        if (this.#direction === 'inward') {
+            distance = spread
+                ? MULBERRY.next() * maxRadius
+                : maxRadius * (0.8 + MULBERRY.next() * 0.2);
+        } else {
+            distance = spread
+                ? MULBERRY.next() * maxRadius
+                : MULBERRY.next() * maxRadius * 0.1;
+        }
+
+        return {
+            angle,
+            distance,
+            speed: 0.5 + MULBERRY.next() * 1.5,
+            size: 0.8 + MULBERRY.next() * 2.2,
+            brightness: 0.4 + MULBERRY.next() * 0.6,
+            trail: 5
+        };
+    }
+}

package/src/wormhole/simulation.ts

@@ -0,0 +1,17 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { WormholeLayer } from './layer';
+
+export interface WormholeSimulationConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly direction?: import('./types').WormholeDirection;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class WormholeSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: WormholeSimulationConfig = {}) {
+        super(canvas, new WormholeLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/wormhole/types.ts

@@ -0,0 +1,10 @@
+export type WormholeDirection = 'inward' | 'outward';
+
+export type WormholeParticle = {
+    angle: number;
+    distance: number;
+    speed: number;
+    size: number;
+    brightness: number;
+    trail: number;
+};