@thi.ng/rdom-canvas

v1.1.3

Published

4 days ago

@thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing

0High
0Medium
0Low

thi.ng

animation browser canvas component declarative graphics hiccup rdom reactive scenegraph typescript ui wrapper

npm downloads

[!NOTE] This is one of 211 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.
🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

About

@thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing. Please consult these packages' READMEs for further background information...

General usage

As with most thi.ng/rdom components, the state (aka geometry/scenegraph) for the canvas component is being sourced from a thi.ng/rstream subscription. The canvas redraws every time that subscription delivers a new value. The size of the canvas can be given as a subscription too and if so will also automatically trigger resizing of the canvas.

The geometry to rendered to the canvas is expressed as thi.ng/hiccup, specifically the flavor used by thi.ng/hiccup-canvas, which (not just coincidentally) is the same as also used by thi.ng/geom shapes.

import { circle, group } from "@thi.ng/geom";
import { $canvas } from "@thi.ng/rdom-canvas";
import { fromRAF } from "@thi.ng/rstream";
import { repeatedly } from "@thi.ng/transducers";

// create geometry stream/subscription
const geo = fromRAF().map((t) =>
  // shape group w/ attribs (also see section in readme)
  group({ __background: "#0ff" }, [
    // create 10 circles
    ...repeatedly(
      (i) =>
        circle(
          [
            Math.sin(t * 0.01 + i * 0.5) * 150 + 300,
            Math.sin(t * 0.03 + i * 0.5) * 150 + 300
          ],
          50,
          // colors can be given as RGBA vectors or CSS
          { fill: [i * 0.1, 0, i * 0.05] }
        ),
      10
    )
  ])
);

// create & mount canvas component (w/ fixed size)
$canvas(geo, [600, 600]).mount(document.body);

Control attributes

The root shape/group support the following special attributes:

__background: background color. If given, fills the canvas will given color before drawing
__clear: clear background flag. If true clears the canvas before drawing
__dpr: device pixel ratio aka pixel density override (else defaults to window.devicePixelRatio)

Also see relevant section in the thi.ng/hiccup-canvas README...

Status

ALPHA - bleeding edge / work-in-progress

Search or submit any issues for this package

Related packages

@thi.ng/hiccup-canvas - Hiccup shape tree renderer for vanilla Canvas 2D contexts
@thi.ng/hiccup-svg - SVG element functions for @thi.ng/hiccup & related tooling
@thi.ng/geom - Functional, polymorphic API for 2D geometry types & SVG generation
@thi.ng/scenegraph - Extensible 2D/3D scene graph with @thi.ng/hiccup-canvas support

Installation

yarn add @thi.ng/rdom-canvas

ESM import:

import * as rc from "@thi.ng/rdom-canvas";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/rdom-canvas"></script>

JSDelivr documentation

Package sizes (brotli'd, pre-treeshake): ESM: 718 bytes

Dependencies

Note: @thi.ng/api is in most cases a type-only import (not used at runtime)

Usage examples

10 projects in this repo's /examples directory are using this package:

| Screenshot | Description | Live demo | Source | |:--------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------|:---------------------------------------------------------|:--------------------------------------------------------------------------------------| | | Basic 2D boid simulation and spatial indexing neighbor lookups | Demo | Source | | | Interactive visualization of closest points on ellipses | Demo | Source | | | 2.5D hidden line visualization of digital elevation files (DEM) | Demo | Source | | | Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang | Demo | Source | | | Quasi-random lattice generator | Demo | Source | | | Minimal rdom-canvas animation | Demo | Source | | | rdom & hiccup-canvas interop test | Demo | Source | | | Fitting, transforming & plotting 10k data points per frame using SIMD | Demo | Source | | | Multi-layer vectorization & dithering of bitmap images | Demo | Source | | | Animated t-SNE visualization of 4D data | Demo | Source |

API

Generated API docs

TODO

Authors

Karsten Schmidt

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme