# triangulator2

SVG triangle art generator engine. Similar to Trianglify but with more point distribution, color scale, and gradient options. An evolution of this thing I made in 2015. Released under the MIT license.

## Install

`npm i triangulator2`

## Usage

```
const Triangulator = require('triangulator2');
const options = {
isBrowser: false,
svgInput: false,
forceSVGSize: true,
seed: Math.random(),
width: 1920,
height: 1080,
gridMode: this.GridMode.Poisson,
gridOverridde: false,
cellSize: 100,
cellRandomness: 0.3,
color: this.ColorFunction.DiagonalFromLeft,
colorScaleInvert: false,
colorPalette: ['#efee69', '#21313e'],
colorRandomness: 0.0,
quantizeSteps: 0,
colorOverride: false,
useGradient: false,
gradient: this.GradientFunction.Random,
gradientNegativeFactor: 0.03,
gradientPositiveFactor: 0.03,
strokeColor: false,
strokeWidth: false,
strokeOnly: false,
backgroundColor: '#000000',
};
const svgString = Triangulator.generate(options);
```

#### isBrowser

Set to true when using in a browser environment.

#### svgInput

SVG DOM element to feed to SVG.js (import svgdom and use `svgdom.document.documentElement`

for server-side usage).

#### forceSVGSize

If true, sets the size attributes of the SVG. It's necessary to set this to false in order to modify the width and height of an SVG element in a browser environment.

#### seed

Used to seed the random number generator.

### Grid

#### width, height

Set the size of the generated image (points will be drawn outside this size range to guarantee that the bounds will be completely filled).

#### gridMode

One of `Triangulator.GridMode`

(`Square`

, `Triangle`

, `Poisson`

, `Override`

). Determines how the points are generated. `Square`

and `Triangle`

generate grids of squares and equilateral triangles, `Poisson`

generates a Poisson disc sampling distribution.

#### gridOverride

If `gridMode`

is set to `Override`

, the array of points (arrays with two items representing x and y) passed into this option will be used to define the triangles.

#### cellSize

Set the approximate spacing between automatically generated points in pixels.

#### cellRandomness

Value between 0 and 1 that determines how much randomness is introduced into the generated points (does not affect `Poisson`

mode).

### Colors

#### color

Function that defines how colors are selected from the color scale.

Arguments are normalized (0 to 1) x and y values representing the centroid of a triangle and the return value is a value between 0 and 1 representing the position of the selected color on the scale.

Built-in color functions are in `Triangulator.ColorFunction`

:

```
Horizontal: (x, y) => x,
Vertical: (x, y) => y,
DiagonalFromLeft: (x, y) => (x + y) / 2,
DiagonalFromRight: (x, y) => (1 - x + y) / 2,
RadialFromCenter: (x, y) => Math.hypot(x - 0.5, y - 0.5) * Math.sqrt(2) * 1.1,
RadialFromBottom: (x, y) => Math.hypot(x - 0.5, y - 1.5) - 0.5,
FromEdges: (x, y) => edgeDist(x, y) * 0.3 + (1 - Math.hypot(x - 0.5, y - 0.5) * Math.sqrt(2)) * 0.7,
Noise: (sx, sy) => (x, y) => noiseGenerator.noise(x * sx, y * sy, 0),
```

#### colorScaleInvert

If true, inverts the direction of the color scale.

#### colorPalette

Array containing the colors that make up the color packet, in hex string format.

#### colorRandomness

Value between 0 and 1 that determines how much randomness is introduced into the selected colors.

#### quantizeSteps

If nonzero, generated color positions will be quantized into this many steps.

#### colorOverride

If a function is passed here, the default color selection will be bypassed. A `colorOverride`

function must accept normalized x and y values representing the centroid of a triangle as arguments and return a color as a hex string.

### Gradient

#### useGradient

If true, triangles will be filled with gradients instead of solid colors.

#### gradient

Function that defines how the gradient in each triangle is oriented.

Arguments are an array containing the points in a triangle and normalized x and y values representing the centroid. The return value must be an object containing properties `gradientVector`

and `gradientDirection`

, a normalized vector in quadrant 1 representing the overall direction of the gradient and a direction value (-1 or 1).

Currently only one built-in gradient function is implemented in `Triangulator.GradientFunction`

:

```
Random: (triangle, x, y) => {
const i = Math.floor(rng() * 3);
const p2 = triangle[(i + 1 + Math.floor(rng() * 2)) % 3];
const vector = [p2[0] - triangle[i][0], p2[1] - triangle[i][1]];
const gradientDirection = Math.sign(vector[0] * vector[1]);
let gradientVector = vector.map(a => Math.abs(a));
gradientVector = gradientVector.map(a => a / Math.max(...gradientVector));
return { gradientVector, gradientDirection };
},
```

#### gradientNegativeFactor, gradientPositiveFactor

These values determine how much influence the gradient has on the color selection in each direction along the color scale.

### Stroke

#### strokeColor

Stroke color for all triangles as a hex string.

#### strokeWidth

Stroke width.

#### strokeOnly

Draw stroke only, no fill.

#### backgroundColor

Background color for the image (shown behind stroke in strokeOnly mode).