@basmilius/sparkle 2.0.0 → 2.1.0

package/src/confetti/shapes.ts

@@ -0,0 +1,104 @@
+import type { Shape } from './types';
+
+const TWO_PI = Math.PI * 2;
+
+export const SHAPE_PATHS: Record<Shape, Path2D> = {
+    bowtie: (() => {
+        const path = new Path2D();
+        path.moveTo(-1, -0.7);
+        path.lineTo(0, 0);
+        path.lineTo(-1, 0.7);
+        path.closePath();
+        path.moveTo(1, -0.7);
+        path.lineTo(0, 0);
+        path.lineTo(1, 0.7);
+        path.closePath();
+        return path;
+    })(),
+    circle: (() => {
+        const path = new Path2D();
+        path.ellipse(0, 0, 0.6, 1, 0, 0, TWO_PI);
+        return path;
+    })(),
+    crescent: (() => {
+        const path = new Path2D();
+        path.arc(0, 0, 1, 0, TWO_PI, false);
+        path.arc(0.45, 0, 0.9, 0, TWO_PI, true);
+        return path;
+    })(),
+    diamond: (() => {
+        const path = new Path2D();
+        path.moveTo(0, -1);
+        path.lineTo(0.6, 0);
+        path.lineTo(0, 1);
+        path.lineTo(-0.6, 0);
+        path.closePath();
+        return path;
+    })(),
+    heart: (() => {
+        const path = new Path2D();
+        path.moveTo(0, 1);
+        path.bezierCurveTo(-0.4, 0.55, -1, 0.1, -1, -0.35);
+        path.bezierCurveTo(-1, -0.8, -0.5, -1, 0, -0.6);
+        path.bezierCurveTo(0.5, -1, 1, -0.8, 1, -0.35);
+        path.bezierCurveTo(1, 0.1, 0.4, 0.55, 0, 1);
+        path.closePath();
+        return path;
+    })(),
+    hexagon: (() => {
+        const path = new Path2D();
+        for (let i = 0; i < 6; i++) {
+            const angle = (i * Math.PI / 3) - Math.PI / 2;
+            if (i === 0) {
+                path.moveTo(Math.cos(angle), Math.sin(angle));
+            } else {
+                path.lineTo(Math.cos(angle), Math.sin(angle));
+            }
+        }
+        path.closePath();
+        return path;
+    })(),
+    ribbon: (() => {
+        const path = new Path2D();
+        path.rect(-0.2, -1, 0.4, 2);
+        return path;
+    })(),
+    ring: (() => {
+        const path = new Path2D();
+        path.arc(0, 0, 1, 0, TWO_PI, false);
+        path.arc(0, 0, 0.55, 0, TWO_PI, true);
+        return path;
+    })(),
+    square: (() => {
+        const path = new Path2D();
+        path.rect(-0.7, -0.7, 1.4, 1.4);
+        return path;
+    })(),
+    star: (() => {
+        const path = new Path2D();
+        for (let i = 0; i < 10; i++) {
+            const r = i % 2 === 0 ? 1 : 0.42;
+            const angle = (i * Math.PI / 5) - Math.PI / 2;
+            if (i === 0) {
+                path.moveTo(r * Math.cos(angle), r * Math.sin(angle));
+            } else {
+                path.lineTo(r * Math.cos(angle), r * Math.sin(angle));
+            }
+        }
+        path.closePath();
+        return path;
+    })(),
+    triangle: (() => {
+        const path = new Path2D();
+        for (let i = 0; i < 3; i++) {
+            const angle = (i * 2 * Math.PI / 3) - Math.PI / 2;
+            if (i === 0) {
+                path.moveTo(Math.cos(angle), Math.sin(angle));
+            } else {
+                path.lineTo(Math.cos(angle), Math.sin(angle));
+            }
+        }
+        path.closePath();
+        return path;
+    })()
+};

package/src/confetti/simulation.ts

