@oliversalzburg/js-utils 0.7.0 → 0.7.1

package/lib/graphics/canvas2d.js

@@ -0,0 +1,332 @@
+import { mustExist } from "../data/nil.js";
+import { InvalidOperationError } from "../errors/InvalidOperationError.js";
+import { Canvas } from "./canvas.js";
+import { blend, blendAdditive, blendSubtractive, fromRGBA, getA, getB, getG, getR, } from "./core.js";
+import { MS_PER_FRAME_60FPS } from "./render-loop.js";
+/**
+ * The {@linkcode Canvas2D} is a double-buffered construct to help with drawing to a
+ * {@linkcode !HTMLCanvasElement} with best possible performance.
+ * We utilize an {@linkcode !OffscreenCanvas} with a {@linkcode !OffscreenCanvasRenderingContext2D}
+ * to draw frames and expect to render them back to the DOM in regular intervals.
+ */
+export class Canvas2D extends Canvas {
+    /**
+     * The rendering context for the canvas located in the DOM.
+     */
+    #canvasDomContext;
+    /**
+     * The offscreen canvas we use for rendering.
+     */
+    #canvasOffscreen;
+    /**
+     * The 2D rendering context we're using to draw to the canvas.
+     */
+    #context;
+    /**
+     * Retrieves the rendering context of the canvas.
+     * @returns The rendering context of the canvas.
+     */
+    get context() {
+        return this.#context;
+    }
+    /**
+     * The {@linkcode !ImageData} object in our offscreen canvas. We usually interact with its
+     * {@linkcode Canvas2D.buffer buffer} directly.
+     */
+    #imageData;
+    /**
+     * Our back buffer.
+     */
+    buffer;
+    /**
+     * The configuration that was used for this canvas.
+     */
+    options;
+    /**
+     * Constructs a new {@linkcode Canvas2D}.
+     * @param canvas - The canvas to wrap.
+     * @param options - The configuration for this canvas.
+     */
+    constructor(canvas, options = {}) {
+        super(canvas);
+        this.options = options;
+        this.#canvasDomContext = mustExist(this.canvasElement.getContext("bitmaprenderer", {
+            alpha: false,
+        }), "Unable to create rendering context for DOM canvas.");
+        // Why not .transferControlToOffscreen()?
+        // It prevents the consumer from interactively resizing the DOM canvas.
+        // We prefer to just have a discrete offscreen buffer, which we can
+        // fully control. In testing, the performance impact seemed insignificant.
+        this.#canvasOffscreen = new OffscreenCanvas(this.width, this.height);
+        this.#context = mustExist(this.#canvasOffscreen.getContext("2d", {
+            alpha: false,
+            desynchronized: true,
+            willReadFrequently: this.options.supportReadBack,
+        }), "Unable to create rendering context for offscreen canvas.");
+        this.#imageData = this.#context.createImageData(this.width, this.height);
+        this.buffer = this.#imageData.data;
+    }
+    /**
+     * Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
+     */
+    refreshCanvasNode() {
+        this.#canvasOffscreen = new OffscreenCanvas(this.width, this.height);
+        this.#context = mustExist(this.#canvasOffscreen.getContext("2d", {
+            alpha: false,
+            desynchronized: true,
+            willReadFrequently: this.options.supportReadBack,
+        }), "Unable to create rendering context for offscreen canvas.");
+        this.#imageData = this.#context.createImageData(this.width, this.height);
+        this.buffer = this.#imageData.data;
+    }
+    /**
+     * Draw FPS information onto the canvas.
+     * @param frameTimes - Durations of previous frame draws.
+     * @param frameTime - The duration of the previous frame draw.
+     * @param timeDelta - The time elapsed since the last frame.
+     */
+    renderFpsInfo(frameTimes, frameTime, timeDelta) {
+        const maxFrameTime = frameTimes.reduce((max, frameTime) => {
+            if (max < frameTime) {
+                max = frameTime;
+            }
+            return max;
+        }, 0);
+        const sumFrameTimes = frameTimes.reduce((sum, frameTime) => sum + frameTime, 0);
+        const fpsAll = Math.round(frameTimes.length / (sumFrameTimes / 1000)).toString();
+        const fpsFrame = 1000 / frameTime;
+        const fpsDelta = 1000 / timeDelta;
+        let currentX = this.width;
+        for (const frameTime of frameTimes) {
+            let fillColor = 0x00ff00ff;
+            let width = 1;
+            if (MS_PER_FRAME_60FPS < frameTime) {
+                const quality = frameTime / maxFrameTime;
+                fillColor =
+                    blend(0x00ff00ff, 0xff0000ff, Math.trunc(quality * 255)) >>> 0;
+                width = Math.round(frameTime / MS_PER_FRAME_60FPS);
+            }
+            this.context.fillStyle = `#${fillColor.toString(16).padStart(8, "0")}`;
+            this.context.globalAlpha = 255;
+            this.context.fillRect(currentX - width, this.height, width, (frameTime / Math.max(100, maxFrameTime)) * -100);
+            currentX -= width;
+        }
+        this.context.beginPath();
+        this.context.strokeStyle = "#fff";
+        this.context.moveTo(0, this.height - MS_PER_FRAME_60FPS);
+        this.context.lineTo(this.width, this.height - MS_PER_FRAME_60FPS);
+        this.context.stroke();
+        const fpsString = `${Math.round(fpsFrame).toString()}f ${fpsAll}∑ ${Math.round(fpsDelta).toString()}δ`;
+        this.context.font = "13px monospace";
+        this.context.strokeStyle = "rgba( 255, 255, 255, 1)";
+        this.context.textAlign = "right";
+        this.context.textRendering = "geometricPrecision";
+        this.context.strokeText(fpsString, this.width - 3, this.height - 3);
+        this.context.fillStyle = "#000000";
+        this.context.fillText(fpsString, this.width - 3, this.height - 3);
+    }
+    /**
+     * Draws the back buffer onto the canvas.
+     */
+    update() {
+        this.#context.putImageData(this.#imageData, 0, 0);
+    }
+    /**
+     * Draws the offscreen canvas into the DOM canvas.
+     */
+    render() {
+        const newFrame = this.#canvasOffscreen.transferToImageBitmap();
+        this.#canvasDomContext.transferFromImageBitmap(newFrame);
+    }
+    /**
+     * Draws a slightly transparent, black rectangle over the canvas,
+     * and then reads the result back into the buffer.
+     * @param color - The color to fade the buffer with. The alpha component of
+     * the color defines how strong the fade is. `0` is not at all, `255` makes
+     * it instantly black.
+     */
+    fade(color = fromRGBA(0, 0, 0, 1)) {
+        this.blendWith(color);
+    }
+    /**
+     * Reads the front buffer back into the back buffer.
+     */
+    bufferReadBack() {
+        if (!this.options.supportReadBack) {
+            throw new InvalidOperationError("To use `bufferReadBack()`, you must construct the `Canvas` with `options.supportReadBack` set to `true`.");
+        }
+        this.#imageData = this.#context.getImageData(0, 0, this.width, this.height);
+        this.buffer = this.#imageData.data;
+    }
+    /**
+     * Returns the color of a pixel in the back buffer.
+     * @param x - The X coordinate to retrieve.
+     * @param y - The X coordinate to retrieve.
+     * @returns The color of the pixel at the given local.
+     */
+    getPixel32(x, y) {
+        const bufferOffset = (x + y * this.width) * 4;
+        return fromRGBA(this.buffer[bufferOffset + 0], this.buffer[bufferOffset + 1], this.buffer[bufferOffset + 2], this.buffer[bufferOffset + 3]);
+    }
+    /**
+     * Colors a pixel in the back buffer.
+     * @param x - The X coordinate to color.
+     * @param y - The Y coordinate to color.
+     * @param color - The color to place at the coordinate.
+     */
+    setPixel32(x, y, color) {
+        const bufferOffset = (x + y * this.width) * 4;
+        this.buffer[bufferOffset + 0] = getR(color);
+        this.buffer[bufferOffset + 1] = getG(color);
+        this.buffer[bufferOffset + 2] = getB(color);
+        this.buffer[bufferOffset + 3] = getA(color);
+    }
+    /**
+     * Fills the entire back buffer with the given color.
+     * @param color - The color to fill the back buffer with.
+     */
+    clearWith(color) {
+        const r = getR(color);
+        const g = getG(color);
+        const b = getB(color);
+        const a = getA(color);
+        for (let bufferOffset = 0; bufferOffset < this.width * this.height * 4; bufferOffset += 4) {
+            this.buffer[bufferOffset + 0] = r;
+            this.buffer[bufferOffset + 1] = g;
+            this.buffer[bufferOffset + 2] = b;
+            this.buffer[bufferOffset + 3] = a;
+        }
+    }
+    /**
+     * Fills the entire back buffer with the given color.
+     * @param color - The color to fill the back buffer with.
+     */
+    blendWith(color) {
+        const r = getR(color);
+        const g = getG(color);
+        const b = getB(color);
+        const a = getA(color);
+        for (let bufferOffset = 0; bufferOffset < this.width * this.height * 4; bufferOffset += 4) {
+            this.buffer[bufferOffset + 0] =
+                (a * r + (255 - a) * this.buffer[bufferOffset + 0]) >> 8;
+            this.buffer[bufferOffset + 1] =
+                (a * g + (255 - a) * this.buffer[bufferOffset + 1]) >> 8;
+            this.buffer[bufferOffset + 2] =
+                (a * b + (255 - a) * this.buffer[bufferOffset + 2]) >> 8;
+        }
+    }
+}
+/**
+ * Linearly blends a new pixel with an existing color value in a canvas.
+ *
+ * As this method is often called many times in render loops, only bounds
+ * checking is applied to the given coordinates.
+ *
+ * The coordinates are **expected to already be integers**. Supplying numbers with fractions
+ * has performance implications. Ensure you're working with integers, or truncate the
+ * coordinates before passing them in.
+ *
+ * The `alpha` value is expected to be an integer in the range from `0` to `255`.
+ * `0` meaning fully transparent, `255` meaning fully opaque.
+ * @param canvas - The canvas to interact with.
+ * @param x - The X coordinate at which to place the pixel.
+ * @param y - The Y coordinate at which to place the pixel.
+ * @param color - The color of the pixel.
+ * @param alpha - The alpha value to use to blend the pixel with existing color at the location.
+ */
+export const putPixel32 = (canvas, x, y, color, alpha) => {
+    if (canvas.width <= x || x < 0 || canvas.height <= y || y < 0) {
+        return;
+    }
+    const srcColor = canvas.getPixel32(x, y);
+    if (srcColor === color) {
+        return;
+    }
+    const newColor = blend(srcColor, color, alpha);
+    canvas.setPixel32(x, y, newColor);
+};
+/**
+ * Additively blends a new pixel with an existing color value in a canvas.
+ *
+ * As this method is often called many times in render loops, only bounds
+ * checking is applied to the given coordinates.
+ *
+ * The coordinates are **expected to already be integers**. Supplying numbers with fractions
+ * has performance implications. Ensure you're working with integers, or truncate the
+ * coordinates before passing them in.
+ *
+ * The `alpha` value is expected to be an integer in the range from `0` to `255`.
+ * `0` meaning fully transparent, `255` meaning fully opaque.
+ * @param canvas - The canvas to interact with.
+ * @param x - The X coordinate at which to place the pixel.
+ * @param y - The Y coordinate at which to place the pixel.
+ * @param color - The color of the pixel.
+ * @param alpha - The alpha value to use to blend the pixel with existing color at the location.
+ */
+export const putPixel32Add = (canvas, x, y, color, alpha) => {
+    if (canvas.width <= x || x < 0 || canvas.height < y || y < 0) {
+        return;
+    }
+    const srcColor = canvas.getPixel32(x, y);
+    if (srcColor === 0xffffff || srcColor === color) {
+        return;
+    }
+    const newColor = blendAdditive(srcColor, color, alpha);
+    canvas.setPixel32(x, y, newColor);
+};
+/**
+ * Subtractively blends a new pixel with an existing color value in a canvas.
+ *
+ * As this method is often called many times in render loops, only bounds
+ * checking is applied to the given coordinates.
+ *
+ * The coordinates are **expected to already be integers**. Supplying numbers with fractions
+ * has performance implications. Ensure you're working with integers, or truncate the
+ * coordinates before passing them in.
+ *
+ * The `alpha` value is expected to be an integer in the range from `0` to `255`.
+ * `0` meaning fully transparent, `255` meaning fully opaque.
+ * @param canvas - The canvas to interact with.
+ * @param x - The X coordinate at which to place the pixel.
+ * @param y - The Y coordinate at which to place the pixel.
+ * @param color - The color of the pixel.
+ * @param alpha - The alpha value to use to blend the pixel with existing color at the location.
+ */
+export const putPixel32Sub = (canvas, x, y, color, alpha) => {
+    if (canvas.width <= x || x < 0 || canvas.height <= y || y < 0) {
+        return;
+    }
+    const srcColor = canvas.getPixel32(x, y);
+    if (srcColor === 0 || srcColor === color) {
+        return;
+    }
+    const newColor = blendSubtractive(srcColor, color, alpha);
+    canvas.setPixel32(x, y, newColor);
+};
+/**
+ * Linearly blends a new pixel with an existing color value in a canvas.
+ * Compared to {@linkcode putPixel32}, this function supports sub-pixel placement, but is dramatically slower.
+ * @param canvas - The canvas to interact with.
+ * @param x - The X coordinate at which to place the pixel.
+ * @param y - The Y coordinate at which to place the pixel.
+ * @param color - The color of the pixel.
+ * @param alpha - The alpha value to use to blend the pixel with existing color at the location.
+ */
+export const putSubPixel32 = (canvas, x, y, color, alpha) => {
+    if (canvas.width <= x || x < 0 || canvas.height <= y || y < 0) {
+        return;
+    }
+    const xweight = x - Math.trunc(x);
+    const yweight = y - Math.trunc(y);
+    const xweightn = 1 - xweight;
+    const yweightn = 1 - yweight;
+    const alpha0 = xweightn * yweightn * alpha;
+    const alpha1 = xweight * yweightn * alpha;
+    const alpha2 = xweightn * yweight * alpha;
+    const alpha3 = xweight * yweight * alpha;
+    putPixel32(canvas, x + 0, y + 0, color, alpha0);
+    putPixel32(canvas, x + 1, y + 0, color, alpha1);
+    putPixel32(canvas, x + 0, y + 1, color, alpha2);
+    putPixel32(canvas, x + 1, y + 1, color, alpha3);
+};
+//# sourceMappingURL=canvas2d.js.map

