README

dumas

render watercolor images

Renders images that resemble watercolor paint splotches and outputs them as svg. Based on this post by Tyler Hobbs.

Installation

$ npm install dumas

Example

So for example:

const fs = require('fs');
const dumas = require('dumas');

const shape = [
  [593, 215, 1.1],
  [407, 215, 1.5],
  [257, 324, 0.9],
  [200, 500, 0.5],
  [257, 676, 0.7],
  [407, 785, 0.9],
  [593, 785, 0.2],
  [743, 676, 1.1],
  [800, 500, 1.9],
  [743, 324, 0.3]
];

const svg = dumas(shape, {
  fill: 'rgb(245, 10, 10)',
  opacity: 0.02,
  baseSigmas: [50, 30, 20, 20, 10, 10],
  layerSigmas: [20, 10, 5, 5],
  amountOfLayers: 150,
  mutationFactor: 0.75,
  mutationSigma: 0.1
});

fs.writeFileSync('output.svg', svg);

API

dumas(shape, [options]) ⇒ `string`

Render watercolor images

Kind: global function Returns: string - The generated svg as a string

Param	Type	Default	Description
shape	`Array`		The base shape to start with, array of arrays
[options]	`Object`	`{}`	Global configuration options
[options.fill]	`string`	`"rgb(0, 0, 0)"`	Css color string, color to fill the shapes with
[options.opacity]	`number`	`0.02`	Opacity of the generated shapes, between 0 and 1
[options.baseSigmas]	`Array`	`[50, 30, 20, 20, 10, 10]`	Array of sigmas for to use for deforming the base shape
[options.layerSigmas]	`Array`	`[20, 10, 5, 5]`	Array of sigmas for to use for deforming the layer shapes
[options.amountOfLayers]	`number`	`150`	Amount of layers to generate
[options.mutationFactor]	`number`	`0.75`	Factor to reduce sigma by after every deformation round
[options.mutationSigma]	`number`	`0.1`	Sigma used for introducing some randomness in the mutationFactor

License

MIT

Usage no npm install needed!