HCL Interpolation

.block

license: gpl-3.0

.gitignore

.DS_Store
node_modules
npm-debug.log

README.md

A simple test of interpolateHcl from the d3-color module, animated with timer from the d3-transition module. Note that interpolateHcl chooses the shortest path between two hues, and the change in hue is thus always less than 180°; use interpolateHclLong to take the long path.

d3.js

export {
  color,
  rgb,
  hcl,
  interpolateRgb,
  interpolateHcl,
  interpolateHclLong
} from "d3-color";

export {
  timer
} from "d3-timer";

d3.min.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3",["exports"],e):e(t.d3={})}(this,function(t){"use strict";function e(){}function n(t){var e;return t=(t+"").trim().toLowerCase(),(e=R.exec(t))?(e=parseInt(e[1],16),i(e>>8&15|e>>4&240,e>>4&15|240&e,(15&e)<<4|15&e)):(e=$.exec(t))?r(parseInt(e[1],16)):(e=I.exec(t))?i(e[1],e[2],e[3]):(e=T.exec(t))?i(255*e[1]/100,255*e[2]/100,255*e[3]/100):(e=D.exec(t))?s(e[1],e[2]/100,e[3]/100):P.hasOwnProperty(t)?r(P[t]):null}function r(t){return i(t>>16&255,t>>8&255,255&t)}function i(t,r,i){return 1===arguments.length&&(t instanceof e||(t=n(t)),t?(t=t.rgb(),i=t.b,r=t.g,t=t.r):t=r=i=NaN),new a(t,r,i)}function a(t,e,n){this.r=+t,this.g=+e,this.b=+n}function o(t,e,n){return"#"+(isNaN(t)?"00":(t=Math.round(t))<16?"0"+Math.max(0,t).toString(16):Math.min(255,t).toString(16))+(isNaN(e)?"00":(e=Math.round(e))<16?"0"+Math.max(0,e).toString(16):Math.min(255,e).toString(16))+(isNaN(n)?"00":(n=Math.round(n))<16?"0"+Math.max(0,n).toString(16):Math.min(255,n).toString(16))}function s(t,r,i){if(1===arguments.length)if(t instanceof l)i=t.l,r=t.s,t=t.h;else if(t instanceof e||(t=n(t)),t){if(t instanceof l)return t;t=t.rgb();var a=t.r/255,o=t.g/255,s=t.b/255,h=Math.min(a,o,s),u=Math.max(a,o,s),c=u-h;i=(u+h)/2,c?(r=.5>i?c/(u+h):c/(2-u-h),t=a===u?(o-s)/c+6*(s>o):o===u?(s-a)/c+2:(a-o)/c+4,t*=60):(t=NaN,r=i>0&&1>i?0:t)}else t=r=i=NaN;return new l(t,r,i)}function l(t,e,n){this.h=+t,this.s=+e,this.l=+n}function h(t,e,n){return 255*(60>t?e+(n-e)*t/60:180>t?n:240>t?e+(n-e)*(240-t)/60:e)}function u(t,e,n){if(1===arguments.length)if(t instanceof c)n=t.b,e=t.a,t=t.l;else if(t instanceof m){var r=t.h*V;n=Math.sin(r)*t.c,e=Math.cos(r)*t.c,t=t.l}else{t instanceof a||(t=i(t));var o=b(t.r),s=b(t.g),n=b(t.b),l=d((.4124564*o+.3575761*s+.1804375*n)/E),h=d((.2126729*o+.7151522*s+.072175*n)/O),u=d((.0193339*o+.119192*s+.9503041*n)/B);n=200*(h-u),e=500*(l-h),t=116*h-16}return new c(t,e,n)}function c(t,e,n){this.l=+t,this.a=+e,this.b=+n}function d(t){return t>Q?Math.pow(t,1/3):t/K+G}function g(t){return t>J?t*t*t:K*(t-G)}function f(t){return 255*(.0031308>=t?12.92*t:1.055*Math.pow(t,1/2.4)-.055)}function b(t){return(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function p(t,e,n){return 1===arguments.length&&(t instanceof m?(n=t.l,e=t.c,t=t.h):(t instanceof c||(t=u(t)),n=t.l,e=Math.sqrt(t.a*t.a+t.b*t.b),t=Math.atan2(t.b,t.a)*W,0>t&&(t+=360))),new m(t,e,n)}function m(t,e,n){this.h=+t,this.c=+e,this.l=+n}function w(t,e,n){if(1===arguments.length)if(t instanceof y)n=t.l,e=t.s,t=t.h;else{t instanceof a||(t=i(t));var r=t.r/255,o=t.g/255,s=t.b/255;n=(it*s+nt*r-rt*o)/(it+nt-rt);var l=s-n,h=(et*(o-n)-_*l)/tt;e=Math.sqrt(h*h+l*l)/(et*n*(1-n)),t=e?Math.atan2(h,l)*W-120:NaN,0>t&&(t+=360)}return new y(t,e,n)}function y(t,e,n){this.h=+t,this.s=+e,this.l=+n}function k(t,e){var n=t-e;return n>180||-180>n?n-360*Math.round(n/360):n}function N(t,e){t=i(t),e=i(e);var n=t.r,r=t.g,a=t.b,s=e.r-n,l=e.g-r,h=e.b-a;return function(t){return o(Math.round(n+s*t),Math.round(r+l*t),Math.round(a+h*t))}}function v(t,e){t=p(t),e=p(e);var n=isNaN(t.h)?e.h:t.h,r=isNaN(t.c)?e.c:t.c,i=t.l,a=isNaN(e.h)?0:k(e.h,n),o=isNaN(e.c)?0:e.c-r,s=e.l-i;return function(e){return t.h=n+a*e,t.c=r+o*e,t.l=i+s*e,t+""}}function M(t,e){t=p(t),e=p(e);var n=isNaN(t.h)?e.h:t.h,r=isNaN(t.c)?e.c:t.c,i=t.l,a=isNaN(e.h)?0:e.h-n,o=isNaN(e.c)?0:e.c-r,s=e.l-i;return function(e){return t.h=n+a*e,t.c=r+o*e,t.l=i+s*e,t+""}}function x(t,e,n){this.id=++ut,this.restart(t,e,n)}function q(t,e,n){return new x(t,e,n)}function S(t){t=null==t?Date.now():+t,++lt;try{for(var e,n=ot;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--lt}}function A(){lt=ht=0;try{S()}finally{for(var t,e=ot,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:ot=e.next;st=t,F(n)}}function F(t){if(!lt){ht&&(ht=clearTimeout(ht));var e=t-Date.now();e>24?1/0>t&&(ht=setTimeout(A,e)):(lt=1,dt(A))}}var R=/^#([0-9a-f]{3})$/,$=/^#([0-9a-f]{6})$/,I=/^rgb\(\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*\)$/,T=/^rgb\(\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/,D=/^hsl\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/;n.prototype=e.prototype={displayable:function(){return this.rgb().displayable()},toString:function(){return this.rgb()+""}};var P={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074},j=.7,z=1/j,H=i.prototype=a.prototype=new e;H.brighter=function(t){return t=null==t?z:Math.pow(z,t),new a(this.r*t,this.g*t,this.b*t)},H.darker=function(t){return t=null==t?j:Math.pow(j,t),new a(this.r*t,this.g*t,this.b*t)},H.rgb=function(){return this},H.displayable=function(){return 0<=this.r&&this.r<=255&&0<=this.g&&this.g<=255&&0<=this.b&&this.b<=255},H.toString=function(){return o(this.r,this.g,this.b)};var L=s.prototype=l.prototype=new e;L.brighter=function(t){return t=null==t?z:Math.pow(z,t),new l(this.h,this.s,this.l*t)},L.darker=function(t){return t=null==t?j:Math.pow(j,t),new l(this.h,this.s,this.l*t)},L.rgb=function(){var t=this.h%360+360*(this.h<0),e=isNaN(t)||isNaN(this.s)?0:this.s,n=this.l,r=n+(.5>n?n:1-n)*e,i=2*n-r;return new a(h(t>=240?t-240:t+120,i,r),h(t,i,r),h(120>t?t+240:t-120,i,r))},L.displayable=function(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1};var C=18,E=.95047,O=1,B=1.08883,G=4/29,J=6/29,K=3*J*J,Q=J*J*J,U=u.prototype=c.prototype=new e;U.brighter=function(t){return new c(this.l+C*(null==t?1:t),this.a,this.b)},U.darker=function(t){return new c(this.l-C*(null==t?1:t),this.a,this.b)},U.rgb=function(){var t=(this.l+16)/116,e=isNaN(this.a)?t:t+this.a/500,n=isNaN(this.b)?t:t-this.b/200;return t=O*g(t),e=E*g(e),n=B*g(n),new a(f(3.2404542*e-1.5371385*t-.4985314*n),f(-.969266*e+1.8760108*t+.041556*n),f(.0556434*e-.2040259*t+1.0572252*n))};var V=Math.PI/180,W=180/Math.PI,X=p.prototype=m.prototype=new e;X.brighter=function(t){return new m(this.h,this.c,this.l+C*(null==t?1:t))},X.darker=function(t){return new m(this.h,this.c,this.l-C*(null==t?1:t))},X.rgb=function(){return u(this).rgb()};var Y=-.14861,Z=1.78277,_=-.29227,tt=-.90649,et=1.97294,nt=et*tt,rt=et*Z,it=Z*_-tt*Y,at=w.prototype=y.prototype=new e;at.brighter=function(t){return t=null==t?z:Math.pow(z,t),new y(this.h,this.s,this.l*t)},at.darker=function(t){return t=null==t?j:Math.pow(j,t),new y(this.h,this.s,this.l*t)},at.rgb=function(){var t=isNaN(this.h)?0:(this.h+120)*V,e=+this.l,n=isNaN(this.s)?0:this.s*e*(1-e),r=Math.cos(t),i=Math.sin(t);return new a(255*(e+n*(Y*r+Z*i)),255*(e+n*(_*r+tt*i)),255*(e+n*et*r))};var ot,st,lt=0,ht=0,ut=0,ct={},dt="undefined"!=typeof window&&(window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(t){return setTimeout(t,17)};x.prototype=q.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var r=this.id,i=ct[r];i?(i.callback=t,i.time=n):(i={next:null,callback:t,time:n},st?st.next=i:ot=i,ct[r]=st=i),F()},stop:function(){var t=this.id,e=ct[t];e&&(e.callback=null,e.time=1/0,delete ct[t],F())}},t.color=n,t.rgb=i,t.hcl=p,t.interpolateRgb=N,t.interpolateHcl=v,t.interpolateHclLong=M,t.timer=q});

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="1" style="width:960px;height:500px;"></canvas>
<script src="d3.min.js"></script>
<script>

