SDF-2D - v0.8.0
    Preparing search index...

    Function runAnimation

    • Implements the boilerplate code required to run real-time animations in the browser. An FPS-based autoscaler is also used. This creates an additional fps key in the renderer's insights property.

      Example usage:

        <canvas id="main" style="width: 300px; height: 150px"></canvas>

      The canvas needs to have a fixed size specified by CSS.

      import { CircleFactory, CircleLight, hsl, runAnimation } from 'sdf-2d';

      const canvas = document.querySelector('canvas');
      const Circle = CircleFactory(hsl(180, 100, 40));

      runAnimation(canvas, [Circle.descriptor, CircleLight.descriptor], (renderer, time) => {
        renderer.addDrawable(
          new Circle([150 + 50 * Math.cos(time / 1000), 75 + 50 * Math.sin(time / 1000)], 25)
        );
        renderer.addDrawable(new CircleLight([150, 75], hsl(270, 100, 40), 0.1));
        return true;
      });

      Parameters

      • canvas: HTMLCanvasElement

        The returned renderer will only be able to draw to this canvas.

      • descriptors: DrawableDescriptor[]

        The descriptor of every single object (and light) that ever needs to be drawn by this renderer has to be given before compiling.

      • animate: (
            renderer: Renderer,
            currentTimeInMilliseconds: number,
            deltaTimeInMilliseconds: number,
        ) => boolean

        This function will be called before rendering each frame. renderDrawables must not be called by the animate function. It should return true if the animation should be continued. To break out of the animation loop, a false (falsy) return value must be given.

      • settings: Partial<StartupSettings & RuntimeSettings> & { enableAutoscaler?: boolean } = {}

        Startup and runtime settings overrides. Sensible defaults are provided. Set enableAutoscaler to false to keep the render scales exactly as configured instead of letting the FPS-based autoscaler adjust them.

      Returns Promise<void>

    Settings
    Member Visibility