@watercolorizer/watercolorizer

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.

Installation

For node, install with npm:

npm i @watercolorizer/watercolorizer

In browsers, import it from an ESM CDN:

<script type="module">
  import { watercolorize } from 'https://unpkg.com/@watercolorizer/watercolorizer/dist/index.js'
</script>

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

Inspiration & Credits

• Tyler Hobbs talk at Strange Loop Conference 2017. Most of the core algorithms are implemented using this talk as a basis for the interface.
• Also see the associated blog: How to Hack a Painting by Tyler Hobbs, though the actual talk is perhaps more illuminating at least for me.
• The original need for this library was being inspired by artwork of Douglas Herring in the release of The Colonel's Bequest and wanting to create generative-art based on those sources.