regl-shape

2D shape shader for regl.

A lot of the code in this package was converted from regl-line2d to fit modern development approaches. I recommend using webpack with glslify-loader to import this package.

Usage

This package is focused on minimizing memory consumption to prevent unnecessary garbage collection so that even large shapes can be rendered and animated in realtime. For this reason the package's API requires you to initialize the array of points that make up the shape only once before you create the shape. To change the point positions after creation, you have to mutate the data of this array. In order to maximize performance the point array has to be a TypedArray (I recommend Float64Array).

import createRegl from "regl";
import createShapeBuilder from "regl-shape";

const regl = createRegl({ extensions: ["ANGLE_instanced_arrays"] });
const { createShape } = createShapeBuilder(regl);

const points = new Float64Array(64);
const shape = createShape(points, {
  // ...props
});

regl.frame(() => {
  for (let i = 0; i < points.length; i++) {
    // Mutate the point positions here.
  }
  shape({
    // ...props
  });
});

If the number of the shape's points is supposed to change after creation you can do this by setting the count prop inside the draw call. Keep in mind that you can only provide values which are lower than the halved length of the initially created point array.

Properties

The shape's properties can either be passed on creation or when the shape is being drawn.

| Property | Description | Default | | --- | ------ | --- | | count | Number of points to in the shape. | 0 | | color | Stroke color of the shape. Can either be a single color or an array of colors containing a color for every point in the shape. The format of a single color is either a CSS color string or an array with 0..1 values, eg. "red" or [0, 0, 0, 1]. | "white" | | fill | Fill area enclosed by points with defined color. If fill is null the enclosed area will be transparent. | null | | opacity | Transparency of the shape's stroke (0..1). | 1 | | thickness | Thickness of the shape's stroke in px (>0). | 1 | | dashes | Array with dash lengths in px, altering color/space pairs, ie. [2,10, 5,10, ...]. null corresponds to solid line. | null | | join | Join style: "rect", "round", "bevel". Applied to caps too. | "bevel" | | miterLimit | Max ratio of the join length to the thickness. | 1 | | close | Connect last point with the first point with a stroke. | false | | overlay | Enable overlay of line segments. | false | | range | Visible data range ([minX, minY, maxX, maxY]). | null | | viewport | Area within canvas ({ x, y, width, height }). | null | | depth | Value for the z-axis of the shapes position. | 0 |

Example

import createRegl from "regl";
import createShapeBuilder from "regl-shape";

const regl = createRegl({ extensions: ["ANGLE_instanced_arrays"] });
const { createShape } = createShapeBuilder(regl);

const res = 32;
const points = new Float64Array(2 * res).fill(0);

const shape = createShape(points, {
  join: "round",
  thickness: 12,
  color: Array(res)
    .fill()
    .map(() => [Math.random(), Math.random(), Math.random()]),
});

regl.frame(({ tick }) => {
  regl.clear({ color: [0, 0, 0, 1] });

  for (let i = 0; i < res; i++) {
    const phi = (tick / 100) * (i / res) * 2 * Math.PI;
    const rad = Math.pow(0.95, i);
    points[2 * i] = rad * Math.sin(phi);
    points[2 * i + 1] = rad * Math.cos(phi);
  }

  shape();
});