diff --git a/README.md b/README.md index cc69972..ae2eefa 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ The d3-interpolate module provides a variety of interpolation methods for blending between two values. These values may be numbers, colors, strings, arrays, even deeply-nested objects. For example: ```js -var i = interpolateNumber(10, 20); +var i = number(10, 20); i(0.0); // 10 i(0.2); // 12 i(0.5); // 15 @@ -12,16 +12,22 @@ i(1.0); // 20 The returned function `i` is called an *interpolator*. Given the starting value *a* and the ending value *b*, it takes a parameter *t* in the domain [0,1] and returns an interpolated value between *a* and *b*. An interpolator typically returns a value equivalent to *a* at *t* = 0, and a value equivalent to *b* at *t* = 1. -Here’s a more elaborate example demonstrating type inference used by [interpolate](#interpolate): +You can interpolate more than just numbers. To find the perceptual halfway point between steelblue and brown: ```js -var i = interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]}); +lab("steelblue", "brown")(0.5); // #8e5c6d +``` + +Here’s a more elaborate example demonstrating type inference used by [value](#value): + +```js +var i = value({colors: ["red", "blue"]}, {colors: ["white", "black"]}); i(0.0); // {colors: ["#ff0000", "#0000ff"]} i(0.5); // {colors: ["#ff8080", "#000080"]} i(1.0); // {colors: ["#ffffff", "#000000"]} ``` -Note that the generic interpolate method detects not only nested objects and arrays, but also color strings and numbers embedded in strings! +Note that the generic value interpolator detects not only nested objects and arrays, but also color strings and numbers embedded in strings! ## Installing @@ -29,19 +35,19 @@ If you use NPM, `npm install d3-interpolate`. Otherwise, download the [latest re ## API Reference -# interpolate(a, b) +# value(a, b) -Returns an interpolator between the two values *a* and *b*. The type of interpolator is based on the type of the end value *b*, using the following algorithm: +Returns an interpolator between the two arbitrary values *a* and *b*. The interpolator implementation is based on the type of the end value *b*, using the following algorithm: -1. If *b* is a [color](https://github.com/d3/d3-color#color), [interpolateRgb](https://github.com/d3/d3-color#interpolateRgb) is used. -2. If *b* is a string, [interpolateString](#interpolateString) is used. -3. If *b* is an array, [interpolateArray](#interpolateArray) is used. -4. If *b* is an object and not coercible to a number, [interpolateObject](#interpolateObject) is used. -5. Otherwise, [interpolateNumber](#interpolateNumber) is used. +1. If *b* is a [color](https://github.com/d3/d3-color#color), [rgb](#rgb) is used. +2. If *b* is a string, [string](#string) is used. +3. If *b* is an array, [array](#array) is used. +4. If *b* is an object and not coercible to a number, [object](#object) is used. +5. Otherwise, [number](#number) is used. -Based on the chosen interpolator, *a* is coerced to a suitable corresponding type. The behavior of this method may be augmented to support additional types by pushing custom interpolator factories onto the [interpolators](#interpolators) array. +Based on the chosen interpolator, *a* is coerced to a suitable corresponding type. The behavior of this method may be augmented to support additional types by pushing custom interpolator factories onto the [values](#values) array. -# interpolateNumber(a, b) +# number(a, b) Returns an interpolator between the two numbers *a* and *b*. The returned interpolator is equivalent to: @@ -53,29 +59,29 @@ function interpolate(t) { Caution: avoid interpolating to or from the number zero when the interpolator is used to generate a string. When very small values are stringified, they may be converted to scientific notation, which is an invalid attribute or style property value. For example, the number `0.0000001` is converted to the string `"1e-7"`. This is particularly noticeable with interpolating opacity. To avoid scientific notation, start or end the transition at 1e-6: the smallest value that is not stringified in scientific notation. -# interpolateRound(a, b) +# round(a, b) -Returns an interpolator between the two numbers *a* and *b*; the interpolator is similar to [interpolateNumber](#interpolateNumber), except it will round the resulting value to the nearest integer. +Returns an interpolator between the two numbers *a* and *b*; the interpolator is similar to [number](#number), except it will round the resulting value to the nearest integer. -# interpolateString(a, b) +# string(a, b) Returns an interpolator between the two strings *a* and *b*. The string interpolator finds numbers embedded in *a* and *b*, where each number is of the form understood by JavaScript. A few examples of numbers that will be detected within a string: `-1`, `42`, `3.14159`, and `6.0221413e+23`. -For each number embedded in *b*, the interpolator will attempt to find a corresponding number in *a*. If a corresponding number is found, a numeric interpolator is created using [interpolateNumber](#interpolateNumber). The remaining parts of the string *b* are used as a template: the static parts of the string *b* remain constant for the interpolation, with the interpolated numeric values embedded in the template. +For each number embedded in *b*, the interpolator will attempt to find a corresponding number in *a*. If a corresponding number is found, a numeric interpolator is created using [number](#number). The remaining parts of the string *b* are used as a template: the static parts of the string *b* remain constant for the interpolation, with the interpolated numeric values embedded in the template. For example, if *a* is `"300 12px sans-serif"`, and *b* is `"500 36px Comic-Sans"`, two embedded numbers are found. The remaining static parts of the string are a space between the two numbers (`" "`), and the suffix (`"px Comic-Sans"`). The result of the interpolator at *t* = .5 is `"400 24px Comic-Sans"`. -# interpolateArray(a, b) +# array(a, b) -Returns an interpolator between the two arrays *a* and *b*. Internally, an array template is created that is the same length in *b*. For each element in *b*, if there exists a corresponding element in *a*, a generic interpolator is created for the two elements using [interpolate](#interpolate). If there is no such element, the static value from *b* is used in the template. Then, for the given parameter *t*, the template’s embedded interpolators are evaluated. The updated array template is then returned. +Returns an interpolator between the two arrays *a* and *b*. Internally, an array template is created that is the same length in *b*. For each element in *b*, if there exists a corresponding element in *a*, a generic interpolator is created for the two elements using [value](#value). If there is no such element, the static value from *b* is used in the template. Then, for the given parameter *t*, the template’s embedded interpolators are evaluated. The updated array template is then returned. For example, if *a* is the array `[0, 1]` and *b* is the array `[1, 10, 100]`, then the result of the interpolator for *t* = .5 is the array `[.5, 5.5, 100]`. Note: **no defensive copy** of the template array is created; modifications of the returned array may adversely affect subsequent evaluation of the interpolator. No copy is made because interpolators should be fast, as they are part of the inner loop of animation. -# interpolateObject(a, b) +# object(a, b) -Returns an interpolator between the two objects *a* and *b*. Internally, an object template is created that has the same properties as *b*. For each property in *b*, if there exists a corresponding property in *a*, a generic interpolator is created for the two elements using [interpolate](#interpolate). If there is no such property, the static value from *b* is used in the template. Then, for the given parameter *t*, the template's embedded interpolators are evaluated and the updated object template is then returned. +Returns an interpolator between the two objects *a* and *b*. Internally, an object template is created that has the same properties as *b*. For each property in *b*, if there exists a corresponding property in *a*, a generic interpolator is created for the two elements using [value](#value). If there is no such property, the static value from *b* is used in the template. Then, for the given parameter *t*, the template's embedded interpolators are evaluated and the updated object template is then returned. For example, if *a* is the object `{x: 0, y: 1}` and *b* is the object `{x: 1, y: 10, z: 100}`, the result of the interpolator for *t* = .5 is the object `{x: .5, y: 5.5, z: 100}`. @@ -83,24 +89,24 @@ Object interpolation is particularly useful for *dataspace interpolation*, where Note: **no defensive copy** of the template object is created; modifications of the returned object may adversely affect subsequent evaluation of the interpolator. No copy is made because interpolators should be fast, as they are part of the inner loop of animation. -# interpolateTransform(a, b) +# transform(a, b) Returns an interpolator between the two 2D affine transforms represented by *a* and *b*. Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated. This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition). -# interpolateZoom(a, b) +# zoom(a, b) Returns an interpolator between the two views *a* and *b* of a two-dimensional plane, based on [“Smooth and efficient zooming and panning”](https://www.google.com/search?q=Smooth+and+efficient+zooming+and+panning) by Jarke J. van Wijk and Wim A.A. Nuij. Each view is defined as an array of three numbers: *cx*, *cy* and *width*. The first two coordinates *cx*, *cy* represent the center of the viewport; the last coordinate *width* represents the size of the viewport. The returned interpolator exposes a *duration* property which encodes the recommended transition duration in milliseconds. This duration is based on the path length of the curved trajectory through *x,y* space. If you want to a slower or faster transition, multiply this by an arbitrary scale factor (V as described in the original paper). -# interpolators +# values -The array of built-in interpolator factories, as used by [interpolate](#interpolate). Additional interpolator factories may be pushed onto the end of this array. Each factory should return an interpolator if it supports interpolating the two specified input values; otherwise, the factory should return a falsey value and other interpolators will be tried. +The array of built-in interpolator factories, as used by [value](#value). Additional interpolator factories may be pushed onto the end of this array. Each factory should return an interpolator if it supports interpolating the two specified input values; otherwise, the factory should return a falsey value and other interpolators will be tried. For example, to register a custom interpolator that formats dollars and cents, you might say: ```js -interpolators.push(function(a, b) { +values.push(function(a, b) { var re = /^\$([0-9,.]+)$/, ma, mb, f = d3.format(",.02f"); if ((ma = re.exec(a)) && (mb = re.exec(b))) { a = parseFloat(ma[1]); @@ -112,4 +118,72 @@ interpolators.push(function(a, b) { }); ``` -Subsequently, `interpolate("$20", "$10")(1/3)` returns `$16.67`. +Subsequently, `value("$20", "$10")(1/3)` returns `$16.67`. + +# rgb(a, b) + +![rgb](https://cloud.githubusercontent.com/assets/230541/8027976/07e91580-0d58-11e5-8d3f-4c50f152a2e3.png) + +Returns an RGB color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in RGB; they will be converted to RGB using [rgb](#rgb). The return value of the interpolator is a hexadecimal RGB string. + +# hsl(a, b) + +![hsl](https://cloud.githubusercontent.com/assets/230541/8027979/07fec100-0d58-11e5-90df-dc458ae7af10.png) + +Returns an HSL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HSL; they will be converted to HSL using [hsl](#hsl). If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string. + +# hslLong(a, b) + +![hsllong](https://cloud.githubusercontent.com/assets/230541/8028057/bae888b8-0d59-11e5-983a-a460a59ae4ab.png) + +Like [hsl](#hsl), but does not use the shortest path between hues. + +# lab(a, b) + +![lab](https://cloud.githubusercontent.com/assets/230541/8027977/07eaea04-0d58-11e5-8f4f-b739eb842549.png) + +Returns a Lab color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in Lab; they will be converted to Lab using [lab](#lab). The return value of the interpolator is a hexadecimal RGB string. + +# hcl(a, b) + +![hcl](https://cloud.githubusercontent.com/assets/230541/8027978/07f91002-0d58-11e5-92f0-f06899907c6a.png) + +Returns an HCL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HCL; they will be converted to HCL using [hcl](#hcl). If either color’s hue or chroma is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string. + +# hclLong(a, b) + +![hcllong](https://cloud.githubusercontent.com/assets/230541/8028056/bad85786-0d59-11e5-9c22-6c23215779fa.png) + +Like [hcl](#hcl), but does not use the shortest path between hues. + +# cubehelix(a, b) + +![cubehelix](https://cloud.githubusercontent.com/assets/230541/8027999/737cde08-0d58-11e5-8130-36e2437996ee.png) + +Returns a Cubehelix color space interpolator between the two colors *a* and *b* using the default *gamma* of 1.0. The colors *a* and *b* need not be in Cubehelix; they will be converted to Cubehelix using [cubehelix](https://github.com/d3/d3-color#cubehelix). If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is a hexadecimal RGB string. + +# cubehelixLong(a, b) + +![cubehelixlong](https://cloud.githubusercontent.com/assets/230541/8028055/bad68424-0d59-11e5-8f0f-1ecdbd8e46c8.png) + +Like [cubehelix](#cubehelix), but does not use the shortest path between hues. + +# cubehelixGamma(gamma) + +Returns a Cubehelix color space interpolator factory using the specified *gamma*. A gamma value less than one emphasizes low intensity values, while a gamma value greater than one emphasizes high intensity values. For example: + +```js +var i = cubehelixGamma(1.5)("red", "blue"); +``` + +# cubehelixGammaLong(gamma) + +Like [cubehelixGamma](#cubehelixGamma), but does not use the shortest path between hues. + +## Changes from D3 3.x: + +* A new [cubehelix](#cubehelix) color space! + +* New “long” methods for hue interpolation in [HSL](#hslLong), [HCL](#hclLong) and [Cubehelix](#cubehelixLong). + +* Renamed the generic interpolate method and interpolators array to [value](#value) and [values](#values), respectively. diff --git a/index.js b/index.js index 7322a1e..0e1dbb4 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,21 @@ -export {default as interpolate} from "./src/interpolate"; -export {default as interpolateArray} from "./src/interpolateArray"; -export {default as interpolateNumber} from "./src/interpolateNumber"; -export {default as interpolateObject} from "./src/interpolateObject"; -export {default as interpolateRound} from "./src/interpolateRound"; -export {default as interpolateString} from "./src/interpolateString"; -export {default as interpolateTransform} from "./src/interpolateTransform"; -export {default as interpolateZoom} from "./src/interpolateZoom"; -export {default as interpolators} from "./src/interpolators"; +export {default as array} from "./src/array"; +export {default as number} from "./src/number"; +export {default as object} from "./src/object"; +export {default as round} from "./src/round"; +export {default as string} from "./src/string"; +export {default as transform} from "./src/transform"; +export {default as values} from "./src/values"; +export {default as value} from "./src/value"; +export {default as zoom} from "./src/zoom"; +export {default as rgb} from "./src/rgb"; +export {default as hsl} from "./src/hsl"; +export {default as hslLong} from "./src/hslLong"; +export {default as lab} from "./src/lab"; +export {default as hcl} from "./src/hcl"; +export {default as hclLong} from "./src/hclLong"; + +import cubehelixGamma from "./src/cubehelixGamma"; +import cubehelixGammaLong from "./src/cubehelixGammaLong"; +export var cubehelix = cubehelixGamma(1); +export var cubehelixLong = cubehelixGammaLong(1); +export {cubehelixGamma, cubehelixGammaLong}; diff --git a/package.json b/package.json index b67032e..0877973 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "d3-interpolate", - "version": "0.1.4", + "version": "0.2.0", "description": "Interpolate numbers, colors, strings, arrays, objects, whatever!", "keywords": [ "d3", @@ -25,7 +25,7 @@ "prepublish": "npm run test && uglifyjs build/d3-interpolate.js -c -m -o build/d3-interpolate.min.js && rm -f build/d3-interpolate.zip && zip -j build/d3-interpolate.zip -- LICENSE README.md build/d3-interpolate.js build/d3-interpolate.min.js" }, "dependencies": { - "d3-color": "~0.2.8" + "d3-color": "~0.3.1" }, "devDependencies": { "faucet": "0.0", diff --git a/src/interpolateArray.js b/src/array.js similarity index 76% rename from src/interpolateArray.js rename to src/array.js index 0ef7801..ac7c122 100644 --- a/src/interpolateArray.js +++ b/src/array.js @@ -1,4 +1,4 @@ -import interpolate from "./interpolate"; +import value from "./value"; // TODO sparse arrays? export default function(a, b) { @@ -9,7 +9,7 @@ export default function(a, b) { n0 = Math.min(a.length, b.length), i; - for (i = 0; i < n0; ++i) x.push(interpolate(a[i], b[i])); + for (i = 0; i < n0; ++i) x.push(value(a[i], b[i])); for (; i < na; ++i) c[i] = a[i]; for (; i < nb; ++i) c[i] = b[i]; diff --git a/src/cubehelixGamma.js b/src/cubehelixGamma.js new file mode 100644 index 0000000..e0205af --- /dev/null +++ b/src/cubehelixGamma.js @@ -0,0 +1,21 @@ +import {cubehelix} from "d3-color"; +import deltaHue from "./deltaHue"; + +export default function(gamma) { + return function(a, b) { + a = cubehelix(a); + b = cubehelix(b); + var ah = isNaN(a.h) ? b.h : a.h, + as = isNaN(a.s) ? b.s : a.s, + al = a.l, + bh = isNaN(b.h) ? 0 : deltaHue(b.h, ah), + bs = isNaN(b.s) ? 0 : b.s - as, + bl = b.l - al; + return function(t) { + a.h = ah + bh * t; + a.s = as + bs * t; + a.l = al + bl * Math.pow(t, gamma); + return a + ""; + }; + }; +}; diff --git a/src/cubehelixGammaLong.js b/src/cubehelixGammaLong.js new file mode 100644 index 0000000..08ee216 --- /dev/null +++ b/src/cubehelixGammaLong.js @@ -0,0 +1,20 @@ +import {cubehelix} from "d3-color"; + +export default function(gamma) { + return function(a, b) { + a = cubehelix(a); + b = cubehelix(b); + var ah = isNaN(a.h) ? b.h : a.h, + as = isNaN(a.s) ? b.s : a.s, + al = a.l, + bh = isNaN(b.h) ? 0 : b.h - ah, + bs = isNaN(b.s) ? 0 : b.s - as, + bl = b.l - al; + return function(t) { + a.h = ah + bh * t; + a.s = as + bs * t; + a.l = al + bl * Math.pow(t, gamma); + return a + ""; + }; + }; +}; diff --git a/src/deltaHue.js b/src/deltaHue.js new file mode 100644 index 0000000..a05c5d8 --- /dev/null +++ b/src/deltaHue.js @@ -0,0 +1,6 @@ +export default function(h1, h0) { + var delta = h1 - h0; + return delta > 180 || delta < -180 + ? delta - 360 * Math.round(delta / 360) + : delta; +}; diff --git a/src/hcl.js b/src/hcl.js new file mode 100644 index 0000000..3381c2c --- /dev/null +++ b/src/hcl.js @@ -0,0 +1,19 @@ +import {hcl} from "d3-color"; +import deltaHue from "./deltaHue"; + +export default function(a, b) { + a = hcl(a); + b = hcl(b); + var ah = isNaN(a.h) ? b.h : a.h, + ac = isNaN(a.c) ? b.c : a.c, + al = a.l, + bh = isNaN(b.h) ? 0 : deltaHue(b.h, ah), + bc = isNaN(b.c) ? 0 : b.c - ac, + bl = b.l - al; + return function(t) { + a.h = ah + bh * t; + a.c = ac + bc * t; + a.l = al + bl * t; + return a + ""; + }; +}; diff --git a/src/hclLong.js b/src/hclLong.js new file mode 100644 index 0000000..a96a886 --- /dev/null +++ b/src/hclLong.js @@ -0,0 +1,18 @@ +import {hcl} from "d3-color"; + +export default function(a, b) { + a = hcl(a); + b = hcl(b); + var ah = isNaN(a.h) ? b.h : a.h, + ac = isNaN(a.c) ? b.c : a.c, + al = a.l, + bh = isNaN(b.h) ? 0 : b.h - ah, + bc = isNaN(b.c) ? 0 : b.c - ac, + bl = b.l - al; + return function(t) { + a.h = ah + bh * t; + a.c = ac + bc * t; + a.l = al + bl * t; + return a + ""; + }; +}; diff --git a/src/hsl.js b/src/hsl.js new file mode 100644 index 0000000..312f63b --- /dev/null +++ b/src/hsl.js @@ -0,0 +1,19 @@ +import {hsl} from "d3-color"; +import deltaHue from "./deltaHue"; + +export default function(a, b) { + a = hsl(a); + b = hsl(b); + var ah = isNaN(a.h) ? b.h : a.h, + as = isNaN(a.s) ? b.s : a.s, + al = a.l, + bh = isNaN(b.h) ? 0 : deltaHue(b.h, ah), + bs = isNaN(b.s) ? 0 : b.s - as, + bl = b.l - al; + return function(t) { + a.h = ah + bh * t; + a.s = as + bs * t; + a.l = al + bl * t; + return a + ""; + }; +}; diff --git a/src/hslLong.js b/src/hslLong.js new file mode 100644 index 0000000..9ac3b06 --- /dev/null +++ b/src/hslLong.js @@ -0,0 +1,18 @@ +import {hsl} from "d3-color"; + +export default function(a, b) { + a = hsl(a); + b = hsl(b); + var ah = isNaN(a.h) ? b.h : a.h, + as = isNaN(a.s) ? b.s : a.s, + al = a.l, + bh = isNaN(b.h) ? 0 : b.h - ah, + bs = isNaN(b.s) ? 0 : b.s - as, + bl = b.l - al; + return function(t) { + a.h = ah + bh * t; + a.s = as + bs * t; + a.l = al + bl * t; + return a + ""; + }; +}; diff --git a/src/interpolate.js b/src/interpolate.js deleted file mode 100644 index 30ed8b3..0000000 --- a/src/interpolate.js +++ /dev/null @@ -1,7 +0,0 @@ -import interpolators from "./interpolators"; - -export default function(a, b) { - var i = interpolators.length, f; - while (--i >= 0 && !(f = interpolators[i](a, b))); - return f; -}; diff --git a/src/interpolators.js b/src/interpolators.js deleted file mode 100644 index 7874332..0000000 --- a/src/interpolators.js +++ /dev/null @@ -1,16 +0,0 @@ -import {color, interpolateRgb} from "d3-color"; -import interpolateArray from "./interpolateArray"; -import interpolateNumber from "./interpolateNumber"; -import interpolateObject from "./interpolateObject"; -import interpolateString from "./interpolateString"; - -export default [ - function(a, b) { - var t = typeof b, c; - return (t === "string" ? ((c = color(b)) ? (b = c, interpolateRgb) : interpolateString) - : b instanceof color ? interpolateRgb - : Array.isArray(b) ? interpolateArray - : t === "object" && isNaN(b) ? interpolateObject - : interpolateNumber)(a, b); - } -]; diff --git a/src/lab.js b/src/lab.js new file mode 100644 index 0000000..f0a3d0e --- /dev/null +++ b/src/lab.js @@ -0,0 +1,18 @@ +import {lab} from "d3-color"; + +export default function(a, b) { + a = lab(a); + b = lab(b); + var al = a.l, + aa = a.a, + ab = a.b, + bl = b.l - al, + ba = b.a - aa, + bb = b.b - ab; + return function(t) { + a.l = al + bl * t; + a.a = aa + ba * t; + a.b = ab + bb * t; + return a + ""; + }; +}; diff --git a/src/interpolateNumber.js b/src/number.js similarity index 100% rename from src/interpolateNumber.js rename to src/number.js diff --git a/src/interpolateObject.js b/src/object.js similarity index 78% rename from src/interpolateObject.js rename to src/object.js index 4c0e0e5..d9e0f80 100644 --- a/src/interpolateObject.js +++ b/src/object.js @@ -1,4 +1,4 @@ -import interpolate from "./interpolate"; +import value from "./value"; export default function(a, b) { var i = {}, @@ -7,7 +7,7 @@ export default function(a, b) { for (k in a) { if (k in b) { - i[k] = interpolate(a[k], b[k]); + i[k] = value(a[k], b[k]); } else { c[k] = a[k]; } diff --git a/src/rgb.js b/src/rgb.js new file mode 100644 index 0000000..c7d7466 --- /dev/null +++ b/src/rgb.js @@ -0,0 +1,18 @@ +import {rgb} from "d3-color"; + +export default function(a, b) { + a = rgb(a); + b = rgb(b); + var ar = a.r, + ag = a.g, + ab = a.b, + br = b.r - ar, + bg = b.g - ag, + bb = b.b - ab; + return function(t) { + a.r = ar + br * t; + a.g = ag + bg * t; + a.b = ab + bb * t; + return a + ""; + }; +}; diff --git a/src/interpolateRound.js b/src/round.js similarity index 100% rename from src/interpolateRound.js rename to src/round.js diff --git a/src/interpolateString.js b/src/string.js similarity index 88% rename from src/interpolateString.js rename to src/string.js index 8af9eb9..cfecd98 100644 --- a/src/interpolateString.js +++ b/src/string.js @@ -1,15 +1,15 @@ -import interpolateNumber from "./interpolateNumber"; +import number from "./number"; var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g, reB = new RegExp(reA.source, "g"); -function interpolate0(b) { +function zero(b) { return function() { return b; }; } -function interpolate1(b) { +function one(b) { return function(t) { return b(t) + ""; }; @@ -40,7 +40,7 @@ export default function(a, b) { else s[++i] = bm; } else { // interpolate non-matching numbers s[++i] = null; - q.push({i: i, x: interpolateNumber(am, bm)}); + q.push({i: i, x: number(am, bm)}); } bi = reB.lastIndex; } @@ -55,8 +55,8 @@ export default function(a, b) { // Special optimization for only a single match. // Otherwise, interpolate each of the numbers and rejoin the string. return s.length < 2 ? (q[0] - ? interpolate1(q[0].x) - : interpolate0(b)) + ? one(q[0].x) + : zero(b)) : (b = q.length, function(t) { for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t); return s.join(""); diff --git a/src/interpolateTransform.js b/src/transform.js similarity index 73% rename from src/interpolateTransform.js rename to src/transform.js index 9185095..d32efea 100644 --- a/src/interpolateTransform.js +++ b/src/transform.js @@ -1,4 +1,4 @@ -import interpolateNumber from "./interpolateNumber"; +import number from "./number"; var rad2deg = 180 / Math.PI, identity = {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0}, @@ -53,36 +53,36 @@ function pop(s) { return s.length ? s.pop() + "," : ""; } -function interpolateTranslate(ta, tb, s, q) { +function translate(ta, tb, s, q) { if (ta[0] !== tb[0] || ta[1] !== tb[1]) { var i = s.push("translate(", null, ",", null, ")"); - q.push({i: i - 4, x: interpolateNumber(ta[0], tb[0])}, {i: i - 2, x: interpolateNumber(ta[1], tb[1])}); + q.push({i: i - 4, x: number(ta[0], tb[0])}, {i: i - 2, x: number(ta[1], tb[1])}); } else if (tb[0] || tb[1]) { s.push("translate(" + tb + ")"); } } -function interpolateRotate(ra, rb, s, q) { +function rotate(ra, rb, s, q) { if (ra !== rb) { if (ra - rb > 180) rb += 360; else if (rb - ra > 180) ra += 360; // shortest path - q.push({i: s.push(pop(s) + "rotate(", null, ")") - 2, x: interpolateNumber(ra, rb)}); + q.push({i: s.push(pop(s) + "rotate(", null, ")") - 2, x: number(ra, rb)}); } else if (rb) { s.push(pop(s) + "rotate(" + rb + ")"); } } -function interpolateSkew(wa, wb, s, q) { +function skew(wa, wb, s, q) { if (wa !== wb) { - q.push({i: s.push(pop(s) + "skewX(", null, ")") - 2, x: interpolateNumber(wa, wb)}); + q.push({i: s.push(pop(s) + "skewX(", null, ")") - 2, x: number(wa, wb)}); } else if (wb) { s.push(pop(s) + "skewX(" + wb + ")"); } } -function interpolateScale(ka, kb, s, q) { +function scale(ka, kb, s, q) { if (ka[0] !== kb[0] || ka[1] !== kb[1]) { var i = s.push(pop(s) + "scale(", null, ",", null, ")"); - q.push({i: i - 4, x: interpolateNumber(ka[0], kb[0])}, {i: i - 2, x: interpolateNumber(ka[1], kb[1])}); + q.push({i: i - 4, x: number(ka[0], kb[0])}, {i: i - 2, x: number(ka[1], kb[1])}); } else if (kb[0] !== 1 || kb[1] !== 1) { s.push(pop(s) + "scale(" + kb + ")"); } @@ -92,10 +92,10 @@ export default function(a, b) { var s = [], // string constants and placeholders q = []; // number interpolators a = new Transform(a), b = new Transform(b); - interpolateTranslate(a.translate, b.translate, s, q); - interpolateRotate(a.rotate, b.rotate, s, q); - interpolateSkew(a.skew, b.skew, s, q); - interpolateScale(a.scale, b.scale, s, q); + translate(a.translate, b.translate, s, q); + rotate(a.rotate, b.rotate, s, q); + skew(a.skew, b.skew, s, q); + scale(a.scale, b.scale, s, q); a = b = null; // gc return function(t) { var i = -1, n = q.length, o; diff --git a/src/value.js b/src/value.js new file mode 100644 index 0000000..d902622 --- /dev/null +++ b/src/value.js @@ -0,0 +1,7 @@ +import values from "./values"; + +export default function(a, b) { + var i = values.length, f; + while (--i >= 0 && !(f = values[i](a, b))); + return f; +}; diff --git a/src/values.js b/src/values.js new file mode 100644 index 0000000..098ce32 --- /dev/null +++ b/src/values.js @@ -0,0 +1,17 @@ +import {color} from "d3-color"; +import rgb from "./rgb"; +import array from "./array"; +import number from "./number"; +import object from "./object"; +import string from "./string"; + +export default [ + function(a, b) { + var t = typeof b, c; + return (t === "string" ? ((c = color(b)) ? (b = c, rgb) : string) + : b instanceof color ? rgb + : Array.isArray(b) ? array + : t === "object" && isNaN(b) ? object + : number)(a, b); + } +]; diff --git a/src/interpolateZoom.js b/src/zoom.js similarity index 100% rename from src/interpolateZoom.js rename to src/zoom.js diff --git a/test/array-test.js b/test/array-test.js new file mode 100644 index 0000000..9ee2bd6 --- /dev/null +++ b/test/array-test.js @@ -0,0 +1,20 @@ +var tape = require("tape"), + interpolate = require("../"); + +tape("array(a, b) interpolates defined elements in a and b", function(test) { + test.deepEqual(interpolate.array([2, 12], [4, 24])(.5), [3, 18]); + test.end(); +}); + +tape("array(a, b) interpolates nested objects and arrays", function(test) { + test.deepEqual(interpolate.array([[2, 12]], [[4, 24]])(.5), [[3, 18]]); + test.deepEqual(interpolate.array([{foo: [2, 12]}], [{foo: [4, 24]}])(.5), [{foo: [3, 18]}]); + test.end(); +}); + +tape("array(a, b) merges non-shared elements", function(test) { + test.deepEqual(interpolate.array([2, 12], [4, 24, 12])(.5), [3, 18, 12]); + test.deepEqual(interpolate.array([2, 12, 12], [4, 24])(.5), [3, 18, 12]); + test.end(); +}); + diff --git a/test/hcl-test.js b/test/hcl-test.js new file mode 100644 index 0000000..f9430d1 --- /dev/null +++ b/test/hcl-test.js @@ -0,0 +1,83 @@ +var tape = require("tape"), + color = require("d3-color"), + interpolate = require("../"); + +tape("hcl(a, b) converts a and b to HCL colors", function(test) { + test.equal(interpolate.hcl("steelblue", "brown")(0), color.rgb("steelblue") + ""); + test.equal(interpolate.hcl("steelblue", color.hcl("brown"))(1), color.rgb("brown") + ""); + test.equal(interpolate.hcl("steelblue", color.rgb("brown"))(1), color.rgb("brown") + ""); + test.end(); +}); + +tape("hcl(a, b) interpolates in HCL and returns an RGB hexadecimal string", function(test) { + test.equal(interpolate.hcl("steelblue", "#f00")(.2), "#6978c9"); + test.end(); +}); + +tape("hcl(a, b) uses the shortest path when interpolating hue difference greater than 180°", function(test) { + var i = interpolate.hcl(color.hcl(10, 50, 50), color.hcl(350, 50, 50)); + test.equal(i(0.0), "#c44f6a"); + test.equal(i(0.2), "#c44f70"); + test.equal(i(0.4), "#c34f76"); + test.equal(i(0.6), "#c14f7c"); + test.equal(i(0.8), "#bf5081"); + test.equal(i(1.0), "#bd5187"); + test.end(); +}); + +tape("hcl(a, b) uses the shortest path when interpolating hue difference greater than 360°", function(test) { + var i = interpolate.hcl(color.hcl(10, 50, 50), color.hcl(380, 50, 50)); + test.equal(i(0.0), "#c44f6a"); + test.equal(i(0.2), "#c44f68"); + test.equal(i(0.4), "#c55065"); + test.equal(i(0.6), "#c45062"); + test.equal(i(0.8), "#c4505f"); + test.equal(i(1.0), "#c4515c"); + test.end(); +}); + +tape("hcl(a, b) uses the shortest path when interpolating hue difference greater than 540°", function(test) { + var i = interpolate.hcl(color.hcl(10, 50, 50), color.hcl(710, 50, 50)); + test.equal(i(0.0), "#c44f6a"); + test.equal(i(0.2), "#c44f70"); + test.equal(i(0.4), "#c34f76"); + test.equal(i(0.6), "#c14f7c"); + test.equal(i(0.8), "#bf5081"); + test.equal(i(1.0), "#bd5187"); + test.end(); +}); + +tape("hcl(a, b) uses the shortest path when interpolating hue difference greater than 720°", function(test) { + var i = interpolate.hcl(color.hcl(10, 50, 50), color.hcl(740, 50, 50)); + test.equal(i(0.0), "#c44f6a"); + test.equal(i(0.2), "#c44f68"); + test.equal(i(0.4), "#c55065"); + test.equal(i(0.6), "#c45062"); + test.equal(i(0.8), "#c4505f"); + test.equal(i(1.0), "#c4515c"); + test.end(); +}); + +tape("hcl(a, b) uses a’s hue when b’s hue is undefined", function(test) { + test.equal(interpolate.hcl("#f60", color.hcl(NaN, NaN, 0))(.5), "#9b0000"); + test.equal(interpolate.hcl("#6f0", color.hcl(NaN, NaN, 0))(.5), "#008100"); + test.end(); +}); + +tape("hcl(a, b) uses b’s hue when a’s hue is undefined", function(test) { + test.equal(interpolate.hcl(color.hcl(NaN, NaN, 0), "#f60")(.5), "#9b0000"); + test.equal(interpolate.hcl(color.hcl(NaN, NaN, 0), "#6f0")(.5), "#008100"); + test.end(); +}); + +tape("hcl(a, b) uses a’s chroma when b’s chroma is undefined", function(test) { + test.equal(interpolate.hcl("#ccc", color.hcl(NaN, NaN, 0))(.5), "#616161"); + test.equal(interpolate.hcl("#f00", color.hcl(NaN, NaN, 0))(.5), "#a60000"); + test.end(); +}); + +tape("hcl(a, b) uses b’s chroma when a’s chroma is undefined", function(test) { + test.equal(interpolate.hcl(color.hcl(NaN, NaN, 0), "#ccc")(.5), "#616161"); + test.equal(interpolate.hcl(color.hcl(NaN, NaN, 0), "#f00")(.5), "#a60000"); + test.end(); +}); diff --git a/test/hclLong-test.js b/test/hclLong-test.js new file mode 100644 index 0000000..8729632 --- /dev/null +++ b/test/hclLong-test.js @@ -0,0 +1,50 @@ +var tape = require("tape"), + color = require("d3-color"), + interpolate = require("../"); + +tape("hclLong(a, b) converts a and b to HCL colors", function(test) { + test.equal(interpolate.hclLong("steelblue", "brown")(0), color.rgb("steelblue") + ""); + test.equal(interpolate.hclLong("steelblue", color.hcl("brown"))(1), color.rgb("brown") + ""); + test.equal(interpolate.hclLong("steelblue", color.rgb("brown"))(1), color.rgb("brown") + ""); + test.end(); +}); + +tape("hclLong(a, b) interpolates in HCL and returns an RGB hexadecimal string", function(test) { + test.equal(interpolate.hclLong("steelblue", "#f00")(.2), "#0090ae"); + test.end(); +}); + +tape("hclLong(a, b) does not use the shortest path when interpolating hue", function(test) { + var i = interpolate.hclLong(color.hcl(10, 50, 50), color.hcl(350, 50, 50)); + test.equal(i(0.0), "#c44f6a"); + test.equal(i(0.2), "#9c6f1d"); + test.equal(i(0.4), "#2e8745"); + test.equal(i(0.6), "#008aa5"); + test.equal(i(0.8), "#4376ca"); + test.equal(i(1.0), "#bd5187"); + test.end(); +}); + +tape("hclLong(a, b) uses a’s hue when b’s hue is undefined", function(test) { + test.equal(interpolate.hclLong("#f60", color.hcl(NaN, NaN, 0))(.5), "#9b0000"); + test.equal(interpolate.hclLong("#6f0", color.hcl(NaN, NaN, 0))(.5), "#008100"); + test.end(); +}); + +tape("hclLong(a, b) uses b’s hue when a’s hue is undefined", function(test) { + test.equal(interpolate.hclLong(color.hcl(NaN, NaN, 0), "#f60")(.5), "#9b0000"); + test.equal(interpolate.hclLong(color.hcl(NaN, NaN, 0), "#6f0")(.5), "#008100"); + test.end(); +}); + +tape("hclLong(a, b) uses a’s chroma when b’s chroma is undefined", function(test) { + test.equal(interpolate.hclLong("#ccc", color.hcl(NaN, NaN, 0))(.5), "#616161"); + test.equal(interpolate.hclLong("#f00", color.hcl(NaN, NaN, 0))(.5), "#a60000"); + test.end(); +}); + +tape("hclLong(a, b) uses b’s chroma when a’s chroma is undefined", function(test) { + test.equal(interpolate.hclLong(color.hcl(NaN, NaN, 0), "#ccc")(.5), "#616161"); + test.equal(interpolate.hclLong(color.hcl(NaN, NaN, 0), "#f00")(.5), "#a60000"); + test.end(); +}); diff --git a/test/hsl-test.js b/test/hsl-test.js new file mode 100644 index 0000000..b2436d5 --- /dev/null +++ b/test/hsl-test.js @@ -0,0 +1,50 @@ +var tape = require("tape"), + color = require("d3-color"), + interpolate = require("../"); + +tape("hsl(a, b) converts a and b to HSL colors", function(test) { + test.equal(interpolate.hsl("steelblue", "brown")(0), color.rgb("steelblue") + ""); + test.equal(interpolate.hsl("steelblue", color.hsl("brown"))(1), color.rgb("brown") + ""); + test.equal(interpolate.hsl("steelblue", color.rgb("brown"))(1), color.rgb("brown") + ""); + test.end(); +}); + +tape("hsl(a, b) interpolates in HSL and returns an RGB hexadecimal string", function(test) { + test.equal(interpolate.hsl("steelblue", "#f00")(.2), "#383dc3"); + test.end(); +}); + +tape("hsl(a, b) uses the shortest path when interpolating hue", function(test) { + var i = interpolate.hsl("hsl(10,50%,50%)", "hsl(350,50%,50%)"); + test.equal(i(0.0), "#bf5540"); + test.equal(i(0.2), "#bf4d40"); + test.equal(i(0.4), "#bf4440"); + test.equal(i(0.6), "#bf4044"); + test.equal(i(0.8), "#bf404d"); + test.equal(i(1.0), "#bf4055"); + test.end(); +}); + +tape("hsl(a, b) uses a’s hue when b’s hue is undefined", function(test) { + test.equal(interpolate.hsl("#f60", "#000")(.5), "#803300"); + test.equal(interpolate.hsl("#6f0", "#fff")(.5), "#b3ff80"); + test.end(); +}); + +tape("hsl(a, b) uses b’s hue when a’s hue is undefined", function(test) { + test.equal(interpolate.hsl("#000", "#f60")(.5), "#803300"); + test.equal(interpolate.hsl("#fff", "#6f0")(.5), "#b3ff80"); + test.end(); +}); + +tape("hsl(a, b) uses a’s saturation when b’s saturation is undefined", function(test) { + test.equal(interpolate.hsl("#ccc", "#000")(.5), "#666666"); + test.equal(interpolate.hsl("#f00", "#000")(.5), "#800000"); + test.end(); +}); + +tape("hsl(a, b) uses b’s saturation when a’s saturation is undefined", function(test) { + test.equal(interpolate.hsl("#000", "#ccc")(.5), "#666666"); + test.equal(interpolate.hsl("#000", "#f00")(.5), "#800000"); + test.end(); +}); diff --git a/test/hslLong-test.js b/test/hslLong-test.js new file mode 100644 index 0000000..4963ea2 --- /dev/null +++ b/test/hslLong-test.js @@ -0,0 +1,50 @@ +var tape = require("tape"), + color = require("d3-color"), + interpolate = require("../"); + +tape("hslLong(a, b) converts a and b to HSL colors", function(test) { + test.equal(interpolate.hslLong("steelblue", "brown")(0), color.rgb("steelblue") + ""); + test.equal(interpolate.hslLong("steelblue", color.hsl("brown"))(1), color.rgb("brown") + ""); + test.equal(interpolate.hslLong("steelblue", color.rgb("brown"))(1), color.rgb("brown") + ""); + test.end(); +}); + +tape("hslLong(a, b) interpolates in HSL and returns an RGB hexadecimal string", function(test) { + test.equal(interpolate.hslLong("steelblue", "#f00")(.2), "#38c3a2"); + test.end(); +}); + +tape("hslLong(a, b) does not use the shortest path when interpolating hue", function(test) { + var i = interpolate.hslLong("hsl(10,50%,50%)", "hsl(350,50%,50%)"); + test.equal(i(0.0), "#bf5540"); + test.equal(i(0.2), "#99bf40"); + test.equal(i(0.4), "#40bf77"); + test.equal(i(0.6), "#4077bf"); + test.equal(i(0.8), "#9940bf"); + test.equal(i(1.0), "#bf4055"); + test.end(); +}); + +tape("hslLong(a, b) uses a’s hue when b’s hue is undefined", function(test) { + test.equal(interpolate.hslLong("#f60", "#000")(.5), "#803300"); + test.equal(interpolate.hslLong("#6f0", "#fff")(.5), "#b3ff80"); + test.end(); +}); + +tape("hslLong(a, b) uses b’s hue when a’s hue is undefined", function(test) { + test.equal(interpolate.hslLong("#000", "#f60")(.5), "#803300"); + test.equal(interpolate.hslLong("#fff", "#6f0")(.5), "#b3ff80"); + test.end(); +}); + +tape("hslLong(a, b) uses a’s saturation when b’s saturation is undefined", function(test) { + test.equal(interpolate.hslLong("#ccc", "#000")(.5), "#666666"); + test.equal(interpolate.hslLong("#f00", "#000")(.5), "#800000"); + test.end(); +}); + +tape("hslLong(a, b) uses b’s saturation when a’s saturation is undefined", function(test) { + test.equal(interpolate.hslLong("#000", "#ccc")(.5), "#666666"); + test.equal(interpolate.hslLong("#000", "#f00")(.5), "#800000"); + test.end(); +}); diff --git a/test/interpolateArray-test.js b/test/interpolateArray-test.js deleted file mode 100644 index b9a3fef..0000000 --- a/test/interpolateArray-test.js +++ /dev/null @@ -1,20 +0,0 @@ -var tape = require("tape"), - interpolate = require("../"); - -tape("interpolateArray(a, b) interpolates defined elements in a and b", function(test) { - test.deepEqual(interpolate.interpolateArray([2, 12], [4, 24])(.5), [3, 18]); - test.end(); -}); - -tape("interpolateArray(a, b) interpolates nested objects and arrays", function(test) { - test.deepEqual(interpolate.interpolateArray([[2, 12]], [[4, 24]])(.5), [[3, 18]]); - test.deepEqual(interpolate.interpolateArray([{foo: [2, 12]}], [{foo: [4, 24]}])(.5), [{foo: [3, 18]}]); - test.end(); -}); - -tape("interpolateArray(a, b) merges non-shared elements", function(test) { - test.deepEqual(interpolate.interpolateArray([2, 12], [4, 24, 12])(.5), [3, 18, 12]); - test.deepEqual(interpolate.interpolateArray([2, 12, 12], [4, 24])(.5), [3, 18, 12]); - test.end(); -}); - diff --git a/test/interpolateObject-test.js b/test/interpolateObject-test.js deleted file mode 100644 index bdc5db0..0000000 --- a/test/interpolateObject-test.js +++ /dev/null @@ -1,36 +0,0 @@ -var tape = require("tape"), - interpolate = require("../"); - -tape("interpolateObject(a, b) interpolates defined properties in a and b", function(test) { - test.deepEqual(interpolate.interpolateObject({a: 2, b: 12}, {a: 4, b: 24})(.5), {a: 3, b: 18}); - test.end(); -}); - -tape("interpolateObject(a, b) interpolates inherited properties in a and b", function(test) { - function a(a) { this.a = a; } - a.prototype.b = 12; - test.deepEqual(interpolate.interpolateObject(new a(2), {a: 4, b: 12})(.5), {a: 3, b: 12}); - test.deepEqual(interpolate.interpolateObject({a: 2, b: 12}, new a(4))(.5), {a: 3, b: 12}); - test.deepEqual(interpolate.interpolateObject(new a(4), new a(2))(.5), {a: 3, b: 12}); - test.end(); -}); - -tape("interpolateObject(a, b) interpolates color properties as rgb", function(test) { - test.deepEqual(interpolate.interpolateObject({background: "red"}, {background: "green"})(.5), {background: "#804000"}); - test.deepEqual(interpolate.interpolateObject({fill: "red"}, {fill: "green"})(.5), {fill: "#804000"}); - test.deepEqual(interpolate.interpolateObject({stroke: "red"}, {stroke: "green"})(.5), {stroke: "#804000"}); - test.deepEqual(interpolate.interpolateObject({color: "red"}, {color: "green"})(.5), {color: "#804000"}); - test.end(); -}); - -tape("interpolateObject(a, b) interpolates nested objects and arrays", function(test) { - test.deepEqual(interpolate.interpolateObject({foo: [2, 12]}, {foo: [4, 24]})(.5), {foo: [3, 18]}); - test.deepEqual(interpolate.interpolateObject({foo: {bar: [2, 12]}}, {foo: {bar: [4, 24]}})(.5), {foo: {bar: [3, 18]}}); - test.end(); -}); - -tape("interpolateObject(a, b) merges non-shared properties", function(test) { - test.deepEqual(interpolate.interpolateObject({foo: 2}, {foo: 4, bar: 12})(.5), {foo: 3, bar: 12}); - test.deepEqual(interpolate.interpolateObject({foo: 2, bar: 12}, {foo: 4})(.5), {foo: 3, bar: 12}); - test.end(); -}); diff --git a/test/interpolateString-test.js b/test/interpolateString-test.js deleted file mode 100644 index 65a0e7d..0000000 --- a/test/interpolateString-test.js +++ /dev/null @@ -1,61 +0,0 @@ -var tape = require("tape"), - interpolate = require("../"); - -tape("interpolateString(a, b) interpolates matching numbers in a and b", function(test) { - test.equal(interpolate.interpolateString(" 10/20 30", "50/10 100 ")(.2), "18/18 44 "); - test.equal(interpolate.interpolateString(" 10/20 30", "50/10 100 ")(.4), "26/16 58 "); - test.end(); -}); - -tape("interpolateString(a, b) coerces a and b to strings", function(test) { - test.equal(interpolate.interpolateString({toString: function() { return "2px"; }}, {toString: function() { return "12px"; }})(.25), "4.5px"); - test.end(); -}); - -tape("interpolateString(a, b) preserves non-numbers in string b", function(test) { - test.equal(interpolate.interpolateString(" 10/20 30", "50/10 foo ")(.2), "18/18 foo "); - test.equal(interpolate.interpolateString(" 10/20 30", "50/10 foo ")(.4), "26/16 foo "); - test.end(); -}); - -tape("interpolateString(a, b) preserves non-matching numbers in string b", function(test) { - test.equal(interpolate.interpolateString(" 10/20 foo", "50/10 100 ")(.2), "18/18 100 "); - test.equal(interpolate.interpolateString(" 10/20 bar", "50/10 100 ")(.4), "26/16 100 "); - test.end(); -}); - -tape("interpolateString(a, b) preserves equal-value numbers in both strings", function(test) { - test.equal(interpolate.interpolateString(" 10/20 100 20", "50/10 100, 20 ")(.2), "18/18 100, 20 "); - test.equal(interpolate.interpolateString(" 10/20 100 20", "50/10 100, 20 ")(.4), "26/16 100, 20 "); - test.end(); -}); - -tape("interpolateString(a, b) interpolates decimal notation correctly", function(test) { - test.equal(interpolate.interpolateString("1.", "2.")(.5), "1.5"); - test.end(); -}); - -tape("interpolateString(a, b) interpolates exponent notation correctly", function(test) { - test.equal(interpolate.interpolateString("1e+3", "1e+4")(.5), "5500"); - test.equal(interpolate.interpolateString("1e-3", "1e-4")(.5), "0.00055"); - test.equal(interpolate.interpolateString("1.e-3", "1.e-4")(.5), "0.00055"); - test.equal(interpolate.interpolateString("-1.e-3", "-1.e-4")(.5), "-0.00055"); - test.equal(interpolate.interpolateString("+1.e-3", "+1.e-4")(.5), "0.00055"); - test.equal(interpolate.interpolateString(".1e-2", ".1e-3")(.5), "0.00055"); - test.end(); -}); - -tape("interpolateString(a, b) with no numbers, returns the target string", function(test) { - test.equal(interpolate.interpolateString("foo", "bar")(.5), "bar"); - test.equal(interpolate.interpolateString("foo", "")(.5), ""); - test.equal(interpolate.interpolateString("", "bar")(.5), "bar"); - test.equal(interpolate.interpolateString("", "")(.5), ""); - test.end(); -}); - -tape("interpolateString(a, b) with two numerically-equivalent numbers, returns the default format", function(test) { - test.equal(interpolate.interpolateString("top: 1000px;", "top: 1e3px;")(.5), "top: 1000px;"); - test.equal(interpolate.interpolateString("top: 1e3px;", "top: 1000px;")(.5), "top: 1000px;"); - test.end(); -}); - diff --git a/test/interpolateZoom-test.js b/test/interpolateZoom-test.js deleted file mode 100644 index dcb9692..0000000 --- a/test/interpolateZoom-test.js +++ /dev/null @@ -1,7 +0,0 @@ -var tape = require("tape"), - interpolate = require("../"); - -tape("interpolateZoom(a, b) handles nearly-coincident points", function(test) { - test.deepEqual(interpolate.interpolateZoom([324.68721096803614, 59.43501602433761, 1.8827137399562621], [324.6872108946794, 59.43501601062763, 7.399052110984391])(0.5), [324.68721093135775, 59.43501601748262, 3.7323313186268305]); - test.end(); -}); diff --git a/test/lab-test.js b/test/lab-test.js new file mode 100644 index 0000000..8bf24e3 --- /dev/null +++ b/test/lab-test.js @@ -0,0 +1,15 @@ +var tape = require("tape"), + color = require("d3-color"), + interpolate = require("../"); + +tape("lab(a, b) converts a and b to Lab colors", function(test) { + test.equal(interpolate.lab("steelblue", "brown")(0), color.rgb("steelblue") + ""); + test.equal(interpolate.lab("steelblue", color.hsl("brown"))(1), color.rgb("brown") + ""); + test.equal(interpolate.lab("steelblue", color.rgb("brown"))(1), color.rgb("brown") + ""); + test.end(); +}); + +tape("lab(a, b) interpolates in Lab and returns a hexadecimal string", function(test) { + test.equal(interpolate.lab("steelblue", "#f00")(.2), "#8a7793"); + test.end(); +}); diff --git a/test/interpolateNumber-test.js b/test/number-test.js similarity index 75% rename from test/interpolateNumber-test.js rename to test/number-test.js index 0ce6157..bbd0c08 100644 --- a/test/interpolateNumber-test.js +++ b/test/number-test.js @@ -3,8 +3,8 @@ var tape = require("tape"), require("./inDelta"); -tape("interpolateNumber(a, b) interpolates between two numbers a and b", function(test) { - var i = interpolate.interpolateNumber(10, 42); +tape("number(a, b) interpolates between two numbers a and b", function(test) { + var i = interpolate.number(10, 42); test.inDelta(i(0.0), 10.0); test.inDelta(i(0.1), 13.2); test.inDelta(i(0.2), 16.4); diff --git a/test/object-test.js b/test/object-test.js new file mode 100644 index 0000000..c910efd --- /dev/null +++ b/test/object-test.js @@ -0,0 +1,36 @@ +var tape = require("tape"), + interpolate = require("../"); + +tape("object(a, b) interpolates defined properties in a and b", function(test) { + test.deepEqual(interpolate.object({a: 2, b: 12}, {a: 4, b: 24})(.5), {a: 3, b: 18}); + test.end(); +}); + +tape("object(a, b) interpolates inherited properties in a and b", function(test) { + function a(a) { this.a = a; } + a.prototype.b = 12; + test.deepEqual(interpolate.object(new a(2), {a: 4, b: 12})(.5), {a: 3, b: 12}); + test.deepEqual(interpolate.object({a: 2, b: 12}, new a(4))(.5), {a: 3, b: 12}); + test.deepEqual(interpolate.object(new a(4), new a(2))(.5), {a: 3, b: 12}); + test.end(); +}); + +tape("object(a, b) interpolates color properties as rgb", function(test) { + test.deepEqual(interpolate.object({background: "red"}, {background: "green"})(.5), {background: "#804000"}); + test.deepEqual(interpolate.object({fill: "red"}, {fill: "green"})(.5), {fill: "#804000"}); + test.deepEqual(interpolate.object({stroke: "red"}, {stroke: "green"})(.5), {stroke: "#804000"}); + test.deepEqual(interpolate.object({color: "red"}, {color: "green"})(.5), {color: "#804000"}); + test.end(); +}); + +tape("object(a, b) interpolates nested objects and arrays", function(test) { + test.deepEqual(interpolate.object({foo: [2, 12]}, {foo: [4, 24]})(.5), {foo: [3, 18]}); + test.deepEqual(interpolate.object({foo: {bar: [2, 12]}}, {foo: {bar: [4, 24]}})(.5), {foo: {bar: [3, 18]}}); + test.end(); +}); + +tape("object(a, b) merges non-shared properties", function(test) { + test.deepEqual(interpolate.object({foo: 2}, {foo: 4, bar: 12})(.5), {foo: 3, bar: 12}); + test.deepEqual(interpolate.object({foo: 2, bar: 12}, {foo: 4})(.5), {foo: 3, bar: 12}); + test.end(); +}); diff --git a/test/rgb-test.js b/test/rgb-test.js new file mode 100644 index 0000000..416de86 --- /dev/null +++ b/test/rgb-test.js @@ -0,0 +1,15 @@ +var tape = require("tape"), + color = require("d3-color"), + interpolate = require("../"); + +tape("rgb(a, b) converts a and b to RGB colors", function(test) { + test.equal(interpolate.rgb("steelblue", "brown")(0), color.rgb("steelblue") + ""); + test.equal(interpolate.rgb("steelblue", color.hsl("brown"))(1), color.rgb("brown") + ""); + test.equal(interpolate.rgb("steelblue", color.rgb("brown"))(1), color.rgb("brown") + ""); + test.end(); +}); + +tape("rgb(a, b) interpolates in RGB and returns a hexadecimal string", function(test) { + test.equal(interpolate.rgb("steelblue", "#f00")(.2), "#6b6890"); + test.end(); +}); diff --git a/test/interpolateRound-test.js b/test/round-test.js similarity index 59% rename from test/interpolateRound-test.js rename to test/round-test.js index fa0f707..827f4d2 100644 --- a/test/interpolateRound-test.js +++ b/test/round-test.js @@ -1,8 +1,8 @@ var tape = require("tape"), interpolate = require("../"); -tape("interpolateRound(a, b) interpolates between two numbers a and b, and then rounds", function(test) { - var i = interpolate.interpolateRound(10, 42); +tape("round(a, b) interpolates between two numbers a and b, and then rounds", function(test) { + var i = interpolate.round(10, 42); test.equal(i(0.0), 10); test.equal(i(0.1), 13); test.equal(i(0.2), 16); @@ -17,8 +17,8 @@ tape("interpolateRound(a, b) interpolates between two numbers a and b, and then test.end(); }); -tape("interpolateRound(a, b) does not pre-round a and b", function(test) { - var i = interpolate.interpolateRound(2.6, 3.6); +tape("round(a, b) does not pre-round a and b", function(test) { + var i = interpolate.round(2.6, 3.6); test.equal(i(0.6), 3); test.end(); }); diff --git a/test/string-test.js b/test/string-test.js new file mode 100644 index 0000000..7cff536 --- /dev/null +++ b/test/string-test.js @@ -0,0 +1,61 @@ +var tape = require("tape"), + interpolate = require("../"); + +tape("string(a, b) interpolates matching numbers in a and b", function(test) { + test.equal(interpolate.string(" 10/20 30", "50/10 100 ")(.2), "18/18 44 "); + test.equal(interpolate.string(" 10/20 30", "50/10 100 ")(.4), "26/16 58 "); + test.end(); +}); + +tape("string(a, b) coerces a and b to strings", function(test) { + test.equal(interpolate.string({toString: function() { return "2px"; }}, {toString: function() { return "12px"; }})(.25), "4.5px"); + test.end(); +}); + +tape("string(a, b) preserves non-numbers in string b", function(test) { + test.equal(interpolate.string(" 10/20 30", "50/10 foo ")(.2), "18/18 foo "); + test.equal(interpolate.string(" 10/20 30", "50/10 foo ")(.4), "26/16 foo "); + test.end(); +}); + +tape("string(a, b) preserves non-matching numbers in string b", function(test) { + test.equal(interpolate.string(" 10/20 foo", "50/10 100 ")(.2), "18/18 100 "); + test.equal(interpolate.string(" 10/20 bar", "50/10 100 ")(.4), "26/16 100 "); + test.end(); +}); + +tape("string(a, b) preserves equal-value numbers in both strings", function(test) { + test.equal(interpolate.string(" 10/20 100 20", "50/10 100, 20 ")(.2), "18/18 100, 20 "); + test.equal(interpolate.string(" 10/20 100 20", "50/10 100, 20 ")(.4), "26/16 100, 20 "); + test.end(); +}); + +tape("string(a, b) interpolates decimal notation correctly", function(test) { + test.equal(interpolate.string("1.", "2.")(.5), "1.5"); + test.end(); +}); + +tape("string(a, b) interpolates exponent notation correctly", function(test) { + test.equal(interpolate.string("1e+3", "1e+4")(.5), "5500"); + test.equal(interpolate.string("1e-3", "1e-4")(.5), "0.00055"); + test.equal(interpolate.string("1.e-3", "1.e-4")(.5), "0.00055"); + test.equal(interpolate.string("-1.e-3", "-1.e-4")(.5), "-0.00055"); + test.equal(interpolate.string("+1.e-3", "+1.e-4")(.5), "0.00055"); + test.equal(interpolate.string(".1e-2", ".1e-3")(.5), "0.00055"); + test.end(); +}); + +tape("string(a, b) with no numbers, returns the target string", function(test) { + test.equal(interpolate.string("foo", "bar")(.5), "bar"); + test.equal(interpolate.string("foo", "")(.5), ""); + test.equal(interpolate.string("", "bar")(.5), "bar"); + test.equal(interpolate.string("", "")(.5), ""); + test.end(); +}); + +tape("string(a, b) with two numerically-equivalent numbers, returns the default format", function(test) { + test.equal(interpolate.string("top: 1000px;", "top: 1e3px;")(.5), "top: 1000px;"); + test.equal(interpolate.string("top: 1e3px;", "top: 1000px;")(.5), "top: 1000px;"); + test.end(); +}); + diff --git a/test/zoom-test.js b/test/zoom-test.js new file mode 100644 index 0000000..826fdee --- /dev/null +++ b/test/zoom-test.js @@ -0,0 +1,7 @@ +var tape = require("tape"), + interpolate = require("../"); + +tape("zoom(a, b) handles nearly-coincident points", function(test) { + test.deepEqual(interpolate.zoom([324.68721096803614, 59.43501602433761, 1.8827137399562621], [324.6872108946794, 59.43501601062763, 7.399052110984391])(0.5), [324.68721093135775, 59.43501601748262, 3.7323313186268305]); + test.end(); +});