Skip to content

Latest commit

 

History

History
181 lines (138 loc) · 9.94 KB

README.md

File metadata and controls

181 lines (138 loc) · 9.94 KB

@thi.ng/rdom-canvas

npm version npm downloads Mastodon Follow

Note

This is one of 199 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

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

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: 715 bytes

Dependencies

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

Usage examples

Nine 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

API

Generated API docs

TODO

Authors

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
}

License

© 2020 - 2024 Karsten Schmidt // Apache License 2.0