shadow mode is semi-supported

examples/basic-web-example.html

@@ -19,8 +19,9 @@
   <script>
   // set up the base pattern
   var pattern = trianglify({
-    color_function: 'sparkle',
+    color_function: 'shadow',
     jitter: 0.1,
+    tintLevel: 1,
     height: window.innerHeight,
     width: window.innerWidth,
     cell_size: 30 + Math.random() * 100})

lib/points.js

@@ -8,8 +8,8 @@ export default function generate_grid(width, height, bleed_x, bleed_y, cell_size
   var points = [];
   for (var i = -bleed_x; i < w; i += cell_size) {
     for (var j = -bleed_y; j < h; j += cell_size) {
-      var x = (i + half_cell_size) + (rand_fn() * double_v + negative_v);
-      var y = (j + half_cell_size) + (rand_fn() * double_v + negative_v);
+      const x = (i + half_cell_size) + (rand_fn() * double_v + negative_v);
+      const y = (j + half_cell_size) + (rand_fn() * double_v + negative_v);
       points.push([Math.floor(x), Math.floor(y)]);
     }
   }

lib/trianglify.js

@@ -25,6 +25,7 @@ const defaults = {
   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
   jitter: 0.1,                      // Jitter level for the 'sparkle' color function
+  tintLevel: 1,                   // Tint level for the 'shadows' color function
   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.
 }
@@ -50,11 +51,19 @@ export default function Trianglify(_opts) {
       if (!(xScale && yScale)) {
         throw new Error('the sparkle color funtion requires both x_colors and y_colors to be defined')
       }
-      return chroma.interpolate(
+      return chroma.mix(
         xScale(x + offset()),
         yScale(y + offset()),
-        0.5
+        0.5,
+        opts.color_space
       )
+    },
+    // this *sort of* works, but it really wants z-axis data to do a "proper"
+    // job.
+    shadow: (x, y, xScale, yScale, opts) => {
+      const color = chroma.mix(xScale(x), yScale(y), 0.5, opts.color_space)
+      const tint = rand() * opts.tintLevel
+      return color.darken(tint)
     }
   }
 
@@ -83,7 +92,7 @@ export default function Trianglify(_opts) {
 
   const default_color_function = (x, y, xScale, yScale) => {
     if (xScale && yScale) {
-      return chroma.interpolate(xScale(x), yScale(y), 0.5, opts.color_space);
+      return chroma.mix(xScale(x), yScale(y), 0.5, opts.color_space);
     } else {
       xScale
         ? xScale(x)

package.json

@@ -19,7 +19,7 @@
     "postinstall": "node scripts/postinstall.js"
   },
   "dependencies": {
-    "chroma-js": "^0.6.3",
+    "chroma-js": "^2.1.0",
     "colors": "^1.1.2",
     "delaunator": "^1.0.4",
     "jsdom": "^7.0.2",