SVG triangle art generator engine. Similar to Trianglify but with more point distribution, color scale, and gradient options. MIT licensed.
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.
npm i triangulator2
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);
Set to true when using in a browser environment.
SVG DOM element to feed to SVG.js (import svgdom and use svgdom.document.documentElement for server-side usage).
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.
Used to seed the random number generator.
Set the size of the generated image (points will be drawn outside this size range to guarantee that the bounds will be completely filled).
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.
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.
Set the approximate spacing between automatically generated points in pixels.
Value between 0 and 1 that determines how much randomness is introduced into the generated points (does not affect Poisson mode).
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),
If true, inverts the direction of the color scale.
Array containing the colors that make up the color packet, in hex string format.
Value between 0 and 1 that determines how much randomness is introduced into the selected colors.
If nonzero, generated color positions will be quantized into this many steps.
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.
If true, triangles will be filled with gradients instead of solid colors.
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 };},
These values determine how much influence the gradient has on the color selection in each direction along the color scale.
Stroke color for all triangles as a hex string.
Stroke width.
Draw stroke only, no fill.
Background color for the image (shown behind stroke in strokeOnly mode).