@basmilius/sparkle 1.0.0 → 2.1.0

package/src/matrix/layer.ts

@@ -0,0 +1,146 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { MATRIX_CHARS, MULBERRY } from './consts';
+import type { MatrixSimulationConfig } from './simulation';
+import type { MatrixColumn } from './types';
+
+export class MatrixLayer extends SimulationLayer {
+    readonly #scale: number;
+    readonly #speed: number;
+    readonly #fontSize: number;
+    readonly #trailLength: number;
+    readonly #colorRGB: [number, number, number];
+    #maxColumns: number;
+    #columns: MatrixColumn[] = [];
+    #respawnTimers: number[] = [];
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: MatrixSimulationConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxColumns = config.columns ?? 40;
+        this.#speed = config.speed ?? 1;
+        this.#fontSize = (config.fontSize ?? 14) * this.#scale;
+        this.#trailLength = config.trailLength ?? 20;
+        this.#colorRGB = hexToRGB(config.color ?? '#00ff41');
+
+        if (innerWidth < 991) {
+            this.#maxColumns = Math.floor(this.#maxColumns / 2);
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#columns = [];
+            this.#respawnTimers = [];
+
+            const columnWidth = this.#fontSize;
+            const totalSlots = Math.floor(width / columnWidth);
+            const columnCount = Math.min(this.#maxColumns, totalSlots);
+
+            for (let i = 0; i < columnCount; ++i) {
+                const column = this.#createColumn(totalSlots, height);
+                this.#columns.push(column);
+                this.#respawnTimers.push(0);
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const columnWidth = this.#fontSize;
+        const totalSlots = Math.floor(width / columnWidth);
+
+        for (let i = 0; i < this.#columns.length; ++i) {
+            if (this.#respawnTimers[i] > 0) {
+                this.#respawnTimers[i] -= dt;
+
+                if (this.#respawnTimers[i] <= 0) {
+                    this.#columns[i] = this.#createColumn(totalSlots, height);
+                }
+
+                continue;
+            }
+
+            const column = this.#columns[i];
+
+            column.y += column.speed * this.#speed * dt;
+
+            for (let ci = 0; ci < column.chars.length; ++ci) {
+                if (MULBERRY.next() < 0.03) {
+                    column.chars[ci] = MATRIX_CHARS[Math.floor(MULBERRY.next() * MATRIX_CHARS.length)];
+                }
+            }
+
+            const topOfTrail = column.y - (column.chars.length - 1) * this.#fontSize;
+
+            if (topOfTrail > height) {
+                this.#respawnTimers[i] = 10 + MULBERRY.next() * 60;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.fillStyle = 'rgb(0, 0, 0)';
+        ctx.fillRect(0, 0, width, height);
+
+        const [cr, cg, cb] = this.#colorRGB;
+
+        ctx.font = `${this.#fontSize}px monospace`;
+        ctx.textAlign = 'center';
+
+        for (const column of this.#columns) {
+            const charCount = column.chars.length;
+
+            for (let ci = 0; ci < charCount; ++ci) {
+                const charY = column.y - (charCount - 1 - ci) * this.#fontSize;
+
+                if (charY < -this.#fontSize || charY > height + this.#fontSize) {
+                    continue;
+                }
+
+                const isHead = ci === charCount - 1;
+
+                if (isHead) {
+                    const headAlpha = column.headBrightness;
+                    ctx.fillStyle = `rgba(255, 255, 255, ${headAlpha})`;
+                } else {
+                    const trailProgress = ci / (charCount - 1);
+                    const alpha = trailProgress * 0.8 + 0.05;
+                    ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${alpha})`;
+                }
+
+                ctx.fillText(column.chars[ci], column.x, charY);
+            }
+        }
+    }
+
+    #createColumn(totalSlots: number, height: number): MatrixColumn {
+        const columnWidth = this.#fontSize;
+        const slot = Math.floor(MULBERRY.next() * totalSlots);
+        const length = Math.floor(this.#trailLength * 0.5 + MULBERRY.next() * this.#trailLength);
+        const chars: string[] = [];
+
+        for (let ci = 0; ci < length; ++ci) {
+            chars.push(MATRIX_CHARS[Math.floor(MULBERRY.next() * MATRIX_CHARS.length)]);
+        }
+
+        return {
+            x: slot * columnWidth + columnWidth / 2,
+            y: -(MULBERRY.next() * height),
+            speed: 1.5 + MULBERRY.next() * 3,
+            chars,
+            length,
+            headBrightness: 0.8 + MULBERRY.next() * 0.2
+        };
+    }
+}

package/src/matrix/simulation.ts

@@ -0,0 +1,18 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { MatrixLayer } from './layer';
+
+export interface MatrixSimulationConfig {
+    readonly columns?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly fontSize?: number;
+    readonly trailLength?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class MatrixSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: MatrixSimulationConfig = {}) {
+        super(canvas, new MatrixLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/matrix/types.ts

@@ -0,0 +1,8 @@
+export type MatrixColumn = {
+    x: number;
+    y: number;
+    speed: number;
+    chars: string[];
+    length: number;
+    headBrightness: number;
+};

package/src/orbits/consts.ts

@@ -0,0 +1,13 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const ORBIT_COLORS: string[] = [
+    '#60a5fa', // blue
+    '#a78bfa', // purple
+    '#f472b6', // pink
+    '#34d399', // emerald
+    '#fbbf24', // amber
+    '#fb923c', // orange
+    '#38bdf8'  // sky
+];

package/src/orbits/index.ts

@@ -0,0 +1,4 @@
+export { OrbitLayer } from './layer';
+export { OrbitSimulation } from './simulation';
+export type { OrbitSimulationConfig } from './simulation';
+export type { OrbitalCenter, Orbiter } from './types';

package/src/orbits/layer.ts

@@ -0,0 +1,183 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { MULBERRY, ORBIT_COLORS } from './consts';
+import type { OrbitSimulationConfig } from './simulation';
+import type { OrbitalCenter, Orbiter } from './types';
+
+export class OrbitLayer extends SimulationLayer {
+    readonly #centerCount: number;
+    readonly #orbitersPerCenter: number;
+    readonly #speed: number;
+    readonly #colors: string[];
+    readonly #trailLength: number;
+    readonly #showCenters: boolean;
+    readonly #scale: number;
+    #centers: OrbitalCenter[] = [];
+    #orbiters: Orbiter[] = [];
+    #time: number = 0;
+    #initialized: boolean = false;
+
+    constructor(config: OrbitSimulationConfig = {}) {
+        super();
+
+        this.#centerCount = config.centers ?? 3;
+        this.#orbitersPerCenter = config.orbitersPerCenter ?? 8;
+        this.#speed = config.speed ?? 1;
+        this.#colors = config.colors ?? ORBIT_COLORS;
+        this.#trailLength = config.trailLength ?? 15;
+        this.#showCenters = config.showCenters ?? true;
+        this.#scale = config.scale ?? 1;
+    }
+
+    onResize(_width: number, _height: number): void {
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#centers = [];
+            this.#orbiters = [];
+
+            for (let i = 0; i < this.#centerCount; i++) {
+                this.#centers.push({
+                    x: 0.15 + MULBERRY.next() * 0.7,
+                    y: 0.15 + MULBERRY.next() * 0.7
+                });
+            }
+
+            const count = innerWidth < 991
+                ? Math.floor(this.#orbitersPerCenter / 2)
+                : this.#orbitersPerCenter;
+
+            for (let ci = 0; ci < this.#centers.length; ci++) {
+                for (let oi = 0; oi < count; oi++) {
+                    this.#orbiters.push(this.#createOrbiter(ci));
+                }
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.01 * dt * this.#speed;
+
+        for (const orbiter of this.#orbiters) {
+            const center = this.#centers[orbiter.centerIndex];
+            const cx = center.x * width;
+            const cy = center.y * height;
+
+            orbiter.angle += orbiter.angularSpeed * dt * this.#speed;
+
+            const cosAngle = Math.cos(orbiter.angle);
+            const sinAngle = Math.sin(orbiter.angle);
+            const cosTilt = Math.cos(orbiter.tilt);
+
+            const localX = cosAngle * orbiter.radiusX * this.#scale;
+            const localY = sinAngle * orbiter.radiusY * this.#scale * cosTilt;
+
+            const rotatedX = localX * Math.cos(orbiter.tilt * 0.3) - localY * Math.sin(orbiter.tilt * 0.3);
+            const rotatedY = localX * Math.sin(orbiter.tilt * 0.3) + localY * Math.cos(orbiter.tilt * 0.3);
+
+            const px = cx + rotatedX;
+            const py = cy + rotatedY;
+
+            orbiter.trail.push({x: px, y: py});
+
+            if (orbiter.trail.length > this.#trailLength) {
+                orbiter.trail.shift();
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        if (this.#showCenters) {
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (const center of this.#centers) {
+                const cx = center.x * width;
+                const cy = center.y * height;
+                const glowRadius = 30 * this.#scale;
+
+                const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowRadius);
+                gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
+                gradient.addColorStop(0.4, 'rgba(200, 200, 255, 0.1)');
+                gradient.addColorStop(1, 'rgba(200, 200, 255, 0)');
+
+                ctx.globalAlpha = 1;
+                ctx.beginPath();
+                ctx.arc(cx, cy, glowRadius, 0, Math.PI * 2);
+                ctx.fillStyle = gradient;
+                ctx.fill();
+            }
+
+            ctx.globalCompositeOperation = 'source-over';
+        }
+
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (const orbiter of this.#orbiters) {
+            const [cr, cg, cb] = hexToRGB(orbiter.color);
+
+            if (orbiter.trail.length > 1) {
+                for (let ti = 0; ti < orbiter.trail.length - 1; ti++) {
+                    const progress = (ti + 1) / orbiter.trail.length;
+                    const trailAlpha = progress * 0.5;
+                    const trailWidth = orbiter.size * progress * this.#scale;
+
+                    if (trailAlpha < 0.01) {
+                        continue;
+                    }
+
+                    ctx.globalAlpha = trailAlpha;
+                    ctx.strokeStyle = `rgb(${cr}, ${cg}, ${cb})`;
+                    ctx.lineWidth = trailWidth;
+                    ctx.beginPath();
+                    ctx.moveTo(orbiter.trail[ti].x, orbiter.trail[ti].y);
+                    ctx.lineTo(orbiter.trail[ti + 1].x, orbiter.trail[ti + 1].y);
+                    ctx.stroke();
+                }
+            }
+
+            if (orbiter.trail.length > 0) {
+                const head = orbiter.trail[orbiter.trail.length - 1];
+                const headSize = orbiter.size * this.#scale;
+
+                const glow = ctx.createRadialGradient(
+                    head.x, head.y, 0,
+                    head.x, head.y, headSize * 3
+                );
+                glow.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, 0.9)`);
+                glow.addColorStop(0.3, `rgba(${cr}, ${cg}, ${cb}, 0.3)`);
+                glow.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+                ctx.globalAlpha = 1;
+                ctx.beginPath();
+                ctx.arc(head.x, head.y, headSize * 3, 0, Math.PI * 2);
+                ctx.fillStyle = glow;
+                ctx.fill();
+
+                ctx.beginPath();
+                ctx.arc(head.x, head.y, headSize, 0, Math.PI * 2);
+                ctx.fillStyle = `rgb(${cr}, ${cg}, ${cb})`;
+                ctx.fill();
+            }
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #createOrbiter(centerIndex: number): Orbiter {
+        const minRadius = 40;
+        const maxRadius = 160;
+
+        return {
+            centerIndex,
+            angle: MULBERRY.next() * Math.PI * 2,
+            angularSpeed: 0.01 + MULBERRY.next() * 0.03,
+            radiusX: minRadius + MULBERRY.next() * (maxRadius - minRadius),
+            radiusY: (minRadius + MULBERRY.next() * (maxRadius - minRadius)) * (0.3 + MULBERRY.next() * 0.7),
+            tilt: MULBERRY.next() * Math.PI,
+            size: 1.5 + MULBERRY.next() * 2.5,
+            color: this.#colors[Math.floor(MULBERRY.next() * this.#colors.length)],
+            trail: []
+        };
+    }
+}

package/src/orbits/simulation.ts

@@ -0,0 +1,19 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { OrbitLayer } from './layer';
+
+export interface OrbitSimulationConfig {
+    readonly centers?: number;
+    readonly orbitersPerCenter?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly trailLength?: number;
+    readonly showCenters?: boolean;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class OrbitSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: OrbitSimulationConfig = {}) {
+        super(canvas, new OrbitLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/orbits/types.ts

@@ -0,0 +1,16 @@
+export type OrbitalCenter = {
+    x: number;
+    y: number;
+};
+
+export type Orbiter = {
+    centerIndex: number;
+    angle: number;
+    angularSpeed: number;
+    radiusX: number;
+    radiusY: number;
+    tilt: number;
+    size: number;
+    color: string;
+    trail: {x: number; y: number}[];
+};

package/src/particles/consts.ts

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

package/src/particles/index.ts

@@ -0,0 +1,4 @@
+export { ParticleLayer } from './layer';
+export { ParticleSimulation } from './simulation';
+export type { ParticleSimulationConfig } from './simulation';
+export type { NetworkParticle, ParticleMouseMode } from './types';