@basmilius/sparkle 1.0.0 → 2.1.0

package/src/particles/layer.ts

@@ -0,0 +1,317 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { MULBERRY } from './consts';
+import type { ParticleSimulationConfig } from './simulation';
+import type { NetworkParticle, ParticleMouseMode } from './types';
+
+export class ParticleLayer extends SimulationLayer {
+    readonly #scale: 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 #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: ParticleSimulationConfig = {}) {
+        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);
+    }
+
+    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/simulation.ts

@@ -0,0 +1,26 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { ParticleLayer } from './layer';
+
+export interface ParticleSimulationConfig {
+    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?: import('./types').ParticleMouseMode;
+    readonly mouseRadius?: number;
+    readonly mouseStrength?: number;
+    readonly particleForces?: boolean;
+    readonly glow?: boolean;
+    readonly background?: string | null;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class ParticleSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: ParticleSimulationConfig = {}) {
+        super(canvas, new ParticleLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

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,4 @@
+export { PetalLayer } from './layer';
+export { PetalSimulation } from './simulation';
+export type { PetalSimulationConfig } from './simulation';
+export type { Petal } from './types';

package/src/petals/layer.ts

@@ -0,0 +1,158 @@
+import { SimulationLayer } from '../layer';
+import { MULBERRY, PETAL_COLORS } from './consts';
+import type { PetalSimulationConfig } from './simulation';
+import type { Petal } from './types';
+
+export class PetalLayer extends SimulationLayer {
+    readonly #scale: number;
+    readonly #size: number;
+    readonly #speed: number;
+    readonly #wind: number;
+    readonly #colors: string[];
+    #maxCount: number;
+    #time: number = 0;
+    #petals: Petal[] = [];
+    #sprites: HTMLCanvasElement[] = [];
+
+    constructor(config: PetalSimulationConfig = {}) {
+        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));
+        }
+    }
+
+    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);
+
+            ctx.save();
+            ctx.translate(px, py);
+            ctx.rotate(petal.rotation);
+            ctx.scale(scaleX, 1);
+            ctx.globalAlpha = 0.4 + petal.depth * 0.6;
+            ctx.drawImage(
+                this.#sprites[petal.colorIndex % this.#sprites.length],
+                -displaySize / 2,
+                -displaySize / 2,
+                displaySize,
+                displaySize
+            );
+            ctx.restore();
+        }
+
+        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/simulation.ts

@@ -0,0 +1,18 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { PetalLayer } from './layer';
+
+export interface PetalSimulationConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly wind?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class PetalSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: PetalSimulationConfig = {}) {
+        super(canvas, new PetalLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

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,4 @@
+export { PlasmaLayer } from './layer';
+export { PlasmaSimulation } from './simulation';
+export type { PlasmaSimulationConfig } from './simulation';
+export type { PlasmaColor } from './types';

package/src/plasma/layer.ts

@@ -0,0 +1,92 @@
+import { SimulationLayer } from '../layer';
+import type { PlasmaSimulationConfig } from './simulation';
+import type { PlasmaColor } from './types';
+
+const DEFAULT_PALETTE: PlasmaColor[] = [
+    {r: 0, g: 255, b: 255},
+    {r: 255, g: 0, b: 255},
+    {r: 255, g: 255, b: 0},
+    {r: 0, g: 100, b: 255},
+    {r: 0, g: 255, b: 100}
+];
+
+export class PlasmaLayer extends SimulationLayer {
+    readonly #speed: number;
+    readonly #scale: number;
+    readonly #resolution: number;
+    readonly #palette: PlasmaColor[];
+    #time: number = 0;
+    #offscreen: HTMLCanvasElement | null = null;
+    #offscreenCtx: CanvasRenderingContext2D | null = null;
+    #imageData: ImageData | null = null;
+
+    constructor(config: PlasmaSimulationConfig = {}) {
+        super();
+
+        this.#speed = config.speed ?? 1;
+        this.#scale = config.scale ?? 1;
+        this.#resolution = config.resolution ?? 4;
+        this.#palette = config.palette ?? DEFAULT_PALETTE;
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.02 * dt * this.#speed;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const resolution = this.#resolution;
+        const offWidth = Math.ceil(width / resolution);
+        const offHeight = Math.ceil(height / resolution);
+
+        if (!this.#offscreen || this.#offscreen.width !== offWidth || this.#offscreen.height !== offHeight) {
+            this.#offscreen = document.createElement('canvas');
+            this.#offscreen.width = offWidth;
+            this.#offscreen.height = offHeight;
+            this.#offscreenCtx = this.#offscreen.getContext('2d');
+            this.#imageData = this.#offscreenCtx!.createImageData(offWidth, offHeight);
+        }
+
+        const data = this.#imageData!.data;
+        const time = this.#time;
+        const scale = this.#scale;
+        const freq = 50 * scale;
+        const palette = this.#palette;
+        const paletteLen = palette.length;
+
+        for (let py = 0; py < offHeight; py++) {
+            const worldY = py * resolution;
+
+            for (let px = 0; px < offWidth; px++) {
+                const worldX = px * resolution;
+
+                const value = Math.sin(worldX / freq + time)
+                    + Math.sin(worldY / freq + time * 0.7)
+                    + Math.sin((worldX + worldY) / (freq * 1.3) + time * 1.3)
+                    + Math.sin(Math.sqrt(worldX * worldX + worldY * worldY) / freq + time * 0.5);
+
+                const normalized = (value + 4) / 8;
+                const mapped = normalized * (paletteLen - 1);
+                const index = Math.floor(mapped);
+                const frac = mapped - index;
+
+                const colorA = palette[index];
+                const colorB = palette[Math.min(index + 1, paletteLen - 1)];
+
+                const red = colorA.r + (colorB.r - colorA.r) * frac;
+                const green = colorA.g + (colorB.g - colorA.g) * frac;
+                const blue = colorA.b + (colorB.b - colorA.b) * frac;
+
+                const offset = (py * offWidth + px) * 4;
+                data[offset] = red;
+                data[offset + 1] = green;
+                data[offset + 2] = blue;
+                data[offset + 3] = 255;
+            }
+        }
+
+        this.#offscreenCtx!.putImageData(this.#imageData!, 0, 0);
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.drawImage(this.#offscreen!, 0, 0, width, height);
+    }
+}

package/src/plasma/simulation.ts

@@ -0,0 +1,17 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { PlasmaLayer } from './layer';
+import type { PlasmaColor } from './types';
+
+export interface PlasmaSimulationConfig {
+    readonly speed?: number;
+    readonly scale?: number;
+    readonly resolution?: number;
+    readonly palette?: PlasmaColor[];
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class PlasmaSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: PlasmaSimulationConfig = {}) {
+        super(canvas, new PlasmaLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}