package/lib/graphics/canvas2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.js","sourceRoot":"","sources":["../../source/graphics/canvas2d.ts"],"names":[],"mappings":"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"}

package/lib/graphics/canvas3d.d.ts

@@ -0,0 +1,41 @@
+import { Canvas } from "./canvas.js";
+/**
+ * A canvas to interact with WebGL.
+ */
+export declare class Canvas3D extends Canvas {
+    #private;
+    /**
+     * Retrieves the rendering context of the canvas.
+     * @returns The rendering context of the canvas.
+     */
+    get context(): WebGL2RenderingContext;
+    /**
+     * Constructs a new {@linkcode Canvas3D}.
+     * @param canvas - The canvas to wrap.
+     */
+    constructor(canvas: HTMLCanvasElement);
+    /**
+     * Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
+     */
+    refreshCanvasNode(): void;
+    /**
+     * Does nothing.
+     */
+    update(): void;
+    /**
+     * Does nothing.
+     */
+    render(): void;
+    /**
+     * Not supported.
+     * @param _color - Ignored
+     */
+    clearWith(_color: number): void;
+    /**
+     * Not supported.
+     * @param _frameTimes - Ignored.
+     * @param _frameTime - Ignored.
+     * @param _timeDelta - Ignored.
+     */
+    renderFpsInfo(_frameTimes: Array<number>, _frameTime: number, _timeDelta: number): void;
+}

