canvasparticles-js/dist/index.d.ts

In an HTML canvas, a bunch of interactive particles connected with lines when they approach each other.

import type { CanvasParticlesCanvas, Particle, ContextColor } from './types';
import type { CanvasParticlesOptions, CanvasParticlesOptionsInput } from './types/options';
export default class CanvasParticles {
    #private;
    /** Version of the library, injected via Rollup replace plugin. */
    static readonly version: string;
    private static readonly MAX_DT;
    private static readonly BASE_DT;
    /** Defines mouse interaction types with the particles */
    static readonly interactionType: Readonly<{
        NONE: 0;
        SHIFT: 1;
        MOVE: 2;
    }>;
    /** Defines how the particles are auto-generated */
    static readonly generationType: Readonly<{
        OFF: 0;
        NEW: 1;
        MATCH: 2;
    }>;
    /** Observes canvas elements entering or leaving the viewport to start/stop animation */
    static readonly canvasIntersectionObserver: IntersectionObserver;
    static readonly canvasResizeObserver: ResizeObserver;
    /** Helper functions for options parsing */
    private static defaultIfNaN;
    private static parseNumericOption;
    canvas: CanvasParticlesCanvas;
    private ctx;
    enableAnimating: boolean;
    isAnimating: boolean;
    private lastAnimationFrame;
    particles: Particle[];
    hasManualParticles: boolean;
    private clientX;
    private clientY;
    mouseX: number;
    mouseY: number;
    dpr: number;
    width: number;
    height: number;
    private offX;
    private offY;
    option: CanvasParticlesOptions;
    color: ContextColor;
    /**
     * Initialize a CanvasParticles instance
     * @param selector - Canvas element or CSS selector
     * @param options - Configuration object for particles (https://github.com/Khoeckman/canvasParticles?tab=readme-ov-file#options)
     */
    constructor(selector: string | HTMLCanvasElement, options?: CanvasParticlesOptionsInput);
    updateCanvasRect(): void;
    handleMouseMove(event: MouseEvent): void;
    handleScroll(): void;
    updateMousePos(): void;
    /** Update the canvas bounding rectangle (optional), resize the canvas and update particles accordingly */
    resizeCanvas(updateRect?: boolean): void;
    /** Remove existing particles and generate new ones */
    newParticles({ keepAuto, keepManual }?: {
        keepAuto?: boolean | undefined;
        keepManual?: boolean | undefined;
    }): void;
    /** Adjust particle array length to match `option.particles.ppm` */
    matchParticleCount({ updateBounds }?: {
        updateBounds?: boolean;
    }): void;
    /** Create a new particle with optional parameters */
    createParticle(posX: number, posY: number, dir: number, speed: number, size: number, isManual?: boolean): void;
    updateParticles(): void;
    /** Start the particle animation if it was not running before */
    start({ auto }?: {
        auto?: boolean;
    }): CanvasParticles;
    /** Stops the particle animation and optionally clears the canvas */
    stop({ auto, clear }?: {
        auto?: boolean;
        clear?: boolean;
    }): boolean;
    /** Gracefully destroy the instance and remove the canvas element */
    destroy(): void;
    /** Set and validate options (https://github.com/Khoeckman/canvasParticles?tab=readme-ov-file#options) */
    set options(options: CanvasParticlesOptionsInput);
    get options(): CanvasParticlesOptions;
    /** Sets the canvas background */
    setBackground(background: CanvasParticlesOptionsInput['background']): void;
    /** Transform the distance multiplier (float) to absolute distance (px) */
    setMouseConnectDistMult(connectDistMult: number): void;
    /** Format particle color and opacity */
    setParticleColor(color: string | CanvasGradient | CanvasPattern): void;
}