Trianglify.js Deployment and Usage Guide

Prerequisites

Node.js (version 12 or higher)
npm (version 6 or higher)
Git (for cloning the repository)

Installation

Clone the repository:

git clone https://github.com/qrohlf/trianglify.git
cd trianglify

Install dependencies:
```
npm install
```
Build the project:
```
npm run build
```

Configuration

Trianglify.js doesn't require any environment variables or API keys. Configuration is done through options passed to the trianglify() function.

Available Options

The following options can be passed to customize the generated patterns:

width (default: 600): Width of the pattern in pixels
height (default: 400): Height of the pattern in pixels
cellSize (default: 75): Size of the cells used to generate a randomized grid
variance (default: 0.75): How much to randomize the grid
seed (default: null): Seed for the random number generator
xColors (default: 'random'): Color stops for the X color scale
yColors (default: 'match'): Color stops for the Y color scale
palette (default: colorbrewer): Color palette to use
colorSpace (default: 'lab'): Color space for interpolation
colorFunction (default: linear interpolation): Function for color interpolation
fill (default: true): Whether to fill the polygons
strokeWidth (default: 0): Width of the stroke around polygons
points (default: null): Custom points to use instead of generated ones

Build & Run

Development

To run in development mode:

npm run dev

This will start a development server with hot reloading.

Production

To build for production:

npm run build

This will create optimized builds in the dist/ directory:

trianglify.bundle.js (minified UMD bundle)
trianglify.bundle.debug.js (non-minified UMD bundle)
trianglify.js (CommonJS module)

Deployment

Trianglify.js can be deployed as a static asset on any web hosting platform. Here are some recommended options:

Static Hosting Platforms

Vercel (formerly Zeit Now)
- Perfect for static sites and single-page applications
- Automatic HTTPS and CDN
- Easy deployment via Git integration or CLI
Netlify
- Excellent for static sites
- Built-in form handling and serverless functions
- Free tier available
GitHub Pages
- Free hosting for static sites
- Easy integration with GitHub repositories
- Custom domain support

Usage Examples

Browser (via CDN)

<script src="https://unpkg.com/trianglify@4.0.0/dist/trianglify.bundle.js"></script>
<script>
  var pattern = trianglify({
    width: 600,
    height: 400,
    cellSize: 75
  });
  document.body.appendChild(pattern.canvas());
</script>

Node.js

const trianglify = require('trianglify');

const pattern = trianglify({
  width: 600,
  height: 400,
  cellSize: 75
});

// Save to file
pattern.canvas().toBuffer().pipe(fs.createWriteStream('output.png'));

ES Modules

import trianglify from 'trianglify';

const pattern = trianglify({
  width: 600,
  height: 400,
  cellSize: 75
});

Troubleshooting

Common Issues

"Unrecognized option" error
- Ensure you're only passing valid options from the defaultOptions object
- Check for typos in option names
Invalid dimensions error
- Make sure width and height are positive numbers
- Example: width: 600, height: 400
Bundle size concerns
- The chroma.js library adds significant size (40k minified)
- Consider using a smaller color library if bundle size is critical
Browser compatibility issues
- Ensure you're using the UMD bundle for browser environments
- The CommonJS module is intended for Node.js environments

Performance Tips

Use a reasonable cellSize (75-150) for better performance
Consider using a fixed seed for reproducible patterns
For large patterns, consider using the points option to provide custom points

Color Issues

If colors don't appear as expected, check the colorSpace option
The default 'lab' color space provides better interpolation than 'rgb'
Use the built-in colorFunctions for special effects like sparkle or shadows

How to Deploy & Use qrohlf/trianglify