package/lib/graphics/canvas3d.js

@@ -0,0 +1,67 @@
+import { mustExist } from "../data/nil.js";
+import { NotImplementedError } from "../errors/NotImplementedError.js";
+import { Canvas } from "./canvas.js";
+/**
+ * A canvas to interact with WebGL.
+ */
+export class Canvas3D extends Canvas {
+    /**
+     * The rendering context of the canvas.
+     */
+    #context;
+    /**
+     * Retrieves the rendering context of the canvas.
+     * @returns The rendering context of the canvas.
+     */
+    get context() {
+        return this.#context;
+    }
+    /**
+     * Constructs a new {@linkcode Canvas3D}.
+     * @param canvas - The canvas to wrap.
+     */
+    constructor(canvas) {
+        super(canvas);
+        this.#context = mustExist(this.canvasElement.getContext("webgl2", {
+            alpha: false,
+        }), "Unable to create rendering context for offscreen canvas.");
+    }
+    /**
+     * Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
+     */
+    refreshCanvasNode() {
+        this.#context = mustExist(this.canvasElement.getContext("webgl2", {
+            alpha: false,
+            desynchronized: true,
+        }), "Unable to create rendering context for offscreen canvas.");
+    }
+    /**
+     * Does nothing.
+     */
+    update() {
+        // There is nothing to do here.
+    }
+    /**
+     * Does nothing.
+     */
+    render() {
+        // There is nothing to do here.
+    }
+    /**
+     * Not supported.
+     * @param _color - Ignored
+     */
+    clearWith(_color) {
+        throw new NotImplementedError();
+    }
+    /**
+     * Not supported.
+     * @param _frameTimes - Ignored.
+     * @param _frameTime - Ignored.
+     * @param _timeDelta - Ignored.
+     */
+    renderFpsInfo(_frameTimes, _frameTime, _timeDelta) {
+        throw new NotImplementedError();
+    }
+}
+//# sourceMappingURL=canvas3d.js.map

