basic shadows color function works

examples/color-function-example.html

@@ -83,17 +83,29 @@
     })
     addToPage(interpolate, 'trianglify.colorFunctions.interpolateLinear(0.1)')
 
-    // Example 3: you can write your own custom color function to have
+
+    // Example 2: the shadows color function applies a faux-3d effect to the
+    // pattern. This works best with subtle gradients and solid colors.
+    const shadows = trianglify({
+      seed,
+      width: 400,
+      height: 300,
+      cellSize: 15,
+      colorFunction: trianglify.colorFunctions.shadows()
+    })
+    addToPage(shadows, 'trianglify.colorFunctions.shadows()')
+
+    // Example 4: you can write your own custom color function to have
     // total control over how the polygons are given color values.
     //
     // Here, we apply the xScale colors as a radial gradient:
 
     // define a custom color function that applies a radial gradient:
-    const radialGradient = (radius) => (centroid, normalizedX, normalizedY, vertices, xGradient, yGradient, opts, random) => {
+    const radialGradient = (radius) => ({centroid, xScale}) => {
       const distanceFromCenter = Math.sqrt(
         Math.pow(200 - centroid.x, 2) + Math.pow(150 - centroid.y, 2)
       )
-      return(xGradient(distanceFromCenter / radius))
+      return(xScale(distanceFromCenter / radius))
     }
     // figure out the gradient radius required to cover the image dimensions:
     const gradientRadius = Math.sqrt(

release-notes.txt

@@ -1,12 +1,10 @@
 release notes for v4
 
+- line gap issues are solved for both SVG and Canvas rendering engines
 - canvas rendering is now retina-ready by default
-- line gap issues are solved for both SVG and Canvas rendering
-
-TODO
-
-- render SVG to string on the server
-- render Canvas to PNG on the server
-- add some color functions: Trianglify.colorFunction.sparkle
-- testing
-- fuck microbundle
+- arguments are now camel case
+- the node-canvas dependency is no longer optional
+- removed dependency on seedrandom
+- removed dependency on jsdom
+- colorFunction has a new method signature
+- new built-in colorFunction: 'sparkle'

src/trianglify.js

@@ -89,7 +89,7 @@ export default function trianglify (_opts) {
   // use a different (salted) randomizer for the color function so that
   // swapping out color functions doesn't change the pattern geometry itself
   const salt = 42
-  const colorRand = mulberry32(opts.seed ? opts.seed + salt : null)
+  const cRand = mulberry32(opts.seed ? opts.seed + salt : null)
   const polys = []
 
   for (let i = 0; i < geomIndices.length; i += 3) {
@@ -109,16 +109,18 @@ export default function trianglify (_opts) {
     const xPercent = norm(centroid.x / width)
     const yPercent = norm(centroid.y / height)
 
-    const color = opts.colorFunction(
-      centroid,
-      xPercent,
-      yPercent,
-      vertices,
-      xScale,
-      yScale,
-      opts,
-      colorRand // randomization function for use by color functions
-    )
+    const color = opts.colorFunction({
+      centroid,       // centroid of polygon, non-normalized
+      xPercent,       // x-coordinate of centroid, normalized to [0, 1]
+      yPercent,       // y-coordinate of centroid, normalized to [0, 1]
+      vertexIndices,  // vertex indices of the polygon
+      vertices,       // [x, y] vertices of the polygon
+      xScale,         // x-colors scale for the pattern
+      yScale,         // y-colors scale for the pattern
+      points,         // array of generated points for the pattern
+      opts,           // options used to initialize the pattern
+      random: cRand   // seeded randomization function for use by color functions
+    })
 
     polys.push({
       vertexIndices,
@@ -151,17 +153,14 @@ const getPoints = (opts, random) => {
 
   const halfCell = cellSize / 2
 
-  const Z_DEPTH = halfCell * 6
-
   const points = Array(pointCount).fill(null).map((_, i) => {
     const col = i % colCount
     const row = Math.floor(i / colCount)
 
     // [x, y, z]
     return [
       -bleedX + col * cellSize + halfCell + getJitter(),
-      -bleedY + row * cellSize + halfCell + getJitter(),
-      random() * Z_DEPTH
+      -bleedY + row * cellSize + halfCell + getJitter()
     ]
   })
 

src/utils/colorFunctions.js

@@ -1,4 +1,5 @@
 import chroma from 'chroma-js'
+import * as geom from './geom'
 // Built in color functions provided for your convenience.
 //
 // Usage example:
@@ -13,13 +14,24 @@ import chroma from 'chroma-js'
 // jitter applied to the x and y gradient scales
 
 export const interpolateLinear = (bias = 0.5) => (
-  (centroid, xPercent, yPercent, vertices, xScale, yScale, opts) =>
+  ({xPercent, yPercent, xScale, yScale, opts}) =>
     chroma.mix(xScale(xPercent), yScale(yPercent), bias, opts.colorSpace)
 )
 
-export const sparkle = (jitterFactor = 0.15) => (centroid, normalizedX, normalizedY, vertices, xGradient, yGradient, opts, random) => {
-  const jitter = () => (random() - 0.5) * jitterFactor
-  const a = xGradient(normalizedX + jitter())
-  const b = yGradient(normalizedY + jitter())
-  return chroma.mix(a, b, 0.5, opts.colorSpace)
+export const sparkle = (jitterFactor = 0.15) => (
+  ({xPercent, yPercent, xScale, yScale, opts, random}) => {
+    const jitter = () => (random() - 0.5) * jitterFactor
+    const a = xScale(xPercent + jitter())
+    const b = yScale(yPercent + jitter())
+    return chroma.mix(a, b, 0.5, opts.colorSpace)
+  }
+)
+
+export const shadows = (shadowIntensity = 0.8) => {
+  return ({vertexIndices, xPercent, yPercent, xScale, yScale, opts, points, random}) => {
+    const a = xScale(xPercent)
+    const b = yScale(yPercent)
+    const color = chroma.mix(a, b, 0.5, opts.colorSpace)
+    return color.darken(shadowIntensity * random())
+  }
 }

src/utils/geom.js

@@ -7,3 +7,10 @@ export const getCentroid = d => {
     y: (d[0][1] + d[1][1] + d[2][1])/3
   }
 }
+
+export const getTopmostVertexIndex = (vertexIndices, points) => (
+  vertexIndices.reduce(
+    (topmost, i) => (points[i][1] < points[topmost][1] ? i : topmost),
+    vertexIndices[0]
+  )
+)