# SDF-2D - v0.6.3
Documentation for SDF-2D - v0.6.3

## Index

### Namespaces

- __global

### Enumerations

- FilteringOptions
- WrapOptions

### Drawable Classes

- CircleBase
- CircleLight
- DropletBase
- Flashlight
- InvertedTunnelBase
- MetaCircleBase
- PolygonBase
- RotatedRectangleBase

### Other Classes

- ColorfulCircle
- DeltaTimeCalculator
- Drawable
- FpsQualityAutoscaler

### Interfaces

- DrawableDescriptor
- NoisyPolygonBase
- Renderer
- RendererInfo
- RuntimeSettings
- StartupSettings
- TextureOptions

### Type aliases

- TextureWithOptions

### Color Functions

- hex
- hsl
- rgb
- rgb255
- rgba
- rgba255

### Drawable Functions

- CircleFactory
- DropletFactory
- InvertedTunnelFactory
- MetaCircleFactory
- NoisyPolygonFactory
- PolygonFactory
- RotatedRectangleFactory

### Other Functions

- compile
- renderNoise
- runAnimation

### Object literals

- defaultRuntimeSettings
- defaultStartupSettings

## Type aliases

### TextureWithOptions

TextureWithOptions: { overrides: Partial< TextureOptions >; source: TexImageSource }

- Defined in graphics/graphics-library/texture/texture-options.ts:27

#### Type declaration

- ##### overrides: Partial< TextureOptions >

- ##### source: TexImageSource

## Color Functions

### Const hex

- hex(hex: string): vec3

