New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

trianglify

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

trianglify - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0-next.0

.babelrc
.browserslistrc
.github/workflows/build.yml
changelog.txt
dist/trianglify.bundle.debug.js
dist/trianglify.bundle.js
dist/trianglify.js
examples/color-function-example.html
examples/save-as-svg.js
rollup.config.js
src/__snapshots__/trianglify.browser.test.js.snap
src/__snapshots__/trianglify.node.test.js.snap
src/pattern.js
src/trianglify.browser.test.js
src/trianglify.js
src/trianglify.node.test.js
src/utils/colorbrewer.js
src/utils/colorFunctions.js
src/utils/debugRender.js
src/utils/geom.js
src/utils/mulberry32.js

6

CONTRIBUTING.md

@@ -10,10 +10,12 @@ # Contributing Guidelines

If you're submitting a bug, please include the browser(s) and browser version(s) that you have encountered the bug in.
If you're submitting a bug, please include the enivronment (browser/node) and relevant environment version(s) that you have encountered the bug in.
## Pull Requests
*Important: if you are submitting a pull request that does not address an open issue in the issue tracker, it would be a very good idea to create an issue to discuss your proposed changes/additions before working on them.*
1. Fork the repo on GitHub.
2. Install dependencies with `npm install`
2. Create a topic branch and make your changes.
3. Run `gulp` to test your code and compile it to trianglify.min.js.
3. Run `npm run ci` to test your code and compile it to trianglify.min.js.
4. Submit a pull request to merge your topic branch into `master`.

35

examples/save-as-png.js
// Basic command-line example
// Usage: node save-as-png.js filename.png
var fs = require('fs');
var Trianglify = require('../lib/trianglify.js');
// Usage: node save-as-png.js
var fs = require('fs')
var trianglify = require('../dist/trianglify.js')
if (process.argv.length < 3) {
console.log('Please specify a filename');
console.log('Usage: node save-as-png.js filename.png');
return;
}
// Generate a pattern and then grab the PNG data uri
var pngURI = Trianglify({
const canvas = trianglify({
width: 1920,
height: 1080,
cell_size: Math.random()*200 + 40,
x_colors: 'random',
variance: Math.random(),
}).png();
cellSize: Math.random() * 200 + 40,
xColors: 'random',
variance: Math.random()
}).toCanvas()
// Strip off the uri part of the data uri, leaving the data
var data = pngURI.substr(pngURI.indexOf('base64') + 7);
// Decode the base64 encoded blob into a buffer
var buffer = new Buffer.from(data, 'base64');
// Save the buffer to a file
fs.writeFileSync(process.argv[2], buffer);
// Save the buffer to a file. See the node-canvas docs for a full
// list of all the things you can do with this Canvas object:
// https://github.com/Automattic/node-canvas
const file = fs.createWriteStream('trianglify.png')
canvas.createPNGStream().pipe(file)

87

package.json
{
"name": "trianglify",
"version": "3.0.0",
"version": "4.0.0-next.0",
"description": "Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.",
"main": "lib/trianglify.js",
"main": "dist/trianglify.js",
"browser": "dist/trianglify.umd.js",
"module": "dist/trianglify.module.js",
"scripts": {
"lint": "standard",
"test": "jest",
"build": "rollup -c",
"dev": "rollup -c -w",
"publish-beta": "npm build && npm publish --tag next",
"ci": "npm run lint && npm run build && npm run test"
},
"dependencies": {
"chroma-js": "^0.6.3",
"colors": "^1.1.2",
"delaunator": "^1.0.4",
"jsdom": "^7.0.2",
"natives": "^1.1.3",
"seedrandom": "^2.3.11"
},
"optionalDependencies": {
"chroma-js": "^2.1.0",
"delaunator": "^4.0.1",
"canvas": "^2.6.1"

@@ -26,5 +30,14 @@ },

"svg",
"d3.js",
"visualization"
"canvas",
"visualization",
"pattern",
"lowpoly"
],
"standard": {
"parser": "babel-eslint",
"ignore": [
"dist",
"**/vendor/**"
]
},
"author": "Quinn Rohlf <qr@qrohlf.com>",

@@ -36,40 +49,16 @@ "license": "GPL-3.0",

