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
string
dumas(shape, [options]) ⇒ 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 |