Skip to main content

Modules

Modules let you change points, per-stamp config, stroke compositing, or stroke-end behavior without replacing the brush engine.

Module toggles demo

Enable dynamic shape, transparency, spread, or pattern modules for live brush effects.

Loading demo…
import { Brush, DynamicShapeModule, SpreadModule } from "fuderu";

const brush = new Brush(canvas, {
  color: "#111111",
  size: 24,
});

const shapeId = brush.useModule(
  new DynamicShapeModule({
    sizeJitter: 0.4,
    sizeJitterTrigger: "pressure",
  }),
);

brush.useModule(
  new SpreadModule({
    spreadRange: 0.3,
    count: 3,
  }),
);

Remove a module with the id returned by useModule:

brush.removeModule(shapeId);

Each built-in module exposes a mutable config object and bindConfig(config) for binding to an external config object.

Dynamic Shape​

DynamicShapeModule changes size, angle, and roundness per stamp.

new DynamicShapeModule({
  sizeJitter: 0.35,
  sizeJitterTrigger: "pressure",
  minDiameter: 0.25,
  angleJitter: 0.15,
  roundJitter: 0.2,
  minRoundness: 0.4,
});

The trigger fields accept "none" or "pressure".

Dynamic Transparency​

DynamicTransparencyModule changes opacity per stroke and flow per stamp.

new DynamicTransparencyModule({
  opacityJitter: 0.2,
  opacityJitterTrigger: "pressure",
  minOpacityJitter: 0.5,
  flowJitter: 0.35,
  flowJitterTrigger: "pressure",
  minFlowJitter: 0.2,
});

Opacity jitter is rolled once per stroke. Flow jitter is rolled for each stamp.

Spread​

SpreadModule creates extra nearby points for spray, splatter, and foliage-like effects.

new SpreadModule({
  spreadRange: 0.6,
  spreadTrigger: "pressure",
  count: 5,
  countJitter: 0.4,
  countJitterTrigger: "pressure",
});

Pattern​

PatternModule composites a repeated texture into the stroke.

import { PatternModule } from "fuderu";

const pattern = new PatternModule({
  scale: 0.75,
  brightness: 10,
  contrast: 20,
  blendMode: "multiply",
});

await pattern.loadPattern(
  "/textures/paper.png",
  canvas.width,
  canvas.height,
  "#f97316",
);
brush.useModule(pattern);

The optional fourth argument tints the repeated pattern before it is blended into the stroke. Call pattern.removePattern() to stop applying the texture while keeping the module registered.