package/lib/graphics/canvas3d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas3d.js","sourceRoot":"","sources":["../../source/graphics/canvas3d.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,MAAM;IACnC;;OAEG;IACH,QAAQ,CAAyB;IACjC;;;OAGG;IACH,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IAED;;;OAGG;IACH,YAAY,MAAyB;QACpC,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,QAAQ,GAAG,SAAS,CACxB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE;YACvC,KAAK,EAAE,KAAK;SACZ,CAAC,EACF,0DAA0D,CAC1D,CAAC;IACH,CAAC;IAED;;OAEG;IACH,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,SAAS,CACxB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE;YACvC,KAAK,EAAE,KAAK;YACZ,cAAc,EAAE,IAAI;SACpB,CAAC,EACF,0DAA0D,CAC1D,CAAC;IACH,CAAC;IAED;;OAEG;IACH,MAAM;QACL,+BAA+B;IAChC,CAAC;IACD;;OAEG;IACH,MAAM;QACL,+BAA+B;IAChC,CAAC;IAED;;;OAGG;IACH,SAAS,CAAC,MAAc;QACvB,MAAM,IAAI,mBAAmB,EAAE,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACH,aAAa,CACZ,WAA0B,EAC1B,UAAkB,EAClB,UAAkB;QAElB,MAAM,IAAI,mBAAmB,EAAE,CAAC;IACjC,CAAC;CACD"}

