From eee2dd667fa9394df208c48d6e79924a58d896ad Mon Sep 17 00:00:00 2001 From: Pomax Date: Sat, 9 Jan 2016 23:37:22 -0800 Subject: [PATCH] bezierjs update --- article.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/article.js b/article.js index 3be7a8ca..bc50d5b9 100644 --- a/article.js +++ b/article.js @@ -52,7 +52,7 @@ this.ctx.beginPath(),this.ctx.moveTo(n+e.startcap.points[0].x,r+e.startcap.point * */ (function(){var n,o,i,s,l,c,u,d,h,p,m,f,g,v,y,w,b,E,x,C,N,k,_,D,T,S,O,M,P,I,R,L,A,V,B,z,j,F,U,q,W,G,X,K,H,Y,Q,J,$,Z,ee,te,ne,re,ae,oe,ie,se,le,ce,ue,de,he,pe,me,fe,ge,ve,ye,we,be,Ee,xe,Ce,Ne,ke,_e,De,Te=[].slice;Ce=function(){var e,t,n,r,a;for(e={},a="Boolean Number String Function Array Date RegExp Undefined Null".split(" "),r=0,t=a.length;t>r;r++)n=a[r],e["[object "+n+"]"]=n.toLowerCase();return function(t){var n;return n=Object.prototype.toString.call(t),e[n]||"object"}}(),H=function(e,t,n){return null==t&&(t=0),null==n&&(n=1),t>e&&(e=t),e>n&&(e=n),e},Ne=function(e){return e.length>=3?[].slice.call(e):e[0]},C=function(e){var t;for(t in e)3>t?(e[t]<0&&(e[t]=0),e[t]>255&&(e[t]=255)):3===t&&(e[t]<0&&(e[t]=0),e[t]>1&&(e[t]=1));return e},s=Math.PI,ye=Math.round,_=Math.cos,M=Math.floor,re=Math.pow,Y=Math.log,be=Math.sin,Ee=Math.sqrt,g=Math.atan2,$=Math.max,f=Math.abs,u=2*s,l=s/3,o=s/180,c=180/s,x=function(){return arguments[0]instanceof n?arguments[0]:function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,arguments,function(){})},m=[],"undefined"!=typeof e&&null!==e&&null!=e.exports&&(e.exports=x),r=[],a=function(){return x}.apply(t,r),!(void 0!==a&&(e.exports=a)),x.version="1.1.1",p={},d=[],h=!1,n=function(){function e(){var e,t,n,r,a,o,i,s,l;for(o=this,t=[],s=0,r=arguments.length;r>s;s++)e=arguments[s],null!=e&&t.push(e);if(i=t[t.length-1],null!=p[i])o._rgb=C(p[i](Ne(t.slice(0,-1))));else{for(h||(d=d.sort(function(e,t){return t.p-e.p}),h=!0),l=0,a=d.length;a>l&&(n=d[l],!(i=n.test.apply(n,t)));l++);i&&(o._rgb=C(p[i].apply(p,t)))}null==o._rgb&&console.warn("unknown format: "+t),null==o._rgb&&(o._rgb=[0,0,0]),3===o._rgb.length&&o._rgb.push(1)}return e.prototype.alpha=function(e){return arguments.length?(this._rgb[3]=e,this):this._rgb[3]},e.prototype.toString=function(){return this.name()},e}(),x._input=p,x.brewer=b={OrRd:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"],PuBu:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"],BuPu:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"],Oranges:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"],BuGn:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"],YlOrBr:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"],YlGn:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"],Reds:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"],RdPu:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"],Greens:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"],YlGnBu:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],Purples:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"],GnBu:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],Greys:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"],YlOrRd:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"],PuRd:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"],Blues:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"],PuBuGn:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"],Spectral:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],RdYlGn:["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],RdBu:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],PiYG:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],PRGn:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],RdYlBu:["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],BrBG:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],RdGy:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],PuOr:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],Set2:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"],Accent:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"],Set1:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"],Set3:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"],Dark2:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"],Paired:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"],Pastel2:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"],Pastel1:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]},ke={indigo:"#4b0082",gold:"#ffd700",hotpink:"#ff69b4",firebrick:"#b22222",indianred:"#cd5c5c",yellow:"#ffff00",mistyrose:"#ffe4e1",darkolivegreen:"#556b2f",olive:"#808000",darkseagreen:"#8fbc8f",pink:"#ffc0cb",tomato:"#ff6347",lightcoral:"#f08080",orangered:"#ff4500",navajowhite:"#ffdead",lime:"#00ff00",palegreen:"#98fb98",darkslategrey:"#2f4f4f",greenyellow:"#adff2f",burlywood:"#deb887",seashell:"#fff5ee",mediumspringgreen:"#00fa9a",fuchsia:"#ff00ff",papayawhip:"#ffefd5",blanchedalmond:"#ffebcd",chartreuse:"#7fff00",dimgray:"#696969",black:"#000000",peachpuff:"#ffdab9",springgreen:"#00ff7f",aquamarine:"#7fffd4",white:"#ffffff",orange:"#ffa500",lightsalmon:"#ffa07a",darkslategray:"#2f4f4f",brown:"#a52a2a",ivory:"#fffff0",dodgerblue:"#1e90ff",peru:"#cd853f",lawngreen:"#7cfc00",chocolate:"#d2691e",crimson:"#dc143c",forestgreen:"#228b22",darkgrey:"#a9a9a9",lightseagreen:"#20b2aa",cyan:"#00ffff",mintcream:"#f5fffa",silver:"#c0c0c0",antiquewhite:"#faebd7",mediumorchid:"#ba55d3",skyblue:"#87ceeb",gray:"#808080",darkturquoise:"#00ced1",goldenrod:"#daa520",darkgreen:"#006400",floralwhite:"#fffaf0",darkviolet:"#9400d3",darkgray:"#a9a9a9",moccasin:"#ffe4b5",saddlebrown:"#8b4513",grey:"#808080",darkslateblue:"#483d8b",lightskyblue:"#87cefa",lightpink:"#ffb6c1",mediumvioletred:"#c71585",slategrey:"#708090",red:"#ff0000",deeppink:"#ff1493",limegreen:"#32cd32",darkmagenta:"#8b008b",palegoldenrod:"#eee8aa",plum:"#dda0dd",turquoise:"#40e0d0",lightgrey:"#d3d3d3",lightgoldenrodyellow:"#fafad2",darkgoldenrod:"#b8860b",lavender:"#e6e6fa",maroon:"#800000",yellowgreen:"#9acd32",sandybrown:"#f4a460",thistle:"#d8bfd8",violet:"#ee82ee",navy:"#000080",magenta:"#ff00ff",dimgrey:"#696969",tan:"#d2b48c",rosybrown:"#bc8f8f",olivedrab:"#6b8e23",blue:"#0000ff",lightblue:"#add8e6",ghostwhite:"#f8f8ff",honeydew:"#f0fff0",cornflowerblue:"#6495ed",slateblue:"#6a5acd",linen:"#faf0e6",darkblue:"#00008b",powderblue:"#b0e0e6",seagreen:"#2e8b57",darkkhaki:"#bdb76b",snow:"#fffafa",sienna:"#a0522d",mediumblue:"#0000cd",royalblue:"#4169e1",lightcyan:"#e0ffff",green:"#008000",mediumpurple:"#9370db",midnightblue:"#191970",cornsilk:"#fff8dc",paleturquoise:"#afeeee",bisque:"#ffe4c4",slategray:"#708090",darkcyan:"#008b8b",khaki:"#f0e68c",wheat:"#f5deb3",teal:"#008080",darkorchid:"#9932cc",deepskyblue:"#00bfff",salmon:"#fa8072",darkred:"#8b0000",steelblue:"#4682b4",palevioletred:"#db7093",lightslategray:"#778899",aliceblue:"#f0f8ff",lightslategrey:"#778899",lightgreen:"#90ee90",orchid:"#da70d6",gainsboro:"#dcdcdc",mediumseagreen:"#3cb371",lightgray:"#d3d3d3",mediumturquoise:"#48d1cc",lemonchiffon:"#fffacd",cadetblue:"#5f9ea0",lightyellow:"#ffffe0",lavenderblush:"#fff0f5",coral:"#ff7f50",purple:"#800080",aqua:"#00ffff",whitesmoke:"#f5f5f5",mediumslateblue:"#7b68ee",darkorange:"#ff8c00",mediumaquamarine:"#66cdaa",darksalmon:"#e9967a",beige:"#f5f5dc",blueviolet:"#8a2be2",azure:"#f0ffff",lightsteelblue:"#b0c4de",oldlace:"#fdf5e6",rebeccapurple:"#663399"},x.colors=k=ke,q=function(){var e,t,n,r,a,o,s,l,c;return t=Ne(arguments),a=t[0],e=t[1],n=t[2],l=(a+16)/116,s=isNaN(e)?l:l+e/500,c=isNaN(n)?l:l-n/200,l=i.Yn*W(l),s=i.Xn*W(s),c=i.Zn*W(c),o=De(3.2404542*s-1.5371385*l-.4985314*c),r=De(-.969266*s+1.8760108*l+.041556*c),n=De(.0556434*s-.2040259*l+1.0572252*c),o=H(o,0,255),r=H(r,0,255),n=H(n,0,255),[o,r,n,t.length>3?t[3]:1]},De=function(e){return ye(255*(.00304>=e?12.92*e:1.055*re(e,1/2.4)-.055))},W=function(e){return e>i.t1?e*e*e:i.t2*(e-i.t0)},i={Kn:18,Xn:.95047,Yn:1,Zn:1.08883,t0:.137931034,t1:.206896552,t2:.12841855,t3:.008856452},ue=function(){var e,t,n,r,a,o,i,s;return r=Ne(arguments),n=r[0],t=r[1],e=r[2],a=fe(n,t,e),o=a[0],i=a[1],s=a[2],[116*i-16,500*(o-i),200*(i-s)]},ge=function(e){return(e/=255)<=.04045?e/12.92:re((e+.055)/1.055,2.4)},_e=function(e){return e>i.t3?re(e,1/3):e/i.t2+i.t0},fe=function(){var e,t,n,r,a,o,s;return r=Ne(arguments),n=r[0],t=r[1],e=r[2],n=ge(n),t=ge(t),e=ge(e),a=_e((.4124564*n+.3575761*t+.1804375*e)/i.Xn),o=_e((.2126729*n+.7151522*t+.072175*e)/i.Yn),s=_e((.0193339*n+.119192*t+.9503041*e)/i.Zn),[a,o,s]},x.lab=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["lab"]),function(){})},p.lab=q,n.prototype.lab=function(){return ue(this._rgb)},v=function(e){var t,n,r,a,o,i,s,l,c,u,d;return e=function(){var t,n,r;for(r=[],n=0,t=e.length;t>n;n++)a=e[n],r.push(x(a));return r}(),2===e.length?(c=function(){var t,n,r;for(r=[],n=0,t=e.length;t>n;n++)a=e[n],r.push(a.lab());return r}(),o=c[0],i=c[1],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;2>=n;t=++n)r.push(o[t]+e*(i[t]-o[t]));return r}(),x.lab.apply(x,n)}):3===e.length?(u=function(){var t,n,r;for(r=[],n=0,t=e.length;t>n;n++)a=e[n],r.push(a.lab());return r}(),o=u[0],i=u[1],s=u[2],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;2>=n;t=++n)r.push((1-e)*(1-e)*o[t]+2*(1-e)*e*i[t]+e*e*s[t]);return r}(),x.lab.apply(x,n)}):4===e.length?(d=function(){var t,n,r;for(r=[],n=0,t=e.length;t>n;n++)a=e[n],r.push(a.lab());return r}(),o=d[0],i=d[1],s=d[2],l=d[3],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;2>=n;t=++n)r.push((1-e)*(1-e)*(1-e)*o[t]+3*(1-e)*(1-e)*e*i[t]+3*(1-e)*e*e*s[t]+e*e*e*l[t]);return r}(),x.lab.apply(x,n)}):5===e.length&&(n=v(e.slice(0,3)),r=v(e.slice(2,5)),t=function(e){return.5>e?n(2*e):r(2*(e-.5))}),t},x.bezier=function(e){var t;return t=v(e),t.scale=function(){return x.scale(t)},t},x.cubehelix=function(e,t,n,r,a){var o,i,s;return null==e&&(e=300),null==t&&(t=-1.5),null==n&&(n=1),null==r&&(r=1),null==a&&(a=[0,1]),i=a[1]-a[0],o=0,s=function(s){var l,c,d,h,p,m,f,g,v;return l=u*((e+120)/360+t*s),f=re(a[0]+i*s,r),m=0!==o?n[0]+s*o:n,c=m*f*(1-f)/2,h=_(l),v=be(l),g=f+c*(-.14861*h+1.78277*v),p=f+c*(-.29227*h-.90649*v),d=f+c*(1.97294*h),x(C([255*g,255*p,255*d]))},s.start=function(t){return null==t?e:(e=t,s)},s.rotations=function(e){return null==e?t:(t=e,s)},s.gamma=function(e){return null==e?r:(r=e,s)},s.hue=function(e){return null==e?n:(n=e,"array"===Ce(n)?(o=n[1]-n[0],0===o&&(n=n[1])):o=0,s)},s.lightness=function(e){return null==e?a:(a=e,"array"===Ce(a)?(i=a[1]-a[0],0===i&&(a=a[1])):i=0,s)},s.scale=function(){return x.scale(s)},s.hue(n),s},x.random=function(){var e,t,r,a;for(t="0123456789abcdef",e="#",r=a=0;6>a;r=++a)e+=t.charAt(M(16*Math.random()));return new n(e)},p.rgb=function(){var e,t,n,r;t=Ne(arguments),n=[];for(e in t)r=t[e],n.push(r);return n},x.rgb=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["rgb"]),function(){})},n.prototype.rgb=function(){return this._rgb.slice(0,3)},n.prototype.rgba=function(){return this._rgb},d.push({p:15,test:function(e){var t;return t=Ne(arguments),"array"===Ce(t)&&3===t.length?"rgb":4===t.length&&"number"===Ce(t[3])&&t[3]>=0&&t[3]<=1?"rgb":void 0}}),P=function(e){var t,n,r,a,o,i;if(e.match(/^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/))return(4===e.length||7===e.length)&&(e=e.substr(1)),3===e.length&&(e=e.split(""),e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),i=parseInt(e,16),a=i>>16,r=i>>8&255,n=255&i,[a,r,n,1];if(e.match(/^#?([A-Fa-f0-9]{8})$/))return 9===e.length&&(e=e.substr(1)),i=parseInt(e,16),a=i>>24&255,r=i>>16&255,n=i>>8&255,t=ye((255&i)/255*100)/100,[a,r,n,t];if(null!=p.css&&(o=p.css(e)))return o;throw"unknown color: "+e},ie=function(e,t){var n,r,a,o,i,s,l;return null==t&&(t="rgb"),i=e[0],a=e[1],r=e[2],n=e[3],l=i<<16|a<<8|r,s="000000"+l.toString(16),s=s.substr(s.length-6),o="0"+ye(255*n).toString(16),o=o.substr(o.length-2),"#"+function(){switch(t.toLowerCase()){case"rgba":return s+o;case"argb":return o+s;default:return s}}()},p.hex=function(e){return P(e)},x.hex=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["hex"]),function(){})},n.prototype.hex=function(e){return null==e&&(e="rgb"),ie(this._rgb,e)},d.push({p:10,test:function(e){return 1===arguments.length&&"string"===Ce(e)?"hex":void 0}}),L=function(){var e,t,n,r,a,o,i,s,l,c,u,d,h,p;if(e=Ne(arguments),a=e[0],u=e[1],i=e[2],0===u)l=r=t=255*i;else{for(p=[0,0,0],n=[0,0,0],h=.5>i?i*(1+u):i+u-i*u,d=2*i-h,a/=360,p[0]=a+1/3,p[1]=a,p[2]=a-1/3,o=s=0;2>=s;o=++s)p[o]<0&&(p[o]+=1),p[o]>1&&(p[o]-=1),6*p[o]<1?n[o]=d+6*(h-d)*p[o]:2*p[o]<1?n[o]=h:3*p[o]<2?n[o]=d+(h-d)*(2/3-p[o])*6:n[o]=d;c=[ye(255*n[0]),ye(255*n[1]),ye(255*n[2])],l=c[0],r=c[1],t=c[2]}return e.length>3?[l,r,t,e[3]]:[l,r,t]},le=function(e,t,n){var r,a,o,i,s;return void 0!==e&&e.length>=3&&(i=e,e=i[0],t=i[1],n=i[2]),e/=255,t/=255,n/=255,o=Math.min(e,t,n),$=Math.max(e,t,n),a=($+o)/2,$===o?(s=0,r=Number.NaN):s=.5>a?($-o)/($+o):($-o)/(2-$-o),e===$?r=(t-n)/($-o):t===$?r=2+(n-e)/($-o):n===$&&(r=4+(e-t)/($-o)),r*=60,0>r&&(r+=360),[r,s,a]},x.hsl=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["hsl"]),function(){})},p.hsl=L,n.prototype.hsl=function(){return le(this._rgb)},A=function(){var e,t,n,r,a,o,i,s,l,c,u,d,h,p,m,f,g,v;if(e=Ne(arguments),a=e[0],f=e[1],v=e[2],v*=255,0===f)l=r=t=v;else switch(360===a&&(a=0),a>360&&(a-=360),0>a&&(a+=360),a/=60,o=M(a),n=a-o,i=v*(1-f),s=v*(1-f*n),g=v*(1-f*(1-n)),o){case 0:c=[v,g,i],l=c[0],r=c[1],t=c[2];break;case 1:u=[s,v,i],l=u[0],r=u[1],t=u[2];break;case 2:d=[i,v,g],l=d[0],r=d[1],t=d[2];break;case 3:h=[i,s,v],l=h[0],r=h[1],t=h[2];break;case 4:p=[g,i,v],l=p[0],r=p[1],t=p[2];break;case 5:m=[v,i,s],l=m[0],r=m[1],t=m[2]}return l=ye(l),r=ye(r),t=ye(t),[l,r,t,e.length>3?e[3]:1]},ce=function(){var e,t,n,r,a,o,i,s,l;return i=Ne(arguments),o=i[0],n=i[1],e=i[2],a=Math.min(o,n,e),$=Math.max(o,n,e),t=$-a,l=$/255,0===$?(r=Number.NaN,s=0):(s=t/$,o===$&&(r=(n-e)/t),n===$&&(r=2+(e-o)/t),e===$&&(r=4+(o-n)/t),r*=60,0>r&&(r+=360)),[r,s,l]},x.hsv=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["hsv"]),function(){})},p.hsv=A,n.prototype.hsv=function(){return ce(this._rgb)},te=function(e){var t,n,r;return"number"===Ce(e)&&e>=0&&16777215>=e?(r=e>>16,n=e>>8&255,t=255&e,[r,n,t,1]):(console.warn("unknown num color: "+e),[0,0,0,1])},pe=function(){var e,t,n,r;return r=Ne(arguments),n=r[0],t=r[1],e=r[2],(n<<16)+(t<<8)+e},x.num=function(e){return new n(e,"num")},n.prototype.num=function(e){return null==e&&(e="rgb"),pe(this._rgb,e)},p.num=te,d.push({p:10,test:function(e){return 1===arguments.length&&"number"===Ce(e)&&e>=0&&16777215>=e?"num":void 0}}),D=function(e){var t,n,r,a,o,i,s,l;if(e=e.toLowerCase(),null!=x.colors&&x.colors[e])return P(x.colors[e]);if(o=e.match(/rgb\(\s*(\-?\d+),\s*(\-?\d+)\s*,\s*(\-?\d+)\s*\)/)){for(s=o.slice(1,4),a=i=0;2>=i;a=++i)s[a]=+s[a];s[3]=1}else if(o=e.match(/rgba\(\s*(\-?\d+),\s*(\-?\d+)\s*,\s*(\-?\d+)\s*,\s*([01]|[01]?\.\d+)\)/))for(s=o.slice(1,5),a=l=0;3>=l;a=++l)s[a]=+s[a];else if(o=e.match(/rgb\(\s*(\-?\d+(?:\.\d+)?)%,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*\)/)){for(s=o.slice(1,4),a=t=0;2>=t;a=++t)s[a]=ye(2.55*s[a]);s[3]=1}else if(o=e.match(/rgba\(\s*(\-?\d+(?:\.\d+)?)%,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)/)){for(s=o.slice(1,5),a=n=0;2>=n;a=++n)s[a]=ye(2.55*s[a]);s[3]=+s[3]}else(o=e.match(/hsl\(\s*(\-?\d+(?:\.\d+)?),\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*\)/))?(r=o.slice(1,4),r[1]*=.01,r[2]*=.01,s=L(r),s[3]=1):(o=e.match(/hsla\(\s*(\-?\d+(?:\.\d+)?),\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)/))&&(r=o.slice(1,4),r[1]*=.01,r[2]*=.01,s=L(r),s[3]=+o[4]);return s},oe=function(e){var t;return t=e[3]<1?"rgba":"rgb","rgb"===t?t+"("+e.slice(0,3).map(ye).join(",")+")":"rgba"===t?t+"("+e.slice(0,3).map(ye).join(",")+","+e[3]+")":void 0},ve=function(e){return ye(100*e)/100},R=function(e,t){var n;return n=1>t?"hsla":"hsl",e[0]=ve(e[0]||0),e[1]=ve(100*e[1])+"%",e[2]=ve(100*e[2])+"%","hsla"===n&&(e[3]=t),n+"("+e.join(",")+")"},p.css=function(e){return D(e)},x.css=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["css"]),function(){})},n.prototype.css=function(e){return null==e&&(e="rgb"),"rgb"===e.slice(0,3)?oe(this._rgb):"hsl"===e.slice(0,3)?R(this.hsl(),this.alpha()):void 0},p.named=function(e){return P(ke[e])},d.push({p:20,test:function(e){return 1===arguments.length&&null!=ke[e]?"named":void 0}}),n.prototype.name=function(e){var t,n;arguments.length&&(ke[e]&&(this._rgb=P(ke[e])),this._rgb[3]=1),t=this.hex();for(n in ke)if(t===ke[n])return n;return t},G=function(){var e,t,n,r;return r=Ne(arguments),n=r[0],e=r[1],t=r[2],t*=o,[n,_(t)*e,be(t)*e]},X=function(){var e,t,n,r,a,o,i,s,l,c,u;return n=Ne(arguments),s=n[0],a=n[1],i=n[2],c=G(s,a,i),e=c[0],t=c[1],r=c[2],u=q(e,t,r),l=u[0],o=u[1],r=u[2],[H(l,0,255),H(o,0,255),H(r,0,255),n.length>3?n[3]:1]},U=function(){var e,t,n,r,a,o;return o=Ne(arguments),a=o[0],e=o[1],t=o[2],n=Ee(e*e+t*t),r=(g(t,e)*c+360)%360,0===ye(1e4*n)&&(r=Number.NaN),[a,n,r]},de=function(){var e,t,n,r,a,o,i;return o=Ne(arguments),a=o[0],n=o[1],t=o[2],i=ue(a,n,t),r=i[0],e=i[1],t=i[2],U(r,e,t)},x.lch=function(){var e;return e=Ne(arguments),new n(e,"lch")},x.hcl=function(){var e;return e=Ne(arguments),new n(e,"hcl")},p.lch=X,p.hcl=function(){var e,t,n,r;return r=Ne(arguments),t=r[0],e=r[1],n=r[2],X([n,e,t])},n.prototype.lch=function(){return de(this._rgb)},n.prototype.hcl=function(){return de(this._rgb).reverse()},ae=function(e){var t,n,r,a,o,i,s,l,c;return null==e&&(e="rgb"),l=Ne(arguments),s=l[0],a=l[1],t=l[2],s/=255,a/=255,t/=255,o=1-Math.max(s,Math.max(a,t)),r=1>o?1/(1-o):0,n=(1-s-o)*r,i=(1-a-o)*r,c=(1-t-o)*r,[n,i,c,o]},N=function(){var e,t,n,r,a,o,i,s,l;return t=Ne(arguments),r=t[0],i=t[1],l=t[2],o=t[3],e=t.length>4?t[4]:1,1===o?[0,0,0,e]:(s=r>=1?0:ye(255*(1-r)*(1-o)),a=i>=1?0:ye(255*(1-i)*(1-o)),n=l>=1?0:ye(255*(1-l)*(1-o)),[s,a,n,e])},p.cmyk=function(){return N(Ne(arguments))},x.cmyk=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["cmyk"]),function(){})},n.prototype.cmyk=function(){return ae(this._rgb)},p.gl=function(){var e,t,n,r,a;for(r=function(){var e,n;e=Ne(arguments),n=[];for(t in e)a=e[t],n.push(a);return n}.apply(this,arguments),e=n=0;2>=n;e=++n)r[e]*=255;return r},x.gl=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["gl"]),function(){})},n.prototype.gl=function(){var e;return e=this._rgb,[e[0]/255,e[1]/255,e[2]/255,e[3]]},he=function(e,t,n){var r;return r=Ne(arguments),e=r[0],t=r[1],n=r[2],e=Q(e),t=Q(t),n=Q(n),.2126*e+.7152*t+.0722*n},Q=function(e){return e/=255,.03928>=e?e/12.92:re((e+.055)/1.055,2.4)},m=[],V=function(e,t,n,r){var a,o,i,s;for(null==n&&(n=.5),null==r&&(r="rgb"),"object"!==Ce(e)&&(e=x(e)),"object"!==Ce(t)&&(t=x(t)),i=0,o=m.length;o>i;i++)if(a=m[i],r===a[0]){s=a[1](e,t,n,r);break}if(null==s)throw"color mode "+r+" is not supported";return s.alpha(e.alpha()+n*(t.alpha()-e.alpha())),s},x.interpolate=V,n.prototype.interpolate=function(e,t,n){return V(this,e,t,n)},x.mix=V,n.prototype.mix=n.prototype.interpolate,F=function(e,t,r,a){var o,i;return o=e._rgb,i=t._rgb,new n(o[0]+r*(i[0]-o[0]),o[1]+r*(i[1]-o[1]),o[2]+r*(i[2]-o[2]),a)},m.push(["rgb",F]),n.prototype.luminance=function(e,t){var n,r,a,o;return null==t&&(t="rgb"),arguments.length?(0===e?this._rgb=[0,0,0,this._rgb[3]]:1===e?this._rgb=[255,255,255,this._rgb[3]]:(r=1e-7,a=20,o=function(n,i){var s,l;return l=n.interpolate(i,.5,t),s=l.luminance(),Math.abs(e-s)e?o(n,l):o(l,i)},n=he(this._rgb),this._rgb=(n>e?o(x("black"),this):o(this,x("white"))).rgba()),this):he(this._rgb)},xe=function(e){var t,n,r,a;return a=e/100,66>a?(r=255,n=-155.25485562709179-.44596950469579133*(n=a-2)+104.49216199393888*Y(n),t=20>a?0:-254.76935184120902+.8274096064007395*(t=a-10)+115.67994401066147*Y(t)):(r=351.97690566805693+.114206453784165*(r=a-55)-40.25366309332127*Y(r),n=325.4494125711974+.07943456536662342*(n=a-50)-28.0852963507957*Y(n),t=255),C([r,n,t])},me=function(){var e,t,n,r,a,o,i,s,l;for(i=Ne(arguments),o=i[0],n=i[1],e=i[2],a=1e3,r=4e4,t=.4;r-a>t;)l=.5*(r+a),s=xe(l),s[2]/s[0]>=e/o?r=l:a=l;return ye(l)},x.temperature=x.kelvin=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["temperature"]),function(){})},p.temperature=p.kelvin=p.K=xe,n.prototype.temperature=function(){return me(this._rgb)},n.prototype.kelvin=n.prototype.temperature,x.contrast=function(e,t){var r,a,o,i;return("string"===(o=Ce(e))||"number"===o)&&(e=new n(e)),("string"===(i=Ce(t))||"number"===i)&&(t=new n(t)),r=e.luminance(),a=t.luminance(),r>a?(r+.05)/(a+.05):(a+.05)/(r+.05)},n.prototype.get=function(e){var t,n,r,a,o,i;return r=this,o=e.split("."),a=o[0],t=o[1],i=r[a](),t?(n=a.indexOf(t),n>-1?i[n]:console.warn("unknown channel "+t+" in mode "+a)):i},n.prototype.set=function(e,t){var n,r,a,o,i,s;if(a=this,i=e.split("."),o=i[0],n=i[1],n)if(s=a[o](),r=o.indexOf(n),r>-1)if("string"===Ce(t))switch(t.charAt(0)){case"+":s[r]+=+t;break;case"-":s[r]+=+t;break;case"*":s[r]*=+t.substr(1);break;case"/":s[r]/=+t.substr(1);break;default:s[r]=+t}else s[r]=t;else console.warn("unknown channel "+n+" in mode "+o);else s=t;return a._rgb=x(s,o).alpha(a.alpha())._rgb,a},n.prototype.darken=function(e){var t,n;return null==e&&(e=1),n=this,t=n.lab(),t[0]-=i.Kn*e,x.lab(t).alpha(n.alpha())},n.prototype.brighten=function(e){return null==e&&(e=1),this.darken(-e)},n.prototype.darker=n.prototype.darken,n.prototype.brighter=n.prototype.brighten,n.prototype.saturate=function(e){var t,n;return null==e&&(e=1),n=this,t=n.lch(),t[1]+=e*i.Kn,t[1]<0&&(t[1]=0),x.lch(t).alpha(n.alpha())},n.prototype.desaturate=function(e){return null==e&&(e=1),this.saturate(-e)},n.prototype.premultiply=function(){var e,t;return t=this.rgb(),e=this.alpha(),x(t[0]*e,t[1]*e,t[2]*e,e)},y=function(e,t,n){if(!y[n])throw"unknown blend mode "+n;return y[n](e,t)},w=function(e){return function(t,n){var r,a;return r=x(n).rgb(),a=x(t).rgb(),x(e(r,a),"rgb")}},O=function(e){return function(t,n){var r,a,o;for(o=[],r=a=0;3>=a;r=++a)o[r]=e(t[r],n[r]);return o}},ee=function(e,t){return e},Z=function(e,t){return e*t/255},T=function(e,t){return e>t?t:e},K=function(e,t){return e>t?e:t},we=function(e,t){return 255*(1-(1-e/255)*(1-t/255))},ne=function(e,t){return 128>t?2*e*t/255:255*(1-2*(1-e/255)*(1-t/255))},E=function(e,t){return 255*(1-(1-t/255)/(e/255))},S=function(e,t){return 255===e?255:(e=255*(t/255)/(1-e/255),e>255?255:e)},y.normal=w(O(ee)),y.multiply=w(O(Z)),y.screen=w(O(we)),y.overlay=w(O(ne)),y.darken=w(O(T)),y.lighten=w(O(K)),y.dodge=w(O(S)),y.burn=w(O(E)),x.blend=y,x.analyze=function(e){var t,n,r,a;for(r={min:Number.MAX_VALUE,max:-1*Number.MAX_VALUE,sum:0,values:[],count:0},n=0,t=e.length;t>n;n++)a=e[n],null==a||isNaN(a)||(r.values.push(a),r.sum+=a,ar.max&&(r.max=a),r.count+=1);return r.domain=[r.min,r.max],r.limits=function(e,t){return x.limits(r,e,t)},r},x.scale=function(e,t){var n,r,a,o,i,s,l,c,u,d,h,p,m,f,g,v,y,w,b,E,C;return u="rgb",d=x("#ccc"),f=0,s=!1,i=[0,1],m=[],p=[0,0],n=!1,a=[],h=!1,c=0,l=1,o=!1,r={},E=function(e){var t,n,r,o,i,s,l;if(null==e&&(e=["#fff","#000"]),null!=e&&"string"===Ce(e)&&null!=(null!=(o=x.brewer)?o[e]:void 0)&&(e=x.brewer[e]),"array"===Ce(e)){for(e=e.slice(0),t=r=0,i=e.length-1;i>=0?i>=r:r>=i;t=i>=0?++r:--r)n=e[t],"string"===Ce(n)&&(e[t]=x(n));for(m.length=0,t=l=0,s=e.length-1;s>=0?s>=l:l>=s;t=s>=0?++l:--l)m.push(t/(e.length-1))}return b(),a=e},y=function(e){var t,r;if(null!=n){for(r=n.length-1,t=0;r>t&&e>=n[t];)t++;return t-1}return 0},C=function(e){return e},g=function(e){var t,r,a,o,i;return i=e,n.length>2&&(o=n.length-1,t=y(e),a=n[0]+(n[1]-n[0])*(0+.5*f),r=n[o-1]+(n[o]-n[o-1])*(1-.5*f),i=c+(n[t]+.5*(n[t+1]-n[t])-a)/(r-a)*(l-c)),i},w=function(e,t){var o,i,s,h,f,g,v,w;if(null==t&&(t=!1),isNaN(e))return d;if(t?w=e:n&&n.length>2?(o=y(e),w=o/(n.length-2),w=p[0]+w*(1-p[0]-p[1])):l!==c?(w=(e-c)/(l-c),w=p[0]+w*(1-p[0]-p[1]),w=Math.min(1,Math.max(0,w))):w=1,t||(w=C(w)),h=Math.floor(1e4*w),r[h])i=r[h];else{if("array"===Ce(a))for(s=f=0,v=m.length-1;v>=0?v>=f:f>=v;s=v>=0?++f:--f){if(g=m[s],g>=w){i=a[s];break}if(w>=g&&s===m.length-1){i=a[s];break}if(w>g&&ws;s++)n=e[s],m.push((n-c)/(l-c));else for(t=d=0,u=r-1;u>=0?u>=d:d>=u;t=u>=0?++d:--d)m.push(t/(r-1));return i=[c,l],v},v.mode=function(e){return arguments.length?(u=e,b(),v):u},v.range=function(e,t){return E(e,t),v},v.out=function(e){return h=e,v},v.spread=function(e){return arguments.length?(f=e,v):f},v.correctLightness=function(e){return null==e&&(e=!0),o=e,b(),C=o?function(e){var t,n,r,a,o,i,s,l,c;for(t=w(0,!0).lab()[0],n=w(1,!0).lab()[0],s=t>n,r=w(e,!0).lab()[0],o=t+(n-t)*e,a=r-o,l=0,c=1,i=20;Math.abs(a)>.01&&i-- >0;)!function(){return s&&(a*=-1),0>a?(l=e,e+=.5*(c-e)):(c=e,e+=.5*(l-e)),r=w(e,!0).lab()[0],a=r-o}();return e}:function(e){return e},v},v.padding=function(e){return null!=e?("number"===Ce(e)&&(e=[e,e]),p=e,v):p},v.colors=function(){var t,r,a,o,s,l,c,u,d;if(o=0,s="hex",1===arguments.length&&("string"===Ce(arguments[0])?s=arguments[0]:o=arguments[0]),2===arguments.length&&(o=arguments[0],s=arguments[1]),o)return r=i[0],t=i[1]-r,function(){c=[];for(var e=0;o>=0?o>e:e>o;o>=0?e++:e--)c.push(e);return c}.apply(this).map(function(e){return v(r+e/(o-1)*t)[s]()});if(e=[],u=[],n&&n.length>2)for(a=d=1,l=n.length;l>=1?l>d:d>l;a=l>=1?++d:--d)u.push(.5*(n[a-1]+n[a]));else u=i;return u.map(function(e){return v(e)[s]()})},v},null==x.scales&&(x.scales={}),x.scales.cool=function(){return x.scale([x.hsl(180,1,.9),x.hsl(250,.7,.4)])},x.scales.hot=function(){return x.scale(["#000","#f00","#ff0","#fff"],[0,.25,.75,1]).mode("rgb")},x.analyze=function(e,t,n){var r,a,o,i,s,l,c;if(s={min:Number.MAX_VALUE,max:-1*Number.MAX_VALUE,sum:0,values:[],count:0},null==n&&(n=function(){return!0}),r=function(e){null==e||isNaN(e)||(s.values.push(e),s.sum+=e,es.max&&(s.max=e),s.count+=1)},c=function(e,a){return n(e,a)?r(null!=t&&"function"===Ce(t)?t(e):null!=t&&"string"===Ce(t)||"number"===Ce(t)?e[t]:e):void 0},"array"===Ce(e))for(i=0,o=e.length;o>i;i++)l=e[i],c(l);else for(a in e)l=e[a],c(l,a);return s.domain=[s.min,s.max],s.limits=function(e,t){return x.limits(s,e,t)},s},x.limits=function(e,t,n){var r,a,o,i,s,l,c,u,d,h,p,m,g,v,y,w,b,E,C,N,k,_,D,T,S,O,P,I,R,L,A,V,B,z,j,F,U,q,W,G,X,K,H,Q,J,Z,ee,te,ne,ae,oe,ie,se,le,ce;if(null==t&&(t="equal"),null==n&&(n=7),"array"===Ce(e)&&(e=x.analyze(e)),S=e.min,$=e.max,oe=e.sum,le=e.values.sort(function(e,t){return e-t}),D=[],"c"===t.substr(0,1)&&(D.push(S),D.push($)),"e"===t.substr(0,1)){for(D.push(S),N=A=1,j=n-1;j>=1?j>=A:A>=j;N=j>=1?++A:--A)D.push(S+N/n*($-S));D.push($)}else if("l"===t.substr(0,1)){if(0>=S)throw"Logarithmic scales are only possible for values > 0";for(O=Math.LOG10E*Y(S),T=Math.LOG10E*Y($),D.push(S),N=ce=1,F=n-1;F>=1?F>=ce:ce>=F;N=F>=1?++ce:--ce)D.push(re(10,O+N/n*(T-O)));D.push($)}else if("q"===t.substr(0,1)){for(D.push(S),N=r=1,K=n-1;K>=1?K>=r:r>=K;N=K>=1?++r:--r)V=le.length*N/n,B=M(V),B===V?D.push(le[B]):(z=V-B,D.push(le[B]*z+le[B+1]*(1-z)));D.push($)}else if("k"===t.substr(0,1)){for(I=le.length,v=new Array(I),E=new Array(n),ae=!0,R=0,w=null,w=[],w.push(S),N=a=1,H=n-1;H>=1?H>=a:a>=H;N=H>=1?++a:--a)w.push(S+N/n*($-S));for(w.push($);ae;){for(k=o=0,Q=n-1;Q>=0?Q>=o:o>=Q;k=Q>=0?++o:--o)E[k]=0;for(N=i=0,J=I-1;J>=0?J>=i:i>=J;N=J>=0?++i:--i){for(se=le[N],P=Number.MAX_VALUE,k=s=0,Z=n-1;Z>=0?Z>=s:s>=Z;k=Z>=0?++s:--s)C=f(w[k]-se),P>C&&(P=C,y=k);E[y]++,v[N]=y}for(L=new Array(n),k=l=0,ee=n-1;ee>=0?ee>=l:l>=ee;k=ee>=0?++l:--l)L[k]=null;for(N=c=0,te=I-1;te>=0?te>=c:c>=te;N=te>=0?++c:--c)b=v[N],null===L[b]?L[b]=le[N]:L[b]+=le[N];for(k=u=0,ne=n-1;ne>=0?ne>=u:u>=ne;k=ne>=0?++u:--u)L[k]*=1/E[k];for(ae=!1,k=d=0,U=n-1;U>=0?U>=d:d>=U;k=U>=0?++d:--d)if(L[k]!==w[N]){ae=!0;break}w=L,R++,R>200&&(ae=!1)}for(_={},k=h=0,q=n-1;q>=0?q>=h:h>=q;k=q>=0?++h:--h)_[k]=[];for(N=p=0,W=I-1;W>=0?W>=p:p>=W;N=W>=0?++p:--p)b=v[N],_[b].push(le[N]);for(ie=[],k=m=0,G=n-1;G>=0?G>=m:m>=G;k=G>=0?++m:--m)ie.push(_[k][0]),ie.push(_[k][_[k].length-1]);for(ie=ie.sort(function(e,t){return e-t}),D.push(ie[0]),N=g=1,X=ie.length-1;X>=g;N=g+=2)isNaN(ie[N])||D.push(ie[N])}return D},I=function(e,t,n){var r,a,o,i;return r=Ne(arguments),e=r[0],t=r[1],n=r[2],e/=360,1/3>e?(a=(1-t)/3,i=(1+t*_(u*e)/_(l-u*e))/3,o=1-(a+i)):2/3>e?(e-=1/3,i=(1-t)/3,o=(1+t*_(u*e)/_(l-u*e))/3,a=1-(i+o)):(e-=2/3,o=(1-t)/3,a=(1+t*_(u*e)/_(l-u*e))/3,i=1-(o+a)),i=H(n*i*3),o=H(n*o*3),a=H(n*a*3),[255*i,255*o,255*a,r.length>3?r[3]:1]},se=function(){var e,t,n,r,a,o,i,s;return i=Ne(arguments),o=i[0],t=i[1],e=i[2],u=2*Math.PI,o/=255,t/=255,e/=255,a=Math.min(o,t,e),r=(o+t+e)/3,s=1-a/r,0===s?n=0:(n=(o-t+(o-e))/2,n/=Math.sqrt((o-t)*(o-t)+(o-e)*(t-e)),n=Math.acos(n),e>t&&(n=u-n),n/=u),[360*n,s,r]},x.hsi=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,a=e.apply(r,t);return Object(a)===a?a:r}(n,Te.call(arguments).concat(["hsi"]),function(){})},p.hsi=I,n.prototype.hsi=function(){return se(this._rgb)},B=function(e,t,n,r){var a,o,i,s,l,c,u,d,h,p,m,f,g;return"hsl"===r?(f=e.hsl(),g=t.hsl()):"hsv"===r?(f=e.hsv(),g=t.hsv()):"hsi"===r?(f=e.hsi(),g=t.hsi()):("lch"===r||"hcl"===r)&&(r="hcl",f=e.hcl(),g=t.hcl()),"h"===r.substr(0,1)&&(i=f[0],p=f[1],c=f[2],s=g[0],m=g[1],u=g[2]),isNaN(i)||isNaN(s)?isNaN(i)?isNaN(s)?o=Number.NaN:(o=s,1!==c&&0!==c||"hsv"===r||(h=m)):(o=i,1!==u&&0!==u||"hsv"===r||(h=p)):(a=s>i&&s-i>180?s-(i+360):i>s&&i-s>180?s+360-i:s-i,o=i+n*a),null==h&&(h=p+n*(m-p)),l=c+n*(u-c),d=x[r](o,h,l)},m=m.concat(function(){var e,t,n,r;for(n=["hsv","hsl","hsi","hcl","lch"],r=[],t=0,e=n.length;e>t;t++)J=n[t],r.push([J,B]);return r}()),j=function(e,t,n,r){var a,o;return a=e.num(),o=t.num(),x.num(a+(o-a)*n,"num")},m.push(["num",j]),z=function(e,t,r,a){var o,i,s;return i=e.lab(),s=t.lab(),o=new n(i[0]+r*(s[0]-i[0]),i[1]+r*(s[1]-i[1]),i[2]+r*(s[2]-i[2]),a)},m.push(["lab",z])}).call(this)}).call(t,n(175)(e))},function(e,t){e.exports=function(e){ -return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children=[],e.webpackPolyfill=1),e}},function(e,t,n){e.exports=n(177)},function(e,n,r){var a;!function(){"use strict";var o=Math.abs,i=Math.min,s=Math.max,l=Math.cos,c=Math.sin,u=Math.acos,d=(Math.asin,Math.atan2),h=Math.sqrt,p=function(e){return 0>e?-Math.pow(-e,1/3):Math.pow(e,1/3)},m=Math.PI,f=2*m,g=m/2,v={x:0,y:0,z:0},y={Tvalues:[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213],Cvalues:[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872],arcfn:function(e,t){var n=t(e),r=n.x*n.x+n.y*n.y;return"undefined"!=typeof n.z&&(r+=n.z*n.z),h(r)},length:function(e){var t,n,r=.5,a=0,o=y.Tvalues.length;for(t=0;o>t;t++)n=r*y.Tvalues[t]+r,a+=y.Cvalues[t]*y.arcfn(n,e);return r*a},map:function(e,t,n,r,a){var o=n-t,i=a-r,s=e-t,l=s/o;return r+i*l},lerp:function(e,t,n){var r={x:t.x+e*(n.x-t.x),y:t.y+e*(n.y-t.y)};return t.z&&n.z&&(r.z=t.z+e*(n.z-t.z)),r},pointToString:function(e){var t=e.x+"/"+e.y;return"undefined"!=typeof e.z&&(t+="/"+e.z),t},pointsToString:function(e){return"["+e.map(y.pointToString).join(", ")+"]"},copy:function(e){return JSON.parse(JSON.stringify(e))},angle:function(e,t,n){var r,a=t.x-e.x,o=t.y-e.y,i=n.x-e.x,s=n.y-e.y,l=a*s-o*i,c=h(a*a+o*o),u=h(i*i+s*s);return a/=c,o/=c,i/=u,s/=u,r=a*i+o*s,d(l,r)},round:function(e,t){var n=""+e,r=n.indexOf(".");return parseFloat(n.substring(0,r+1+t))},dist:function(e,t){var n=e.x-t.x,r=e.y-t.y;return h(n*n+r*r)},lli8:function(e,t,n,r,a,o,i,s){var l=(e*r-t*n)*(a-i)-(e-n)*(a*s-o*i),c=(e*r-t*n)*(o-s)-(t-r)*(a*s-o*i),u=(e-n)*(o-s)-(t-r)*(a-i);return 0==u?!1:{x:l/u,y:c/u}},lli4:function(e,t,n,r){var a=e.x,o=e.y,i=t.x,s=t.y,l=n.x,c=n.y,u=r.x,d=r.y;return y.lli8(a,o,i,s,l,c,u,d)},lli:function(e,t){return y.lli4(e,e.c,t,t.c)},makeline:function(e,t){var n=e.x,r=e.y,a=t.x,o=t.y,i=(a-n)/3,s=(o-r)/3;return new b(n,r,n+i,r+s,n+2*i,r+2*s,a,o)},findbbox:function(e){var t=99999999,n=t,r=-t,a=r;return e.forEach(function(e){var o=e.bbox();t>o.x.min&&(t=o.x.min),n>o.y.min&&(n=o.y.min),r0&&(o.c1=t,o.c2=r,o.s1=e,o.s2=n,a.push(o))}})}),a},makeshape:function(e,t){var n=t.points.length,r=e.points.length,a=y.makeline(t.points[n-1],e.points[0]),o=y.makeline(e.points[r-1],t.points[0]),i={startcap:a,forward:e,back:t,endcap:o,bbox:y.findbbox([a,e,t,o])},s=y;return i.intersections=function(e){return s.shapeintersections(i,i.bbox,e,e.bbox)},i},getminmax:function(e,t,n){if(!n)return{min:0,max:0};var r,a,o=0x10000000000000000,i=-o;-1===n.indexOf(0)&&(n=[0].concat(n)),-1===n.indexOf(1)&&n.push(1);for(var s=0,l=n.length;l>s;s++)r=n[s],a=e.get(r),a[t]i&&(i=a[t]);return{min:o,mid:(o+i)/2,max:i,size:i-o}},align:function(e,t){var n=t.p1.x,r=t.p1.y,a=-d(t.p2.y-r,t.p2.x-n),o=function(e){return{x:(e.x-n)*l(a)-(e.y-r)*c(a),y:(e.x-n)*c(a)+(e.y-r)*l(a)}};return e.map(o)},roots:function(e,t){t=t||{p1:{x:0,y:0},p2:{x:1,y:0}};var n=e.length-1,r=y.align(e,t),a=function(e){return e>=0&&1>=e};if(2===n){var o=r[0].y,i=r[1].y,s=r[2].y,c=o-2*i+s;if(0!==c){var d=-h(i*i-o*s),m=-o+i,g=-(d+m)/c,v=-(-d+m)/c;return[g,v].filter(a)}return i!==s&&0===c?[(2*i-s)/2*(i-s)].filter(a):[]}var w,g,b,E,x,C=r[0].y,N=r[1].y,k=r[2].y,_=r[3].y,c=-C+3*N-3*k+_,o=(3*C-6*N+3*k)/c,i=(-3*C+3*N)/c,s=C/c,r=(3*i-o*o)/3,D=r/3,T=(2*o*o*o-9*o*i+27*s)/27,S=T/2,O=S*S+D*D*D;if(0>O){var M=-r/3,P=M*M*M,I=h(P),R=-T/(2*I),L=-1>R?-1:R>1?1:R,A=u(L),V=p(I),B=2*V;return b=B*l(A/3)-o/3,E=B*l((A+f)/3)-o/3,x=B*l((A+2*f)/3)-o/3,[b,E,x].filter(a)}if(0===O)return w=0>S?p(-S):-p(S),b=2*w-o/3,E=-w-o/3,[b,E].filter(a);var z=h(O);return w=p(-S+z),g=p(S+z),[w-g-o/3].filter(a)},droots:function(e){if(3===e.length){var t=e[0],n=e[1],r=e[2],a=t-2*n+r;if(0!==a){var o=-h(n*n-t*r),i=-t+n,s=-(o+i)/a,l=-(-o+i)/a;return[s,l]}return n!==r&&0===a?[(2*n-r)/(2*(n-r))]:[]}if(2===e.length){var t=e[0],n=e[1];return t!==n?[t/(t-n)]:[]}},bboxoverlap:function(e,t){var n,r,a,i,s,l=["x","y"],c=l.length;for(n=0;c>n;n++)if(r=l[n],a=e[r].mid,i=t[r].mid,s=(e[r].size+t[r].size)/2,o(a-i)>=s)return!1;return!0},expandbox:function(e,t){t.x.mine.x.max&&(e.x.max=t.x.max),t.y.max>e.y.max&&(e.y.max=t.y.max),t.z&&t.z.max>e.z.max&&(e.z.max=t.z.max),e.x.mid=(e.x.min+e.x.max)/2,e.y.mid=(e.y.min+e.y.max)/2,e.z&&(e.z.mid=(e.z.min+e.z.max)/2),e.x.size=e.x.max-e.x.min,e.y.size=e.y.max-e.y.min,e.z&&(e.z.size=e.z.max-e.z.min)},pairiteration:function(e,t){var n=e.bbox(),r=t.bbox(),a=1e5,o=.5;if(n.x.size+n.y.sizeT?((T>S||S>O)&&(T+=f),T>O&&(r=O,O=T,T=r)):S>O&&T>S?(r=O,O=T,T=r):O+=f,_.s=T,_.e=O,_.r=D,_}},w=function(e){this.curves=[],this._3d=!1,e&&(this.curves=e,this._3d=this.curves[0]._3d)};w.prototype={valueOf:function(){return this.toString()},toString:function(){return y.pointsToString(this.points)},addCurve:function(e){this.curves.push(e),this._3d=this._3d||e._3d},length:function(){return this.curves.map(function(e){return e.length()}).reduce(function(e,t){return e+t})},curve:function(e){return this.curves[e]},bbox:function(){for(var e=this.curves,t=e[0].bbox(),n=1;n4){if(1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");a=!0}}else if(6!==i&&8!==i&&9!==i&&12!==i&&1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");var s=!a&&(9===i||12===i)||e&&e[0]&&"undefined"!=typeof e[0].z;this._3d=s;for(var l=[],c=0,u=s?3:2;i>c;c+=u){var d={x:t[c],y:t[c+1]};s&&(d.z=t[c+2]),l.push(d)}this.order=l.length-1,this.points=l;var h=["x","y"];s&&h.push("z"),this.dims=h,this.dimlen=h.length,function(e){for(var t=y.align(l,{p1:l[0],p2:l[e.order]}),n=0;n1e-4)return void(e._linear=!1);e._linear=!0}(this),this._t1=0,this._t2=1,this.update()};b.fromSVG=function(e){var t=e.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g).map(parseFloat),n=/[cq]/.test(e);return n?(t=t.map(function(e,n){return 2>n?e:e+t[n%2]}),new b(t)):new b(t)};var E=function(){return y},x=function(e){return new w(e)};b.prototype={buildPoly:x,getUtils:E,valueOf:function(){return this.toString()},toString:function(){return y.pointsToString(this.points)},toSVG:function(e){if(this._3d)return!1;for(var t=this.points,n=t[0].x,r=t[0].y,a=["M",n,r,2===this.order?"Q":"C"],o=1,i=t.length;i>o;o++)a.push(t[o].x),a.push(t[o].y);return a.join(" ")},update:function(){this.dpoints=[];for(var e=this.points,t=e.length,n=t-1;t>1;t--,n--){for(var r,a=[],o=0;n>o;o++)r={x:n*(e[o+1].x-e[o].x),y:n*(e[o+1].y-e[o].y)},this._3d&&(r.z=n*(e[o+1].z-e[o].z)),a.push(r);this.dpoints.push(a),e=a}this.computedirection()},computedirection:function(){var e=this.points,t=y.angle(e[0],e[this.order],e[1]);this.clockwise=t>0},length:function(){return y.length(this.derivative.bind(this))},_lut:[],getLUT:function(e){if(e=e||100,this._lut.length===e)return this._lut;this._lut=[];for(var t=0;e>=t;t++)this._lut.push(this.compute(t/e));return this._lut},on:function(e,t){t=t||5;for(var n,r=this.getLUT(),a=[],o=0,i=0;i1;){for(var d=0;de;e++)t=r[e],n=r[e-1],a[e]={x:(o-e)/o*t.x+e/o*n.x,y:(o-e)/o*t.y+e/o*n.y};return a[o]=r[o-1],new b(a)},derivative:function(e){var t,n,r=1-e,a=0,o=this.dpoints[0];2===this.order&&(o=[o[0],o[1],v],t=r,n=e),3===this.order&&(t=r*r,n=r*e*2,a=e*e);var i={x:t*o[0].x+n*o[1].x+a*o[2].x,y:t*o[0].y+n*o[1].y+a*o[2].y};return this._3d&&(i.z=t*o[0].z+n*o[1].z+a*o[2].z),i},normal:function(e){return this._3d?this.__normal3(e):this.__normal2(e)},__normal2:function(e){var t=this.derivative(e),n=h(t.x*t.x+t.y*t.y);return{x:-t.y/n,y:t.x/n}},__normal3:function(){var e=this.derivative(t),n=this.derivative(t+.01),r=h(e.x*e.x+e.y*e.y+e.z*e.z),a=h(n.x*n.x+n.y*n.y+n.z*n.z);e.x/=r,e.y/=r,e.z/=r,n.x/=a,n.y/=a,n.z/=a;var o={x:n.y*e.z-n.z*e.y,y:n.z*e.x-n.x*e.z,z:n.x*e.y-n.y*e.x},i=h(o.x*o.x+o.y*o.y+o.z*o.z);o.x/=i,o.y/=i,o.z/=i;var s=[o.x*o.x,o.x*o.y-o.z,o.x*o.z+o.y,o.x*o.y+o.z,o.y*o.y,o.y*o.z-o.x,o.x*o.z-o.y,o.y*o.z+o.x,o.z*o.z],l={x:s[0]*e.x+s[1]*e.y+s[2]*e.z,y:s[3]*e.x+s[4]*e.y+s[5]*e.z,z:s[6]*e.x+s[7]*e.y+s[8]*e.z};return l},hull:function(e){var t,n=this.points,r=[],a=[],o=0,i=0,s=0;for(a[o++]=n[0],a[o++]=n[1],a[o++]=n[2],3===this.order&&(a[o++]=n[3]);n.length>1;){for(r=[],i=0,s=n.length-1;s>i;i++)t=y.lerp(e,n[i],n[i+1]),a[o++]=t,r.push(t);n=r}return a},split:function(e,t){if(0===e&&t)return this.split(t).left;if(1===t)return this.split(e).right;var n=this.hull(e),r={left:new b(2===this.order?[n[0],n[3],n[5]]:[n[0],n[4],n[7],n[9]]),right:new b(2===this.order?[n[5],n[4],n[2]]:[n[9],n[8],n[6],n[3]]),span:n};if(r.left._t1=y.map(0,0,1,this._t1,this._t2),r.left._t2=y.map(e,0,1,this._t1,this._t2),r.right._t1=y.map(e,0,1,this._t1,this._t2),r.right._t2=y.map(1,0,1,this._t1,this._t2),!t)return r;t=y.map(t,e,1,0,1);var a=r.right.split(t);return a.left},inflections:function(){var e,t,n=this.dims,r=(this.dimlen,{}),a=[];return n.forEach(function(n){t=function(e){return e[n]},e=this.dpoints[0].map(t),r[n]=y.droots(e),3===this.order&&(e=this.dpoints[1].map(t),r[n]=r[n].concat(y.droots(e))),r[n]=r[n].filter(function(e){return e>=0&&1>=e}),a=a.concat(r[n].sort())}.bind(this)),a.sort(),r.values=a,r},bbox:function(){var e=this.inflections(),t={};return this.dims.forEach(function(n){t[n]=y.getminmax(this,n,e[n])}.bind(this)),t},overlaps:function(e){var t=this.bbox(),n=e.bbox();return y.bboxoverlap(t,n)},offset:function(e,t){if("undefined"!=typeof t){var n=this.get(e),r=this.normal(e),a={c:n,n:r,x:n.x+r.x*t,y:n.y+r.y*t};return this._3d&&(a.z=n.z+r.z*t),a}if(this._linear){var o=this.normal(0),i=this.points.map(function(t){var n={x:t.x+e*o.x,y:t.y+e*o.y};return t.z&&r.z&&(n.z=t.z+e*o.z),n});return[new b(i)]}var s=this.reduce();return s.map(function(t){return t.scale(e)})},simple:function(){if(3===this.order){var e=y.angle(this.points[0],this.points[3],this.points[1]),t=y.angle(this.points[0],this.points[3],this.points[2]);if(e>0&&0>t||0>e&&t>0)return!1}var n=this.normal(0),r=this.normal(1),a=n.x*r.x+n.y*r.y;this._3d&&(a+=n.z*r.z);var i=o(u(a));return m/3>i},reduce:function(){var e,t,n=0,r=0,a=.01,i=[],s=[],l=this.inflections().values;for(-1===l.indexOf(0)&&(l=[0].concat(l)),-1===l.indexOf(1)&&l.push(1),n=l[0],e=1;e=r;)for(r=n+a;1+a>=r;r+=a)if(t=e.split(n,r),!t.simple()){if(r-=a,o(n-r)n&&(t=e.split(n,1),t._t1=y.map(n,0,1,e._t1,e._t2),t._t2=e._t2,s.push(t))}),s},scale:function(e){var t=this.order,n=!1;if("function"==typeof e&&(n=e),n&&2===t)return this.raise().scale(n);var r=this.clockwise,a=n?n(0):e,o=n?n(1):e,i=[this.offset(0,10),this.offset(1,10)],s=y.lli4(i[0],i[0].c,i[1],i[1].c);if(!s)throw"cannot scale this curve. Try reducing it first.";var l=this.points,c=[];return[0,1].forEach(function(e){var n=c[e*t]=y.copy(l[e*t]);n.x+=(e?o:a)*i[e].n.x,n.y+=(e?o:a)*i[e].n.y}.bind(this)),n?([0,1].forEach(function(a){if(2!==this.order||!a){var o=l[a+1],i={x:o.x-s.x,y:o.y-s.y},u=n?n((a+1)/t):e;n&&!r&&(u=-u);var d=h(i.x*i.x+i.y*i.y);i.x/=d,i.y/=d,c[a+1]={x:o.x+u*i.x,y:o.y+u*i.y}}}.bind(this)),new b(c)):([0,1].forEach(function(e){if(2!==this.order||!e){var n=c[e*t],r=this.derivative(e),a={x:n.x+r.x,y:n.y+r.y};c[e+1]=y.lli4(n,a,s,l[e+1])}}.bind(this)),new b(c))},outline:function(e,t,n,r){function a(e,t,n,r,a){return function(o){var i=r/n,s=(r+a)/n,l=t-e;return y.map(o,0,1,e+i*l,e+s*l)}}t="undefined"==typeof t?e:t;var o,i=this.reduce(),s=i.length,l=(this.order,[]),c=[],u=0,d=this.length(),h="undefined"!=typeof n&&"undefined"!=typeof r;i.forEach(function(o){x=o.length(),h?(l.push(o.scale(a(e,n,d,u,x))),c.push(o.scale(a(-t,-r,d,u,x)))):(l.push(o.scale(e)),c.push(o.scale(-t))),u+=x}),c=c.map(function(e){return o=e.points,o[3]?e.points=[o[3],o[2],o[1],o[0]]:e.points=[o[2],o[1],o[0]],e}).reverse();var p=l[0].points[0],m=l[s-1].points[l[s-1].points.length-1],f=c[s-1].points[c[s-1].points.length-1],g=c[0].points[0],v=y.makeline(f,p),b=y.makeline(m,g),E=[v].concat(l).concat([b]).concat(c),x=E.length;return new w(E)},outlineshapes:function(e,t){t=t||e;for(var n=this.outline(e,t).curves,r=[],a=1,o=n.length;o/2>a;a++){var i=y.makeshape(n[a],n[o-a]);i.startcap.virtual=a>1,i.endcap.virtual=o/2-1>a,r.push(i)}return r},intersects:function(e){return e?e.p1&&e.p2?this.lineIntersects(e):(e instanceof b&&(e=e.reduce()),this.curveintersects(this.reduce(),e)):this.selfintersects()},lineIntersects:function(e){var t=i(e.p1.x,e.p2.x),n=i(e.p1.y,e.p2.y),r=s(e.p1.x,e.p2.x),a=s(e.p1.y,e.p2.y),o=this;return y.roots(this.points,e).filter(function(e){var i=o.get(e);return t<=i.x&&i.x<=r&&n<=i.y&&i.y<=a})},selfintersects:function(){var e,t,n,r,a=this.reduce(),o=a.length-2,i=[];for(e=0;o>e;e++)n=a.slice(e,e+1),r=a.slice(e+2),t=this.curveintersects(n,r),i=i.concat(t);return i},curveintersects:function(e,t){var n=[];e.forEach(function(e){t.forEach(function(t){e.overlaps(t)&&n.push({left:e,right:t})})});var r=[];return n.forEach(function(e){var t=y.pairiteration(e.left,e.right);t.length>0&&(r=r.concat(t))}),r},arcs:function(e){e=e||.5;var t=[];return this._iterate(e,t)},_error:function(e,t,n,r){var a=(r-n)/4,i=this.get(n+a),s=this.get(r-a),l=y.dist(e,t),c=y.dist(e,i),u=y.dist(e,s);return o(c-l)+o(u-l)},_iterate:function(e,t){var n,r=0,a=1;do{n=0,a=1;var o,i,s,l,c,u=this.get(r),d=!1,h=!1,p=a,m=1,f=0;do{h=d,l=s,p=(r+a)/2,f++,o=this.get(p),i=this.get(a),s=y.getccenter(u,o,i);var g=this._error(s,u,r,a);if(d=e>=g,c=h&&!d,c||(m=a),d){if(a>=1){m=1,l=s;break}a+=(a-r)/2}else a=p}while(!c&&n++<100);if(n>=100){console.error("arc abstraction somehow failed...");break}l=l?l:s,t.push(l),r=m}while(1>a);return t}},b.getUtils=E,b.buildPoly=x,"undefined"!=typeof e&&e.exports?e.exports=b:(a=function(){return b}.call(n,r,n,e),!(void 0!==a&&(e.exports=a)))}()},function(e,t,n){"use strict";var r=n(10),a=r.createClass({displayName:"SectionHeader",render:function(){return r.createElement("h2",{"data-num":this.props.number},r.createElement("a",{href:"#"+this.props.name},this.props.title))}});e.exports=a},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:"So what makes a Bézier Curve?"}},interpolation:n(180),componentWillMount:function(){this.setup=this.interpolation.setup.bind(this),this.draw=this.interpolation.draw.bind(this)},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"Playing with the points for curves may have given you a feel for how Bézier curves behaves, but what ",r.createElement("em",null,"are")," Bézier curves, really? There are two ways to explain what a Bézier curve is, and they turn out to be the entirely equivalent, but one of them uses complicated maths, and the other uses really simple maths. So... let's start with the simple explanation:"),r.createElement("p",null,"Bezier curves are the result of ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Linear_interpolation"},"linear interpolations"),". That sounds complicated but you've been doing linear interpolation since you were very young: any time you had to point at something between two other things, you've been applying linear interpolation. It's simply \"picking a point between two, points\"."),r.createElement("p",null,"If we know the distance between those two points, and we want a new point that is, say, 20% the distance away from the first point (and thus 80% the distance away from the second point) then we can compute that really easily:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/93b03244097aea8be8fcac493afd3706c79fa403.svg",style:{width:"36.750150000000005rem",height:"6.37515rem"}})),r.createElement("p",null,"So let's look at that in action: the following graphic is interactive in that you can use your '+' and '-' keys to increase or decrease the interpolation distance, to see what happens. We start with three points, which gives us two lines. Linear interpolation over those lines gives use two points, between which we can again perform linear interpolation, yielding a single point. And that point —and all points we can form in this way for all distances taken together— form our Bézier curve:"),r.createElement(a,{title:"Linear Interpolation leading to Bézier curves",setup:this.setup,draw:this.draw}),r.createElement("p",null,"And that brings us to the complicated maths: calculus."),r.createElement("p",null,'While it doesn\'t look like that\'s what we\'ve just done, we actually just drew a quadratic curve, in steps, rather than in a single go. One of the fascinating parts about Bézier curves is that they can both be described in terms of polynomial functions, as well as in terms of very simple interpolations of interpolations of [...]. That, in turn, means we can look at what these curves can do based on both "real maths" (by examining the functions, their derivatives, and all that stuff), as well as by looking at the "mechanical" composition (which tells us that a curve will never extend beyond the points we used to construct it, for instance)'),r.createElement("p",null,"So let's start looking at Bézier curves a bit more in depth. Their mathematical expressions, the properties we can derive from those, and the various things we can do to, and with, Bézier curves."))}});e.exports=i},function(e,t){"use strict";e.exports={setup:function(e){this.offset=20;var t=e.getDefaultQuadratic();e.setPanelCount(3),e.setCurve(t),this.dim=e.getPanelWidth()},draw:function(e,t){var n=t.points,r=n[0],a=n[1],o=n[2],i={x:r.x+.2*(a.x-r.x),y:r.y+.2*(a.y-r.y)},s={x:a.x+.2*(o.x-a.x),y:a.y+.2*(o.y-a.y)},l={x:i.x+.2*(s.x-i.x),y:i.y+.2*(s.y-i.y)},c={x:r.x+.4*(a.x-r.x),y:r.y+.4*(a.y-r.y)},u={x:a.x+.4*(o.x-a.x),y:a.y+.4*(o.y-a.y)},d={x:c.x+.4*(u.x-c.x),y:c.y+.4*(u.y-c.y)},h={x:r.x+.6*(a.x-r.x),y:r.y+.6*(a.y-r.y)},p={x:a.x+.6*(o.x-a.x),y:a.y+.6*(o.y-a.y)},m={x:h.x+.6*(p.x-h.x),y:h.y+.6*(p.y-h.y)};e.reset(),e.setColor("black"),e.setFill("black"),e.drawSkeleton(t),e.setWeight(2),e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,s),e.drawCircle(i,3),e.drawCircle(s,3),e.setColor("red"),e.drawLine(i,c),e.drawLine(s,u),e.drawCircle(c,3),e.drawCircle(u,3),e.setColor("green"),e.drawLine(c,h),e.drawLine(u,p),e.drawCircle(h,3),e.drawCircle(p,3),e.text("First linear interpolation at 20% / 40% / 60%",{x:5,y:15}),e.setColor("black"),e.setWeight(1),e.setOffset({x:this.dim+.5,y:0}),e.drawLine({x:0,y:0},{x:0,y:this.dim}),e.drawSkeleton(t),e.setColor("rgb(100,100,200)"),e.drawLine(i,s),e.drawCircle(i,3),e.drawCircle(s,3),e.setColor("rgb(200,100,100)"),e.drawLine(c,u),e.drawCircle(c,3),e.drawCircle(u,3),e.setColor("rgb(100,200,100)"),e.drawLine(h,p),e.drawCircle(h,3),e.drawCircle(p,3),e.setColor("blue"),e.setWeight(2),e.drawLine(i,l),e.drawCircle(l,3),e.setColor("red"),e.drawLine(c,d),e.drawCircle(d,3),e.setColor("green"),e.drawLine(h,m),e.drawCircle(m,3),e.text("Second interpolation at 20% / 40% / 60%",{x:5,y:15}),e.setColor("black"),e.setWeight(1),e.setOffset({x:2*this.dim+.5,y:0}),e.drawLine({x:0,y:0},{x:0,y:this.dim}),e.drawSkeleton(t),e.setColor("lightgrey");for(var f,g,v=1,y=20;y>v;v++)f=v/y,g=t.get(f),e.drawCircle(g,2);e.setColor("black"),e.setFill("black"),e.drawCircle(l,3),e.drawCircle(d,3),e.drawCircle(m,3);var w={x:10,y:5};e.text("20%, or t = 0.2",{x:l.x+w.x,y:l.y+w.y}),e.text("40%, or t = 0.4",{x:d.x+w.x,y:d.y+w.y}),e.text("60%, or t = 0.6",{x:m.x+w.x,y:m.y+w.y}),e.text("Curve points generated this way",{x:5,y:15})}}},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:"The basics of Bézier curves"}},circle:n(182),componentWillMount:function(){this.setup=this.circle.setup.bind(this),this.draw=this.circle.draw.bind(this)},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually a well defined term representing a mapping from any number of inputs to a ',r.createElement("strong",null,"single")," output. Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number. Parametric functions cheat. They basically say \"alright, well, we want multiple values coming out, so we'll just use more than one function\". An illustration: Let's say we have a function that maps some value, let's call it ",r.createElement("i",null,"x"),", to some other value, using some kind of number manipulation:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1702a1f7b6c180a18d2e94b25808262b1e4c6195.svg",style:{width:"6.22485rem",height:"1.125rem"}})),r.createElement("p",null,"The notation ",r.createElement("i",null,"f(x)")," is the standard way to show that it's a function (by convention called ",r.createElement("i",null,"f")," if we're only listing one) and its output changes based on one variable (in this case, ",r.createElement("i",null,"x"),"). Change ",r.createElement("i",null,"x"),", and the output for ",r.createElement("i",null,"f(x)")," changes."),r.createElement("p",null,"So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/90842920b7553c3091917cfc38fc0a67c2055d38.svg",style:{width:"6.525rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"There's nothing really remarkable about them, they're just a sine and cosine function, but you'll notice the inputs have different names. If we change the value for ",r.createElement("i",null,"a"),", we're not going to change the output value for ",r.createElement("i",null,"f(b)"),", since ",r.createElement("i",null,"a")," isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e5fb9f01d6545e3e2f43410625edfdf483eb3668.svg",style:{width:"7.349849999999999rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"Multiple functions, but only one variable. If we change the value for ",r.createElement("i",null,"t"),", we change the outcome of both ",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)")," and ",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)"),". You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels ",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)")," and ",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)")," with what we usually mean with them for parametric curves, things might be a lot more obvious:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a1189e16ce64ad24e90aa3ea75a724f05d7ab599.svg",style:{width:"5.77485rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"There we go. ",r.createElement("i",null,"x"),"/",r.createElement("i",null,"y")," coordinates, linked through some mystery value ",r.createElement("i",null,"t"),"."),r.createElement("p",null,"So, parametric curves don't define a ",r.createElement("i",null,"y")," coordinate in terms of an ",r.createElement("i",null,"x"),' coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of ',r.createElement("i",null,"t"),", then with every change we get ",r.createElement("strong",null,"two")," values, which we can use as (",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),") coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range ",r.createElement("i",null,"t")," from negative to positive infinity, and the resulting (",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),") coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for ",r.createElement("i",null,"t")," from 0 to 5, we get this:"),r.createElement(a,{preset:"empty",title:"A (partial) circle: x=sin(t), y=cos(t)",setup:this.setup,draw:this.draw}),r.createElement("p",null,"Bézier curves are (one in many classes of) parametric functions, and are characterised by using the same base function for all its dimensions. Unlike the above example, where the ",r.createElement("i",null,"x")," and ",r.createElement("i",null,"y"),' values use different functions (one uses a sine, the other a cosine), Bézier curves use the "binomial polynomial" for both ',r.createElement("i",null,"x")," and ",r.createElement("i",null,"y"),". So what are binomial polynomials?"),r.createElement("p",null,"You may remember polynomials from high school, where they're those sums that look like:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4f7c9e4f8c7c560ba061ebd09e8a63364401ff22.svg",style:{width:"14.32485rem",height:"1.20015rem"}})),r.createElement("p",null,"If they have a highest order term ",r.createElement("i",null,"x³")," they're called \"cubic\" polynomials, if it's",r.createElement("i",null,"x²")," it's a \"square\" polynomial, if it's just ",r.createElement("i",null,"x")," it's a line (and if there aren't even any terms with ",r.createElement("i",null,"x")," it's not a polynomial!)"),r.createElement("p",null,"Bézier curves are polynomials of ",r.createElement("i",null,"t"),", rather than ",r.createElement("i",null,"x"),", with the value for ",r.createElement("i",null,"t"),"fixed being between 0 and 1, with coefficients ",r.createElement("i",null,"a"),", ",r.createElement("i",null,"b"),' etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0d76eda1bc302fcbae9ad77311288ffb9935e9f0.svg",style:{width:"24.89985rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,"I know what you're thinking: that doesn't look too simple, but if we remove ",r.createElement("i",null,"t"),' and add in "times one", things suddenly look pretty easy. Check out these binomial terms:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b7307b83a6aed8f3981842ce4365cddaaad5ba3b.svg",style:{width:"14.475150000000001rem",height:"5.175rem"}})),r.createElement("p",null,'Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just "the two numbers above it, added together". Now ',r.createElement("i",null,"that's")," easy to remember."),r.createElement("p",null,"There's an equally simple way to figure out how the polynomial terms work: if we rename ",r.createElement("i",null,"(1-t)")," to ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"t")," to ",r.createElement("i",null,"b"),", and remove the weights for a moment, we get this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/85716f7b80fabb43411b982ea3c2919f01f546b6.svg",style:{width:"20.84985rem",height:"3.825rem"}})),r.createElement("p",null,"It's basically just a sum of \"every combination of ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),'", progressively replacing ',r.createElement("i",null,"a"),"'s with ",r.createElement("i",null,"b"),"'s after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/524d2b97aebbfe44de7529989629e4e0dd11a754.svg",style:{width:"20.39985rem",height:"3.90015rem"}})),r.createElement("p",null,"And that's the full description for Bézier curves. Σ in this function indicates that this is a series of additions (using the variable listed below the Σ, starting at ...= and ending at the value listed on top of the Σ)."),r.createElement("div",{className:"howtocode"},r.createElement("h3",null,"How to implement the basis function"),r.createElement("p",null,"We could naively implement the basis function as a mathematical construct, using the function as our guide, like this:"),r.createElement("pre",null,"function Bezier(n,t):","\n"," sum = 0","\n"," for(k=0; ke?-Math.pow(-e,1/3):Math.pow(e,1/3)},m=Math.PI,f=2*m,g=m/2,v={x:0,y:0,z:0},y={Tvalues:[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213],Cvalues:[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872],arcfn:function(e,t){var n=t(e),r=n.x*n.x+n.y*n.y;return"undefined"!=typeof n.z&&(r+=n.z*n.z),h(r)},length:function(e){var t,n,r=.5,a=0,o=y.Tvalues.length;for(t=0;o>t;t++)n=r*y.Tvalues[t]+r,a+=y.Cvalues[t]*y.arcfn(n,e);return r*a},map:function(e,t,n,r,a){var o=n-t,i=a-r,s=e-t,l=s/o;return r+i*l},lerp:function(e,t,n){var r={x:t.x+e*(n.x-t.x),y:t.y+e*(n.y-t.y)};return t.z&&n.z&&(r.z=t.z+e*(n.z-t.z)),r},pointToString:function(e){var t=e.x+"/"+e.y;return"undefined"!=typeof e.z&&(t+="/"+e.z),t},pointsToString:function(e){return"["+e.map(y.pointToString).join(", ")+"]"},copy:function(e){return JSON.parse(JSON.stringify(e))},angle:function(e,t,n){var r,a=t.x-e.x,o=t.y-e.y,i=n.x-e.x,s=n.y-e.y,l=a*s-o*i,c=h(a*a+o*o),u=h(i*i+s*s);return a/=c,o/=c,i/=u,s/=u,r=a*i+o*s,d(l,r)},round:function(e,t){var n=""+e,r=n.indexOf(".");return parseFloat(n.substring(0,r+1+t))},dist:function(e,t){var n=e.x-t.x,r=e.y-t.y;return h(n*n+r*r)},lli8:function(e,t,n,r,a,o,i,s){var l=(e*r-t*n)*(a-i)-(e-n)*(a*s-o*i),c=(e*r-t*n)*(o-s)-(t-r)*(a*s-o*i),u=(e-n)*(o-s)-(t-r)*(a-i);return 0==u?!1:{x:l/u,y:c/u}},lli4:function(e,t,n,r){var a=e.x,o=e.y,i=t.x,s=t.y,l=n.x,c=n.y,u=r.x,d=r.y;return y.lli8(a,o,i,s,l,c,u,d)},lli:function(e,t){return y.lli4(e,e.c,t,t.c)},makeline:function(e,t){var n=e.x,r=e.y,a=t.x,o=t.y,i=(a-n)/3,s=(o-r)/3;return new b(n,r,n+i,r+s,n+2*i,r+2*s,a,o)},findbbox:function(e){var t=99999999,n=t,r=-t,a=r;return e.forEach(function(e){var o=e.bbox();t>o.x.min&&(t=o.x.min),n>o.y.min&&(n=o.y.min),r0&&(o.c1=t,o.c2=r,o.s1=e,o.s2=n,a.push(o))}})}),a},makeshape:function(e,t){var n=t.points.length,r=e.points.length,a=y.makeline(t.points[n-1],e.points[0]),o=y.makeline(e.points[r-1],t.points[0]),i={startcap:a,forward:e,back:t,endcap:o,bbox:y.findbbox([a,e,t,o])},s=y;return i.intersections=function(e){return s.shapeintersections(i,i.bbox,e,e.bbox)},i},getminmax:function(e,t,n){if(!n)return{min:0,max:0};var r,a,o=0x10000000000000000,i=-o;-1===n.indexOf(0)&&(n=[0].concat(n)),-1===n.indexOf(1)&&n.push(1);for(var s=0,l=n.length;l>s;s++)r=n[s],a=e.get(r),a[t]i&&(i=a[t]);return{min:o,mid:(o+i)/2,max:i,size:i-o}},align:function(e,t){var n=t.p1.x,r=t.p1.y,a=-d(t.p2.y-r,t.p2.x-n),o=function(e){return{x:(e.x-n)*l(a)-(e.y-r)*c(a),y:(e.x-n)*c(a)+(e.y-r)*l(a)}};return e.map(o)},roots:function(e,t){t=t||{p1:{x:0,y:0},p2:{x:1,y:0}};var n=e.length-1,r=y.align(e,t),a=function(e){return e>=0&&1>=e};if(2===n){var o=r[0].y,i=r[1].y,s=r[2].y,c=o-2*i+s;if(0!==c){var d=-h(i*i-o*s),m=-o+i,g=-(d+m)/c,v=-(-d+m)/c;return[g,v].filter(a)}return i!==s&&0===c?[(2*i-s)/2*(i-s)].filter(a):[]}var w,g,b,E,x,C=r[0].y,N=r[1].y,k=r[2].y,_=r[3].y,c=-C+3*N-3*k+_,o=(3*C-6*N+3*k)/c,i=(-3*C+3*N)/c,s=C/c,r=(3*i-o*o)/3,D=r/3,T=(2*o*o*o-9*o*i+27*s)/27,S=T/2,O=S*S+D*D*D;if(0>O){var M=-r/3,P=M*M*M,I=h(P),R=-T/(2*I),L=-1>R?-1:R>1?1:R,A=u(L),V=p(I),B=2*V;return b=B*l(A/3)-o/3,E=B*l((A+f)/3)-o/3,x=B*l((A+2*f)/3)-o/3,[b,E,x].filter(a)}if(0===O)return w=0>S?p(-S):-p(S),b=2*w-o/3,E=-w-o/3,[b,E].filter(a);var z=h(O);return w=p(-S+z),g=p(S+z),[w-g-o/3].filter(a)},droots:function(e){if(3===e.length){var t=e[0],n=e[1],r=e[2],a=t-2*n+r;if(0!==a){var o=-h(n*n-t*r),i=-t+n,s=-(o+i)/a,l=-(-o+i)/a;return[s,l]}return n!==r&&0===a?[(2*n-r)/(2*(n-r))]:[]}if(2===e.length){var t=e[0],n=e[1];return t!==n?[t/(t-n)]:[]}},bboxoverlap:function(e,t){var n,r,a,i,s,l=["x","y"],c=l.length;for(n=0;c>n;n++)if(r=l[n],a=e[r].mid,i=t[r].mid,s=(e[r].size+t[r].size)/2,o(a-i)>=s)return!1;return!0},expandbox:function(e,t){t.x.mine.x.max&&(e.x.max=t.x.max),t.y.max>e.y.max&&(e.y.max=t.y.max),t.z&&t.z.max>e.z.max&&(e.z.max=t.z.max),e.x.mid=(e.x.min+e.x.max)/2,e.y.mid=(e.y.min+e.y.max)/2,e.z&&(e.z.mid=(e.z.min+e.z.max)/2),e.x.size=e.x.max-e.x.min,e.y.size=e.y.max-e.y.min,e.z&&(e.z.size=e.z.max-e.z.min)},pairiteration:function(e,t){var n=e.bbox(),r=t.bbox(),a=1e5,o=.5;if(n.x.size+n.y.sizeT?((T>S||S>O)&&(T+=f),T>O&&(r=O,O=T,T=r)):S>O&&T>S?(r=O,O=T,T=r):O+=f,_.s=T,_.e=O,_.r=D,_}},w=function(e){this.curves=[],this._3d=!1,e&&(this.curves=e,this._3d=this.curves[0]._3d)};w.prototype={valueOf:function(){return this.toString()},toString:function(){return y.pointsToString(this.points)},addCurve:function(e){this.curves.push(e),this._3d=this._3d||e._3d},length:function(){return this.curves.map(function(e){return e.length()}).reduce(function(e,t){return e+t})},curve:function(e){return this.curves[e]},bbox:function(){for(var e=this.curves,t=e[0].bbox(),n=1;n4){if(1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");a=!0}}else if(6!==i&&8!==i&&9!==i&&12!==i&&1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");var s=!a&&(9===i||12===i)||e&&e[0]&&"undefined"!=typeof e[0].z;this._3d=s;for(var l=[],c=0,u=s?3:2;i>c;c+=u){var d={x:t[c],y:t[c+1]};s&&(d.z=t[c+2]),l.push(d)}this.order=l.length-1,this.points=l;var h=["x","y"];s&&h.push("z"),this.dims=h,this.dimlen=h.length,function(e){for(var t=y.align(l,{p1:l[0],p2:l[e.order]}),n=0;n1e-4)return void(e._linear=!1);e._linear=!0}(this),this._t1=0,this._t2=1,this.update()};b.fromSVG=function(e){var t=e.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g).map(parseFloat),n=/[cq]/.test(e);return n?(t=t.map(function(e,n){return 2>n?e:e+t[n%2]}),new b(t)):new b(t)};var E=function(){return y};b.getUtils=E,b.prototype={getUtils:E,valueOf:function(){return this.toString()},toString:function(){return y.pointsToString(this.points)},toSVG:function(e){if(this._3d)return!1;for(var t=this.points,n=t[0].x,r=t[0].y,a=["M",n,r,2===this.order?"Q":"C"],o=1,i=t.length;i>o;o++)a.push(t[o].x),a.push(t[o].y);return a.join(" ")},update:function(){this.dpoints=[];for(var e=this.points,t=e.length,n=t-1;t>1;t--,n--){for(var r,a=[],o=0;n>o;o++)r={x:n*(e[o+1].x-e[o].x),y:n*(e[o+1].y-e[o].y)},this._3d&&(r.z=n*(e[o+1].z-e[o].z)),a.push(r);this.dpoints.push(a),e=a}this.computedirection()},computedirection:function(){var e=this.points,t=y.angle(e[0],e[this.order],e[1]);this.clockwise=t>0},length:function(){return y.length(this.derivative.bind(this))},_lut:[],getLUT:function(e){if(e=e||100,this._lut.length===e)return this._lut;this._lut=[];for(var t=0;e>=t;t++)this._lut.push(this.compute(t/e));return this._lut},on:function(e,t){t=t||5;for(var n,r=this.getLUT(),a=[],o=0,i=0;i1;){for(var d=0;de;e++)t=r[e],n=r[e-1],a[e]={x:(o-e)/o*t.x+e/o*n.x,y:(o-e)/o*t.y+e/o*n.y};return a[o]=r[o-1],new b(a)},derivative:function(e){var t,n,r=1-e,a=0,o=this.dpoints[0];2===this.order&&(o=[o[0],o[1],v],t=r,n=e),3===this.order&&(t=r*r,n=r*e*2,a=e*e);var i={x:t*o[0].x+n*o[1].x+a*o[2].x,y:t*o[0].y+n*o[1].y+a*o[2].y};return this._3d&&(i.z=t*o[0].z+n*o[1].z+a*o[2].z),i},normal:function(e){return this._3d?this.__normal3(e):this.__normal2(e)},__normal2:function(e){var t=this.derivative(e),n=h(t.x*t.x+t.y*t.y);return{x:-t.y/n,y:t.x/n}},__normal3:function(){var e=this.derivative(t),n=this.derivative(t+.01),r=h(e.x*e.x+e.y*e.y+e.z*e.z),a=h(n.x*n.x+n.y*n.y+n.z*n.z);e.x/=r,e.y/=r,e.z/=r,n.x/=a,n.y/=a,n.z/=a;var o={x:n.y*e.z-n.z*e.y,y:n.z*e.x-n.x*e.z,z:n.x*e.y-n.y*e.x},i=h(o.x*o.x+o.y*o.y+o.z*o.z);o.x/=i,o.y/=i,o.z/=i;var s=[o.x*o.x,o.x*o.y-o.z,o.x*o.z+o.y,o.x*o.y+o.z,o.y*o.y,o.y*o.z-o.x,o.x*o.z-o.y,o.y*o.z+o.x,o.z*o.z],l={x:s[0]*e.x+s[1]*e.y+s[2]*e.z,y:s[3]*e.x+s[4]*e.y+s[5]*e.z,z:s[6]*e.x+s[7]*e.y+s[8]*e.z};return l},hull:function(e){var t,n=this.points,r=[],a=[],o=0,i=0,s=0;for(a[o++]=n[0],a[o++]=n[1],a[o++]=n[2],3===this.order&&(a[o++]=n[3]);n.length>1;){for(r=[],i=0,s=n.length-1;s>i;i++)t=y.lerp(e,n[i],n[i+1]),a[o++]=t,r.push(t);n=r}return a},split:function(e,t){if(0===e&&t)return this.split(t).left;if(1===t)return this.split(e).right;var n=this.hull(e),r={left:new b(2===this.order?[n[0],n[3],n[5]]:[n[0],n[4],n[7],n[9]]),right:new b(2===this.order?[n[5],n[4],n[2]]:[n[9],n[8],n[6],n[3]]),span:n};if(r.left._t1=y.map(0,0,1,this._t1,this._t2),r.left._t2=y.map(e,0,1,this._t1,this._t2),r.right._t1=y.map(e,0,1,this._t1,this._t2),r.right._t2=y.map(1,0,1,this._t1,this._t2),!t)return r;t=y.map(t,e,1,0,1);var a=r.right.split(t);return a.left},inflections:function(){var e,t,n=this.dims,r={},a=[];return n.forEach(function(n){t=function(e){return e[n]},e=this.dpoints[0].map(t),r[n]=y.droots(e),3===this.order&&(e=this.dpoints[1].map(t),r[n]=r[n].concat(y.droots(e))),r[n]=r[n].filter(function(e){return e>=0&&1>=e}),a=a.concat(r[n].sort())}.bind(this)),a.sort(),r.values=a,r},bbox:function(){var e=this.inflections(),t={};return this.dims.forEach(function(n){t[n]=y.getminmax(this,n,e[n])}.bind(this)),t},overlaps:function(e){var t=this.bbox(),n=e.bbox();return y.bboxoverlap(t,n)},offset:function(e,t){if("undefined"!=typeof t){var n=this.get(e),r=this.normal(e),a={c:n,n:r,x:n.x+r.x*t,y:n.y+r.y*t};return this._3d&&(a.z=n.z+r.z*t),a}if(this._linear){var o=this.normal(0),i=this.points.map(function(t){var n={x:t.x+e*o.x,y:t.y+e*o.y};return t.z&&r.z&&(n.z=t.z+e*o.z),n});return[new b(i)]}var s=this.reduce();return s.map(function(t){return t.scale(e)})},simple:function(){if(3===this.order){var e=y.angle(this.points[0],this.points[3],this.points[1]),t=y.angle(this.points[0],this.points[3],this.points[2]);if(e>0&&0>t||0>e&&t>0)return!1}var n=this.normal(0),r=this.normal(1),a=n.x*r.x+n.y*r.y;this._3d&&(a+=n.z*r.z);var i=o(u(a));return m/3>i},reduce:function(){var e,t,n=0,r=0,a=.01,i=[],s=[],l=this.inflections().values;for(-1===l.indexOf(0)&&(l=[0].concat(l)),-1===l.indexOf(1)&&l.push(1),n=l[0],e=1;e=r;)for(r=n+a;1+a>=r;r+=a)if(t=e.split(n,r),!t.simple()){if(r-=a,o(n-r)n&&(t=e.split(n,1),t._t1=y.map(n,0,1,e._t1,e._t2),t._t2=e._t2,s.push(t))}),s},scale:function(e){var t=this.order,n=!1;if("function"==typeof e&&(n=e),n&&2===t)return this.raise().scale(n);var r=this.clockwise,a=n?n(0):e,o=n?n(1):e,i=[this.offset(0,10),this.offset(1,10)],s=y.lli4(i[0],i[0].c,i[1],i[1].c);if(!s)throw"cannot scale this curve. Try reducing it first.";var l=this.points,c=[];return[0,1].forEach(function(e){var n=c[e*t]=y.copy(l[e*t]);n.x+=(e?o:a)*i[e].n.x,n.y+=(e?o:a)*i[e].n.y}.bind(this)),n?([0,1].forEach(function(a){if(2!==this.order||!a){var o=l[a+1],i={x:o.x-s.x,y:o.y-s.y},u=n?n((a+1)/t):e;n&&!r&&(u=-u);var d=h(i.x*i.x+i.y*i.y);i.x/=d,i.y/=d,c[a+1]={x:o.x+u*i.x,y:o.y+u*i.y}}}.bind(this)),new b(c)):([0,1].forEach(function(e){if(2!==this.order||!e){var n=c[e*t],r=this.derivative(e),a={x:n.x+r.x,y:n.y+r.y};c[e+1]=y.lli4(n,a,s,l[e+1])}}.bind(this)),new b(c))},outline:function(e,t,n,r){function a(e,t,n,r,a){return function(o){var i=r/n,s=(r+a)/n,l=t-e;return y.map(o,0,1,e+i*l,e+s*l)}}t="undefined"==typeof t?e:t;var o,i=this.reduce(),s=i.length,l=[],c=[],u=0,d=this.length(),h="undefined"!=typeof n&&"undefined"!=typeof r;i.forEach(function(o){x=o.length(),h?(l.push(o.scale(a(e,n,d,u,x))),c.push(o.scale(a(-t,-r,d,u,x)))):(l.push(o.scale(e)),c.push(o.scale(-t))),u+=x}),c=c.map(function(e){return o=e.points,o[3]?e.points=[o[3],o[2],o[1],o[0]]:e.points=[o[2],o[1],o[0]],e}).reverse();var p=l[0].points[0],m=l[s-1].points[l[s-1].points.length-1],f=c[s-1].points[c[s-1].points.length-1],g=c[0].points[0],v=y.makeline(f,p),b=y.makeline(m,g),E=[v].concat(l).concat([b]).concat(c),x=E.length;return new w(E)},outlineshapes:function(e,t){t=t||e;for(var n=this.outline(e,t).curves,r=[],a=1,o=n.length;o/2>a;a++){var i=y.makeshape(n[a],n[o-a]);i.startcap.virtual=a>1,i.endcap.virtual=o/2-1>a,r.push(i)}return r},intersects:function(e){return e?e.p1&&e.p2?this.lineIntersects(e):(e instanceof b&&(e=e.reduce()),this.curveintersects(this.reduce(),e)):this.selfintersects()},lineIntersects:function(e){var t=i(e.p1.x,e.p2.x),n=i(e.p1.y,e.p2.y),r=s(e.p1.x,e.p2.x),a=s(e.p1.y,e.p2.y),o=this;return y.roots(this.points,e).filter(function(e){var i=o.get(e);return t<=i.x&&i.x<=r&&n<=i.y&&i.y<=a})},selfintersects:function(){var e,t,n,r,a=this.reduce(),o=a.length-2,i=[];for(e=0;o>e;e++)n=a.slice(e,e+1),r=a.slice(e+2),t=this.curveintersects(n,r),i=i.concat(t);return i},curveintersects:function(e,t){var n=[];e.forEach(function(e){t.forEach(function(t){e.overlaps(t)&&n.push({left:e,right:t})})});var r=[];return n.forEach(function(e){var t=y.pairiteration(e.left,e.right);t.length>0&&(r=r.concat(t))}),r},arcs:function(e){e=e||.5;var t=[];return this._iterate(e,t)},_error:function(e,t,n,r){var a=(r-n)/4,i=this.get(n+a),s=this.get(r-a),l=y.dist(e,t),c=y.dist(e,i),u=y.dist(e,s);return o(c-l)+o(u-l)},_iterate:function(e,t){var n,r=0,a=1;do{n=0,a=1;var o,i,s,l,c,u=this.get(r),d=!1,h=!1,p=a,m=1,f=0;do{h=d,l=s,p=(r+a)/2,f++,o=this.get(p),i=this.get(a),s=y.getccenter(u,o,i);var g=this._error(s,u,r,a);if(d=e>=g,c=h&&!d,c||(m=a),d){if(a>=1){m=1,l=s;break}a+=(a-r)/2}else a=p}while(!c&&n++<100);if(n>=100){console.error("arc abstraction somehow failed...");break}l=l?l:s,t.push(l),r=m}while(1>a);return t}},"undefined"!=typeof e&&e.exports?e.exports=b:(a=function(){return b}.call(n,r,n,e),!(void 0!==a&&(e.exports=a)))}()},function(e,t,n){"use strict";var r=n(10),a=r.createClass({displayName:"SectionHeader",render:function(){return r.createElement("h2",{"data-num":this.props.number},r.createElement("a",{href:"#"+this.props.name},this.props.title))}});e.exports=a},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:"So what makes a Bézier Curve?"}},interpolation:n(180),componentWillMount:function(){this.setup=this.interpolation.setup.bind(this),this.draw=this.interpolation.draw.bind(this)},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"Playing with the points for curves may have given you a feel for how Bézier curves behaves, but what ",r.createElement("em",null,"are")," Bézier curves, really? There are two ways to explain what a Bézier curve is, and they turn out to be the entirely equivalent, but one of them uses complicated maths, and the other uses really simple maths. So... let's start with the simple explanation:"),r.createElement("p",null,"Bezier curves are the result of ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Linear_interpolation"},"linear interpolations"),". That sounds complicated but you've been doing linear interpolation since you were very young: any time you had to point at something between two other things, you've been applying linear interpolation. It's simply \"picking a point between two, points\"."),r.createElement("p",null,"If we know the distance between those two points, and we want a new point that is, say, 20% the distance away from the first point (and thus 80% the distance away from the second point) then we can compute that really easily:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/93b03244097aea8be8fcac493afd3706c79fa403.svg",style:{width:"36.750150000000005rem",height:"6.37515rem"}})),r.createElement("p",null,"So let's look at that in action: the following graphic is interactive in that you can use your '+' and '-' keys to increase or decrease the interpolation distance, to see what happens. We start with three points, which gives us two lines. Linear interpolation over those lines gives use two points, between which we can again perform linear interpolation, yielding a single point. And that point —and all points we can form in this way for all distances taken together— form our Bézier curve:"),r.createElement(a,{title:"Linear Interpolation leading to Bézier curves",setup:this.setup,draw:this.draw}),r.createElement("p",null,"And that brings us to the complicated maths: calculus."),r.createElement("p",null,'While it doesn\'t look like that\'s what we\'ve just done, we actually just drew a quadratic curve, in steps, rather than in a single go. One of the fascinating parts about Bézier curves is that they can both be described in terms of polynomial functions, as well as in terms of very simple interpolations of interpolations of [...]. That, in turn, means we can look at what these curves can do based on both "real maths" (by examining the functions, their derivatives, and all that stuff), as well as by looking at the "mechanical" composition (which tells us that a curve will never extend beyond the points we used to construct it, for instance)'),r.createElement("p",null,"So let's start looking at Bézier curves a bit more in depth. Their mathematical expressions, the properties we can derive from those, and the various things we can do to, and with, Bézier curves."))}});e.exports=i},function(e,t){"use strict";e.exports={setup:function(e){this.offset=20;var t=e.getDefaultQuadratic();e.setPanelCount(3),e.setCurve(t),this.dim=e.getPanelWidth()},draw:function(e,t){var n=t.points,r=n[0],a=n[1],o=n[2],i={x:r.x+.2*(a.x-r.x),y:r.y+.2*(a.y-r.y)},s={x:a.x+.2*(o.x-a.x),y:a.y+.2*(o.y-a.y)},l={x:i.x+.2*(s.x-i.x),y:i.y+.2*(s.y-i.y)},c={x:r.x+.4*(a.x-r.x),y:r.y+.4*(a.y-r.y)},u={x:a.x+.4*(o.x-a.x),y:a.y+.4*(o.y-a.y)},d={x:c.x+.4*(u.x-c.x),y:c.y+.4*(u.y-c.y)},h={x:r.x+.6*(a.x-r.x),y:r.y+.6*(a.y-r.y)},p={x:a.x+.6*(o.x-a.x),y:a.y+.6*(o.y-a.y)},m={x:h.x+.6*(p.x-h.x),y:h.y+.6*(p.y-h.y)};e.reset(),e.setColor("black"),e.setFill("black"),e.drawSkeleton(t),e.setWeight(2),e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,s),e.drawCircle(i,3),e.drawCircle(s,3),e.setColor("red"),e.drawLine(i,c),e.drawLine(s,u),e.drawCircle(c,3),e.drawCircle(u,3),e.setColor("green"),e.drawLine(c,h),e.drawLine(u,p),e.drawCircle(h,3),e.drawCircle(p,3),e.text("First linear interpolation at 20% / 40% / 60%",{x:5,y:15}),e.setColor("black"),e.setWeight(1),e.setOffset({x:this.dim+.5,y:0}),e.drawLine({x:0,y:0},{x:0,y:this.dim}),e.drawSkeleton(t),e.setColor("rgb(100,100,200)"),e.drawLine(i,s),e.drawCircle(i,3),e.drawCircle(s,3),e.setColor("rgb(200,100,100)"),e.drawLine(c,u),e.drawCircle(c,3),e.drawCircle(u,3),e.setColor("rgb(100,200,100)"),e.drawLine(h,p),e.drawCircle(h,3),e.drawCircle(p,3),e.setColor("blue"),e.setWeight(2),e.drawLine(i,l),e.drawCircle(l,3),e.setColor("red"),e.drawLine(c,d),e.drawCircle(d,3),e.setColor("green"),e.drawLine(h,m),e.drawCircle(m,3),e.text("Second interpolation at 20% / 40% / 60%",{x:5,y:15}),e.setColor("black"),e.setWeight(1),e.setOffset({x:2*this.dim+.5,y:0}),e.drawLine({x:0,y:0},{x:0,y:this.dim}),e.drawSkeleton(t),e.setColor("lightgrey");for(var f,g,v=1,y=20;y>v;v++)f=v/y,g=t.get(f),e.drawCircle(g,2);e.setColor("black"),e.setFill("black"),e.drawCircle(l,3),e.drawCircle(d,3),e.drawCircle(m,3);var w={x:10,y:5};e.text("20%, or t = 0.2",{x:l.x+w.x,y:l.y+w.y}),e.text("40%, or t = 0.4",{x:d.x+w.x,y:d.y+w.y}),e.text("60%, or t = 0.6",{x:m.x+w.x,y:m.y+w.y}),e.text("Curve points generated this way",{x:5,y:15})}}},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:"The basics of Bézier curves"}},circle:n(182),componentWillMount:function(){this.setup=this.circle.setup.bind(this),this.draw=this.circle.draw.bind(this)},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually a well defined term representing a mapping from any number of inputs to a ',r.createElement("strong",null,"single")," output. Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number. Parametric functions cheat. They basically say \"alright, well, we want multiple values coming out, so we'll just use more than one function\". An illustration: Let's say we have a function that maps some value, let's call it ",r.createElement("i",null,"x"),", to some other value, using some kind of number manipulation:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1702a1f7b6c180a18d2e94b25808262b1e4c6195.svg",style:{width:"6.22485rem",height:"1.125rem"}})),r.createElement("p",null,"The notation ",r.createElement("i",null,"f(x)")," is the standard way to show that it's a function (by convention called ",r.createElement("i",null,"f")," if we're only listing one) and its output changes based on one variable (in this case, ",r.createElement("i",null,"x"),"). Change ",r.createElement("i",null,"x"),", and the output for ",r.createElement("i",null,"f(x)")," changes."),r.createElement("p",null,"So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/90842920b7553c3091917cfc38fc0a67c2055d38.svg",style:{width:"6.525rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"There's nothing really remarkable about them, they're just a sine and cosine function, but you'll notice the inputs have different names. If we change the value for ",r.createElement("i",null,"a"),", we're not going to change the output value for ",r.createElement("i",null,"f(b)"),", since ",r.createElement("i",null,"a")," isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e5fb9f01d6545e3e2f43410625edfdf483eb3668.svg",style:{width:"7.349849999999999rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"Multiple functions, but only one variable. If we change the value for ",r.createElement("i",null,"t"),", we change the outcome of both ",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)")," and ",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)"),". You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels ",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)")," and ",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)")," with what we usually mean with them for parametric curves, things might be a lot more obvious:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a1189e16ce64ad24e90aa3ea75a724f05d7ab599.svg",style:{width:"5.77485rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"There we go. ",r.createElement("i",null,"x"),"/",r.createElement("i",null,"y")," coordinates, linked through some mystery value ",r.createElement("i",null,"t"),"."),r.createElement("p",null,"So, parametric curves don't define a ",r.createElement("i",null,"y")," coordinate in terms of an ",r.createElement("i",null,"x"),' coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of ',r.createElement("i",null,"t"),", then with every change we get ",r.createElement("strong",null,"two")," values, which we can use as (",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),") coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range ",r.createElement("i",null,"t")," from negative to positive infinity, and the resulting (",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),") coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for ",r.createElement("i",null,"t")," from 0 to 5, we get this:"),r.createElement(a,{preset:"empty",title:"A (partial) circle: x=sin(t), y=cos(t)",setup:this.setup,draw:this.draw}),r.createElement("p",null,"Bézier curves are (one in many classes of) parametric functions, and are characterised by using the same base function for all its dimensions. Unlike the above example, where the ",r.createElement("i",null,"x")," and ",r.createElement("i",null,"y"),' values use different functions (one uses a sine, the other a cosine), Bézier curves use the "binomial polynomial" for both ',r.createElement("i",null,"x")," and ",r.createElement("i",null,"y"),". So what are binomial polynomials?"),r.createElement("p",null,"You may remember polynomials from high school, where they're those sums that look like:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4f7c9e4f8c7c560ba061ebd09e8a63364401ff22.svg",style:{width:"14.32485rem",height:"1.20015rem"}})),r.createElement("p",null,"If they have a highest order term ",r.createElement("i",null,"x³")," they're called \"cubic\" polynomials, if it's",r.createElement("i",null,"x²")," it's a \"square\" polynomial, if it's just ",r.createElement("i",null,"x")," it's a line (and if there aren't even any terms with ",r.createElement("i",null,"x")," it's not a polynomial!)"),r.createElement("p",null,"Bézier curves are polynomials of ",r.createElement("i",null,"t"),", rather than ",r.createElement("i",null,"x"),", with the value for ",r.createElement("i",null,"t"),"fixed being between 0 and 1, with coefficients ",r.createElement("i",null,"a"),", ",r.createElement("i",null,"b"),' etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0d76eda1bc302fcbae9ad77311288ffb9935e9f0.svg",style:{width:"24.89985rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,"I know what you're thinking: that doesn't look too simple, but if we remove ",r.createElement("i",null,"t"),' and add in "times one", things suddenly look pretty easy. Check out these binomial terms:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b7307b83a6aed8f3981842ce4365cddaaad5ba3b.svg",style:{width:"14.475150000000001rem",height:"5.175rem"}})),r.createElement("p",null,'Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just "the two numbers above it, added together". Now ',r.createElement("i",null,"that's")," easy to remember."),r.createElement("p",null,"There's an equally simple way to figure out how the polynomial terms work: if we rename ",r.createElement("i",null,"(1-t)")," to ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"t")," to ",r.createElement("i",null,"b"),", and remove the weights for a moment, we get this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/85716f7b80fabb43411b982ea3c2919f01f546b6.svg",style:{width:"20.84985rem",height:"3.825rem"}})),r.createElement("p",null,"It's basically just a sum of \"every combination of ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),'", progressively replacing ',r.createElement("i",null,"a"),"'s with ",r.createElement("i",null,"b"),"'s after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/524d2b97aebbfe44de7529989629e4e0dd11a754.svg",style:{width:"20.39985rem",height:"3.90015rem"}})),r.createElement("p",null,"And that's the full description for Bézier curves. Σ in this function indicates that this is a series of additions (using the variable listed below the Σ, starting at ...= and ending at the value listed on top of the Σ)."),r.createElement("div",{className:"howtocode"},r.createElement("h3",null,"How to implement the basis function"),r.createElement("p",null,"We could naively implement the basis function as a mathematical construct, using the function as our guide, like this:"),r.createElement("pre",null,"function Bezier(n,t):","\n"," sum = 0","\n"," for(k=0; k=d;d+=.1){c={x:s*Math.cos(d),y:l*Math.sin(d)},e.drawPoint(c,u);var h=d%1;(.05>h||h>.95)&&(e.text("t = "+Math.round(d),{x:u.x+1.25*s*Math.cos(d)-10,y:u.y+1.25*l*Math.sin(d)+5}),e.drawCircle(c,2,u))}}}},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Control",getDefaultProps:function(){return{title:"Controlling Bézier curvatures"}},drawCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t)},drawFunction:function(e,t,n,r){e.setRandomColor(),e.drawFunction(r),e.setFill(e.getColor()),t&&e.text(t,n)},drawLerpBox:function(e,t,n,r){e.noColor(),e.setFill("rgba(0,0,100,0.2)");var a={x:r.x-5,y:n},o={x:r.x+5,y:t};e.drawRect(a,o),e.setColor("black")},drawLerpPoint:function(e,t,n,r,a){a.y=n+t*r,e.drawCircle(a,3),e.setFill("black"),e.text((1e4*t|0)/100+"%",{x:a.x+10,y:a.y+4}),e.noFill()},drawQuadraticLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var a=e.hover;if(a&&a.x>=n&&a.x<=t-n){this.drawLerpBox(e,t,n,a);var o=(a.x-n)/r;this.drawLerpPoint(e,(1-o)*(1-o),n,r,a),this.drawLerpPoint(e,2*(1-o)*o,n,r,a),this.drawLerpPoint(e,o*o,n,r,a)}this.drawFunction(e,"first term",{x:2*n,y:r},function(e){return{x:n+e*r,y:n+r*(1-e)*(1-e)}}),this.drawFunction(e,"second term",{x:t/2-1.5*n,y:t/2+n},function(e){return{x:n+e*r,y:n+2*r*(1-e)*e}}),this.drawFunction(e,"third term",{x:r-2.5*n,y:r},function(e){return{x:n+e*r,y:n+r*e*e}})},drawCubicLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var a=e.hover;if(a&&a.x>=n&&a.x<=t-n){this.drawLerpBox(e,t,n,a);var o=(a.x-n)/r;this.drawLerpPoint(e,(1-o)*(1-o)*(1-o),n,r,a),this.drawLerpPoint(e,2*(1-o)*(1-o)*o,n,r,a),this.drawLerpPoint(e,3*(1-o)*o*o,n,r,a),this.drawLerpPoint(e,o*o*o,n,r,a)}this.drawFunction(e,"first term",{x:2*n,y:r},function(e){return{x:n+e*r,y:n+r*(1-e)*(1-e)*(1-e)}}),this.drawFunction(e,"second term",{x:t/2-4*n,y:t/2},function(e){return{x:n+e*r,y:n+3*r*(1-e)*(1-e)*e}}),this.drawFunction(e,"third term",{x:t/2+2*n,y:t/2},function(e){return{x:n+e*r,y:n+3*r*(1-e)*e*e}}),this.drawFunction(e,"fourth term",{x:r-2.5*n,y:r},function(e){return{x:n+e*r,y:n+r*e*e*e}})},draw15thLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var a=[1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1],o=e.hover;if(o&&o.x>=n&&o.x<=t-n){this.drawLerpBox(e,t,n,o);for(var i=0;15>=i;i++){var s=(o.x-n)/r,l=a[i]*Math.pow(1-s,15-i)*Math.pow(s,i);this.drawLerpPoint(e,l,n,r,o)}}for(var i=0;15>=i;i++){var c=!1,u=!1;0===i&&(c="first term",u={x:n+5,y:r}),15===i&&(c="last term",u={x:t-3.5*n,y:r}),this.drawFunction(e,c,u,function(e){return{x:n+e*r,y:n+r*a[i]*Math.pow(1-e,15-i)*Math.pow(e,i)}})}},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'Bézier curves are (like all "splines") interpolation functions, meaning they take a set of points, and generate values somewhere "between" those points. (One of the consequences of this is that you\'ll never be able to generate a point that lies outside the outline for the control points, commonly called the "hull" for the curve. Useful information!). In fact, we can visualize how each point contributes to the value generated by the function, so we can see which points are important, where, in the curve.'),r.createElement("p",null,'The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point\'s contribution to the total sum of the Bézier function. Click or click-drag to see the interpolation percentages for each curve-defining point at a specific ',r.createElement("i",null,"t")," value."),r.createElement("div",{className:"figure"},r.createElement(a,{inline:!0,preset:"simple",title:"Quadratic interpolations",draw:this.drawQuadraticLerp}),r.createElement(a,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:this.drawCubicLerp}),r.createElement(a,{inline:!0,preset:"simple",title:"15th order interpolations",draw:this.draw15thLerp})),r.createElement("p",null,"Also shown is the interpolation function for a 15",r.createElement("sup",null,"th")," order Bézier function. As you can see, the start and end point contribute considerably more to the curve's shape than any other point in the control point set."),r.createElement("p",null,'If we want to change the curve, we need to change the weights of each point, effectively changing the interpolations. The way to do this is about as straight forward as possible: just multiply each point with a value that changes its strength. These values are conventionally called "Weights", and we can add them to our original Bézier function:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e41083ef7693be5384f724a8b354b5a38c9b0ed4.svg",style:{width:"23.70015rem",height:"3.90015rem"}})),r.createElement("p",null,'That looks complicated, but as it so happens, the "weights" are actually just the coordinate values we want our curve to have: for an ',r.createElement("i",null,"n",r.createElement("sup",null,"th"))," order curve, w",r.createElement("sub",null,"0")," is our start coordinate, w",r.createElement("sub",null,"n")," is our last coordinate, and everything in between is a controlling coordinate. Say we want a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40), we use this Bézier curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/13a1df3fc05f3610035843aee9ee6be82a5820e7.svg",style:{width:"32.025150000000004rem",height:"2.77515rem"}})),r.createElement("p",null,"Which gives us the curve we saw at the top of the article:"),r.createElement(a,{preset:"simple",title:"Our cubic Bézier curve",setup:this.drawCubic,draw:this.drawCurve}),r.createElement("p",null,"What else can we do with Bézier curves? Quite a lot, actually. The rest of this article covers a multitude of possible operations and algorithms that we can apply, and the tasks they achieve."),r.createElement("div",{className:"howtocode"},r.createElement("h3",null,"How to implement the weighted basis function"),r.createElement("p",null,"Given that we already know how to implement basis function, adding in the control points is remarkably easy:"),r.createElement("pre",null,"function Bezier(n,t,w[]):","\n"," sum = 0","\n"," for(k=0; k=o;o++)e.drawCircle(a[o],3);var i=t.get(r);e.drawCircle(i,5),e.setFill("black"),e.drawCircle(i,3);var s=100*r|0;r=s/100,e.text("Sequential interpolation for "+s+"% (t="+r+")",{x:10,y:15})}},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"If we want to draw Bézier curves we can run through all values of ",r.createElement("i",null,"t")," from 0 to 1 and then compute the weighted basis function, getting the ",r.createElement("i",null,"x"),"/",r.createElement("i",null,"y"),' values we need to plot, but the more complex the curve gets, the more expensive this becomes. Instead, we can use "de Casteljau\'s algorithm" to draw curves, which is a geometric approach to drawing curves, and really easy to implement. So easy, in fact, you can do it by hand with a pencil and ruler.'),r.createElement("p",null,"Rather than using our calculus function to find ",r.createElement("i",null,"x"),"/",r.createElement("i",null,"y")," values for ",r.createElement("i",null,"t"),", let's do this instead:"),r.createElement("ul",null,r.createElement("li",null,"treat ",r.createElement("i",null,"t")," as a ratio (which it is). t=0 is 0% along a line, t=1 is 100% along a line."),r.createElement("li",null,"Take all lines between the curve's defining points. For an order ",r.createElement("i",null,"n")," curve, that's ",r.createElement("i",null,"n")," lines."),r.createElement("li",null,"Place markers along each of these line, at distance ",r.createElement("i",null,"t"),". So if ",r.createElement("i",null,"t")," is 0.2, place the mark at 20% from the start, 80% from the end."),r.createElement("li",null,"Now form lines between ",r.createElement("i",null,"those")," points. This gives ",r.createElement("i",null,"n-1")," lines."),r.createElement("li",null,"Place markers along each of these line at distance ",r.createElement("i",null,"t"),"."),r.createElement("li",null,"Form lines between ",r.createElement("i",null,"those")," points. This'll be ",r.createElement("i",null,"n-2")," lines."),r.createElement("li",null,"place markers, form lines, place markers, etc."),r.createElement("li",null,"repeat this until you have only one line left. The point ",r.createElement("i",null,"t")," on that line coincides with the original curve point at ",r.createElement("i",null,"t"),".")),r.createElement("div",{className:"howtocode"},r.createElement("h3",null,"How to implement de Casteljau's algorithm"),r.createElement("p",null,"Let's just use the algorithm we just specified, and implement that:"),r.createElement("pre",null,"function drawCurve(points[], t):","\n"," if(points.length==1):","\n"," draw(points[0])","\n"," else:","\n"," newpoints=array(points.size-1)","\n"," for(i=0; io;o+=r)n=t.get(Math.min(o,1)),e.setColor("red"),e.drawLine(a,n),a=n;e.setFill("black"),e.text("Curve approximation using "+e.steps+" segments",{x:10,y:15})},values:{38:1,40:-1},onKeyDown:function(e,t){var n=this.values[e.keyCode];n&&(e.preventDefault(),t.steps+=n,t.steps<1&&(t.steps=1))},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'We can also simplify the drawing process by "sampling" the curve at certain points, and then joining those points up with straight lines, a process known as "flattening", as we are reducing a curve to a simple sequence of straight, "flat" lines.'),r.createElement("p",null,'We can do this is by saying "we want X segments", and then sampling the curve at intervals that are spaced such that we end up with the number of segments we wanted. The advantage of this method is that it\'s fast: instead of evaluating 100 or even 1000 curve coordinates, we can sample a much lower number and still end up with a curve that sort-of-kind-of looks good enough. The disadvantage of course is that we lose the precision of working with "the real curve", so we usually can\'t use the flattened for for doing true intersection detection, or curvature alignment.'),r.createElement(a,{preset:"twopanel",title:"Flattening a quadratic curve",setup:this.setupQuadratic,draw:this.drawFlattened,onKeyDown:this.onKeyDown}),r.createElement(a,{preset:"twopanel",title:"Flattening a cubic curve",setup:this.setupCubic,draw:this.drawFlattened,onKeyDown:this.onKeyDown}),r.createElement("p",null,"Try clicking on the sketch and using your up and down arrow keys to lower the number of segments for both the quadratic and cubic curve. You'll notice that for certain curvatures, a low number of segments works quite well, but for more complex curvatures (try this for the cubic curve), a higher number is required to capture the curvature changes properly."),r.createElement("div",{className:"howtocode"},r.createElement("h3",null,"How to implement curve flattening"),r.createElement("p",null,"Let's just use the algorithm we just specified, and implement that:"),r.createElement("pre",null,"function flattenCurve(curve, segmentCount):","\n"," step = 1/segmentCount;","\n"," coordinates = [curve.getXValue(0), curve.getYValue(0)]","\n"," for(i=1; i <= segmentCount; i++):","\n"," t = i*step;","\n"," coordinates.push[curve.getXValue(t), curve.getYValue(t)]","\n"," return coordinates;"),r.createElement("p",null,'And done, that\'s the algorithm implemented. That just leaves drawing the resulting "curve" as a sequence of lines:'),r.createElement("pre",null,"function drawFlattenedCurve(curve, segmentCount):","\n"," coordinates = flattenCurve(curve, segmentCount)","\n"," coord = coordinates[0], _coords;","\n"," for(i=1; i < coordinates.length; i++):","\n"," _coords = coordinates[i]","\n"," line(coords, _coords)","\n"," coords = _coords"),r.createElement("p",null,"We start with the first coordinate as reference point, and then just draw lines between each point and its next point.")))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Splitting",getDefaultProps:function(){return{title:"Splitting curves"}},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.forward=!0},drawSplit:function(e,t){e.setPanelCount(2),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n={x:0,y:0},r=.5,a=t.get(.5),o=t.split(r);e.drawCurve(o.left),e.drawCurve(o.right),e.setColor("red"),e.drawCircle(a,3),e.setColor("black"),n.x=e.getPanelWidth(),e.drawLine({x:0,y:0},{x:0,y:e.getPanelHeight()},n),e.setColor("lightgrey"),e.drawCurve(t,n),e.drawCircle(a,4),n.x-=20,n.y-=20,e.drawSkeleton(o.left,n,!0),e.drawCurve(o.left,n),n.x+=40,n.y+=40,e.drawSkeleton(o.right,n,!0),e.drawCurve(o.right,n)},drawAnimated:function(e,t){e.setPanelCount(3),e.reset();var n=e.getFrame(),r=5*e.getPlayInterval(),a=n%r/r,o=r>n%(2*r);o?a%=1:a=1-a%1;var i={x:0,y:0};e.setColor("lightblue"),e.drawHull(t,a),e.drawSkeleton(t),e.drawCurve(t);var s=t.get(a);e.drawCircle(s,4),e.setColor("black"),i.x+=e.getPanelWidth(),e.drawLine({x:0,y:0},{x:0,y:e.getPanelHeight()},i);var l=t.split(a);e.setColor("lightgrey"),e.drawCurve(t,i),e.drawHull(t,a,i),e.setColor("black"),e.drawCurve(l.left,i),e.drawPoints(l.left.points,i),e.setFill("black"),e.text("Left side of curve split at t = "+(100*a|0)/100,{x:10+i.x,y:15+i.y}),i.x+=e.getPanelWidth(),e.drawLine({x:0,y:0},{x:0,y:e.getPanelHeight()},i),e.setColor("lightgrey"),e.drawCurve(t,i),e.drawHull(t,a,i),e.setColor("black"),e.drawCurve(l.right,i),e.drawPoints(l.right.points,i),e.setFill("black"),e.text("Right side of curve split at t = "+(100*a|0)/100,{x:10+i.x,y:15+i.y})},togglePlay:function(e,t){t.playing?t.pause():t.play()},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"With de Casteljau's algorithm we also find all the points we need to split up a Bézier curve into two, smaller curves, which taken together form the original curve. When we construct de Casteljau's skeleton for some value",r.createElement("i",null,"t"),", the procedure gives us all the points we need to split a curve at that ",r.createElement("i",null,"t")," value: one curve is defined by all the inside skeleton points found prior to our on-curve point, with the other curve being defined by all the inside skeleton points after our on-curve point."),r.createElement(a,{title:"Splitting a curve",setup:this.setupCubic,draw:this.drawSplit}),r.createElement("div",{className:"howtocode"},r.createElement("h3",null,"implementing curve splitting"),r.createElement("p",null,"We can implement curve splitting by bolting some extra logging onto the de Casteljau function:"),r.createElement("pre",null,"left=[]","\n","right=[]","\n","function drawCurve(points[], t):","\n"," if(points.length==1):","\n"," left.add(points[0])","\n"," right.add(points[0])","\n"," draw(points[0])","\n"," else:","\n"," newpoints=array(points.size-1)","\n"," for(i=0; ia;a++)t.push({x:n/2+20*Math.random()+Math.cos(2*Math.PI*a/10)*(n/2-40),y:r/2+20*Math.random()+Math.sin(2*Math.PI*a/10)*(r/2-40)});var o=new e.Bezier(t);e.setCurve(o)},draw:function(e,t){e.reset();var n=t.points;this.setState({order:n.length});for(var r=n[0],a=0;1>=a;a+=.01){for(var o=JSON.parse(JSON.stringify(n));o.length>1;){for(var i=0;i=n;n++)r=n/10,a=t.get(r),o=t.derivative(r),s=Math.sqrt(o.x*o.x+o.y*o.y),o={x:o.x/s,y:o.y/s},i=t.normal(r),e.setColor("blue"),e.drawLine(a,{x:a.x+o.x*l,y:a.y+o.y*l}),e.setColor("red"),e.drawLine(a,{x:a.x+i.x*l,y:a.y+i.y*l}),e.setColor("black"),e.drawCircle(a,3)},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'If you want to move objects along a curve, or "away from" a curve, the two vectors you\'re most interested in are the tangent vector and normal vector for curve points. These are actually really easy to find. For moving, and orienting, along a curve we use the tangent, which indicates the direction travel at specific points, and is literally just the first derivative of our curve:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cbc206d36644a654583016cf547b7706c3e9d588.svg",style:{width:"10.35rem",height:"2.77515rem"}})),r.createElement("p",null,"This gives us the directional vector we want. We can normalize it to give us uniform directional vectors (having a length of 1.0) at each point, and then do whatever it is we want to do based on those directions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/967cc51e88df4c42ad30a0ee717c65152e0e185a.svg",style:{width:"17.62515rem",height:"2.025rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c4b1013b77b30f840988a8bc79d4176f96f561cd.svg",style:{width:"20.62485rem",height:"4.7250000000000005rem"}})),r.createElement("p",null,"The tangent is very useful for moving along a line, but what if we want to move away from the curve instead, perpendicular to the curve at some point ",r.createElement("i",null,"t"),'? In that case we want the "normal" vector. This vector runs at a right angle to the direction of the curve, and is typically of length 1.0, so all we have to do is rotate the normalized directional vector and we\'re done:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f4afd0b6b52609c34a0e55f5fd1769c85c122077.svg",style:{width:"22.800150000000002rem",height:"4.57515rem"}})),r.createElement("div",{className:"note"},r.createElement("p",null,'Rotating coordinates is actually very easy, if you know the rule for it. You might find it explained as "applying a ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Rotation_matrix"},"rotation matrix"),'", which is what we\'ll look at here, too. Essentially, the idea is to take the circles over which we can rotate, and simply "sliding the coordinates" over those circles by the desired angle. If we want a quarter circle turn, we take the coordinate, slide it along the cirle by a quarter turn, and done.'),r.createElement("p",null,"To turn any point ",r.createElement("i",null,"(x,y)")," into a rotated point ",r.createElement("i",null,"(x',y')")," (over 0,0) by some angle φ, we apply this nicely easy computation:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d08c84eb3e934b29fddd96ab8c5d72830d408ff3.svg",style:{width:"12.225150000000001rem",height:"2.84985rem"}})),r.createElement("p",null,'Which is the "long" version of the following matrix transformation:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/aed5a0fb3c84b99ba1f29b42798db7ba38cc3d16.svg",style:{width:"15.150150000000002rem",height:"2.77515rem"}})),r.createElement("p",null,"And that's all we need to rotate any coordinate. Note that for quarter, half and three quarter turns these functions become even easier, since ",r.createElement("i",null,"sin")," and",r.createElement("i",null,"cos")," for these angles are, respectively: 0 and 1, -1 and 0, and 0 and -1."),r.createElement("p",null,"But ",r.createElement("strong",null,r.createElement("em",null,"why"))," does this work? Why this matrix multiplication?",r.createElement("a",{href:"http://en.wikipedia.org/wiki/Rotation_matrix#Decomposition_into_shears"},"wikipedia"),"(Technically, Thomas Herter and Klaus Lott) tells us that a rotation matrix can be treated as a sequence of three (elementary) shear operations. When we combine this into a single matrix operation (because all matrix multiplications can be collapsed), we get the matrix that you see above.",r.createElement("a",{href:"http://datagenetics.com/blog/august32013/index.html"},"DataGenetics")," have an excellent article about this very thing: it's really quite cool, and I strongly recommend taking a quick break from this primer to read that article.")),r.createElement("p",null,"The following two graphics show the tangent and normal along a quadratic and cubic curve, with the direction vector coloured blue, and the normal vector coloured red (the markers are spaced out evenly as ",r.createElement("i",null,"t"),"-intervals, not spaced equidistant)."),r.createElement("div",{className:"figure"},r.createElement(a,{preset:"simple",title:"Quadratic Bézier tangents and normals",inline:!0,setup:this.setupQuadratic,draw:this.draw}),r.createElement(a,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:this.setupCubic,draw:this.draw})))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Components",getDefaultProps:function(){return{title:"Component functions"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[2].x=210,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.setPanelCount(3),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.order+1,r=20,a=t.points,o=e.getPanelWidth(),i=e.getPanelHeight(),s={x:o,y:0},l=JSON.parse(JSON.stringify(a)).map(function(e,t){return{x:o*t/n,y:e.x}});e.drawLine({x:0,y:0},{x:0,y:i},s),e.drawAxes(r,"t",0,1,"x",0,o,s),s.x+=r,e.drawCurve(new e.Bezier(l),s),s.x+=o-r;var c=JSON.parse(JSON.stringify(a)).map(function(e,t){return{x:o*t/n,y:e.y}});e.drawLine({x:0,y:0},{x:0,y:i},s),e.drawAxes(r,"t",0,1,"y",0,o,s),s.x+=r,e.drawCurve(new e.Bezier(c),s)},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'One of the first things people run into when they start using Bézier curves in their own programs is "I know how to draw the curve, but how do I determine the bounding box?". It\'s actually reasonably straight forward to do so, but it requires having some knowledge on exploiting math to get the values we need. For bounding boxes, we aren\'t actually interested in the curve itself, but only in its "extremities": the minimum and maximum values the curve has for its x- and y-axis values. If you remember your calculus (provided you ever took calculus, otherwise it\'s going to be hard to remember) we can determine function extremities using the first derivative of that function, but this poses a problem, since our function is parametric: every axis has its own function.'),r.createElement("p",null,"The solution: compute the derivative for each axis separately, and then fit them back together in the same way we do for the original."),r.createElement("p",null,'Let\'s look at how a parametric Bézier curve "splits up" into two normal functions, one for the x-axis and one for the y-axis. Note the left-most figure is again an interactive curve, without labeled axes (you get coordinates in the graph instead). The center and right-most figures are the component functions for computing the x-axis value, given a value for ',r.createElement("i",null,"t")," (between 0 and 1 inclusive), and the y-axis value, respectively."),r.createElement("p",null,"If you move points in a curve sideways, you should only see the middle graph change; likely, moving points vertically should only show a change in the right graph."),r.createElement(a,{preset:"simple",title:"Quadratic Bézier curve components",setup:this.setupQuadratic,draw:this.draw}),r.createElement(a,{preset:"simple",title:"Cubic Bézier curve components",setup:this.setupCubic,draw:this.draw}))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Extremities",getDefaultProps:function(){return{title:"Finding extremities: root finding"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[2].x=210,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.setPanelCount(3),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.order+1,r=20,a=t.points,o=e.getPanelWidth(),i=e.getPanelHeight(),s={x:o,y:0},l=JSON.parse(JSON.stringify(a)).map(function(e,t){return{x:o*t/n,y:e.x}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:i},s),e.drawAxes(r,"t",0,1,"x",0,o,s),s.x+=r;var c=new e.Bezier(l);e.drawCurve(c,s),e.setColor("red"),c.inflections().y.forEach(function(t){var n=c.get(t);e.drawCircle(n,3,s)}),s.x+=o-r;var u=JSON.parse(JSON.stringify(a)).map(function(e,t){return{x:o*t/n,y:e.y}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:i},s),e.drawAxes(r,"t",0,1,"y",0,o,s),s.x+=r;var d=new e.Bezier(u);e.drawCurve(d,s),e.setColor("red"),d.inflections().y.forEach(function(t){var n=d.get(t);e.drawCircle(n,3,s)})},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"Now that we understand (well, superficially anyway) the component functions, we can find the extremities of our Bézier curve by finding maxima and minima on the component functions, by solving the equations B'(t) = 0 and B''(t) = 0. Although, in the case of quadratic curves there is no B''(t), so we only need to compute B'(t) = 0. So, how do we compute the first and second derivatives? Fairly easily, actually, until our derivatives are 4th order or higher... then things get really hard. But let's start simple:"),r.createElement("h3",null,"Quadratic curves: linear derivatives."),r.createElement("p",null,'Finding the solution for "where is this line 0" should be trivial:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/457ecd24879f9203a5f7c020e7bd9c217007bbc0.svg",style:{width:"9.450000000000001rem",height:"6.37515rem"}})),r.createElement("p",null,"Done. And quadratic curves have no meaningful second derivative, so we're ",r.createElement("em",null,"really")," done."),r.createElement("h3",null,"Cubic curves: the quadratic formula."),r.createElement("p",null,"The derivative of a cubic curve is a quadratic curve, and finding the roots for a quadratic Bézier curve means we can apply the ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Quadratic_formula"},"Quadratic formulat"),". If you've seen it before, you'll remember it, and if you haven't, it looks like this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c991d280b1933f09eaf11ec04511d15207747660.svg",style:{width:"28.72485rem",height:"2.475rem"}})),r.createElement("p",null,"So, if we can express a Bézier component function as a plain polynomial, we're done: we just plug in the values into the quadratic formula, check if that square root is negative or not (if it is, there are no roots) and then just compute the two values that come out (because of that plus/minus sign we get two). Any value between 0 and 1 is a root that matters for Bézier curves, anything below or above that is irrelevant (because Bézier curves are only defined over the interval [0,1]). So, how do we convert?"),r.createElement("p",null,"First we turn our cubic Bézier function into a quadratic one, by following the rule mentioned at the end of the ",r.createElement("a",{href:"#derivatives"},"derivatives section"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/71539c3a104af5ec78918e5e3f70cb7c533f0f8f.svg",style:{width:"45rem",height:"2.77515rem"}})),r.createElement("p",null,"And then, using these ",r.createElement("em",null,"v")," values, we can find out what our ",r.createElement("em",null,"a"),", ",r.createElement("em",null,"b"),", and ",r.createElement("em",null,"c")," should be:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ccc78c9c81c6b3133b0463dc19da3567fb002d07.svg",style:{width:"21.375rem",height:"7.2rem"}})),r.createElement("p",null,"So we can find the roots by using:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c2469b2f47faf38e9c35fab6ef23cc76f201ff6c.svg",style:{width:"20.84985rem",height:"3.97485rem"}})),r.createElement("p",null,"Easy peasy. We also note that the second derivative of a cubic curve means computing the first derivative of a quadratic curve, and we just saw how to do that in the section above."),r.createElement("h3",null,"Quartic curves: Cardano's algorithm."),r.createElement("p",null,"Quartic—fourth degree—curves have a cubic function as derivative. Now, cubic functions are a bit of a problem because they're really hard to solve. But, way back in the 16",r.createElement("sup",null,"th")," century, ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Gerolamo_Cardano"},"Gerolamo Cardano"),' figured out that even if the general cubic function is really hard to solve, it can be rewritten to a form for which finding the roots is "easy", and then the only hard part is figuring out how to go from that form to the generic form. So:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/aca62a3ba9b8a7bf37b235e5e3629868e659f773.svg",style:{width:"45rem",height:"2.77515rem"}})),r.createElement("p",null,'This is easier because for the "easier formula" we can use ',r.createElement("a",{href:"http://www.wolframalpha.com/input/?i=t^3+%2B+pt+%2B+q"},"regular calculus")," to find the roots (as a cubic function, however, it can have up to three roots, but two of those can be complex. For the purpose of Bézier curve extremities, we can completely ignore those complex roots, since our ",r.createElement("em",null,"t")," is a plain real number from 0 to 1)."),r.createElement("p",null,"So, the trick is to figure out how to turn the first formula into the second formula, and to then work out the maths that gives us the roots. This is explained in detail over at ",r.createElement("a",{href:"http://www.trans4mind.com/personal_development/mathematics/polynomials/cubicAlgebra.htm"},"Ken J. Ward's page")," for solving the cubic equation, so instead of showing the maths, I'm simply going to show the programming code for solving the cubic equation, with the complex roots getting totally ignored."),r.createElement("div",{className:"note"},r.createElement("pre",null,"\n","// A helper function to filter for values in the [0,1] interval:","\n","function accept(t) ","{","\n"," return 0<=t && t <=1;","\n","}","\n","\n","// A special cuberoot function, which we can use because we don't care about complex roots:","\n","function crt(v) ","{","\n"," if(v<0) return -Math.pow(-v,1/3);","\n"," return Math.pow(v,1/3);","\n","}","\n","\n","// Now then: given cubic coordinates pa, pb, pc, pd, find all roots.","\n","function getCubicRoots(pa, pb, pc, pd) ","{","\n"," var d = (-pa + 3*pb - 3*pc + pd),","\n"," a = (3*pa - 6*pb + 3*pc) / d,","\n"," b = (-3*pa + 3*pb) / d,","\n"," c = pa / d;","\n","\n"," var p = (3*b - a*a)/3,","\n"," p3 = p/3,","\n"," q = (2*a*a*a - 9*a*b + 27*c)/27,","\n"," q2 = q/2,","\n"," discriminant = q2*q2 + p3*p3*p3;","\n","\n"," // and some variables we're going to use later on:","\n"," var u1,v1,root1,root2,root3;","\n","\n"," // three possible real roots:","\n"," if (discriminant < 0) ","{","\n"," var mp3 = -p/3,","\n"," mp33 = mp3*mp3*mp3,","\n"," r = sqrt( mp33 ),","\n"," t = -q / (2*r),","\n"," cosphi = t<-1 ? -1 : t>1 ? 1 : t,","\n"," phi = acos(cosphi),","\n"," crtr = cuberoot(r),","\n"," t1 = 2*crtr;","\n"," root1 = t1 * cos(phi/3) - a/3;","\n"," root2 = t1 * cos((phi+2*pi)/3) - a/3;","\n"," root3 = t1 * cos((phi+4*pi)/3) - a/3;","\n"," return [root1, root2, root3].filter(accept);","\n"," ","}","\n","\n"," // three real roots, but two of them are equal:","\n"," else if(discriminant === 0) ","{","\n"," u1 = q2 < 0 ? cuberoot(-q2) : -cuberoot(q2);","\n"," root1 = 2*u1 - a/3;","\n"," root2 = -u1 - a/3;","\n"," return [root1, root2].filter(accept);","\n"," ","}","\n","\n"," // one real root, two complex roots","\n"," else ","{","\n"," var sd = sqrt(discriminant);","\n"," u1 = cuberoot(sd - q2);","\n"," v1 = cuberoot(sd + q2);","\n"," root1 = u1 - v1 - a/3;","\n"," return [root1].filter(accept);","\n"," ","}","\n","}")),r.createElement("p",null,'And that\'s it. The maths is complicated, but the code is pretty much just "follow the maths, while caching as many values as we can to reduce recomputing things as much as possible" and now we have a way to find all roots for a cubic function and can just move on with using that to find extremities of our curves.'),r.createElement("h3",null,"Quintic and higher order curves: finding numerical solutions"),r.createElement("p",null,"The problem with this is that as the order of the curve goes up, we can't actually solve those equations the normal way. We can't take the function, and then work out what the solutions are. Not to mention that even solving a third order derivative (for a fourth order curve) is already a royal pain in the backside. We need a better solution. We need numerical approaches."),r.createElement("p",null,'That\'s a fancy word for saying "rather than solve the function, treat the problem as a sequence of identical operations, the performing of which gets us closer and closer to the real answer". As it turns out, there is a really nice numerical root finding algorithm, called the ',r.createElement("a",{ href:"http://en.wikipedia.org/wiki/Newton-Raphson"},"Newton-Raphson"),"root finding method (yes, after ",r.createElement("strong",null,"that")," Newton), which we can make use of."),r.createElement("p",null,"The Newton-Raphson approach consists of picking a value ",r.createElement("i",null,"t")," (any will do), and getting the corresponding value at that ",r.createElement("i",null,"t")," value. For normal functions, we can treat that value as a height. If the height is zero, we're done, we have found a root. If it's not, we take the tangent of the curve at that point, and extend it until it passes the x-axis, which will be at some new point ",r.createElement("i",null,"t"),". We then repeat the procedure with this new value, and we keep doing this until we find our root."),r.createElement("p",null,"Mathematically, this means that for some ",r.createElement("i",null,"t"),", at step ",r.createElement("i",null,"n=1"),", we perform the following calculation until ",r.createElement("i",null,"f",r.createElement("sub",null,"y")),"(",r.createElement("i",null,"t"),") is zero, so that the next ",r.createElement("i",null,"t")," is the same as the one we already have:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a213e6063f76db9b644b2485f984a678b63544dc.svg",style:{width:"8.625150000000001rem",height:"2.9250000000000003rem"}})),r.createElement("p",null,"(The wikipedia article has a decent animation for this process, so I'm not adding a sketch for that here)"),r.createElement("p",null,"Now, this works well only if we can pick good starting points, and our curve is continuously differentiable and doesn't have oscillations. Glossing over the exact meaning of those terms, the curves we're dealing with conform to those constraints, so as long as we pick good starting points, this will work. So the question is: which starting points do we pick?"),r.createElement("p",null,"As it turns out, Newton-Raphson is so blindingly fast, so we could get away with just not picking: we simply run the algorithm from ",r.createElement("i",null,"t=0")," to ",r.createElement("i",null,"t=1")," at small steps (say, 1/200",r.createElement("sup",null,"th"),") and the result will be all the roots we want. Of course, this may pose problems for high order Bézier curves: 200 steps for a 200",r.createElement("sup",null,"th")," order Bézier curve is going to go wrong, but that's okay: there is no reason, ever, to use Bézier curves of crazy high orders. You might use a fifth order curve to get the \"nicest still remotely workable\" approximation of a full circle with a single Bézier curve, that's pretty much as high as you'll ever need to go."),r.createElement("h3",null,"In conclusion:"),r.createElement("p",null,"So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics:"),r.createElement(a,{preset:"simple",title:"Quadratic Bézier curve extremities",setup:this.setupQuadratic,draw:this.draw}),r.createElement(a,{preset:"simple",title:"Cubic Bézier curve extremities",setup:this.setupCubic,draw:this.draw}))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:"Bounding boxes"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("#00FF00"),e.drawbbox(t.bbox())},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"If we have the extremities, and the start/end points, a simple for loop that tests for min/max values for x and y means we have the four values we need to box in our curve:"),r.createElement("p",null,r.createElement("i",null,"Computing the bounding box for a Bézier curve"),":"),r.createElement("ol",null,r.createElement("li",null,"Find all ",r.createElement("i",null,"t")," value(s) for the curve derivative's x- and y-roots."),r.createElement("li",null,"Discard any ",r.createElement("i",null,"t")," value that's lower than 0 or higher than 1, because Bézier curves only use the interval [0,1]."),r.createElement("li",null,"Determine the lowest and highest value when plugging the values ",r.createElement("i",null,"t=0"),", ",r.createElement("i",null,"t=1")," and each of the found roots into the original functions: the lowest value is the lower bound, and the highest value is the upper bound for the bounding box we want to construct.")),r.createElement("p",null,"Applying this approach to our previous root finding, we get the following bounding boxes (with curve extremities coloured the same as in the root finding graphics):"),r.createElement(a,{preset:"simple",title:"Quadratic Bézier bounding box",setup:this.setupQuadratic,draw:this.draw}),r.createElement(a,{preset:"simple",title:"Cubic Bézier bounding box",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"We can construct even nicer boxes by aligning them along our curve, rather than along the x- and y-axis, but in order to do so we first need to look at how aligning works."))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Aligning",getDefaultProps:function(){return{title:"Aligning curves"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},align:function(e,t){var n=t.p1.x,r=t.p1.y,a=-Math.atan2(t.p2.y-r,t.p2.x-n),o=Math.cos,i=Math.sin,s=function(e){return{x:(e.x-n)*o(a)-(e.y-r)*i(a),y:(e.x-n)*i(a)+(e.y-r)*o(a)}};return e.map(s)},draw:function(e,t){e.setPanelCount(2),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.points,r={p1:n[0],p2:n[n.length-1]},a=this.align(n,r),o=new e.Bezier(a),i=e.getPanelWidth(),s=e.getPanelHeight(),l={x:i,y:0};e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:s},l),l.x+=i/4,l.y+=s/2,e.setColor("grey"),e.drawLine({x:0,y:-s/2},{x:0,y:s/2},l),e.drawLine({x:-i/4,y:0},{x:i,y:0},l),e.setFill("grey"),e.setColor("black"),e.drawSkeleton(o,l),e.drawCurve(o,l)},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'While there are an incredible number of curves we can define by varying the x- and y-coordinates for the control points, not all curves are actually distinct. For instance, if we define a curve, and then rotate it 90 degrees, it\'s still the same curve, and we\'ll find its extremities in the same spots, just at different draw coordinates. As such, one way to make sure we\'re working with a "unique" curve is to "axis-align" it.'),r.createElement("p",null,"Aligning also simplifies a curve's functions. We can translate (move) the curve so that the first point lies on (0,0), which turns our ",r.createElement("i",null,"n")," term polynomial functions into ",r.createElement("i",null,"n-1")," term functions. The order stays the same, but we have less terms. Then, we can rotate the curves so that the last point always lies on the x-axis, too, making its coordinate (...,0). This further simplifies the function for the y-component to an ",r.createElement("i",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5d9290ab64c8462cae88c686a9dcdbb4363343b7.svg",style:{width:"34.12485rem",height:"2.77515rem"}})),r.createElement("p",null,"Then translating it so that the first coordinate lies on (0,0), moving all ",r.createElement("i",null,"x")," coordinates by -120, and all ",r.createElement("i",null,"y")," coordinates by -160, gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c6fe11adb02fcdebfbbbc9406c4add9a64e7814a.svg",style:{width:"33.075rem",height:"2.77515rem"}})),r.createElement("p",null,"If we then rotate the curve so that its end point lies on the x-axis, the coordinates (integer-rounded for illustrative purposes here) become:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/eac174dcc7435ddeb78ccf957a9e56ee29571a66.svg",style:{width:"32.54985rem",height:"2.77515rem"}})),r.createElement("p",null,"If we drop all the zero-terms, this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1ef56b36bef7123383c3db6cb205224926580d88.svg",style:{width:"25.79985rem",height:"2.77515rem"}})),r.createElement("p",null,"We can see that our original curve definition has been simplified considerably. The following graphics illustrate the result of aligning our example curves to the x-axis, with the cubic case using the coordinates that were just used in the example formulae:"),r.createElement(a,{preset:"twopanel",title:"Aligning a quadratic curve",setup:this.setupQuadratic,draw:this.draw}),r.createElement(a,{preset:"twopanel",title:"Aligning a cubic curve",setup:this.setupCubic,draw:this.draw}))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"TightBounds",getDefaultProps:function(){return{title:"Tight boxes"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},align:function(e,t){var n=t.p1.x,r=t.p1.y,a=-Math.atan2(t.p2.y-r,t.p2.x-n),o=Math.cos,i=Math.sin,s=function(e){return{x:(e.x-n)*o(a)-(e.y-r)*i(a),y:(e.x-n)*i(a)+(e.y-r)*o(a),a:a}};return e.map(s)},transpose:function(e,t,n){var r=n.x,a=n.y,o=Math.cos,i=Math.sin,s=[e.x.min,e.y.min,e.x.max,e.y.max],e=[{x:s[0],y:s[1]},{x:s[2],y:s[1]},{x:s[2],y:s[3]},{x:s[0],y:s[3]}].map(function(e){var n=e.x,s=e.y;return{x:n*o(t)-s*i(t)+r,y:n*i(t)+s*o(t)+a}});return e},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.points,r={p1:n[0],p2:n[n.length-1]},a=this.align(n,r),o=-a[0].a,i=new e.Bezier(a),s=i.bbox(),l=this.transpose(s,o,n[0]);e.setColor("#00FF00"),e.drawLine(l[0],l[1]),e.drawLine(l[1],l[2]),e.drawLine(l[2],l[3]),e.drawLine(l[3],l[0])},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,'With our knowledge of bounding boxes, and curve alignment, We can now form the "tight" bounding box for curves. We first align our curve, recording the translation we performed, "T", and the rotation angle we used, "R". We then determine the aligned curve\'s normal bounding box. Once we have that, we can map that bounding box back to our original curve by rotating it by -R, and then translating it by -T. We now have nice tight bounding boxes for our curves:'),r.createElement(a,{preset:"twopanel",title:"Aligning a quadratic curve",setup:this.setupQuadratic,draw:this.draw}),r.createElement(a,{preset:"twopanel",title:"Aligning a cubic curve",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"These are, strictly speaking, not necessarily the tightest possible bounding boxes. It is possible to compute the optimal bounding box by determining which spanning lines we need to effect a minimal box area, but because of the parametric nature of Bézier curves this is actually a rather costly operation, and the gain in bounding precision is often not worth it. If there is high demand for it, I'll add a section on how to precisely compute the best fit bounding box, but the maths is fairly gruelling and just not really worth spending time on."))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=r.createClass({displayName:"Canonical",getDefaultProps:function(){return{title:"Canonical form (for cubic curves)"}},setup:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.reset()},draw:function(e,t){var n=400,r=n,a=this.unit,o={x:n/2,y:r/2};e.setSize(n,r),e.setPanelCount(2),e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.offset.x+=400,e.image(this.mapImage),e.drawLine({x:0,y:0},{x:0,y:r});var i=[{x:0,y:0},{x:0,y:a},{x:a,y:a},this.forwardTransform(t.points,a)],s=new e.Bezier(i);e.setColor("blue"),e.drawCurve(s,o),e.drawCircle(i[3],3,o)},forwardTransform:function(e,t){t=t||1;var n=e[0],r=e[1],a=e[2],o=e[3],i=-n.x+o.x-(-n.x+r.x)*(-n.y+o.y)/(-n.y+r.y),s=-n.x+a.x-(-n.x+r.x)*(-n.y+a.y)/(-n.y+r.y),l=t*i/s,c=t*(-n.y+o.y)/(-n.y+r.y),u=t-t*(-n.y+a.y)/(-n.y+r.y),d=u*i/s,h=c+d;return{x:l,y:h}},drawBase:function(e,t){var n=400,r=n,a=this.unit=n/5,o={x:n/2,y:r/2};e.setSize(n,r),e.setColor("lightgrey");for(var i=0;n>i;i+=a/2)e.drawLine({x:i,y:0},{x:i,y:r});for(var s=0;r>s;s+=a/2)e.drawLine({x:0,y:s},{x:n,y:s});e.setColor("black"),e.drawLine({x:n/2,y:0},{x:n/2,y:r}),e.drawLine({x:0,y:r/2},{x:n,y:r/2}),e.setColor("green"),e.drawLine({x:-n/2,y:a},{x:n/2,y:a},o),e.setColor("black"),e.setFill("black"),e.drawCircle({x:0,y:0},4,o),e.text("(0,0)",{x:5+o.x,y:15+o.y}),e.drawCircle({x:0,y:a},4,o),e.text("(0,1)",{x:5+o.x,y:a+15+o.y}),e.drawCircle({x:a,y:a},4,o),e.text("(1,1)",{x:a+5+o.x,y:a+15+o.y}),e.setWeight(1.5),e.setColor("#FF0000"),e.setFill(e.getColor());var l=[],c=1,u=1;for(i=-10;1>=i;i+=.01)s=(-i*i+2*i+3)/4,i>-10&&(l.push({x:a*c,y:a*u}),e.drawLine({x:a*c,y:a*u},{x:a*i,y:a*s},o)),c=i,u=s;l.push({x:a*c,y:a*u}),e.text("Curve form has cusp →",{x:n/2-2*a,y:r/2+a/2.5}),e.setColor("#FF00FF"),e.setFill(e.getColor());var d=Math.sqrt;for(i=1;i>=0;i-=.005)l.push({x:a*c,y:a*u}),s=.5*(d(3)*d(4*i-i*i)-i),e.drawLine({x:a*c,y:a*u},{x:a*i,y:a*s},o),c=i,u=s;for(l.push({x:a*c,y:a*u}),e.text("← Curve forms a loop at t = 1",{x:n/2+a/4,y:r/2+a/1.5}),e.setColor("#3300FF"),e.setFill(e.getColor()),i=0;i>-n;i-=.01)l.push({x:a*c,y:a*u}),s=(-i*i+3*i)/3,e.drawLine({x:a*c,y:a*u},{x:a*i,y:a*s},o),c=i,u=s;l.push({x:a*c,y:a*u}),e.text("← Curve forms a loop at t = 0",{x:n/2-a+10,y:r/2-1.25*a}),e.setColor("transparent"),e.setFill("rgba(255,120,100,0.2)"),e.drawPath(l,o),l=[{x:-n/2,y:a},{x:n/2,y:a},{x:n/2,y:r},{x:-n/2,y:r}],e.setFill("rgba(0,200,0,0.2)"),e.drawPath(l,o),e.setColor("black"),e.setFill(e.getColor()),e.text("← Curve form has one inflection →",{x:n/2-a,y:r/2+1.75*a}),e.text("← Plain curve ↕",{x:n/2+a/2,y:r/6}),e.text("↕ Double inflection",{x:10,y:r/2-10}),this.mapImage=e.toImage()},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"While quadratic curves are relatively simple curves to analyze, the same cannot be said of the cubic curve. As a curvature controlled by more than one control points, it exhibits all kinds of features like loops, cusps, odd colinear features, and up to two inflection points because the curvature can change direction up to three times. Now, knowing what kind of curve we're dealing with means that some algorithms can be run more efficiently than if we have to implement them as generic solvers, so is there a way to determine the curve type without lots of work?"),r.createElement("p",null,"As it so happens, the answer is yes and the solution we're going to look at was presented by Maureen C. Stone from Xerox PARC and Tony D. deRose from the University of Washington in their joint paper",r.createElement("a",{href:"http://graphics.pixar.com/people/derose/publications/CubicClassification/paper.pdf"},'"A Geometric Characterization of Parametric Cubic curves"'),'. It was published in 1989, and defines curves as having a "canonical" form (i.e. a form that all curves can be reduced to) from which we can immediately tell which features a curve will have. So how does it work?'),r.createElement("p",null,'The first observation that makes things work is that if we have a cubic curve with four points, we can apply a linear transformation to these points such that three of the points end up on (0,0), (0,1) and (1,1), with the last point then being "somewhere". After applying that transformation, the location of that last point can then tell us what kind of curve we\'re dealing with. Specifically, we see the following breakdown:'),r.createElement(a,{"static":!0,preset:"simple",title:"The canonical curve map",setup:this.setup,draw:this.drawBase}),r.createElement("p",null,"This is a fairly funky image, so let's see how it breaks down. We see the three fixed points at (0,0), (0,1) and (1,1), and then the fourth point is somewhere. Depending on where it is, our curve will have certain features. Namely, if the fourth point is..."),r.createElement("ol",null,r.createElement("li",null,"anywhere on and in the red zone, the curve will be self-intersecting, yielding either a cusp or a loop. Anywhere inside the the red zone, this will be a loop. We won't know ",r.createElement("i",null,"where")," that loop is (in terms of ",r.createElement("i",null,"t")," values), but we are guaranteed that there is one."),r.createElement("li",null,"on the left (red) edge, the curve will have a cusp. We again don't know ",r.createElement("em",null,"where"),", just that it has one. This edge is described by the function: ",r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1d1a2bae56f2fcf053698cedd90ee823db01923e.svg",style:{width:"12.45015rem",height:"2.3998500000000003rem"}})),r.createElement("li",null,"on the lower right (pink) edge, the curve will have a loop at t=1, so we know the end coordinate of the curve also lies ",r.createElement("em",null,"on")," the curve. This edge is described by the function: ",r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d08de7d34c31607f02365c9243591293e6c2e47c.svg",style:{width:"16.050150000000002rem",height:"2.6248500000000003rem"}})),r.createElement("li",null,"on the top (blue) edge, the curve will have a loop at t=0, so we know the start coordinate of the curve also lies ",r.createElement("em",null,"on")," the curve. This edge is described by the function: ",r.createElement("img",{className:"LaTeX SVG",src:"images/latex/14d0162b3132e35e8c7c9dd73d76990f5d4bf251.svg",style:{width:"10.650150000000002rem",height:"2.3998500000000003rem"}})),r.createElement("li",null,"inside the green zone, the curve will have a single inflection, switching concave/convex once."),r.createElement("li",null,"between the red and green zones, the curve has two inflections, meaning its curvature switches between concave/convex form twice."),r.createElement("li",null,"anywhere on the right of the red zone, the curve will have no inflections. It'll just be a well-behaved arch.")),r.createElement("p",null,"Of course, this map is fairly small, but the regions extend to infinity, with well defined boundaries."),r.createElement("div",{className:"note"},r.createElement("h3",null,"Wait, where do those lines come from?"),r.createElement("p",null,'Without repeating the paper mentioned at the top of this section, the loop-boundaries come from rewriting the curve into canonical form, and then solving the formulae for which constraints must hold for which possible curve properties. In the paper these functions yield formulae for where you will find cusp points, or loops where we know t=0 or t=1, but those functions are derived for the full cubic expression, meaning they apply to t=-∞ to t=∞... For Bézier curves we only care about the "clipped interval" t=0 to t=1, so some of the properties that apply when you look at the curve over an infinite interval simply don\'t apply to the Bézier curve interval.'),r.createElement("p",null,'The right bound for the loop region, indicating where the curve switches from "having inflections" to "having a loop", for the general cubic curve, is actually mirrored over x=1, but for Bézier curves this right half doesn\'t apply, so we don\'t need to pay attention to it. Similarly, the boundaries for t=0 and t=1 loops are also nice clean curves but get "cut off" when we only look at what the general curve does over the interval t=0 to t=1.'),r.createElement("p",null,'For the full details, head over to the paper and read through sections 3 and 4. If you still remember your high school precalculus, you can probably follow along with this paper, although you might have to read it a few times before all the bits "click".')),r.createElement("p",null,"So now the question becomes: how do we manipulate our curve so that it fits this canonical form, with three fixed points, and one \"free\" point? Enter linear algerba. Don't worry, I'll be doing all the math for you, as well as show you what the effect is on our curves, but basically we're going to be using linear algebra, rather than calculus, because \"it's way easier\". Sometimes a calculus approach is very hard to work with, when the equivalent geometrical solution is super obvious."),r.createElement("p",null,"The approach is going to start with a curve that doesn't have all-colinear points (so we need to make sure the points don't all fall on a straight line), and then applying four graphics operations that you will probably have heard of: translation (moving all points by some fixed x- and y-distance), scaling (multiplying all points by some x and y scale factor), and shearing (an operation that turns rectangles into parallelograms)."),r.createElement("p",null,"Step 1: we translate any curve by -p1.x and -p1.y, so that the curve starts at (0,0). We're going to make use of an interesting trick here, by pretending our 2D coordinates are 3D, with the ",r.createElement("i",null,"z"),"coordinate simply always being 1. This is an old trick in graphics to overcome the limitations of 2D transformations: without it, we can only turn (x,y) coordinates into new coordinates of the form (ax + by, cx + dy), which means we can't do translation, since that requires we end up with some kind of (x + a, y + b). If we add a bogus ",r.createElement("i",null,"z")," coordinate that is always 1, then we can suddenly add arbitrary values. For example:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cdac718c131773f05bf57bea11b29608703bb2f8.svg",style:{width:"34.05015rem",height:"4.05rem"}})),r.createElement("p",null,"Sweet! ",r.createElement("i",null,"z")," stays 1, so we can effectively ignore it entirely, but we added some plain values to our x and y coordinates. So, if we want to subtract p1.x and p1.y, we use:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4ea0dfd93cbd1bc6d57906997a69b5080a444684.svg",style:{width:"32.09985rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,"Running all our coordinates through this transformation gives a new set of coordinates, let's call those ",r.createElement("b",null,"U"),", where the first coordinate lies on (0,0), and the rest is still somewhat free. Our next job is to make sure point 2 ends up lying on the ",r.createElement("i",null,"x=0")," line, so what we want is a transformation matrix that, when we run it, subtracts ",r.createElement("i",null,"x")," from whatever ",r.createElement("i",null,"x")," we currently have. This is called ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Shear_matrix"},"shearing"),", and the typical x-shear matrix and its transformation looks like this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/799395fa2ef61911f3e662533f35817661000bd9.svg",style:{width:"15.67485rem",height:"4.05rem"}})),r.createElement("p",null,"So we want some shearing value that, when multiplied by ",r.createElement("i",null,"y"),", yields ",r.createElement("i",null,"-x"),", so our x coordinate becomes zero. That value is simpy ",r.createElement("i",null,"-x/y"),", because ",r.createElement("i",null,"-x/y * y = -x"),". Done:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a3a6b5c609ff9a71eb36a873873a67a00917c91c.svg",style:{width:"9.9rem",height:"4.87485rem"}})),r.createElement("p",null,"Now, running this on all our points generates a new set of coordinates, let's call those V, which now have point 1 on (0,0) and point 2 on (0, some-value), and we wanted it at (0,1), so we need to [do some scaling](https://en.wikipedia.org/wiki/Scaling_%28geometry%29) to make sure it ends up at (0,1). Additionally, we want point 3 to end up on (1,1), so we can also scale x to make sure its x-coordinate will be 1 after we run the transform. That means we'll be x-scaling by 1/point3",r.createElement("sub",null,"x"),", and y-scaling by point2",r.createElement("sub",null,"y"),". This is really easy:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d6b0373e8b51e235101bfee1f10aedac8f206df4.svg",style:{width:"10.04985rem",height:"5.3248500000000005rem"}})),r.createElement("p",null,"Then, finally, this generates a new set of coordinates, let's call those W, of which point 1 lies on (0,0), point 2 lies on (0,1), and point three lies on (1, ...) so all that's left is to make sure point 3 ends up at (1,1) - but we can't scale! Point 2 is already in the right place, and y-scaling would move it out of (0,1) again, so our only option is to y-shear point three, just like how we x-sheared point 2 earlier. In this case, we do the same trick, but with `y/x` rather than `x/y` because we're not x-shearing but y-shearing. Additionally, we don't actually want to end up at zero (which is what we did before) so we need to shear towards an offset, in this case 1:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f58dafbe7e11676c9acb801da9c8bd8e517a0651.svg",style:{width:"10.125rem",height:"4.95rem"}})),r.createElement("p",null,'And this generates our final set of four coordinates. Of these, we already know that points 1 through 3 are (0,0), (0,1) and (1,1), and only the last coordinate is "free". In fact, given any four starting coordinates, the resulting "transformation mapped" coordinate will be:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4f35775e6daaa3b7de6f300151fbc30b930bdcc0.svg",style:{width:"31.57515rem",height:"8.1rem"}})),r.createElement("p",null,"That looks very complex, but notice that every coordinate value is being offset by the initial translation, and a lot of terms in there repeat: it's pretty easy to calculate this fast, since there's so much we can cache and reuse while we compute this mapped coordinate!"),r.createElement("p",null,"First, let's just do that translation step as a \"preprocessing\" operation so we don't have to subtract the values all the time. What does that leave?"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1975f7410a031ab336f0a2fdd0eb0d985ba59d17.svg",style:{width:"24.67485rem",height:"4.05rem"}})),r.createElement("p",null,"Suddenly things look a lot simpler: the mapped x is fairly straight forward to compute, and we see that the mapped y actually contains the mapped x in its entirety, so we'll have that part already available when we need to evaluate it. In fact, let's pull out all those common factors to see just how simple this is:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/286deb8f60e93f365f218d3b12c491ba43ff5c1f.svg",style:{width:"29.100150000000003rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"That's kind of super-simple to write out in code, I think you'll agree. Coding math tends to be easier than the formulae initially make it look!"),r.createElement("div",{className:"note"},r.createElement("h3",null,"How do you track all that?"),r.createElement("p",null,"Doing maths can be a pain, so whenever possible, I like to make computers do the work for me. Especially for things like this, I simply use ",r.createElement("a",{href:"http://www.wolfram.com/mathematica"},"Mathematica"),". Tracking all this math by hand is insane, and we invented computers, literally, to do this for us. I have no reason to use pen and paper when I can write out what I want to do in a program, and have the program do the math for me. And real math, too, with symbols, not with numbers. In fact, ",r.createElement("a",{href:"http://pomax.github.io/gh-weblog/downloads/canonical-curve.nb"},"here's")," the Mathematica notebook if you want to see how this works for yourself."),r.createElement("p",null,"Now, I know, you're thinking \"but Mathematica is super expensive!\" and that's true, it's ",r.createElement("a",{href:"http://www.wolfram.com/mathematica-home-edition"},"$295 for home use"),", but it's ",r.createElement("strong",null,"also")," ",r.createElement("a",{href:"http://www.wolfram.com/raspberry-pi"},"free when you buy a $35 raspberry pi"),". Obviously, I bought a raspberry pi, and I encourage you to do the same. With that, as long as you know what you want to ",r.createElement("em",null,"do"),", Mathematica can just do it for you. And we don't have to be geniusses to work out what the maths looks like. That's what we have computers for.")),r.createElement("p",null,"So, let's write up a sketch that'll show us the canonical form for any curve drawn in blue, overlaid on our canonical map, so that we can immediately tell which features our curve must have, based on where the fourth coordinate is located on the map:"),r.createElement(a,{preset:"simple",title:"A cubic curve mapped to canonical form",setup:this.setup,draw:this.draw}))}});e.exports=i},function(e,t,n){"use strict";var r=n(10),a=n(173),o=n(178),i=Math.sin,s=2*Math.PI,l=r.createClass({displayName:"Arclength",getDefaultProps:function(){return{title:"Arc length"}},setup:function(e){var t,n=e.getPanelWidth(),r=e.getPanelHeight();this.generator||(t=function(e,t){return t=t||1,{x:e*n/s,y:t*i(e)}},t.start=0,t.end=s,t.step=.1,t.scale=r/3,this.generator=t)},drawSine:function(e,t){var n=e.getPanelWidth(),r=e.getPanelHeight(),a=this.generator;a.dheight=t,e.setColor("black"),e.drawLine({x:0,y:r/2},{x:n,y:r/2}),e.drawFunction(a,{x:0,y:r/2})},drawSlices:function(e,t){var n=e.getPanelWidth(),r=e.getPanelHeight(),a=n/s,o=0,i=25>=t?1:0;e.reset(),e.setColor("transparent"),e.setFill("rgba(150,150,255, 0.4)");for(var l,c,u,d=s/t,h=d/2;s+d/2>h;h+=d)l=this.generator(h),c={x:l.x-a*d/2+i,y:0},u={x:l.x+a*d/2-i,y:l.y*this.generator.scale},i||e.setFill("rgba(150,150,255,"+(.4+.3*Math.random())+")"),e.drawRect(c,u,{x:0,y:r/2}),o+=d*Math.abs(l.y*this.generator.scale);e.setFill("black");var p=(400*r/3|0)/100,m=(100*o|0)/100;e.text("Approximating with "+t+" strips (true area: "+p+"): "+m,{x:10,y:r-15})},drawCoarseIntegral:function(e){e.reset(),this.drawSlices(e,10),this.drawSine(e)},drawFineIntegral:function(e){e.reset(),this.drawSlices(e,24),this.drawSine(e)},drawSuperFineIntegral:function(e){e.reset(),this.drawSlices(e,99),this.drawSine(e)},setupCurve:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.length();e.setFill("black"),e.text("Curve length: "+n+" pixels",{x:10,y:15})},render:function(){return r.createElement("section",null,r.createElement(o,this.props),r.createElement("p",null,"How long is a Bézier curve? As it turns out, that's not actually an easy question, because the answer requires maths that —much like root finding— cannot generally be solved the traditional way. If we have a parametric curve with ",r.createElement("i",null,"f",r.createElement("sub",null,"x"),"(t)")," and ",r.createElement("i",null,"f",r.createElement("sub",null,"y"),"(t)"),", then the length of the curve, measured from start point to some point ",r.createElement("i",null,"t = z"),", is computed using the following seemingly straight forward (if a bit overwhelming) formula:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/837e8de2c6bbb595c960cc59b1c73f5fd954ed49.svg",style:{width:"10.42515rem",height:"2.475rem"}})),r.createElement("p",null,"or, more commonly written using Leibnitz notation as:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ff4c9156d20783c9b4dfab8b40e1f328b1a7cb3f.svg",style:{width:"17.1rem",height:"2.475rem"}})),r.createElement("p",null,"This formula says that the length of a parametric curve is in fact equal to the ",r.createElement("b",null,"area")," underneath a function that looks a remarkable amount like Pythagoras' rule for computing the diagonal of a straight angled triangle. This sounds pretty simple, right? Sadly, it's far from simple... cutting straight to after the chase is over: for quadratic curves, this formula generates an ",r.createElement("a",{