@dabrush/engine

DOM-free brushing state machine for Distortion-aware brushing.

Most web apps should start with @dabrush/web. Use this package directly when you want to own rendering yourself, for example in Canvas, WebGL, Svelte, Vue, Observable, or a custom native wrapper.

Install From GitHub

yarn add github:distortion-aware-brushing/engine#main
# or
npm install github:distortion-aware-brushing/engine#main

The package is not published to npm yet. Its @dabrush/schema dependency is also installed from GitHub.

Input

The engine consumes a preprocessed DabDataset, not raw HD/LD matrices.

import { buildDabDataset } from "@dabrush/preprocess-js";
import { createBrushingEngine } from "@dabrush/engine";

const dataset = buildDabDataset({ hd, ld });
const engine = createBrushingEngine(dataset, {
  technique: "dab",
  width: 620,
  height: 620,
  painterRadius: 34,
  pointSize: 5
});

Supported techniques:

• dab: Distortion-aware brushing
• sb: Similarity brushing
• mbb: M-Ball brushing
• ddb: Data-driven brushing

Event Loop

Feed viewport-space pointer events into the engine, call tick(), and render the returned frame.

canvas.addEventListener("pointermove", (event) => {
  engine.pointerMove({ x: event.offsetX, y: event.offsetY, shiftKey: event.shiftKey });
});

canvas.addEventListener("pointerdown", (event) => {
  engine.pointerDown({ x: event.offsetX, y: event.offsetY, shiftKey: event.shiftKey });
});

canvas.addEventListener("pointerup", () => {
  engine.pointerUp();
});

canvas.addEventListener("wheel", (event) => {
  event.preventDefault();
  engine.wheel(event.deltaY);
});

function draw() {
  const frame = engine.tick();
  render(frame);
  requestAnimationFrame(draw);
}

draw();

Frame Output

engine.tick() returns a BrushingFrame.

type BrushingFrame = {
  mode: "inspect" | "initiate" | "brush" | "rest" | "reconstruct";
  technique: "dab" | "sb" | "mbb" | "ddb";
  width: number;
  height: number;
  points: Array<{
    index: number;
    x: number;
    y: number;
    color: string;
    opacity: number;
    size: number;
    brushed: boolean;
    border: boolean;
  }>;
  brushes: Array<{
    id: number;
    color: string;
    points: number[];
    isCurrent: boolean;
  }>;
};

Optional painter, lens, and region fields describe interaction overlays to draw.

Controls

engine.addBrush();
engine.removeBrush(0);
engine.setTechnique("sb");
engine.reset();

const brushes = engine.getBrushes();
const frame = engine.getFrame();
const mode = engine.getMode();

Notes

• This package has no DOM dependency.
• It expects interaction coordinates in the same viewport used for rendering.
• If you need the faithful original Canvas behavior and image glyph rendering, use @dabrush/web with implementation: "original".