@watercolorizer/watercolorizer
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

@watercolorizer/watercolorizer License NPM Version NPM Downloads

watercolorizer logo

Watercolorizer is a tiny graphics library for creating generative watercolor-like shapes from simple polygonal base-shapes. This core library is un-opinionated about the rendering process and instead focuses on the generative algorithm for constructing the paths to be rendered.

Getting Started

import { watercolorize } from '@watercolorizer/watercolorizer';

const polygon = [
  [20, 20],
  [50, 20],
  [50, 50],
  [20, 50],
];

for (const layer of watercolorize(poly)) {
  const [first, ...rest] = layer;
  ctx.beginPath();
  ctx.moveTo(first[0], first[1]);
  rest.forEach(([x, y]) => ctx.lineTo(x, y));
  ctx.closePath();
  ctx.fillStyle = 'rgba(0 100 255 / 10%)';
  ctx.fill();
}

Options

  • preEvolutions - Number of pre-evolutions. Default: 0
  • evolutions - Number of total evolutions. Default: 5
  • layersPerEvolution - Number of layers per evolutionary-step. Default: 3
  • layerEvolutions - Number of evolutions applied to each layer. Default: 3
  • vertexWeights - Scalar for each vertex in points which controls the magnitude of distortion per iteration. Default: undefined
  • blurWeightsOnDistort - Apply a 3-element gaussian blend on the derived weights for distorted edges. Default: false
  • simplifyAfterPreEvolution - Apply polygonal simplification after the pre-evolution phase. Default: 1
  • simplifyEachEvolution - Apply polygonal simplification during each evolutionary phase. Default: false

For example:

// Distort and subdivide the polygon 10 times and skip simplification
const options = {
  preEvolutions: 10,
  simplifyAfterPreEvolution: false,
};

for (const layer of watercolorize(poly, options)) {
  drawLayer(layer); /* however you choose to render the layer */
}

Examples

Sketches created with watercolorizer and rough.js

watercolorizer logo watercolorizer logo watercolorizer logo

Inspiration & Credits

Package Sidebar

Install

npm i @watercolorizer/watercolorizer

Weekly Downloads

19

Version

1.1.1

License

ISC

Unpacked Size

48.6 kB

Total Files

76

Last publish

Collaborators

  • 32bitkid