@basmilius/sparkle 2.3.0 → 2.5.0

package/src/lava/layer.ts

@@ -0,0 +1,152 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { LavaBlob } from './types';
+
+export interface LavaConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly scale?: number;
+}
+
+const DEFAULT_COLORS = ['#ff4400', '#ff8800', '#ffcc00', '#ff0066'];
+const SPRITE_SIZE = 512;
+const SPRITE_CENTER = SPRITE_SIZE / 2;
+const SPRITE_RADIUS = SPRITE_SIZE / 2;
+
+export class Lava extends Effect<LavaConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #count: number;
+    #colors: string[];
+    #blobs: LavaBlob[] = [];
+    #sprites: HTMLCanvasElement[] = [];
+    #time: number = 0;
+
+    constructor(config: LavaConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#count = config.count ?? 12;
+        this.#colors = config.colors ?? [...DEFAULT_COLORS];
+
+        if (typeof innerWidth !== 'undefined' && innerWidth < 991) {
+            this.#count = Math.floor(this.#count * 0.7);
+        }
+
+        this.#sprites = this.#createSprites();
+
+        for (let index = 0; index < this.#count; index++) {
+            this.#blobs.push(this.#createBlob());
+        }
+    }
+
+    configure(config: Partial<LavaConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+
+        if (config.count !== undefined) {
+            this.#count = config.count;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.001 * dt * this.#speed;
+
+        for (const blob of this.#blobs) {
+            blob.phase += 0.008 * dt * blob.speed * this.#speed;
+            blob.driftPhase += 0.0015 * dt * this.#speed;
+
+            blob.y = blob.baseY + Math.sin(blob.phase) * blob.amplitude;
+            blob.x += Math.sin(blob.driftPhase) * blob.driftX * 0.0001 * dt;
+
+            if (blob.x < -0.15) {
+                blob.x = 1.15;
+            } else if (blob.x > 1.15) {
+                blob.x = -0.15;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalCompositeOperation = 'screen';
+        ctx.filter = 'blur(20px)';
+
+        const canvasScale = Math.min(width, height) / 600;
+
+        for (const blob of this.#blobs) {
+            const px = blob.x * width;
+            const py = blob.y * height;
+            const displayRadius = blob.radius * this.#scale * canvasScale;
+            const displaySize = displayRadius * 2;
+
+            ctx.globalAlpha = 0.6 + 0.4 * Math.sin(this.#time * 3 + blob.phase);
+            ctx.drawImage(
+                this.#sprites[blob.colorIndex],
+                px - displayRadius,
+                py - displayRadius,
+                displaySize,
+                displaySize
+            );
+        }
+
+        ctx.filter = '';
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+    }
+
+    #createSprites(): HTMLCanvasElement[] {
+        const sprites: HTMLCanvasElement[] = [];
+
+        for (const color of this.#colors) {
+            const {r, g, b} = parseColor(color);
+            const canvas = document.createElement('canvas');
+            canvas.width = SPRITE_SIZE;
+            canvas.height = SPRITE_SIZE;
+            const spriteCtx = canvas.getContext('2d')!;
+
+            const gradient = spriteCtx.createRadialGradient(
+                SPRITE_CENTER, SPRITE_CENTER, 0,
+                SPRITE_CENTER, SPRITE_CENTER, SPRITE_RADIUS
+            );
+
+            gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1)`);
+            gradient.addColorStop(0.3, `rgba(${r}, ${g}, ${b}, 0.8)`);
+            gradient.addColorStop(0.6, `rgba(${r}, ${g}, ${b}, 0.4)`);
+            gradient.addColorStop(0.85, `rgba(${r}, ${g}, ${b}, 0.1)`);
+            gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+            spriteCtx.fillStyle = gradient;
+            spriteCtx.beginPath();
+            spriteCtx.arc(SPRITE_CENTER, SPRITE_CENTER, SPRITE_RADIUS, 0, Math.PI * 2);
+            spriteCtx.fill();
+
+            sprites.push(canvas);
+        }
+
+        return sprites;
+    }
+
+    #createBlob(): LavaBlob {
+        const minRadius = 80 * this.#scale;
+        const maxRadius = 160 * this.#scale;
+
+        return {
+            x: MULBERRY.next(),
+            y: 0.2 + MULBERRY.next() * 0.6,
+            baseY: 0.2 + MULBERRY.next() * 0.6,
+            radius: minRadius + MULBERRY.next() * (maxRadius - minRadius),
+            colorIndex: Math.floor(MULBERRY.next() * this.#colors.length),
+            speed: 0.5 + MULBERRY.next() * 1.5,
+            phase: MULBERRY.next() * Math.PI * 2,
+            amplitude: 0.05 + MULBERRY.next() * 0.2,
+            directionY: MULBERRY.next() > 0.5 ? 1 : -1,
+            driftX: (MULBERRY.next() - 0.5) * 2,
+            driftPhase: MULBERRY.next() * Math.PI * 2
+        };
+    }
+}

package/src/lava/types.ts

@@ -0,0 +1,13 @@
+export type LavaBlob = {
+    x: number;
+    y: number;
+    radius: number;
+    colorIndex: number;
+    speed: number;
+    phase: number;
+    amplitude: number;
+    baseY: number;
+    directionY: number;
+    driftX: number;
+    driftPhase: number;
+};

package/src/leaves/layer.ts

@@ -98,7 +98,8 @@ export class Leaves extends Effect<LeavesConfig> {
             const cos = Math.cos(leaf.rotation);
             const sin = Math.sin(leaf.rotation);
 
-            ctx.setTransform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
+            ctx.save();
+            ctx.transform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
             ctx.globalAlpha = 0.3 + leaf.depth * 0.7;
             ctx.drawImage(
                 this.#sprites[leaf.colorIndex % this.#sprites.length],
@@ -107,9 +108,9 @@ export class Leaves extends Effect<LeavesConfig> {
                 displaySize,
                 displaySize
             );
+            ctx.restore();
         }
 
-        ctx.resetTransform();
         ctx.globalAlpha = 1;
     }
 

package/src/murmuration/consts.ts

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

package/src/murmuration/index.ts

@@ -0,0 +1,10 @@
+import { Murmuration } from './layer';
+import type { MurmurationConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createMurmuration(config?: MurmurationConfig): Effect<MurmurationConfig> {
+    return new Murmuration(config);
+}
+
+export type { MurmurationConfig };
+export type { MurmurationBird } from './types';

package/src/murmuration/layer.ts

@@ -0,0 +1,279 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { MurmurationBird } from './types';
+
+const CELL_SIZE = 50;
+const MAX_SPEED = 4;
+const BOUNDARY_MARGIN = 0.1;
+
+export interface MurmurationConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly cohesion?: number;
+    readonly alignment?: number;
+    readonly separation?: number;
+    readonly turnRadius?: number;
+    readonly color?: string;
+    readonly scale?: number;
+}
+
+export class Murmuration extends Effect<MurmurationConfig> {
+    readonly #scale: number;
+    readonly #color: string;
+    #speed: number;
+    #cohesion: number;
+    #alignment: number;
+    #separation: number;
+    #turnRadius: number;
+    #maxCount: number;
+    #time: number = 0;
+    #birds: MurmurationBird[] = [];
+    #grid: Map<number, MurmurationBird[]> = new Map();
+    #width: number = 960;
+    #height: number = 540;
+    #gridCols: number = 0;
+
+    constructor(config: MurmurationConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#cohesion = config.cohesion ?? 0.5;
+        this.#alignment = config.alignment ?? 0.8;
+        this.#separation = config.separation ?? 0.4;
+        this.#turnRadius = config.turnRadius ?? 0.7;
+        this.#color = config.color ?? '#1a1a2e';
+        this.#maxCount = config.count ?? 300;
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+    }
+
+    configure(config: Partial<MurmurationConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.cohesion !== undefined) {
+            this.#cohesion = config.cohesion;
+        }
+        if (config.alignment !== undefined) {
+            this.#alignment = config.alignment;
+        }
+        if (config.separation !== undefined) {
+            this.#separation = config.separation;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+        this.#gridCols = Math.ceil(width / CELL_SIZE);
+
+        this.#birds = [];
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#birds.push(this.#createBird());
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+        this.#gridCols = Math.ceil(width / CELL_SIZE);
+        this.#time += 0.001 * this.#speed * dt;
+
+        const dtFactor = dt / 16;
+        const speedFactor = this.#speed * dtFactor;
+
+        this.#buildGrid();
+
+        const waveX = Math.sin(this.#time * 1.7) * width * 0.3 + width * 0.5;
+        const waveForce = Math.sin(this.#time * 2.3) * 0.3 * this.#turnRadius;
+
+        for (const bird of this.#birds) {
+            let cohX = 0;
+            let cohY = 0;
+            let cohCount = 0;
+            let aliVx = 0;
+            let aliVy = 0;
+            let aliCount = 0;
+            let sepX = 0;
+            let sepY = 0;
+
+            const cellX = Math.floor(bird.x / CELL_SIZE);
+            const cellY = Math.floor(bird.y / CELL_SIZE);
+
+            for (let ox = -1; ox <= 1; ox++) {
+                for (let oy = -1; oy <= 1; oy++) {
+                    const key = (cellX + ox) + (cellY + oy) * this.#gridCols;
+                    const cell = this.#grid.get(key);
+
+                    if (!cell) {
+                        continue;
+                    }
+
+                    for (const other of cell) {
+                        if (other === bird) {
+                            continue;
+                        }
+
+                        const dx = other.x - bird.x;
+                        const dy = other.y - bird.y;
+                        const distSq = dx * dx + dy * dy;
+
+                        if (distSq > CELL_SIZE * CELL_SIZE) {
+                            continue;
+                        }
+
+                        const dist = Math.sqrt(distSq);
+
+                        cohX += other.x;
+                        cohY += other.y;
+                        cohCount++;
+
+                        aliVx += other.vx;
+                        aliVy += other.vy;
+                        aliCount++;
+
+                        if (dist < 15) {
+                            const repel = 1 / (dist + 0.1);
+                            sepX -= dx * repel;
+                            sepY -= dy * repel;
+                        }
+                    }
+                }
+            }
+
+            let ax = 0;
+            let ay = 0;
+
+            if (cohCount > 0) {
+                const centerX = cohX / cohCount;
+                const centerY = cohY / cohCount;
+                ax += (centerX - bird.x) * this.#cohesion * 0.001;
+                ay += (centerY - bird.y) * this.#cohesion * 0.001;
+            }
+
+            if (aliCount > 0) {
+                const avgVx = aliVx / aliCount;
+                const avgVy = aliVy / aliCount;
+                ax += (avgVx - bird.vx) * this.#alignment * 0.05;
+                ay += (avgVy - bird.vy) * this.#alignment * 0.05;
+            }
+
+            ax += sepX * this.#separation * 0.1;
+            ay += sepY * this.#separation * 0.1;
+
+            const waveDist = bird.x - waveX;
+            const waveInfluence = Math.exp(-(waveDist * waveDist) / (width * width * 0.02));
+            ay += waveForce * waveInfluence * speedFactor;
+
+            const marginX = width * BOUNDARY_MARGIN;
+            const marginY = height * BOUNDARY_MARGIN;
+
+            if (bird.x < marginX) {
+                ax += (marginX - bird.x) * 0.003;
+            } else if (bird.x > width - marginX) {
+                ax -= (bird.x - (width - marginX)) * 0.003;
+            }
+
+            if (bird.y < marginY) {
+                ay += (marginY - bird.y) * 0.003;
+            } else if (bird.y > height - marginY) {
+                ay -= (bird.y - (height - marginY)) * 0.003;
+            }
+
+            bird.vx += ax * speedFactor;
+            bird.vy += ay * speedFactor;
+
+            const speed = Math.sqrt(bird.vx * bird.vx + bird.vy * bird.vy);
+
+            if (speed > MAX_SPEED * this.#speed) {
+                const ratio = (MAX_SPEED * this.#speed) / speed;
+                bird.vx *= ratio;
+                bird.vy *= ratio;
+            } else if (speed < 0.5) {
+                const ratio = 0.5 / (speed + 0.001);
+                bird.vx *= ratio;
+                bird.vy *= ratio;
+            }
+
+            bird.x += bird.vx * speedFactor;
+            bird.y += bird.vy * speedFactor;
+
+            if (bird.x < -20) {
+                bird.x = width + 20;
+            } else if (bird.x > width + 20) {
+                bird.x = -20;
+            }
+
+            if (bird.y < -20) {
+                bird.y = height + 20;
+            } else if (bird.y > height + 20) {
+                bird.y = -20;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.fillStyle = this.#color;
+
+        for (const bird of this.#birds) {
+            const angle = Math.atan2(bird.vy, bird.vx);
+            const size = bird.size * this.#scale;
+
+            const cos = Math.cos(angle);
+            const sin = Math.sin(angle);
+
+            const tipX = bird.x + cos * size * 2;
+            const tipY = bird.y + sin * size * 2;
+
+            const leftX = bird.x + (-cos * size - sin * size);
+            const leftY = bird.y + (-sin * size + cos * size);
+
+            const rightX = bird.x + (-cos * size + sin * size);
+            const rightY = bird.y + (-sin * size - cos * size);
+
+            ctx.beginPath();
+            ctx.moveTo(tipX, tipY);
+            ctx.lineTo(leftX, leftY);
+            ctx.lineTo(bird.x - cos * size * 0.3, bird.y - sin * size * 0.3);
+            ctx.lineTo(rightX, rightY);
+            ctx.closePath();
+            ctx.fill();
+        }
+    }
+
+    #buildGrid(): void {
+        this.#grid.clear();
+
+        for (const bird of this.#birds) {
+            const cellX = Math.floor(bird.x / CELL_SIZE);
+            const cellY = Math.floor(bird.y / CELL_SIZE);
+            const key = cellX + cellY * this.#gridCols;
+
+            let cell = this.#grid.get(key);
+
+            if (!cell) {
+                cell = [];
+                this.#grid.set(key, cell);
+            }
+
+            cell.push(bird);
+        }
+    }
+
+    #createBird(): MurmurationBird {
+        const angle = MULBERRY.next() * Math.PI * 2;
+        const speed = 1 + MULBERRY.next() * 2;
+
+        return {
+            x: MULBERRY.next() * this.#width,
+            y: MULBERRY.next() * this.#height,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            size: 1.5 + MULBERRY.next() * 1.5
+        };
+    }
+}

package/src/murmuration/types.ts

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

package/src/nebula/consts.ts

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

package/src/nebula/index.ts

@@ -0,0 +1,10 @@
+import { Nebula } from './layer';
+import type { NebulaConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createNebula(config?: NebulaConfig): Effect<NebulaConfig> {
+    return new Nebula(config);
+}
+
+export type { NebulaConfig };
+export type { NebulaBlob, NebulaStar } from './types';

package/src/nebula/layer.ts

@@ -0,0 +1,150 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { NebulaBlob, NebulaStar } from './types';
+
+export interface NebulaConfig {
+    readonly starCount?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly scale?: number;
+}
+
+const DEFAULT_COLORS = ['#ff6b9d', '#c44dff', '#4d79ff', '#00d4ff'];
+
+export class Nebula extends Effect<NebulaConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #time: number = 0;
+    #colors: string[];
+    #blobs: NebulaBlob[] = [];
+    #stars: NebulaStar[] = [];
+    #maxStars: number;
+
+    constructor(config: NebulaConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 0.3;
+        this.#colors = config.colors ?? DEFAULT_COLORS;
+        this.#maxStars = config.starCount ?? 150;
+
+        if (typeof globalThis.innerWidth !== 'undefined' && globalThis.innerWidth < 991) {
+            this.#maxStars = Math.floor(this.#maxStars / 2);
+        }
+
+        this.#initBlobs();
+        this.#initStars();
+    }
+
+    configure(config: Partial<NebulaConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+
+        if (config.colors !== undefined) {
+            this.#colors = config.colors;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.001 * this.#speed * dt;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = 'rgb(2, 0, 20)';
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.globalCompositeOperation = 'screen';
+
+        for (const blob of this.#blobs) {
+            const cx = (blob.x + Math.sin(this.#time * blob.driftSpeedX + blob.driftOffsetX) * 0.12) * width;
+            const cy = (blob.y + Math.cos(this.#time * blob.driftSpeedY + blob.driftOffsetY) * 0.09) * height;
+            const radius = blob.radius * Math.min(width, height) * this.#scale;
+
+            const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+            const color = this.#colors[blob.colorIndex % this.#colors.length];
+            gradient.addColorStop(0, this.#colorWithAlpha(color, blob.opacity));
+            gradient.addColorStop(0.4, this.#colorWithAlpha(color, blob.opacity * 0.4));
+            gradient.addColorStop(1, this.#colorWithAlpha(color, 0));
+
+            ctx.globalAlpha = 1;
+            ctx.beginPath();
+            ctx.ellipse(cx, cy, radius, radius * (0.6 + blob.opacity * 0.4), this.#time * 0.05 * blob.driftSpeedX, 0, Math.PI * 2);
+            ctx.fillStyle = gradient;
+            ctx.fill();
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+
+        for (const star of this.#stars) {
+            const px = star.x * width;
+            const py = star.y * height;
+            const twinkle = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(this.#time * star.twinkleSpeed * 60 + star.twinkleOffset));
+            const alpha = star.brightness * twinkle;
+            const size = star.size * this.#scale;
+
+            ctx.globalAlpha = alpha;
+            ctx.fillStyle = '#ffffff';
+            ctx.beginPath();
+            ctx.arc(px, py, size, 0, Math.PI * 2);
+            ctx.fill();
+
+            if (star.brightness > 0.7 && size > 1) {
+                ctx.globalAlpha = alpha * 0.4;
+                ctx.beginPath();
+                ctx.arc(px, py, size * 2.5, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+        ctx.globalCompositeOperation = 'source-over';
+    }
+
+    #initBlobs(): void {
+        const blobCount = 8 + this.#colors.length * 2;
+
+        for (let i = 0; i < blobCount; ++i) {
+            this.#blobs.push({
+                x: 0.1 + MULBERRY.next() * 0.8,
+                y: 0.1 + MULBERRY.next() * 0.8,
+                radius: 0.3 + MULBERRY.next() * 0.3,
+                driftSpeedX: 0.3 + MULBERRY.next() * 0.7,
+                driftSpeedY: 0.2 + MULBERRY.next() * 0.6,
+                driftOffsetX: MULBERRY.next() * Math.PI * 2,
+                driftOffsetY: MULBERRY.next() * Math.PI * 2,
+                colorIndex: Math.floor(MULBERRY.next() * this.#colors.length),
+                opacity: 0.2 + MULBERRY.next() * 0.3
+            });
+        }
+    }
+
+    #initStars(): void {
+        for (let i = 0; i < this.#maxStars; ++i) {
+            this.#stars.push({
+                x: MULBERRY.next(),
+                y: MULBERRY.next(),
+                size: 0.5 + MULBERRY.next() * 1.5,
+                twinkleSpeed: 0.5 + MULBERRY.next() * 2,
+                twinkleOffset: MULBERRY.next() * Math.PI * 2,
+                brightness: 0.3 + MULBERRY.next() * 0.7
+            });
+        }
+    }
+
+    #colorWithAlpha(hex: string, alpha: number): string {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+        if (!result) {
+            return `rgba(255, 255, 255, ${alpha})`;
+        }
+
+        const r = parseInt(result[1], 16);
+        const g = parseInt(result[2], 16);
+        const b = parseInt(result[3], 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+}

package/src/nebula/types.ts

@@ -0,0 +1,20 @@
+export interface NebulaBlob {
+    x: number;
+    y: number;
+    radius: number;
+    driftSpeedX: number;
+    driftSpeedY: number;
+    driftOffsetX: number;
+    driftOffsetY: number;
+    colorIndex: number;
+    opacity: number;
+}
+
+export interface NebulaStar {
+    x: number;
+    y: number;
+    size: number;
+    twinkleSpeed: number;
+    twinkleOffset: number;
+    brightness: number;
+}

package/src/neon/consts.ts

@@ -0,0 +1,5 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(47);
+
+export const DEFAULT_COLORS = ['#ff0080', '#00ffff', '#ffff00', '#ff6600', '#aa00ff'];

package/src/neon/index.ts

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