Enables specifying input points

Enables points to be specified in the constructor options, otherwise points are generated.
Mahua233 · Mar 9, 2016 · 4fee2dc · 4fee2dc
1 parent 5dd2391
commit 4fee2dc
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/examples/cutom-points-example.html b/examples/cutom-points-example.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Trianglify custom points example</title>
+    <style>
+    html, body {
+      margin: 0 0;
+      padding: 0 0;
+      text-align: center;
+      font-size: 0;
+    }
+    </style>
+  </head>
+  <body>
+  <script src="../dist/trianglify.min.js"></script>
+  <script>
+
+  var h = window.innerHeight, w = window.innerWidth;
+  var center_y = h * 0.5, center_x = w * 0.5;
+
+  var points = [];
+  var spacing = 20;
+  var t = 0;
+  // generate a sine wave of points
+  for(var x = spacing; x < w - (spacing*2); x += spacing) {
+	var y = center_y + Math.sin(t) * (center_y - spacing);
+	points.push([x, y]);
+	t += 0.5;
+  }
+
+  // set up the base pattern
+  var pattern = Trianglify({
+    height: h,
+    width: w,
+    points: points,
+    cell_size: 30 + Math.random() * 100})
+
+  // canvas
+  document.body.appendChild(pattern.canvas())
+
+  // svg
+  document.body.appendChild(pattern.svg())
+
+  // png
+  var png = document.createElement('img')
+  png.src = pattern.png()
+  document.body.appendChild(png)
+  </script>
+  </body>
+</html>
diff --git a/lib/trianglify.js b/lib/trianglify.js
@@ -24,7 +24,8 @@ var defaults = {
   palette: colorbrewer,             // Palette to use for 'random' color option
   color_space: 'lab',               // Color space used for gradient construction & interpolation
   color_function: null,             // Color function f(x, y) that returns a color specification that is consumable by chroma-js
-  stroke_width: 1.51                // Width of stroke. Defaults to 1.51 to fix an issue with canvas antialiasing.
+  stroke_width: 1.51,               // Width of stroke. Defaults to 1.51 to fix an issue with canvas antialiasing.
+  points: undefined                 // An Array of [x,y] coordinates to trianglulate. Defaults to undefined, and points are generated.
 };
 
 /*********************************************************
@@ -99,7 +100,7 @@ function Trianglify(opts) {
   };
 
   // generate a point mesh
-  var points = point_gen.generateGrid(width, height, bleed_x, bleed_y, opts.cell_size, variance, rand);
+  var points = opts.points || point_gen.generateGrid(width, height, bleed_x, bleed_y, opts.cell_size, variance, rand);
 
   // delaunay.triangulate gives us indices into the original coordinate array
   var geom_indices = delaunay.triangulate(points);