package/lib/graphics/color.d.ts

@@ -0,0 +1,22 @@
+/**
+ * input: h in [0,360] and s,v in [0,1] - output: r,g,b in [0,1]
+ * @see https://stackoverflow.com/a/54024653
+ */
+export declare const hsv2rgb: (h: number, s: number, v: number) => number[];
+/**
+ * input: h in [0,360] and s,l in [0,1] - output: r,g,b in [0,1]
+ * @see https://stackoverflow.com/a/54014428
+ */
+export declare const hsl2rgb: (h: number, s: number, l: number) => number[];
+/**
+ * input: r,g,b in [0,1], out: h in [0,360) and s,v in [0,1]
+ * @see https://stackoverflow.com/a/54070620
+ */
+export declare const rgb2hsv: (r: number, g: number, b: number) => number[];
+/**
+ * in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
+ * @see https://stackoverflow.com/a/54071699
+ */
+export declare const rgb2hsl: (r: number, g: number, b: number) => number[];
+export declare const hsl2hsv: (h: number, s: number, l: number, v?: number) => number[];
+export declare const hsv2hsl: (h: number, s: number, v: number, l?: number, m?: number) => number[];

package/lib/graphics/color.js

@@ -0,0 +1,38 @@
+/**
+ * input: h in [0,360] and s,v in [0,1] - output: r,g,b in [0,1]
+ * @see https://stackoverflow.com/a/54024653
+ */
+export const hsv2rgb = (h, s, v) => {
+    const f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
+    return [f(5), f(3), f(1)];
+};
+/**
+ * input: h in [0,360] and s,l in [0,1] - output: r,g,b in [0,1]
+ * @see https://stackoverflow.com/a/54014428
+ */
+export const hsl2rgb = (h, s, l) => {
+    const a = s * Math.min(l, 1 - l);
+    const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return [f(0), f(8), f(4)];
+};
+/**
+ * input: r,g,b in [0,1], out: h in [0,360) and s,v in [0,1]
+ * @see https://stackoverflow.com/a/54070620
+ */
+export const rgb2hsv = (r, g, b) => {
+    const v = Math.max(r, g, b), c = v - Math.min(r, g, b);
+    const h = c && (v === r ? (g - b) / c : v === g ? 2 + (b - r) / c : 4 + (r - g) / c);
+    return [60 * (h < 0 ? h + 6 : h), v && c / v, v];
+};
+/**
+ * in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
+ * @see https://stackoverflow.com/a/54071699
+ */
+export const rgb2hsl = (r, g, b) => {
+    const v = Math.max(r, g, b), c = v - Math.min(r, g, b), f = 1 - Math.abs(v + v - c - 1);
+    const h = c && (v === r ? (g - b) / c : v === g ? 2 + (b - r) / c : 4 + (r - g) / c);
+    return [60 * (h < 0 ? h + 6 : h), f ? c / f : 0, (v + v - c) / 2];
+};
+export const hsl2hsv = (h, s, l, v = s * Math.min(l, 1 - l) + l) => [h, v ? 2 - (2 * l) / v : 0, v];
+export const hsv2hsl = (h, s, v, l = v - (v * s) / 2, m = Math.min(l, 1 - l)) => [h, m ? (v - l) / m : 0, l];
+//# sourceMappingURL=color.js.map