@@ -1,221 +1,27 @@
-import { hexToRGB } from '@basmilius/utils';
-import { LimitedFrameRateCanvas } from '../canvas';
-import { DEFAULT_CONFIG, MULBERRY } from './consts';
-import type { Config, Particle, ParticleConfig, Shape } from './types';
-
-const TWO_PI = Math.PI * 2;
-
-// Precomputed unit-size (size=1) Path2D objects per shape.
-// Size is encoded into the context transform, so each path is drawn once and reused every frame.
-const SHAPE_PATHS: Record<Shape, Path2D> = {
-    circle: (() => {
-        const path = new Path2D();
-        path.ellipse(0, 0, 0.6, 1, 0, 0, TWO_PI);
-        return path;
-    })(),
-    diamond: (() => {
-        const path = new Path2D();
-        path.moveTo(0, -1);
-        path.lineTo(0.6, 0);
-        path.lineTo(0, 1);
-        path.lineTo(-0.6, 0);
-        path.closePath();
-        return path;
-    })(),
-    ribbon: (() => {
-        const path = new Path2D();
-        path.rect(-0.2, -1, 0.4, 2);
-        return path;
-    })(),
-    square: (() => {
-        const path = new Path2D();
-        path.rect(-0.7, -0.7, 1.4, 1.4);
-        return path;
-    })(),
-    star: (() => {
-        const path = new Path2D();
-        for (let i = 0; i < 10; i++) {
-            const r = i % 2 === 0 ? 1 : 0.42;
-            const angle = (i * Math.PI / 5) - Math.PI / 2;
-            if (i === 0) path.moveTo(r * Math.cos(angle), r * Math.sin(angle));
-            else path.lineTo(r * Math.cos(angle), r * Math.sin(angle));
-        }
-        path.closePath();
-        return path;
-    })(),
-    triangle: (() => {
-        const path = new Path2D();
-        for (let i = 0; i < 3; i++) {
-            const angle = (i * 2 * Math.PI / 3) - Math.PI / 2;
-            if (i === 0) path.moveTo(Math.cos(angle), Math.sin(angle));
-            else path.lineTo(Math.cos(angle), Math.sin(angle));
-        }
-        path.closePath();
-        return path;
-    })()
-};
+import { SimulationCanvas } from '../simulation-canvas';
+import { ConfettiLayer } from './layer';
+import type { Config } from './types';
 
 export interface ConfettiSimulationConfig {
     readonly scale?: number;
     readonly canvasOptions?: CanvasRenderingContext2DSettings;
 }
 
