0.1.0 • Published 5 years ago
dumas v0.1.0
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
0.1.0
5 years ago