package/lib/graphics/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../source/graphics/color.ts"],"names":[],"mappings":"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"}

package/lib/graphics/core.d.ts

@@ -0,0 +1,89 @@
+/**
+ * The golden ratio.
+ * @see {@link https://en.wikipedia.org/wiki/Golden_ratio}
+ */
+export declare const GOLDEN_RATIO = 1.618033988749;
+/**
+ * Constrains a color component value to single-byte range (`0`-`255`).
+ * @param c - A color component value.
+ * @returns The input value constrained into single-byte range.
+ */
+export declare const safeRGBComponent: (c: number) => number;
+/**
+ * Constructs a 32bit integer value that represents an RGBA color value.
+ * @param r - The R component.
+ * @param g - The G component.
+ * @param b - The B component.
+ * @param a - The A component.
+ * @returns The constructed color value.
+ */
+export declare const fromRGBA: (r: number, g: number, b: number, a: number) => number;
+/**
+ * Constructs a 32bit integer value that represents an RGBA color value.
+ * The A component is fixed to `255`
+ * @param r - The R component.
+ * @param g - The G component.
+ * @param b - The B component.
+ * @returns The constructed color value.
+ */
+export declare const fromRGB: (r: number, g: number, b: number) => number;
+/**
+ * Extracts the R component from a color value.
+ * @param color - The color value.
+ * @returns The R component of the color value.
+ */
+export declare const getR: (color: number) => number;
+/**
+ * Extracts the G component from a color value.
+ * @param color - The color value.
+ * @returns The G component of the color value.
+ */
+export declare const getG: (color: number) => number;
+/**
+ * Extracts the B component from a color value.
+ * @param color - The color value.
+ * @returns The B component of the color value.
+ */
+export declare const getB: (color: number) => number;
+/**
+ * Extracts the A component from a color value.
+ * @param color - The color value.
+ * @returns The A component of the color value.
+ */
+export declare const getA: (color: number) => number;
+/**
+ * Returns a new color that is a blend between a source and a destination
+ * color linerally. The alpha component in these colors is ignored. Instead, the provided
+ * `alpha` value is used to blend between the two colors.
+ * @param src - The source color.
+ * @param dst - The destination color.
+ * @param alpha - The alpha value to use for blending.
+ * @returns The blended color.
+ */
+export declare const blend: (src: number, dst: number, alpha: number) => number;
+/**
+ * Returns a new color that is a blend between a source and a destination
+ * color additively. The alpha component in these colors is ignored. Instead, the provided
+ * `alpha` value is used to blend between the two colors.
+ * @param src - The source color.
+ * @param dst - The destination color.
+ * @param alpha - The alpha value to use for blending.
+ * @returns The blended color.
+ */
+export declare const blendAdditive: (src: number, dst: number, alpha: number) => number;
+/**
+ * Returns a new color that is a blend between a source and a destination
+ * color subtractively. The alpha component in these colors is ignored. Instead, the provided
+ * `alpha` value is used to blend between the two colors.
+ * @param src - The source color.
+ * @param dst - The destination color.
+ * @param alpha - The alpha value to use for blending.
+ * @returns The blended color.
+ */
+export declare const blendSubtractive: (src: number, dst: number, alpha: number) => number;
+/**
+ * Converts a color value to grayscale.
+ * @param color - The color to convert.
+ * @returns The grayscale value appropriate for the color.
+ */
+export declare const toGrayScale: (color: number) => number;