@basmilius/sparkle 2.0.0 → 2.2.0

package/src/particles/layer.ts

@@ -0,0 +1,360 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { NetworkParticle, ParticleMouseMode } from './types';
+
+export interface ParticlesConfig {
+    readonly count?: number;
+    readonly color?: string;
+    readonly lineColor?: string;
+    readonly size?: [number, number];
+    readonly speed?: [number, number];
+    readonly connectionDistance?: number;
+    readonly lineWidth?: number;
+    readonly mouseMode?: ParticleMouseMode;
+    readonly mouseRadius?: number;
+    readonly mouseStrength?: number;
+    readonly particleForces?: boolean;
+    readonly glow?: boolean;
+    readonly background?: string | null;
+    readonly scale?: number;
+}
+
+export class Particles extends Effect<ParticlesConfig> {
+    #scale: number;
+    #connectionDistance: number;
+    #lineWidth: number;
+    #mouseMode: ParticleMouseMode;
+    #mouseRadius: number;
+    #mouseStrength: number;
+    #particleForces: boolean;
+    #glow: boolean;
+    readonly #background: string | null;
+    readonly #colorRGB: [number, number, number];
+    readonly #lineColorRGB: [number, number, number];
+    readonly #sizeRange: [number, number];
+    readonly #speedRange: [number, number];
+    readonly #onMouseMoveBound: (evt: MouseEvent) => void;
+    readonly #onMouseLeaveBound: () => void;
+    #maxCount: number;
+    #mouseX: number = -1;
+    #mouseY: number = -1;
+    #mouseOnCanvas: boolean = false;
+    #particles: NetworkParticle[] = [];
+    #grid: Map<string, number[]> = new Map();
+    #cellSize: number;
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: ParticlesConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 100;
+        this.#connectionDistance = (config.connectionDistance ?? 120) * this.#scale;
+        this.#lineWidth = config.lineWidth ?? 0.5;
+        this.#mouseMode = config.mouseMode ?? 'connect';
+        this.#mouseRadius = (config.mouseRadius ?? 150) * this.#scale;
+        this.#mouseStrength = config.mouseStrength ?? 0.03;
+        this.#particleForces = config.particleForces ?? false;
+        this.#glow = config.glow ?? false;
+        this.#background = config.background ?? null;
+        this.#cellSize = this.#connectionDistance;
+
+        this.#colorRGB = hexToRGB(config.color ?? '#6366f1');
+        this.#lineColorRGB = hexToRGB(config.lineColor ?? '#6366f1');
+
+        this.#sizeRange = config.size ?? [1, 3];
+        this.#speedRange = config.speed ?? [0.2, 0.8];
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        this.#onMouseMoveBound = this.#onMouseMove.bind(this);
+        this.#onMouseLeaveBound = this.#onMouseLeave.bind(this);
+    }
+
+    configure(config: Partial<ParticlesConfig>): void {
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+        if (config.connectionDistance !== undefined) {
+            this.#connectionDistance = config.connectionDistance * this.#scale;
+        }
+        if (config.lineWidth !== undefined) {
+            this.#lineWidth = config.lineWidth;
+        }
+        if (config.mouseMode !== undefined) {
+            this.#mouseMode = config.mouseMode;
+        }
+        if (config.mouseRadius !== undefined) {
+            this.#mouseRadius = config.mouseRadius * this.#scale;
+        }
+        if (config.mouseStrength !== undefined) {
+            this.#mouseStrength = config.mouseStrength;
+        }
+        if (config.particleForces !== undefined) {
+            this.#particleForces = config.particleForces;
+        }
+        if (config.glow !== undefined) {
+            this.#glow = config.glow;
+        }
+    }
+
+    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.#maxCount; ++i) {
+                this.#particles.push(this.#createParticle(this.#sizeRange, this.#speedRange));
+            }
+        }
+    }
+
+    onMount(canvas: HTMLCanvasElement): void {
+        if (this.#mouseMode !== 'none') {
+            canvas.addEventListener('mousemove', this.#onMouseMoveBound, {passive: true});
+            canvas.addEventListener('mouseleave', this.#onMouseLeaveBound, {passive: true});
+        }
+    }
+
+    onUnmount(canvas: HTMLCanvasElement): void {
+        canvas.removeEventListener('mousemove', this.#onMouseMoveBound);
+        canvas.removeEventListener('mouseleave', this.#onMouseLeaveBound);
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        this.#grid.clear();
+
+        for (let i = 0; i < this.#particles.length; i++) {
+            const particle = this.#particles[i];
+            const col = Math.floor(particle.x / this.#cellSize);
+            const row = Math.floor(particle.y / this.#cellSize);
+            const key = `${col},${row}`;
+            const cell = this.#grid.get(key);
+
+            if (cell) {
+                cell.push(i);
+            } else {
+                this.#grid.set(key, [i]);
+            }
+        }
+
+        for (const particle of this.#particles) {
+            particle.x += particle.vx * dt;
+            particle.y += particle.vy * dt;
+
+            if (particle.x < 0) {
+                particle.x = 0;
+                particle.vx = Math.abs(particle.vx);
+            } else if (particle.x > width) {
+                particle.x = width;
+                particle.vx = -Math.abs(particle.vx);
+            }
+
+            if (particle.y < 0) {
+                particle.y = 0;
+                particle.vy = Math.abs(particle.vy);
+            } else if (particle.y > height) {
+                particle.y = height;
+                particle.vy = -Math.abs(particle.vy);
+            }
+        }
+
+        if (this.#mouseOnCanvas && (this.#mouseMode === 'attract' || this.#mouseMode === 'repel')) {
+            const direction = this.#mouseMode === 'attract' ? -1 : 1;
+
+            for (const particle of this.#particles) {
+                const dx = particle.x - this.#mouseX;
+                const dy = particle.y - this.#mouseY;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+
+                if (dist < this.#mouseRadius && dist > 0) {
+                    const force = (1 - dist / this.#mouseRadius) * this.#mouseStrength * dt;
+                    particle.vx += (dx / dist) * force * direction * 100;
+                    particle.vy += (dy / dist) * force * direction * 100;
+                }
+            }
+        }
+
+        if (this.#particleForces) {
+            const repelDist = 30 * this.#scale;
+
+            for (let i = 0; i < this.#particles.length; i++) {
+                const pa = this.#particles[i];
+                const col = Math.floor(pa.x / this.#cellSize);
+                const row = Math.floor(pa.y / this.#cellSize);
+
+                for (let dc = -1; dc <= 1; dc++) {
+                    for (let dr = -1; dr <= 1; dr++) {
+                        const key = `${col + dc},${row + dr}`;
+                        const neighbors = this.#grid.get(key);
+
+                        if (!neighbors) {
+                            continue;
+                        }
+
+                        for (const j of neighbors) {
+                            if (j <= i) {
+                                continue;
+                            }
+
+                            const pb = this.#particles[j];
+                            const dx = pa.x - pb.x;
+                            const dy = pa.y - pb.y;
+                            const dist = Math.sqrt(dx * dx + dy * dy);
+
+                            if (dist < repelDist && dist > 0) {
+                                const force = (1 - dist / repelDist) * 0.5 * dt;
+                                const nx = dx / dist;
+                                const ny = dy / dist;
+                                pa.vx += nx * force;
+                                pa.vy += ny * force;
+                                pb.vx -= nx * force;
+                                pb.vy -= ny * force;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        for (const particle of this.#particles) {
+            const currentSpeed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
+
+            if (currentSpeed > particle.baseSpeed) {
+                const damping = Math.pow(0.98, dt);
+                particle.vx *= damping;
+                particle.vy *= damping;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        if (this.#background) {
+            ctx.fillStyle = this.#background;
+            ctx.fillRect(0, 0, width, height);
+        }
+
+        const [lr, lg, lb] = this.#lineColorRGB;
+        const [pr, pg, pb] = this.#colorRGB;
+        const connDist = this.#connectionDistance;
+
+        ctx.lineWidth = this.#lineWidth;
+
+        const drawn = new Set<string>();
+
+        for (let i = 0; i < this.#particles.length; i++) {
+            const pa = this.#particles[i];
+            const col = Math.floor(pa.x / this.#cellSize);
+            const row = Math.floor(pa.y / this.#cellSize);
+
+            for (let dc = -1; dc <= 1; dc++) {
+                for (let dr = -1; dr <= 1; dr++) {
+                    const key = `${col + dc},${row + dr}`;
+                    const neighbors = this.#grid.get(key);
+
+                    if (!neighbors) {
+                        continue;
+                    }
+
+                    for (const j of neighbors) {
+                        if (j <= i) {
+                            continue;
+                        }
+
+                        const pairKey = `${i},${j}`;
+
+                        if (drawn.has(pairKey)) {
+                            continue;
+                        }
+
+                        drawn.add(pairKey);
+
+                        const pb2 = this.#particles[j];
+                        const dx = pa.x - pb2.x;
+                        const dy = pa.y - pb2.y;
+                        const dist = Math.sqrt(dx * dx + dy * dy);
+
+                        if (dist < connDist) {
+                            const alpha = 1 - dist / connDist;
+                            ctx.beginPath();
+                            ctx.moveTo(pa.x, pa.y);
+                            ctx.lineTo(pb2.x, pb2.y);
+                            ctx.strokeStyle = `rgba(${lr}, ${lg}, ${lb}, ${alpha * 0.6})`;
+                            ctx.stroke();
+                        }
+                    }
+                }
+            }
+        }
+
+        if (this.#mouseOnCanvas && this.#mouseMode === 'connect') {
+            for (const particle of this.#particles) {
+                const dx = particle.x - this.#mouseX;
+                const dy = particle.y - this.#mouseY;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+
+                if (dist < this.#mouseRadius) {
+                    const alpha = 1 - dist / this.#mouseRadius;
+                    ctx.beginPath();
+                    ctx.moveTo(this.#mouseX, this.#mouseY);
+                    ctx.lineTo(particle.x, particle.y);
+                    ctx.strokeStyle = `rgba(${lr}, ${lg}, ${lb}, ${alpha * 0.8})`;
+                    ctx.stroke();
+                }
+            }
+        }
+
+        if (this.#glow) {
+            ctx.shadowColor = `rgb(${pr}, ${pg}, ${pb})`;
+            ctx.shadowBlur = 8 * this.#scale;
+        }
+
+        for (const particle of this.#particles) {
+            ctx.beginPath();
+            ctx.arc(particle.x, particle.y, particle.radius * this.#scale, 0, Math.PI * 2);
+            ctx.fillStyle = `rgb(${pr}, ${pg}, ${pb})`;
+            ctx.fill();
+        }
+
+        if (this.#glow) {
+            ctx.shadowBlur = 0;
+        }
+    }
+
+    #onMouseMove(evt: MouseEvent): void {
+        const target = evt.currentTarget as HTMLCanvasElement;
+        const rect = target.getBoundingClientRect();
+        this.#mouseX = evt.clientX - rect.left;
+        this.#mouseY = evt.clientY - rect.top;
+        this.#mouseOnCanvas = true;
+    }
+
+    #onMouseLeave(): void {
+        this.#mouseOnCanvas = false;
+    }
+
+    #createParticle(sizeRange: [number, number], speedRange: [number, number]): NetworkParticle {
+        const angle = MULBERRY.next() * Math.PI * 2;
+        const speed = speedRange[0] + MULBERRY.next() * (speedRange[1] - speedRange[0]);
+
+        return {
+            x: MULBERRY.next() * this.#width,
+            y: MULBERRY.next() * this.#height,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            radius: sizeRange[0] + MULBERRY.next() * (sizeRange[1] - sizeRange[0]),
+            baseSpeed: speed
+        };
+    }
+}

package/src/particles/types.ts

@@ -0,0 +1,10 @@
+export type ParticleMouseMode = 'attract' | 'repel' | 'connect' | 'none';
+
+export type NetworkParticle = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    radius: number;
+    baseSpeed: number;
+};

package/src/petals/consts.ts

@@ -0,0 +1,13 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const PETAL_COLORS: string[] = [
+    '#ffb7c5', // sakura pink
+    '#ffc0cb', // pink
+    '#ffd1dc', // pastel pink
+    '#ffe4e9', // light pink
+    '#fff0f3', // near white pink
+    '#f8c3cd', // rose pink
+    '#f4a7b9'  // deeper pink
+];

package/src/petals/index.ts

@@ -0,0 +1,10 @@
+import { Petals } from './layer';
+import type { PetalsConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createPetals(config?: PetalsConfig): Effect<PetalsConfig> {
+    return new Petals(config);
+}
+
+export type { PetalsConfig };
+export type { Petal } from './types';

package/src/petals/layer.ts

@@ -0,0 +1,174 @@
+import { Effect } from '../effect';
+import { MULBERRY, PETAL_COLORS } from './consts';
+import type { Petal } from './types';
+
+export interface PetalsConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly wind?: number;
+    readonly scale?: number;
+}
+
+export class Petals extends Effect<PetalsConfig> {
+    readonly #scale: number;
+    readonly #size: number;
+    #speed: number;
+    #wind: number;
+    readonly #colors: string[];
+    #maxCount: number;
+    #time: number = 0;
+    #petals: Petal[] = [];
+    #sprites: HTMLCanvasElement[] = [];
+
+    constructor(config: PetalsConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 100;
+        this.#size = (config.size ?? 24) * this.#scale;
+        this.#speed = config.speed ?? 0.7;
+        this.#wind = config.wind ?? 0.15;
+        this.#colors = config.colors ?? PETAL_COLORS;
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        this.#sprites = this.#createSprites();
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#petals.push(this.#createPetal(true));
+        }
+    }
+
+    configure(config: Partial<PetalsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.wind !== undefined) {
+            this.#wind = config.wind;
+        }
+    }
+
+    tick(dt: number, _width: number, height: number): void {
+        const speedFactor = (height / 540) / this.#speed;
+
+        this.#time += 0.012 * dt;
+
+        const globalWind = Math.sin(this.#time * 0.4) * 0.3
+            + Math.sin(this.#time * 1.1 + 1.5) * 0.15
+            + Math.sin(this.#time * 2.7) * 0.08;
+
+        for (let index = 0; index < this.#petals.length; index++) {
+            const petal = this.#petals[index];
+
+            const swing = Math.sin(this.#time * petal.swingFrequency + petal.swingOffset) * petal.swingAmplitude;
+
+            petal.x += (swing + (this.#wind + globalWind * 0.4) * petal.depth) * dt / (3000 * speedFactor);
+            petal.y += (petal.fallSpeed * 1.5 + petal.depth * 0.5) * dt / (600 * speedFactor);
+
+            petal.rotation += petal.rotationSpeed * dt;
+            petal.flipAngle += petal.flipSpeed * dt;
+
+            if (petal.x > 1.15 || petal.x < -0.15 || petal.y > 1.05) {
+                const recycled = this.#createPetal(false);
+
+                if (this.#wind + globalWind > 0.1) {
+                    recycled.x = -0.15;
+                    recycled.y = MULBERRY.next() * 0.6;
+                } else {
+                    recycled.x = MULBERRY.next();
+                    recycled.y = -0.05 - MULBERRY.next() * 0.15;
+                }
+
+                this.#petals[index] = recycled;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        for (const petal of this.#petals) {
+            const px = petal.x * width;
+            const py = petal.y * height;
+            const displaySize = petal.size * petal.depth;
+            const scaleX = Math.cos(petal.flipAngle);
+            const cos = Math.cos(petal.rotation);
+            const sin = Math.sin(petal.rotation);
+
+            ctx.setTransform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
+            ctx.globalAlpha = 0.4 + petal.depth * 0.6;
+            ctx.drawImage(
+                this.#sprites[petal.colorIndex % this.#sprites.length],
+                -displaySize / 2,
+                -displaySize / 2,
+                displaySize,
+                displaySize
+            );
+        }
+
+        ctx.resetTransform();
+        ctx.globalAlpha = 1;
+    }
+
+    #createSprites(): HTMLCanvasElement[] {
+        const sprites: HTMLCanvasElement[] = [];
+
+        for (const color of this.#colors) {
+            sprites.push(this.#createPetalSprite(color));
+        }
+
+        return sprites;
+    }
+
+    #createPetalSprite(color: string): HTMLCanvasElement {
+        const size = 64;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext('2d')!;
+
+        const cx = size / 2;
+        const cy = size / 2;
+        const hw = size * 0.28;
+        const hh = size * 0.38;
+
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - hh);
+        ctx.bezierCurveTo(cx + hw * 1.4, cy - hh * 0.6, cx + hw * 1.1, cy + hh * 0.3, cx, cy + hh);
+        ctx.bezierCurveTo(cx - hw * 1.1, cy + hh * 0.3, cx - hw * 1.4, cy - hh * 0.6, cx, cy - hh);
+        ctx.fill();
+
+        ctx.strokeStyle = 'rgba(200, 100, 120, 0.15)';
+        ctx.lineWidth = 0.6;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - hh * 0.6);
+        ctx.quadraticCurveTo(cx + 1, cy, cx, cy + hh * 0.7);
+        ctx.stroke();
+
+        return canvas;
+    }
+
+    #createPetal(initialSpread: boolean): Petal {
+        const depth = 0.5 + MULBERRY.next() * 0.5;
+
+        return {
+            x: MULBERRY.next(),
+            y: initialSpread ? MULBERRY.next() * 2 - 1 : -0.05 - MULBERRY.next() * 0.15,
+            size: (MULBERRY.next() * 0.4 + 0.6) * this.#size,
+            depth,
+            rotation: MULBERRY.next() * Math.PI * 2,
+            rotationSpeed: (MULBERRY.next() - 0.5) * 0.03,
+            flipAngle: MULBERRY.next() * Math.PI * 2,
+            flipSpeed: 0.015 + MULBERRY.next() * 0.03,
+            swingAmplitude: 0.5 + MULBERRY.next() * 1.0,
+            swingFrequency: 0.4 + MULBERRY.next() * 1.2,
+            swingOffset: MULBERRY.next() * Math.PI * 2,
+            fallSpeed: 0.2 + MULBERRY.next() * 0.5,
+            colorIndex: Math.floor(MULBERRY.next() * this.#colors.length)
+        };
+    }
+}

package/src/petals/types.ts

@@ -0,0 +1,15 @@
+export type Petal = {
+    x: number;
+    y: number;
+    size: number;
+    depth: number;
+    rotation: number;
+    rotationSpeed: number;
+    flipAngle: number;
+    flipSpeed: number;
+    swingAmplitude: number;
+    swingFrequency: number;
+    swingOffset: number;
+    fallSpeed: number;
+    colorIndex: number;
+};

package/src/plasma/consts.ts

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

package/src/plasma/index.ts

@@ -0,0 +1,10 @@
+import { Plasma } from './layer';
+import type { PlasmaConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createPlasma(config?: PlasmaConfig): Effect<PlasmaConfig> {
+    return new Plasma(config);
+}
+
+export type { PlasmaConfig };
+export type { PlasmaColor } from './types';