- - Defined in helper/colors/hex.ts:14

  Return a color given in a hexadecimal form as a vec3.

  A hexadecimal color with (#ff0000) or without (ff0000) a leading hashmark.

  source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

  #### Parameters

  - ##### hex: string

  #### Returns vec3

### Const hsl

- hsl(hue: number, saturation: number, lightness: number): vec3

- - Defined in helper/colors/hsl.ts:15

  Return a color contained in a vec3.

  #### Parameters

  - ##### hue: number

    Should be between 0 and 360

  - ##### saturation: number

    Should be between 0 and 100

  - ##### lightness: number

    Should be between 0 and 100

    source: https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion

  #### Returns vec3

### Const rgb

- rgb(r: number, g: number, b: number): vec3

- - Defined in helper/colors/rgb.ts:12

  Return a color contained in a vec3.

  #### Parameters

  - ##### r: number

    Should be between 0 and 1

  - ##### g: number

    Should be between 0 and 1

  - ##### b: number

    Should be between 0 and 1

  #### Returns vec3

### Const rgb255

- rgb255(r: number, g: number, b: number): vec3

- - Defined in helper/colors/rgb255.ts:12

  Return a color contained in a vec3.

  #### Parameters

  - ##### r: number

    Should be between 0 and 255

  - ##### g: number

    Should be between 0 and 255

  - ##### b: number

    Should be between 0 and 255

  #### Returns vec3

### Const rgba

- rgba(r: number, g: number, b: number, a: number): vec4

- - Defined in helper/colors/rgba.ts:13

  Return a color with transparency contained in a vec4.

  #### Parameters

  - ##### r: number

    Should be between 0 and 1

  - ##### g: number

    Should be between 0 and 1

  - ##### b: number

    Should be between 0 and 1

  - ##### a: number

    Should be between 0 and 1

  #### Returns vec4

### Const rgba255

- rgba255(r: number, g: number, b: number, a: number): vec4

- - Defined in helper/colors/rgba255.ts:13

  Return a color with transparency contained in a vec4.

  #### Parameters

  - ##### r: number

    Should be between 0 and 255

  - ##### g: number

    Should be between 0 and 255

  - ##### b: number

    Should be between 0 and 255

  - ##### a: number

    Should be between 0 and 255

  #### Returns vec4

## Drawable Functions

### Const CircleFactory

- CircleFactory(color: vec3 | vec4 | number): typeof CircleBase

- - Defined in drawables/shapes/circle-factory.ts:18

  #### Parameters

  - ##### color: vec3 | vec4 | number

  #### Returns typeof CircleBase

### Const DropletFactory

- DropletFactory(color: vec3 | vec4 | number): typeof DropletBase

- - Defined in drawables/shapes/droplet-factory.ts:25

  #### Parameters

  - ##### color: vec3 | vec4 | number

  #### Returns typeof DropletBase

### Const InvertedTunnelFactory

- InvertedTunnelFactory(color: vec3 | vec4 | number): typeof InvertedTunnelBase

- - Defined in drawables/shapes/inverted-tunnel-factory.ts:27

  Providing a noise texture is required for this drawable.

  #### Parameters

  - ##### color: vec3 | vec4 | number

  #### Returns typeof InvertedTunnelBase

### Const MetaCircleFactory

- MetaCircleFactory(color: vec3 | vec4 | number): typeof MetaCircleBase

- - Defined in drawables/shapes/meta-circle-factory.ts:18

  #### Parameters

  - ##### color: vec3 | vec4 | number

  #### Returns typeof MetaCircleBase

### Const NoisyPolygonFactory

- NoisyPolygonFactory(vertexCount: number, color: vec3 | vec4 | number): typeof PolygonBase & NoisyPolygonBase

- - Defined in drawables/shapes/noisy-polygon-factory.ts:14

  #### Parameters

  - ##### vertexCount: number

  - ##### color: vec3 | vec4 | number

  #### Returns typeof PolygonBase & NoisyPolygonBase

### Const PolygonFactory

- PolygonFactory(vertexCount: number, color: vec3 | vec4 | number): typeof PolygonBase

- - Defined in drawables/shapes/polygon-factory.ts:20

  #### Parameters

  - ##### vertexCount: number

  - ##### color: vec3 | vec4 | number

  #### Returns typeof PolygonBase

### Const RotatedRectangleFactory

- RotatedRectangleFactory(color: vec3 | vec4 | number): typeof RotatedRectangleBase

- - Defined in drawables/shapes/rotated-rectangle-factory.ts:18

  #### Parameters

  - ##### color: vec3 | vec4 | number

  #### Returns typeof RotatedRectangleBase

## Other Functions

### compile

- compile(canvas: HTMLCanvasElement, descriptors: Array < DrawableDescriptor >, settingsOverrides?: Partial< StartupSettings >): Promise< Renderer >

- - Defined in compile.ts:30

  Compiles a new renderer instance. There can multiple renderers on a single page.

  > Asynchronous behaviour is required for parallel shader compiling. Trying to draw before the returned promise resolves, results in no action taken. Settings can be set before promise resolution and they will be applied later.

  The descriptors of every to-be-drawn objects are required before creating the renderer, allowing the compiler to only create the shaders that will actually be used.

  Example usage:

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

       const canvas = document.querySelector('canvas');
       const Circle = CircleFactory(hsl(30, 66, 50));
       const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);

  #### Parameters

  - ##### canvas: HTMLCanvasElement

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

  - ##### descriptors: Array < DrawableDescriptor >

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

  - ##### Default value settingsOverrides: Partial< StartupSettings > = {}

    Sensible defaults are provided, but these can be overridden.

  #### Returns Promise< Renderer >

### Const renderNoise

- renderNoise(textureSize: vec2, scale: number, amplitude: number, ignoreWebGL2?: boolean): Promise<HTMLCanvasElement>

- - Defined in graphics/rendering/renderer/noise-renderer.ts:20

  Create a renderer, draw a 2D noise texture with it, then destroy the used resources, while returning the generated texture in the form of a canvas.

  #### Parameters

  - ##### textureSize: vec2

    The resolution of the end result.

  - ##### scale: number

    A starting value can be 15

  - ##### amplitude: number

    A starting value can be 1

  - ##### Default value ignoreWebGL2: boolean = false

    Ignore WebGL2, even when its available.

  #### Returns Promise<HTMLCanvasElement>

