https://github.com/maxwellito/triangulr
JavaScript class to generate maps of triangles
https://github.com/maxwellito/triangulr
Last synced: 9 months ago
JSON representation
JavaScript class to generate maps of triangles
- Host: GitHub
- URL: https://github.com/maxwellito/triangulr
- Owner: maxwellito
- License: mit
- Created: 2013-11-04T20:50:57.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2019-05-05T12:55:39.000Z (about 7 years ago)
- Last Synced: 2025-10-11T07:14:09.337Z (9 months ago)
- Language: HTML
- Size: 25.4 KB
- Stars: 74
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# triangulr
JavaScript class to generate maps of triangles.
Test it on http://maxwellito.github.io/triangulr
Available on NPM : `npm install triangulr`
## What is that?
triangulr is a little JavaScript class to build triangles walls. Completely random. In SVG: ready for HTML or Illustrator use. It give you a bit of flexibility to generate what you need: dimension, triangle size, ratio of mess and color
## How to use it?
This is pure JavaScript, no jQuery required or other libraries. Only the simple triangulr.js in your page and you're ready to go.
Here is an example:
```javascript
var mySVG = new Triangulr (600, 500, 60, 0);
document.getElementById('myDiv').appendChild(mySVG);
```
Triangulr constructor needs these attributes:
- `width` integer : width of the SVG to generate
- `height` integer : height of the SVG to generate
- `triangleHeight` integer : original triangle height
- `pointArea` integer : area to place random points
- `color` function (optional) : function to generate a color for each triangle an object will be passed as parameter with information about the current triangle counter triangle numbermark
- `x` column index
- `y` line index
- `lines` number of lines in the SVG
- `cols` number of columns in the SVG
- `points` array of triangle points
## How it works?
The engine is quite simple to understand, even if at the start, it looks confusing to build this random triangles.
To begin, we use the value given to the constructor to create a regular pattern with proper equilateral triangles. To do that, the script start by generate lines of dots. Then a second pass use these points to generate triangles, and also the color function to generate the color code.
Then the last pass use the data to render it in a SVG DOM object.