"homepage": "https://github.com/qrohlf/trianglify",
"scripts": {
"test": "mocha test/test.js",
"start": "gulp",
"postinstall": "node scripts/postinstall.js"
},
"browser": {
"jsdom": false,
"canvas": false
},
"devDependencies": {
"browserify": "^9.0.3",
"chai": "^2.1.0",
"del": "^0.1.1",
"gulp": "^3.8.6",
"gulp-babel-minify": "^0.2.0",
"gulp-bump": "^0.1.11",
"gulp-filter": "^1.0.2",
"gulp-git": "^0.5.2",
"gulp-jshint": "^1.7.1",
"gulp-mocha": "^5.0.0",
"gulp-rename": "^1.2.0",
"gulp-sourcemaps": "^1.5.0",
"gulp-tag-version": "^1.1.0",
"jshint-stylish": "^0.4.0",
"mocha": "^2.1.0",
"node-notifier": "^5.2.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.0.0"
},
"npmName": "trianglify",
"npmFileMap": [
{
"basePath": "dist",
"files": [
"trianglify.min.js"
]
}
]
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-syntax-class-properties": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@rollup/plugin-babel": "^5.0.0",
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-node-resolve": "^7.1.3",
"babel-eslint": "^10.1.0",
"jest": "^25.5.4",
"rollup": "^2.7.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-terser": "^5.3.0",
"standard": "^14.3.3"
}
}

226

Readme.md

@@ -1,2 +0,2 @@

# Trianglify [![Build Status](https://travis-ci.org/qrohlf/trianglify.svg?branch=master)](https://travis-ci.org/qrohlf/trianglify)
# Trianglify ![Build Status](https://github.com/qrohlf/trianglify/workflows/build/badge.svg)

@@ -8,2 +8,9 @@

