improve examples, docs

qrohlf · qrohlf · commit 54810568449e · 2020-05-04T08:18:12.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,2 @@
 node_modules
-bower_components
-test/test.browserify.js
 dist
diff --git a/examples/color-function-example.html b/examples/color-function-example.html
@@ -30,7 +30,7 @@
   <!-- This is the standalone build of Trianglify. It's easy to drop in to a
   project without any need for bundlers or dependency management, but in most
   modern web projects you will probably want to use the NPM module instead -->
-  <script src="../dist/trianglify.bundle.umd.js"></script>
+  <script src="../dist/trianglify.bundle.debug.js"></script>
   <script>
 
     const JITTER_FACTOR = 0.2
@@ -54,7 +54,8 @@
       ))
     }
 
-    const seed = Math.random()
+    // use the same seed for everything, to allow for easier comparisons
+    const seed = 'pears'
 
     // Example 1: you can use the built-in color functions to customize the
     // color rendering of Trianglify. Here, we use the 'sparkle' color
@@ -81,6 +82,31 @@
       colorFunction: trianglify.colorFunctions.interpolateLinear(0.1)
     })
     addToPage(interpolate, 'trianglify.colorFunctions.interpolateLinear(0.1)')
+
+    // Example 3: 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 distanceFromCenter = Math.sqrt(
+        Math.pow(200 - centroid.x, 2) + Math.pow(150 - centroid.y, 2)
+      )
+      return(xGradient(distanceFromCenter / radius))
+    }
+    // figure out the gradient radius required to cover the image dimensions:
+    const gradientRadius = Math.sqrt(
+      Math.pow(400 / 2, 2) + Math.pow(300 / 2, 2)
+    )
+    const radial = trianglify({
+      seed,
+      width: 400,
+      height: 300,
+      cellSize: 15,
+      colorFunction: radialGradient(gradientRadius)
+    })
+    addToPage(radial, 'custom radial gradient')
   </script>
   </body>
 </html>
diff --git a/examples/custom-points-example.html b/examples/custom-points-example.html
@@ -15,9 +15,8 @@
     </style>
   </head>
   <body>
-  <script src="../dist/trianglify.bundle.umd.js"></script>
+  <script src="../dist/trianglify.bundle.debug.js"></script>
   <script>
-
   const width = 700
   const height = 700
 
diff --git a/examples/transparency-example.html b/examples/transparency-example.html
@@ -110,7 +110,7 @@
     </defs>
     <path fill="url(#a)" d="M0 0h500v500H0z"></path>
   </svg>
-  <script src="../dist/trianglify.bundle.umd.js"></script>
+  <script src="../dist/trianglify.bundle.debug.js"></script>
   <script>
   // set up the base pattern
   const pattern = trianglify({
diff --git a/src/trianglify.js b/src/trianglify.js
@@ -109,6 +109,7 @@ export default function trianglify (_opts) {
     const yPercent = norm(centroid.y / height)
 
     const color = opts.colorFunction(
+      centroid,
       xPercent,
       yPercent,
       vertices,
diff --git a/src/utils/colorFunctions.js b/src/utils/colorFunctions.js
@@ -9,16 +9,16 @@ import chroma from 'chroma-js'
 //  colorFunction: trianglify.colorFunctions.sparkle(0.2)
 // })
 //
-// the above snippet would give you a trianglify pattern with a 20% random
+// the snippet above gives you a trianglify pattern with a 20% random
 // jitter applied to the x and y gradient scales
 
 export const interpolateLinear = (bias = 0.5) => (
-  (xPercent, yPercent, vertices, xScale, yScale, opts) =>
+  (centroid, xPercent, yPercent, vertices, xScale, yScale, opts) =>
     chroma.mix(xScale(xPercent), yScale(yPercent), bias, opts.colorSpace)
 )
 
-export const sparkle = (jitterFactor = 0.15) => (normalizedX, normalizedY, vertices, xGradient, yGradient, opts) => {
-  const jitter = () => (Math.random() - 0.5) * jitterFactor
+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)
diff --git a/src/utils/mulberry32.js b/src/utils/mulberry32.js
@@ -1,4 +1,9 @@
-// Fast seeded rng. Seed must be numeric!
+// Fast seeded RNG adapted from the public-domain implementation
+// from @byrc: https://github.com/bryc/code/blob/master/jshash/PRNGs.md
+//
+// Usage:
+// const randFn = mulberry32('string seed')
+// const randomNumber = randFn() // [0, 1] random float
 export default function mulberry32 (seed) {
   if (!seed) { seed = Math.random().toString(36) } // support no-seed usage
   var a = xmur3(seed)()
