@basmilius/sparkle 2.3.0 → 2.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@basmilius/sparkle",
     "license": "MIT",
-    "version": "2.3.0",
+    "version": "2.5.0",
     "author": {
         "email": "bas@mili.us",
         "name": "Bas Milius",

package/src/balloons/layer.ts

@@ -90,7 +90,8 @@ export class Balloons extends Effect<BalloonsConfig> {
             const cos = Math.cos(balloon.rotation);
             const sin = Math.sin(balloon.rotation);
 
-            ctx.setTransform(cos, sin, -sin, cos, px, py);
+            ctx.save();
+            ctx.transform(cos, sin, -sin, cos, px, py);
 
             const gradient = ctx.createRadialGradient(
                 -rx * 0.3, -ry * 0.3, rx * 0.1,
@@ -142,9 +143,9 @@ export class Balloons extends Effect<BalloonsConfig> {
             ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 0.4)`;
             ctx.lineWidth = 1;
             ctx.stroke();
-        }
 
-        ctx.resetTransform();
+            ctx.restore();
+        }
     }
 
     #createBalloon(initialSpread: boolean): Balloon {

package/src/black-hole/consts.ts

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

package/src/black-hole/index.ts

@@ -0,0 +1,10 @@
+import { BlackHole } from './layer';
+import type { BlackHoleConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createBlackHole(config?: BlackHoleConfig): Effect<BlackHoleConfig> {
+    return new BlackHole(config);
+}
+
+export type { BlackHoleConfig };
+export type { BlackHoleParticle } from './types';

package/src/black-hole/layer.ts

@@ -0,0 +1,193 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { BlackHoleParticle } from './types';
+
+export interface BlackHoleConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly size?: number;
+    readonly scale?: number;
+}
+
+export class BlackHole extends Effect<BlackHoleConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #colorR: number;
+    #colorG: number;
+    #colorB: number;
+    readonly #baseSize: number;
+    #particles: BlackHoleParticle[] = [];
+    #maxCount: number;
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: BlackHoleConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#baseSize = (config.size ?? 2) * this.#scale;
+        this.#maxCount = config.count ?? 300;
+
+        const parsed = this.#parseHex(config.color ?? '#6644ff');
+        this.#colorR = parsed[0];
+        this.#colorG = parsed[1];
+        this.#colorB = parsed[2];
+
+        if (typeof globalThis.innerWidth !== 'undefined' && globalThis.innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+    }
+
+    configure(config: Partial<BlackHoleConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+
+        if (config.color !== undefined) {
+            const parsed = this.#parseHex(config.color);
+            this.#colorR = parsed[0];
+            this.#colorG = parsed[1];
+            this.#colorB = parsed[2];
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized && width > 0 && height > 0) {
+            this.#initialized = true;
+            this.#particles = [];
+
+            for (let i = 0; i < this.#maxCount; ++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) * 0.9;
+        const eventHorizon = 24 * this.#scale;
+
+        for (let i = 0; i < this.#particles.length; ++i) {
+            const particle = this.#particles[i];
+            const normalizedRadius = particle.radius / maxRadius;
+
+            particle.angle += particle.angularSpeed * this.#speed * (1 + (1 - normalizedRadius) * 4) * dt * 0.005;
+            particle.radius -= particle.radialSpeed * this.#speed * (1 + (1 - normalizedRadius) * 3) * dt * 0.15;
+
+            if (particle.radius <= eventHorizon) {
+                this.#particles[i] = this.#createParticle(false);
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const cx = width / 2;
+        const cy = height / 2;
+        const maxRadius = Math.sqrt(cx * cx + cy * cy) * 0.9;
+        const eventHorizon = 24 * this.#scale;
+        const cr = this.#colorR;
+        const cg = this.#colorG;
+        const cb = this.#colorB;
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = 'rgb(2, 0, 10)';
+        ctx.fillRect(0, 0, width, height);
+
+        const accretionRadius = eventHorizon * 6;
+        const accretionGlow = ctx.createRadialGradient(cx, cy, eventHorizon * 0.5, cx, cy, accretionRadius);
+        accretionGlow.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, 0.0)`);
+        accretionGlow.addColorStop(0.4, `rgba(${cr}, ${cg}, ${cb}, 0.12)`);
+        accretionGlow.addColorStop(0.7, `rgba(255, 200, 100, 0.08)`);
+        accretionGlow.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, accretionRadius, 0, Math.PI * 2);
+        ctx.fillStyle = accretionGlow;
+        ctx.fill();
+
+        for (const particle of this.#particles) {
+            const px = cx + Math.cos(particle.angle) * particle.radius;
+            const py = cy + Math.sin(particle.angle) * particle.radius;
+
+            const normalizedRadius = Math.max(0, Math.min(1, particle.radius / maxRadius));
+            const proximity = 1 - normalizedRadius;
+
+            const r = Math.round(cr + (255 - cr) * proximity * 0.8);
+            const g = Math.round(cg + (255 - cg) * proximity * 0.5);
+            const b = Math.round(cb + (255 - cb) * proximity * 0.3);
+
+            const alpha = Math.max(0.05, Math.min(1, particle.brightness * (0.2 + proximity * 0.8)));
+            const particleSize = Math.max(0.3, this.#baseSize * (0.4 + proximity * 0.6));
+
+            ctx.globalAlpha = alpha;
+            ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+            ctx.beginPath();
+            ctx.arc(px, py, particleSize, 0, Math.PI * 2);
+            ctx.fill();
+
+            if (proximity > 0.6) {
+                ctx.globalAlpha = alpha * 0.3;
+                ctx.beginPath();
+                ctx.arc(px, py, particleSize * 3, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+
+        const holeGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, eventHorizon);
+        holeGrad.addColorStop(0, 'rgb(0, 0, 0)');
+        holeGrad.addColorStop(0.7, 'rgb(0, 0, 0)');
+        holeGrad.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+        ctx.fillStyle = holeGrad;
+        ctx.beginPath();
+        ctx.arc(cx, cy, eventHorizon, 0, Math.PI * 2);
+        ctx.fill();
+
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+        ctx.globalCompositeOperation = 'source-over';
+    }
+
+    #createParticle(spread: boolean): BlackHoleParticle {
+        const maxRadius = Math.sqrt((this.#width / 2) ** 2 + (this.#height / 2) ** 2) * 0.9;
+        const eventHorizon = 24 * this.#scale;
+
+        const angle = MULBERRY.next() * Math.PI * 2;
+        const radius = spread
+            ? eventHorizon + MULBERRY.next() * (maxRadius - eventHorizon)
+            : maxRadius * (0.75 + MULBERRY.next() * 0.25);
+
+        return {
+            angle,
+            radius,
+            angularSpeed: 0.4 + MULBERRY.next() * 1.2,
+            radialSpeed: 0.3 + MULBERRY.next() * 0.8,
+            size: 0.5 + MULBERRY.next() * 1.5,
+            brightness: 0.4 + MULBERRY.next() * 0.6
+        };
+    }
+
+    #parseHex(hex: string): [number, number, number] {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+        if (!result) {
+            return [102, 68, 255];
+        }
+
+        return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
+    }
+}

package/src/black-hole/types.ts

@@ -0,0 +1,8 @@
+export interface BlackHoleParticle {
+    angle: number;
+    radius: number;
+    angularSpeed: number;
+    radialSpeed: number;
+    size: number;
+    brightness: number;
+}

package/src/boids/consts.ts

@@ -0,0 +1,8 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(59);
+
+export const PERCEPTION_RADIUS = 80;
+export const SEPARATION_RADIUS = 25;
+export const MAX_SPEED = 2.5;
+export const MAX_FORCE = 0.08;

package/src/boids/index.ts

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

package/src/boids/layer.ts

@@ -0,0 +1,245 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { MAX_FORCE, MAX_SPEED, MULBERRY, PERCEPTION_RADIUS, SEPARATION_RADIUS } from './consts';
+import type { Boid } from './types';
+
+export interface BoidsConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly separation?: number;
+    readonly alignment?: number;
+    readonly cohesion?: number;
+    readonly color?: string;
+    readonly size?: number;
+    readonly scale?: number;
+}
+
+export class Boids extends Effect<BoidsConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #separation: number;
+    #alignment: number;
+    #cohesion: number;
+    readonly #colorR: number;
+    readonly #colorG: number;
+    readonly #colorB: number;
+    readonly #size: number;
+    readonly #count: number;
+    #boids: Boid[] = [];
+    #width: number = 800;
+    #height: number = 600;
+    #initialized: boolean = false;
+
+    constructor(config: BoidsConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#separation = config.separation ?? 1;
+        this.#alignment = config.alignment ?? 1;
+        this.#cohesion = config.cohesion ?? 1;
+        this.#size = (config.size ?? 6) * this.#scale;
+        this.#count = config.count ?? 80;
+
+        const parsed = parseColor(config.color ?? '#44aaff');
+        this.#colorR = parsed.r;
+        this.#colorG = parsed.g;
+        this.#colorB = parsed.b;
+    }
+
+    configure(config: Partial<BoidsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.separation !== undefined) {
+            this.#separation = config.separation;
+        }
+        if (config.alignment !== undefined) {
+            this.#alignment = config.alignment;
+        }
+        if (config.cohesion !== undefined) {
+            this.#cohesion = config.cohesion;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized && width > 0 && height > 0) {
+            this.#initialized = true;
+            this.#boids = [];
+            const count = innerWidth < 991 ? Math.floor(this.#count / 2) : this.#count;
+            for (let i = 0; i < count; i++) {
+                this.#boids.push(this.#createBoid());
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const cellSize = PERCEPTION_RADIUS;
+        const grid = new Map<string, Boid[]>();
+
+        for (const boid of this.#boids) {
+            const cellX = Math.floor(boid.x / cellSize);
+            const cellY = Math.floor(boid.y / cellSize);
+            const key = `${cellX},${cellY}`;
+            let cell = grid.get(key);
+            if (!cell) {
+                cell = [];
+                grid.set(key, cell);
+            }
+            cell.push(boid);
+        }
+
+        const speedFactor = this.#speed * dt / 16;
+        const maxSpeed = MAX_SPEED * this.#speed;
+        const maxForce = MAX_FORCE * this.#speed;
+        const perceptionR2 = PERCEPTION_RADIUS * PERCEPTION_RADIUS;
+        const separationR2 = SEPARATION_RADIUS * SEPARATION_RADIUS;
+
+        for (const boid of this.#boids) {
+            const cellX = Math.floor(boid.x / cellSize);
+            const cellY = Math.floor(boid.y / cellSize);
+
+            let sepX = 0, sepY = 0, sepCount = 0;
+            let alignVX = 0, alignVY = 0, alignCount = 0;
+            let cohX = 0, cohY = 0, cohCount = 0;
+
+            for (let dx = -1; dx <= 1; dx++) {
+                for (let dy = -1; dy <= 1; dy++) {
+                    const neighbors = grid.get(`${cellX + dx},${cellY + dy}`);
+                    if (!neighbors) {
+                        continue;
+                    }
+
+                    for (const other of neighbors) {
+                        if (other === boid) {
+                            continue;
+                        }
+
+                        const diffX = boid.x - other.x;
+                        const diffY = boid.y - other.y;
+                        const dist2 = diffX * diffX + diffY * diffY;
+
+                        if (dist2 < perceptionR2) {
+                            alignVX += other.vx;
+                            alignVY += other.vy;
+                            alignCount++;
+
+                            cohX += other.x;
+                            cohY += other.y;
+                            cohCount++;
+                        }
+
+                        if (dist2 < separationR2 && dist2 > 0) {
+                            const dist = Math.sqrt(dist2);
+                            sepX += diffX / dist;
+                            sepY += diffY / dist;
+                            sepCount++;
+                        }
+                    }
+                }
+            }
+
+            let forceX = 0;
+            let forceY = 0;
+
+            if (sepCount > 0) {
+                const fx = sepX / sepCount;
+                const fy = sepY / sepCount;
+                const len = Math.sqrt(fx * fx + fy * fy) || 1;
+                forceX += (fx / len * maxSpeed - boid.vx) * maxForce * this.#separation;
+                forceY += (fy / len * maxSpeed - boid.vy) * maxForce * this.#separation;
+            }
+
+            if (alignCount > 0) {
+                const fx = alignVX / alignCount;
+                const fy = alignVY / alignCount;
+                const len = Math.sqrt(fx * fx + fy * fy) || 1;
+                forceX += (fx / len * maxSpeed - boid.vx) * maxForce * this.#alignment;
+                forceY += (fy / len * maxSpeed - boid.vy) * maxForce * this.#alignment;
+            }
+
+            if (cohCount > 0) {
+                const targetX = cohX / cohCount;
+                const targetY = cohY / cohCount;
+                const diffX = targetX - boid.x;
+                const diffY = targetY - boid.y;
+                const len = Math.sqrt(diffX * diffX + diffY * diffY) || 1;
+                forceX += (diffX / len * maxSpeed - boid.vx) * maxForce * this.#cohesion;
+                forceY += (diffY / len * maxSpeed - boid.vy) * maxForce * this.#cohesion;
+            }
+
+            boid.vx += forceX * speedFactor;
+            boid.vy += forceY * speedFactor;
+
+            const speed = Math.sqrt(boid.vx * boid.vx + boid.vy * boid.vy);
+            if (speed > maxSpeed) {
+                boid.vx = (boid.vx / speed) * maxSpeed;
+                boid.vy = (boid.vy / speed) * maxSpeed;
+            } else if (speed < 0.5) {
+                boid.vx += (MULBERRY.next() - 0.5) * 0.2;
+                boid.vy += (MULBERRY.next() - 0.5) * 0.2;
+            }
+
+            boid.x += boid.vx * speedFactor;
+            boid.y += boid.vy * speedFactor;
+
+            boid.angle = Math.atan2(boid.vy, boid.vx);
+
+            if (boid.x < -10) { boid.x += width + 10; }
+            if (boid.x > width + 10) { boid.x -= width + 10; }
+            if (boid.y < -10) { boid.y += height + 10; }
+            if (boid.y > height + 10) { boid.y -= height + 10; }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, _width: number, _height: number): void {
+        const size = this.#size;
+        const r = this.#colorR;
+        const g = this.#colorG;
+        const b = this.#colorB;
+
+        ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+        ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 0.4)`;
+        ctx.lineWidth = 0.5;
+
+        for (const boid of this.#boids) {
+            const cos = Math.cos(boid.angle);
+            const sin = Math.sin(boid.angle);
+
+            ctx.save();
+            ctx.transform(cos, sin, -sin, cos, boid.x, boid.y);
+
+            ctx.beginPath();
+            ctx.moveTo(size, 0);
+            ctx.lineTo(-size * 0.6, -size * 0.45);
+            ctx.lineTo(-size * 0.3, 0);
+            ctx.lineTo(-size * 0.6, size * 0.45);
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+
+            ctx.restore();
+        }
+
+        ctx.globalAlpha = 1;
+    }
+
+    #createBoid(): Boid {
+        const angle = MULBERRY.next() * Math.PI * 2;
+        const speed = (MAX_SPEED * 0.5) + MULBERRY.next() * MAX_SPEED * 0.5;
+
+        return {
+            x: MULBERRY.next() * this.#width,
+            y: MULBERRY.next() * this.#height,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            angle
+        };
+    }
+}

package/src/boids/types.ts

@@ -0,0 +1,7 @@
+export type Boid = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    angle: number;
+};

package/src/butterflies/consts.ts

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

package/src/butterflies/index.ts

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