-export class ConfettiSimulation extends LimitedFrameRateCanvas {
-
-    readonly #scale: number;
-    #particles: Particle[] = [];
+export class ConfettiSimulation extends SimulationCanvas {
+    readonly #layer: ConfettiLayer;
 
     constructor(canvas: HTMLCanvasElement, config: ConfettiSimulationConfig = {}) {
-        super(canvas, 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
-
-        this.#scale = config.scale ?? 1;
-
-        this.canvas.style.position = 'absolute';
-        this.canvas.style.top = '0';
-        this.canvas.style.left = '0';
-        this.canvas.style.height = '100%';
-        this.canvas.style.width = '100%';
+        const layer = new ConfettiLayer(config);
+        super(canvas, layer, 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+        this.#layer = layer;
     }
 
     fire(config: Partial<Config>): void {
         this.onResize();
-        this.draw();
-
-        const resolved = { ...DEFAULT_CONFIG, ...config };
-        const { angle, colors, decay, gravity, shapes, spread, startVelocity, ticks, x, y } = resolved;
-        const numberOfParticles = Math.max(1, resolved.particles);
-
-        for (let i = 0; i < numberOfParticles; i++) {
-            const particle = this.#createParticle({
-                angle,
-                color: hexToRGB(colors[Math.floor(MULBERRY.next() * colors.length)]),
-                decay,
-                gravity: gravity * this.#scale,
-                shape: shapes[Math.floor(MULBERRY.next() * shapes.length)],
-                spread,
-                startVelocity: startVelocity * this.#scale,
-                ticks,
-                x: this.width * x,
-                y: this.height * y
-            });
-
-            this.#tickParticle(particle);
-            this.#particles.push(particle);
-        }
+        this.#layer.fire(config);
 
         if (!this.isTicking) {
             this.start();
         }
     }
-
-    draw(): void {
-        const { context, width, height } = this;
-        context.clearRect(0, 0, width, height);
-
-        const particles = this.#particles;
-
-        for (let i = 0; i < particles.length; i++) {
-            const p = particles[i];
-            const flipCos = Math.cos(p.flipAngle);
-            const size = p.size;
-
-            // Encode translate + rotate + scale(flipCos, 1) + scale(size, size) in a single setTransform call,
-            // avoiding save()/translate()/rotate()/scale()/restore() — 5 API calls replaced by 1.
-            context.setTransform(
-                p.rotCos * flipCos * size,
-                p.rotSin * flipCos * size,
-                -p.rotSin * size,
-                p.rotCos * size,
-                p.x,
-                p.y
-            );
-            context.globalAlpha = 1 - p.tick / p.totalTicks;
-            context.fillStyle = p.colorStr;
-            context.fill(SHAPE_PATHS[p.shape]);
-        }
-
-        context.resetTransform();
-    }
-
-    tick(): void {
-        const particles = this.#particles;
-        let alive = 0;
-
-        // Normalize to 60fps-equivalent units so physics is frame-rate independent.
-        // dt ≈ 1.0 at 60fps, 0.5 at 120fps, 2.0 at 30fps.
-        // Cap at 200ms to avoid large jumps after tab switches or dropped frames.
-        const dt = this.delta > 0 && this.delta < 200 ? this.delta / (1000 / 60) : 1;
-
-        // Single pass: tick live particles and compact the array in-place.
-        // Avoids filter() allocation and a separate forEach pass.
-        for (let i = 0; i < particles.length; i++) {
-            const p = particles[i];
-
-            if (p.tick < p.totalTicks) {
-                this.#tickParticle(p, dt);
-                particles[alive++] = p;
-            }
-        }
-
-        particles.length = alive;
-
-        if (alive === 0) {
-            this.stop();
-        }
-    }
-
-    onResize(): void {
-        super.onResize();
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
-    }
-
-    #createParticle(config: ParticleConfig): Particle {
-        const launchAngle = -(config.angle * Math.PI / 180)
-            + (0.5 * config.spread * Math.PI / 180)
-            - (MULBERRY.next() * config.spread * Math.PI / 180);
-
-        const speed = config.startVelocity * (0.5 + MULBERRY.next());
-        const rotAngle = MULBERRY.next() * TWO_PI;
-
-        return {
-            colorStr: `rgb(${config.color[0]}, ${config.color[1]}, ${config.color[2]})`,
-            decay: config.decay - 0.05 + MULBERRY.next() * 0.1,
-            flipAngle: MULBERRY.next() * TWO_PI,
-            flipSpeed: 0.03 + MULBERRY.next() * 0.05,
-            gravity: config.gravity,
-            rotAngle,
-            rotCos: Math.cos(rotAngle),
-            rotSin: Math.sin(rotAngle),
-            rotSpeed: (MULBERRY.next() - 0.5) * 0.06,
-            shape: config.shape,
-            size: (5 + MULBERRY.next() * 5) * this.#scale,
-            swing: MULBERRY.next() * TWO_PI,
-            swingAmp: 0.5 + MULBERRY.next() * 1.5,
-            swingSpeed: 0.025 + MULBERRY.next() * 0.035,
-            tick: 0,
-            totalTicks: config.ticks,
-            vx: Math.cos(launchAngle) * speed,
-            vy: Math.sin(launchAngle) * speed,
-            x: config.x,
-            y: config.y
-        };
-    }
-
-    // dt defaults to 1 (60fps-equivalent) for the initial kick in fire() before the loop starts.
-    #tickParticle(particle: Particle, dt: number = 1): void {
-        const decayFactor = Math.pow(particle.decay, dt);
-        particle.vx *= decayFactor;
-        particle.vy *= decayFactor;
-        particle.vy += particle.gravity * 0.35 * dt;
-        particle.swing += particle.swingSpeed * dt;
-        particle.x += (particle.vx + particle.swingAmp * Math.cos(particle.swing)) * dt;
-        particle.y += particle.vy * dt;
-        particle.rotAngle += particle.rotSpeed * dt;
-        particle.rotCos = Math.cos(particle.rotAngle);
-        particle.rotSin = Math.sin(particle.rotAngle);
-        particle.flipAngle += particle.flipSpeed * dt;
-        particle.tick += dt;
-    }
-
 }

package/src/confetti/types.ts

@@ -3,6 +3,7 @@ export type Config = {
     readonly colors: string[];
     readonly decay: number;
     readonly gravity: number;
+    readonly palette: Palette;
     readonly particles: number;
     readonly shapes: Shape[];
     readonly spread: number;
@@ -48,6 +49,8 @@ export type ParticleConfig = {
     readonly y: number;
 };
 
+export type Palette = 'classic' | 'pastel' | 'vibrant' | 'warm';
+
 export type RGB = [r: number, g: number, b: number];
 
-export type Shape = 'circle' | 'diamond' | 'ribbon' | 'square' | 'star' | 'triangle';
+export type Shape = 'bowtie' | 'circle' | 'crescent' | 'diamond' | 'heart' | 'hexagon' | 'ribbon' | 'ring' | 'square' | 'star' | 'triangle';

package/src/distance.ts

@@ -4,5 +4,5 @@ export function distance(a: Point, b: Point): number {
     let x = a.x - b.x;
     let y = a.y - b.y;
 
-    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+    return Math.sqrt(x * x + y * y);
 }

package/src/donuts/consts.ts

@@ -0,0 +1,19 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+import type { DonutSimulationConfig } from './simulation';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const DEFAULT_CONFIG: DonutSimulationConfig = {
+    background: '#a51955',
+    collisionPadding: 20,
+    colors: ['#bd1961', '#da287c'],
+    count: 12,
+    mouseAvoidance: false,
+    mouseAvoidanceRadius: 150,
+    mouseAvoidanceStrength: 0.03,
+    radiusRange: [60, 90],
+    repulsionStrength: 0.02,
+    rotationSpeedRange: [0.0005, 0.002],
+    speedRange: [0.15, 0.6],
+    thickness: 0.39
+};

package/src/donuts/donut.ts

@@ -0,0 +1,12 @@
+export type Donut = {
+    outerRadius: number;
+    innerRadius: number;
+    x: number;
+    y: number;
+    angle: number;
+    speed: number;
+    rotationSpeed: number;
+    color: string;
+    vx: number;
+    vy: number;
+};

package/src/donuts/index.ts

@@ -0,0 +1,3 @@
+export { DonutLayer } from './layer';
+export { DonutSimulation } from './simulation';
+export type { DonutSimulationConfig } from './simulation';

package/src/donuts/layer.ts

@@ -0,0 +1,270 @@
+import { SimulationLayer } from '../layer';
+import { DEFAULT_CONFIG, MULBERRY } from './consts';
+import type { Donut } from './donut';
+import type { DonutSimulationConfig } from './simulation';
+
+export class DonutLayer extends SimulationLayer {
+    readonly #background: string;
+    readonly #collisionPadding: number;
+    readonly #colors: string[];
+    readonly #count: number;
+    readonly #mouseAvoidance: boolean;
+    readonly #mouseAvoidanceRadius: number;
+    readonly #mouseAvoidanceStrength: number;
+    readonly #radiusRange: [number, number];
+    readonly #repulsionStrength: number;
+    readonly #rotationSpeedRange: [number, number];
+    readonly #scale: number;
+    readonly #speedRange: [number, number];
+    readonly #thickness: number;
+    readonly #onMouseMoveBound: (event: MouseEvent) => void;
+    readonly #onMouseLeaveBound: () => void;
+    #donuts: Donut[] = [];
+    #mouseX: number = -1;
+    #mouseY: number = -1;
+    #mouseOnCanvas: boolean = false;
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: DonutSimulationConfig = {}) {
+        super();
+
+        const scale = config.scale ?? 1;
+
+        this.#background = config.background ?? DEFAULT_CONFIG.background!;
+        this.#collisionPadding = (config.collisionPadding ?? DEFAULT_CONFIG.collisionPadding!) * scale;
+        this.#colors = config.colors ?? DEFAULT_CONFIG.colors!;
+        this.#count = config.count ?? DEFAULT_CONFIG.count!;
+        this.#mouseAvoidance = config.mouseAvoidance ?? DEFAULT_CONFIG.mouseAvoidance!;
+        this.#mouseAvoidanceRadius = (config.mouseAvoidanceRadius ?? DEFAULT_CONFIG.mouseAvoidanceRadius!) * scale;
+        this.#mouseAvoidanceStrength = config.mouseAvoidanceStrength ?? DEFAULT_CONFIG.mouseAvoidanceStrength!;
+        this.#radiusRange = [
+            (config.radiusRange ?? DEFAULT_CONFIG.radiusRange!)[0] * scale,
+            (config.radiusRange ?? DEFAULT_CONFIG.radiusRange!)[1] * scale
+        ];
+        this.#repulsionStrength = config.repulsionStrength ?? DEFAULT_CONFIG.repulsionStrength!;
+        this.#rotationSpeedRange = config.rotationSpeedRange ?? DEFAULT_CONFIG.rotationSpeedRange!;
+        this.#scale = scale;
+        this.#speedRange = [
+            (config.speedRange ?? DEFAULT_CONFIG.speedRange!)[0] * scale,
+            (config.speedRange ?? DEFAULT_CONFIG.speedRange!)[1] * scale
+        ];
+        this.#thickness = config.thickness ?? DEFAULT_CONFIG.thickness!;
+
+        this.#onMouseMoveBound = (event: MouseEvent) => this.#onMouseMove(event);
+        this.#onMouseLeaveBound = () => this.#onMouseLeave();
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#donuts = [];
+
+            for (let i = 0; i < this.#count; i++) {
+                this.#donuts.push(this.#createNonOverlapping());
+            }
+        }
+    }
+
+    onMount(canvas: HTMLCanvasElement): void {
+        if (this.#mouseAvoidance) {
+            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.#resolveCollisions(dt);
+
+        if (this.#mouseAvoidance && this.#mouseOnCanvas) {
+            this.#resolveMouseAvoidance(dt);
+        }
+
+        for (const donut of this.#donuts) {
+            this.#updateDonut(donut, dt);
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = this.#background;
+        ctx.fillRect(0, 0, width, height);
+
+        for (const donut of this.#donuts) {
+            ctx.save();
+            ctx.translate(donut.x, donut.y);
+            ctx.rotate(donut.angle);
+
+            ctx.beginPath();
+            ctx.arc(0, 0, donut.outerRadius, 0, Math.PI * 2);
+            ctx.arc(0, 0, donut.innerRadius, 0, Math.PI * 2, true);
+            ctx.closePath();
+
+            ctx.fillStyle = donut.color;
+            ctx.fill();
+            ctx.restore();
+        }
+    }
+
+    #updateDonut(donut: Donut, dt: number): void {
+        const currentSpeed = Math.sqrt(donut.vx * donut.vx + donut.vy * donut.vy);
+
+        if (currentSpeed > donut.speed) {
+            const damping = Math.pow(0.995, dt);
+            donut.vx *= damping;
+            donut.vy *= damping;
+        }
+
+        donut.x += donut.vx * dt;
+        donut.y += donut.vy * dt;
+        donut.angle += donut.rotationSpeed * dt;
+
+        const limit = donut.outerRadius * 0.5;
+        const width = this.#width;
+        const height = this.#height;
+
+        if (donut.x < -limit) {
+            donut.x = -limit;
+            donut.vx = Math.abs(donut.vx);
+        }
+
+        if (donut.x > width + limit) {
+            donut.x = width + limit;
+            donut.vx = -Math.abs(donut.vx);
+        }
+
+        if (donut.y < -limit) {
+            donut.y = -limit;
+            donut.vy = Math.abs(donut.vy);
+        }
+
+        if (donut.y > height + limit) {
+            donut.y = height + limit;
+            donut.vy = -Math.abs(donut.vy);
+        }
+    }
+
+    #onMouseMove(event: MouseEvent): void {
+        const target = event.currentTarget as HTMLCanvasElement;
+        const rect = target.getBoundingClientRect();
+        this.#mouseX = event.clientX - rect.left;
+        this.#mouseY = event.clientY - rect.top;
+        this.#mouseOnCanvas = true;
+    }
+
+    #onMouseLeave(): void {
+        this.#mouseOnCanvas = false;
+    }
+
+    #resolveMouseAvoidance(dt: number): void {
+        const radius = this.#mouseAvoidanceRadius;
+        const strength = this.#mouseAvoidanceStrength;
+        const mx = this.#mouseX;
+        const my = this.#mouseY;
+
+        for (const donut of this.#donuts) {
+            const dx = donut.x - mx;
+            const dy = donut.y - my;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            const minDist = donut.outerRadius + radius;
+
+            if (dist < minDist && dist > 0) {
+                const overlap = minDist - dist;
+                const nx = dx / dist;
+                const ny = dy / dist;
+                const force = overlap * strength * dt;
+
+                donut.vx += nx * force;
+                donut.vy += ny * force;
+            }
+        }
+    }
+
+    #resolveCollisions(dt: number): void {
+        const padding = this.#collisionPadding;
+        const strength = this.#repulsionStrength;
+
+        for (let i = 0; i < this.#donuts.length; i++) {
+            for (let j = i + 1; j < this.#donuts.length; j++) {
+                const a = this.#donuts[i];
+                const b = this.#donuts[j];
+                const dx = b.x - a.x;
+                const dy = b.y - a.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                const minDist = a.outerRadius + b.outerRadius + padding;
+
+                if (dist < minDist && dist > 0) {
+                    const overlap = minDist - dist;
+                    const nx = dx / dist;
+                    const ny = dy / dist;
+                    const force = overlap * strength * dt;
+
+                    a.vx -= nx * force;
+                    a.vy -= ny * force;
+                    b.vx += nx * force;
+                    b.vy += ny * force;
+                }
+            }
+        }
+    }
+
+    #createDonut(): Donut {
+        const outerRadius = this.#rand(this.#radiusRange[0], this.#radiusRange[1]);
+        const innerRadius = outerRadius * (1 - this.#thickness);
+        const speed = this.#rand(this.#speedRange[0], this.#speedRange[1]);
+        const direction = MULBERRY.next() * Math.PI * 2;
+
+        return {
+            outerRadius,
+            innerRadius,
+            x: this.#rand(-outerRadius, this.#width + outerRadius),
+            y: this.#rand(-outerRadius, this.#height + outerRadius),
+            angle: MULBERRY.next() * Math.PI * 2,
+            speed,
+            rotationSpeed: this.#rand(this.#rotationSpeedRange[0], this.#rotationSpeedRange[1]) * (MULBERRY.next() > 0.5 ? 1 : -1),
+            color: this.#colors[Math.floor(MULBERRY.next() * this.#colors.length)],
+            vx: Math.cos(direction) * speed,
+            vy: Math.sin(direction) * speed
+        };
+    }
+
+    #createNonOverlapping(maxAttempts: number = 200): Donut {
+        for (let attempt = 0; attempt < maxAttempts; attempt++) {
+            const donut = this.#createDonut();
+
+            if (!this.#overlapsAny(donut)) {
+                return donut;
+            }
+        }
+
+        return this.#createDonut();
+    }
+
+    #overlapsAny(donut: Donut): boolean {
+        const minDist = this.#collisionPadding;
+
+        return this.#donuts.some((other) => {
+            const dx = donut.x - other.x;
+            const dy = donut.y - other.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+
+            return dist < donut.outerRadius + other.outerRadius + minDist;
+        });
+    }
+
+    #rand(min: number, max: number): number {
+        return MULBERRY.next() * (max - min) + min;
+    }
+}

package/src/donuts/simulation.ts

@@ -0,0 +1,25 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { DonutLayer } from './layer';
+
+export interface DonutSimulationConfig {
+    readonly background?: string;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+    readonly collisionPadding?: number;
+    readonly colors?: string[];
+    readonly count?: number;
+    readonly mouseAvoidance?: boolean;
+    readonly mouseAvoidanceRadius?: number;
+    readonly mouseAvoidanceStrength?: number;
+    readonly radiusRange?: [number, number];
+    readonly repulsionStrength?: number;
+    readonly rotationSpeedRange?: [number, number];
+    readonly scale?: number;
+    readonly speedRange?: [number, number];
+    readonly thickness?: number;
+}
+
+export class DonutSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: DonutSimulationConfig = {}) {
+        super(canvas, new DonutLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}