### runAnimation

- runAnimation(canvas: HTMLCanvasElement, descriptors: Array < DrawableDescriptor >, animate: (renderer: Renderer, currentTimeInMilliseconds: DOMHighResTimeStamp, deltaTimeInMilliseconds: DOMHighResTimeStamp) => boolean, startupSettingOverrides?: Partial< StartupSettings >, initialRuntimeSettingOverrides?: Partial< RuntimeSettings >): Promise<void>

- - Defined in run-animation.ts:46

  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 renderers `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: Array < 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: DOMHighResTimeStamp, deltaTimeInMilliseconds: DOMHighResTimeStamp) => 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.

    - - (renderer: Renderer, currentTimeInMilliseconds: DOMHighResTimeStamp, deltaTimeInMilliseconds: DOMHighResTimeStamp): boolean

      - #### Parameters

        - ##### renderer: Renderer

        - ##### currentTimeInMilliseconds: DOMHighResTimeStamp

        - ##### deltaTimeInMilliseconds: DOMHighResTimeStamp

        #### Returns boolean

  - ##### Default value startupSettingOverrides: Partial< StartupSettings > = {}

    Sensible defaults are provided, but these can be overridden.

  - ##### Default value initialRuntimeSettingOverrides: Partial< RuntimeSettings > = {}

    Sensible defaults are provided, but these can be overridden.

  #### Returns Promise<void>

## Object literals

### Const defaultRuntimeSettings

defaultRuntimeSettings: object

- Defined in graphics/rendering/settings/default-runtime-settings.ts:7

Contains the default values used for RuntimeSettings.

### ambientLight

ambientLight: vec3 = vec3.fromValues(0.25, 0.15, 0.25)

- Defined in graphics/rendering/settings/default-runtime-settings.ts:15

### colorPalette

colorPalette: never[] = []

- Defined in graphics/rendering/settings/default-runtime-settings.ts:14

### distanceRenderScale

distanceRenderScale: number = 0.5

- Defined in graphics/rendering/settings/default-runtime-settings.ts:12

### enableHighDpiRendering

enableHighDpiRendering: false = false

- Defined in graphics/rendering/settings/default-runtime-settings.ts:8

### isWorldInverted

isWorldInverted: false = false

- Defined in graphics/rendering/settings/default-runtime-settings.ts:10

### lightCutoffDistance

lightCutoffDistance: number = 400

- Defined in graphics/rendering/settings/default-runtime-settings.ts:11

### lightsRenderScale

lightsRenderScale: number = 1

- Defined in graphics/rendering/settings/default-runtime-settings.ts:13

### textures

textures: {}

- Defined in graphics/rendering/settings/default-runtime-settings.ts:16

#### Type declaration

### tileMultiplier

tileMultiplier: number = 8

- Defined in graphics/rendering/settings/default-runtime-settings.ts:9

### Const defaultStartupSettings

defaultStartupSettings: object

- Defined in graphics/rendering/settings/default-startup-settings.ts:7

Contains the default values used for StartupSettings.

### backgroundColor

backgroundColor: vec4 = vec4.fromValues(1, 1, 1, 1)

- Defined in graphics/rendering/settings/default-startup-settings.ts:11

### enableContextLostSimulator

enableContextLostSimulator: false = false

- Defined in graphics/rendering/settings/default-startup-settings.ts:14

### enableStopwatch

enableStopwatch: false = false

- Defined in graphics/rendering/settings/default-startup-settings.ts:13

### ignoreWebGL2

ignoreWebGL2: false = false

- Defined in graphics/rendering/settings/default-startup-settings.ts:10

### lightPenetrationRatio

lightPenetrationRatio: number = 0.75

- Defined in graphics/rendering/settings/default-startup-settings.ts:12

### paletteSize

paletteSize: number = 256

- Defined in graphics/rendering/settings/default-startup-settings.ts:9

### shadowTraceCount

shadowTraceCount: number = 16

- Defined in graphics/rendering/settings/default-startup-settings.ts:8