SDF-2D - v0.7.6
    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 } = {}

      Returns Promise<void>

    Settings

    Member Visibility