var canvas = document.querySelector("canvas"),
    width = canvas.width,
    context = canvas.getContext("2d"),
    image = context.createImageData(width, 1);

d3.timer(function(elapsed) {
  var hue = elapsed * .1,
      interpolate = d3.interpolateHcl(d3.hcl(hue, 50, 95), d3.hcl(hue + 120, 50, 25));

  for (var i = 0, j = -1, c; i < width; ++i) {
    c = d3.rgb(interpolate(i / (width - 1)));
    image.data[++j] = c.r;
    image.data[++j] = c.g;
    image.data[++j] = c.b;
    image.data[++j] = 255;
  }

  context.putImageData(image, 0, 0);
});

</script>

package.json

{
  "scripts": {
    "build": "rollup -c | uglifyjs -c -m > d3.min.js"
  },
  "dependencies": {
    "d3-color": "^0.2.8",
    "d3-timer": "^0.0.6",
    "rollup": "^0.21.0",
    "rollup-plugin-npm": "^1.1.0",
    "uglify-js": "2"
  }
}

rollup.config.js

import npm from "rollup-plugin-npm";

export default {
  entry: "d3.js",
  plugins: [npm({jsnext: true})],
  moduleId: "d3",
  moduleName: "d3",
  format: "umd"
};

thumbnail.png