Narrating Prophetic Monks

    @thi.ng/rasterize
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    rasterize

    npm version npm downloads Twitter Follow

    This project is part of the @thi.ng/umbrella monorepo.

    About

    2D shape drawing & rasterization.

    The functions in this package can be used with any IGrid2D compatible grid/image type (e.g. those provided by @thi.ng/pixel or @thi.ng/text-canvas).

    Currently the following functions are available. All of them support custom shader-like functions to produce "pixel" values.

    Circle

    Line

    Polygon / polyline

    Filled or outline drawing of polygons (without holes):

    Rect

    • drawRect(): Filled or outline implementation with pre-applied clipping against the target grid.

    Flood fill

    • floodFill(): Fills grid in the connected region around x,y with given value or shader

    Also see corresponding function in @thi.ng/grid-iterators.

    Custom shaders

    Conceptually similar, but not to be equaled with actual WebGL fragement shaders, many functions in this package support shader-like functions to produce per-pixel fill/color values for each individual pixel processed. These simple functions take an x and y arg (in grid-space, not normalized!) and produce a fill value for that location. A pixel is processed at most once per draw call.

    The following shader functions are provided:

    As an example, here's a simple custom UV gradient shader for drawing into a float RGBA buffer:

    import type { Shader2D } from "@thi.ng/rasterize";
    import { floatBuffer } from "@thi.ng/pixel";
    import { drawCircle } from "@thi.ng/rasterize";
    
    // custom gradient shader
    const defUVGradient = (width: number, height: number): Shader2D<number[]> =>
      (x, y) => [x/width, y/height, 0.5, 1];
    
    const W = 256;
    
    // create float RGBA pixel buffer
    const img = floatBuffer(W, W);
    
    // draw filled circle using gradient shader
    drawCircle(img, W/2, W/2, W/2 - 4, defUVGradient(W, W), true);

    result image: circle with gradient fill

    Status

    ALPHA - bleeding edge / work-in-progress

    Search or submit any issues for this package

    Related packages

    • @thi.ng/grid-iterators - 2D grid and shape iterators w/ multiple orderings
    • @thi.ng/pixel - Typedarray integer & float pixel buffers w/ customizable formats, blitting, drawing, convolution
    • @thi.ng/text-canvas - Text based canvas, drawing, tables with arbitrary formatting (incl. ANSI/HTML)

    Installation

    yarn add @thi.ng/rasterize

    ES module import:

    <script type="module" src="https://cdn.skypack.dev/@thi.ng/rasterize"></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    
    > const rasterize = await import("@thi.ng/rasterize");
    

    Package sizes (brotli'd, pre-treeshake): ESM: 1.47 KB

    Dependencies

    Usage examples

    Several demos in this repo's /examples directory are using this package.

    A selection:

    Screenshot Description Live demo Source
    Steering behavior drawing with alpha-blended shapes Demo Source

    API

    Generated API docs

    TODO

    Authors

    Karsten Schmidt

    If this project contributes to an academic publication, please cite it as:

    @misc{thing-rasterize,
      title = "@thi.ng/rasterize",
      author = "Karsten Schmidt",
      note = "https://thi.ng/rasterize",
      year = 2021
    }

    License

    © 2021 - 2022 Karsten Schmidt // Apache Software License 2.0

    Install

    npm i @thi.ng/rasterize

    DownloadsWeekly Downloads

    114

    Version

    1.0.10

    License

    Apache-2.0

    Unpacked Size

    40.6 kB

    Total Files

    26

    Last publish

    Collaborators

    • thi.ng