# Contents
[📦 Getting Trianglify](#getting-trianglify)
[🏎 Quickstart](#quickstart)
[⚖️ Licensing](#licensing)
[📖 API](#api)
[🎨 Configuration](#configuration)
# Getting Trianglify

@@ -14,33 +21,46 @@

```
npm install trianglify
npm install --save trianglify
```
Include it in your HTML via CDNJS:
Include it in your application via the unpkg CDN:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
```
<script src='https://unpkg.com/trianglify@^4/dist/trianglify.bundle.js'></script>
```
Or clone the repo:
Or download a .zip from the [**releases page**](https://github.com/qrohlf/trianglify/releases).
```
git clone https://github.com/qrohlf/trianglify.git
```
# Quickstart
**Browsers**
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
<script src='https://unpkg.com/trianglify@^4/dist/trianglify.bundle.js'></script>
<script>
var pattern = Trianglify({
width: window.innerWidth,
height: window.innerHeight
});
document.body.appendChild(pattern.canvas())
const pattern = trianglify({
width: window.innerWidth,
height: window.innerHeight
})
document.body.appendChild(pattern.toCanvas())
</script>
```
See https://qrohlf.com/trianglify for interactive examples and a walkthrough of the most commonly-used Trianglify options.
**Node**
```js
const trianglify = require('trianglify')
const fs = require('fs')
const canvas = trianglify({
width: 1920,
height: 1080
}).toCanvas()
const file = fs.createWriteStream('trianglify.png')
canvas.createPNGStream().pipe(file)
```
You can see the [`examples/`](./examples) folder for more usage examples.
The https://trianglify.io/ GUI is a good place to play around with the various configuration parameters and see their effect on the generated output, live.
# Licensing

@@ -55,106 +75,180 @@

Trianglify exposes a single function into the global namespace, called `Trianglify`. This takes a single options object as an argument and returns a pattern object.
Trianglify is primarily used by calling the `trianglify` function, which returns a `trianglify.Pattern` object.
```js
var Trianglify = require('trianglify'); // only needed in node.js
var pattern = Trianglify({width: 200, height: 200})
// load the library, either via a window global (browsers) or require call (node)
// in es-module environments, you can `import trianglify from 'trianglify'` as well
const trianglify = window.trianglify || require('trianglify')
const options = { height: 400, width: 600 }
const pattern = trianglify(options)
console.log(pattern instanceof trianglify.Pattern) // true
```
The pattern object contains data about the generated pattern's options and geometry, as well as rending implementations.
## pattern
### pattern.opts
This object holds the generated geometry and colors, and exposes a number of methods for rendering this geometry to the DOM or a Canvas.
**`pattern.opts`**
Object containing the options used to generate the pattern.
### pattern.polys
The colors and vertices of the polygons that make up the pattern, in the following format:
**`pattern.points`**
The pseudo-random point grid used for the pattern geometry, in the following format:
```js
[
['color', [vertex, vertex, vertex]],
['color', [vertex, vertex, vertex]],
...
[x, y],
[x, y],
[x, y],
// and so on...
]
```
### pattern.svg([opts])
Rendering function for SVG. Returns an SVGElement DOM node. Takes an optional options object. Currently the only supported option is `{includeNamespace: true}`, which will cause the output to include an `xmlns='http://www.w3.org/2000/svg'` attribute. This is helpful if you intend to serialize the svg string to a file, as most browsers and vector graphics programs require it. See [#41](https://github.com/qrohlf/trianglify/issues/41) for more details about this option.
**`pattern.polys`**
### pattern.canvas([HTMLCanvasElement])
The array of colored polygons that make up the pattern, in the following format:
Rendering function for canvas. When called with no arguments returns a HTMLCanvasElement DOM node. When passed an existing canvas element as an argument, renders the pattern to the existing canvas.
```js
// {x, y} center of the first polygon in the pattern
pattern.polys[0].centroid
To use this in a node.js environment, the optional dependency [node-canvas](https://github.com/Automattic/node-canvas) needs to be installed.
// [i, i, i] three indexes into the pattern.points array,
// defining the shape corners
pattern.polys[0].vertexIndices
### pattern.png()
// Chroma.js color object defining the color of the polygon
pattern.polys[0].color
```
Rendering function for PNG. Returns a data URI with the PNG data in base64 encoding. See [examples/save-as-png.js](examples/save-as-png.js) for an example of decoding this into a file.
**`pattern.toSVG(destSVG?, svgOpts?)`**
# Options
Rendering function for SVG. In browser or browser-like (e.g. JSDOM) environments, this will return a SVGElement DOM node. In node environments, this will return a lightweight node tree structure that can be serialized to a valid SVG string using the `toString()` function.
Trianglify is configured by an options object passed in as the only argument. The following option keys are supported:
If an existing svg element is passed as the `destSVG`, this function will render the pattern to the pre-existing element instead of creating a new one.
### width
The `svgOpts` option allows for some svg-specific customizations to the output:
```js
const svgOpts = {
// Include or exclude the xmlns='http://www.w3.org/2000/svg' attribute on
// the root <svg> tag. See https://github.com/qrohlf/trianglify/issues/41
// for additional details on why this is sometimes important
includeNamespace: true,
// Controls how many decimals to round coordinate values to.
// You can set this to -1 to disable rounding. Default is 1.
coordinateDecimals: 1
}
```
**`pattern.toSVGTree(svgOpts?)`**
Alternate rendering function for SVG. Returns a lightweight node tree structure that can be seralized to a valid SVG string using the `toString()` function. In node environments, this is an alias for
`pattern.toSVG()`.
**`pattern.toCanvas(destCanvas?, canvasOpts?)`**
Rendering function for canvas. In browser and browser-like environments, returns a Canvas HTMLElement node. In node environments, this will return a node-canvas object which follows [a superset of the Web Canvas API](https://github.com/Automattic/node-canvas#documentation).
If an existing canvas element is passed as the `destCanvas`, this function will render the pattern to the pre-existing element instead of creating a new one.
To use this in a node.js environment, the optional dependency [node-canvas](https://github.com/Automattic/node-canvas) needs to be installed as a dependency of your project `npm install -save canvas`.
The `canvasOpts` option allows for some canvas-specific customizations to the output:
```js
const canvasOpts = {
// render the canvas at native pixel densities for high-dpi ("retina")
// devices. This is a browser-only feature, as node environments do
// not typically expose information about the pixel ratio of the device
// they are running on
retina: true
}
```
# Configuration
Trianglify is configured by an options object passed in as the only argument. The following option keys are supported, see below for a complete description of what each option does.
```js
const defaultOptions = {
width: 600,
height: 400,
cellSize: 75,
variance: 0.75,
seed: null,
xColors: 'random',
yColors: 'match',
fill: true,
palette: trianglify.colorbrewer,
colorSpace: 'lab',
colorFunction: trianglify.colorFunctions.interpolateLinear(0.5),
strokeWidth: 0,
points: null
}
```
**`width`**
Integer, defaults to `600`. Specify the width in pixels of the pattern to generate.
### height
**`height`**
Integer, defaults to `400`. Specify the height in pixels of the pattern to generate.
### cell_size
**`cellSize`**
Integer, defaults to `75`. Specify the size of the mesh used to generate triangles. Larger values will result in coarser patterns, smaller values will result in finer patterns. Note that very small values may dramatically increase the runtime of Trianglify.
Integer, defaults to `75`. Specify the size in pixels of the mesh used to generate triangles. Larger values will result in coarser patterns, smaller values will result in finer patterns. Note that very small values may dramatically increase the runtime of Trianglify.
### variance
**`variance`**
Decimal value between 0 and 1 (inclusive), defaults to `0.75`. Specify the amount of randomness used when generating triangles.
Decimal value between 0 and 1 (inclusive), defaults to `0.75`. Specify the amount of randomness used when generating triangles. You may set this higher than 1, but doing so may result in patterns that include "gaps" at the edges.
### seed
**`seed`**
Number or string, defaults to `null`. Seeds the random number generator to create repeatable patterns. When set to null, the random number will be seeded with random values from the environment. An example usage would be passing in blog post titles as the seed to generate unique trianglify patterns for every post on a blog that won't change when the page reloads.
String, defaults to `null`. Seeds the random number generator to create repeatable patterns. When set to null, the RNG will be seeded with random values from the environment. An example usage would be passing in blog post titles as the seed to generate unique but consistient trianglify patterns for every post on a blog site.
### x_colors
**`xColors`**
False, string, or array of CSS-formatted colors, default is `'random'`. Specify the color gradient used on the x axis.
If false, the colors will not vary over the x axis; this requires the y_color to have a specified value.
Valid string values are 'random', or the name of a [colorbrewer palette](http://bl.ocks.org/mbostock/5577023) (i.e. 'YlGnBu' or 'RdBu'). When set to 'random', a gradient will be randomly selected from the colorbrewer library.
Valid string values are 'random' or the name of a [colorbrewer palette](http://bl.ocks.org/mbostock/5577023) (i.e. 'YlGnBu' or 'RdBu'). When set to 'random', a gradient will be randomly selected from the colorbrewer library.
Valid array values should specify the color stops in any CSS format (i.e. `['#000000', '#4CAFE8', '#FFFFFF']`).
### y_colors
**`yColors`**
False, string or array of CSS-formatted colors, default is `'match_x'`. When set to 'match_x' the same gradient will be used on both axes.
If false, the colors will not vary over the y axis; this requires the x_color to have a specified value.
Otherwise, accepts the same options as x_colors.
False, string or array of CSS-formatted colors, default is `'match'`. When set to 'match' the x-axis color gradient will be used on both axes. Otherwise, accepts the same options as xColors.
### color_space
**`palette`**
The array of color combinations to pick from when using `random` for the xColors or yColors. See [`utils/colorbrewer.js`](./utils/colorbrewer.js) for the format of this data.
**`colorSpace`**
String, defaults to `'lab'`. Set the color space used for generating gradients. Supported values are rgb, hsv, hsl, hsi, lab and hcl. See this [blog post](https://vis4.net/blog/posts/avoid-equidistant-hsv-colors/) for some background on why this matters.
### color_function
**`colorFunction`**
Specify a custom function for coloring triangles, defaults to `null`. Accepts a function to override the standard gradient coloring that takes the x,y coordinates of a triangle's centroid as arguments and returns a CSS-formatted color string representing the color that triangle should have.
Specify a custom function for coloring triangles, defaults to `null`. Accepts a function to override the standard gradient coloring, which is passed a variety of data about the pattern and each polygon and must return a Chroma.js color object.
Here is an example color function that uses the HSL color format to generate a rainbow pattern:
See [`examples/color-function-example.html`](./examples/color-function-example.html) and [`utils/colorFunctions.js`](./utils/colorFunctions.js) for more information about the built-in color functions, and how to write custom color functions.
```javascript
var colorFunc = function(x, y) {
return 'hsl('+Math.floor(Math.abs(x*y)*360)+',80%,60%)';
};
**`fill`**
var pattern = Trianglify({color_function: colorFunc})
```
Boolean, defaults to `true`. Specifies whether the polygons generated by Trianglify should be filled in.
### stroke_width
**`strokeWidth`**
Number, defaults to `1.51`. Specify the width of the stroke on triangle shapes in the pattern. The default value is the ideal value for eliminating antialiasing artifacts when rendering patterns to a canvas.
Number, defaults to 0. Specify the width of the strokes used to outline the polygons. This can be used in conjunction with `fill: false` to generate weblike patterns.
### points
**`points`**
Array of points ([x, y]) to trianglulate. When not specified an array randomised points is generated filling the space.
Array of points ([x, y]) to triangulate, defaults to null. When not specified an array randomised points is generated filling the space. Points must be within the coordinate space defined by `width` and `height`. See [`examples/custom-points-example.html`](./examples/custom-points-example.html) for a demonstration of how this option can be used to generate circular trianglify patterns.
.travis.yml
bower.json
dist/trianglify.min.js
gulpfile.js
lib/colorbrewer.js
lib/pattern.js
lib/points.js
lib/trianglify.js
scripts/postinstall.js
test/test.html
test/test.js
.nvmrc

Sorry, the diff of this file is not supported yet

examples/basic-web-example.html

Sorry, the diff of this file is not supported yet

examples/custom-points-example.html

Sorry, the diff of this file is not supported yet

examples/transparency-example.html

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc