@genart-api/time-fps-overlay/index.d.ts

GenArtAPI time provider with FPS overlay

import type { TimeProvider } from "@genart-api/core";
export interface FPSOverlayOpts {
    /**
     * @defaultValue 60
     */
    targetFPS: number;
    /**
     * Window size (number of frames) of recorded FPS samples and to compute the moving average frame rate
     *
     * @defaultValue 200
     */
    period: number;
    /**
     * Canvas width in pixels
     *
     * @defaultValue same as {@link FPSOverlayOpts.period}
     */
    width: number;
    /**
     * Canvas width in pixels
     *
     * @defaultValue 100
     */
    height: number;
    /**
     * Custom CSS to attach to canvas element.
     *
     * @remarks
     * By default the canvas is positioned in the top-right corner.
     */
    style: string;
    /**
     * Background color
     *
     * @defaultValue `#222`
     */
    bg: string;
    /**
     * Tuple of color values for the area plot gradient, in the following order:
     *
     * - target framerate
     * - target framerate - 1
     * - half target framerate
     * - zero
     *
     * @defaultValue `["#0f0", "#ff0", "#f00", "#300"]`
     */
    fps: [string, string, string, string];
    /**
     * Text color
     *
     * @defaultValue `#fff`
     */
    text: string;
    /**
     * If true, visualization uses area plot, else line plot.
     *
     * @defaultValue true
     */
    fill: boolean;
}
/**
 * Returns a new
 * [`TimeProvider`](https://docs.thi.ng/genart-api/core/interfaces/TimeProvider.html)
 * for development purposes, which collects FPS samples and injects a canvas
 * overlay to visualize recent frame rates and compute moving averages.
 * Visualization can be configured via provided options.
 *
 * @param opts
 */
export declare const timeProvider: ({ targetFPS, period, width, height, style, bg, text, fps, fill, }?: Partial<FPSOverlayOpts>) => TimeProvider;
declare global {
    /**
     * Globally exposed {@link timeProvider} with FPS overlay.
     */
    var timeProviderFPSOverlay: typeof timeProvider;
}