From 4e2b17407bc4f5a3fe298beefb4c8c00330278ff Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Wed, 8 Feb 2017 09:07:57 -0800
Subject: [PATCH] pontoon?

---
 article.js                                   |  10 +-
 components/App.jsx                           |  20 ++--
 components/sections/bsplined/demonstrator.js |  38 +++++++
 components/sections/bsplined/derived.js      |  37 +++++++
 components/sections/bsplined/index.js        | 106 +++++++++++++++++++
 5 files changed, 198 insertions(+), 13 deletions(-)
 create mode 100644 components/sections/bsplined/demonstrator.js
 create mode 100644 components/sections/bsplined/derived.js
 create mode 100644 components/sections/bsplined/index.js

diff --git a/article.js b/article.js
index 4c08d43a..b13d15cf 100644
--- a/article.js
+++ b/article.js
@@ -1,5 +1,5 @@
-!function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";var r=n(2),i=n(159),a=n(160);i.render(r.createElement(a,null),document.getElementById("article"))},function(e,t,n){"use strict";e.exports=n(3)},function(e,t,n){"use strict";var r=n(4),i=n(149),a=n(153),o=n(40),s=n(158),l={};o(l,a),o(l,{findDOMNode:s("findDOMNode","ReactDOM","react-dom",r,r.findDOMNode),render:s("render","ReactDOM","react-dom",r,r.render),unmountComponentAtNode:s("unmountComponentAtNode","ReactDOM","react-dom",r,r.unmountComponentAtNode),renderToString:s("renderToString","ReactDOMServer","react-dom/server",i,i.renderToString),renderToStaticMarkup:s("renderToStaticMarkup","ReactDOMServer","react-dom/server",i,i.renderToStaticMarkup)}),l.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=r,l.__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=i,e.exports=l},function(e,t,n){(function(t){"use strict";var r=n(6),i=n(7),a=n(72),o=n(46),s=n(29),l=n(19),u=n(51),c=n(55),h=n(147),d=n(92),p=n(148),f=n(26);a.inject();var m=l.measure("React","render",s.render),g={findDOMNode:d,render:m,unmountComponentAtNode:s.unmountComponentAtNode,version:h,unstable_batchedUpdates:c.batchedUpdates,unstable_renderSubtreeIntoContainer:p};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject&&__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({CurrentOwner:r,InstanceHandles:o,Mount:s,Reconciler:u,TextComponent:i}),"production"!==t.env.NODE_ENV){var v=n(10);if(v.canUseDOM&&window.top===window.self){"undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&(navigator.userAgent.indexOf("Chrome")>-1&&navigator.userAgent.indexOf("Edge")===-1||navigator.userAgent.indexOf("Firefox")>-1)&&console.debug("Download the React DevTools for a better development experience: https://fb.me/react-devtools");var y=document.documentMode&&document.documentMode<8;"production"!==t.env.NODE_ENV?f(!y,'Internet Explorer is running in compatibility mode; please add the following tag to your HTML to prevent this from happening: <meta http-equiv="X-UA-Compatible" content="IE=edge" />'):void 0;for(var w=[Array.isArray,Array.prototype.every,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.map,Date.now,Function.prototype.bind,Object.keys,String.prototype.split,String.prototype.trim,Object.create,Object.freeze],b=0;b<w.length;b++)if(!w[b]){console.error("One or more ES5 shim/shams expected by React are not available: https://fb.me/react-warning-polyfills");break}}}e.exports=g}).call(t,n(5))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function i(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function a(e){if(h===clearTimeout)return clearTimeout(e);if((h===r||!h)&&clearTimeout)return h=clearTimeout,clearTimeout(e);try{return h(e)}catch(t){try{return h.call(null,e)}catch(t){return h.call(this,e)}}}function o(){m&&p&&(m=!1,p.length?f=p.concat(f):g=-1,f.length&&s())}function s(){if(!m){var e=i(o);m=!0;for(var t=f.length;t;){for(p=f,f=[];++g<t;)p&&p[g].run();g=-1,t=f.length}p=null,m=!1,a(e)}}function l(e,t){this.fun=e,this.array=t}function u(){}var c,h,d=e.exports={};!function(){try{c="function"==typeof setTimeout?setTimeout:n}catch(e){c=n}try{h="function"==typeof clearTimeout?clearTimeout:r}catch(e){h=r}}();var p,f=[],m=!1,g=-1;d.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];f.push(new l(e,t)),1!==f.length||m||i(s)},l.prototype.run=function(){this.fun.apply(null,this.array)},d.title="browser",d.browser=!0,d.env={},d.argv=[],d.version="",d.versions={},d.on=u,d.addListener=u,d.once=u,d.off=u,d.removeListener=u,d.removeAllListeners=u,d.emit=u,d.binding=function(e){throw new Error("process.binding is not supported")},d.cwd=function(){return"/"},d.chdir=function(e){throw new Error("process.chdir is not supported")},d.umask=function(){return 0}},function(e,t){"use strict";var n={current:null};e.exports=n},function(e,t,n){(function(t){"use strict";var r=n(8),i=n(23),a=n(27),o=n(29),s=n(40),l=n(22),u=n(21),c=n(71),h=function(e){};s(h.prototype,{construct:function(e){this._currentElement=e,this._stringText=""+e,this._rootNodeID=null,this._mountIndex=0},mountComponent:function(e,n,r){if("production"!==t.env.NODE_ENV&&r[c.ancestorInfoContextKey]&&c("span",null,r[c.ancestorInfoContextKey]),this._rootNodeID=e,n.useCreateElement){var a=r[o.ownerDocumentContextKey],s=a.createElement("span");return i.setAttributeForID(s,e),o.getID(s),u(s,this._stringText),s}var h=l(this._stringText);return n.renderToStaticMarkup?h:"<span "+i.createMarkupForID(e)+">"+h+"</span>"},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var i=o.getNode(this._rootNodeID);r.updateTextContent(i,n)}}},unmountComponent:function(){a.unmountIDFromEnvironment(this._rootNodeID)}}),e.exports=h}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,t,n){var r=n>=e.childNodes.length?null:e.childNodes.item(n);e.insertBefore(t,r)}var i=n(9),a=n(17),o=n(19),s=n(20),l=n(21),u=n(14),c={dangerouslyReplaceNodeWithMarkup:i.dangerouslyReplaceNodeWithMarkup,updateTextContent:l,processUpdates:function(e,n){for(var o,c=null,h=null,d=0;d<e.length;d++)if(o=e[d],o.type===a.MOVE_EXISTING||o.type===a.REMOVE_NODE){var p=o.fromIndex,f=o.parentNode.childNodes[p],m=o.parentID;f?void 0:"production"!==t.env.NODE_ENV?u(!1,"processUpdates(): Unable to find child %s of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `%s`.",p,m):u(!1),c=c||{},c[m]=c[m]||[],c[m][p]=f,h=h||[],h.push(f)}var g;if(g=n.length&&"string"==typeof n[0]?i.dangerouslyRenderMarkup(n):n,h)for(var v=0;v<h.length;v++)h[v].parentNode.removeChild(h[v]);for(var y=0;y<e.length;y++)switch(o=e[y],o.type){case a.INSERT_MARKUP:r(o.parentNode,g[o.markupIndex],o.toIndex);break;case a.MOVE_EXISTING:r(o.parentNode,c[o.parentID][o.fromIndex],o.toIndex);break;case a.SET_MARKUP:s(o.parentNode,o.content);break;case a.TEXT_CONTENT:l(o.parentNode,o.content);break;case a.REMOVE_NODE:}}};o.measureMethods(c,"DOMChildrenOperations",{updateTextContent:"updateTextContent"}),e.exports=c}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e){return e.substring(1,e.indexOf(" "))}var i=n(10),a=n(11),o=n(16),s=n(15),l=n(14),u=/^(<[^ \/>]+)/,c="data-danger-index",h={dangerouslyRenderMarkup:function(e){i.canUseDOM?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering."):l(!1);for(var n,h={},d=0;d<e.length;d++)e[d]?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyRenderMarkup(...): Missing markup."):l(!1),n=r(e[d]),n=s(n)?n:"*",h[n]=h[n]||[],h[n][d]=e[d];var p=[],f=0;for(n in h)if(h.hasOwnProperty(n)){var m,g=h[n];for(m in g)if(g.hasOwnProperty(m)){var v=g[m];g[m]=v.replace(u,"$1 "+c+'="'+m+'" ')}for(var y=a(g.join(""),o),w=0;w<y.length;++w){var b=y[w];b.hasAttribute&&b.hasAttribute(c)?(m=+b.getAttribute(c),b.removeAttribute(c),p.hasOwnProperty(m)?"production"!==t.env.NODE_ENV?l(!1,"Danger: Assigning to an already-occupied result index."):l(!1):void 0,p[m]=b,f+=1):"production"!==t.env.NODE_ENV&&console.error("Danger: Discarding unexpected node:",b)}}return f!==p.length?"production"!==t.env.NODE_ENV?l(!1,"Danger: Did not assign to every index of resultList."):l(!1):void 0,p.length!==e.length?"production"!==t.env.NODE_ENV?l(!1,"Danger: Expected markup to render %s nodes, but rendered %s.",e.length,p.length):l(!1):void 0,p},dangerouslyReplaceNodeWithMarkup:function(e,n){i.canUseDOM?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering."):l(!1),n?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyReplaceNodeWithMarkup(...): Missing markup."):l(!1),"html"===e.tagName.toLowerCase()?"production"!==t.env.NODE_ENV?l(!1,"dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the <html> node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString()."):l(!1):void 0;var r;r="string"==typeof n?a(n,o)[0]:n,e.parentNode.replaceChild(r,e)}};e.exports=h}).call(t,n(5))},function(e,t){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),r={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=r},function(e,t,n){(function(t){"use strict";function r(e){var t=e.match(c);return t&&t[1].toLowerCase()}function i(e,n){var i=u;u?void 0:"production"!==t.env.NODE_ENV?l(!1,"createNodesFromMarkup dummy not initialized"):l(!1);var a=r(e),c=a&&s(a);if(c){i.innerHTML=c[1]+e+c[2];for(var h=c[0];h--;)i=i.lastChild}else i.innerHTML=e;var d=i.getElementsByTagName("script");d.length&&(n?void 0:"production"!==t.env.NODE_ENV?l(!1,"createNodesFromMarkup(...): Unexpected <script> element rendered."):l(!1),o(d).forEach(n));for(var p=o(i.childNodes);i.lastChild;)i.removeChild(i.lastChild);return p}var a=n(10),o=n(12),s=n(15),l=n(14),u=a.canUseDOM?document.createElement("div"):null,c=/^\s*<(\w+)/;e.exports=i}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"length"in e&&!("setInterval"in e)&&"number"!=typeof e.nodeType&&(Array.isArray(e)||"callee"in e||"item"in e)}function i(e){return r(e)?Array.isArray(e)?e.slice():a(e):[e]}var a=n(13);e.exports=i},function(e,t,n){(function(t){"use strict";function r(e){var n=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?"production"!==t.env.NODE_ENV?i(!1,"toArray: Array-like object expected"):i(!1):void 0,"number"!=typeof n?"production"!==t.env.NODE_ENV?i(!1,"toArray: Object needs a length property"):i(!1):void 0,0===n||n-1 in e?void 0:"production"!==t.env.NODE_ENV?i(!1,"toArray: Object should have keys for indices"):i(!1),e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(r){}for(var a=Array(n),o=0;o<n;o++)a[o]=e[o];return a}var i=n(14);e.exports=r}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function n(e,n,r,i,a,o,s,l){if("production"!==t.env.NODE_ENV&&void 0===n)throw new Error("invariant requires an error message argument");if(!e){var u;if(void 0===n)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,i,a,o,s,l],h=0;u=new Error(n.replace(/%s/g,function(){return c[h++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}e.exports=n}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e){return o?void 0:"production"!==t.env.NODE_ENV?a(!1,"Markup wrapping node not initialized"):a(!1),d.hasOwnProperty(e)||(e="*"),s.hasOwnProperty(e)||("*"===e?o.innerHTML="<link />":o.innerHTML="<"+e+"></"+e+">",s[e]=!o.firstChild),s[e]?d[e]:null}var i=n(10),a=n(14),o=i.canUseDOM?document.createElement("div"):null,s={},l=[1,'<select multiple="true">',"</select>"],u=[1,"<table>","</table>"],c=[3,"<table><tbody><tr>","</tr></tbody></table>"],h=[1,'<svg xmlns="http://www.w3.org/2000/svg">',"</svg>"],d={"*":[1,"?<div>","</div>"],area:[1,"<map>","</map>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],legend:[1,"<fieldset>","</fieldset>"],param:[1,"<object>","</object>"],tr:[2,"<table><tbody>","</tbody></table>"],optgroup:l,option:l,caption:u,colgroup:u,tbody:u,tfoot:u,thead:u,td:c,th:c},p=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];p.forEach(function(e){d[e]=h,s[e]=!0}),e.exports=r}).call(t,n(5))},function(e,t){"use strict";function n(e){return function(){return e}}function r(){}r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";var r=n(18),i=r({INSERT_MARKUP:null,MOVE_EXISTING:null,REMOVE_NODE:null,SET_MARKUP:null,TEXT_CONTENT:null});e.exports=i},function(e,t,n){(function(t){"use strict";var r=n(14),i=function(e){var n,i={};e instanceof Object&&!Array.isArray(e)?void 0:"production"!==t.env.NODE_ENV?r(!1,"keyMirror(...): Argument must be an object."):r(!1);for(n in e)e.hasOwnProperty(n)&&(i[n]=n);return i};e.exports=i}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function n(e,t,n){return n}var r={enableMeasure:!1,storedMeasure:n,measureMethods:function(e,n,i){if("production"!==t.env.NODE_ENV)for(var a in i)i.hasOwnProperty(a)&&(e[a]=r.measure(n,i[a],e[a]))},measure:function(e,n,i){if("production"!==t.env.NODE_ENV){var a=null,o=function(){return r.enableMeasure?(a||(a=r.storedMeasure(e,n,i)),a.apply(this,arguments)):i.apply(this,arguments)};return o.displayName=e+"_"+n,o}return i},injection:{injectMeasure:function(e){r.storedMeasure=e}}};e.exports=r}).call(t,n(5))},function(e,t,n){"use strict";var r=n(10),i=/^[ \r\n\t\f]/,a=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,o=function(e,t){e.innerHTML=t};if("undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction&&(o=function(e,t){MSApp.execUnsafeLocalFunction(function(){e.innerHTML=t})}),r.canUseDOM){var s=document.createElement("div");s.innerHTML=" ",""===s.innerHTML&&(o=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),i.test(t)||"<"===t[0]&&a.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t})}e.exports=o},function(e,t,n){"use strict";var r=n(10),i=n(22),a=n(20),o=function(e,t){e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(o=function(e,t){a(e,i(t))})),e.exports=o},function(e,t){"use strict";function n(e){return i[e]}function r(e){return(""+e).replace(a,n)}var i={"&":"&amp;",">":"&gt;","<":"&lt;",'"':"&quot;","'":"&#x27;"},a=/[&><"']/g;e.exports=r},function(e,t,n){(function(t){"use strict";function r(e){return!!h.hasOwnProperty(e)||!c.hasOwnProperty(e)&&(u.test(e)?(h[e]=!0,!0):(c[e]=!0,"production"!==t.env.NODE_ENV?l(!1,"Invalid attribute name: `%s`",e):void 0,!1))}function i(e,t){return null==t||e.hasBooleanValue&&!t||e.hasNumericValue&&isNaN(t)||e.hasPositiveNumericValue&&t<1||e.hasOverloadedBooleanValue&&t===!1}var a=n(24),o=n(19),s=n(25),l=n(26),u=/^[a-zA-Z_][\w\.\-]*$/,c={},h={};if("production"!==t.env.NODE_ENV)var d={children:!0,dangerouslySetInnerHTML:!0,key:!0,ref:!0},p={},f=function(e){if(!(d.hasOwnProperty(e)&&d[e]||p.hasOwnProperty(e)&&p[e])){p[e]=!0;var n=e.toLowerCase(),r=a.isCustomAttribute(n)?n:a.getPossibleStandardName.hasOwnProperty(n)?a.getPossibleStandardName[n]:null;"production"!==t.env.NODE_ENV?l(null==r,"Unknown DOM property %s. Did you mean %s?",e,r):void 0}};var m={createMarkupForID:function(e){return a.ID_ATTRIBUTE_NAME+"="+s(e)},setAttributeForID:function(e,t){e.setAttribute(a.ID_ATTRIBUTE_NAME,t)},createMarkupForProperty:function(e,n){var r=a.properties.hasOwnProperty(e)?a.properties[e]:null;if(r){if(i(r,n))return"";var o=r.attributeName;return r.hasBooleanValue||r.hasOverloadedBooleanValue&&n===!0?o+'=""':o+"="+s(n)}return a.isCustomAttribute(e)?null==n?"":e+"="+s(n):("production"!==t.env.NODE_ENV&&f(e),null)},createMarkupForCustomAttribute:function(e,t){return r(e)&&null!=t?e+"="+s(t):""},setValueForProperty:function(e,n,r){var o=a.properties.hasOwnProperty(n)?a.properties[n]:null;if(o){var s=o.mutationMethod;if(s)s(e,r);else if(i(o,r))this.deleteValueForProperty(e,n);else if(o.mustUseAttribute){var l=o.attributeName,u=o.attributeNamespace;u?e.setAttributeNS(u,l,""+r):o.hasBooleanValue||o.hasOverloadedBooleanValue&&r===!0?e.setAttribute(l,""):e.setAttribute(l,""+r)}else{var c=o.propertyName;o.hasSideEffects&&""+e[c]==""+r||(e[c]=r)}}else a.isCustomAttribute(n)?m.setValueForAttribute(e,n,r):"production"!==t.env.NODE_ENV&&f(n)},setValueForAttribute:function(e,t,n){r(t)&&(null==n?e.removeAttribute(t):e.setAttribute(t,""+n))},deleteValueForProperty:function(e,n){var r=a.properties.hasOwnProperty(n)?a.properties[n]:null;if(r){var i=r.mutationMethod;if(i)i(e,void 0);else if(r.mustUseAttribute)e.removeAttribute(r.attributeName);else{var o=r.propertyName,s=a.getDefaultValueForProperty(e.nodeName,o);r.hasSideEffects&&""+e[o]===s||(e[o]=s)}}else a.isCustomAttribute(n)?e.removeAttribute(n):"production"!==t.env.NODE_ENV&&f(n)}};o.measureMethods(m,"DOMPropertyOperations",{setValueForProperty:"setValueForProperty",setValueForAttribute:"setValueForAttribute",deleteValueForProperty:"deleteValueForProperty"}),e.exports=m}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,t){return(e&t)===t}var i=n(14),a={MUST_USE_ATTRIBUTE:1,MUST_USE_PROPERTY:2,HAS_SIDE_EFFECTS:4,HAS_BOOLEAN_VALUE:8,HAS_NUMERIC_VALUE:16,HAS_POSITIVE_NUMERIC_VALUE:48,HAS_OVERLOADED_BOOLEAN_VALUE:64,injectDOMPropertyConfig:function(e){var n=a,o=e.Properties||{},l=e.DOMAttributeNamespaces||{},u=e.DOMAttributeNames||{},c=e.DOMPropertyNames||{},h=e.DOMMutationMethods||{};e.isCustomAttribute&&s._isCustomAttributeFunctions.push(e.isCustomAttribute);for(var d in o){s.properties.hasOwnProperty(d)?"production"!==t.env.NODE_ENV?i(!1,"injectDOMPropertyConfig(...): You're trying to inject DOM property '%s' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.",d):i(!1):void 0;var p=d.toLowerCase(),f=o[d],m={attributeName:p,attributeNamespace:null,propertyName:d,mutationMethod:null,mustUseAttribute:r(f,n.MUST_USE_ATTRIBUTE),mustUseProperty:r(f,n.MUST_USE_PROPERTY),hasSideEffects:r(f,n.HAS_SIDE_EFFECTS),hasBooleanValue:r(f,n.HAS_BOOLEAN_VALUE),hasNumericValue:r(f,n.HAS_NUMERIC_VALUE),hasPositiveNumericValue:r(f,n.HAS_POSITIVE_NUMERIC_VALUE),hasOverloadedBooleanValue:r(f,n.HAS_OVERLOADED_BOOLEAN_VALUE)};if(m.mustUseAttribute&&m.mustUseProperty?"production"!==t.env.NODE_ENV?i(!1,"DOMProperty: Cannot require using both attribute and property: %s",d):i(!1):void 0,!m.mustUseProperty&&m.hasSideEffects?"production"!==t.env.NODE_ENV?i(!1,"DOMProperty: Properties that have side effects must use property: %s",d):i(!1):void 0,m.hasBooleanValue+m.hasNumericValue+m.hasOverloadedBooleanValue<=1?void 0:"production"!==t.env.NODE_ENV?i(!1,"DOMProperty: Value can be one of boolean, overloaded boolean, or numeric value, but not a combination: %s",d):i(!1),"production"!==t.env.NODE_ENV&&(s.getPossibleStandardName[p]=d),u.hasOwnProperty(d)){var g=u[d];m.attributeName=g,"production"!==t.env.NODE_ENV&&(s.getPossibleStandardName[g]=d)}l.hasOwnProperty(d)&&(m.attributeNamespace=l[d]),c.hasOwnProperty(d)&&(m.propertyName=c[d]),h.hasOwnProperty(d)&&(m.mutationMethod=h[d]),s.properties[d]=m}}},o={},s={ID_ATTRIBUTE_NAME:"data-reactid",properties:{},getPossibleStandardName:"production"!==t.env.NODE_ENV?{}:null,_isCustomAttributeFunctions:[],isCustomAttribute:function(e){for(var t=0;t<s._isCustomAttributeFunctions.length;t++){var n=s._isCustomAttributeFunctions[t];if(n(e))return!0}return!1},getDefaultValueForProperty:function(e,t){var n,r=o[e];return r||(o[e]=r={}),t in r||(n=document.createElement(e),r[t]=n[t]),r[t]},injection:a};e.exports=s}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return'"'+i(e)+'"'}var i=n(22);e.exports=r},function(e,t,n){(function(t){"use strict";var r=n(16),i=r;"production"!==t.env.NODE_ENV&&(i=function(e,t){for(var n=arguments.length,r=Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==t.indexOf("Failed Composite propType: ")&&!e){var a=0,o="Warning: "+t.replace(/%s/g,function(){return r[a++]});"undefined"!=typeof console&&console.error(o);try{throw new Error(o)}catch(s){}}}),e.exports=i}).call(t,n(5))},function(e,t,n){"use strict";var r=n(28),i=n(29),a={processChildrenUpdates:r.dangerouslyProcessChildrenUpdates,replaceNodeWithMarkupByID:r.dangerouslyReplaceNodeWithMarkupByID,unmountIDFromEnvironment:function(e){i.purgeID(e)}};e.exports=a},function(e,t,n){(function(t){"use strict";var r=n(8),i=n(23),a=n(29),o=n(19),s=n(14),l={dangerouslySetInnerHTML:"`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.",style:"`style` must be set using `updateStylesByID()`."},u={updatePropertyByID:function(e,n,r){var o=a.getNode(e);l.hasOwnProperty(n)?"production"!==t.env.NODE_ENV?s(!1,"updatePropertyByID(...): %s",l[n]):s(!1):void 0,null!=r?i.setValueForProperty(o,n,r):i.deleteValueForProperty(o,n)},dangerouslyReplaceNodeWithMarkupByID:function(e,t){var n=a.getNode(e);r.dangerouslyReplaceNodeWithMarkup(n,t)},dangerouslyProcessChildrenUpdates:function(e,t){for(var n=0;n<e.length;n++)e[n].parentNode=a.getNode(e[n].parentID);r.processUpdates(e,t)}};o.measureMethods(u,"ReactDOMIDOperations",{dangerouslyReplaceNodeWithMarkupByID:"dangerouslyReplaceNodeWithMarkupByID",dangerouslyProcessChildrenUpdates:"dangerouslyProcessChildrenUpdates"}),e.exports=u}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,t){for(var n=Math.min(e.length,t.length),r=0;r<n;r++)if(e.charAt(r)!==t.charAt(r))return r;return e.length===t.length?-1:n}function i(e){return e?e.nodeType===G?e.documentElement:e.firstChild:null}function a(e){var t=i(e);return t&&ee.getID(t)}function o(e){var n=s(e);if(n)if(U.hasOwnProperty(n)){var r=U[n];r!==e&&(h(r,n)?"production"!==t.env.NODE_ENV?B(!1,"ReactMount: Two valid but unequal nodes with the same `%s`: %s",q,n):B(!1):void 0,U[n]=e)}else U[n]=e;return n}function s(e){return e&&e.getAttribute&&e.getAttribute(q)||""}function l(e,t){var n=s(e);n!==t&&delete U[n],e.setAttribute(q,t),U[t]=e}function u(e){return U.hasOwnProperty(e)&&h(U[e],e)||(U[e]=ee.findReactNodeByID(e)),U[e]}function c(e){var t=S.get(e)._rootNodeID;return k.isNullComponentID(t)?null:(U.hasOwnProperty(t)&&h(U[t],t)||(U[t]=ee.findReactNodeByID(t)),U[t])}function h(e,n){if(e){s(e)!==n?"production"!==t.env.NODE_ENV?B(!1,"ReactMount: Unexpected modification of `%s`",q):B(!1):void 0;var r=ee.findReactContainerForID(n);if(r&&L(r,e))return!0}return!1}function d(e){delete U[e]}function p(e){var t=U[e];return!(!t||!h(t,e))&&void(J=t)}function f(e){J=null,N.traverseAncestors(e,p);var t=J;return J=null,t}function m(e,n,r,i,a,o){if(E.useCreateElement&&(o=I({},o),r.nodeType===G?o[X]=r:o[X]=r.ownerDocument),"production"!==t.env.NODE_ENV){o===R&&(o={});var s=r.nodeName.toLowerCase();o[j.ancestorInfoContextKey]=j.updatedAncestorInfo(null,s,null)}var l=O.mountComponent(e,n,i,o);e._renderedComponent._topLevelWrapper=e,ee._mountImageIntoNode(l,r,a,i)}function g(e,t,n,r,i){var a=M.ReactReconcileTransaction.getPooled(r);a.perform(m,null,e,t,n,a,r,i),M.ReactReconcileTransaction.release(a)}function v(e,t){for(O.unmountComponent(e),t.nodeType===G&&(t=t.documentElement);t.lastChild;)t.removeChild(t.lastChild)}function y(e){var t=a(e);return!!t&&t!==N.getReactRootIDFromNodeID(t)}function w(e){for(;e&&e.parentNode!==e;e=e.parentNode)if(1===e.nodeType){var t=s(e);if(t){var n,r=N.getReactRootIDFromNodeID(t),i=e;do if(n=s(i),i=i.parentNode,null==i)return null;while(n!==r);if(i===Y[r])return e}}return null}var b=n(24),_=n(30),x=n(6),E=n(42),C=n(43),k=n(45),N=n(46),S=n(48),P=n(49),D=n(19),O=n(51),T=n(54),M=n(55),I=n(40),R=n(59),L=n(60),A=n(63),B=n(14),z=n(20),V=n(68),j=n(71),F=n(26),q=b.ID_ATTRIBUTE_NAME,U={},W=1,G=9,H=11,X="__ReactMount_ownerDocument$"+Math.random().toString(36).slice(2),K={},Y={};if("production"!==t.env.NODE_ENV)var Q={};var Z=[],J=null,$=function(){};$.prototype.isReactComponent={},"production"!==t.env.NODE_ENV&&($.displayName="TopLevelWrapper"),$.prototype.render=function(){return this.props};var ee={TopLevelWrapper:$,_instancesByReactRootID:K,scrollMonitor:function(e,t){t()},_updateRootComponent:function(e,n,r,o){return ee.scrollMonitor(r,function(){T.enqueueElementInternal(e,n),o&&T.enqueueCallbackInternal(e,o)}),"production"!==t.env.NODE_ENV&&(Q[a(r)]=i(r)),e},_registerComponent:function(e,n){!n||n.nodeType!==W&&n.nodeType!==G&&n.nodeType!==H?"production"!==t.env.NODE_ENV?B(!1,"_registerComponent(...): Target container is not a DOM element."):B(!1):void 0,_.ensureScrollValueMonitoring();var r=ee.registerContainer(n);return K[r]=e,r},_renderNewRootComponent:function(e,n,r,a){"production"!==t.env.NODE_ENV?F(null==x.current,"_renderNewRootComponent(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of %s.",x.current&&x.current.getName()||"ReactCompositeComponent"):void 0;var o=A(e,null),s=ee._registerComponent(o,n);return M.batchedUpdates(g,o,s,n,r,a),"production"!==t.env.NODE_ENV&&(Q[s]=i(n)),o},renderSubtreeIntoContainer:function(e,n,r,i){return null==e||null==e._reactInternalInstance?"production"!==t.env.NODE_ENV?B(!1,"parentComponent must be a valid React Component"):B(!1):void 0,ee._renderSubtreeIntoContainer(e,n,r,i)},_renderSubtreeIntoContainer:function(e,n,r,o){C.isValidElement(n)?void 0:"production"!==t.env.NODE_ENV?B(!1,"ReactDOM.render(): Invalid component element.%s","string"==typeof n?" Instead of passing an element string, make sure to instantiate it by passing it to React.createElement.":"function"==typeof n?" Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.":null!=n&&void 0!==n.props?" This may be caused by unintentionally loading two independent copies of React.":""):B(!1),"production"!==t.env.NODE_ENV?F(!r||!r.tagName||"BODY"!==r.tagName.toUpperCase(),"render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app."):void 0;var l=new C($,null,null,null,null,null,n),u=K[a(r)];if(u){var c=u._currentElement,h=c.props;if(V(h,n)){var d=u._renderedComponent.getPublicInstance(),p=o&&function(){o.call(d)};return ee._updateRootComponent(u,l,r,p),d}ee.unmountComponentAtNode(r)}var f=i(r),m=f&&!!s(f),g=y(r);if("production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(!g,"render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render."):void 0,!m||f.nextSibling))for(var v=f;v;){if(s(v)){"production"!==t.env.NODE_ENV?F(!1,"render(): Target node has markup rendered by React, but there are unrelated nodes as well. This is most commonly caused by white-space inserted around server-rendered markup."):void 0;break}v=v.nextSibling}var w=m&&!u&&!g,b=ee._renderNewRootComponent(l,r,w,null!=e?e._reactInternalInstance._processChildContext(e._reactInternalInstance._context):R)._renderedComponent.getPublicInstance();return o&&o.call(b),b},render:function(e,t,n){return ee._renderSubtreeIntoContainer(null,e,t,n)},registerContainer:function(e){var t=a(e);return t&&(t=N.getReactRootIDFromNodeID(t)),t||(t=N.createReactRootID()),Y[t]=e,t},unmountComponentAtNode:function(e){"production"!==t.env.NODE_ENV?F(null==x.current,"unmountComponentAtNode(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of %s.",x.current&&x.current.getName()||"ReactCompositeComponent"):void 0,!e||e.nodeType!==W&&e.nodeType!==G&&e.nodeType!==H?"production"!==t.env.NODE_ENV?B(!1,"unmountComponentAtNode(...): Target container is not a DOM element."):B(!1):void 0;var n=a(e),r=K[n];if(!r){var i=y(e),o=s(e),l=o&&o===N.getReactRootIDFromNodeID(o);return"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(!i,"unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s",l?"You may have accidentally passed in a React root node instead of its container.":"Instead, have the parent component update its state and rerender in order to remove this component."):void 0),!1}return M.batchedUpdates(v,r,e),delete K[n],delete Y[n],"production"!==t.env.NODE_ENV&&delete Q[n],!0},findReactContainerForID:function(e){var n=N.getReactRootIDFromNodeID(e),r=Y[n];if("production"!==t.env.NODE_ENV){var i=Q[n];if(i&&i.parentNode!==r){"production"!==t.env.NODE_ENV?F(s(i)===n,"ReactMount: Root element ID differed from reactRootID."):void 0;var a=r.firstChild;a&&n===s(a)?Q[n]=a:"production"!==t.env.NODE_ENV?F(!1,"ReactMount: Root element has been removed from its original container. New container: %s",i.parentNode):void 0}}return r},findReactNodeByID:function(e){var t=ee.findReactContainerForID(e);return ee.findComponentRoot(t,e)},getFirstReactDOM:function(e){return w(e)},findComponentRoot:function(e,n){var r=Z,i=0,a=f(n)||e;for("production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(null!=a,"React can't find the root component node for data-reactid value `%s`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.",n):void 0),r[0]=a.firstChild,r.length=1;i<r.length;){for(var o,s=r[i++];s;){var l=ee.getID(s);l?n===l?o=s:N.isAncestorIDOf(l,n)&&(r.length=i=0,r.push(s.firstChild)):r.push(s.firstChild),s=s.nextSibling}if(o)return r.length=0,o}r.length=0,"production"!==t.env.NODE_ENV?B(!1,"findComponentRoot(..., %s): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `%s`.",n,ee.getID(e)):B(!1)},_mountImageIntoNode:function(e,n,a,o){if(!n||n.nodeType!==W&&n.nodeType!==G&&n.nodeType!==H?"production"!==t.env.NODE_ENV?B(!1,"mountComponentIntoNode(...): Target container is not valid."):B(!1):void 0,a){var s=i(n);if(P.canReuseMarkup(e,s))return;var l=s.getAttribute(P.CHECKSUM_ATTR_NAME);s.removeAttribute(P.CHECKSUM_ATTR_NAME);var u=s.outerHTML;s.setAttribute(P.CHECKSUM_ATTR_NAME,l);var c=e;if("production"!==t.env.NODE_ENV){var h;n.nodeType===W?(h=document.createElement("div"),h.innerHTML=e,c=h.innerHTML):(h=document.createElement("iframe"),document.body.appendChild(h),h.contentDocument.write(e),c=h.contentDocument.documentElement.outerHTML,document.body.removeChild(h))}var d=r(c,u),p=" (client) "+c.substring(d-20,d+20)+"\n (server) "+u.substring(d-20,d+20);n.nodeType===G?"production"!==t.env.NODE_ENV?B(!1,"You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s",p):B(!1):void 0,
-"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(!1,"React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:\n%s",p):void 0)}if(n.nodeType===G?"production"!==t.env.NODE_ENV?B(!1,"You're trying to render a component to the document but you didn't use server rendering. We can't do this without using server rendering due to cross-browser quirks. See ReactDOMServer.renderToString() for server rendering."):B(!1):void 0,o.useCreateElement){for(;n.lastChild;)n.removeChild(n.lastChild);n.appendChild(e)}else z(n,e)},ownerDocumentContextKey:X,getReactRootID:a,getID:o,setID:l,getNode:u,getNodeFromInstance:c,isValid:h,purgeID:d};D.measureMethods(ee,"ReactMount",{_renderNewRootComponent:"_renderNewRootComponent",_mountImageIntoNode:"_mountImageIntoNode"}),e.exports=ee}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return Object.prototype.hasOwnProperty.call(e,g)||(e[g]=f++,d[e[g]]={}),d[e[g]]}var i=n(31),a=n(32),o=n(33),s=n(38),l=n(19),u=n(39),c=n(40),h=n(41),d={},p=!1,f=0,m={topAbort:"abort",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},g="_reactListenersID"+String(Math.random()).slice(2),v=c({},s,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(v.handleTopLevel),v.ReactEventListener=e}},setEnabled:function(e){v.ReactEventListener&&v.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!v.ReactEventListener||!v.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,a=r(n),s=o.registrationNameDependencies[e],l=i.topLevelTypes,u=0;u<s.length;u++){var c=s[u];a.hasOwnProperty(c)&&a[c]||(c===l.topWheel?h("wheel")?v.ReactEventListener.trapBubbledEvent(l.topWheel,"wheel",n):h("mousewheel")?v.ReactEventListener.trapBubbledEvent(l.topWheel,"mousewheel",n):v.ReactEventListener.trapBubbledEvent(l.topWheel,"DOMMouseScroll",n):c===l.topScroll?h("scroll",!0)?v.ReactEventListener.trapCapturedEvent(l.topScroll,"scroll",n):v.ReactEventListener.trapBubbledEvent(l.topScroll,"scroll",v.ReactEventListener.WINDOW_HANDLE):c===l.topFocus||c===l.topBlur?(h("focus",!0)?(v.ReactEventListener.trapCapturedEvent(l.topFocus,"focus",n),v.ReactEventListener.trapCapturedEvent(l.topBlur,"blur",n)):h("focusin")&&(v.ReactEventListener.trapBubbledEvent(l.topFocus,"focusin",n),v.ReactEventListener.trapBubbledEvent(l.topBlur,"focusout",n)),a[l.topBlur]=!0,a[l.topFocus]=!0):m.hasOwnProperty(c)&&v.ReactEventListener.trapBubbledEvent(c,m[c],n),a[c]=!0)}},trapBubbledEvent:function(e,t,n){return v.ReactEventListener.trapBubbledEvent(e,t,n)},trapCapturedEvent:function(e,t,n){return v.ReactEventListener.trapCapturedEvent(e,t,n)},ensureScrollValueMonitoring:function(){if(!p){var e=u.refreshScrollValues;v.ReactEventListener.monitorScrollValue(e),p=!0}},eventNameDispatchConfigs:a.eventNameDispatchConfigs,registrationNameModules:a.registrationNameModules,putListener:a.putListener,getListener:a.getListener,deleteListener:a.deleteListener,deleteAllListeners:a.deleteAllListeners});l.measureMethods(v,"ReactBrowserEventEmitter",{putListener:"putListener",deleteListener:"deleteListener"}),e.exports=v},function(e,t,n){"use strict";var r=n(18),i=r({bubbled:null,captured:null}),a=r({topAbort:null,topBlur:null,topCanPlay:null,topCanPlayThrough:null,topChange:null,topClick:null,topCompositionEnd:null,topCompositionStart:null,topCompositionUpdate:null,topContextMenu:null,topCopy:null,topCut:null,topDoubleClick:null,topDrag:null,topDragEnd:null,topDragEnter:null,topDragExit:null,topDragLeave:null,topDragOver:null,topDragStart:null,topDrop:null,topDurationChange:null,topEmptied:null,topEncrypted:null,topEnded:null,topError:null,topFocus:null,topInput:null,topKeyDown:null,topKeyPress:null,topKeyUp:null,topLoad:null,topLoadedData:null,topLoadedMetadata:null,topLoadStart:null,topMouseDown:null,topMouseMove:null,topMouseOut:null,topMouseOver:null,topMouseUp:null,topPaste:null,topPause:null,topPlay:null,topPlaying:null,topProgress:null,topRateChange:null,topReset:null,topScroll:null,topSeeked:null,topSeeking:null,topSelectionChange:null,topStalled:null,topSubmit:null,topSuspend:null,topTextInput:null,topTimeUpdate:null,topTouchCancel:null,topTouchEnd:null,topTouchMove:null,topTouchStart:null,topVolumeChange:null,topWaiting:null,topWheel:null}),o={topLevelTypes:a,PropagationPhases:i};e.exports=o},function(e,t,n){(function(t){"use strict";function r(){var e=g&&g.traverseTwoPhase&&g.traverseEnterLeave;"production"!==t.env.NODE_ENV?c(e,"InstanceHandle not injected before use!"):void 0}var i=n(33),a=n(34),o=n(35),s=n(36),l=n(37),u=n(14),c=n(26),h={},d=null,p=function(e,t){e&&(a.executeDispatchesInOrder(e,t),e.isPersistent()||e.constructor.release(e))},f=function(e){return p(e,!0)},m=function(e){return p(e,!1)},g=null,v={injection:{injectMount:a.injection.injectMount,injectInstanceHandle:function(e){g=e,"production"!==t.env.NODE_ENV&&r()},getInstanceHandle:function(){return"production"!==t.env.NODE_ENV&&r(),g},injectEventPluginOrder:i.injectEventPluginOrder,injectEventPluginsByName:i.injectEventPluginsByName},eventNameDispatchConfigs:i.eventNameDispatchConfigs,registrationNameModules:i.registrationNameModules,putListener:function(e,n,r){"function"!=typeof r?"production"!==t.env.NODE_ENV?u(!1,"Expected %s listener to be a function, instead got type %s",n,typeof r):u(!1):void 0;var a=h[n]||(h[n]={});a[e]=r;var o=i.registrationNameModules[n];o&&o.didPutListener&&o.didPutListener(e,n,r)},getListener:function(e,t){var n=h[t];return n&&n[e]},deleteListener:function(e,t){var n=i.registrationNameModules[t];n&&n.willDeleteListener&&n.willDeleteListener(e,t);var r=h[t];r&&delete r[e]},deleteAllListeners:function(e){for(var t in h)if(h[t][e]){var n=i.registrationNameModules[t];n&&n.willDeleteListener&&n.willDeleteListener(e,t),delete h[t][e]}},extractEvents:function(e,t,n,r,a){for(var o,l=i.plugins,u=0;u<l.length;u++){var c=l[u];if(c){var h=c.extractEvents(e,t,n,r,a);h&&(o=s(o,h))}}return o},enqueueEvents:function(e){e&&(d=s(d,e))},processEventQueue:function(e){var n=d;d=null,e?l(n,f):l(n,m),d?"production"!==t.env.NODE_ENV?u(!1,"processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented."):u(!1):void 0,o.rethrowCaughtError()},__purge:function(){h={}},__getListenerBank:function(){return h}};e.exports=v}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(){if(s)for(var e in l){var n=l[e],r=s.indexOf(e);if(r>-1?void 0:"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.",e):o(!1),!u.plugins[r]){n.extractEvents?void 0:"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.",e):o(!1),u.plugins[r]=n;var a=n.eventTypes;for(var c in a)i(a[c],n,c)?void 0:"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.",c,e):o(!1)}}}function i(e,n,r){u.eventNameDispatchConfigs.hasOwnProperty(r)?"production"!==t.env.NODE_ENV?o(!1,"EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.",r):o(!1):void 0,u.eventNameDispatchConfigs[r]=e;var i=e.phasedRegistrationNames;if(i){for(var s in i)if(i.hasOwnProperty(s)){var l=i[s];a(l,n,r)}return!0}return!!e.registrationName&&(a(e.registrationName,n,r),!0)}function a(e,n,r){u.registrationNameModules[e]?"production"!==t.env.NODE_ENV?o(!1,"EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.",e):o(!1):void 0,u.registrationNameModules[e]=n,u.registrationNameDependencies[e]=n.eventTypes[r].dependencies}var o=n(14),s=null,l={},u={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},injectEventPluginOrder:function(e){s?"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React."):o(!1):void 0,s=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var n=!1;for(var i in e)if(e.hasOwnProperty(i)){var a=e[i];l.hasOwnProperty(i)&&l[i]===a||(l[i]?"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.",i):o(!1):void 0,l[i]=a,n=!0)}n&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return u.registrationNameModules[t.registrationName]||null;for(var n in t.phasedRegistrationNames)if(t.phasedRegistrationNames.hasOwnProperty(n)){var r=u.registrationNameModules[t.phasedRegistrationNames[n]];if(r)return r}return null},_resetEventPlugins:function(){s=null;for(var e in l)l.hasOwnProperty(e)&&delete l[e];u.plugins.length=0;var t=u.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=u.registrationNameModules;for(var i in r)r.hasOwnProperty(i)&&delete r[i]}};e.exports=u}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e){return e===y.topMouseUp||e===y.topTouchEnd||e===y.topTouchCancel}function i(e){return e===y.topMouseMove||e===y.topTouchMove}function a(e){return e===y.topMouseDown||e===y.topTouchStart}function o(e,t,n,r){var i=e.type||"unknown-event";e.currentTarget=v.Mount.getNode(r),t?f.invokeGuardedCallbackWithCatch(i,n,e,r):f.invokeGuardedCallback(i,n,e,r),e.currentTarget=null}function s(e,n){var r=e._dispatchListeners,i=e._dispatchIDs;if("production"!==t.env.NODE_ENV&&d(e),Array.isArray(r))for(var a=0;a<r.length&&!e.isPropagationStopped();a++)o(e,n,r[a],i[a]);else r&&o(e,n,r,i);e._dispatchListeners=null,e._dispatchIDs=null}function l(e){var n=e._dispatchListeners,r=e._dispatchIDs;if("production"!==t.env.NODE_ENV&&d(e),Array.isArray(n)){for(var i=0;i<n.length&&!e.isPropagationStopped();i++)if(n[i](e,r[i]))return r[i]}else if(n&&n(e,r))return r;return null}function u(e){var t=l(e);return e._dispatchIDs=null,e._dispatchListeners=null,t}function c(e){"production"!==t.env.NODE_ENV&&d(e);var n=e._dispatchListeners,r=e._dispatchIDs;Array.isArray(n)?"production"!==t.env.NODE_ENV?m(!1,"executeDirectDispatch(...): Invalid `event`."):m(!1):void 0;var i=n?n(e,r):null;return e._dispatchListeners=null,e._dispatchIDs=null,i}function h(e){return!!e._dispatchListeners}var d,p=n(31),f=n(35),m=n(14),g=n(26),v={Mount:null,injectMount:function(e){v.Mount=e,"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?g(e&&e.getNode&&e.getID,"EventPluginUtils.injection.injectMount(...): Injected Mount module is missing getNode or getID."):void 0)}},y=p.topLevelTypes;"production"!==t.env.NODE_ENV&&(d=function(e){var n=e._dispatchListeners,r=e._dispatchIDs,i=Array.isArray(n),a=Array.isArray(r),o=a?r.length:r?1:0,s=i?n.length:n?1:0;"production"!==t.env.NODE_ENV?g(a===i&&o===s,"EventPluginUtils: Invalid `event`."):void 0});var w={isEndish:r,isMoveish:i,isStartish:a,executeDirectDispatch:c,executeDispatchesInOrder:s,executeDispatchesInOrderStopAtTrue:u,hasDispatches:h,getNode:function(e){return v.Mount.getNode(e)},getID:function(e){return v.Mount.getID(e)},injection:v};e.exports=w}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function n(e,t,n,i){try{return t(n,i)}catch(a){return void(null===r&&(r=a))}}var r=null,i={invokeGuardedCallback:n,invokeGuardedCallbackWithCatch:n,rethrowCaughtError:function(){if(r){var e=r;throw r=null,e}}};if("production"!==t.env.NODE_ENV&&"undefined"!=typeof window&&"function"==typeof window.dispatchEvent&&"undefined"!=typeof document&&"function"==typeof document.createEvent){var a=document.createElement("react");i.invokeGuardedCallback=function(e,t,n,r){var i=t.bind(null,n,r),o="react-"+e;a.addEventListener(o,i,!1);var s=document.createEvent("Event");s.initEvent(o,!1,!1),a.dispatchEvent(s),a.removeEventListener(o,i,!1)}}e.exports=i}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,n){if(null==n?"production"!==t.env.NODE_ENV?i(!1,"accumulateInto(...): Accumulated items must not be null or undefined."):i(!1):void 0,null==e)return n;var r=Array.isArray(e),a=Array.isArray(n);return r&&a?(e.push.apply(e,n),e):r?(e.push(n),e):a?[e].concat(n):[e,n]}var i=n(14);e.exports=r}).call(t,n(5))},function(e,t){"use strict";var n=function(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)};e.exports=n},function(e,t,n){"use strict";function r(e){i.enqueueEvents(e),i.processEventQueue(!1)}var i=n(32),a={handleTopLevel:function(e,t,n,a,o){var s=i.extractEvents(e,t,n,a,o);r(s)}};e.exports=a},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t){"use strict";function n(e,t){if(null==e)throw new TypeError("Object.assign target cannot be null or undefined");for(var n=Object(e),r=Object.prototype.hasOwnProperty,i=1;i<arguments.length;i++){var a=arguments[i];if(null!=a){var o=Object(a);for(var s in o)r.call(o,s)&&(n[s]=o[s])}}return n}e.exports=n},function(e,t,n){"use strict";/**
+!function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(){var e=document.createElement("script");e.src="https://localize-bezierinfo.herokuapp.com/static/js/jquery-1.11.1.min.js",document.head.appendChild(e);var t=document.createElement("script");t.src="https://localize-bezierinfo.herokuapp.com/pontoon.js",document.head.appendChild(t)}var i=n(2),a=n(159),o=n(160);a.render(i.createElement(o,null),document.getElementById("article"),r)},function(e,t,n){"use strict";e.exports=n(3)},function(e,t,n){"use strict";var r=n(4),i=n(149),a=n(153),o=n(40),s=n(158),l={};o(l,a),o(l,{findDOMNode:s("findDOMNode","ReactDOM","react-dom",r,r.findDOMNode),render:s("render","ReactDOM","react-dom",r,r.render),unmountComponentAtNode:s("unmountComponentAtNode","ReactDOM","react-dom",r,r.unmountComponentAtNode),renderToString:s("renderToString","ReactDOMServer","react-dom/server",i,i.renderToString),renderToStaticMarkup:s("renderToStaticMarkup","ReactDOMServer","react-dom/server",i,i.renderToStaticMarkup)}),l.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=r,l.__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=i,e.exports=l},function(e,t,n){(function(t){"use strict";var r=n(6),i=n(7),a=n(72),o=n(46),s=n(29),l=n(19),u=n(51),c=n(55),h=n(147),d=n(92),p=n(148),f=n(26);a.inject();var m=l.measure("React","render",s.render),g={findDOMNode:d,render:m,unmountComponentAtNode:s.unmountComponentAtNode,version:h,unstable_batchedUpdates:c.batchedUpdates,unstable_renderSubtreeIntoContainer:p};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject&&__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({CurrentOwner:r,InstanceHandles:o,Mount:s,Reconciler:u,TextComponent:i}),"production"!==t.env.NODE_ENV){var v=n(10);if(v.canUseDOM&&window.top===window.self){"undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&(navigator.userAgent.indexOf("Chrome")>-1&&navigator.userAgent.indexOf("Edge")===-1||navigator.userAgent.indexOf("Firefox")>-1)&&console.debug("Download the React DevTools for a better development experience: https://fb.me/react-devtools");var y=document.documentMode&&document.documentMode<8;"production"!==t.env.NODE_ENV?f(!y,'Internet Explorer is running in compatibility mode; please add the following tag to your HTML to prevent this from happening: <meta http-equiv="X-UA-Compatible" content="IE=edge" />'):void 0;for(var w=[Array.isArray,Array.prototype.every,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.map,Date.now,Function.prototype.bind,Object.keys,String.prototype.split,String.prototype.trim,Object.create,Object.freeze],b=0;b<w.length;b++)if(!w[b]){console.error("One or more ES5 shim/shams expected by React are not available: https://fb.me/react-warning-polyfills");break}}}e.exports=g}).call(t,n(5))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function i(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function a(e){if(h===clearTimeout)return clearTimeout(e);if((h===r||!h)&&clearTimeout)return h=clearTimeout,clearTimeout(e);try{return h(e)}catch(t){try{return h.call(null,e)}catch(t){return h.call(this,e)}}}function o(){m&&p&&(m=!1,p.length?f=p.concat(f):g=-1,f.length&&s())}function s(){if(!m){var e=i(o);m=!0;for(var t=f.length;t;){for(p=f,f=[];++g<t;)p&&p[g].run();g=-1,t=f.length}p=null,m=!1,a(e)}}function l(e,t){this.fun=e,this.array=t}function u(){}var c,h,d=e.exports={};!function(){try{c="function"==typeof setTimeout?setTimeout:n}catch(e){c=n}try{h="function"==typeof clearTimeout?clearTimeout:r}catch(e){h=r}}();var p,f=[],m=!1,g=-1;d.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];f.push(new l(e,t)),1!==f.length||m||i(s)},l.prototype.run=function(){this.fun.apply(null,this.array)},d.title="browser",d.browser=!0,d.env={},d.argv=[],d.version="",d.versions={},d.on=u,d.addListener=u,d.once=u,d.off=u,d.removeListener=u,d.removeAllListeners=u,d.emit=u,d.binding=function(e){throw new Error("process.binding is not supported")},d.cwd=function(){return"/"},d.chdir=function(e){throw new Error("process.chdir is not supported")},d.umask=function(){return 0}},function(e,t){"use strict";var n={current:null};e.exports=n},function(e,t,n){(function(t){"use strict";var r=n(8),i=n(23),a=n(27),o=n(29),s=n(40),l=n(22),u=n(21),c=n(71),h=function(e){};s(h.prototype,{construct:function(e){this._currentElement=e,this._stringText=""+e,this._rootNodeID=null,this._mountIndex=0},mountComponent:function(e,n,r){if("production"!==t.env.NODE_ENV&&r[c.ancestorInfoContextKey]&&c("span",null,r[c.ancestorInfoContextKey]),this._rootNodeID=e,n.useCreateElement){var a=r[o.ownerDocumentContextKey],s=a.createElement("span");return i.setAttributeForID(s,e),o.getID(s),u(s,this._stringText),s}var h=l(this._stringText);return n.renderToStaticMarkup?h:"<span "+i.createMarkupForID(e)+">"+h+"</span>"},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var i=o.getNode(this._rootNodeID);r.updateTextContent(i,n)}}},unmountComponent:function(){a.unmountIDFromEnvironment(this._rootNodeID)}}),e.exports=h}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,t,n){var r=n>=e.childNodes.length?null:e.childNodes.item(n);e.insertBefore(t,r)}var i=n(9),a=n(17),o=n(19),s=n(20),l=n(21),u=n(14),c={dangerouslyReplaceNodeWithMarkup:i.dangerouslyReplaceNodeWithMarkup,updateTextContent:l,processUpdates:function(e,n){for(var o,c=null,h=null,d=0;d<e.length;d++)if(o=e[d],o.type===a.MOVE_EXISTING||o.type===a.REMOVE_NODE){var p=o.fromIndex,f=o.parentNode.childNodes[p],m=o.parentID;f?void 0:"production"!==t.env.NODE_ENV?u(!1,"processUpdates(): Unable to find child %s of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `%s`.",p,m):u(!1),c=c||{},c[m]=c[m]||[],c[m][p]=f,h=h||[],h.push(f)}var g;if(g=n.length&&"string"==typeof n[0]?i.dangerouslyRenderMarkup(n):n,h)for(var v=0;v<h.length;v++)h[v].parentNode.removeChild(h[v]);for(var y=0;y<e.length;y++)switch(o=e[y],o.type){case a.INSERT_MARKUP:r(o.parentNode,g[o.markupIndex],o.toIndex);break;case a.MOVE_EXISTING:r(o.parentNode,c[o.parentID][o.fromIndex],o.toIndex);break;case a.SET_MARKUP:s(o.parentNode,o.content);break;case a.TEXT_CONTENT:l(o.parentNode,o.content);break;case a.REMOVE_NODE:}}};o.measureMethods(c,"DOMChildrenOperations",{updateTextContent:"updateTextContent"}),e.exports=c}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e){return e.substring(1,e.indexOf(" "))}var i=n(10),a=n(11),o=n(16),s=n(15),l=n(14),u=/^(<[^ \/>]+)/,c="data-danger-index",h={dangerouslyRenderMarkup:function(e){i.canUseDOM?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering."):l(!1);for(var n,h={},d=0;d<e.length;d++)e[d]?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyRenderMarkup(...): Missing markup."):l(!1),n=r(e[d]),n=s(n)?n:"*",h[n]=h[n]||[],h[n][d]=e[d];var p=[],f=0;for(n in h)if(h.hasOwnProperty(n)){var m,g=h[n];for(m in g)if(g.hasOwnProperty(m)){var v=g[m];g[m]=v.replace(u,"$1 "+c+'="'+m+'" ')}for(var y=a(g.join(""),o),w=0;w<y.length;++w){var b=y[w];b.hasAttribute&&b.hasAttribute(c)?(m=+b.getAttribute(c),b.removeAttribute(c),p.hasOwnProperty(m)?"production"!==t.env.NODE_ENV?l(!1,"Danger: Assigning to an already-occupied result index."):l(!1):void 0,p[m]=b,f+=1):"production"!==t.env.NODE_ENV&&console.error("Danger: Discarding unexpected node:",b)}}return f!==p.length?"production"!==t.env.NODE_ENV?l(!1,"Danger: Did not assign to every index of resultList."):l(!1):void 0,p.length!==e.length?"production"!==t.env.NODE_ENV?l(!1,"Danger: Expected markup to render %s nodes, but rendered %s.",e.length,p.length):l(!1):void 0,p},dangerouslyReplaceNodeWithMarkup:function(e,n){i.canUseDOM?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering."):l(!1),n?void 0:"production"!==t.env.NODE_ENV?l(!1,"dangerouslyReplaceNodeWithMarkup(...): Missing markup."):l(!1),"html"===e.tagName.toLowerCase()?"production"!==t.env.NODE_ENV?l(!1,"dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the <html> node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString()."):l(!1):void 0;var r;r="string"==typeof n?a(n,o)[0]:n,e.parentNode.replaceChild(r,e)}};e.exports=h}).call(t,n(5))},function(e,t){"use strict";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),r={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};e.exports=r},function(e,t,n){(function(t){"use strict";function r(e){var t=e.match(c);return t&&t[1].toLowerCase()}function i(e,n){var i=u;u?void 0:"production"!==t.env.NODE_ENV?l(!1,"createNodesFromMarkup dummy not initialized"):l(!1);var a=r(e),c=a&&s(a);if(c){i.innerHTML=c[1]+e+c[2];for(var h=c[0];h--;)i=i.lastChild}else i.innerHTML=e;var d=i.getElementsByTagName("script");d.length&&(n?void 0:"production"!==t.env.NODE_ENV?l(!1,"createNodesFromMarkup(...): Unexpected <script> element rendered."):l(!1),o(d).forEach(n));for(var p=o(i.childNodes);i.lastChild;)i.removeChild(i.lastChild);return p}var a=n(10),o=n(12),s=n(15),l=n(14),u=a.canUseDOM?document.createElement("div"):null,c=/^\s*<(\w+)/;e.exports=i}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"length"in e&&!("setInterval"in e)&&"number"!=typeof e.nodeType&&(Array.isArray(e)||"callee"in e||"item"in e)}function i(e){return r(e)?Array.isArray(e)?e.slice():a(e):[e]}var a=n(13);e.exports=i},function(e,t,n){(function(t){"use strict";function r(e){var n=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?"production"!==t.env.NODE_ENV?i(!1,"toArray: Array-like object expected"):i(!1):void 0,"number"!=typeof n?"production"!==t.env.NODE_ENV?i(!1,"toArray: Object needs a length property"):i(!1):void 0,0===n||n-1 in e?void 0:"production"!==t.env.NODE_ENV?i(!1,"toArray: Object should have keys for indices"):i(!1),e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(r){}for(var a=Array(n),o=0;o<n;o++)a[o]=e[o];return a}var i=n(14);e.exports=r}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function n(e,n,r,i,a,o,s,l){if("production"!==t.env.NODE_ENV&&void 0===n)throw new Error("invariant requires an error message argument");if(!e){var u;if(void 0===n)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,i,a,o,s,l],h=0;u=new Error(n.replace(/%s/g,function(){return c[h++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}e.exports=n}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e){return o?void 0:"production"!==t.env.NODE_ENV?a(!1,"Markup wrapping node not initialized"):a(!1),d.hasOwnProperty(e)||(e="*"),s.hasOwnProperty(e)||("*"===e?o.innerHTML="<link />":o.innerHTML="<"+e+"></"+e+">",s[e]=!o.firstChild),s[e]?d[e]:null}var i=n(10),a=n(14),o=i.canUseDOM?document.createElement("div"):null,s={},l=[1,'<select multiple="true">',"</select>"],u=[1,"<table>","</table>"],c=[3,"<table><tbody><tr>","</tr></tbody></table>"],h=[1,'<svg xmlns="http://www.w3.org/2000/svg">',"</svg>"],d={"*":[1,"?<div>","</div>"],area:[1,"<map>","</map>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],legend:[1,"<fieldset>","</fieldset>"],param:[1,"<object>","</object>"],tr:[2,"<table><tbody>","</tbody></table>"],optgroup:l,option:l,caption:u,colgroup:u,tbody:u,tfoot:u,thead:u,td:c,th:c},p=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];p.forEach(function(e){d[e]=h,s[e]=!0}),e.exports=r}).call(t,n(5))},function(e,t){"use strict";function n(e){return function(){return e}}function r(){}r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";var r=n(18),i=r({INSERT_MARKUP:null,MOVE_EXISTING:null,REMOVE_NODE:null,SET_MARKUP:null,TEXT_CONTENT:null});e.exports=i},function(e,t,n){(function(t){"use strict";var r=n(14),i=function(e){var n,i={};e instanceof Object&&!Array.isArray(e)?void 0:"production"!==t.env.NODE_ENV?r(!1,"keyMirror(...): Argument must be an object."):r(!1);for(n in e)e.hasOwnProperty(n)&&(i[n]=n);return i};e.exports=i}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function n(e,t,n){return n}var r={enableMeasure:!1,storedMeasure:n,measureMethods:function(e,n,i){if("production"!==t.env.NODE_ENV)for(var a in i)i.hasOwnProperty(a)&&(e[a]=r.measure(n,i[a],e[a]))},measure:function(e,n,i){if("production"!==t.env.NODE_ENV){var a=null,o=function(){return r.enableMeasure?(a||(a=r.storedMeasure(e,n,i)),a.apply(this,arguments)):i.apply(this,arguments)};return o.displayName=e+"_"+n,o}return i},injection:{injectMeasure:function(e){r.storedMeasure=e}}};e.exports=r}).call(t,n(5))},function(e,t,n){"use strict";var r=n(10),i=/^[ \r\n\t\f]/,a=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,o=function(e,t){e.innerHTML=t};if("undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction&&(o=function(e,t){MSApp.execUnsafeLocalFunction(function(){e.innerHTML=t})}),r.canUseDOM){var s=document.createElement("div");s.innerHTML=" ",""===s.innerHTML&&(o=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),i.test(t)||"<"===t[0]&&a.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t})}e.exports=o},function(e,t,n){"use strict";var r=n(10),i=n(22),a=n(20),o=function(e,t){e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(o=function(e,t){a(e,i(t))})),e.exports=o},function(e,t){"use strict";function n(e){return i[e]}function r(e){return(""+e).replace(a,n)}var i={"&":"&amp;",">":"&gt;","<":"&lt;",'"':"&quot;","'":"&#x27;"},a=/[&><"']/g;e.exports=r},function(e,t,n){(function(t){"use strict";function r(e){return!!h.hasOwnProperty(e)||!c.hasOwnProperty(e)&&(u.test(e)?(h[e]=!0,!0):(c[e]=!0,"production"!==t.env.NODE_ENV?l(!1,"Invalid attribute name: `%s`",e):void 0,!1))}function i(e,t){return null==t||e.hasBooleanValue&&!t||e.hasNumericValue&&isNaN(t)||e.hasPositiveNumericValue&&t<1||e.hasOverloadedBooleanValue&&t===!1}var a=n(24),o=n(19),s=n(25),l=n(26),u=/^[a-zA-Z_][\w\.\-]*$/,c={},h={};if("production"!==t.env.NODE_ENV)var d={children:!0,dangerouslySetInnerHTML:!0,key:!0,ref:!0},p={},f=function(e){if(!(d.hasOwnProperty(e)&&d[e]||p.hasOwnProperty(e)&&p[e])){p[e]=!0;var n=e.toLowerCase(),r=a.isCustomAttribute(n)?n:a.getPossibleStandardName.hasOwnProperty(n)?a.getPossibleStandardName[n]:null;"production"!==t.env.NODE_ENV?l(null==r,"Unknown DOM property %s. Did you mean %s?",e,r):void 0}};var m={createMarkupForID:function(e){return a.ID_ATTRIBUTE_NAME+"="+s(e)},setAttributeForID:function(e,t){e.setAttribute(a.ID_ATTRIBUTE_NAME,t)},createMarkupForProperty:function(e,n){var r=a.properties.hasOwnProperty(e)?a.properties[e]:null;if(r){if(i(r,n))return"";var o=r.attributeName;return r.hasBooleanValue||r.hasOverloadedBooleanValue&&n===!0?o+'=""':o+"="+s(n)}return a.isCustomAttribute(e)?null==n?"":e+"="+s(n):("production"!==t.env.NODE_ENV&&f(e),null)},createMarkupForCustomAttribute:function(e,t){return r(e)&&null!=t?e+"="+s(t):""},setValueForProperty:function(e,n,r){var o=a.properties.hasOwnProperty(n)?a.properties[n]:null;if(o){var s=o.mutationMethod;if(s)s(e,r);else if(i(o,r))this.deleteValueForProperty(e,n);else if(o.mustUseAttribute){var l=o.attributeName,u=o.attributeNamespace;u?e.setAttributeNS(u,l,""+r):o.hasBooleanValue||o.hasOverloadedBooleanValue&&r===!0?e.setAttribute(l,""):e.setAttribute(l,""+r)}else{var c=o.propertyName;o.hasSideEffects&&""+e[c]==""+r||(e[c]=r)}}else a.isCustomAttribute(n)?m.setValueForAttribute(e,n,r):"production"!==t.env.NODE_ENV&&f(n)},setValueForAttribute:function(e,t,n){r(t)&&(null==n?e.removeAttribute(t):e.setAttribute(t,""+n))},deleteValueForProperty:function(e,n){var r=a.properties.hasOwnProperty(n)?a.properties[n]:null;if(r){var i=r.mutationMethod;if(i)i(e,void 0);else if(r.mustUseAttribute)e.removeAttribute(r.attributeName);else{var o=r.propertyName,s=a.getDefaultValueForProperty(e.nodeName,o);r.hasSideEffects&&""+e[o]===s||(e[o]=s)}}else a.isCustomAttribute(n)?e.removeAttribute(n):"production"!==t.env.NODE_ENV&&f(n)}};o.measureMethods(m,"DOMPropertyOperations",{setValueForProperty:"setValueForProperty",setValueForAttribute:"setValueForAttribute",deleteValueForProperty:"deleteValueForProperty"}),e.exports=m}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,t){return(e&t)===t}var i=n(14),a={MUST_USE_ATTRIBUTE:1,MUST_USE_PROPERTY:2,HAS_SIDE_EFFECTS:4,HAS_BOOLEAN_VALUE:8,HAS_NUMERIC_VALUE:16,HAS_POSITIVE_NUMERIC_VALUE:48,HAS_OVERLOADED_BOOLEAN_VALUE:64,injectDOMPropertyConfig:function(e){var n=a,o=e.Properties||{},l=e.DOMAttributeNamespaces||{},u=e.DOMAttributeNames||{},c=e.DOMPropertyNames||{},h=e.DOMMutationMethods||{};e.isCustomAttribute&&s._isCustomAttributeFunctions.push(e.isCustomAttribute);for(var d in o){s.properties.hasOwnProperty(d)?"production"!==t.env.NODE_ENV?i(!1,"injectDOMPropertyConfig(...): You're trying to inject DOM property '%s' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.",d):i(!1):void 0;var p=d.toLowerCase(),f=o[d],m={attributeName:p,attributeNamespace:null,propertyName:d,mutationMethod:null,mustUseAttribute:r(f,n.MUST_USE_ATTRIBUTE),mustUseProperty:r(f,n.MUST_USE_PROPERTY),hasSideEffects:r(f,n.HAS_SIDE_EFFECTS),hasBooleanValue:r(f,n.HAS_BOOLEAN_VALUE),hasNumericValue:r(f,n.HAS_NUMERIC_VALUE),hasPositiveNumericValue:r(f,n.HAS_POSITIVE_NUMERIC_VALUE),hasOverloadedBooleanValue:r(f,n.HAS_OVERLOADED_BOOLEAN_VALUE)};if(m.mustUseAttribute&&m.mustUseProperty?"production"!==t.env.NODE_ENV?i(!1,"DOMProperty: Cannot require using both attribute and property: %s",d):i(!1):void 0,!m.mustUseProperty&&m.hasSideEffects?"production"!==t.env.NODE_ENV?i(!1,"DOMProperty: Properties that have side effects must use property: %s",d):i(!1):void 0,m.hasBooleanValue+m.hasNumericValue+m.hasOverloadedBooleanValue<=1?void 0:"production"!==t.env.NODE_ENV?i(!1,"DOMProperty: Value can be one of boolean, overloaded boolean, or numeric value, but not a combination: %s",d):i(!1),"production"!==t.env.NODE_ENV&&(s.getPossibleStandardName[p]=d),u.hasOwnProperty(d)){var g=u[d];m.attributeName=g,"production"!==t.env.NODE_ENV&&(s.getPossibleStandardName[g]=d)}l.hasOwnProperty(d)&&(m.attributeNamespace=l[d]),c.hasOwnProperty(d)&&(m.propertyName=c[d]),h.hasOwnProperty(d)&&(m.mutationMethod=h[d]),s.properties[d]=m}}},o={},s={ID_ATTRIBUTE_NAME:"data-reactid",properties:{},getPossibleStandardName:"production"!==t.env.NODE_ENV?{}:null,_isCustomAttributeFunctions:[],isCustomAttribute:function(e){for(var t=0;t<s._isCustomAttributeFunctions.length;t++){var n=s._isCustomAttributeFunctions[t];if(n(e))return!0}return!1},getDefaultValueForProperty:function(e,t){var n,r=o[e];return r||(o[e]=r={}),t in r||(n=document.createElement(e),r[t]=n[t]),r[t]},injection:a};e.exports=s}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return'"'+i(e)+'"'}var i=n(22);e.exports=r},function(e,t,n){(function(t){"use strict";var r=n(16),i=r;"production"!==t.env.NODE_ENV&&(i=function(e,t){for(var n=arguments.length,r=Array(n>2?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==t.indexOf("Failed Composite propType: ")&&!e){var a=0,o="Warning: "+t.replace(/%s/g,function(){return r[a++]});"undefined"!=typeof console&&console.error(o);try{throw new Error(o)}catch(s){}}}),e.exports=i}).call(t,n(5))},function(e,t,n){"use strict";var r=n(28),i=n(29),a={processChildrenUpdates:r.dangerouslyProcessChildrenUpdates,replaceNodeWithMarkupByID:r.dangerouslyReplaceNodeWithMarkupByID,unmountIDFromEnvironment:function(e){i.purgeID(e)}};e.exports=a},function(e,t,n){(function(t){"use strict";var r=n(8),i=n(23),a=n(29),o=n(19),s=n(14),l={dangerouslySetInnerHTML:"`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.",style:"`style` must be set using `updateStylesByID()`."},u={updatePropertyByID:function(e,n,r){var o=a.getNode(e);l.hasOwnProperty(n)?"production"!==t.env.NODE_ENV?s(!1,"updatePropertyByID(...): %s",l[n]):s(!1):void 0,null!=r?i.setValueForProperty(o,n,r):i.deleteValueForProperty(o,n)},dangerouslyReplaceNodeWithMarkupByID:function(e,t){var n=a.getNode(e);r.dangerouslyReplaceNodeWithMarkup(n,t)},dangerouslyProcessChildrenUpdates:function(e,t){for(var n=0;n<e.length;n++)e[n].parentNode=a.getNode(e[n].parentID);r.processUpdates(e,t)}};o.measureMethods(u,"ReactDOMIDOperations",{dangerouslyReplaceNodeWithMarkupByID:"dangerouslyReplaceNodeWithMarkupByID",dangerouslyProcessChildrenUpdates:"dangerouslyProcessChildrenUpdates"}),e.exports=u}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,t){for(var n=Math.min(e.length,t.length),r=0;r<n;r++)if(e.charAt(r)!==t.charAt(r))return r;return e.length===t.length?-1:n}function i(e){return e?e.nodeType===G?e.documentElement:e.firstChild:null}function a(e){var t=i(e);return t&&ee.getID(t)}function o(e){var n=s(e);if(n)if(U.hasOwnProperty(n)){var r=U[n];r!==e&&(h(r,n)?"production"!==t.env.NODE_ENV?B(!1,"ReactMount: Two valid but unequal nodes with the same `%s`: %s",q,n):B(!1):void 0,U[n]=e)}else U[n]=e;return n}function s(e){return e&&e.getAttribute&&e.getAttribute(q)||""}function l(e,t){var n=s(e);n!==t&&delete U[n],e.setAttribute(q,t),U[t]=e}function u(e){return U.hasOwnProperty(e)&&h(U[e],e)||(U[e]=ee.findReactNodeByID(e)),U[e]}function c(e){var t=S.get(e)._rootNodeID;return k.isNullComponentID(t)?null:(U.hasOwnProperty(t)&&h(U[t],t)||(U[t]=ee.findReactNodeByID(t)),U[t])}function h(e,n){if(e){s(e)!==n?"production"!==t.env.NODE_ENV?B(!1,"ReactMount: Unexpected modification of `%s`",q):B(!1):void 0;var r=ee.findReactContainerForID(n);if(r&&L(r,e))return!0}return!1}function d(e){delete U[e]}function p(e){var t=U[e];return!(!t||!h(t,e))&&void(J=t)}function f(e){J=null,N.traverseAncestors(e,p);var t=J;return J=null,t}function m(e,n,r,i,a,o){if(E.useCreateElement&&(o=I({},o),r.nodeType===G?o[X]=r:o[X]=r.ownerDocument),"production"!==t.env.NODE_ENV){o===R&&(o={});var s=r.nodeName.toLowerCase();o[j.ancestorInfoContextKey]=j.updatedAncestorInfo(null,s,null)}var l=O.mountComponent(e,n,i,o);e._renderedComponent._topLevelWrapper=e,ee._mountImageIntoNode(l,r,a,i)}function g(e,t,n,r,i){var a=M.ReactReconcileTransaction.getPooled(r);a.perform(m,null,e,t,n,a,r,i),M.ReactReconcileTransaction.release(a)}function v(e,t){for(O.unmountComponent(e),t.nodeType===G&&(t=t.documentElement);t.lastChild;)t.removeChild(t.lastChild)}function y(e){var t=a(e);return!!t&&t!==N.getReactRootIDFromNodeID(t)}function w(e){for(;e&&e.parentNode!==e;e=e.parentNode)if(1===e.nodeType){var t=s(e);if(t){var n,r=N.getReactRootIDFromNodeID(t),i=e;do if(n=s(i),i=i.parentNode,null==i)return null;while(n!==r);if(i===Y[r])return e}}return null}var b=n(24),_=n(30),x=n(6),E=n(42),C=n(43),k=n(45),N=n(46),S=n(48),P=n(49),D=n(19),O=n(51),T=n(54),M=n(55),I=n(40),R=n(59),L=n(60),A=n(63),B=n(14),z=n(20),V=n(68),j=n(71),F=n(26),q=b.ID_ATTRIBUTE_NAME,U={},W=1,G=9,H=11,X="__ReactMount_ownerDocument$"+Math.random().toString(36).slice(2),K={},Y={};if("production"!==t.env.NODE_ENV)var Q={};var Z=[],J=null,$=function(){};$.prototype.isReactComponent={},"production"!==t.env.NODE_ENV&&($.displayName="TopLevelWrapper"),$.prototype.render=function(){return this.props};var ee={TopLevelWrapper:$,_instancesByReactRootID:K,scrollMonitor:function(e,t){t()},_updateRootComponent:function(e,n,r,o){return ee.scrollMonitor(r,function(){T.enqueueElementInternal(e,n),o&&T.enqueueCallbackInternal(e,o)}),"production"!==t.env.NODE_ENV&&(Q[a(r)]=i(r)),e},_registerComponent:function(e,n){!n||n.nodeType!==W&&n.nodeType!==G&&n.nodeType!==H?"production"!==t.env.NODE_ENV?B(!1,"_registerComponent(...): Target container is not a DOM element."):B(!1):void 0,_.ensureScrollValueMonitoring();var r=ee.registerContainer(n);return K[r]=e,r},_renderNewRootComponent:function(e,n,r,a){"production"!==t.env.NODE_ENV?F(null==x.current,"_renderNewRootComponent(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of %s.",x.current&&x.current.getName()||"ReactCompositeComponent"):void 0;var o=A(e,null),s=ee._registerComponent(o,n);return M.batchedUpdates(g,o,s,n,r,a),"production"!==t.env.NODE_ENV&&(Q[s]=i(n)),o},renderSubtreeIntoContainer:function(e,n,r,i){return null==e||null==e._reactInternalInstance?"production"!==t.env.NODE_ENV?B(!1,"parentComponent must be a valid React Component"):B(!1):void 0,ee._renderSubtreeIntoContainer(e,n,r,i)},_renderSubtreeIntoContainer:function(e,n,r,o){C.isValidElement(n)?void 0:"production"!==t.env.NODE_ENV?B(!1,"ReactDOM.render(): Invalid component element.%s","string"==typeof n?" Instead of passing an element string, make sure to instantiate it by passing it to React.createElement.":"function"==typeof n?" Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.":null!=n&&void 0!==n.props?" This may be caused by unintentionally loading two independent copies of React.":""):B(!1),"production"!==t.env.NODE_ENV?F(!r||!r.tagName||"BODY"!==r.tagName.toUpperCase(),"render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app."):void 0;var l=new C($,null,null,null,null,null,n),u=K[a(r)];if(u){var c=u._currentElement,h=c.props;if(V(h,n)){var d=u._renderedComponent.getPublicInstance(),p=o&&function(){o.call(d)};return ee._updateRootComponent(u,l,r,p),d}ee.unmountComponentAtNode(r)}var f=i(r),m=f&&!!s(f),g=y(r);if("production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(!g,"render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render."):void 0,!m||f.nextSibling))for(var v=f;v;){if(s(v)){"production"!==t.env.NODE_ENV?F(!1,"render(): Target node has markup rendered by React, but there are unrelated nodes as well. This is most commonly caused by white-space inserted around server-rendered markup."):void 0;break}v=v.nextSibling}var w=m&&!u&&!g,b=ee._renderNewRootComponent(l,r,w,null!=e?e._reactInternalInstance._processChildContext(e._reactInternalInstance._context):R)._renderedComponent.getPublicInstance();return o&&o.call(b),b},render:function(e,t,n){return ee._renderSubtreeIntoContainer(null,e,t,n)},registerContainer:function(e){var t=a(e);return t&&(t=N.getReactRootIDFromNodeID(t)),t||(t=N.createReactRootID()),Y[t]=e,t},unmountComponentAtNode:function(e){"production"!==t.env.NODE_ENV?F(null==x.current,"unmountComponentAtNode(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of %s.",x.current&&x.current.getName()||"ReactCompositeComponent"):void 0,!e||e.nodeType!==W&&e.nodeType!==G&&e.nodeType!==H?"production"!==t.env.NODE_ENV?B(!1,"unmountComponentAtNode(...): Target container is not a DOM element."):B(!1):void 0;var n=a(e),r=K[n];if(!r){var i=y(e),o=s(e),l=o&&o===N.getReactRootIDFromNodeID(o);return"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(!i,"unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s",l?"You may have accidentally passed in a React root node instead of its container.":"Instead, have the parent component update its state and rerender in order to remove this component."):void 0),!1}return M.batchedUpdates(v,r,e),delete K[n],delete Y[n],"production"!==t.env.NODE_ENV&&delete Q[n],!0},findReactContainerForID:function(e){var n=N.getReactRootIDFromNodeID(e),r=Y[n];if("production"!==t.env.NODE_ENV){var i=Q[n];if(i&&i.parentNode!==r){"production"!==t.env.NODE_ENV?F(s(i)===n,"ReactMount: Root element ID differed from reactRootID."):void 0;var a=r.firstChild;a&&n===s(a)?Q[n]=a:"production"!==t.env.NODE_ENV?F(!1,"ReactMount: Root element has been removed from its original container. New container: %s",i.parentNode):void 0}}return r},findReactNodeByID:function(e){var t=ee.findReactContainerForID(e);return ee.findComponentRoot(t,e)},getFirstReactDOM:function(e){return w(e)},findComponentRoot:function(e,n){var r=Z,i=0,a=f(n)||e;for("production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(null!=a,"React can't find the root component node for data-reactid value `%s`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.",n):void 0),r[0]=a.firstChild,r.length=1;i<r.length;){for(var o,s=r[i++];s;){var l=ee.getID(s);l?n===l?o=s:N.isAncestorIDOf(l,n)&&(r.length=i=0,r.push(s.firstChild)):r.push(s.firstChild),s=s.nextSibling}if(o)return r.length=0,o}r.length=0,"production"!==t.env.NODE_ENV?B(!1,"findComponentRoot(..., %s): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `%s`.",n,ee.getID(e)):B(!1)},_mountImageIntoNode:function(e,n,a,o){if(!n||n.nodeType!==W&&n.nodeType!==G&&n.nodeType!==H?"production"!==t.env.NODE_ENV?B(!1,"mountComponentIntoNode(...): Target container is not valid."):B(!1):void 0,a){var s=i(n);if(P.canReuseMarkup(e,s))return;var l=s.getAttribute(P.CHECKSUM_ATTR_NAME);s.removeAttribute(P.CHECKSUM_ATTR_NAME);var u=s.outerHTML;s.setAttribute(P.CHECKSUM_ATTR_NAME,l);var c=e;if("production"!==t.env.NODE_ENV){var h;n.nodeType===W?(h=document.createElement("div"),h.innerHTML=e,c=h.innerHTML):(h=document.createElement("iframe"),document.body.appendChild(h),h.contentDocument.write(e),c=h.contentDocument.documentElement.outerHTML,document.body.removeChild(h))}var d=r(c,u),p=" (client) "+c.substring(d-20,d+20)+"\n (server) "+u.substring(d-20,d+20);
+n.nodeType===G?"production"!==t.env.NODE_ENV?B(!1,"You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s",p):B(!1):void 0,"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?F(!1,"React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:\n%s",p):void 0)}if(n.nodeType===G?"production"!==t.env.NODE_ENV?B(!1,"You're trying to render a component to the document but you didn't use server rendering. We can't do this without using server rendering due to cross-browser quirks. See ReactDOMServer.renderToString() for server rendering."):B(!1):void 0,o.useCreateElement){for(;n.lastChild;)n.removeChild(n.lastChild);n.appendChild(e)}else z(n,e)},ownerDocumentContextKey:X,getReactRootID:a,getID:o,setID:l,getNode:u,getNodeFromInstance:c,isValid:h,purgeID:d};D.measureMethods(ee,"ReactMount",{_renderNewRootComponent:"_renderNewRootComponent",_mountImageIntoNode:"_mountImageIntoNode"}),e.exports=ee}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return Object.prototype.hasOwnProperty.call(e,g)||(e[g]=f++,d[e[g]]={}),d[e[g]]}var i=n(31),a=n(32),o=n(33),s=n(38),l=n(19),u=n(39),c=n(40),h=n(41),d={},p=!1,f=0,m={topAbort:"abort",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},g="_reactListenersID"+String(Math.random()).slice(2),v=c({},s,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(v.handleTopLevel),v.ReactEventListener=e}},setEnabled:function(e){v.ReactEventListener&&v.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!v.ReactEventListener||!v.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,a=r(n),s=o.registrationNameDependencies[e],l=i.topLevelTypes,u=0;u<s.length;u++){var c=s[u];a.hasOwnProperty(c)&&a[c]||(c===l.topWheel?h("wheel")?v.ReactEventListener.trapBubbledEvent(l.topWheel,"wheel",n):h("mousewheel")?v.ReactEventListener.trapBubbledEvent(l.topWheel,"mousewheel",n):v.ReactEventListener.trapBubbledEvent(l.topWheel,"DOMMouseScroll",n):c===l.topScroll?h("scroll",!0)?v.ReactEventListener.trapCapturedEvent(l.topScroll,"scroll",n):v.ReactEventListener.trapBubbledEvent(l.topScroll,"scroll",v.ReactEventListener.WINDOW_HANDLE):c===l.topFocus||c===l.topBlur?(h("focus",!0)?(v.ReactEventListener.trapCapturedEvent(l.topFocus,"focus",n),v.ReactEventListener.trapCapturedEvent(l.topBlur,"blur",n)):h("focusin")&&(v.ReactEventListener.trapBubbledEvent(l.topFocus,"focusin",n),v.ReactEventListener.trapBubbledEvent(l.topBlur,"focusout",n)),a[l.topBlur]=!0,a[l.topFocus]=!0):m.hasOwnProperty(c)&&v.ReactEventListener.trapBubbledEvent(c,m[c],n),a[c]=!0)}},trapBubbledEvent:function(e,t,n){return v.ReactEventListener.trapBubbledEvent(e,t,n)},trapCapturedEvent:function(e,t,n){return v.ReactEventListener.trapCapturedEvent(e,t,n)},ensureScrollValueMonitoring:function(){if(!p){var e=u.refreshScrollValues;v.ReactEventListener.monitorScrollValue(e),p=!0}},eventNameDispatchConfigs:a.eventNameDispatchConfigs,registrationNameModules:a.registrationNameModules,putListener:a.putListener,getListener:a.getListener,deleteListener:a.deleteListener,deleteAllListeners:a.deleteAllListeners});l.measureMethods(v,"ReactBrowserEventEmitter",{putListener:"putListener",deleteListener:"deleteListener"}),e.exports=v},function(e,t,n){"use strict";var r=n(18),i=r({bubbled:null,captured:null}),a=r({topAbort:null,topBlur:null,topCanPlay:null,topCanPlayThrough:null,topChange:null,topClick:null,topCompositionEnd:null,topCompositionStart:null,topCompositionUpdate:null,topContextMenu:null,topCopy:null,topCut:null,topDoubleClick:null,topDrag:null,topDragEnd:null,topDragEnter:null,topDragExit:null,topDragLeave:null,topDragOver:null,topDragStart:null,topDrop:null,topDurationChange:null,topEmptied:null,topEncrypted:null,topEnded:null,topError:null,topFocus:null,topInput:null,topKeyDown:null,topKeyPress:null,topKeyUp:null,topLoad:null,topLoadedData:null,topLoadedMetadata:null,topLoadStart:null,topMouseDown:null,topMouseMove:null,topMouseOut:null,topMouseOver:null,topMouseUp:null,topPaste:null,topPause:null,topPlay:null,topPlaying:null,topProgress:null,topRateChange:null,topReset:null,topScroll:null,topSeeked:null,topSeeking:null,topSelectionChange:null,topStalled:null,topSubmit:null,topSuspend:null,topTextInput:null,topTimeUpdate:null,topTouchCancel:null,topTouchEnd:null,topTouchMove:null,topTouchStart:null,topVolumeChange:null,topWaiting:null,topWheel:null}),o={topLevelTypes:a,PropagationPhases:i};e.exports=o},function(e,t,n){(function(t){"use strict";function r(){var e=g&&g.traverseTwoPhase&&g.traverseEnterLeave;"production"!==t.env.NODE_ENV?c(e,"InstanceHandle not injected before use!"):void 0}var i=n(33),a=n(34),o=n(35),s=n(36),l=n(37),u=n(14),c=n(26),h={},d=null,p=function(e,t){e&&(a.executeDispatchesInOrder(e,t),e.isPersistent()||e.constructor.release(e))},f=function(e){return p(e,!0)},m=function(e){return p(e,!1)},g=null,v={injection:{injectMount:a.injection.injectMount,injectInstanceHandle:function(e){g=e,"production"!==t.env.NODE_ENV&&r()},getInstanceHandle:function(){return"production"!==t.env.NODE_ENV&&r(),g},injectEventPluginOrder:i.injectEventPluginOrder,injectEventPluginsByName:i.injectEventPluginsByName},eventNameDispatchConfigs:i.eventNameDispatchConfigs,registrationNameModules:i.registrationNameModules,putListener:function(e,n,r){"function"!=typeof r?"production"!==t.env.NODE_ENV?u(!1,"Expected %s listener to be a function, instead got type %s",n,typeof r):u(!1):void 0;var a=h[n]||(h[n]={});a[e]=r;var o=i.registrationNameModules[n];o&&o.didPutListener&&o.didPutListener(e,n,r)},getListener:function(e,t){var n=h[t];return n&&n[e]},deleteListener:function(e,t){var n=i.registrationNameModules[t];n&&n.willDeleteListener&&n.willDeleteListener(e,t);var r=h[t];r&&delete r[e]},deleteAllListeners:function(e){for(var t in h)if(h[t][e]){var n=i.registrationNameModules[t];n&&n.willDeleteListener&&n.willDeleteListener(e,t),delete h[t][e]}},extractEvents:function(e,t,n,r,a){for(var o,l=i.plugins,u=0;u<l.length;u++){var c=l[u];if(c){var h=c.extractEvents(e,t,n,r,a);h&&(o=s(o,h))}}return o},enqueueEvents:function(e){e&&(d=s(d,e))},processEventQueue:function(e){var n=d;d=null,e?l(n,f):l(n,m),d?"production"!==t.env.NODE_ENV?u(!1,"processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented."):u(!1):void 0,o.rethrowCaughtError()},__purge:function(){h={}},__getListenerBank:function(){return h}};e.exports=v}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(){if(s)for(var e in l){var n=l[e],r=s.indexOf(e);if(r>-1?void 0:"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.",e):o(!1),!u.plugins[r]){n.extractEvents?void 0:"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.",e):o(!1),u.plugins[r]=n;var a=n.eventTypes;for(var c in a)i(a[c],n,c)?void 0:"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.",c,e):o(!1)}}}function i(e,n,r){u.eventNameDispatchConfigs.hasOwnProperty(r)?"production"!==t.env.NODE_ENV?o(!1,"EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.",r):o(!1):void 0,u.eventNameDispatchConfigs[r]=e;var i=e.phasedRegistrationNames;if(i){for(var s in i)if(i.hasOwnProperty(s)){var l=i[s];a(l,n,r)}return!0}return!!e.registrationName&&(a(e.registrationName,n,r),!0)}function a(e,n,r){u.registrationNameModules[e]?"production"!==t.env.NODE_ENV?o(!1,"EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.",e):o(!1):void 0,u.registrationNameModules[e]=n,u.registrationNameDependencies[e]=n.eventTypes[r].dependencies}var o=n(14),s=null,l={},u={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},injectEventPluginOrder:function(e){s?"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React."):o(!1):void 0,s=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var n=!1;for(var i in e)if(e.hasOwnProperty(i)){var a=e[i];l.hasOwnProperty(i)&&l[i]===a||(l[i]?"production"!==t.env.NODE_ENV?o(!1,"EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.",i):o(!1):void 0,l[i]=a,n=!0)}n&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return u.registrationNameModules[t.registrationName]||null;for(var n in t.phasedRegistrationNames)if(t.phasedRegistrationNames.hasOwnProperty(n)){var r=u.registrationNameModules[t.phasedRegistrationNames[n]];if(r)return r}return null},_resetEventPlugins:function(){s=null;for(var e in l)l.hasOwnProperty(e)&&delete l[e];u.plugins.length=0;var t=u.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=u.registrationNameModules;for(var i in r)r.hasOwnProperty(i)&&delete r[i]}};e.exports=u}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e){return e===y.topMouseUp||e===y.topTouchEnd||e===y.topTouchCancel}function i(e){return e===y.topMouseMove||e===y.topTouchMove}function a(e){return e===y.topMouseDown||e===y.topTouchStart}function o(e,t,n,r){var i=e.type||"unknown-event";e.currentTarget=v.Mount.getNode(r),t?f.invokeGuardedCallbackWithCatch(i,n,e,r):f.invokeGuardedCallback(i,n,e,r),e.currentTarget=null}function s(e,n){var r=e._dispatchListeners,i=e._dispatchIDs;if("production"!==t.env.NODE_ENV&&d(e),Array.isArray(r))for(var a=0;a<r.length&&!e.isPropagationStopped();a++)o(e,n,r[a],i[a]);else r&&o(e,n,r,i);e._dispatchListeners=null,e._dispatchIDs=null}function l(e){var n=e._dispatchListeners,r=e._dispatchIDs;if("production"!==t.env.NODE_ENV&&d(e),Array.isArray(n)){for(var i=0;i<n.length&&!e.isPropagationStopped();i++)if(n[i](e,r[i]))return r[i]}else if(n&&n(e,r))return r;return null}function u(e){var t=l(e);return e._dispatchIDs=null,e._dispatchListeners=null,t}function c(e){"production"!==t.env.NODE_ENV&&d(e);var n=e._dispatchListeners,r=e._dispatchIDs;Array.isArray(n)?"production"!==t.env.NODE_ENV?m(!1,"executeDirectDispatch(...): Invalid `event`."):m(!1):void 0;var i=n?n(e,r):null;return e._dispatchListeners=null,e._dispatchIDs=null,i}function h(e){return!!e._dispatchListeners}var d,p=n(31),f=n(35),m=n(14),g=n(26),v={Mount:null,injectMount:function(e){v.Mount=e,"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?g(e&&e.getNode&&e.getID,"EventPluginUtils.injection.injectMount(...): Injected Mount module is missing getNode or getID."):void 0)}},y=p.topLevelTypes;"production"!==t.env.NODE_ENV&&(d=function(e){var n=e._dispatchListeners,r=e._dispatchIDs,i=Array.isArray(n),a=Array.isArray(r),o=a?r.length:r?1:0,s=i?n.length:n?1:0;"production"!==t.env.NODE_ENV?g(a===i&&o===s,"EventPluginUtils: Invalid `event`."):void 0});var w={isEndish:r,isMoveish:i,isStartish:a,executeDirectDispatch:c,executeDispatchesInOrder:s,executeDispatchesInOrderStopAtTrue:u,hasDispatches:h,getNode:function(e){return v.Mount.getNode(e)},getID:function(e){return v.Mount.getID(e)},injection:v};e.exports=w}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function n(e,t,n,i){try{return t(n,i)}catch(a){return void(null===r&&(r=a))}}var r=null,i={invokeGuardedCallback:n,invokeGuardedCallbackWithCatch:n,rethrowCaughtError:function(){if(r){var e=r;throw r=null,e}}};if("production"!==t.env.NODE_ENV&&"undefined"!=typeof window&&"function"==typeof window.dispatchEvent&&"undefined"!=typeof document&&"function"==typeof document.createEvent){var a=document.createElement("react");i.invokeGuardedCallback=function(e,t,n,r){var i=t.bind(null,n,r),o="react-"+e;a.addEventListener(o,i,!1);var s=document.createEvent("Event");s.initEvent(o,!1,!1),a.dispatchEvent(s),a.removeEventListener(o,i,!1)}}e.exports=i}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,n){if(null==n?"production"!==t.env.NODE_ENV?i(!1,"accumulateInto(...): Accumulated items must not be null or undefined."):i(!1):void 0,null==e)return n;var r=Array.isArray(e),a=Array.isArray(n);return r&&a?(e.push.apply(e,n),e):r?(e.push(n),e):a?[e].concat(n):[e,n]}var i=n(14);e.exports=r}).call(t,n(5))},function(e,t){"use strict";var n=function(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)};e.exports=n},function(e,t,n){"use strict";function r(e){i.enqueueEvents(e),i.processEventQueue(!1)}var i=n(32),a={handleTopLevel:function(e,t,n,a,o){var s=i.extractEvents(e,t,n,a,o);r(s)}};e.exports=a},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t){"use strict";function n(e,t){if(null==e)throw new TypeError("Object.assign target cannot be null or undefined");for(var n=Object(e),r=Object.prototype.hasOwnProperty,i=1;i<arguments.length;i++){var a=arguments[i];if(null!=a){var o=Object(a);for(var s in o)r.call(o,s)&&(n[s]=o[s])}}return n}e.exports=n},function(e,t,n){"use strict";/**
 	 * Checks if an event is supported in the current execution environment.
 	 *
 	 * NOTE: This will not work correctly for non-generic events such as `change`,
@@ -19,7 +19,7 @@ topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeCh
 return!0}var r=Object.prototype.hasOwnProperty;e.exports=n},function(e,t,n){"use strict";function r(e){var t=d.getID(e),n=h.getReactRootIDFromNodeID(t),r=d.findReactContainerForID(n),i=d.getFirstReactDOM(r);return i}function i(e,t){this.topLevelType=e,this.nativeEvent=t,this.ancestors=[]}function a(e){o(e)}function o(e){for(var t=d.getFirstReactDOM(m(e.nativeEvent))||window,n=t;n;)e.ancestors.push(n),n=r(n);for(var i=0;i<e.ancestors.length;i++){t=e.ancestors[i];var a=d.getID(t)||"";v._handleTopLevel(e.topLevelType,t,a,e.nativeEvent,m(e.nativeEvent))}}function s(e){var t=g(window);e(t)}var l=n(120),u=n(10),c=n(57),h=n(46),d=n(29),p=n(55),f=n(40),m=n(82),g=n(121);f(i.prototype,{destructor:function(){this.topLevelType=null,this.nativeEvent=null,this.ancestors.length=0}}),c.addPoolingTo(i,c.twoArgumentPooler);var v={_enabled:!0,_handleTopLevel:null,WINDOW_HANDLE:u.canUseDOM?window:null,setHandleTopLevel:function(e){v._handleTopLevel=e},setEnabled:function(e){v._enabled=!!e},isEnabled:function(){return v._enabled},trapBubbledEvent:function(e,t,n){var r=n;return r?l.listen(r,t,v.dispatchEvent.bind(null,e)):null},trapCapturedEvent:function(e,t,n){var r=n;return r?l.capture(r,t,v.dispatchEvent.bind(null,e)):null},monitorScrollValue:function(e){var t=s.bind(null,e);l.listen(window,"scroll",t)},dispatchEvent:function(e,t){if(v._enabled){var n=i.getPooled(e,t);try{p.batchedUpdates(a,n)}finally{i.release(n)}}}};e.exports=v},function(e,t,n){(function(t){"use strict";var r=n(16),i={listen:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!1),{remove:function(){e.removeEventListener(t,n,!1)}}):e.attachEvent?(e.attachEvent("on"+t,n),{remove:function(){e.detachEvent("on"+t,n)}}):void 0},capture:function(e,n,i){return e.addEventListener?(e.addEventListener(n,i,!0),{remove:function(){e.removeEventListener(n,i,!0)}}):("production"!==t.env.NODE_ENV&&console.error("Attempted to listen to events during the capture phase on a browser that does not support the capture phase. Your application will not receive some events."),{remove:r})},registerDefault:function(){}};e.exports=i}).call(t,n(5))},function(e,t){"use strict";function n(e){return e===window?{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}:{x:e.scrollLeft,y:e.scrollTop}}e.exports=n},function(e,t,n){"use strict";var r=n(24),i=n(32),a=n(65),o=n(123),s=n(69),l=n(30),u=n(70),c=n(19),h=n(47),d=n(55),p={Component:a.injection,Class:o.injection,DOMProperty:r.injection,EmptyComponent:s.injection,EventPluginHub:i.injection,EventEmitter:l.injection,NativeComponent:u.injection,Perf:c.injection,RootIndex:h.injection,Updates:d.injection};e.exports=p},function(e,t,n){(function(t){"use strict";function r(){S||(S=!0,"production"!==t.env.NODE_ENV?E(!1,"setProps(...) and replaceProps(...) are deprecated. Instead, call render again at the top level."):void 0)}function i(e,n,r){for(var i in n)n.hasOwnProperty(i)&&("production"!==t.env.NODE_ENV?E("function"==typeof n[i],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",e.displayName||"ReactClass",g[r],i):void 0)}function a(e,n){var r=P.hasOwnProperty(n)?P[n]:null;O.hasOwnProperty(n)&&(r!==k.OVERRIDE_BASE?"production"!==t.env.NODE_ENV?b(!1,"ReactClassInterface: You are attempting to override `%s` from your class specification. Ensure that your method names do not overlap with React methods.",n):b(!1):void 0),e.hasOwnProperty(n)&&(r!==k.DEFINE_MANY&&r!==k.DEFINE_MANY_MERGED?"production"!==t.env.NODE_ENV?b(!1,"ReactClassInterface: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",n):b(!1):void 0)}function o(e,n){if(n){"function"==typeof n?"production"!==t.env.NODE_ENV?b(!1,"ReactClass: You're attempting to use a component class as a mixin. Instead, just use a regular object."):b(!1):void 0,f.isValidElement(n)?"production"!==t.env.NODE_ENV?b(!1,"ReactClass: You're attempting to use a component as a mixin. Instead, just use a regular object."):b(!1):void 0;var r=e.prototype;n.hasOwnProperty(C)&&D.mixins(e,n.mixins);for(var i in n)if(n.hasOwnProperty(i)&&i!==C){var o=n[i];if(a(r,i),D.hasOwnProperty(i))D[i](e,o);else{var s=P.hasOwnProperty(i),l=r.hasOwnProperty(i),h="function"==typeof o,d=h&&!s&&!l&&n.autobind!==!1;if(d)r.__reactAutoBindMap||(r.__reactAutoBindMap={}),r.__reactAutoBindMap[i]=o,r[i]=o;else if(l){var p=P[i];!s||p!==k.DEFINE_MANY_MERGED&&p!==k.DEFINE_MANY?"production"!==t.env.NODE_ENV?b(!1,"ReactClass: Unexpected spec policy %s for key %s when mixing in component specs.",p,i):b(!1):void 0,p===k.DEFINE_MANY_MERGED?r[i]=u(r[i],o):p===k.DEFINE_MANY&&(r[i]=c(r[i],o))}else r[i]=o,"production"!==t.env.NODE_ENV&&"function"==typeof o&&n.displayName&&(r[i].displayName=n.displayName+"_"+i)}}}}function s(e,n){if(n)for(var r in n){var i=n[r];if(n.hasOwnProperty(r)){var a=r in D;a?"production"!==t.env.NODE_ENV?b(!1,'ReactClass: You are attempting to define a reserved property, `%s`, that shouldn\'t be on the "statics" key. Define it as an instance property instead; it will still be accessible on the constructor.',r):b(!1):void 0;var o=r in e;o?"production"!==t.env.NODE_ENV?b(!1,"ReactClass: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",r):b(!1):void 0,e[r]=i}}}function l(e,n){e&&n&&"object"==typeof e&&"object"==typeof n?void 0:"production"!==t.env.NODE_ENV?b(!1,"mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects."):b(!1);for(var r in n)n.hasOwnProperty(r)&&(void 0!==e[r]?"production"!==t.env.NODE_ENV?b(!1,"mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `%s`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.",r):b(!1):void 0,e[r]=n[r]);return e}function u(e,t){return function(){var n=e.apply(this,arguments),r=t.apply(this,arguments);if(null==n)return r;if(null==r)return n;var i={};return l(i,n),l(i,r),i}}function c(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}function h(e,n){var r=n.bind(e);if("production"!==t.env.NODE_ENV){r.__reactBoundContext=e,r.__reactBoundMethod=n,r.__reactBoundArguments=null;var i=e.constructor.displayName,a=r.bind;r.bind=function(o){for(var s=arguments.length,l=Array(s>1?s-1:0),u=1;u<s;u++)l[u-1]=arguments[u];if(o!==e&&null!==o)"production"!==t.env.NODE_ENV?E(!1,"bind(): React component methods may only be bound to the component instance. See %s",i):void 0;else if(!l.length)return"production"!==t.env.NODE_ENV?E(!1,"bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See %s",i):void 0,r;var c=a.apply(r,arguments);return c.__reactBoundContext=e,c.__reactBoundMethod=n,c.__reactBoundArguments=l,c}}return r}function d(e){for(var t in e.__reactAutoBindMap)if(e.__reactAutoBindMap.hasOwnProperty(t)){var n=e.__reactAutoBindMap[t];e[t]=h(e,n)}}var p=n(124),f=n(43),m=n(66),g=n(67),v=n(125),y=n(40),w=n(59),b=n(14),_=n(18),x=n(80),E=n(26),C=x({mixins:null}),k=_({DEFINE_ONCE:null,DEFINE_MANY:null,OVERRIDE_BASE:null,DEFINE_MANY_MERGED:null}),N=[],S=!1,P={mixins:k.DEFINE_MANY,statics:k.DEFINE_MANY,propTypes:k.DEFINE_MANY,contextTypes:k.DEFINE_MANY,childContextTypes:k.DEFINE_MANY,getDefaultProps:k.DEFINE_MANY_MERGED,getInitialState:k.DEFINE_MANY_MERGED,getChildContext:k.DEFINE_MANY_MERGED,render:k.DEFINE_ONCE,componentWillMount:k.DEFINE_MANY,componentDidMount:k.DEFINE_MANY,componentWillReceiveProps:k.DEFINE_MANY,shouldComponentUpdate:k.DEFINE_ONCE,componentWillUpdate:k.DEFINE_MANY,componentDidUpdate:k.DEFINE_MANY,componentWillUnmount:k.DEFINE_MANY,updateComponent:k.OVERRIDE_BASE},D={displayName:function(e,t){e.displayName=t},mixins:function(e,t){if(t)for(var n=0;n<t.length;n++)o(e,t[n])},childContextTypes:function(e,n){"production"!==t.env.NODE_ENV&&i(e,n,m.childContext),e.childContextTypes=y({},e.childContextTypes,n)},contextTypes:function(e,n){"production"!==t.env.NODE_ENV&&i(e,n,m.context),e.contextTypes=y({},e.contextTypes,n)},getDefaultProps:function(e,t){e.getDefaultProps?e.getDefaultProps=u(e.getDefaultProps,t):e.getDefaultProps=t},propTypes:function(e,n){"production"!==t.env.NODE_ENV&&i(e,n,m.prop),e.propTypes=y({},e.propTypes,n)},statics:function(e,t){s(e,t)},autobind:function(){}},O={replaceState:function(e,t){this.updater.enqueueReplaceState(this,e),t&&this.updater.enqueueCallback(this,t)},isMounted:function(){return this.updater.isMounted(this)},setProps:function(e,n){"production"!==t.env.NODE_ENV&&r(),this.updater.enqueueSetProps(this,e),n&&this.updater.enqueueCallback(this,n)},replaceProps:function(e,n){"production"!==t.env.NODE_ENV&&r(),this.updater.enqueueReplaceProps(this,e),n&&this.updater.enqueueCallback(this,n)}},T=function(){};y(T.prototype,p.prototype,O);var M={createClass:function(e){var n=function(e,r,i){"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?E(this instanceof n,"Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/react-legacyfactory"):void 0),this.__reactAutoBindMap&&d(this),this.props=e,this.context=r,this.refs=w,this.updater=i||v,this.state=null;var a=this.getInitialState?this.getInitialState():null;"production"!==t.env.NODE_ENV&&"undefined"==typeof a&&this.getInitialState._isMockFunction&&(a=null),"object"!=typeof a||Array.isArray(a)?"production"!==t.env.NODE_ENV?b(!1,"%s.getInitialState(): must return an object or null",n.displayName||"ReactCompositeComponent"):b(!1):void 0,this.state=a};n.prototype=new T,n.prototype.constructor=n,N.forEach(o.bind(null,n)),o(n,e),n.getDefaultProps&&(n.defaultProps=n.getDefaultProps()),"production"!==t.env.NODE_ENV&&(n.getDefaultProps&&(n.getDefaultProps.isReactClassApproved={}),n.prototype.getInitialState&&(n.prototype.getInitialState.isReactClassApproved={})),n.prototype.render?void 0:"production"!==t.env.NODE_ENV?b(!1,"createClass(...): Class specification must implement a `render` method."):b(!1),"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?E(!n.prototype.componentShouldUpdate,"%s has a method called componentShouldUpdate(). Did you mean shouldComponentUpdate()? The name is phrased as a question because the function is expected to return a value.",e.displayName||"A component"):void 0,"production"!==t.env.NODE_ENV?E(!n.prototype.componentWillRecieveProps,"%s has a method called componentWillRecieveProps(). Did you mean componentWillReceiveProps()?",e.displayName||"A component"):void 0);for(var r in P)n.prototype[r]||(n.prototype[r]=null);return n},injection:{injectMixin:function(e){N.push(e)}}};e.exports=M}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=o,this.updater=n||i}var i=n(125),a=n(44),o=n(59),s=n(14),l=n(26);if(r.prototype.isReactComponent={},r.prototype.setState=function(e,n){"object"!=typeof e&&"function"!=typeof e&&null!=e?"production"!==t.env.NODE_ENV?s(!1,"setState(...): takes an object of state variables to update or a function which returns an object of state variables."):s(!1):void 0,"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?l(null!=e,"setState(...): You passed an undefined or null state object; instead, use forceUpdate()."):void 0),this.updater.enqueueSetState(this,e),n&&this.updater.enqueueCallback(this,n)},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this),e&&this.updater.enqueueCallback(this,e)},"production"!==t.env.NODE_ENV){var u={getDOMNode:["getDOMNode","Use ReactDOM.findDOMNode(component) instead."],isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceProps:["replaceProps","Instead, call render again at the top level."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."],setProps:["setProps","Instead, call render again at the top level."]},c=function(e,n){a&&Object.defineProperty(r.prototype,e,{get:function(){"production"!==t.env.NODE_ENV?l(!1,"%s(...) is deprecated in plain JavaScript React classes. %s",n[0],n[1]):void 0}})};for(var h in u)u.hasOwnProperty(h)&&c(h,u[h])}e.exports=r}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,n){"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?i(!1,"%s(...): Can only update a mounted or mounting component. This usually means you called %s() on an unmounted component. This is a no-op. Please check the code for the %s component.",n,n,e.constructor&&e.constructor.displayName||""):void 0)}var i=n(26),a={isMounted:function(e){return!1},enqueueCallback:function(e,t){},enqueueForceUpdate:function(e){r(e,"forceUpdate")},enqueueReplaceState:function(e,t){r(e,"replaceState")},enqueueSetState:function(e,t){r(e,"setState")},enqueueSetProps:function(e,t){r(e,"setProps")},enqueueReplaceProps:function(e,t){r(e,"replaceProps")}};e.exports=a}).call(t,n(5))},function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=!1,this.reactMountReady=i.getPooled(null),this.useCreateElement=!e&&s.useCreateElement}var i=n(56),a=n(57),o=n(30),s=n(42),l=n(127),u=n(58),c=n(40),h={initialize:l.getSelectionInformation,close:l.restoreSelection},d={initialize:function(){var e=o.isEnabled();return o.setEnabled(!1),e},close:function(e){o.setEnabled(e)}},p={initialize:function(){this.reactMountReady.reset()},close:function(){this.reactMountReady.notifyAll()}},f=[h,d,p],m={getTransactionWrappers:function(){return f},getReactMountReady:function(){return this.reactMountReady},destructor:function(){i.release(this.reactMountReady),this.reactMountReady=null}};c(r.prototype,u.Mixin,m),a.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";function r(e){return a(document.documentElement,e)}var i=n(128),a=n(60),o=n(96),s=n(130),l={hasSelectionCapabilities:function(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&"text"===e.type||"textarea"===t||"true"===e.contentEditable)},getSelectionInformation:function(){var e=s();return{focusedElem:e,selectionRange:l.hasSelectionCapabilities(e)?l.getSelection(e):null}},restoreSelection:function(e){var t=s(),n=e.focusedElem,i=e.selectionRange;t!==n&&r(n)&&(l.hasSelectionCapabilities(n)&&l.setSelection(n,i),o(n))},getSelection:function(e){var t;if("selectionStart"in e)t={start:e.selectionStart,end:e.selectionEnd};else if(document.selection&&e.nodeName&&"input"===e.nodeName.toLowerCase()){var n=document.selection.createRange();n.parentElement()===e&&(t={start:-n.moveStart("character",-e.value.length),end:-n.moveEnd("character",-e.value.length)})}else t=i.getOffsets(e);return t||{start:0,end:0}},setSelection:function(e,t){var n=t.start,r=t.end;if("undefined"==typeof r&&(r=n),"selectionStart"in e)e.selectionStart=n,e.selectionEnd=Math.min(r,e.value.length);else if(document.selection&&e.nodeName&&"input"===e.nodeName.toLowerCase()){var a=e.createTextRange();a.collapse(!0),a.moveStart("character",n),a.moveEnd("character",r-n),a.select()}else i.setOffsets(e,t)}};e.exports=l},function(e,t,n){"use strict";function r(e,t,n,r){return e===n&&t===r}function i(e){var t=document.selection,n=t.createRange(),r=n.text.length,i=n.duplicate();i.moveToElementText(e),i.setEndPoint("EndToStart",n);var a=i.text.length,o=a+r;return{start:a,end:o}}function a(e){var t=window.getSelection&&window.getSelection();if(!t||0===t.rangeCount)return null;var n=t.anchorNode,i=t.anchorOffset,a=t.focusNode,o=t.focusOffset,s=t.getRangeAt(0);try{s.startContainer.nodeType,s.endContainer.nodeType}catch(l){return null}var u=r(t.anchorNode,t.anchorOffset,t.focusNode,t.focusOffset),c=u?0:s.toString().length,h=s.cloneRange();h.selectNodeContents(e),h.setEnd(s.startContainer,s.startOffset);var d=r(h.startContainer,h.startOffset,h.endContainer,h.endOffset),p=d?0:h.toString().length,f=p+c,m=document.createRange();m.setStart(n,i),m.setEnd(a,o);var g=m.collapsed;return{start:g?f:p,end:g?p:f}}function o(e,t){var n,r,i=document.selection.createRange().duplicate();"undefined"==typeof t.end?(n=t.start,r=n):t.start>t.end?(n=t.end,r=t.start):(n=t.start,r=t.end),i.moveToElementText(e),i.moveStart("character",n),i.setEndPoint("EndToStart",i),i.moveEnd("character",r-n),i.select()}function s(e,t){if(window.getSelection){var n=window.getSelection(),r=e[c()].length,i=Math.min(t.start,r),a="undefined"==typeof t.end?i:Math.min(t.end,r);if(!n.extend&&i>a){var o=a;a=i,i=o}var s=u(e,i),l=u(e,a);if(s&&l){var h=document.createRange();h.setStart(s.node,s.offset),n.removeAllRanges(),i>a?(n.addRange(h),n.extend(l.node,l.offset)):(h.setEnd(l.node,l.offset),n.addRange(h))}}}var l=n(10),u=n(129),c=n(76),h=l.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:h?i:a,setOffsets:h?o:s};e.exports=d},function(e,t){"use strict";function n(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function r(e){for(;e;){if(e.nextSibling)return e.nextSibling;e=e.parentNode}}function i(e,t){for(var i=n(e),a=0,o=0;i;){if(3===i.nodeType){if(o=a+i.textContent.length,a<=t&&o>=t)return{node:i,offset:t-a};a=o}i=n(r(i))}}e.exports=i},function(e,t){"use strict";function n(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}e.exports=n},function(e,t,n){"use strict";function r(e){if("selectionStart"in e&&l.hasSelectionCapabilities(e))return{start:e.selectionStart,end:e.selectionEnd};if(window.getSelection){var t=window.getSelection();return{anchorNode:t.anchorNode,anchorOffset:t.anchorOffset,focusNode:t.focusNode,focusOffset:t.focusOffset}}if(document.selection){var n=document.selection.createRange();return{parentElement:n.parentElement(),text:n.text,top:n.boundingTop,left:n.boundingLeft}}}function i(e,t){if(b||null==v||v!==c())return null;var n=r(v);if(!w||!p(w,n)){w=n;var i=u.getPooled(g.select,y,e,t);return i.type="select",i.target=v,o.accumulateTwoPhaseDispatches(i),i}return null}var a=n(31),o=n(74),s=n(10),l=n(127),u=n(78),c=n(130),h=n(83),d=n(80),p=n(118),f=a.topLevelTypes,m=s.canUseDOM&&"documentMode"in document&&document.documentMode<=11,g={select:{phasedRegistrationNames:{bubbled:d({onSelect:null}),captured:d({onSelectCapture:null})},dependencies:[f.topBlur,f.topContextMenu,f.topFocus,f.topKeyDown,f.topMouseDown,f.topMouseUp,f.topSelectionChange]}},v=null,y=null,w=null,b=!1,_=!1,x=d({onSelect:null}),E={eventTypes:g,extractEvents:function(e,t,n,r,a){if(!_)return null;switch(e){case f.topFocus:(h(t)||"true"===t.contentEditable)&&(v=t,y=n,w=null);break;case f.topBlur:v=null,y=null,w=null;break;case f.topMouseDown:b=!0;break;case f.topContextMenu:case f.topMouseUp:return b=!1,i(r,a);case f.topSelectionChange:if(m)break;case f.topKeyDown:case f.topKeyUp:return i(r,a)}return null},didPutListener:function(e,t,n){t===x&&(_=!0)}};e.exports=E},function(e,t){"use strict";var n=Math.pow(2,53),r={createReactRootIndex:function(){return Math.ceil(Math.random()*n)}};e.exports=r},function(e,t,n){(function(t){"use strict";var r=n(31),i=n(120),a=n(74),o=n(29),s=n(134),l=n(78),u=n(135),c=n(136),h=n(87),d=n(139),p=n(140),f=n(88),m=n(141),g=n(16),v=n(137),y=n(14),w=n(80),b=r.topLevelTypes,_={abort:{phasedRegistrationNames:{bubbled:w({onAbort:!0}),captured:w({onAbortCapture:!0})}},blur:{phasedRegistrationNames:{bubbled:w({onBlur:!0}),captured:w({onBlurCapture:!0})}},canPlay:{phasedRegistrationNames:{bubbled:w({onCanPlay:!0}),captured:w({onCanPlayCapture:!0})}},canPlayThrough:{phasedRegistrationNames:{bubbled:w({onCanPlayThrough:!0}),captured:w({onCanPlayThroughCapture:!0})}},click:{phasedRegistrationNames:{bubbled:w({onClick:!0}),captured:w({onClickCapture:!0})}},contextMenu:{phasedRegistrationNames:{bubbled:w({onContextMenu:!0}),captured:w({onContextMenuCapture:!0})}},copy:{phasedRegistrationNames:{bubbled:w({onCopy:!0}),captured:w({onCopyCapture:!0})}},cut:{phasedRegistrationNames:{bubbled:w({onCut:!0}),captured:w({onCutCapture:!0})}},doubleClick:{phasedRegistrationNames:{bubbled:w({onDoubleClick:!0}),captured:w({onDoubleClickCapture:!0})}},drag:{phasedRegistrationNames:{bubbled:w({onDrag:!0}),captured:w({onDragCapture:!0})}},dragEnd:{phasedRegistrationNames:{bubbled:w({onDragEnd:!0}),captured:w({onDragEndCapture:!0})}},dragEnter:{phasedRegistrationNames:{bubbled:w({onDragEnter:!0}),captured:w({onDragEnterCapture:!0})}},dragExit:{phasedRegistrationNames:{bubbled:w({onDragExit:!0}),captured:w({onDragExitCapture:!0})}},dragLeave:{phasedRegistrationNames:{bubbled:w({onDragLeave:!0}),captured:w({onDragLeaveCapture:!0})}},dragOver:{phasedRegistrationNames:{bubbled:w({onDragOver:!0}),captured:w({onDragOverCapture:!0})}},dragStart:{phasedRegistrationNames:{bubbled:w({onDragStart:!0}),captured:w({onDragStartCapture:!0})}},drop:{phasedRegistrationNames:{bubbled:w({onDrop:!0}),captured:w({onDropCapture:!0})}},durationChange:{phasedRegistrationNames:{bubbled:w({onDurationChange:!0}),captured:w({onDurationChangeCapture:!0})}},emptied:{phasedRegistrationNames:{bubbled:w({onEmptied:!0}),captured:w({onEmptiedCapture:!0})}},encrypted:{phasedRegistrationNames:{bubbled:w({onEncrypted:!0}),captured:w({onEncryptedCapture:!0})}},ended:{phasedRegistrationNames:{bubbled:w({onEnded:!0}),captured:w({onEndedCapture:!0})}},error:{phasedRegistrationNames:{bubbled:w({onError:!0}),captured:w({onErrorCapture:!0})}},focus:{phasedRegistrationNames:{bubbled:w({onFocus:!0}),captured:w({onFocusCapture:!0})}},input:{phasedRegistrationNames:{bubbled:w({onInput:!0}),captured:w({onInputCapture:!0})}},keyDown:{phasedRegistrationNames:{bubbled:w({onKeyDown:!0}),captured:w({onKeyDownCapture:!0})}},keyPress:{phasedRegistrationNames:{bubbled:w({onKeyPress:!0}),captured:w({onKeyPressCapture:!0})}},keyUp:{phasedRegistrationNames:{bubbled:w({onKeyUp:!0}),captured:w({onKeyUpCapture:!0})}},load:{phasedRegistrationNames:{bubbled:w({onLoad:!0}),captured:w({onLoadCapture:!0})}},loadedData:{phasedRegistrationNames:{bubbled:w({onLoadedData:!0}),captured:w({onLoadedDataCapture:!0})}},loadedMetadata:{phasedRegistrationNames:{bubbled:w({onLoadedMetadata:!0}),captured:w({onLoadedMetadataCapture:!0})}},loadStart:{phasedRegistrationNames:{bubbled:w({onLoadStart:!0}),captured:w({onLoadStartCapture:!0})}},mouseDown:{phasedRegistrationNames:{bubbled:w({onMouseDown:!0}),captured:w({onMouseDownCapture:!0})}},mouseMove:{phasedRegistrationNames:{bubbled:w({onMouseMove:!0}),captured:w({onMouseMoveCapture:!0})}},mouseOut:{phasedRegistrationNames:{bubbled:w({onMouseOut:!0}),captured:w({onMouseOutCapture:!0})}},mouseOver:{phasedRegistrationNames:{bubbled:w({onMouseOver:!0}),captured:w({onMouseOverCapture:!0})}},mouseUp:{phasedRegistrationNames:{bubbled:w({onMouseUp:!0}),captured:w({onMouseUpCapture:!0})}},paste:{phasedRegistrationNames:{bubbled:w({onPaste:!0}),captured:w({onPasteCapture:!0})}},pause:{phasedRegistrationNames:{bubbled:w({onPause:!0}),captured:w({onPauseCapture:!0})}},play:{phasedRegistrationNames:{bubbled:w({onPlay:!0}),captured:w({onPlayCapture:!0})}},playing:{phasedRegistrationNames:{bubbled:w({onPlaying:!0}),captured:w({onPlayingCapture:!0})}},progress:{phasedRegistrationNames:{bubbled:w({onProgress:!0}),captured:w({onProgressCapture:!0})}},rateChange:{phasedRegistrationNames:{bubbled:w({onRateChange:!0}),captured:w({onRateChangeCapture:!0})}},reset:{phasedRegistrationNames:{bubbled:w({onReset:!0}),captured:w({onResetCapture:!0})}},scroll:{phasedRegistrationNames:{bubbled:w({onScroll:!0}),captured:w({onScrollCapture:!0})}},seeked:{phasedRegistrationNames:{bubbled:w({onSeeked:!0}),captured:w({onSeekedCapture:!0})}},seeking:{phasedRegistrationNames:{bubbled:w({onSeeking:!0}),captured:w({onSeekingCapture:!0})}},stalled:{phasedRegistrationNames:{bubbled:w({onStalled:!0}),captured:w({onStalledCapture:!0})}},submit:{phasedRegistrationNames:{bubbled:w({onSubmit:!0}),captured:w({onSubmitCapture:!0})}},suspend:{phasedRegistrationNames:{bubbled:w({onSuspend:!0}),captured:w({onSuspendCapture:!0})}},timeUpdate:{phasedRegistrationNames:{bubbled:w({onTimeUpdate:!0}),captured:w({onTimeUpdateCapture:!0})}},touchCancel:{phasedRegistrationNames:{bubbled:w({onTouchCancel:!0}),captured:w({onTouchCancelCapture:!0})}},touchEnd:{phasedRegistrationNames:{bubbled:w({onTouchEnd:!0}),captured:w({onTouchEndCapture:!0})}},touchMove:{phasedRegistrationNames:{bubbled:w({onTouchMove:!0}),captured:w({onTouchMoveCapture:!0})}},touchStart:{phasedRegistrationNames:{bubbled:w({onTouchStart:!0}),captured:w({onTouchStartCapture:!0})}},volumeChange:{phasedRegistrationNames:{bubbled:w({onVolumeChange:!0}),captured:w({onVolumeChangeCapture:!0})}},waiting:{phasedRegistrationNames:{bubbled:w({onWaiting:!0}),captured:w({onWaitingCapture:!0})}},wheel:{phasedRegistrationNames:{bubbled:w({onWheel:!0}),captured:w({onWheelCapture:!0})}}},x={topAbort:_.abort,topBlur:_.blur,topCanPlay:_.canPlay,topCanPlayThrough:_.canPlayThrough,topClick:_.click,topContextMenu:_.contextMenu,topCopy:_.copy,topCut:_.cut,topDoubleClick:_.doubleClick,topDrag:_.drag,topDragEnd:_.dragEnd,topDragEnter:_.dragEnter,topDragExit:_.dragExit,topDragLeave:_.dragLeave,topDragOver:_.dragOver,topDragStart:_.dragStart,topDrop:_.drop,topDurationChange:_.durationChange,topEmptied:_.emptied,topEncrypted:_.encrypted,topEnded:_.ended,topError:_.error,topFocus:_.focus,topInput:_.input,topKeyDown:_.keyDown,topKeyPress:_.keyPress,topKeyUp:_.keyUp,topLoad:_.load,topLoadedData:_.loadedData,topLoadedMetadata:_.loadedMetadata,topLoadStart:_.loadStart,topMouseDown:_.mouseDown,topMouseMove:_.mouseMove,topMouseOut:_.mouseOut,topMouseOver:_.mouseOver,topMouseUp:_.mouseUp,topPaste:_.paste,topPause:_.pause,topPlay:_.play,topPlaying:_.playing,topProgress:_.progress,topRateChange:_.rateChange,topReset:_.reset,topScroll:_.scroll,topSeeked:_.seeked,topSeeking:_.seeking,topStalled:_.stalled,topSubmit:_.submit,topSuspend:_.suspend,topTimeUpdate:_.timeUpdate,topTouchCancel:_.touchCancel,topTouchEnd:_.touchEnd,topTouchMove:_.touchMove,topTouchStart:_.touchStart,topVolumeChange:_.volumeChange,topWaiting:_.waiting,topWheel:_.wheel};for(var E in x)x[E].dependencies=[E];var C=w({onClick:null}),k={},N={eventTypes:_,extractEvents:function(e,n,r,i,o){var g=x[e];if(!g)return null;var w;switch(e){case b.topAbort:case b.topCanPlay:case b.topCanPlayThrough:case b.topDurationChange:case b.topEmptied:case b.topEncrypted:case b.topEnded:case b.topError:case b.topInput:case b.topLoad:case b.topLoadedData:case b.topLoadedMetadata:case b.topLoadStart:case b.topPause:case b.topPlay:case b.topPlaying:case b.topProgress:case b.topRateChange:case b.topReset:case b.topSeeked:case b.topSeeking:case b.topStalled:case b.topSubmit:case b.topSuspend:case b.topTimeUpdate:case b.topVolumeChange:case b.topWaiting:w=l;break;case b.topKeyPress:if(0===v(i))return null;case b.topKeyDown:case b.topKeyUp:w=c;break;case b.topBlur:case b.topFocus:w=u;break;case b.topClick:if(2===i.button)return null;case b.topContextMenu:case b.topDoubleClick:case b.topMouseDown:case b.topMouseMove:case b.topMouseOut:case b.topMouseOver:case b.topMouseUp:w=h;break;case b.topDrag:case b.topDragEnd:case b.topDragEnter:case b.topDragExit:case b.topDragLeave:case b.topDragOver:case b.topDragStart:case b.topDrop:w=d;break;case b.topTouchCancel:case b.topTouchEnd:case b.topTouchMove:case b.topTouchStart:w=p;break;case b.topScroll:w=f;break;case b.topWheel:w=m;break;case b.topCopy:case b.topCut:case b.topPaste:w=s}w?void 0:"production"!==t.env.NODE_ENV?y(!1,"SimpleEventPlugin: Unhandled event type, `%s`.",e):y(!1);var _=w.getPooled(g,r,i,o);return a.accumulateTwoPhaseDispatches(_),_},didPutListener:function(e,t,n){if(t===C){var r=o.getNode(e);k[e]||(k[e]=i.listen(r,"click",g))}},willDeleteListener:function(e,t){t===C&&(k[e].remove(),delete k[e])}};e.exports=N}).call(t,n(5))},function(e,t,n){"use strict";function r(e,t,n,r){i.call(this,e,t,n,r)}var i=n(78),a={clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){i.call(this,e,t,n,r)}var i=n(88),a={relatedTarget:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){i.call(this,e,t,n,r)}var i=n(88),a=n(137),o=n(138),s=n(89),l={key:o,location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:s,charCode:function(e){return"keypress"===e.type?a(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?a(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}};i.augmentClass(r,l),e.exports=r},function(e,t){"use strict";function n(e){var t,n=e.keyCode;return"charCode"in e?(t=e.charCode,0===t&&13===n&&(t=13)):t=n,t>=32||13===t?t:0}e.exports=n},function(e,t,n){"use strict";function r(e){if(e.key){var t=a[e.key]||e.key;if("Unidentified"!==t)return t}if("keypress"===e.type){var n=i(e);return 13===n?"Enter":String.fromCharCode(n)}return"keydown"===e.type||"keyup"===e.type?o[e.keyCode]||"Unidentified":""}var i=n(137),a={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},o={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"};e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){i.call(this,e,t,n,r)}var i=n(87),a={dataTransfer:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){i.call(this,e,t,n,r)}var i=n(88),a=n(89),o={touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:a};i.augmentClass(r,o),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){i.call(this,e,t,n,r)}var i=n(87),a={deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";var r=n(24),i=r.injection.MUST_USE_ATTRIBUTE,a={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},o={Properties:{clipPath:i,cx:i,cy:i,d:i,dx:i,dy:i,fill:i,fillOpacity:i,fontFamily:i,fontSize:i,fx:i,fy:i,gradientTransform:i,gradientUnits:i,markerEnd:i,markerMid:i,markerStart:i,offset:i,opacity:i,patternContentUnits:i,patternUnits:i,points:i,preserveAspectRatio:i,r:i,rx:i,ry:i,spreadMethod:i,stopColor:i,stopOpacity:i,stroke:i,strokeDasharray:i,strokeLinecap:i,strokeOpacity:i,strokeWidth:i,textAnchor:i,transform:i,version:i,viewBox:i,x1:i,x2:i,x:i,xlinkActuate:i,xlinkArcrole:i,xlinkHref:i,xlinkRole:i,xlinkShow:i,xlinkTitle:i,xlinkType:i,xmlBase:i,xmlLang:i,xmlSpace:i,y1:i,y2:i,y:i},DOMAttributeNamespaces:{xlinkActuate:a.xlink,xlinkArcrole:a.xlink,xlinkHref:a.xlink,xlinkRole:a.xlink,xlinkShow:a.xlink,xlinkTitle:a.xlink,xlinkType:a.xlink,xmlBase:a.xml,xmlLang:a.xml,xmlSpace:a.xml},DOMAttributeNames:{clipPath:"clip-path",fillOpacity:"fill-opacity",fontFamily:"font-family",fontSize:"font-size",gradientTransform:"gradientTransform",gradientUnits:"gradientUnits",markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",patternContentUnits:"patternContentUnits",patternUnits:"patternUnits",preserveAspectRatio:"preserveAspectRatio",spreadMethod:"spreadMethod",stopColor:"stop-color",stopOpacity:"stop-opacity",strokeDasharray:"stroke-dasharray",strokeLinecap:"stroke-linecap",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",textAnchor:"text-anchor",viewBox:"viewBox",xlinkActuate:"xlink:actuate",
 xlinkArcrole:"xlink:arcrole",xlinkHref:"xlink:href",xlinkRole:"xlink:role",xlinkShow:"xlink:show",xlinkTitle:"xlink:title",xlinkType:"xlink:type",xmlBase:"xml:base",xmlLang:"xml:lang",xmlSpace:"xml:space"}};e.exports=o},function(e,t,n){"use strict";function r(e){return Math.floor(100*e)/100}function i(e,t,n){e[t]=(e[t]||0)+n}var a=n(24),o=n(144),s=n(29),l=n(19),u=n(145),c={_allMeasurements:[],_mountStack:[0],_injected:!1,start:function(){c._injected||l.injection.injectMeasure(c.measure),c._allMeasurements.length=0,l.enableMeasure=!0},stop:function(){l.enableMeasure=!1},getLastMeasurements:function(){return c._allMeasurements},printExclusive:function(e){e=e||c._allMeasurements;var t=o.getExclusiveSummary(e);console.table(t.map(function(e){return{"Component class name":e.componentName,"Total inclusive time (ms)":r(e.inclusive),"Exclusive mount time (ms)":r(e.exclusive),"Exclusive render time (ms)":r(e.render),"Mount time per instance (ms)":r(e.exclusive/e.count),"Render time per instance (ms)":r(e.render/e.count),Instances:e.count}}))},printInclusive:function(e){e=e||c._allMeasurements;var t=o.getInclusiveSummary(e);console.table(t.map(function(e){return{"Owner > component":e.componentName,"Inclusive time (ms)":r(e.time),Instances:e.count}})),console.log("Total time:",o.getTotalTime(e).toFixed(2)+" ms")},getMeasurementsSummaryMap:function(e){var t=o.getInclusiveSummary(e,!0);return t.map(function(e){return{"Owner > component":e.componentName,"Wasted time (ms)":e.time,Instances:e.count}})},printWasted:function(e){e=e||c._allMeasurements,console.table(c.getMeasurementsSummaryMap(e)),console.log("Total time:",o.getTotalTime(e).toFixed(2)+" ms")},printDOM:function(e){e=e||c._allMeasurements;var t=o.getDOMSummary(e);console.table(t.map(function(e){var t={};return t[a.ID_ATTRIBUTE_NAME]=e.id,t.type=e.type,t.args=JSON.stringify(e.args),t})),console.log("Total time:",o.getTotalTime(e).toFixed(2)+" ms")},_recordWrite:function(e,t,n,r){var i=c._allMeasurements[c._allMeasurements.length-1].writes;i[e]=i[e]||[],i[e].push({type:t,time:n,args:r})},measure:function(e,t,n){return function(){for(var r=arguments.length,a=Array(r),o=0;o<r;o++)a[o]=arguments[o];var l,h,d;if("_renderNewRootComponent"===t||"flushBatchedUpdates"===t)return c._allMeasurements.push({exclusive:{},inclusive:{},render:{},counts:{},writes:{},displayNames:{},totalTime:0,created:{}}),d=u(),h=n.apply(this,a),c._allMeasurements[c._allMeasurements.length-1].totalTime=u()-d,h;if("_mountImageIntoNode"===t||"ReactBrowserEventEmitter"===e||"ReactDOMIDOperations"===e||"CSSPropertyOperations"===e||"DOMChildrenOperations"===e||"DOMPropertyOperations"===e){if(d=u(),h=n.apply(this,a),l=u()-d,"_mountImageIntoNode"===t){var p=s.getID(a[1]);c._recordWrite(p,t,l,a[0])}else if("dangerouslyProcessChildrenUpdates"===t)a[0].forEach(function(e){var t={};null!==e.fromIndex&&(t.fromIndex=e.fromIndex),null!==e.toIndex&&(t.toIndex=e.toIndex),null!==e.textContent&&(t.textContent=e.textContent),null!==e.markupIndex&&(t.markup=a[1][e.markupIndex]),c._recordWrite(e.parentID,e.type,l,t)});else{var f=a[0];"object"==typeof f&&(f=s.getID(a[0])),c._recordWrite(f,t,l,Array.prototype.slice.call(a,1))}return h}if("ReactCompositeComponent"!==e||"mountComponent"!==t&&"updateComponent"!==t&&"_renderValidatedComponent"!==t)return n.apply(this,a);if(this._currentElement.type===s.TopLevelWrapper)return n.apply(this,a);var m="mountComponent"===t?a[0]:this._rootNodeID,g="_renderValidatedComponent"===t,v="mountComponent"===t,y=c._mountStack,w=c._allMeasurements[c._allMeasurements.length-1];if(g?i(w.counts,m,1):v&&(w.created[m]=!0,y.push(0)),d=u(),h=n.apply(this,a),l=u()-d,g)i(w.render,m,l);else if(v){var b=y.pop();y[y.length-1]+=l,i(w.exclusive,m,l-b),i(w.inclusive,m,l)}else i(w.inclusive,m,l);return w.displayNames[m]={current:this.getName(),owner:this._currentElement._owner?this._currentElement._owner.getName():"<root>"},h}}};e.exports=c},function(e,t,n){"use strict";function r(e){for(var t=0,n=0;n<e.length;n++){var r=e[n];t+=r.totalTime}return t}function i(e){var t=[];return e.forEach(function(e){Object.keys(e.writes).forEach(function(n){e.writes[n].forEach(function(e){t.push({id:n,type:c[e.type]||e.type,args:e.args})})})}),t}function a(e){for(var t,n={},r=0;r<e.length;r++){var i=e[r],a=l({},i.exclusive,i.inclusive);for(var o in a)t=i.displayNames[o].current,n[t]=n[t]||{componentName:t,inclusive:0,exclusive:0,render:0,count:0},i.render[o]&&(n[t].render+=i.render[o]),i.exclusive[o]&&(n[t].exclusive+=i.exclusive[o]),i.inclusive[o]&&(n[t].inclusive+=i.inclusive[o]),i.counts[o]&&(n[t].count+=i.counts[o])}var s=[];for(t in n)n[t].exclusive>=u&&s.push(n[t]);return s.sort(function(e,t){return t.exclusive-e.exclusive}),s}function o(e,t){for(var n,r={},i=0;i<e.length;i++){var a,o=e[i],c=l({},o.exclusive,o.inclusive);t&&(a=s(o));for(var h in c)if(!t||a[h]){var d=o.displayNames[h];n=d.owner+" > "+d.current,r[n]=r[n]||{componentName:n,time:0,count:0},o.inclusive[h]&&(r[n].time+=o.inclusive[h]),o.counts[h]&&(r[n].count+=o.counts[h])}}var p=[];for(n in r)r[n].time>=u&&p.push(r[n]);return p.sort(function(e,t){return t.time-e.time}),p}function s(e){var t={},n=Object.keys(e.writes),r=l({},e.exclusive,e.inclusive);for(var i in r){for(var a=!1,o=0;o<n.length;o++)if(0===n[o].indexOf(i)){a=!0;break}e.created[i]&&(a=!0),!a&&e.counts[i]>0&&(t[i]=!0)}return t}var l=n(40),u=1.2,c={_mountImageIntoNode:"set innerHTML",INSERT_MARKUP:"set innerHTML",MOVE_EXISTING:"move",REMOVE_NODE:"remove",SET_MARKUP:"set innerHTML",TEXT_CONTENT:"set textContent",setValueForProperty:"update attribute",setValueForAttribute:"update attribute",deleteValueForProperty:"remove attribute",setValueForStyles:"update styles",replaceNodeWithMarkup:"replace",updateTextContent:"set textContent"},h={getExclusiveSummary:a,getInclusiveSummary:o,getDOMSummary:i,getTotalTime:r};e.exports=h},function(e,t,n){"use strict";var r,i=n(146);r=i.now?function(){return i.now()}:function(){return Date.now()},e.exports=r},function(e,t,n){"use strict";var r,i=n(10);i.canUseDOM&&(r=window.performance||window.msPerformance||window.webkitPerformance),e.exports=r||{}},function(e,t){"use strict";e.exports="0.14.8"},function(e,t,n){"use strict";var r=n(29);e.exports=r.renderSubtreeIntoContainer},function(e,t,n){"use strict";var r=n(72),i=n(150),a=n(147);r.inject();var o={renderToString:i.renderToString,renderToStaticMarkup:i.renderToStaticMarkup,version:a};e.exports=o},function(e,t,n){(function(t){"use strict";function r(e){o.isValidElement(e)?void 0:"production"!==t.env.NODE_ENV?f(!1,"renderToString(): You must pass a valid ReactElement."):f(!1);var n;try{h.injection.injectBatchingStrategy(u);var r=s.createReactRootID();return n=c.getPooled(!1),n.perform(function(){var t=p(e,null),i=t.mountComponent(r,n,d);return l.addChecksumToMarkup(i)},null)}finally{c.release(n),h.injection.injectBatchingStrategy(a)}}function i(e){o.isValidElement(e)?void 0:"production"!==t.env.NODE_ENV?f(!1,"renderToStaticMarkup(): You must pass a valid ReactElement."):f(!1);var n;try{h.injection.injectBatchingStrategy(u);var r=s.createReactRootID();return n=c.getPooled(!0),n.perform(function(){var t=p(e,null);return t.mountComponent(r,n,d)},null)}finally{c.release(n),h.injection.injectBatchingStrategy(a)}}var a=n(93),o=n(43),s=n(46),l=n(49),u=n(151),c=n(152),h=n(55),d=n(59),p=n(63),f=n(14);e.exports={renderToString:r,renderToStaticMarkup:i}}).call(t,n(5))},function(e,t){"use strict";var n={isBatchingUpdates:!1,batchedUpdates:function(e){}};e.exports=n},function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=e,this.reactMountReady=a.getPooled(null),this.useCreateElement=!1}var i=n(57),a=n(56),o=n(58),s=n(40),l=n(16),u={initialize:function(){this.reactMountReady.reset()},close:l},c=[u],h={getTransactionWrappers:function(){return c},getReactMountReady:function(){return this.reactMountReady},destructor:function(){a.release(this.reactMountReady),this.reactMountReady=null}};s(r.prototype,o.Mixin,h),i.addPoolingTo(r),e.exports=r},function(e,t,n){(function(t){"use strict";var r=n(111),i=n(124),a=n(123),o=n(154),s=n(43),l=n(155),u=n(108),c=n(147),h=n(40),d=n(157),p=s.createElement,f=s.createFactory,m=s.cloneElement;"production"!==t.env.NODE_ENV&&(p=l.createElement,f=l.createFactory,m=l.cloneElement);var g={Children:{map:r.map,forEach:r.forEach,count:r.count,toArray:r.toArray,only:d},Component:i,createElement:p,cloneElement:m,isValidElement:s.isValidElement,PropTypes:u,createClass:a.createClass,createFactory:f,createMixin:function(e){return e},DOM:o,version:c,__spread:h};e.exports=g}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e){return"production"!==t.env.NODE_ENV?a.createFactory(e):i.createFactory(e)}var i=n(43),a=n(155),o=n(156),s=o({a:"a",abbr:"abbr",address:"address",area:"area",article:"article",aside:"aside",audio:"audio",b:"b",base:"base",bdi:"bdi",bdo:"bdo",big:"big",blockquote:"blockquote",body:"body",br:"br",button:"button",canvas:"canvas",caption:"caption",cite:"cite",code:"code",col:"col",colgroup:"colgroup",data:"data",datalist:"datalist",dd:"dd",del:"del",details:"details",dfn:"dfn",dialog:"dialog",div:"div",dl:"dl",dt:"dt",em:"em",embed:"embed",fieldset:"fieldset",figcaption:"figcaption",figure:"figure",footer:"footer",form:"form",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",head:"head",header:"header",hgroup:"hgroup",hr:"hr",html:"html",i:"i",iframe:"iframe",img:"img",input:"input",ins:"ins",kbd:"kbd",keygen:"keygen",label:"label",legend:"legend",li:"li",link:"link",main:"main",map:"map",mark:"mark",menu:"menu",menuitem:"menuitem",meta:"meta",meter:"meter",nav:"nav",noscript:"noscript",object:"object",ol:"ol",optgroup:"optgroup",option:"option",output:"output",p:"p",param:"param",picture:"picture",pre:"pre",progress:"progress",q:"q",rp:"rp",rt:"rt",ruby:"ruby",s:"s",samp:"samp",script:"script",section:"section",select:"select",small:"small",source:"source",span:"span",strong:"strong",style:"style",sub:"sub",summary:"summary",sup:"sup",table:"table",tbody:"tbody",td:"td",textarea:"textarea",tfoot:"tfoot",th:"th",thead:"thead",time:"time",title:"title",tr:"tr",track:"track",u:"u",ul:"ul","var":"var",video:"video",wbr:"wbr",circle:"circle",clipPath:"clipPath",defs:"defs",ellipse:"ellipse",g:"g",image:"image",line:"line",linearGradient:"linearGradient",mask:"mask",path:"path",pattern:"pattern",polygon:"polygon",polyline:"polyline",radialGradient:"radialGradient",rect:"rect",stop:"stop",svg:"svg",text:"text",tspan:"tspan"},r);e.exports=s}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(){if(d.current){var e=d.current.getName();if(e)return" Check the render method of `"+e+"`."}return""}function i(e,n){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=a("uniqueKey",e,n);null!==r&&("production"!==t.env.NODE_ENV?g(!1,'Each child in an array or iterator should have a unique "key" prop.%s%s%s',r.parentOrOwner||"",r.childOwner||"",r.url||""):void 0)}}function a(e,t,n){var i=r();if(!i){var a="string"==typeof n?n:n.displayName||n.name;a&&(i=" Check the top-level render call using <"+a+">.")}var o=v[e]||(v[e]={});if(o[i])return null;o[i]=!0;var s={parentOrOwner:i,url:" See https://fb.me/react-warning-keys for more information.",childOwner:null};return t&&t._owner&&t._owner!==d.current&&(s.childOwner=" It was passed a child from "+t._owner.getName()+"."),s}function o(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n<e.length;n++){var r=e[n];u.isValidElement(r)&&i(r,t)}else if(u.isValidElement(e))e._store&&(e._store.validated=!0);else if(e){var a=f(e);if(a&&a!==e.entries)for(var o,s=a.call(e);!(o=s.next()).done;)u.isValidElement(o.value)&&i(o.value,t)}}function s(e,n,i,a){for(var o in n)if(n.hasOwnProperty(o)){var s;try{"function"!=typeof n[o]?"production"!==t.env.NODE_ENV?m(!1,"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",e||"React class",h[a],o):m(!1):void 0,s=n[o](i,o,e,a)}catch(l){s=l}if("production"!==t.env.NODE_ENV?g(!s||s instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",e||"React class",h[a],o,typeof s):void 0,s instanceof Error&&!(s.message in y)){y[s.message]=!0;var u=r();"production"!==t.env.NODE_ENV?g(!1,"Failed propType: %s%s",s.message,u):void 0}}}function l(e){var n=e.type;if("function"==typeof n){var r=n.displayName||n.name;n.propTypes&&s(r,n.propTypes,e.props,c.prop),"function"==typeof n.getDefaultProps&&("production"!==t.env.NODE_ENV?g(n.getDefaultProps.isReactClassApproved,"getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."):void 0)}}var u=n(43),c=n(66),h=n(67),d=n(6),p=n(44),f=n(109),m=n(14),g=n(26),v={},y={},w={createElement:function(e,n,i){var a="string"==typeof e||"function"==typeof e;"production"!==t.env.NODE_ENV?g(a,"React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).%s",r()):void 0;var s=u.createElement.apply(this,arguments);if(null==s)return s;if(a)for(var c=2;c<arguments.length;c++)o(arguments[c],e);return l(s),s},createFactory:function(e){var n=w.createElement.bind(null,e);return n.type=e,"production"!==t.env.NODE_ENV&&p&&Object.defineProperty(n,"type",{enumerable:!1,get:function(){return"production"!==t.env.NODE_ENV?g(!1,"Factory.type is deprecated. Access the class directly before passing it to createFactory."):void 0,Object.defineProperty(this,"type",{value:e}),e}}),n},cloneElement:function(e,t,n){for(var r=u.cloneElement.apply(this,arguments),i=2;i<arguments.length;i++)o(arguments[i],r.type);return l(r),r}};e.exports=w}).call(t,n(5))},function(e,t){"use strict";function n(e,t,n){if(!e)return null;var i={};for(var a in e)r.call(e,a)&&(i[a]=t.call(n,e[a],a,e));return i}var r=Object.prototype.hasOwnProperty;e.exports=n},function(e,t,n){(function(t){"use strict";function r(e){return i.isValidElement(e)?void 0:"production"!==t.env.NODE_ENV?a(!1,"onlyChild must be passed a children with exactly one child."):a(!1),e}var i=n(43),a=n(14);e.exports=r}).call(t,n(5))},function(e,t,n){(function(t){"use strict";function r(e,n,r,o,s){var l=!1;if("production"!==t.env.NODE_ENV){var u=function(){return"production"!==t.env.NODE_ENV?a(l,"React.%s is deprecated. Please use %s.%s from require('%s') instead.",e,n,e,r):void 0,l=!0,s.apply(o,arguments)};return i(u,s)}return s}var i=n(40),a=n(26);e.exports=r}).call(t,n(5))},function(e,t,n){"use strict";e.exports=n(4)},function(e,t,n){"use strict";var r=n(2),i=n(161),a=n(212),o=function(e){return Object.keys(a).map(e)},s=o(function(e,t){var n=a[e];return r.createElement(n,{key:e,name:e,number:t})}),l=r.createClass({displayName:"FullArticle",render:function(){return r.createElement(i,null,s)}});e.exports=l},function(e,t,n){"use strict";var r=n(2),i=n(162),a=n(163),o=n(164),s=n(275),l=n(276),u=r.createClass({displayName:"Page",renderCompactContent:function(e){return r.createElement("div",null,r.createElement(o,{prev:this.props.prev,next:this.props.next,position:"before"}),this.props.children,r.createElement(o,{prev:this.props.prev,next:this.props.next,position:"after"}))},renderCompactRoot:function(e){return r.createElement("div",null,this.props.children,e)},renderPageContent:function(e){return r.createElement("div",null,e,this.props.children)},render:function(){var e,t=this.props.compact,n="/"===this.props.name,o=r.createElement(s,{compact:t&&!n});return e=t?n?this.renderCompactRoot(o):this.renderCompactContent(o):this.renderPageContent(o),r.createElement("div",null,r.createElement(i,null),r.createElement(a,null),e,r.createElement(l,null))}});e.exports=u},function(e,t,n){"use strict";var r=n(2),i=r.createClass({displayName:"Ribbon",getInitialState:function(){return{href:"http://github.com/pomax/BezierInfo-2"}},render:function(){return r.createElement("div",{className:"ribbon"},r.createElement("img",{src:"images/ribbon.png",alt:"This page on GitHub",border:0,useMap:"#githubmap",width:"200px",height:"149px"}),r.createElement("map",{name:"githubmap"},r.createElement("area",{shape:"poly",coords:"30,0, 200,0, 200,114",href:this.state.href,alt:"This page on GitHub"})))}});e.exports=i},function(e,t,n){"use strict";var r=n(2),i=r.createClass({displayName:"Header",render:function(){return r.createElement("header",null,r.createElement("h1",null,"A Primer on Bézier Curves"),r.createElement("h2",null,"A free, online book for when you really need to know how to do Bézier things."))}});e.exports=i},function(e,t,n){"use strict";var r=n(2),i=n(165),a=i.Link,o=n(212),s=Object.keys(o),l=r.createClass({displayName:"Relatives",getInitialState:function(){var e=this.props.prev;e=e>-1&&{to:s[e],title:o[s[e]].getDefaultProps().title};var t=this.props.next;return t=t<s.length&&{to:s[t],title:o[s[t]].getDefaultProps().title},{prev:e,next:t}},render:function(){return this.props.prev||this.props.next?r.createElement("table",{className:"relatives "+this.props.position},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,this.state.prev?r.createElement(a,{className:"prev",to:this.state.prev.to},this.props.prev+". "+this.state.prev.title):null),r.createElement("td",{className:"toc"},r.createElement(a,{to:"/"},"ToC")),r.createElement("td",null,this.state.next?r.createElement(a,{className:"next",to:this.state.next.to},this.props.next+". "+this.state.next.title):null)))):null}});e.exports=l},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var i=n(166),a=r(i);t.Router=a["default"];var o=n(200),s=r(o);t.Link=s["default"];var l=n(201),u=r(l);t.IndexLink=u["default"];var c=n(202),h=r(c);t.IndexRedirect=h["default"];var d=n(204),p=r(d);t.IndexRoute=p["default"];var f=n(203),m=r(f);t.Redirect=m["default"];var g=n(205),v=r(g);t.Route=v["default"];var y=n(206),w=r(y);t.History=w["default"];var b=n(207),_=r(b);t.Lifecycle=_["default"];var x=n(208),E=r(x);t.RouteContext=E["default"];var C=n(189),k=r(C);t.useRoutes=k["default"];var N=n(185);t.createRoutes=N.createRoutes;var S=n(186),P=r(S);t.RoutingContext=P["default"];var D=n(199),O=r(D);t.PropTypes=O["default"];var T=n(209),M=r(T);t.match=M["default"];var I=r(i);t["default"]=I["default"]},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=n(167),c=i(u),h=n(2),d=i(h),p=n(168),f=i(p),m=n(185),g=n(186),v=i(g),y=n(189),w=i(y),b=n(199),_=d["default"].PropTypes,x=_.func,E=_.object,C=function(e){function t(n,r){o(this,t),e.call(this,n,r),this.state={location:null,routes:null,params:null,components:null}}return s(t,e),t.prototype.handleError=function(e){if(!this.props.onError)throw e;this.props.onError.call(this,e)},t.prototype.componentWillMount=function(){var e=this,t=this.props,n=t.history,r=t.children,i=t.routes,a=t.parseQueryString,o=t.stringifyQuery,s=n?function(){return n}:f["default"];this.history=w["default"](s)({routes:m.createRoutes(i||r),parseQueryString:a,stringifyQuery:o}),this._unlisten=this.history.listen(function(t,n){t?e.handleError(t):e.setState(n,e.props.onUpdate)})},t.prototype.componentWillReceiveProps=function(e){"production"!==r.env.NODE_ENV?c["default"](e.history===this.props.history,"You cannot change <Router history>; it will be ignored"):void 0,"production"!==r.env.NODE_ENV?c["default"]((e.routes||e.children)===(this.props.routes||this.props.children),"You cannot change <Router routes>; it will be ignored"):void 0},t.prototype.componentWillUnmount=function(){this._unlisten&&this._unlisten()},t.prototype.render=function(){var e=this.state,n=e.location,r=e.routes,i=e.params,o=e.components,s=this.props,u=s.RoutingContext,c=s.createElement,h=a(s,["RoutingContext","createElement"]);return null==n?null:(Object.keys(t.propTypes).forEach(function(e){return delete h[e]}),d["default"].createElement(u,l({},h,{history:this.history,createElement:c,location:n,routes:r,params:i,components:o})))},t}(h.Component);C.propTypes={history:E,children:b.routes,routes:b.routes,RoutingContext:x.isRequired,createElement:x,onError:x,onUpdate:x,parseQueryString:x,stringifyQuery:x},C.defaultProps={RoutingContext:v["default"]},t["default"]=C,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){(function(t){"use strict";var n=function(){};"production"!==t.env.NODE_ENV&&(n=function(e,t,n){var r=arguments.length;n=new Array(r>2?r-2:0);for(var i=2;i<r;i++)n[i-2]=arguments[i];if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(t.length<10||/^[s\W]*$/.test(t))throw new Error("The warning format should be able to uniquely identify this warning. Please, use a more descriptive format than: "+t);if(!e){var a=0,o="Warning: "+t.replace(/%s/g,function(){return n[a++]});"undefined"!=typeof console&&console.error(o);try{throw new Error(o)}catch(s){}}}),e.exports=n}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e){return"string"==typeof e&&"/"===e.charAt(0)}function o(){var e=y.getHashPath();return!!a(e)||(y.replaceHashPath("/"+e),!1)}function s(e,t,n){return e+(e.indexOf("?")===-1?"?":"&")+(t+"="+n)}function l(e,t){return e.replace(new RegExp("[?&]?"+t+"=[a-zA-Z0-9]+"),"")}function u(e,t){var n=e.match(new RegExp("\\?.*?\\b"+t+"=(.+?)\\b"));return n&&n[1]}function c(){function e(){var e=y.getHashPath(),t=void 0,n=void 0;D?(t=u(e,D),e=l(e,D),t?n=w.readState(t):(n=null,t=O.createKey(),y.replaceHashPath(s(e,D,t)))):t=n=null;var r=E["default"](e);return O.createLocation(h({},r,{state:n}),void 0,t)}function t(t){function n(){o()&&r(e())}var r=t.transitionTo;return o(),y.addEventListener(window,"hashchange",n),function(){y.removeEventListener(window,"hashchange",n)}}function n(e){var t=e.basename,n=e.pathname,i=e.search,a=e.state,o=e.action,l=e.key;if(o!==g.POP){var u=(t||"")+n+i;D?(u=s(u,D,l),w.saveState(l,a)):e.key=e.state=null;var c=y.getHashPath();o===g.PUSH?c!==u?window.location.hash=u:"production"!==r.env.NODE_ENV?p["default"](!1,"You cannot PUSH the same path using hash history"):void 0:c!==u&&y.replaceHashPath(u)}}function i(e){1===++T&&(M=t(O));var n=O.listenBefore(e);return function(){n(),0===--T&&M()}}function a(e){1===++T&&(M=t(O));var n=O.listen(e);return function(){n(),0===--T&&M()}}function c(e){"production"!==r.env.NODE_ENV?p["default"](D||null==e.state,"You cannot use state without a queryKey it will be dropped"):void 0,O.push(e)}function d(e){"production"!==r.env.NODE_ENV?p["default"](D||null==e.state,"You cannot use state without a queryKey it will be dropped"):void 0,O.replace(e)}function f(e){"production"!==r.env.NODE_ENV?p["default"](I,"Hash history go(n) causes a full page reload in this browser"):void 0,O.go(e)}function b(e){return"#"+O.createHref(e)}function x(e){1===++T&&(M=t(O)),O.registerTransitionHook(e)}function k(e){O.unregisterTransitionHook(e),0===--T&&M()}function N(e,t){"production"!==r.env.NODE_ENV?p["default"](D||null==e,"You cannot use state without a queryKey it will be dropped"):void 0,O.pushState(e,t)}function S(e,t){"production"!==r.env.NODE_ENV?p["default"](D||null==e,"You cannot use state without a queryKey it will be dropped"):void 0,O.replaceState(e,t)}var P=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];v.canUseDOM?void 0:"production"!==r.env.NODE_ENV?m["default"](!1,"Hash history needs a DOM"):m["default"](!1);var D=P.queryKey;(void 0===D||D)&&(D="string"==typeof D?D:C);var O=_["default"](h({},P,{getCurrentLocation:e,finishTransition:n,saveState:w.saveState})),T=0,M=void 0,I=y.supportsGoWithoutReloadUsingHash();return h({},O,{listenBefore:i,listen:a,push:c,replace:d,go:f,createHref:b,registerTransitionHook:x,unregisterTransitionHook:k,pushState:N,replaceState:S})}t.__esModule=!0;var h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d=n(167),p=i(d),f=n(169),m=i(f),g=n(170),v=n(171),y=n(172),w=n(173),b=n(174),_=i(b),x=n(181),E=i(x),C="_k";t["default"]=c,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){(function(t){"use strict";var n=function(e,n,r,i,a,o,s,l){if("production"!==t.env.NODE_ENV&&void 0===n)throw new Error("invariant requires an error message argument");if(!e){var u;if(void 0===n)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,i,a,o,s,l],h=0;u=new Error(n.replace(/%s/g,function(){return c[h++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}};e.exports=n}).call(t,n(5))},function(e,t){"use strict";t.__esModule=!0;var n="PUSH";t.PUSH=n;var r="REPLACE";t.REPLACE=r;var i="POP";t.POP=i,t["default"]={PUSH:n,REPLACE:r,POP:i}},function(e,t){"use strict";t.__esModule=!0;var n=!("undefined"==typeof window||!window.document||!window.document.createElement);t.canUseDOM=n},function(e,t){"use strict";function n(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent("on"+t,n)}function r(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent("on"+t,n)}function i(){return window.location.href.split("#")[1]||""}function a(e){window.location.replace(window.location.pathname+window.location.search+"#"+e)}function o(){return window.location.pathname+window.location.search+window.location.hash}function s(e){e&&window.history.go(e)}function l(e,t){t(window.confirm(e))}function u(){var e=navigator.userAgent;return(e.indexOf("Android 2.")===-1&&e.indexOf("Android 4.0")===-1||e.indexOf("Mobile Safari")===-1||e.indexOf("Chrome")!==-1||e.indexOf("Windows Phone")!==-1)&&(e.indexOf("CriOS")===-1&&(window.history&&"pushState"in window.history))}function c(){var e=navigator.userAgent;return e.indexOf("Firefox")===-1}t.__esModule=!0,t.addEventListener=n,t.removeEventListener=r,t.getHashPath=i,t.replaceHashPath=a,t.getWindowPath=o,t.go=s,t.getUserConfirmation=l,t.supportsHistory=u,t.supportsGoWithoutReloadUsingHash=c},function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e){return u+e}function a(t,n){try{window.sessionStorage.setItem(i(t),JSON.stringify(n))}catch(r){if(r.name===h)return void("production"!==e.env.NODE_ENV?l["default"](!1,"[history] Unable to save state; sessionStorage is not available due to security settings"):void 0);if(r.name===c&&0===window.sessionStorage.length)return void("production"!==e.env.NODE_ENV?l["default"](!1,"[history] Unable to save state; sessionStorage is not available in Safari private mode"):void 0);throw r}}function o(t){var n=void 0;try{n=window.sessionStorage.getItem(i(t))}catch(r){if(r.name===h)return"production"!==e.env.NODE_ENV?l["default"](!1,"[history] Unable to read state; sessionStorage is not available due to security settings"):void 0,null}if(n)try{return JSON.parse(n)}catch(r){}return null}t.__esModule=!0,t.saveState=a,t.readState=o;var s=n(167),l=r(s),u="@@History/",c="QuotaExceededError",h="SecurityError"}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e){function t(e){return u.canUseDOM?void 0:"production"!==r.env.NODE_ENV?l["default"](!1,"DOM history needs a DOM"):l["default"](!1),n.listen(e)}var n=d["default"](o({getUserConfirmation:c.getUserConfirmation},e,{go:c.go}));return o({},n,{listen:t})}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=n(169),l=i(s),u=n(171),c=n(172),h=n(175),d=i(h);t["default"]=a,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e){return Math.random().toString(36).substr(2,e)}function a(e,t){return e.pathname===t.pathname&&e.search===t.search&&e.key===t.key&&u["default"](e.state,t.state)}function o(){function e(e){return B.push(e),function(){B=B.filter(function(t){return t!==e})}}function t(){return F&&F.action===h.POP?z.indexOf(F.key):j?z.indexOf(j.key):-1}function n(e){var n=t();j=e,j.action===h.PUSH?z=[].concat(z.slice(0,n+1),[j.key]):j.action===h.REPLACE&&(z[n]=j.key),V.forEach(function(e){e(j)})}function r(e){if(V.push(e),j)e(j);else{var t=T();z=[t.key],n(t)}return function(){V=V.filter(function(t){return t!==e})}}function o(e,t){c.loopAsync(B.length,function(t,n,r){m["default"](B[t],e,function(e){null!=e?r(e):n()})},function(e){A&&"string"==typeof e?A(e,function(e){t(e!==!1)}):t(e!==!1)})}function l(e){j&&a(j,e)||(F=e,o(e,function(t){if(F===e)if(t){if(e.action===h.PUSH){var r=_(j),i=_(e);i===r&&(e.action=h.REPLACE)}M(e)!==!1&&n(e)}else if(j&&e.action===h.POP){var a=z.indexOf(j.key),o=z.indexOf(e.key);a!==-1&&o!==-1&&R(a-o)}}))}function u(e){l(E(e,h.PUSH,y()))}function d(e){l(E(e,h.REPLACE,y()))}function f(){R(-1)}function g(){R(1)}function y(){return i(L)}function _(e){if(null==e||"string"==typeof e)return e;var t=e.pathname,n=e.search,r=e.hash,i=t;return n&&(i+=n),r&&(i+=r),i}function x(e){return _(e)}function E(e,t){var n=arguments.length<=2||void 0===arguments[2]?y():arguments[2];return"object"==typeof t&&("string"==typeof e&&(e=v["default"](e)),e=s({},e,{state:t}),t=n,n=arguments[3]||y()),p["default"](e,t,n)}function C(e){j?(k(j,e),n(j)):k(T(),e)}function k(e,t){e.state=s({},e.state,t),I(e.key,e.state)}function N(e){B.indexOf(e)===-1&&B.push(e)}function S(e){B=B.filter(function(t){return t!==e})}function P(e,t){"string"==typeof t&&(t=v["default"](t)),u(s({state:e},t))}function D(e,t){"string"==typeof t&&(t=v["default"](t)),d(s({state:e},t))}var O=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],T=O.getCurrentLocation,M=O.finishTransition,I=O.saveState,R=O.go,L=O.keyLength,A=O.getUserConfirmation;"number"!=typeof L&&(L=b);var B=[],z=[],V=[],j=void 0,F=void 0;return{listenBefore:e,listen:r,transitionTo:l,push:u,replace:d,go:R,goBack:f,goForward:g,createKey:y,createPath:_,createHref:x,createLocation:E,setState:w["default"](C,"setState is deprecated; use location.key to save state instead"),registerTransitionHook:w["default"](N,"registerTransitionHook is deprecated; use listenBefore instead"),unregisterTransitionHook:w["default"](S,"unregisterTransitionHook is deprecated; use the callback returned from listenBefore instead"),pushState:w["default"](P,"pushState is deprecated; use push instead"),replaceState:w["default"](D,"replaceState is deprecated; use replace instead")}}t.__esModule=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=n(176),u=r(l),c=n(179),h=n(170),d=n(180),p=r(d),f=n(183),m=r(f),g=n(181),v=r(g),y=n(184),w=r(y),b=6;t["default"]=o,e.exports=t["default"]},function(e,t,n){function r(e){return null===e||void 0===e}function i(e){return!(!e||"object"!=typeof e||"number"!=typeof e.length)&&("function"==typeof e.copy&&"function"==typeof e.slice&&!(e.length>0&&"number"!=typeof e[0]))}function a(e,t,n){var a,c;if(r(e)||r(t))return!1;if(e.prototype!==t.prototype)return!1;
 if(l(e))return!!l(t)&&(e=o.call(e),t=o.call(t),u(e,t,n));if(i(e)){if(!i(t))return!1;if(e.length!==t.length)return!1;for(a=0;a<e.length;a++)if(e[a]!==t[a])return!1;return!0}try{var h=s(e),d=s(t)}catch(p){return!1}if(h.length!=d.length)return!1;for(h.sort(),d.sort(),a=h.length-1;a>=0;a--)if(h[a]!=d[a])return!1;for(a=h.length-1;a>=0;a--)if(c=h[a],!u(e[c],t[c],n))return!1;return typeof e==typeof t}var o=Array.prototype.slice,s=n(177),l=n(178),u=e.exports=function(e,t,n){return n||(n={}),e===t||(e instanceof Date&&t instanceof Date?e.getTime()===t.getTime():!e||!t||"object"!=typeof e&&"object"!=typeof t?n.strict?e===t:e==t:a(e,t,n))}},function(e,t){function n(e){var t=[];for(var n in e)t.push(n);return t}t=e.exports="function"==typeof Object.keys?Object.keys:n,t.shim=n},function(e,t){function n(e){return"[object Arguments]"==Object.prototype.toString.call(e)}function r(e){return e&&"object"==typeof e&&"number"==typeof e.length&&Object.prototype.hasOwnProperty.call(e,"callee")&&!Object.prototype.propertyIsEnumerable.call(e,"callee")||!1}var i="[object Arguments]"==function(){return Object.prototype.toString.call(arguments)}();t=e.exports=i?n:r,t.supported=n,t.unsupported=r},function(e,t){"use strict";function n(e,t,n){function r(){o=!0,n.apply(this,arguments)}function i(){o||(a<e?t.call(this,a++,i,r):r.apply(this,arguments))}var a=0,o=!1;i()}t.__esModule=!0,t.loopAsync=n},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(){var e=arguments.length<=0||void 0===arguments[0]?"/":arguments[0],t=arguments.length<=1||void 0===arguments[1]?o.POP:arguments[1],n=arguments.length<=2||void 0===arguments[2]?null:arguments[2],r=arguments.length<=3||void 0===arguments[3]?null:arguments[3];"string"==typeof e&&(e=l["default"](e)),"object"==typeof t&&(e=a({},e,{state:t}),t=n||o.POP,n=r);var i=e.pathname||"/",s=e.search||"",u=e.hash||"",c=e.state||null;return{pathname:i,search:s,hash:u,state:c,action:t,key:n}}t.__esModule=!0;var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=n(170),s=n(181),l=r(s);t["default"]=i,e.exports=t["default"]},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=u["default"](e),n="",i="";"production"!==r.env.NODE_ENV?s["default"](e===t,'A path must be pathname + search + hash only, not a fully qualified URL like "%s"',e):void 0;var a=t.indexOf("#");a!==-1&&(i=t.substring(a),t=t.substring(0,a));var o=t.indexOf("?");return o!==-1&&(n=t.substring(o),t=t.substring(0,o)),""===t&&(t="/"),{pathname:t,search:n,hash:i}}t.__esModule=!0;var o=n(167),s=i(o),l=n(182),u=i(l);t["default"]=a,e.exports=t["default"]}).call(t,n(5))},function(e,t){"use strict";function n(e){var t=e.match(/^https?:\/\/[^\/]*/);return null==t?e:e.substring(t[0].length)}t.__esModule=!0,t["default"]=n,e.exports=t["default"]},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t,n){var i=e(t,n);e.length<2?n(i):"production"!==r.env.NODE_ENV?s["default"](void 0===i,'You should not "return" in a transition hook with a callback argument; call the callback instead'):void 0}t.__esModule=!0;var o=n(167),s=i(o);t["default"]=a,e.exports=t["default"]}).call(t,n(5))},function(e,t){"use strict";function n(e){return e}t.__esModule=!0,t["default"]=n,e.exports=t["default"]},function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e){return null==e||p["default"].isValidElement(e)}function a(e){return i(e)||Array.isArray(e)&&e.every(i)}function o(t,n,r){t=t||"UnknownComponent";for(var i in n)if(n.hasOwnProperty(i)){var a=n[i](r,i,t);a instanceof Error&&("production"!==e.env.NODE_ENV?m["default"](!1,a.message):void 0)}}function s(e,t){return h({},e,t)}function l(e){var t=e.type,n=s(t.defaultProps,e.props);if(t.propTypes&&o(t.displayName||t.name,t.propTypes,n),n.children){var r=u(n.children,n);r.length&&(n.childRoutes=r),delete n.children}return n}function u(e,t){var n=[];return p["default"].Children.forEach(e,function(e){if(p["default"].isValidElement(e))if(e.type.createRouteFromReactElement){var r=e.type.createRouteFromReactElement(e,t);r&&n.push(r)}else n.push(l(e))}),n}function c(e){return a(e)?e=u(e):e&&!Array.isArray(e)&&(e=[e]),e}t.__esModule=!0;var h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.isReactChildren=a,t.createRouteFromReactElement=l,t.createRoutesFromReactChildren=u,t.createRoutes=c;var d=n(2),p=r(d),f=n(167),m=r(f)}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=n(169),u=i(l),c=n(2),h=i(c),d=n(185),p=n(187),f=i(p),m=h["default"].PropTypes,g=m.array,v=m.func,y=m.object,w=function(e){function t(){a(this,t),e.apply(this,arguments)}return o(t,e),t.prototype.getChildContext=function(){var e=this.props,t=e.history,n=e.location;return{history:t,location:n}},t.prototype.createElement=function(e,t){return null==e?null:this.props.createElement(e,t)},t.prototype.render=function(){var e=this,t=this.props,n=t.history,i=t.location,a=t.routes,o=t.params,l=t.components,c=null;return l&&(c=l.reduceRight(function(t,r,l){if(null==r)return t;var u=a[l],c=f["default"](u,o),h={history:n,location:i,params:o,route:u,routeParams:c,routes:a};if(d.isReactChildren(t))h.children=t;else if(t)for(var p in t)t.hasOwnProperty(p)&&(h[p]=t[p]);if("object"==typeof r){var m={};for(var g in r)r.hasOwnProperty(g)&&(m[g]=e.createElement(r[g],s({key:g},h)));return m}return e.createElement(r,h)},c)),null===c||c===!1||h["default"].isValidElement(c)?void 0:"production"!==r.env.NODE_ENV?u["default"](!1,"The root route must render a single element"):u["default"](!1),c},t}(c.Component);w.propTypes={history:y.isRequired,createElement:v.isRequired,location:y.isRequired,routes:g.isRequired,params:y.isRequired,components:g.isRequired},w.defaultProps={createElement:h["default"].createElement},w.childContextTypes={history:y.isRequired,location:y.isRequired},t["default"]=w,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";function r(e,t){var n={};if(!e.path)return n;var r=i.getParamNames(e.path);for(var a in t)t.hasOwnProperty(a)&&r.indexOf(a)!==-1&&(n[a]=t[a]);return n}t.__esModule=!0;var i=n(188);t["default"]=r,e.exports=t["default"]},function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function a(e){return i(e).replace(/\/+/g,"/+")}function o(e){for(var t="",n=[],r=[],i=void 0,o=0,s=/:([a-zA-Z_$][a-zA-Z0-9_$]*)|\*\*|\*|\(|\)/g;i=s.exec(e);)i.index!==o&&(r.push(e.slice(o,i.index)),t+=a(e.slice(o,i.index))),i[1]?(t+="([^/?#]+)",n.push(i[1])):"**"===i[0]?(t+="([\\s\\S]*)",n.push("splat")):"*"===i[0]?(t+="([\\s\\S]*?)",n.push("splat")):"("===i[0]?t+="(?:":")"===i[0]&&(t+=")?"),r.push(i[0]),o=s.lastIndex;return o!==e.length&&(r.push(e.slice(o,e.length)),t+=a(e.slice(o,e.length))),{pattern:e,regexpSource:t,paramNames:n,tokens:r}}function s(e){return e in f||(f[e]=o(e)),f[e]}function l(e,t){"/"!==e.charAt(0)&&(e="/"+e),"/"!==t.charAt(0)&&(t="/"+t);var n=s(e),r=n.regexpSource,i=n.paramNames,a=n.tokens;r+="/*";var o="*"!==a[a.length-1];o&&(r+="([\\s\\S]*?)");var l=t.match(new RegExp("^"+r+"$","i")),u=void 0,c=void 0;if(null!=l){if(o){u=l.pop();var h=l[0].substr(0,l[0].length-u.length);if(u&&"/"!==h.charAt(h.length-1))return{remainingPathname:null,paramNames:i,paramValues:null}}else u="";c=l.slice(1).map(function(e){return null!=e?decodeURIComponent(e):e})}else u=c=null;return{remainingPathname:u,paramNames:i,paramValues:c}}function u(e){return s(e).paramNames}function c(e,t){var n=l(e,t),r=n.paramNames,i=n.paramValues;return null!=i?r.reduce(function(e,t,n){return e[t]=i[n],e},{}):null}function h(t,n){n=n||{};for(var r=s(t),i=r.tokens,a=0,o="",l=0,u=void 0,c=void 0,h=void 0,d=0,f=i.length;d<f;++d)u=i[d],"*"===u||"**"===u?(h=Array.isArray(n.splat)?n.splat[l++]:n.splat,null!=h||a>0?void 0:"production"!==e.env.NODE_ENV?p["default"](!1,'Missing splat #%s for path "%s"',l,t):p["default"](!1),null!=h&&(o+=encodeURI(h))):"("===u?a+=1:")"===u?a-=1:":"===u.charAt(0)?(c=u.substring(1),h=n[c],null!=h||a>0?void 0:"production"!==e.env.NODE_ENV?p["default"](!1,'Missing "%s" parameter for path "%s"',c,t):p["default"](!1),null!=h&&(o+=encodeURIComponent(h))):o+=u;return o.replace(/\/+/g,"/")}t.__esModule=!0,t.compilePattern=s,t.matchPattern=l,t.getParamNames=u,t.getParams=c,t.formatPattern=h;var d=n(169),p=r(d),f={}}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function o(e){for(var t in e)if(e.hasOwnProperty(t))return!0;return!1}function s(e){return function(){function t(e,t){var n=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];return y["default"](e,t,n,S.location,S.routes,S.params)}function n(e){var t=e.pathname,n=e.query,r=e.state;return N.createLocation(N.createPath(t,n),r,h.REPLACE)}function i(e,t){P&&P.location===e?s(P,t):x["default"](C,e,function(n,r){n?t(n):r?s(l({},r,{location:e}),t):t()})}function s(e,t){var r=m["default"](S,e),i=r.leaveRoutes,a=r.enterRoutes;g.runLeaveHooks(i),g.runEnterHooks(a,e,function(r,i){r?t(r):i?t(null,n(i)):b["default"](e,function(n,r){n?t(n):t(null,null,S=l({},e,{components:r}))})})}function u(e){return e.__id__||(e.__id__=D++)}function d(e){return e.reduce(function(e,t){return e.push.apply(e,O[u(t)]),e},[])}function f(e,t){x["default"](C,e,function(n,r){if(null==r)return void t();P=l({},r,{location:e});for(var i=d(m["default"](S,P).leaveRoutes),a=void 0,o=0,s=i.length;null==a&&o<s;++o)a=i[o](e);t(a)})}function v(){if(S.routes){for(var e=d(S.routes),t=void 0,n=0,r=e.length;"string"!=typeof t&&n<r;++n)t=e[n]();return t}}function w(e,t){var n=u(e),r=O[n];if(null==r){var i=!o(O);r=O[n]=[t],i&&(T=N.listenBefore(f),N.listenBeforeUnload&&(M=N.listenBeforeUnload(v)))}else r.indexOf(t)===-1&&r.push(t);return function(){var e=O[n];if(null!=e){var r=e.filter(function(e){return e!==t});0===r.length?(delete O[n],o(O)||(T&&(T(),T=null),M&&(M(),M=null))):O[n]=r}}}function _(e){return N.listen(function(t){S.location===t?e(null,S):i(t,function(n,i,a){n?e(n):i?N.transitionTo(i):a?e(null,a):"production"!==r.env.NODE_ENV?c["default"](!1,'Location "%s" did not match any routes',t.pathname+t.search+t.hash):void 0})})}var E=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],C=E.routes,k=a(E,["routes"]),N=p["default"](e)(k),S={},P=void 0,D=1,O={},T=void 0,M=void 0;return l({},N,{isActive:t,match:i,listenBeforeLeavingRoute:w,listen:_})}}t.__esModule=!0;var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=n(167),c=i(u),h=n(170),d=n(190),p=i(d),f=n(193),m=i(f),g=n(194),v=n(196),y=i(v),w=n(197),b=i(w),_=n(198),x=i(_);t["default"]=s,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function o(e){return d.stringify(e).replace(/%20/g,"+")}function s(e){for(var t in e)if(e.hasOwnProperty(t)&&"object"==typeof e[t]&&!Array.isArray(e[t])&&null!==e[t])return!0;return!1}function l(e){return function(){function t(e){if(null==e.query){var t=e.search;e.query=k(t.substring(1)),e[w]={search:t,searchBase:""}}return e}function n(e,t){var n,i=void 0;if(!t||""===(i=C(t)))return e;"production"!==r.env.NODE_ENV?h["default"](C!==o||!s(t),"useQueries does not stringify nested query objects by default; use a custom stringifyQuery function"):void 0,"string"==typeof e&&(e=g["default"](e));var a=e[w],l=void 0;l=a&&e.search===a.search?a.searchBase:e.search||"";var c=l+(l?"&":"?")+i;return u({},e,(n={search:c},n[w]={search:c,searchBase:l},n))}function i(e){return S.listenBefore(function(n,r){f["default"](e,t(n),r)})}function l(e){return S.listen(function(n){e(t(n))})}function c(e){S.push(n(e,e.query))}function d(e){S.replace(n(e,e.query))}function p(e,t){return S.createPath(n(e,t||e.query))}function m(e,t){return S.createHref(n(e,t||e.query))}function v(){return t(S.createLocation.apply(S,arguments))}function _(e,t,n){"string"==typeof t&&(t=g["default"](t)),c(u({state:e},t,{query:n}))}function x(e,t,n){"string"==typeof t&&(t=g["default"](t)),d(u({state:e},t,{query:n}))}var E=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],C=E.stringifyQuery,k=E.parseQueryString,N=a(E,["stringifyQuery","parseQueryString"]),S=e(N);return"function"!=typeof C&&(C=o),"function"!=typeof k&&(k=b),u({},S,{listenBefore:i,listen:l,push:c,replace:d,createPath:p,createHref:m,createLocation:v,pushState:y["default"](_,"pushState is deprecated; use push instead"),replaceState:y["default"](x,"replaceState is deprecated; use replace instead")})}}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=n(167),h=i(c),d=n(191),p=n(183),f=i(p),m=n(181),g=i(m),v=n(184),y=i(v),w="$searchBase",b=d.parse;t["default"]=l,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";var r=n(192);t.extract=function(e){return e.split("?")[1]||""},t.parse=function(e){return"string"!=typeof e?{}:(e=e.trim().replace(/^(\?|#|&)/,""),e?e.split("&").reduce(function(e,t){var n=t.replace(/\+/g," ").split("="),r=n.shift(),i=n.length>0?n.join("="):void 0;return r=decodeURIComponent(r),i=void 0===i?null:decodeURIComponent(i),e.hasOwnProperty(r)?Array.isArray(e[r])?e[r].push(i):e[r]=[e[r],i]:e[r]=i,e},{}):{})},t.stringify=function(e){return e?Object.keys(e).sort().map(function(t){var n=e[t];return void 0===n?"":null===n?t:Array.isArray(n)?n.slice().sort().map(function(e){return r(t)+"="+r(e)}).join("&"):r(t)+"="+r(n)}).filter(function(e){return e.length>0}).join("&"):""}},function(e,t){"use strict";e.exports=function(e){return encodeURIComponent(e).replace(/[!'()*]/g,function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})}},function(e,t,n){"use strict";function r(e,t,n){if(!e.path)return!1;var r=a.getParamNames(e.path);return r.some(function(e){return t.params[e]!==n.params[e]})}function i(e,t){var n=e&&e.routes,i=t.routes,a=void 0,o=void 0;return n?(a=n.filter(function(n){return i.indexOf(n)===-1||r(n,e,t)}),a.reverse(),o=i.filter(function(e){return n.indexOf(e)===-1||a.indexOf(e)!==-1})):(a=[],o=i),{leaveRoutes:a,enterRoutes:o}}t.__esModule=!0;var a=n(188);t["default"]=i,e.exports=t["default"]},function(e,t,n){"use strict";function r(e,t){return function(n,r,i){e.apply(t,arguments),e.length<3&&i()}}function i(e){return e.reduce(function(e,t){return t.onEnter&&e.push(r(t.onEnter,t)),e},[])}function a(e,t,n){function r(e,t,n){o={pathname:t,query:n,state:e}}var a=i(e);if(!a.length)return void n();var o=void 0;s.loopAsync(a.length,function(e,n,i){a[e](t,r,function(e){e||o?i(e,o):n()})},n)}function o(e){for(var t=0,n=e.length;t<n;++t)e[t].onLeave&&e[t].onLeave.call(e[t])}t.__esModule=!0,t.runEnterHooks=a,t.runLeaveHooks=o;var s=n(195)},function(e,t){"use strict";function n(e,t,n){function r(){o=!0,n.apply(this,arguments)}function i(){o||(a<e?t.call(this,a++,i,r):r.apply(this,arguments))}var a=0,o=!1;i()}function r(e,t,n){function r(e,t,r){o||(t?(o=!0,n(t)):(a[e]=r,o=++s===i,o&&n(null,a)))}var i=e.length,a=[];if(0===i)return n(null,a);var o=!1,s=0;e.forEach(function(e,n){t(e,n,function(e,t){r(n,e,t)})})}t.__esModule=!0,t.loopAsync=n,t.mapAsync=r},function(e,t,n){"use strict";function r(e,t){if(e==t)return!0;if(null==e||null==t)return!1;if(Array.isArray(e))return Array.isArray(t)&&e.length===t.length&&e.every(function(e,n){return r(e,t[n])});if("object"==typeof e){for(var n in e)if(e.hasOwnProperty(n))if(void 0===e[n]){if(void 0!==t[n])return!1}else{if(!t.hasOwnProperty(n))return!1;if(!r(e[n],t[n]))return!1}return!0}return String(e)===String(t)}function i(e,t,n){return e.every(function(e,r){return String(t[r])===String(n[e])})}function a(e,t,n){for(var r=e,a=[],o=[],s=0,l=t.length;s<l;++s){var c=t[s],h=c.path||"";if("/"===h.charAt(0)&&(r=e,a=[],o=[]),null!==r){var d=u.matchPattern(h,r);r=d.remainingPathname,a=[].concat(a,d.paramNames),o=[].concat(o,d.paramValues)}if(""===r&&c.path&&i(a,o,n))return s}return null}function o(e,t,n,r){var i=a(e,t,n);return null!==i&&(!r||t.slice(i+1).every(function(e){return!e.path}))}function s(e,t){return null==t?null==e:null==e||r(e,t)}function l(e,t,n,r,i,a){return null!=r&&(!!o(e,i,a,n)&&s(t,r.query))}t.__esModule=!0;var u=n(188);t["default"]=l,e.exports=t["default"]},function(e,t,n){"use strict";function r(e,t,n){t.component||t.components?n(null,t.component||t.components):t.getComponent?t.getComponent(e,n):t.getComponents?t.getComponents(e,n):n()}function i(e,t){a.mapAsync(e.routes,function(t,n,i){r(e.location,t,i)},t)}t.__esModule=!0;var a=n(195);t["default"]=i,e.exports=t["default"]},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t,n){e.childRoutes?n(null,e.childRoutes):e.getChildRoutes?e.getChildRoutes(t,function(e,t){n(e,!e&&m.createRoutes(t))}):n()}function o(e,t,n){e.indexRoute?n(null,e.indexRoute):e.getIndexRoute?e.getIndexRoute(t,function(e,t){n(e,!e&&m.createRoutes(t)[0])}):e.childRoutes?!function(){var r=e.childRoutes.filter(function(e){return!e.hasOwnProperty("path")});p.loopAsync(r.length,function(e,n,i){o(r[e],t,function(t,a){if(t||a){var o=[r[e]].concat(Array.isArray(a)?a:[a]);i(t,o)}else n()})},function(e,t){n(null,t)})}():n()}function s(e,t,n){return t.reduce(function(e,t,r){var i=n&&n[r];return Array.isArray(e[t])?e[t].push(i):t in e?e[t]=[e[t],i]:e[t]=i,e},e)}function l(e,t){return s({},e,t)}function u(e,t,n,i,s,u){var h=e.path||"";if("/"===h.charAt(0)&&(n=t.pathname,i=[],s=[]),null!==n){var p=f.matchPattern(h,n);if(n=p.remainingPathname,i=[].concat(i,p.paramNames),s=[].concat(s,p.paramValues),""===n&&e.path){var m=function(){var n={routes:[e],params:l(i,s)};return o(e,t,function(e,t){if(e)u(e);else{if(Array.isArray(t)){var i;"production"!==r.env.NODE_ENV?d["default"](t.every(function(e){return!e.path}),"Index routes should not have paths"):void 0,(i=n.routes).push.apply(i,t)}else t&&("production"!==r.env.NODE_ENV?d["default"](!t.path,"Index routes should not have paths"):void 0,n.routes.push(t));u(null,n)}}),{v:void 0}}();if("object"==typeof m)return m.v}}null!=n||e.childRoutes?a(e,t,function(r,a){r?u(r):a?c(a,t,function(t,n){t?u(t):n?(n.routes.unshift(e),u(null,n)):u()},n,i,s):u()}):u()}function c(e,t,n){var r=arguments.length<=3||void 0===arguments[3]?t.pathname:arguments[3],i=arguments.length<=4||void 0===arguments[4]?[]:arguments[4],a=arguments.length<=5||void 0===arguments[5]?[]:arguments[5];return function(){p.loopAsync(e.length,function(n,o,s){u(e[n],t,r,i,a,function(e,t){e||t?s(e,t):o()})},n)}()}t.__esModule=!0;var h=n(167),d=i(h),p=n(195),f=n(188),m=n(185);t["default"]=c,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";function r(e,t,n){if(e[t])return new Error("<"+n+'> should not have a "'+t+'" prop')}t.__esModule=!0,t.falsy=r;var i=n(2),a=i.PropTypes.func,o=i.PropTypes.object,s=i.PropTypes.arrayOf,l=i.PropTypes.oneOfType,u=i.PropTypes.element,c=i.PropTypes.shape,h=i.PropTypes.string,d=c({listen:a.isRequired,pushState:a.isRequired,replaceState:a.isRequired,go:a.isRequired});t.history=d;var p=c({pathname:h.isRequired,search:h.isRequired,state:o,action:h.isRequired,key:h});t.location=p;var f=l([a,h]);t.component=f;var m=l([f,o]);t.components=m;var g=l([o,u]);t.route=g;var v=l([g,s(g)]);t.routes=v,t["default"]={falsy:r,history:d,location:p,component:f,components:m,route:g}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){return 0===e.button}function l(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function u(e){for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}t.__esModule=!0;var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},h=n(2),d=r(h),p=d["default"].PropTypes,f=p.bool,m=p.object,g=p.string,v=p.func,y=function(e){function t(){a(this,t),e.apply(this,arguments)}return o(t,e),t.prototype.handleClick=function(e){var t=!0;if(this.props.onClick&&this.props.onClick(e),!l(e)&&s(e)){if(e.defaultPrevented===!0&&(t=!1),this.props.target)return void(t||e.preventDefault());if(e.preventDefault(),t){var n=this.props,r=n.state,i=n.to,a=n.query,o=n.hash;o&&(i+=o),this.context.history.pushState(r,i,a)}}},t.prototype.render=function(){var e=this,t=this.props,n=t.to,r=t.query,a=t.hash,o=(t.state,t.activeClassName),s=t.activeStyle,l=t.onlyActiveOnIndex,h=i(t,["to","query","hash","state","activeClassName","activeStyle","onlyActiveOnIndex"]);h.onClick=function(t){return e.handleClick(t)};var p=this.context.history;return p&&(h.href=p.createHref(n,r),a&&(h.href+=a),(o||null!=s&&!u(s))&&p.isActive(n,r,l)&&(o&&(h.className+=""===h.className?o:" "+o),s&&(h.style=c({},h.style,s)))),d["default"].createElement("a",h)},t}(h.Component);y.contextTypes={history:m},y.propTypes={to:g.isRequired,query:m,hash:g,state:m,activeStyle:m,activeClassName:g,onlyActiveOnIndex:f.isRequired,onClick:v},y.defaultProps={onlyActiveOnIndex:!1,className:"",style:{}},t["default"]=y,e.exports=t["default"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=n(2),l=r(s),u=n(200),c=r(u),h=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(t,e),t.prototype.render=function(){return l["default"].createElement(c["default"],o({},this.props,{onlyActiveOnIndex:!0}))},t}(s.Component);t["default"]=h,e.exports=t["default"]},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var s=n(167),l=i(s),u=n(169),c=i(u),h=n(2),d=i(h),p=n(203),f=i(p),m=n(199),g=d["default"].PropTypes,v=g.string,y=g.object,w=function(e){function t(){a(this,t),e.apply(this,arguments)}return o(t,e),t.prototype.render=function(){"production"!==r.env.NODE_ENV?c["default"](!1,"<IndexRedirect> elements are for router configuration only and should not be rendered"):c["default"](!1)},t}(h.Component);w.propTypes={to:v.isRequired,query:y,state:y,onEnter:m.falsy,children:m.falsy},w.createRouteFromReactElement=function(e,t){t?t.indexRoute=f["default"].createRouteFromReactElement(e):"production"!==r.env.NODE_ENV?l["default"](!1,"An <IndexRedirect> does not make sense at the root of your route config"):void 0},t["default"]=w,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var s=n(169),l=i(s),u=n(2),c=i(u),h=n(185),d=n(188),p=n(199),f=c["default"].PropTypes,m=f.string,g=f.object,v=function(e){function t(){a(this,t),e.apply(this,arguments)}return o(t,e),t.prototype.render=function(){"production"!==r.env.NODE_ENV?l["default"](!1,"<Redirect> elements are for router configuration only and should not be rendered"):l["default"](!1)},t}(u.Component);v.createRouteFromReactElement=function(e){var t=h.createRouteFromReactElement(e);return t.from&&(t.path=t.from),t.onEnter=function(e,n){var r=e.location,i=e.params,a=void 0;if("/"===t.to.charAt(0))a=d.formatPattern(t.to,i);else if(t.to){var o=e.routes.indexOf(t),s=v.getRoutePattern(e.routes,o-1),l=s.replace(/\/*$/,"/")+t.to;a=d.formatPattern(l,i)}else a=r.pathname;n(t.state||r.state,a,t.query||r.query)},t},v.getRoutePattern=function(e,t){for(var n="",r=t;r>=0;r--){var i=e[r],a=i.path||"";if(n=a.replace(/\/*$/,"/")+n,0===a.indexOf("/"))break}return"/"+n},v.propTypes={path:m,from:m,to:m.isRequired,query:g,state:g,onEnter:p.falsy,children:p.falsy},t["default"]=v,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var s=n(167),l=i(s),u=n(169),c=i(u),h=n(2),d=i(h),p=n(185),f=n(199),m=d["default"].PropTypes.func,g=function(e){function t(){a(this,t),e.apply(this,arguments)}return o(t,e),t.prototype.render=function(){"production"!==r.env.NODE_ENV?c["default"](!1,"<IndexRoute> elements are for router configuration only and should not be rendered"):c["default"](!1)},t}(h.Component);g.propTypes={path:f.falsy,component:f.component,components:f.components,getComponent:m,getComponents:m},g.createRouteFromReactElement=function(e,t){t?t.indexRoute=p.createRouteFromReactElement(e):"production"!==r.env.NODE_ENV?l["default"](!1,"An <IndexRoute> does not make sense at the root of your route config"):void 0},t["default"]=g,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var s=n(169),l=i(s),u=n(2),c=i(u),h=n(185),d=n(199),p=c["default"].PropTypes,f=p.string,m=p.func,g=function(e){function t(){a(this,t),e.apply(this,arguments)}return o(t,e),t.prototype.render=function(){"production"!==r.env.NODE_ENV?l["default"](!1,"<Route> elements are for router configuration only and should not be rendered"):l["default"](!1)},t}(u.Component);g.createRouteFromReactElement=h.createRouteFromReactElement,g.propTypes={path:f,component:d.component,components:d.components,getComponent:m,getComponents:m},t["default"]=g,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";t.__esModule=!0;var r=n(199),i={contextTypes:{history:r.history},componentWillMount:function(){this.history=this.context.history}};t["default"]=i,e.exports=t["default"]},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var a=n(2),o=i(a),s=n(169),l=i(s),u=o["default"].PropTypes.object,c={contextTypes:{history:u.isRequired,route:u},propTypes:{route:u},componentDidMount:function(){this.routerWillLeave?void 0:"production"!==r.env.NODE_ENV?l["default"](!1,"The Lifecycle mixin requires you to define a routerWillLeave method"):l["default"](!1);var e=this.props.route||this.context.route;e?void 0:"production"!==r.env.NODE_ENV?l["default"](!1,"The Lifecycle mixin must be used on either a) a <Route component> or b) a descendant of a <Route component> that uses the RouteContext mixin"):l["default"](!1),this._unlistenBeforeLeavingRoute=this.context.history.listenBeforeLeavingRoute(e,this.routerWillLeave)},componentWillUnmount:function(){this._unlistenBeforeLeavingRoute&&this._unlistenBeforeLeavingRoute()}};t["default"]=c,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var i=n(2),a=r(i),o=a["default"].PropTypes.object,s={propTypes:{route:o.isRequired},childContextTypes:{route:o.isRequired},getChildContext:function(){return{route:this.props.route}}};t["default"]=s,e.exports=t["default"]},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){var n=e.routes,i=e.location,a=e.parseQueryString,s=e.stringifyQuery,u=e.basename;i?void 0:"production"!==r.env.NODE_ENV?l["default"](!1,"match needs a location"):l["default"](!1);var c=g({routes:p.createRoutes(n),parseQueryString:a,stringifyQuery:s,basename:u});"string"==typeof i&&(i=c.createLocation(i)),c.match(i,function(e,n,r){t(e,n,r&&o({},r,{history:c}))})}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=n(169),l=i(s),u=n(210),c=i(u),h=n(211),d=i(h),p=n(185),f=n(189),m=i(f),g=m["default"](d["default"](c["default"]));t["default"]=a,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){(function(r){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function a(e){return e.filter(function(e){return e.state}).reduce(function(e,t){return e[t.key]=t.state,e},{})}function o(){function e(e,t){w[e]=t}function t(e){return w[e]}function n(){var e=v[y],n=e.key,r=e.basename,i=e.pathname,a=e.search,o=(r||"")+i+(a||""),l=void 0;n?l=t(n):(l=null,n=p.createKey(),e.key=n);var u=g["default"](o);return p.createLocation(s({},u,{state:l}),void 0,n)}function i(e){var t=y+e;return t>=0&&t<v.length}function o(e){if(e){if(!i(e))return void("production"!==r.env.NODE_ENV?u["default"](!1,"Cannot go(%s) there is not enough history",e):void 0);y+=e;var t=n();
-p.transitionTo(s({},t,{action:d.POP}))}}function l(t){switch(t.action){case d.PUSH:y+=1,y<v.length&&v.splice(y),v.push(t),e(t.key,t.state);break;case d.REPLACE:v[y]=t,e(t.key,t.state)}}var c=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];Array.isArray(c)?c={entries:c}:"string"==typeof c&&(c={entries:[c]});var p=f["default"](s({},c,{getCurrentLocation:n,finishTransition:l,saveState:e,go:o})),m=c,v=m.entries,y=m.current;"string"==typeof v?v=[v]:Array.isArray(v)||(v=["/"]),v=v.map(function(e){var t=p.createKey();return"string"==typeof e?{pathname:e,key:t}:"object"==typeof e&&e?s({},e,{key:t}):void("production"!==r.env.NODE_ENV?h["default"](!1,"Unable to create history entry from %s",e):h["default"](!1))}),null==y?y=v.length-1:y>=0&&y<v.length?void 0:"production"!==r.env.NODE_ENV?h["default"](!1,"Current index must be >= 0 and < %s, was %s",v.length,y):h["default"](!1);var w=a(v);return p}t.__esModule=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=n(167),u=i(l),c=n(169),h=i(c),d=n(170),p=n(175),f=i(p),m=n(181),g=i(m);t["default"]=o,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e){return function(){function t(e){return b&&null==e.basename&&(0===e.pathname.indexOf(b)?(e.pathname=e.pathname.substring(b.length),e.basename=b,""===e.pathname&&(e.pathname="/")):e.basename=""),e}function n(e){if(!b)return e;"string"==typeof e&&(e=p["default"](e));var t=e.pathname,n="/"===b.slice(-1)?b:b+"/",r="/"===t.charAt(0)?t.slice(1):t,i=n+r;return o({},e,{pathname:i})}function r(e){return x.listenBefore(function(n,r){u["default"](e,t(n),r)})}function a(e){return x.listen(function(n){e(t(n))})}function l(e){x.push(n(e))}function c(e){x.replace(n(e))}function d(e){return x.createPath(n(e))}function f(e){return x.createHref(n(e))}function g(){return t(x.createLocation.apply(x,arguments))}function v(e,t){"string"==typeof t&&(t=p["default"](t)),l(o({state:e},t))}function y(e,t){"string"==typeof t&&(t=p["default"](t)),c(o({state:e},t))}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],b=w.basename,_=i(w,["basename"]),x=e(_);if(null==b&&s.canUseDOM){var E=document.getElementsByTagName("base")[0];E&&(b=h["default"](E.href))}return o({},x,{listenBefore:r,listen:a,push:l,replace:c,createPath:d,createHref:f,createLocation:g,pushState:m["default"](v,"pushState is deprecated; use push instead"),replaceState:m["default"](y,"replaceState is deprecated; use replace instead")})}}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=n(171),l=n(183),u=r(l),c=n(182),h=r(c),d=n(181),p=r(d),f=n(184),m=r(f);t["default"]=a,e.exports=t["default"]},function(e,t,n){"use strict";e.exports={preface:n(213),introduction:n(214),whatis:n(224),explanation:n(225),control:n(228),extended:n(229),matrix:n(230),decasteljau:n(231),flattening:n(232),splitting:n(233),matrixsplit:n(234),reordering:n(235),derivatives:n(236),pointvectors:n(237),components:n(238),extremities:n(239),boundingbox:n(240),aligning:n(241),tightbounds:n(242),inflections:n(243),canonical:n(244),arclength:n(245),arclengthapprox:n(246),tracing:n(247),intersections:n(248),curveintersection:n(249),abc:n(250),moulding:n(251),pointcurves:n(252),catmullconv:n(253),catmullmoulding:n(254),polybezier:n(255),shapes:n(256),projections:n(257),offsetting:n(258),graduatedoffset:n(259),circles:n(260),circles_cubic:n(261),arcapproximation:n(262),bsplines:n(263),comments:n(274)}},function(e,t,n){"use strict";var r=n(2),i=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:"Preface"}},render:function(){return r.createElement("section",null,r.createElement("h2",null,this.props.title),r.createElement("p",null,"In order to draw things in 2D, we usually rely on lines, which typically get classified into two categories: straight lines, and curves. The first of these are as easy to draw as they are easy to make a computer draw. Give a computer the first and last point in the line, and BAM! straight line. No questions asked."),r.createElement("p",null,"Curves, however, are a much bigger problem. While we can draw curves with ridiculous ease freehand, computers are a bit handicapped in that they can't draw curves unless there is a mathematical function that describes how it should be drawn. In fact, they even need this for straight lines, but the function is ridiculously easy, so we tend to ignore that as far as computers are concerned, all lines are \"functions\", regardless of whether they're straight or curves. However, that does mean that we need to come up with fast-to-compute functions that lead to nice looking curves on a computer. There's a number of these, and in this article we'll focus on a particular function that has received quite a bit of attention, and is used in pretty much anything that can draw curves: \"Bézier\" curves"),r.createElement("p",null,"They're named after ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier"},"Pierre Bézier"),', who is principally responsible for getting them known to the world as a curve well-suited for design work (working for Renault and publishing his investigations in 1962), although he was not the first, or only one, to "invent" these type of curves. One might be tempted to say that the mathematician ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),' was first, investigating the nature of these curves in 1959 while working at Citroën, coming up with a really elegant way of figuring out how to draw them. However, de Casteljau did not publish his work, making the question "who was first" hard to answer in any absolute sense. Or is it? Bézier curves are, at their core, "Bernstein polynomials", a family of mathematical functions investigated by ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein"},"Sergei Natanovich Bernstein"),", with publications on them at least as far back as 1912. Anyway, that's mostly trivia, what you are more likely to care about is that these curves are handy: you can link up multiple Bézier curves so that the combination looks like a single curve. If you've ever drawn Photoshop \"paths\" or worked with vector drawing programs like Flash, Illustrator or Inkscape, those curves you've been drawing are Bézier curves."),r.createElement("p",null,"So, what if you need to program them yourself? What are the pitfalls? How do you draw them? What are the bounding boxes, how do you determine intersections, how can you extrude a curve, in short: how do you do everything that you might want when you do with these curves? That's what this page is for. Prepare to be mathed!"),r.createElement("p",null,"—Pomax (or in the tweetworld, ",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{className:"note"},r.createElement("h2",null,"Note: virtually all Bézier graphics are interactive."),r.createElement("p",null,"This page uses interactive examples, relying heavily on ",r.createElement("a",{href:"http://pomax.github.io/bezierjs/"},"Bezier.js"),', as well as "real" maths (in LaTeX form) which is typeset using the most excellent ',r.createElement("a",{href:"http://MathJax.org"},"MathJax")," library. The page is generated offline as a React application, using Webpack, which has made adding \"view source\" options considerably more challenging. I'm still trying to figure out how to add them back in, but it didn't feel like it should hold up deploying this update compared to the previous years' version."),r.createElement("h2",null,"This book is open source."),r.createElement("p",null,"This book is an open source software project, and lives on two github repositorites. The first is ",r.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo")," and is the purely-for-presentation version you are viewing right now. The other repository is",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),", which is the development version, housing all the html, javascript, and css. You can fork either of these, and pretty much do with them as you please, except for passing it off as your own work wholesale, of course =)"),r.createElement("h2",null,"How complicated is the maths going to be?"),r.createElement("p",null,"Most of the mathematics in this Primer are early high school maths. If you understand basic arithmetic, and you know how to read English, you should be able to get by just fine. There will at times be ",r.createElement("em",null,"far"),' more complicated maths, but if you don\'t feel like digesting them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly.'),r.createElement("h2",null,"Questions, comments:"),r.createElement("p",null,"If you have suggestions for new sections, hit up the ",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"github issue tracker")," (also reachable from the repo linked to in the upper right). If you have questions about the material, there's currently no comment section while I'm doing the rewrite, but you can use the issue tracker for that as well. Once the rewrite is done, I'll add a general comment section back in, and maybe a more topical \"select this section of text and hit the 'question' button to ask a question about it\" system. We'll see."),r.createElement("h2",null,"Buy me a coffee?"),r.createElement("p",null,"If you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you can always ",r.createElement("a",{"class":"link",href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"buy me a coffee"),", however much a coffee is where you live. This work has grown over the years, from a small primer to a 70ish print-page-equivalent reader on the subject of Bézier curves, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing!")))}});e.exports=i},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:"A lightning introduction"}},drawQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},drawCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the things that you can see in the following graphics. They run from some start point to some end point, with their curvature influenced by one or more \"intermediate\" control points. Now, because all the graphics on this page are interactive, go manipulate those curves a bit: click-drag the points, and see how their shape changes based on what you do."),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"Quadratic Bézier curves",setup:this.drawQuadratic,draw:this.drawCurve}),r.createElement(i,{inline:!0,title:"Cubic Bézier curves",setup:this.drawCubic,draw:this.drawCurve})),r.createElement("p",null,"These curves are used a lot in computer aided design and computer aided manufacturing (CAD/CAM) applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape, the Gimp, etc. and in graphic technologies like scalable vector graphics (SVG) and OpenType fonts (ttf/otf). A lot of things use Bézier curves, so if you want to learn more about them... prepare to get your learn on!"))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(216),a=n(218),o=function(e){e=e||window.event;var t=e.target||e.srcElement,n=t.getBoundingClientRect();e.offsetX=e.clientX-n.left,e.offsetY=e.clientY-n.top},s=r.createClass({displayName:"Graphic",Paper:!1,defaultWidth:275,defaultHeight:275,Bezier:a,utils:a.getUtils(),curve:!1,mx:0,my:0,cx:0,cy:0,mp:!1,offset:{x:0,y:0},lpts:[],colorSeed:0,playing:!1,frame:0,playinterval:33,animate:function(){this.playing&&(this.frame++,setTimeout(this.animate,this.playinterval),this.props.draw(this,this.curve))},getFrame:function(){return this.frame},getPlayInterval:function(){return this.playinterval},play:function(){this.playing=!0,this.animate()},pause:function(){this.playing=!1},redraw:function(){this.props.draw&&this.props.draw(this,this.curve)},render:function(){return r.createElement("figure",{className:!!this.props.inline&&"inline"},r.createElement("canvas",{ref:"canvas",tabIndex:"0",onMouseDown:this.mouseDown,onMouseMove:this.mouseMove,onMouseUp:this.mouseUp,onClick:this.onClick,onKeyUp:this.onKeyUp,onKeyDown:this.onKeyDown,onKeyPress:this.onKeyPress}),r.createElement("figcaption",null,this.props.title," ",this.props.children))},componentDidMount:function(){var e=this.refs.canvas;e.width=this.defaultWidth,e.height=this.defaultHeight,this.cvs=e;var t=e.getContext("2d");if(this.ctx=t,this.props.paperjs){var r=this.Paper=n(222);r.setup(e)}this.props.setup&&this.props.setup(this),this.props.draw&&this.props.draw(this,this.curve),this.props.autoplay&&this.play()},mouseDown:function(e){var t=this;o(e),this.mx=e.offsetX,this.my=e.offsetY,this.movingPoint=!1,this.dragging=!1,this.down=!0,this.lpts.forEach(function(e,n){Math.abs(t.mx-e.x)<10&&Math.abs(t.my-e.y)<10&&(t.movingPoint=!0,t.mp=e,t.mp_idx=n,t.cx=e.x,t.cy=e.y)}),this.props.onMouseDown&&this.props.onMouseDown(e,this)},mouseMove:function(e){if(o(e),!this.props["static"]){this.down&&(this.dragging=!0);var t=!1;if(this.lpts.forEach(function(n){var r=e.offsetX,i=e.offsetY;Math.abs(r-n.x)<10&&Math.abs(i-n.y)<10&&(t=t||!0)}),this.cvs.style.cursor=t?"pointer":"default",this.hover={x:e.offsetX,y:e.offsetY},this.movingPoint)if(this.ox=e.offsetX-this.mx,this.oy=e.offsetY-this.my,this.mp.x=this.cx+this.ox,this.mp.y=this.cy+this.oy,this.curve.forEach){for(var n,r,i=0;i<this.curve.length;i++)if(n=this.curve[i],r=n.points,r.indexOf(this.mp)>-1){n.update();break}}else this.curve&&this.curve.update&&this.curve.update()}this.props.onMouseMove&&this.props.onMouseMove(e,this),this.dragging&&this.props.onMouseDrag&&this.props.onMouseDrag(e,this),this.props["static"]||this.playing||!this.props.draw||this.props.draw(this,this.curve)},mouseUp:function(e){return this.down=!1,this.movingPoint?(this.movingPoint=!1,this.mp=!1,void(this.props.onMouseUp&&this.props.onMouseUp(e,this))):void(this.props.onMouseUp&&this.props.onMouseUp(e,this))},onClick:function(e){o(e),this.mx=e.offsetX,this.my=e.offsetY,!this.dragging&&this.props.onClick&&this.props.onClick(e,this)},onKeyUp:function(e){this.props.onKeyUp&&(this.props.onKeyUp(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyDown:function(e){this.props.onKeyDown&&(this.props.onKeyDown(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyPress:function(e){this.props.onKeyPress&&(this.props.onKeyPress(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},reset:function(){this.refs.canvas.width=this.refs.canvas.width,this.ctx.strokeStyle="black",this.ctx.lineWidth=1,this.ctx.fillStyle="none",this.offset={x:0,y:0},this.colorSeed=0},setSize:function(e,t){this.defaultWidth=e,this.defaultHeight=t,this.refs.canvas.width=e,this.refs.canvas.height=t},setCurves:function(e){this.setCurve(e)},setCurve:function(e){var t=[];e=e instanceof Array?e:Array.prototype.slice.call(arguments),e.forEach(function(e){t=t.concat(e.points)}),this.curve=1===e.length?e[0]:e,this.lpts=t},getPanelWidth:function(){return this.defaultWidth},getPanelHeight:function(){return this.defaultHeight},getDefaultQuadratic:function(){return new this.Bezier(70,250,20,110,250,60)},getDefaultCubic:function(){return new this.Bezier(120,160,35,200,220,260,220,40)},toImage:function(){var e=this.refs.canvas.toDataURL(),t=new Image;return t.src=e,t},setPanelCount:function(e){var t=this.refs.canvas;t.width=e*this.defaultWidth},setOffset:function(e){this.offset=e},setColor:function(e){this.ctx.strokeStyle=e},getColor:function(){return this.ctx.strokeStyle||"black"},setWeight:function(e){this.ctx.lineWidth=e},noColor:function(e){this.ctx.strokeStyle="transparent"},setRandomColor:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.strokeStyle=i.hsl(t,n,r).alpha(e).css()},setRandomFill:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.fillStyle=i.hsl(t,n,r).alpha(e).css()},setFill:function(e){this.ctx.fillStyle=e},getFill:function(){return this.ctx.fillStyle||"transparent"},noFill:function(){this.ctx.fillStyle="transparent"},drawSkeleton:function(e,t,n){t=t||{x:0,y:0};var r=e.points;if(r.length>2){this.ctx.strokeStyle="lightgrey",this.drawLine(r[0],r[1],t);for(var i=r.length-2,a=1;a<i;a++)this.drawLine(r[a],r[a+1],t);this.drawLine(r[i],r[i+1],t)}this.ctx.strokeStyle="black",this.drawPoints(r,t),n||this.drawCoordinates(e,t)},drawGrid:function(e,t,n){var r,i,a,o,s,l,u=this.defaultWidth,c=this.defaultHeight,h=u/e,d=h/2,p=c/t,f=p/2;for(r=0;r<e;r++)i=d+r*h,s={x:i,y:0},l={x:i,y:c},this.drawLine(s,l,n);for(a=0;a<t;a++)o=f+a*p,s={x:0,y:o},l={x:u,y:o},this.drawLine(s,l,n)},drawHull:function(e,t,n){var r=e instanceof Array?e:e.hull(t);return 6===r.length?(this.drawLine(r[0],r[1],n),this.drawLine(r[1],r[2],n),this.drawLine(r[3],r[4],n)):(this.drawLine(r[0],r[1],n),this.drawLine(r[1],r[2],n),this.drawLine(r[2],r[3],n),this.drawLine(r[4],r[5],n),this.drawLine(r[5],r[6],n),this.drawLine(r[7],r[8],n)),r},drawCoordinates:function(e,t){var n=this;t=t||{x:0,y:0};var r=e.points;this.setFill("black"),r.forEach(function(e){n.text("("+e.x+","+e.y+")",{x:e.x+t.x+5,y:e.y+t.y+10})})},drawFunction:function(e,t){var n,r,i=e.start||0,a=e(i),o=e.end||1,s=e(o),l=e.step||.01,u=e.scale||1;for(r=l;r<o;r+=l)n=e(r,u),this.drawLine(a,n,t),a=n;this.drawLine(n,s,t)},drawCurve:function(e,t){var n=this;t=t||{x:0,y:0};var r=e.points;if(r.length<=3||5<=r.length){var i=e.getLUT(100),a=i[0];return void i.forEach(function(e,r){r&&(n.drawLine(a,e,t),a=e)})}var o=t.x+this.offset.x,s=t.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(r[0].x+o,r[0].y+s),3===r.length?this.ctx.quadraticCurveTo(r[1].x+o,r[1].y+s,r[2].x+o,r[2].y+s):4===r.length&&this.ctx.bezierCurveTo(r[1].x+o,r[1].y+s,r[2].x+o,r[2].y+s,r[3].x+o,r[3].y+s),this.ctx.stroke(),this.ctx.closePath()},drawLine:function(e,t,n){n=n||{x:0,y:0};var r=n.x+this.offset.x,i=n.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(e.x+r,e.y+i),this.ctx.lineTo(t.x+r,t.y+i),this.ctx.stroke()},drawPoint:function(e,t){this.drawCircle(e,1,t)},drawPoints:function(e,t){t=t||{x:0,y:0},e.forEach(function(e){this.drawCircle(e,0!==t.x||0!==t.y?1.5:3,t)}.bind(this))},drawArc:function(e,t){t=t||{x:0,y:0};var n=t.x+this.offset.x,r=t.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(e.x+n,e.y+r),this.ctx.arc(e.x+n,e.y+r,e.r,e.s,e.e),this.ctx.lineTo(e.x+n,e.y+r),this.ctx.fill(),this.ctx.stroke()},drawCircle:function(e,t,n){n=n||{x:0,y:0};var r=n.x+this.offset.x,i=n.y+this.offset.y;this.ctx.beginPath(),this.ctx.arc(e.x+r,e.y+i,t,0,2*Math.PI),this.ctx.stroke()},drawbbox:function(e,t){t=t||{x:0,y:0};var n=t.x+this.offset.x,r=t.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(e.x.min+n,e.y.min+r),this.ctx.lineTo(e.x.min+n,e.y.max+r),this.ctx.lineTo(e.x.max+n,e.y.max+r),this.ctx.lineTo(e.x.max+n,e.y.min+r),this.ctx.closePath(),this.ctx.stroke()},drawRect:function(e,t,n){n=n||{x:0,y:0};var r=n.x+this.offset.x,i=n.y+this.offset.y,a=e.x+r,o=e.y+i,s=t.x-e.x,l=t.y-e.y;this.ctx.beginPath(),this.ctx.moveTo(a,o),this.ctx.lineTo(a+s,o),this.ctx.lineTo(a+s,o+l),this.ctx.lineTo(a,o+l),this.ctx.closePath(),this.ctx.fill(),this.ctx.stroke()},drawPath:function(e,t){var n=this;t=t||{x:0,y:0};var r=t.x+this.offset.x,i=t.y+this.offset.y;this.ctx.beginPath(),e.forEach(function(e,t){return 0===t?n.ctx.moveTo(e.x+r,e.y+i):void n.ctx.lineTo(e.x+r,e.y+i)}),closed&&this.ctx.closePath(),this.ctx.fill(),this.ctx.stroke()},drawShape:function(e,t){t=t||{x:0,y:0};var n=t.x+this.offset.x,r=t.y+this.offset.y,i=e.forward.points.length-1;this.ctx.beginPath(),this.ctx.moveTo(n+e.startcap.points[0].x,r+e.startcap.points[0].y),this.ctx.lineTo(n+e.startcap.points[3].x,r+e.startcap.points[3].y),3===i?this.ctx.bezierCurveTo(n+e.forward.points[1].x,r+e.forward.points[1].y,n+e.forward.points[2].x,r+e.forward.points[2].y,n+e.forward.points[3].x,r+e.forward.points[3].y):this.ctx.quadraticCurveTo(n+e.forward.points[1].x,r+e.forward.points[1].y,n+e.forward.points[2].x,r+e.forward.points[2].y),this.ctx.lineTo(n+e.endcap.points[3].x,r+e.endcap.points[3].y),3===i?this.ctx.bezierCurveTo(n+e.back.points[1].x,r+e.back.points[1].y,n+e.back.points[2].x,r+e.back.points[2].y,n+e.back.points[3].x,r+e.back.points[3].y):this.ctx.quadraticCurveTo(n+e.back.points[1].x,r+e.back.points[1].y,n+e.back.points[2].x,r+e.back.points[2].y),this.ctx.closePath(),this.ctx.fill(),this.ctx.stroke()},text:function(e,t,n){n=n||{x:0,y:0},this.offset&&(n.x+=this.offset.x,n.y+=this.offset.y),this.ctx.fillText(e,t.x+n.x,t.y+n.y)},image:function(e,t){var n=this;t=t||{x:0,y:0},this.offset&&(t.x+=this.offset.x,t.y+=this.offset.y),e.loaded?this.ctx.drawImage(e,t.x,t.y):e.onload=function(){e.loaded=!0,n.ctx.drawImage(e,t.x,t.y)}},drawAxes:function(e,t,n,r,i,a,o,s){s=s||{x:0,y:0};var l=this.getPanelWidth();this.drawLine({x:e,y:e},{x:l-e,y:e},s),this.drawLine({x:e,y:e},{x:e,y:l-e},s),this.setFill("black"),this.text(t+" →",{x:s.x+l/2,y:s.y+15}),this.text(n,{x:s.x+e,y:s.y+15}),this.text(r,{x:s.x+l-e,y:s.y+15}),this.text(i,{x:s.x+5,y:s.y+l/2-e}),this.text("↓",{x:s.x+5,y:s.y+l/2}),this.text(a,{x:s.x+4,y:s.y+e+5}),this.text(o,{x:s.x+2,y:s.y+l-e+10})}});e.exports=s},function(e,t,n){var r,i;(function(e){/**
+p.transitionTo(s({},t,{action:d.POP}))}}function l(t){switch(t.action){case d.PUSH:y+=1,y<v.length&&v.splice(y),v.push(t),e(t.key,t.state);break;case d.REPLACE:v[y]=t,e(t.key,t.state)}}var c=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];Array.isArray(c)?c={entries:c}:"string"==typeof c&&(c={entries:[c]});var p=f["default"](s({},c,{getCurrentLocation:n,finishTransition:l,saveState:e,go:o})),m=c,v=m.entries,y=m.current;"string"==typeof v?v=[v]:Array.isArray(v)||(v=["/"]),v=v.map(function(e){var t=p.createKey();return"string"==typeof e?{pathname:e,key:t}:"object"==typeof e&&e?s({},e,{key:t}):void("production"!==r.env.NODE_ENV?h["default"](!1,"Unable to create history entry from %s",e):h["default"](!1))}),null==y?y=v.length-1:y>=0&&y<v.length?void 0:"production"!==r.env.NODE_ENV?h["default"](!1,"Current index must be >= 0 and < %s, was %s",v.length,y):h["default"](!1);var w=a(v);return p}t.__esModule=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=n(167),u=i(l),c=n(169),h=i(c),d=n(170),p=n(175),f=i(p),m=n(181),g=i(m);t["default"]=o,e.exports=t["default"]}).call(t,n(5))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e){return function(){function t(e){return b&&null==e.basename&&(0===e.pathname.indexOf(b)?(e.pathname=e.pathname.substring(b.length),e.basename=b,""===e.pathname&&(e.pathname="/")):e.basename=""),e}function n(e){if(!b)return e;"string"==typeof e&&(e=p["default"](e));var t=e.pathname,n="/"===b.slice(-1)?b:b+"/",r="/"===t.charAt(0)?t.slice(1):t,i=n+r;return o({},e,{pathname:i})}function r(e){return x.listenBefore(function(n,r){u["default"](e,t(n),r)})}function a(e){return x.listen(function(n){e(t(n))})}function l(e){x.push(n(e))}function c(e){x.replace(n(e))}function d(e){return x.createPath(n(e))}function f(e){return x.createHref(n(e))}function g(){return t(x.createLocation.apply(x,arguments))}function v(e,t){"string"==typeof t&&(t=p["default"](t)),l(o({state:e},t))}function y(e,t){"string"==typeof t&&(t=p["default"](t)),c(o({state:e},t))}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],b=w.basename,_=i(w,["basename"]),x=e(_);if(null==b&&s.canUseDOM){var E=document.getElementsByTagName("base")[0];E&&(b=h["default"](E.href))}return o({},x,{listenBefore:r,listen:a,push:l,replace:c,createPath:d,createHref:f,createLocation:g,pushState:m["default"](v,"pushState is deprecated; use push instead"),replaceState:m["default"](y,"replaceState is deprecated; use replace instead")})}}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=n(171),l=n(183),u=r(l),c=n(182),h=r(c),d=n(181),p=r(d),f=n(184),m=r(f);t["default"]=a,e.exports=t["default"]},function(e,t,n){"use strict";e.exports={preface:n(213),introduction:n(214),whatis:n(224),explanation:n(225),control:n(228),extended:n(229),matrix:n(230),decasteljau:n(231),flattening:n(232),splitting:n(233),matrixsplit:n(234),reordering:n(235),derivatives:n(236),pointvectors:n(237),components:n(238),extremities:n(239),boundingbox:n(240),aligning:n(241),tightbounds:n(242),inflections:n(243),canonical:n(244),arclength:n(245),arclengthapprox:n(246),tracing:n(247),intersections:n(248),curveintersection:n(249),abc:n(250),moulding:n(251),pointcurves:n(252),catmullconv:n(253),catmullmoulding:n(254),polybezier:n(255),shapes:n(256),projections:n(257),offsetting:n(258),graduatedoffset:n(259),circles:n(260),circles_cubic:n(261),arcapproximation:n(262),bsplines:n(263),comments:n(274)}},function(e,t,n){"use strict";var r=n(2),i=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:"Preface"}},render:function(){return r.createElement("section",null,r.createElement("h2",null,this.props.title),r.createElement("p",null,"In order to draw things in 2D, we usually rely on lines, which typically get classified into two categories: straight lines, and curves. The first of these are as easy to draw as they are easy to make a computer draw. Give a computer the first and last point in the line, and BAM! straight line. No questions asked."),r.createElement("p",null,"Curves, however, are a much bigger problem. While we can draw curves with ridiculous ease freehand, computers are a bit handicapped in that they can't draw curves unless there is a mathematical function that describes how it should be drawn. In fact, they even need this for straight lines, but the function is ridiculously easy, so we tend to ignore that as far as computers are concerned, all lines are \"functions\", regardless of whether they're straight or curves. However, that does mean that we need to come up with fast-to-compute functions that lead to nice looking curves on a computer. There's a number of these, and in this article we'll focus on a particular function that has received quite a bit of attention, and is used in pretty much anything that can draw curves: \"Bézier\" curves"),r.createElement("p",null,"They're named after ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier"},"Pierre Bézier"),', who is principally responsible for getting them known to the world as a curve well-suited for design work (working for Renault and publishing his investigations in 1962), although he was not the first, or only one, to "invent" these type of curves. One might be tempted to say that the mathematician ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),' was first, investigating the nature of these curves in 1959 while working at Citroën, coming up with a really elegant way of figuring out how to draw them. However, de Casteljau did not publish his work, making the question "who was first" hard to answer in any absolute sense. Or is it? Bézier curves are, at their core, "Bernstein polynomials", a family of mathematical functions investigated by ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein"},"Sergei Natanovich Bernstein"),", with publications on them at least as far back as 1912. Anyway, that's mostly trivia, what you are more likely to care about is that these curves are handy: you can link up multiple Bézier curves so that the combination looks like a single curve. If you've ever drawn Photoshop \"paths\" or worked with vector drawing programs like Flash, Illustrator or Inkscape, those curves you've been drawing are Bézier curves."),r.createElement("p",null,"So, what if you need to program them yourself? What are the pitfalls? How do you draw them? What are the bounding boxes, how do you determine intersections, how can you extrude a curve, in short: how do you do everything that you might want when you do with these curves? That's what this page is for. Prepare to be mathed!"),r.createElement("p",null,"—Pomax (or in the tweetworld, ",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{className:"note"},r.createElement("h2",null,"Note: virtually all Bézier graphics are interactive."),r.createElement("p",null,"This page uses interactive examples, relying heavily on ",r.createElement("a",{href:"http://pomax.github.io/bezierjs/"},"Bezier.js"),', as well as "real" maths (in LaTeX form) which is typeset using the most excellent ',r.createElement("a",{href:"http://MathJax.org"},"MathJax")," library. The page is generated offline as a React application, using Webpack, which has made adding \"view source\" options considerably more challenging. I'm still trying to figure out how to add them back in, but it didn't feel like it should hold up deploying this update compared to the previous years' version."),r.createElement("h2",null,"This book is open source."),r.createElement("p",null,"This book is an open source software project, and lives on two github repositorites. The first is ",r.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo")," and is the purely-for-presentation version you are viewing right now. The other repository is",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),", which is the development version, housing all the html, javascript, and css. You can fork either of these, and pretty much do with them as you please, except for passing it off as your own work wholesale, of course =)"),r.createElement("h2",null,"How complicated is the maths going to be?"),r.createElement("p",null,"Most of the mathematics in this Primer are early high school maths. If you understand basic arithmetic, and you know how to read English, you should be able to get by just fine. There will at times be ",r.createElement("em",null,"far"),' more complicated maths, but if you don\'t feel like digesting them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly.'),r.createElement("h2",null,"Questions, comments:"),r.createElement("p",null,"If you have suggestions for new sections, hit up the ",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"github issue tracker")," (also reachable from the repo linked to in the upper right). If you have questions about the material, there's currently no comment section while I'm doing the rewrite, but you can use the issue tracker for that as well. Once the rewrite is done, I'll add a general comment section back in, and maybe a more topical \"select this section of text and hit the 'question' button to ask a question about it\" system. We'll see."),r.createElement("h2",null,"Buy me a coffee?"),r.createElement("p",null,"If you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you can always ",r.createElement("a",{"class":"link",href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"buy me a coffee"),", however much a coffee is where you live. This work has grown over the years, from a small primer to a 70ish print-page-equivalent reader on the subject of Bézier curves, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing!")))}});e.exports=i},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:"A lightning introduction"}},drawQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},drawCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the things that you can see in the following graphics. They run from some start point to some end point, with their curvature influenced by one or more \"intermediate\" control points. Now, because all the graphics on this page are interactive, go manipulate those curves a bit: click-drag the points, and see how their shape changes based on what you do."),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"Quadratic Bézier curves",setup:this.drawQuadratic,draw:this.drawCurve}),r.createElement(i,{inline:!0,title:"Cubic Bézier curves",setup:this.drawCubic,draw:this.drawCurve})),r.createElement("p",null,"These curves are used a lot in computer aided design and computer aided manufacturing (CAD/CAM) applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape, the Gimp, etc. and in graphic technologies like scalable vector graphics (SVG) and OpenType fonts (ttf/otf). A lot of things use Bézier curves, so if you want to learn more about them... prepare to get your learn on!"))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(216),a=n(218),o=function(e){e=e||window.event;var t=e.target||e.srcElement,n=t.getBoundingClientRect();e.offsetX=e.clientX-n.left,e.offsetY=e.clientY-n.top},s=r.createClass({displayName:"Graphic",Paper:!1,defaultWidth:275,defaultHeight:275,Bezier:a,utils:a.getUtils(),curve:!1,mx:0,my:0,cx:0,cy:0,mp:!1,offset:{x:0,y:0},lpts:[],colorSeed:0,playing:!1,frame:0,playinterval:33,animate:function(){this.playing&&(this.frame++,setTimeout(this.animate,this.playinterval),this.props.draw(this,this.curve))},getFrame:function(){return this.frame},getPlayInterval:function(){return this.playinterval},play:function(){this.playing=!0,this.animate()},pause:function(){this.playing=!1},redraw:function(){this.props.draw&&this.props.draw(this,this.curve)},render:function(){return r.createElement("figure",{className:!!this.props.inline&&"inline"},r.createElement("canvas",{ref:"canvas",tabIndex:"0",onMouseDown:this.mouseDown,onMouseMove:this.mouseMove,onMouseUp:this.mouseUp,onClick:this.onClick,onKeyUp:this.onKeyUp,onKeyDown:this.onKeyDown,onKeyPress:this.onKeyPress}),r.createElement("figcaption",null,this.props.title," ",this.props.children))},componentDidMount:function(){var e=this.refs.canvas;e.width=this.defaultWidth,e.height=this.defaultHeight,this.cvs=e;var t=e.getContext("2d");if(this.ctx=t,this.props.paperjs){var r=this.Paper=n(222);r.setup(e)}this.props.setup&&this.props.setup(this),this.props.draw&&this.props.draw(this,this.curve),this.props.autoplay&&this.play()},mouseDown:function(e){var t=this;o(e),this.mx=e.offsetX,this.my=e.offsetY,this.movingPoint=!1,this.dragging=!1,this.down=!0,this.lpts.forEach(function(e,n){Math.abs(t.mx-e.x)<10&&Math.abs(t.my-e.y)<10&&(t.movingPoint=!0,t.mp=e,t.mp_idx=n,t.cx=e.x,t.cy=e.y)}),this.props.onMouseDown&&this.props.onMouseDown(e,this),"setCapture"in e.target&&e.target.setCapture()},mouseMove:function(e){if(o(e),!this.props["static"]){this.down&&(this.dragging=!0);var t=!1;if(this.lpts.forEach(function(n){var r=e.offsetX,i=e.offsetY;Math.abs(r-n.x)<10&&Math.abs(i-n.y)<10&&(t=t||!0)}),this.cvs.style.cursor=t?"pointer":"default",this.hover={x:e.offsetX,y:e.offsetY},this.movingPoint)if(this.ox=e.offsetX-this.mx,this.oy=e.offsetY-this.my,this.mp.x=Math.max(0,Math.min(this.defaultWidth,this.cx+this.ox)),this.mp.y=Math.max(0,Math.min(this.defaultHeight,this.cy+this.oy)),this.curve.forEach){for(var n,r,i=0;i<this.curve.length;i++)if(n=this.curve[i],r=n.points,r.indexOf(this.mp)>-1){n.update();break}}else this.curve&&this.curve.update&&this.curve.update()}this.props.onMouseMove&&this.props.onMouseMove(e,this),this.dragging&&this.props.onMouseDrag&&this.props.onMouseDrag(e,this),this.props["static"]||this.playing||!this.props.draw||this.props.draw(this,this.curve)},mouseUp:function(e){return this.down=!1,this.movingPoint?(this.movingPoint=!1,this.mp=!1,void(this.props.onMouseUp&&this.props.onMouseUp(e,this))):void(this.props.onMouseUp&&this.props.onMouseUp(e,this))},onClick:function(e){o(e),this.mx=e.offsetX,this.my=e.offsetY,!this.dragging&&this.props.onClick&&this.props.onClick(e,this)},onKeyUp:function(e){this.props.onKeyUp&&(this.props.onKeyUp(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyDown:function(e){this.props.onKeyDown&&(this.props.onKeyDown(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyPress:function(e){this.props.onKeyPress&&(this.props.onKeyPress(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},reset:function(){this.refs.canvas.width=this.refs.canvas.width,this.ctx.strokeStyle="black",this.ctx.lineWidth=1,this.ctx.fillStyle="none",this.offset={x:0,y:0},this.colorSeed=0},setSize:function(e,t){this.defaultWidth=e,this.defaultHeight=t,this.refs.canvas.width=e,this.refs.canvas.height=t},setCurves:function(e){this.setCurve(e)},setCurve:function(e){var t=[];e=e instanceof Array?e:Array.prototype.slice.call(arguments),e.forEach(function(e){t=t.concat(e.points)}),this.curve=1===e.length?e[0]:e,this.lpts=t},getPanelWidth:function(){return this.defaultWidth},getPanelHeight:function(){return this.defaultHeight},getDefaultQuadratic:function(){return new this.Bezier(70,250,20,110,250,60)},getDefaultCubic:function(){return new this.Bezier(120,160,35,200,220,260,220,40)},toImage:function(){var e=this.refs.canvas.toDataURL(),t=new Image;return t.src=e,t},setPanelCount:function(e){var t=this.refs.canvas;t.width=e*this.defaultWidth},setOffset:function(e){this.offset=e},setColor:function(e){this.ctx.strokeStyle=e},getColor:function(){return this.ctx.strokeStyle||"black"},setWeight:function(e){this.ctx.lineWidth=e},noColor:function(e){this.ctx.strokeStyle="transparent"},setRandomColor:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.strokeStyle=i.hsl(t,n,r).alpha(e).css()},setRandomFill:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.fillStyle=i.hsl(t,n,r).alpha(e).css()},setFill:function(e){this.ctx.fillStyle=e},getFill:function(){return this.ctx.fillStyle||"transparent"},noFill:function(){this.ctx.fillStyle="transparent"},drawSkeleton:function(e,t,n){t=t||{x:0,y:0};var r=e.points;if(r.length>2){this.ctx.strokeStyle="lightgrey",this.drawLine(r[0],r[1],t);for(var i=r.length-2,a=1;a<i;a++)this.drawLine(r[a],r[a+1],t);this.drawLine(r[i],r[i+1],t)}this.ctx.strokeStyle="black",this.drawPoints(r,t),n||this.drawCoordinates(e,t)},drawGrid:function(e,t,n){var r,i,a,o,s,l,u=this.defaultWidth,c=this.defaultHeight,h=u/e,d=h/2,p=c/t,f=p/2;for(r=0;r<e;r++)i=d+r*h,s={x:i,y:0},l={x:i,y:c},this.drawLine(s,l,n);for(a=0;a<t;a++)o=f+a*p,s={x:0,y:o},l={x:u,y:o},this.drawLine(s,l,n)},drawHull:function(e,t,n){var r=e instanceof Array?e:e.hull(t);return 6===r.length?(this.drawLine(r[0],r[1],n),this.drawLine(r[1],r[2],n),this.drawLine(r[3],r[4],n)):(this.drawLine(r[0],r[1],n),this.drawLine(r[1],r[2],n),this.drawLine(r[2],r[3],n),this.drawLine(r[4],r[5],n),this.drawLine(r[5],r[6],n),this.drawLine(r[7],r[8],n)),r},drawCoordinates:function(e,t){var n=this;t=t||{x:0,y:0};var r=e.points;this.setFill("black"),r.forEach(function(e){n.text("("+e.x+","+e.y+")",{x:e.x+t.x+5,y:e.y+t.y+10})})},drawFunction:function(e,t){var n,r,i=e.start||0,a=e(i),o=e.end||1,s=e(o),l=e.step||.01,u=e.scale||1;for(r=l;r<o;r+=l)n=e(r,u),this.drawLine(a,n,t),a=n;this.drawLine(n,s,t)},drawCurve:function(e,t){var n=this;t=t||{x:0,y:0};var r=e.points;if(r.length<=3||5<=r.length){var i=e.getLUT(100),a=i[0];return void i.forEach(function(e,r){r&&(n.drawLine(a,e,t),a=e)})}var o=t.x+this.offset.x,s=t.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(r[0].x+o,r[0].y+s),3===r.length?this.ctx.quadraticCurveTo(r[1].x+o,r[1].y+s,r[2].x+o,r[2].y+s):4===r.length&&this.ctx.bezierCurveTo(r[1].x+o,r[1].y+s,r[2].x+o,r[2].y+s,r[3].x+o,r[3].y+s),this.ctx.stroke(),this.ctx.closePath()},drawLine:function(e,t,n){n=n||{x:0,y:0};var r=n.x+this.offset.x,i=n.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(e.x+r,e.y+i),this.ctx.lineTo(t.x+r,t.y+i),this.ctx.stroke()},drawPoint:function(e,t){this.drawCircle(e,1,t)},drawPoints:function(e,t){t=t||{x:0,y:0},e.forEach(function(e){this.drawCircle(e,0!==t.x||0!==t.y?1.5:3,t)}.bind(this))},drawArc:function(e,t){t=t||{x:0,y:0};var n=t.x+this.offset.x,r=t.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(e.x+n,e.y+r),this.ctx.arc(e.x+n,e.y+r,e.r,e.s,e.e),this.ctx.lineTo(e.x+n,e.y+r),this.ctx.fill(),this.ctx.stroke()},drawCircle:function(e,t,n){n=n||{x:0,y:0};var r=n.x+this.offset.x,i=n.y+this.offset.y;this.ctx.beginPath(),this.ctx.arc(e.x+r,e.y+i,t,0,2*Math.PI),this.ctx.stroke()},drawbbox:function(e,t){t=t||{x:0,y:0};var n=t.x+this.offset.x,r=t.y+this.offset.y;this.ctx.beginPath(),this.ctx.moveTo(e.x.min+n,e.y.min+r),this.ctx.lineTo(e.x.min+n,e.y.max+r),this.ctx.lineTo(e.x.max+n,e.y.max+r),this.ctx.lineTo(e.x.max+n,e.y.min+r),this.ctx.closePath(),this.ctx.stroke()},drawRect:function(e,t,n){n=n||{x:0,y:0};var r=n.x+this.offset.x,i=n.y+this.offset.y,a=e.x+r,o=e.y+i,s=t.x-e.x,l=t.y-e.y;this.ctx.beginPath(),this.ctx.moveTo(a,o),this.ctx.lineTo(a+s,o),this.ctx.lineTo(a+s,o+l),this.ctx.lineTo(a,o+l),this.ctx.closePath(),this.ctx.fill(),this.ctx.stroke()},drawPath:function(e,t){var n=this;t=t||{x:0,y:0};var r=t.x+this.offset.x,i=t.y+this.offset.y;this.ctx.beginPath(),e.forEach(function(e,t){return 0===t?n.ctx.moveTo(e.x+r,e.y+i):void n.ctx.lineTo(e.x+r,e.y+i)}),closed&&this.ctx.closePath(),this.ctx.fill(),this.ctx.stroke()},drawShape:function(e,t){t=t||{x:0,y:0};var n=t.x+this.offset.x,r=t.y+this.offset.y,i=e.forward.points.length-1;this.ctx.beginPath(),this.ctx.moveTo(n+e.startcap.points[0].x,r+e.startcap.points[0].y),this.ctx.lineTo(n+e.startcap.points[3].x,r+e.startcap.points[3].y),3===i?this.ctx.bezierCurveTo(n+e.forward.points[1].x,r+e.forward.points[1].y,n+e.forward.points[2].x,r+e.forward.points[2].y,n+e.forward.points[3].x,r+e.forward.points[3].y):this.ctx.quadraticCurveTo(n+e.forward.points[1].x,r+e.forward.points[1].y,n+e.forward.points[2].x,r+e.forward.points[2].y),this.ctx.lineTo(n+e.endcap.points[3].x,r+e.endcap.points[3].y),3===i?this.ctx.bezierCurveTo(n+e.back.points[1].x,r+e.back.points[1].y,n+e.back.points[2].x,r+e.back.points[2].y,n+e.back.points[3].x,r+e.back.points[3].y):this.ctx.quadraticCurveTo(n+e.back.points[1].x,r+e.back.points[1].y,n+e.back.points[2].x,r+e.back.points[2].y),this.ctx.closePath(),this.ctx.fill(),this.ctx.stroke()},text:function(e,t,n){n=n||{x:0,y:0},this.offset&&(n.x+=this.offset.x,n.y+=this.offset.y),this.ctx.fillText(e,t.x+n.x,t.y+n.y)},image:function(e,t){var n=this;t=t||{x:0,y:0},this.offset&&(t.x+=this.offset.x,t.y+=this.offset.y),e.loaded?this.ctx.drawImage(e,t.x,t.y):e.onload=function(){e.loaded=!0,n.ctx.drawImage(e,t.x,t.y)}},drawAxes:function(e,t,n,r,i,a,o,s){s=s||{x:0,y:0};var l=this.getPanelWidth();this.drawLine({x:e,y:e},{x:l-e,y:e},s),this.drawLine({x:e,y:e},{x:e,y:l-e},s),this.setFill("black"),this.text(t+" →",{x:s.x+l/2,y:s.y+15}),this.text(n,{x:s.x+e,y:s.y+15}),this.text(r,{x:s.x+l-e,y:s.y+15}),this.text(i,{x:s.x+5,y:s.y+l/2-e}),this.text("↓",{x:s.x+5,y:s.y+l/2}),this.text(a,{x:s.x+4,y:s.y+e+5}),this.text(o,{x:s.x+2,y:s.y+l-e+10})}});e.exports=s},function(e,t,n){var r,i;(function(e){/**
 	 * @license
 	 *
 	 * chroma.js - JavaScript library for color conversions
@@ -77,8 +77,8 @@ return{TOLERANCE:1e-6,EPSILON:o,MACHINE_EPSILON:s,CURVETIME_EPSILON:4e-7,GEOMETR
 var e=["point: "+this._point];return this._handleIn.isZero()||e.push("handleIn: "+this._handleIn),this._handleOut.isZero()||e.push("handleOut: "+this._handleOut),"{ "+e.join(", ")+" }"},transform:function(e){this._transformCoordinates(e,new Array(6),!0),this._changed()},_transformCoordinates:function(e,t,n){var r=this._point,i=n&&this._handleIn.isZero()?null:this._handleIn,a=n&&this._handleOut.isZero()?null:this._handleOut,o=r._x,s=r._y,l=2;return t[0]=o,t[1]=s,i&&(t[l++]=i._x+o,t[l++]=i._y+s),a&&(t[l++]=a._x+o,t[l++]=a._y+s),e&&(e._transformCoordinates(t,t,l/2),o=t[0],s=t[1],n?(r._x=o,r._y=s,l=2,i&&(i._x=t[l++]-o,i._y=t[l++]-s),a&&(a._x=t[l++]-o,a._y=t[l++]-s)):(i||(t[l++]=o,t[l++]=s),a||(t[l++]=o,t[l++]=s))),t}}),M=f.extend({initialize:function(e,t,n){var r,i,a;if(e)if((r=e[0])!==o)i=e[1];else{var s=e;(r=s.x)===o&&(s=f.read(arguments),r=s.x),i=s.y,a=s.selected}else r=i=0;this._x=r,this._y=i,this._owner=t,t[n]=this,a&&this.setSelected(!0)},set:function(e,t){return this._x=e,this._y=t,this._owner._changed(this),this},_serialize:function(e){var t=e.formatter,n=t.number(this._x),r=t.number(this._y);return this.isSelected()?{x:n,y:r,selected:!0}:[n,r]},getX:function(){return this._x},setX:function(e){this._x=e,this._owner._changed(this)},getY:function(){return this._y},setY:function(e){this._y=e,this._owner._changed(this)},isZero:function(){return d.isZero(this._x)&&d.isZero(this._y)},setSelected:function(e){this._owner.setSelected(e,this)},isSelected:function(){return this._owner.isSelected(this)}}),I=s.extend({_class:"Curve",initialize:function(e,t,n,r,i,a,o,s){var l,u,c,h,d,p,f=arguments.length;3===f?(this._path=e,l=t,u=n):0===f?(l=new T,u=new T):1===f?"segment1"in e?(l=new T(e.segment1),u=new T(e.segment2)):"point1"in e?(c=e.point1,d=e.handle1,p=e.handle2,h=e.point2):Array.isArray(e)&&(c=[e[0],e[1]],h=[e[6],e[7]],d=[e[2]-e[0],e[3]-e[1]],p=[e[4]-e[6],e[5]-e[7]]):2===f?(l=new T(e),u=new T(t)):4===f?(c=e,d=t,p=n,h=r):8===f&&(c=[e,t],h=[o,s],d=[n-e,r-t],p=[i-o,a-s]),this._segment1=l||new T(c,null,d),this._segment2=u||new T(h,p,null)},_serialize:function(e){return s.serialize(this.hasHandles()?[this.getPoint1(),this.getHandle1(),this.getHandle2(),this.getPoint2()]:[this.getPoint1(),this.getPoint2()],e,!0)},_changed:function(){this._length=this._bounds=o},clone:function(){return new I(this._segment1,this._segment2)},toString:function(){var e=["point1: "+this._segment1._point];return this._segment1._handleOut.isZero()||e.push("handle1: "+this._segment1._handleOut),this._segment2._handleIn.isZero()||e.push("handle2: "+this._segment2._handleIn),e.push("point2: "+this._segment2._point),"{ "+e.join(", ")+" }"},remove:function(){var e=!1;if(this._path){var t=this._segment2,n=t._handleOut;e=t.remove(),e&&this._segment1._handleOut.set(n.x,n.y)}return e},getPoint1:function(){return this._segment1._point},setPoint1:function(){var e=f.read(arguments);this._segment1._point.set(e.x,e.y)},getPoint2:function(){return this._segment2._point},setPoint2:function(){var e=f.read(arguments);this._segment2._point.set(e.x,e.y)},getHandle1:function(){return this._segment1._handleOut},setHandle1:function(){var e=f.read(arguments);this._segment1._handleOut.set(e.x,e.y)},getHandle2:function(){return this._segment2._handleIn},setHandle2:function(){var e=f.read(arguments);this._segment2._handleIn.set(e.x,e.y)},getSegment1:function(){return this._segment1},getSegment2:function(){return this._segment2},getPath:function(){return this._path},getIndex:function(){return this._segment1._index},getNext:function(){var e=this._path&&this._path._curves;return e&&(e[this._segment1._index+1]||this._path._closed&&e[0])||null},getPrevious:function(){var e=this._path&&this._path._curves;return e&&(e[this._segment1._index-1]||this._path._closed&&e[e.length-1])||null},isFirst:function(){return 0===this._segment1._index},isLast:function(){var e=this._path;return e&&this._segment1._index===e._curves.length-1||!1},isSelected:function(){return this.getPoint1().isSelected()&&this.getHandle2().isSelected()&&this.getHandle2().isSelected()&&this.getPoint2().isSelected()},setSelected:function(e){this.getPoint1().setSelected(e),this.getHandle1().setSelected(e),this.getHandle2().setSelected(e),this.getPoint2().setSelected(e)},getValues:function(e){return I.getValues(this._segment1,this._segment2,e)},getPoints:function(){for(var e=this.getValues(),t=[],n=0;n<8;n+=2)t.push(new f(e[n],e[n+1]));return t},getLength:function(){return null==this._length&&(this._length=I.getLength(this.getValues(),0,1)),this._length},getArea:function(){return I.getArea(this.getValues())},getLine:function(){return new _(this._segment1._point,this._segment2._point)},getPart:function(e,t){return new I(I.getPart(this.getValues(),e,t))},getPartLength:function(e,t){return I.getLength(this.getValues(),e,t)},getIntersections:function(e){return I._getIntersections(this.getValues(),e&&e!==this?e.getValues():null,this,e,[],{})},_getParameter:function(e,t){return t?e:e&&e.curve===this?e.parameter:e===o&&t===o?.5:this.getParameterAt(e,0)},divide:function(e,t,n){var r=this._getParameter(e,t),i=4e-7,a=1-i,o=null;if(r>=i&&r<=a){var s=I.subdivide(this.getValues(),r),l=s[0],u=s[1],c=n||this.hasHandles(),h=this._segment1,d=this._segment2,p=this._path;c&&(h._handleOut.set(l[2]-l[0],l[3]-l[1]),d._handleIn.set(u[4]-u[6],u[5]-u[7]));var m=l[6],g=l[7],v=new T(new f(m,g),c&&new f(l[4]-m,l[5]-g),c&&new f(u[2]-m,u[3]-g));p?(p.insert(h._index+1,v),o=this.getNext()):(this._segment2=v,o=new I(v,d))}return o},split:function(e,t){return this._path?this._path.split(this._segment1._index,this._getParameter(e,t)):null},reversed:function(){return new I(this._segment2.reversed(),this._segment1.reversed())},clearHandles:function(){this._segment1._handleOut.set(0,0),this._segment2._handleIn.set(0,0)},statics:{getValues:function(e,t,n){var r=e._point,i=e._handleOut,a=t._handleIn,o=t._point,s=[r._x,r._y,r._x+i._x,r._y+i._y,o._x+a._x,o._y+a._y,o._x,o._y];return n&&n._transformCoordinates(s,s,4),s},subdivide:function(e,t){var n=e[0],r=e[1],i=e[2],a=e[3],s=e[4],l=e[5],u=e[6],c=e[7];t===o&&(t=.5);var h=1-t,d=h*n+t*i,p=h*r+t*a,f=h*i+t*s,m=h*a+t*l,g=h*s+t*u,v=h*l+t*c,y=h*d+t*f,w=h*p+t*m,b=h*f+t*g,_=h*m+t*v,x=h*y+t*b,E=h*w+t*_;return[[n,r,d,p,y,w,x,E],[x,E,b,_,g,v,u,c]]},solveCubic:function(e,t,n,r,i,a){var o=e[t],s=e[t+2],l=e[t+4],u=e[t+6],c=3*(s-o),h=3*(l-s)-c,p=u-o-c-h;return d.solveCubic(p,h,c,o-n,r,i,a)},getParameterOf:function(e,t){var n=new f(e[0],e[1]),r=new f(e[6],e[7]),i=1e-12,a=t.isClose(n,i)?0:t.isClose(r,i)?1:null;if(null!==a)return a;for(var o=[t.x,t.y],s=[],l=2e-7,u=0;u<2;u++)for(var c=I.solveCubic(e,u,o[u],s,0,1),h=0;h<c;h++)if(a=s[h],t.isClose(I.getPoint(e,a),l))return a;return t.isClose(n,l)?0:t.isClose(r,l)?1:null},getNearestParameter:function(e,t){function n(n){if(n>=0&&n<=1){var r=t.getDistance(I.getPoint(e,n),!0);if(r<d)return d=r,p=n,!0}}if(I.isStraight(e)){var r=e[0],i=e[1],a=e[6],o=e[7],s=a-r,l=o-i,u=s*s+l*l;if(0===u)return 0;var c=((t.x-r)*s+(t.y-i)*l)/u;return c<1e-12?0:c>.999999999999?1:I.getParameterOf(e,new f(r+c*s,i+c*l))}for(var h=100,d=1/0,p=0,m=0;m<=h;m++)n(m/h);for(var g=1/(2*h);g>4e-7;)n(p-g)||n(p+g)||(g/=2);return p},getPart:function(e,t,n){var r=t>n;if(r){var i=t;t=n,n=i}return t>0&&(e=I.subdivide(e,t)[1]),n<1&&(e=I.subdivide(e,(n-t)/(1-t))[0]),r?[e[6],e[7],e[4],e[5],e[2],e[3],e[0],e[1]]:e},hasHandles:function(e){var t=d.isZero;return!(t(e[0]-e[2])&&t(e[1]-e[3])&&t(e[4]-e[6])&&t(e[5]-e[7]))},isFlatEnough:function(e,t){var n=e[0],r=e[1],i=e[2],a=e[3],o=e[4],s=e[5],l=e[6],u=e[7],c=3*i-2*n-l,h=3*a-2*r-u,d=3*o-2*l-n,p=3*s-2*u-r;return Math.max(c*c,d*d)+Math.max(h*h,p*p)<10*t*t},getArea:function(e){var t=e[0],n=e[1],r=e[6],i=e[7],a=(e[2]+t)/2,o=(e[3]+n)/2,s=(e[4]+e[6])/2,l=(e[5]+e[7])/2;return 6*((t-a)*(o+n)+(a-s)*(l+o)+(s-r)*(i+l))/10},getBounds:function(e){for(var t=e.slice(0,2),n=t.slice(),r=[0,0],i=0;i<2;i++)I._addBounds(e[i],e[i+2],e[i+4],e[i+6],i,0,t,n,r);return new y(t[0],t[1],n[0]-t[0],n[1]-t[1])},_addBounds:function(e,t,n,r,i,a,o,s,l){function u(e,t){var n=e-t,r=e+t;n<o[i]&&(o[i]=n),r>s[i]&&(s[i]=r)}var c=3*(t-n)-e+r,h=2*(e+n)-4*t,p=t-e,f=d.solveQuadratic(c,h,p,l),m=4e-7,g=1-m;u(r,0);for(var v=0;v<f;v++){var y=l[v],w=1-y;m<y&&y<g&&u(w*w*w*e+3*w*w*y*t+3*w*y*y*n+y*y*y*r,a)}}}},s.each(["getBounds","getStrokeBounds","getHandleBounds","getRoughBounds"],function(e){this[e]=function(){this._bounds||(this._bounds={});var t=this._bounds[e];if(!t){var n=this._path;t=this._bounds[e]=A[e]([this._segment1,this._segment2],!1,n&&n.getStyle())}return t.clone()}},{}),s.each({isStraight:function(e,t,n){if(t.isZero()&&n.isZero())return!0;if(e.isZero())return!1;if(t.isCollinear(e)&&n.isCollinear(e)){var r=e.dot(e),i=e.dot(t)/r,a=e.dot(n)/r;return i>=0&&i<=1&&a<=0&&a>=-1}return!1},isLinear:function(e,t,n){var r=e.divide(3);return t.equals(r)&&n.negate().equals(r)}},function(e,t){this[t]=function(){var t=this._segment1,n=this._segment2;return e(n._point.subtract(t._point),t._handleOut,n._handleIn)},this.statics[t]=function(t){var n=t[0],r=t[1],i=t[6],a=t[7];return e(new f(i-n,a-r),new f(t[2]-n,t[3]-r),new f(t[4]-i,t[5]-a))}},{statics:{},hasHandles:function(){return!this._segment1._handleOut.isZero()||!this._segment2._handleIn.isZero()},isCollinear:function(e){return e&&this.isStraight()&&e.isStraight()&&this.getLine().isCollinear(e.getLine())},isHorizontal:function(){return this.isStraight()&&Math.abs(this.getTangentAt(.5,!0).y)<1e-7},isVertical:function(){return this.isStraight()&&Math.abs(this.getTangentAt(.5,!0).x)<1e-7}}),{beans:!1,getParameterAt:function(e,t){return I.getParameterAt(this.getValues(),e,t)},getParameterOf:function(){return I.getParameterOf(this.getValues(),f.read(arguments))},getLocationAt:function(e,t){var n=t?e:this.getParameterAt(e);return null!=n&&n>=0&&n<=1?new R(this,n):null},getLocationOf:function(){return this.getLocationAt(this.getParameterOf(f.read(arguments)),!0)},getOffsetOf:function(){var e=this.getLocationOf.apply(this,arguments);return e?e.getOffset():null},getNearestLocation:function(){var e=f.read(arguments),t=this.getValues(),n=I.getNearestParameter(t,e),r=I.getPoint(t,n);return new R(this,n,r,null,e.getDistance(r))},getNearestPoint:function(){return this.getNearestLocation.apply(this,arguments).getPoint()}},new function(){var e=["getPoint","getTangent","getNormal","getWeightedTangent","getWeightedNormal","getCurvature"];return s.each(e,function(e){this[e+"At"]=function(t,n){var r=this.getValues();return I[e](r,n?t:I.getParameterAt(r,t,0))}},{statics:{evaluateMethods:e}})},new function(){function e(e){var t=e[0],n=e[1],r=e[2],i=e[3],a=e[4],o=e[5],s=e[6],l=e[7],u=9*(r-a)+3*(s-t),c=6*(t+a)-12*r,h=3*(r-t),d=9*(i-o)+3*(l-n),p=6*(n+o)-12*i,f=3*(i-n);return function(e){var t=(u*e+c)*e+h,n=(d*e+p)*e+f;return Math.sqrt(t*t+n*n)}}function t(e,t){return Math.max(2,Math.min(16,Math.ceil(32*Math.abs(t-e))))}function n(e,t,n,r){if(null==t||t<0||t>1)return null;var i,a,o=e[0],s=e[1],l=e[2],u=e[3],c=e[4],h=e[5],d=e[6],p=e[7],m=4e-7,g=1-m;if(0===n&&(t<m||t>g)){var v=t<m;i=v?o:d,a=v?s:p}else{var y=3*(l-o),w=3*(c-l)-y,b=d-o-y-w,_=3*(u-s),x=3*(h-u)-_,E=p-s-_-x;if(0===n)i=((b*t+w)*t+y)*t+o,a=((E*t+x)*t+_)*t+s;else{if(t<m?(i=y,a=_):t>g?(i=3*(d-c),a=3*(p-h)):(i=(3*b*t+2*w)*t+y,a=(3*E*t+2*x)*t+_),r){0===i&&0===a&&(t<m||t>g)&&(i=c-l,a=h-u);var C=Math.sqrt(i*i+a*a);C&&(i/=C,a/=C)}if(3===n){var k=6*b*t+2*w,N=6*E*t+2*x,S=Math.pow(i*i+a*a,1.5);i=0!==S?(i*N-a*k)/S:0,a=0}}}return 2===n?new f(a,(-i)):new f(i,a)}return{statics:{getLength:function(n,r,i){if(r===o&&(r=0),i===o&&(i=1),0===r&&1===i&&I.isStraight(n)){var a=n[6]-n[0],s=n[7]-n[1];return Math.sqrt(a*a+s*s)}var l=e(n);return d.integrate(l,r,i,t(r,i))},getParameterAt:function(n,r,i){function a(e){return m+=d.integrate(h,i,e,t(i,e)),i=e,m-r}if(i===o&&(i=r<0?1:0),0===r)return i;var s=Math.abs,l=r>0,u=l?i:0,c=l?1:i,h=e(n),p=d.integrate(h,u,c,t(u,c));if(s(r-p)<1e-12)return l?c:u;if(s(r)>p)return null;var f=r/p,m=0;return d.findRoot(a,h,i+f,u,c,32,1e-12)},getPoint:function(e,t){return n(e,t,0,!1)},getTangent:function(e,t){return n(e,t,1,!0)},getWeightedTangent:function(e,t){return n(e,t,1,!1)},getNormal:function(e,t){return n(e,t,2,!0)},getWeightedNormal:function(e,t){return n(e,t,2,!1)},getCurvature:function(e,t){return n(e,t,3,!1).x}}}},new function(){function e(e,t,n,r,i,a,o,s,l,u,c){var h=t.startConnected,d=t.endConnected,p=4e-7,f=1-p;if(null==i&&(i=I.getParameterOf(n,a)),null!==i&&i>=(h?p:0)&&i<=(d?f:1)&&(null==l&&(l=I.getParameterOf(o,u)),null!==l&&l>=(d?p:0)&&l<=(h?f:1))){var m=t.renormalize;if(m){var g=m(i,l);i=g[0],l=g[1]}var v=new R(r,i,a||I.getPoint(n,i),c),y=new R(s,l,u||I.getPoint(o,l),c),w=v.getPath()===y.getPath()&&v.getIndex()>y.getIndex(),b=w?y:v,_=t.include;v._intersection=y,y._intersection=v,_&&!_(b)||R.insert(e,b,!0)}}function t(i,a,o,s,l,u,c,h,d,p,f,m,g){if(!(++g>=24)){var v,y,w=a[0],b=a[1],x=a[6],E=a[7],C=_.getSignedDistance,k=C(w,b,x,E,a[2],a[3]),N=C(w,b,x,E,a[4],a[5]),S=k*N>0?.75:4/9,P=S*Math.min(0,k,N),D=S*Math.max(0,k,N),O=C(w,b,x,E,i[0],i[1]),T=C(w,b,x,E,i[2],i[3]),M=C(w,b,x,E,i[4],i[5]),R=C(w,b,x,E,i[6],i[7]),L=n(O,T,M,R),A=L[0],B=L[1];if(null!=(v=r(A,B,P,D))&&null!=(y=r(A.reverse(),B.reverse(),P,D))){i=I.getPart(i,v,y);var z=y-v,V=c+(h-c)*v,j=c+(h-c)*y;if(f>.5&&z>.5)if(j-V>p-d){var F=I.subdivide(i,.5),q=V+(j-V)/2;t(a,F[0],s,o,l,u,d,p,V,q,z,!m,g),t(a,F[1],s,o,l,u,d,p,q,j,z,!m,g)}else{var F=I.subdivide(a,.5),q=d+(p-d)/2;t(F[0],i,s,o,l,u,d,q,V,j,z,!m,g),t(F[1],i,s,o,l,u,q,p,V,j,z,!m,g)}else if(Math.max(p-d,j-V)<1e-7){var U=V+(j-V)/2,W=d+(p-d)/2;i=o.getValues(),a=s.getValues(),e(l,u,m?a:i,m?s:o,m?W:U,null,m?i:a,m?o:s,m?U:W,null)}else z>1e-12&&t(a,i,s,o,l,u,d,p,V,j,z,!m,g)}}}function n(e,t,n,r){var i,a=[0,e],o=[1/3,t],s=[2/3,n],l=[1,r],u=t-(2*e+r)/3,c=n-(e+2*r)/3;if(u*c<0)i=[[a,o,l],[a,s,l]];else{var h=u/c;i=[h>=2?[a,o,l]:h<=.5?[a,s,l]:[a,o,s,l],[a,l]]}return(u||c)<0?i.reverse():i}function r(e,t,n,r){return e[0][1]<n?i(e,!0,n):t[0][1]>r?i(t,!1,r):e[0][0]}function i(e,t,n){for(var r=e[0][0],i=e[0][1],a=1,o=e.length;a<o;a++){var s=e[a][0],l=e[a][1];if(t?l>=n:l<=n)return l===n?s:r+(n-i)*(s-r)/(l-i);r=s,i=l}return null}function a(t,n,r,i,a,o){for(var s=I.isStraight(t),l=s?n:t,u=s?t:n,c=u[0],h=u[1],p=u[6],f=u[7],m=p-c,g=f-h,v=Math.atan2(-g,m),y=Math.sin(v),w=Math.cos(v),b=[],_=0;_<8;_+=2){var x=l[_]-c,E=l[_+1]-h;b.push(x*w-E*y,x*y+E*w)}for(var C=[],k=I.solveCubic(b,1,0,C,0,1),_=0;_<k;_++){var N=C[_],S=I.getPoint(l,N),P=I.getParameterOf(u,S);if(null!==P){var D=I.getPoint(u,P),O=s?P:N,T=s?N:P;(!o.endConnected||T>d.CURVETIME_EPSILON)&&e(a,o,t,r,O,s?D:S,n,i,T,s?S:D)}}}function o(t,n,r,i,a,o){var s=_.intersect(t[0],t[1],t[6],t[7],n[0],n[1],n[6],n[7]);s&&e(a,o,t,r,null,s,n,i,null,s)}return{statics:{_getIntersections:function(n,r,i,s,l,u){if(!r)return I._getSelfIntersection(n,i,l,u);var c=n[0],h=n[1],d=n[6],p=n[7],m=r[0],g=r[1],v=r[6],y=r[7],w=(3*n[2]+c)/4,b=(3*n[3]+h)/4,_=(3*n[4]+d)/4,x=(3*n[5]+p)/4,E=(3*r[2]+m)/4,C=(3*r[3]+g)/4,k=(3*r[4]+v)/4,N=(3*r[5]+y)/4,S=Math.min,P=Math.max;if(!(P(c,w,_,d)>=S(m,E,k,v)&&S(c,w,_,d)<=P(m,E,k,v)&&P(h,b,x,p)>=S(g,C,N,y)&&S(h,b,x,p)<=P(g,C,N,y)))return l;if(!u.startConnected&&!u.endConnected){var D=I.getOverlaps(n,r);if(D){for(var O=0;O<2;O++){var T=D[O];e(l,u,n,i,T[0],null,r,s,T[1],null,!0)}return l}}var M=I.isStraight(n),R=I.isStraight(r),L=M&&R,A=1e-12,B=l.length;if((L?o:M||R?a:t)(n,r,i,s,l,u,0,1,0,1,0,!1,0),L&&l.length>B)return l;var z=new f(c,h),V=new f(d,p),j=new f(m,g),F=new f(v,y);return z.isClose(j,A)&&e(l,u,n,i,0,z,r,s,0,j),!u.startConnected&&z.isClose(F,A)&&e(l,u,n,i,0,z,r,s,1,F),!u.endConnected&&V.isClose(j,A)&&e(l,u,n,i,1,V,r,s,0,j),V.isClose(F,A)&&e(l,u,n,i,1,V,r,s,1,F),l},_getSelfIntersection:function(e,t,n,r){var i=e[0],a=e[1],o=e[2],s=e[3],l=e[4],u=e[5],c=e[6],h=e[7],p=new _(i,a,c,h,(!1)),m=p.getSide(new f(o,s),!0),g=p.getSide(new f(l,u),!0);if(m===g){var v=(i-l)*(s-h)+(o-c)*(u-a);if(v*m>0)return n}var y=c-3*l+3*o-i,w=l-2*o+i,b=o-i,x=h-3*u+3*s-a,E=u-2*s+a,C=s-a,k=x*b-y*C,N=x*w-y*E,S=E*b-w*C;if(k*k-4*N*S<0){var P,D=[],O=d.solveCubic(y*y+x*x,3*(y*w+x*E),2*(w*w+E*E)+y*b+x*C,w*b+E*C,D,0,1);if(O>0){for(var T=0,M=0;T<O;T++){var R=Math.abs(t.getCurvatureAt(D[T],!0));R>M&&(M=R,P=D[T])}var L=I.subdivide(e,P);r.endConnected=!0,r.renormalize=function(e,t){return[e*P,t*(1-P)+P]},I._getIntersections(L[0],L[1],t,t,n,r)}}return n},getOverlaps:function(e,t){function n(e){var t=e[6]-e[0],n=e[7]-e[1];return t*t+n*n}var r=Math.abs,i=4e-7,a=2e-7,o=I.isStraight(e),s=I.isStraight(t),l=o&&s;if(l){var u=n(e)<n(t),c=u?t:e,h=u?e:t,d=new _(c[0],c[1],c[6],c[7]);if(d.getDistance(new f(h[0],h[1]))>a||d.getDistance(new f(h[6],h[7]))>a)return null}else if(o^s)return null;for(var p=[e,t],m=[],g=0,v=0;g<2&&m.length<2;g+=0===v?0:1,v=1^v){var y=I.getParameterOf(p[1^g],new f(p[g][0===v?0:6],p[g][0===v?1:7]));if(null!=y){var w=0===g?[v,y]:[y,v];(0===m.length||r(w[0]-m[0][0])>i&&r(w[1]-m[0][1])>i)&&m.push(w)}if(1===g&&0===m.length)break}if(2!==m.length)m=null;else if(!l){var b=I.getPart(e,m[0][0],m[1][0]),x=I.getPart(t,m[0][1],m[1][1]);(r(x[2]-b[2])>a||r(x[3]-b[3])>a||r(x[4]-b[4])>a||r(x[5]-b[5])>a)&&(m=null)}return m}}}}),R=s.extend({_class:"CurveLocation",beans:!0,initialize:function be(e,t,n,r,i){if(t>.9999996){var a=e.getNext();a&&(t=0,e=a)}this._id=p.get(be),this._setCurve(e),this._parameter=t,this._point=n||e.getPointAt(t,!0),this._overlap=r,this._distance=i,this._intersection=this._next=this._prev=null},_setCurve:function(e){var t=e._path;this._version=t?t._version:0,this._curve=e,this._segment=null,this._segment1=e._segment1,this._segment2=e._segment2},_setSegment:function(e){this._setCurve(e.getCurve()),this._segment=e,this._parameter=e===this._segment1?0:1,this._point=e._point.clone()},getSegment:function(){var e=this.getCurve(),t=this._segment;if(!t){var n=this.getParameter();0===n?t=e._segment1:1===n?t=e._segment2:null!=n&&(t=e.getPartLength(0,n)<e.getPartLength(n,1)?e._segment1:e._segment2),this._segment=t}return t},getCurve:function(){function e(e){var t=e&&e.getCurve();if(t&&null!=(r._parameter=t.getParameterOf(r._point)))return r._setCurve(t),r._segment=e,t}var t=this._curve,n=t&&t._path,r=this;return n&&n._version!==this._version&&(t=this._parameter=this._curve=this._offset=null),t||e(this._segment)||e(this._segment1)||e(this._segment2.getPrevious())},getPath:function(){var e=this.getCurve();return e&&e._path},getIndex:function(){var e=this.getCurve();return e&&e.getIndex()},getParameter:function(){var e=this.getCurve(),t=this._parameter;return e&&null==t?this._parameter=e.getParameterOf(this._point):t},getPoint:function(){return this._point},getOffset:function(){var e=this._offset;if(null==e){e=0;var t=this.getPath(),n=this.getIndex();if(t&&null!=n)for(var r=t.getCurves(),i=0;i<n;i++)e+=r[i].getLength();this._offset=e+=this.getCurveOffset()}return e},getCurveOffset:function(){var e=this.getCurve(),t=this.getParameter();return null!=t&&e&&e.getPartLength(0,t)},getIntersection:function(){return this._intersection},getDistance:function(){return this._distance},divide:function(){var e=this.getCurve(),t=null;return e&&(t=e.divide(this.getParameter(),!0),t&&this._setSegment(t._segment1)),t},split:function(){var e=this.getCurve();return e?e.split(this.getParameter(),!0):null},equals:function(e,t){var n=this===e,r=2e-7;if(!n&&e instanceof R&&this.getPath()===e.getPath()&&this.getPoint().isClose(e.getPoint(),r)){var i=this.getCurve(),a=e.getCurve(),o=Math.abs,s=o((i.isLast()&&a.isFirst()?-1:i.getIndex())+this.getParameter()-((a.isLast()&&i.isFirst()?-1:a.getIndex())+e.getParameter()));n=(s<4e-7||(s=o(this.getOffset()-e.getOffset()))<r||o(this.getPath().getLength()-s)<r)&&(t||!this._intersection&&!e._intersection||this._intersection&&this._intersection.equals(e._intersection,!0))}return n},toString:function(){var e=[],t=this.getPoint(),n=h.instance;t&&e.push("point: "+t);var r=this.getIndex();null!=r&&e.push("index: "+r);var i=this.getParameter();return null!=i&&e.push("parameter: "+n.number(i)),null!=this._distance&&e.push("distance: "+n.number(this._distance)),"{ "+e.join(", ")+" }"},isTouching:function(){var e=this._intersection;if(e&&this.getTangent().isCollinear(e.getTangent())){var t=this.getCurve(),n=e.getCurve();return!(t.isStraight()&&n.isStraight()&&t.getLine().intersect(n.getLine()))}return!1},isCrossing:function(){function e(e,t,n){return t<n?e>t&&e<n:e>t&&e<=c||e>=-c&&e<n}var t=this._intersection;if(!t)return!1;var n=this.getParameter(),r=t.getParameter(),i=4e-7,a=1-i;if(n>=i&&n<=a||r>=i&&r<=a)return!this.isTouching();var o=this.getCurve(),s=o.getPrevious(),l=t.getCurve(),u=l.getPrevious(),c=Math.PI;if(!s||!u)return!1;var h=s.getTangentAt(a,!0).negate().getAngleInRadians(),d=o.getTangentAt(i,!0).getAngleInRadians(),p=u.getTangentAt(a,!0).negate().getAngleInRadians(),f=l.getTangentAt(i,!0).getAngleInRadians();return e(p,h,d)^e(f,h,d)&&e(p,d,h)^e(f,d,h)},isOverlap:function(){return!!this._overlap}},s.each(I.evaluateMethods,function(e){var t=e+"At";this[e]=function(){var e=this.getParameter(),n=this.getCurve();return null!=e&&n&&n[t](e,!0)}},{preserve:!0}),new function(){function e(e,t,n){function r(n,r){for(var a=n+r;a>=-1&&a<=i;a+=r){var o=e[(a%i+i)%i];if(!t.getPoint().isClose(o.getPoint(),2e-7))break;if(t.equals(o))return o}return null}for(var i=e.length,a=0,o=i-1;a<=o;){var s,l=a+o>>>1,u=e[l];if(n&&(s=t.equals(u)?u:r(l,-1)||r(l,1)))return t._overlap&&(s._overlap=s._intersection._overlap=!0),s;var c=t.getPath(),h=u.getPath(),d=c===h?t.getIndex()+t.getParameter()-(u.getIndex()+u.getParameter()):c._id-h._id;d<0?o=l-1:a=l+1}return e.splice(a,0,t),t}return{statics:{insert:e,expand:function(t){for(var n=t.slice(),r=0,i=t.length;r<i;r++)e(n,t[r]._intersection,!1);return n}}}}),L=C.extend({_class:"PathItem",initialize:function(){},getIntersections:function(e,t,n,r){var i=this===e||!e,a=this._matrix.orNullIfIdentity(),o=i?a:(n||e._matrix).orNullIfIdentity();if(!i&&!this.getBounds(a).touches(e.getBounds(o)))return[];for(var s,e,l=this.getCurves(),u=i?l:e.getCurves(),c=l.length,h=i?c:u.length,d=[],p=[],f=0;f<h;f++)d[f]=u[f].getValues(o);for(var f=0;f<c;f++){var m=l[f],g=i?d[f]:m.getValues(a),v=m.getPath();v!==e&&(e=v,s=[],p.push(s)),i&&I._getSelfIntersection(g,m,s,{include:t,startConnected:1===c&&m.getPoint1().equals(m.getPoint2())});for(var y=i?f+1:0;y<h;y++){if(r&&s.length)return s;var w=u[y];I._getIntersections(g,d[y],m,w,s,{include:t,startConnected:i&&m.getPrevious()===w,endConnected:i&&m.getNext()===w})}}s=[];for(var f=0,b=p.length;f<b;f++)s.push.apply(s,p[f]);return s},getCrossings:function(e){return this.getIntersections(e,function(e){return e.isCrossing()})},_asPathItem:function(){return this},setPathData:function(e){function t(e,t){var n=+r[e];return s&&(n+=l[t]),n}function n(e){return new f(t(e,"x"),t(e+1,"y"))}var r,i,a,o=e.match(/[mlhvcsqtaz][^mlhvcsqtaz]*/gi),s=!1,l=new f,u=new f;this.clear();for(var c=0,h=o&&o.length;c<h;c++){var d=o[c],p=d[0],m=p.toLowerCase();r=d.match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);var v=r&&r.length;switch(s=p===m,"z"!==i||/[mz]/.test(m)||this.moveTo(l=u),m){case"m":case"l":for(var y="m"===m,w=0;w<v;w+=2)this[0===w&&y?"moveTo":"lineTo"](l=n(w));a=l,y&&(u=l);break;case"h":case"v":for(var b="h"===m?"x":"y",w=0;w<v;w++)l[b]=t(w,b),this.lineTo(l);a=l;break;case"c":for(var w=0;w<v;w+=6)this.cubicCurveTo(n(w),a=n(w+2),l=n(w+4));break;case"s":for(var w=0;w<v;w+=4)this.cubicCurveTo(/[cs]/.test(i)?l.multiply(2).subtract(a):l,a=n(w),l=n(w+2)),i=m;break;case"q":for(var w=0;w<v;w+=4)this.quadraticCurveTo(a=n(w),l=n(w+2));break;case"t":for(var w=0;w<v;w+=2)this.quadraticCurveTo(a=/[qt]/.test(i)?l.multiply(2).subtract(a):l,l=n(w)),i=m;break;case"a":for(var w=0;w<v;w+=7)this.arcTo(l=n(w+5),new g((+r[w]),(+r[w+1])),+r[w+2],+r[w+4],+r[w+3]);break;case"z":this.closePath(!0)}i=m}},_canComposite:function(){return!(this.hasFill()&&this.hasStroke())},_contains:function(e){var t=this._getWinding(e,!1,!0);return!!("evenodd"===this.getWindingRule()?1&t:t)}}),A=L.extend({_class:"Path",_serializeFields:{segments:[],closed:!1},initialize:function(e){this._closed=!1,this._segments=[],this._version=0;var t=Array.isArray(e)?"object"==typeof e[0]?e:arguments:!e||e.size!==o||e.x===o&&e.point===o?null:arguments;t&&t.length>0?this.setSegments(t):(this._curves=o,this._selectedSegmentState=0,t||"string"!=typeof e||(this.setPathData(e),e=null)),this._initialize(!t&&e)},_equals:function(e){return this._closed===e._closed&&s.equals(this._segments,e._segments)},clone:function(e){var t=new A(C.NO_INSERT);return t.setSegments(this._segments),t._closed=this._closed,this._clockwise!==o&&(t._clockwise=this._clockwise),this._clone(t,e)},_changed:function _e(e){if(_e.base.call(this,e),8&e){var t=this._parent;if(t&&(t._currentPath=o),this._length=this._area=this._clockwise=this._monoCurves=o,16&e)this._version++;else if(this._curves)for(var n=0,r=this._curves.length;n<r;n++)this._curves[n]._changed()}else 32&e&&(this._bounds=o)},getStyle:function(){var e=this._parent;return(e instanceof B?e:this)._style},getSegments:function(){return this._segments},setSegments:function(e){var t=this.isFullySelected();this._segments.length=0,this._selectedSegmentState=0,this._curves=o,e&&e.length>0&&this._add(T.readAll(e)),t&&this.setFullySelected(!0)},getFirstSegment:function(){return this._segments[0]},getLastSegment:function(){return this._segments[this._segments.length-1]},getCurves:function(){var e=this._curves,t=this._segments;if(!e){var n=this._countCurves();e=this._curves=new Array(n);for(var r=0;r<n;r++)e[r]=new I(this,t[r],t[r+1]||t[0])}return e},getFirstCurve:function(){return this.getCurves()[0]},getLastCurve:function(){var e=this.getCurves();return e[e.length-1]},isClosed:function(){return this._closed},setClosed:function(e){if(this._closed!=(e=!!e)){if(this._closed=e,this._curves){var t=this._curves.length=this._countCurves();e&&(this._curves[t-1]=new I(this,this._segments[t-1],this._segments[0]))}this._changed(25)}}},{beans:!0,getPathData:function(e,t){function n(t,n){t._transformCoordinates(e,m,!1),r=m[0],i=m[1],g?(v.push("M"+f.pair(r,i)),g=!1):(s=m[2],l=m[3],s===r&&l===i&&u===a&&c===o?n||v.push("l"+f.pair(r-a,i-o)):v.push("c"+f.pair(u-a,c-o)+" "+f.pair(s-a,l-o)+" "+f.pair(r-a,i-o))),a=r,o=i,u=m[4],c=m[5]}var r,i,a,o,s,l,u,c,d=this._segments,p=d.length,f=new h(t),m=new Array(6),g=!0,v=[];if(0===p)return"";for(var y=0;y<p;y++)n(d[y]);return this._closed&&p>0&&(n(d[0],!0),v.push("z")),v.join("")}},{isEmpty:function(){return 0===this._segments.length},_transformContent:function(e){for(var t=new Array(6),n=0,r=this._segments.length;n<r;n++)this._segments[n]._transformCoordinates(e,t,!0);return!0},_add:function(e,t){for(var n=this._segments,r=this._curves,i=e.length,a=null==t,t=a?n.length:t,o=0;o<i;o++){var s=e[o];s._path&&(s=e[o]=s.clone()),s._path=this,s._index=t+o,s._selectionState&&this._updateSelection(s,0,s._selectionState)}if(a)n.push.apply(n,e);else{n.splice.apply(n,[t,0].concat(e));for(var o=t+i,l=n.length;o<l;o++)n[o]._index=o}if(r){var u=this._countCurves(),c=t+i-1===u?t-1:t,h=c,d=Math.min(c+i,u);e._curves&&(r.splice.apply(r,[c,0].concat(e._curves)),h+=e._curves.length);for(var o=h;o<d;o++)r.splice(o,0,new I(this,null,null));this._adjustCurves(c,d)}return this._changed(25),e},_adjustCurves:function(e,t){for(var n,r=this._segments,i=this._curves,a=e;a<t;a++)n=i[a],n._path=this,n._segment1=r[a],n._segment2=r[a+1]||r[0],n._changed();(n=i[this._closed&&0===e?r.length-1:e-1])&&(n._segment2=r[e]||r[0],n._changed()),(n=i[t])&&(n._segment1=r[t],n._changed())},_countCurves:function(){var e=this._segments.length;return!this._closed&&e>0?e-1:e},add:function(e){return arguments.length>1&&"number"!=typeof e?this._add(T.readAll(arguments)):this._add([T.read(arguments)])[0]},insert:function(e,t){return arguments.length>2&&"number"!=typeof t?this._add(T.readAll(arguments,1),e):this._add([T.read(arguments,1)],e)[0]},addSegment:function(){return this._add([T.read(arguments)])[0]},insertSegment:function(e){return this._add([T.read(arguments,1)],e)[0]},addSegments:function(e){return this._add(T.readAll(e))},insertSegments:function(e,t){return this._add(T.readAll(t),e)},removeSegment:function(e){return this.removeSegments(e,e+1)[0]||null},removeSegments:function(e,t,n){e=e||0,t=s.pick(t,this._segments.length);var r=this._segments,i=this._curves,a=r.length,o=r.splice(e,t-e),l=o.length;if(!l)return o;for(var u=0;u<l;u++){var c=o[u];c._selectionState&&this._updateSelection(c,c._selectionState,0),c._index=c._path=null}for(var u=e,h=r.length;u<h;u++)r[u]._index=u;if(i){var d=e>0&&t===a+(this._closed?1:0)?e-1:e,i=i.splice(d,l);n&&(o._curves=i.slice(1)),this._adjustCurves(d,d)}return this._changed(25),o},clear:"#removeSegments",hasHandles:function(){for(var e=this._segments,t=0,n=e.length;t<n;t++)if(e[t].hasHandles())return!0;return!1},clearHandles:function(){for(var e=this._segments,t=0,n=e.length;t<n;t++)e[t].clearHandles()},getLength:function(){if(null==this._length){for(var e=this.getCurves(),t=0,n=0,r=e.length;n<r;n++)t+=e[n].getLength();this._length=t}return this._length},getArea:function(){if(null==this._area){for(var e=this._segments,t=e.length,n=t-1,r=0,i=0,a=this._closed?t:n;i<a;i++)r+=I.getArea(I.getValues(e[i],e[i<n?i+1:0]));this._area=r}return this._area},isClockwise:function(){return this._clockwise!==o?this._clockwise:this.getArea()>=0},setClockwise:function(e){this.isClockwise()!=(e=!!e)&&this.reverse(),this._clockwise=e},isFullySelected:function(){var e=this._segments.length;return this._selected&&e>0&&this._selectedSegmentState===7*e},setFullySelected:function(e){e&&this._selectSegments(!0),this.setSelected(e)},setSelected:function xe(e){e||this._selectSegments(!1),xe.base.call(this,e)},_selectSegments:function(e){var t=this._segments.length;this._selectedSegmentState=e?7*t:0;for(var n=0;n<t;n++)this._segments[n]._selectionState=e?7:0},_updateSelection:function(e,t,n){e._selectionState=n;var r=this._selectedSegmentState+=n-t;r>0&&this.setSelected(!0)},flatten:function(e){for(var t=new z(this,64,.1),n=0,r=t.length/Math.ceil(t.length/e),i=t.length+(this._closed?-r:r)/2,a=[];n<=i;)a.push(new T(t.getPointAt(n))),n+=r;this.setSegments(a)},reduce:function(){for(var e=this.getCurves(),t=e.length-1;t>=0;t--){var n=e[t];n.hasHandles()||0!==n.getLength()&&!n.isCollinear(n.getNext())||n.remove()}return this},simplify:function(e){if(this._segments.length>2){var t=new V(this,e||2.5);this.setSegments(t.fit())}},split:function(e,t){if(null===t)return null;if(1===arguments.length){var n=e;if("number"==typeof n&&(n=this.getLocationAt(n)),!n)return null;e=n.index,t=n.parameter}var r=4e-7,i=1-r;t>=i&&(e++,t--);var a=this.getCurves();if(e>=0&&e<a.length){t>=r&&a[e++].divide(t,!0);var o,s=this.removeSegments(e,this._segments.length,!0);return this._closed?(this.setClosed(!1),o=this):(o=new A(C.NO_INSERT),o.insertAbove(this,!0),this._clone(o)),o._add(s,0),this.addSegment(s[0]),o}return null},reverse:function(){this._segments.reverse();for(var e=0,t=this._segments.length;e<t;e++){var n=this._segments[e],r=n._handleIn;n._handleIn=n._handleOut,n._handleOut=r,n._index=e}this._curves=null,this._clockwise!==o&&(this._clockwise=!this._clockwise),this._changed(9)},join:function(e){if(e){var t=e._segments,n=this.getLastSegment(),r=e.getLastSegment();if(!r)return this;n&&n._point.equals(r._point)&&e.reverse();var i=e.getFirstSegment();if(n&&n._point.equals(i._point))n.setHandleOut(i._handleOut),this._add(t.slice(1));else{var a=this.getFirstSegment();a&&a._point.equals(i._point)&&e.reverse(),r=e.getLastSegment(),a&&a._point.equals(r._point)?(a.setHandleIn(r._handleIn),this._add(t.slice(0,t.length-1),0)):this._add(t.slice())}e._closed&&this._add([t[0]]),e.remove()}var o=this.getFirstSegment(),s=this.getLastSegment();return o!==s&&o._point.equals(s._point)&&(o.setHandleIn(s._handleIn),s.remove(),this.setClosed(!0)),this},toShape:function(e){function t(e,t){var n=u[e],r=n.getNext(),i=u[t],a=i.getNext();return n._handleOut.isZero()&&r._handleIn.isZero()&&i._handleOut.isZero()&&a._handleIn.isZero()&&r._point.subtract(n._point).isCollinear(a._point.subtract(i._point))}function n(e){var t=u[e],n=t.getPrevious(),r=t.getNext();return n._handleOut.isZero()&&t._handleIn.isZero()&&t._handleOut.isZero()&&r._handleIn.isZero()&&t._point.subtract(n._point).isOrthogonal(r._point.subtract(t._point));
 }function r(e){var t=u[e],n=t.getNext(),r=t._handleOut,i=n._handleIn,a=.5522847498307936;if(r.isOrthogonal(i)){var o=t._point,s=n._point,l=new _(o,r,(!0)).intersect(new _(s,i,(!0)),!0);return l&&d.isZero(r.getLength()/l.subtract(o).getLength()-a)&&d.isZero(i.getLength()/l.subtract(s).getLength()-a)}return!1}function i(e,t){return u[e]._point.getDistance(u[t]._point)}if(!this._closed)return null;var a,o,s,l,u=this._segments;if(!this.hasHandles()&&4===u.length&&t(0,2)&&t(1,3)&&n(1)?(a=S.Rectangle,o=new g(i(0,3),i(0,1)),l=u[1]._point.add(u[2]._point).divide(2)):8===u.length&&r(0)&&r(2)&&r(4)&&r(6)&&t(1,5)&&t(3,7)?(a=S.Rectangle,o=new g(i(1,6),i(0,3)),s=o.subtract(new g(i(0,7),i(1,2))).divide(2),l=u[3]._point.add(u[4]._point).divide(2)):4===u.length&&r(0)&&r(1)&&r(2)&&r(3)&&(d.isZero(i(0,2)-i(1,3))?(a=S.Circle,s=i(0,2)/2):(a=S.Ellipse,s=new g(i(2,0)/2,i(3,1)/2)),l=u[1]._point),a){var c=this.getPosition(!0),h=this._clone(new a({center:c,size:o,radius:s,insert:!1}),e,!1);return h.rotate(l.subtract(c).getAngle()+90),h}return null},_hitTestSelf:function(e,t){function n(t,n){return e.subtract(t).divide(n).length<=1}function r(e,r,i){if(!t.selected||r.isSelected()){var a=e._point;if(r!==a&&(r=r.add(a)),n(r,b))return new O(i,p,{segment:e,point:r})}}function i(e,n){return(n||t.segments)&&r(e,e._point,"segment")||!n&&t.handles&&(r(e,e._handleIn,"handle-in")||r(e,e._handleOut,"handle-out"))}function a(e){c.add(e)}function o(t){if(("round"!==s||"round"!==l)&&(c=new A({internal:!0,closed:!0}),y||t._index>0&&t._index<v-1?"round"!==s&&(t._handleIn.isZero()||t._handleOut.isZero())&&A._addBevelJoin(t,s,C,u,a,!0):"round"!==l&&A._addSquareCap(t,l,C,a,!0),!c.isEmpty())){var r;return c.contains(e)||(r=c.getNearestLocation(e))&&n(r.getPoint(),w)}return n(t._point,b)}var s,l,u,c,h,d,p=this,m=this.getStyle(),g=this._segments,v=g.length,y=this._closed,w=t._tolerancePadding,b=w,_=t.stroke&&m.hasStroke(),x=t.fill&&m.hasFill(),E=t.curves,C=_?m.getStrokeWidth()/2:x&&t.tolerance>0||E?0:null;if(null!==C&&(C>0?(s=m.getStrokeJoin(),l=m.getStrokeCap(),u=C*m.getMiterLimit(),b=w.add(new f(C,C))):s=l="round"),!t.ends||t.segments||y){if(t.segments||t.handles)for(var k=0;k<v;k++)if(d=i(g[k]))return d}else if(d=i(g[0],!0)||i(g[v-1],!0))return d;if(null!==C){if(h=this.getNearestLocation(e)){var N=h.getParameter();0===N||1===N&&v>1?o(h.getSegment())||(h=null):n(h.getPoint(),b)||(h=null)}if(!h&&"miter"===s&&v>1)for(var k=0;k<v;k++){var S=g[k];if(e.getDistance(S._point)<=u&&o(S)){h=S.getLocation();break}}}return!h&&x&&this._contains(e)||h&&!_&&!E?new O("fill",this):h?new O(_?"stroke":"curve",this,{location:h,point:h.getPoint()}):null}},s.each(I.evaluateMethods,function(e){this[e+"At"]=function(t,n){var r=this.getLocationAt(t,n);return r&&r[e]()}},{beans:!1,getLocationOf:function(){for(var e=f.read(arguments),t=this.getCurves(),n=0,r=t.length;n<r;n++){var i=t[n].getLocationOf(e);if(i)return i}return null},getOffsetOf:function(){var e=this.getLocationOf.apply(this,arguments);return e?e.getOffset():null},getLocationAt:function(e,t){var n=this.getCurves(),r=0;if(t){var i=~~e,a=n[i];return a?a.getLocationAt(e-i,!0):null}for(var o=0,s=n.length;o<s;o++){var l=r,a=n[o];if(r+=a.getLength(),r>e)return a.getLocationAt(e-l)}return n.length>0&&e<=this.getLength()?new R(n[n.length-1],1):null},getNearestLocation:function(){for(var e=f.read(arguments),t=this.getCurves(),n=1/0,r=null,i=0,a=t.length;i<a;i++){var o=t[i].getNearestLocation(e);o._distance<n&&(n=o._distance,r=o)}return r},getNearestPoint:function(){return this.getNearestLocation.apply(this,arguments).getPoint()}}),new function(){function e(e,t,n,r){function i(t){var n=o[t],r=o[t+1];h==n&&d==r||(e.beginPath(),e.moveTo(h,d),e.lineTo(n,r),e.stroke(),e.beginPath(),e.arc(n,r,a,0,2*Math.PI,!0),e.fill())}for(var a=r/2,o=new Array(6),s=0,l=t.length;s<l;s++){var u=t[s];u._transformCoordinates(n,o,!1);var c=u._selectionState,h=o[0],d=o[1];if(1&c&&i(2),2&c&&i(4),e.fillRect(h-a,d-a,r,r),!(4&c)){var p=e.fillStyle;e.fillStyle="#ffffff",e.fillRect(h-a+1,d-a+1,r-2,r-2),e.fillStyle=p}}}function t(e,t,n){function r(t){if(n)t._transformCoordinates(n,f,!1),i=f[0],a=f[1];else{var r=t._point;i=r._x,a=r._y}if(m)e.moveTo(i,a),m=!1;else{if(n)l=f[2],u=f[3];else{var d=t._handleIn;l=i+d._x,u=a+d._y}l===i&&u===a&&c===o&&h===s?e.lineTo(i,a):e.bezierCurveTo(c,h,l,u,i,a)}if(o=i,s=a,n)c=f[4],h=f[5];else{var d=t._handleOut;c=o+d._x,h=s+d._y}}for(var i,a,o,s,l,u,c,h,d=t._segments,p=d.length,f=new Array(6),m=!0,g=0;g<p;g++)r(d[g]);t._closed&&p>0&&r(d[0])}return{_draw:function(e,n,r){function i(e){return h[(e%d+d)%d]}var o=n.dontStart,s=n.dontFinish||n.clip,l=this.getStyle(),u=l.hasFill(),c=l.hasStroke(),h=l.getDashArray(),d=!a.support.nativeDash&&c&&h&&h.length;if(o||e.beginPath(),!o&&this._currentPath?e.currentPath=this._currentPath:(u||c&&!d||s)&&(t(e,this,r),this._closed&&e.closePath(),o||(this._currentPath=e.currentPath)),!s&&(u||c)&&(this._setStyles(e),u&&(e.fill(l.getWindingRule()),e.shadowColor="rgba(0,0,0,0)"),c)){if(d){o||e.beginPath();var p,f=new z(this,32,.25,r),m=f.length,g=-l.getDashOffset(),v=0;for(g%=m;g>0;)g-=i(v--)+i(v--);for(;g<m;)p=g+i(v++),(g>0||p>0)&&f.drawPart(e,Math.max(g,0),Math.max(p,0)),g=p+i(v++)}e.stroke()}},_drawSelected:function(n,r){n.beginPath(),t(n,this,r),n.stroke(),e(n,this._segments,r,a.settings.handleSize)}}},new function(){function e(e){var t=e.length,n=[],r=[],i=2;n[0]=e[0]/i;for(var a=1;a<t;a++)r[a]=1/i,i=(a<t-1?4:2)-r[a],n[a]=(e[a]-n[a-1])/i;for(var a=1;a<t;a++)n[t-a-1]-=r[t-a]*n[t-a];return n}return{smooth:function(){var t=this._segments,n=t.length,r=this._closed,i=n,a=0;if(!(n<=2)){r&&(a=Math.min(n,4),i+=2*Math.min(n,a));for(var o=[],s=0;s<n;s++)o[s+a]=t[s]._point;if(r)for(var s=0;s<a;s++)o[s]=t[s+n-a]._point,o[s+n+a]=t[s]._point;else i--;for(var l=[],s=1;s<i-1;s++)l[s]=4*o[s]._x+2*o[s+1]._x;l[0]=o[0]._x+2*o[1]._x,l[i-1]=3*o[i-1]._x;for(var u=e(l),s=1;s<i-1;s++)l[s]=4*o[s]._y+2*o[s+1]._y;l[0]=o[0]._y+2*o[1]._y,l[i-1]=3*o[i-1]._y;var c=e(l);if(r){for(var s=0,h=n;s<a;s++,h++){var d=s/a,p=1-d,m=s+a,g=h+a;u[h]=u[s]*d+u[h]*p,c[h]=c[s]*d+c[h]*p,u[g]=u[m]*p+u[g]*d,c[g]=c[m]*p+c[g]*d}i--}for(var v=null,s=a;s<=i-a;s++){var y=t[s-a];v&&y.setHandleIn(v.subtract(y._point)),s<i&&(y.setHandleOut(new f(u[s],c[s]).subtract(y._point)),v=s<i-1?new f(2*o[s+1]._x-u[s+1],2*o[s+1]._y-c[s+1]):new f((o[i]._x+u[i-1])/2,(o[i]._y+c[i-1])/2))}if(r&&v){var y=this._segments[0];y.setHandleIn(v.subtract(y._point))}}}}},new function(){function e(e){var t=e._segments;if(0===t.length)throw new Error("Use a moveTo() command first");return t[t.length-1]}return{moveTo:function(){var e=this._segments;1===e.length&&this.removeSegment(0),e.length||this._add([new T(f.read(arguments))])},moveBy:function(){throw new Error("moveBy() is unsupported on Path items.")},lineTo:function(){this._add([new T(f.read(arguments))])},cubicCurveTo:function(){var t=f.read(arguments),n=f.read(arguments),r=f.read(arguments),i=e(this);i.setHandleOut(t.subtract(i._point)),this._add([new T(r,n.subtract(r))])},quadraticCurveTo:function(){var t=f.read(arguments),n=f.read(arguments),r=e(this)._point;this.cubicCurveTo(t.add(r.subtract(t).multiply(1/3)),t.add(n.subtract(t).multiply(1/3)),n)},curveTo:function(){var t=f.read(arguments),n=f.read(arguments),r=s.pick(s.read(arguments),.5),i=1-r,a=e(this)._point,o=t.subtract(a.multiply(i*i)).subtract(n.multiply(r*r)).divide(2*r*i);if(o.isNaN())throw new Error("Cannot put a curve through points with parameter = "+r);this.quadraticCurveTo(o,n)},arcTo:function(){var t,n,r,i,a,o=e(this),l=o._point,u=f.read(arguments),c=s.peek(arguments),h=s.pick(c,!0);if("boolean"==typeof h)var d=l.add(u).divide(2),t=d.add(d.subtract(l).rotate(h?-90:90));else if(s.remain(arguments)<=2)t=u,u=f.read(arguments);else{var p=g.read(arguments);if(p.isZero())return this.lineTo(u);var m=s.read(arguments),h=!!s.read(arguments),v=!!s.read(arguments),d=l.add(u).divide(2),y=l.subtract(d).rotate(-m),w=y.x,x=y.y,E=Math.abs,C=E(p.width),k=E(p.height),N=C*C,S=k*k,P=w*w,D=x*x,O=Math.sqrt(P/N+D/S);if(O>1&&(C*=O,k*=O,N=C*C,S=k*k),O=(N*S-N*D-S*P)/(N*D+S*P),E(O)<1e-12&&(O=0),O<0)throw new Error("Cannot create an arc with the given arguments");n=new f(C*x/k,-k*w/C).multiply((v===h?-1:1)*Math.sqrt(O)).rotate(m).add(d),a=(new b).translate(n).rotate(m).scale(C,k),i=a._inverseTransform(l),r=i.getDirectedAngle(a._inverseTransform(u)),!h&&r>0?r-=360:h&&r<0&&(r+=360)}if(t){var M=new _(l.add(t).divide(2),t.subtract(l).rotate(90),(!0)),I=new _(t.add(u).divide(2),u.subtract(t).rotate(90),(!0)),R=new _(l,u),L=R.getSide(t);if(n=M.intersect(I,!0),!n){if(!L)return this.lineTo(u);throw new Error("Cannot create an arc with the given arguments")}i=l.subtract(n),r=i.getDirectedAngle(u.subtract(n));var A=R.getSide(n);0===A?r=L*Math.abs(r):L===A&&(r+=r<0?360:-360)}for(var B=Math.abs(r),z=B>=360?4:Math.ceil(B/90),V=r/z,j=V*Math.PI/360,F=4/3*Math.sin(j)/(1+Math.cos(j)),q=[],U=0;U<=z;U++){var y=u,W=null;if(U<z&&(W=i.rotate(90).multiply(F),a?(y=a._transformPoint(i),W=a._transformPoint(i.add(W)).subtract(y)):y=n.add(i)),0===U)o.setHandleOut(W);else{var G=i.rotate(-90).multiply(F);a&&(G=a._transformPoint(i.add(G)).subtract(y)),q.push(new T(y,G,W))}i=i.rotate(V)}this._add(q)},lineBy:function(){var t=f.read(arguments),n=e(this)._point;this.lineTo(n.add(t))},curveBy:function(){var t=f.read(arguments),n=f.read(arguments),r=s.read(arguments),i=e(this)._point;this.curveTo(i.add(t),i.add(n),r)},cubicCurveBy:function(){var t=f.read(arguments),n=f.read(arguments),r=f.read(arguments),i=e(this)._point;this.cubicCurveTo(i.add(t),i.add(n),i.add(r))},quadraticCurveBy:function(){var t=f.read(arguments),n=f.read(arguments),r=e(this)._point;this.quadraticCurveTo(r.add(t),r.add(n))},arcBy:function(){var t=e(this)._point,n=t.add(f.read(arguments)),r=s.pick(s.peek(arguments),!0);"boolean"==typeof r?this.arcTo(n,r):this.arcTo(n,t.add(f.read(arguments)))},closePath:function(e){this.setClosed(!0),e&&this.join()}}},{_getBounds:function(e,t){return A[e](this._segments,this._closed,this.getStyle(),t)},statics:{getBounds:function(e,t,n,r,i){function a(e){e._transformCoordinates(r,s,!1);for(var t=0;t<2;t++)I._addBounds(l[t],l[t+4],s[t+2],s[t],t,i?i[t]:0,u,c,h);var n=l;l=s,s=n}var o=e[0];if(!o)return new y;for(var s=new Array(6),l=o._transformCoordinates(r,new Array(6),!1),u=l.slice(0,2),c=u.slice(),h=new Array(2),d=1,p=e.length;d<p;d++)a(e[d]);return t&&a(o),new y(u[0],u[1],c[0]-u[0],c[1]-u[1])},getStrokeBounds:function(e,t,n,r){function i(e){h=h.include(r?r._transformPoint(e,e):e)}function a(e){h=h.unite(m.setCenter(r?r._transformPoint(e._point):e._point))}function o(e,t){var n=e._handleIn,r=e._handleOut;"round"===t||!n.isZero()&&!r.isZero()&&n.isCollinear(r)?a(e):A._addBevelJoin(e,t,u,f,i)}function s(e,t){"round"===t?a(e):A._addSquareCap(e,t,u,i)}if(!n.hasStroke())return A.getBounds(e,t,n,r);for(var l=e.length-(t?0:1),u=n.getStrokeWidth()/2,c=A._getPenPadding(u,r),h=A.getBounds(e,t,n,r,c),d=n.getStrokeJoin(),p=n.getStrokeCap(),f=u*n.getMiterLimit(),m=new y(new g(c).multiply(2)),v=1;v<l;v++)o(e[v],d);return t?o(e[0],d):l>0&&(s(e[0],p),s(e[e.length-1],p)),h},_getPenPadding:function(e,t){if(!t)return[e,e];var n=t.shiftless(),r=n.transform(new f(e,0)),i=n.transform(new f(0,e)),a=r.getAngleInRadians(),o=r.getLength(),s=i.getLength(),l=Math.sin(a),u=Math.cos(a),c=Math.tan(a),h=-Math.atan(s*c/o),d=Math.atan(s/(c*o));return[Math.abs(o*Math.cos(h)*u-s*Math.sin(h)*l),Math.abs(s*Math.sin(d)*u+o*Math.cos(d)*l)]},_addBevelJoin:function(e,t,n,r,i,a){var o=e.getCurve(),s=o.getPrevious(),l=o.getPointAt(0,!0),u=s.getNormalAt(1,!0),c=o.getNormalAt(0,!0),h=u.getDirectedAngle(c)<0?-n:n;if(u.setLength(h),c.setLength(h),a&&(i(l),i(l.add(u))),"miter"===t){var d=new _(l.add(u),new f((-u.y),u.x),(!0)).intersect(new _(l.add(c),new f((-c.y),c.x),(!0)),!0);if(d&&l.getDistance(d)<=r&&(i(d),!a))return}a||i(l.add(u)),i(l.add(c))},_addSquareCap:function(e,t,n,r,i){var a=e._point,o=e.getLocation(),s=o.getNormal().multiply(n);i&&(r(a.subtract(s)),r(a.add(s))),"square"===t&&(a=a.add(s.rotate(0===o.getParameter()?-90:90))),r(a.add(s)),r(a.subtract(s))},getHandleBounds:function(e,t,n,r,i,a){for(var o=new Array(6),s=1/0,l=-s,u=s,c=l,h=0,d=e.length;h<d;h++){var p=e[h];p._transformCoordinates(r,o,!1);for(var f=0;f<6;f+=2){var m=0===f?a:i,g=m?m[0]:0,v=m?m[1]:0,w=o[f],b=o[f+1],_=w-g,x=w+g,E=b-v,C=b+v;_<s&&(s=_),x>l&&(l=x),E<u&&(u=E),C>c&&(c=C)}}return new y(s,u,l-s,c-u)},getRoughBounds:function(e,t,n,r){var i=n.hasStroke()?n.getStrokeWidth()/2:0,a=i;return i>0&&("miter"===n.getStrokeJoin()&&(a=i*n.getMiterLimit()),"square"===n.getStrokeCap()&&(a=Math.max(a,i*Math.sqrt(2)))),A.getHandleBounds(e,t,n,r,A._getPenPadding(i,r),A._getPenPadding(a,r))}}});A.inject({statics:new function(){function e(e,t,n){var r=s.getNamed(n),i=new A(r&&r.insert===!1&&C.NO_INSERT);return i._add(e),i._closed=t,i.set(r)}function t(t,n,i){for(var a=new Array(4),o=0;o<4;o++){var s=r[o];a[o]=new T(s._point.multiply(n).add(t),s._handleIn.multiply(n),s._handleOut.multiply(n))}return e(a,!0,i)}var n=.5522847498307936,r=[new T([-1,0],[0,n],[0,-n]),new T([0,-1],[-n,0],[n,0]),new T([1,0],[0,-n],[0,n]),new T([0,1],[n,0],[-n,0])];return{Line:function(){return e([new T(f.readNamed(arguments,"from")),new T(f.readNamed(arguments,"to"))],!1,arguments)},Circle:function(){var e=f.readNamed(arguments,"center"),n=s.readNamed(arguments,"radius");return t(e,new g(n),arguments)},Rectangle:function(){var t,r=y.readNamed(arguments,"rectangle"),i=g.readNamed(arguments,"radius",0,{readNull:!0}),a=r.getBottomLeft(!0),o=r.getTopLeft(!0),s=r.getTopRight(!0),l=r.getBottomRight(!0);if(!i||i.isZero())t=[new T(a),new T(o),new T(s),new T(l)];else{i=g.min(i,r.getSize(!0).divide(2));var u=i.width,c=i.height,h=u*n,d=c*n;t=[new T(a.add(u,0),null,[-h,0]),new T(a.subtract(0,c),[0,d]),new T(o.add(0,c),null,[0,-d]),new T(o.add(u,0),[-h,0],null),new T(s.subtract(u,0),null,[h,0]),new T(s.add(0,c),[0,-d],null),new T(l.subtract(0,c),null,[0,d]),new T(l.subtract(u,0),[h,0])]}return e(t,!0,arguments)},RoundRectangle:"#Rectangle",Ellipse:function(){var e=S._readEllipse(arguments);return t(e.center,e.radius,arguments)},Oval:"#Ellipse",Arc:function(){var e=f.readNamed(arguments,"from"),t=f.readNamed(arguments,"through"),n=f.readNamed(arguments,"to"),r=s.getNamed(arguments),i=new A(r&&r.insert===!1&&C.NO_INSERT);return i.moveTo(e),i.arcTo(t,n),i.set(r)},RegularPolygon:function(){for(var t=f.readNamed(arguments,"center"),n=s.readNamed(arguments,"sides"),r=s.readNamed(arguments,"radius"),i=360/n,a=!(n%3),o=new f(0,a?-r:r),l=a?-1:.5,u=new Array(n),c=0;c<n;c++)u[c]=new T(t.add(o.rotate((c+l)*i)));return e(u,!0,arguments)},Star:function(){for(var t=f.readNamed(arguments,"center"),n=2*s.readNamed(arguments,"points"),r=s.readNamed(arguments,"radius1"),i=s.readNamed(arguments,"radius2"),a=360/n,o=new f(0,(-1)),l=new Array(n),u=0;u<n;u++)l[u]=new T(t.add(o.rotate(a*u).multiply(u%2?i:r)));return e(l,!0,arguments)}}}});var B=L.extend({_class:"CompoundPath",_serializeFields:{children:[]},initialize:function(e){this._children=[],this._namedChildren={},this._initialize(e)||("string"==typeof e?this.setPathData(e):this.addChildren(Array.isArray(e)?e:arguments))},insertChildren:function Ee(e,t,n){for(var r=t.length-1;r>=0;r--){var i=t[r];i instanceof B&&(t.splice.apply(t,[r,1].concat(i.removeChildren())),i.remove())}t=Ee.base.call(this,e,t,n,A);for(var r=0,a=!n&&t&&t.length;r<a;r++){var i=t[r];i._clockwise===o&&i.setClockwise(0===i._index)}return t},reverse:function(){for(var e=this._children,t=0,n=e.length;t<n;t++)e[t].reverse()},smooth:function(){for(var e=0,t=this._children.length;e<t;e++)this._children[e].smooth()},reduce:function Ce(){for(var e=this._children,t=e.length-1;t>=0;t--){var n=e[t].reduce();n.isEmpty()&&e.splice(t,1)}if(0===e.length){var n=new A(C.NO_INSERT);return n.insertAbove(this),n.setStyle(this._style),this.remove(),n}return Ce.base.call(this)},isClockwise:function(){var e=this.getFirstChild();return e&&e.isClockwise()},setClockwise:function(e){this.isClockwise()!==!!e&&this.reverse()},getFirstSegment:function(){var e=this.getFirstChild();return e&&e.getFirstSegment()},getLastSegment:function(){var e=this.getLastChild();return e&&e.getLastSegment()},getCurves:function(){for(var e=this._children,t=[],n=0,r=e.length;n<r;n++)t.push.apply(t,e[n].getCurves());return t},getFirstCurve:function(){var e=this.getFirstChild();return e&&e.getFirstCurve()},getLastCurve:function(){var e=this.getLastChild();return e&&e.getFirstCurve()},getArea:function(){for(var e=this._children,t=0,n=0,r=e.length;n<r;n++)t+=e[n].getArea();return t}},{beans:!0,getPathData:function(e,t){for(var n=this._children,r=[],i=0,a=n.length;i<a;i++){var o=n[i],s=o._matrix;r.push(o.getPathData(e&&!s.isIdentity()?e.chain(s):e,t))}return r.join(" ")}},{_getChildHitTestOptions:function(e){return e["class"]===A||"path"===e.type?e:new s(e,{fill:!1})},_draw:function(e,t,n){var r=this._children;if(0!==r.length){if(this._currentPath)e.currentPath=this._currentPath;else{t=t.extend({dontStart:!0,dontFinish:!0}),e.beginPath();for(var i=0,a=r.length;i<a;i++)r[i].draw(e,t,n);this._currentPath=e.currentPath}if(!t.clip){this._setStyles(e);var o=this._style;o.hasFill()&&(e.fill(o.getWindingRule()),e.shadowColor="rgba(0,0,0,0)"),o.hasStroke()&&e.stroke()}}},_drawSelected:function(e,t,n){for(var r=this._children,i=0,a=r.length;i<a;i++){var o=r[i],s=o._matrix;n[o._id]||o._drawSelected(e,s.isIdentity()?t:t.chain(s))}}},new function(){function e(e,t){var n=e._children;if(t&&0===n.length)throw new Error("Use a moveTo() command first");return n[n.length-1]}var t={moveTo:function(){var t=e(this),n=t&&t.isEmpty()?t:new A(C.NO_INSERT);n!==t&&this.addChild(n),n.moveTo.apply(n,arguments)},moveBy:function(){var t=e(this,!0),n=t&&t.getLastSegment(),r=f.read(arguments);this.moveTo(n?r.add(n._point):r)},closePath:function(t){e(this,!0).closePath(t)}};return s.each(["lineTo","cubicCurveTo","quadraticCurveTo","curveTo","arcTo","lineBy","cubicCurveBy","quadraticCurveBy","curveBy","arcBy"],function(n){t[n]=function(){var t=e(this,!0);t[n].apply(t,arguments)}}),t});L.inject(new function(){function e(e,t){var n=e.clone(!1).reduce().transform(null,!0,!0);return t?n.resolveCrossings().reorient():n}function t(e,t,n,r,i){var a=new e(C.NO_INSERT);return a.addChildren(t,!0),i&&(a=a.reduce()),a.insertAbove(r&&n.isSibling(r)&&n.getIndex()<r.getIndex()?r:n),a.setStyle(n._style),a}function n(n,i,o){function u(e){for(var t=0,n=e.length;t<n;t++){var r=e[t];p.push.apply(p,r._segments),f.push.apply(f,r._getMonoCurves())}}if(!n._children&&!n._closed)return r(n,i,o);var c=e(n,!0),h=i&&n!==i&&e(i,!0);h&&/^(subtract|exclude)$/.test(o)^h.isClockwise()!==c.isClockwise()&&h.reverse();var d=R.expand(c.getIntersections(h,function(e){return h&&e.isOverlap()||e.isCrossing()}));a(d);var p=[],f=[];u(c._children||[c]),h&&u(h._children||[h]);for(var m=0,g=d.length;m<g;m++)s(d[m]._segment,c,h,f,o);for(var m=0,g=p.length;m<g;m++){var v=p[m];null==v._winding&&s(v,c,h,f,o)}return t(B,l(p,o),n,i,!0)}function r(n,r,i){function a(e){if(s.contains(e.getPointAt(e.getLength()/2))^u)return c.unshift(e),!0}if(!r||!r._children&&!r._closed||!/^(subtract|intersect)$/.test(i))return null;for(var o=e(n,!1),s=e(r,!1),l=o.getIntersections(s,function(e){return e.isOverlap()||e.isCrossing()}),u="subtract"===i,c=[],h=l.length-1;h>=0;h--){var d=l[h].split();d&&(a(d)&&d.getFirstSegment().setHandleIn(0,0),o.getLastSegment().setHandleOut(0,0))}return a(o),t(k,c,n,r)}function i(e,t){for(var n=e;n;){if(n===t)return;n=n._prev}for(;e._next&&e._next!==t;)e=e._next;if(!e._next){for(;t._prev;)t=t._prev;e._next=t,t._prev=e}}function a(e){for(var t,n,r=4e-7,a=1-r,o=!1,s=[],l=e.length-1;l>=0;l--){var u=e[l],c=u._curve,h=u._parameter,d=h;c!==t?o=!c.hasHandles():n>0&&(h/=n);var p;h<r?p=c._segment1:h>a?p=c._segment2:(p=c.divide(h,!0,!0)._segment1,o&&s.push(p)),u._setSegment(p);var f=p._intersection,m=u._intersection;if(f){i(f,m);for(var g=f;g;)i(g._intersection,f),g=g._next}else p._intersection=m;t=c,n=d}for(var l=0,v=s.length;l<v;l++)s[l].clearHandles()}function o(e,t,n,r){var i=2e-7,a=4e-7,s=1-a,l=e.x,u=e.y,c=0,h=0,p=[],m=Math.abs;if(n){for(var g=-(1/0),v=1/0,y=u-i,w=u+i,b=0,_=t.length;b<_;b++){var x=t[b].values;if(I.solveCubic(x,0,l,p,0,1)>0)for(var E=p.length-1;E>=0;E--){var C=I.getPoint(x,p[E]).y;C<y&&C>g?g=C:C>w&&C<v&&(v=C)}}g=(g+u)/2,v=(v+u)/2,g>-(1/0)&&(c=o(new f(l,g),t,!1,r)),v<1/0&&(h=o(new f(l,v),t,!1,r))}else for(var k,N,S=l-i,P=l+i,D=!1,b=0,_=t.length;b<_;b++){var O=t[b],x=O.values,T=O.winding;if(T&&(1===T&&u>=x[1]&&u<=x[7]||u>=x[7]&&u<=x[1])&&1===I.solveCubic(x,1,u,p,0,1)){var M=p[0];if(!(M>s&&D&&O.next!==t[b+1]||M<a&&N>s&&O.previous===k)){var R=I.getPoint(x,M).x,L=I.getTangent(x,M).y,A=!1;d.isZero(L)&&!I.isStraight(x)||M<a&&L*I.getTangent(O.previous.values,1).y<0||M>s&&L*I.getTangent(O.next.values,0).y<0?r&&R>=S&&R<=P&&(++c,++h,A=!0):R<=S?(c+=T,A=!0):R>=P&&(h+=T,A=!0),O.previous!==t[b-1]&&(D=M<a&&A)}k=O,N=M}}return Math.max(m(c),m(h))}function s(e,t,n,r,i){var a=2e-7,s=[],l=e,u=0,c=0;do{var h=e.getCurve(),d=h.getLength();s.push({segment:e,curve:h,length:d}),u+=d,e=e.getNext()}while(e&&!e._intersection&&e!==l);for(var p=0;p<3;p++)for(var d=u*(p+1)/4,f=0,m=s.length;f<m;f++){var g=s[f],v=g.length;if(d<=v){(d<a||v-d<a)&&(d=v/2);var h=g.curve,y=h._path,w=y._parent,b=h.getPointAt(d),_=h.isHorizontal();w instanceof B&&(y=w),c+="subtract"===i&&n&&(y===t&&n._getWinding(b,_)||y===n&&!t._getWinding(b,_))?0:o(b,r,_);break}d-=v}for(var x=Math.round(c/3),E=s.length-1;E>=0;E--)s[E].segment._winding=x}function l(e,t){function n(e,t){if(e._visited)return!1;if(!c)return!0;var n=e._winding,r=e._intersection;return r&&t&&h&&r.isOverlap()&&(n=h[n]||n),c(n)}function r(e){return e===o||e===s}function i(e,t){if(!e._next)return e;for(;e;){var i=e._segment,a=i.getNext(),o=a._intersection;if(r(a)||!i._visited&&!a._visited&&(!c||(!t||n(i))&&(!(t&&o&&o.isOverlap())&&n(a)||!t&&o&&n(o._segment))))return e;e=e._next}return null}function a(e,t){for(;e;){var n=e._segment;if(r(n))return n;e=e[t?"_next":"_prev"]}}for(var o,s,l=[],c=u[t],h={unite:{1:2},intersect:{2:1}}[t],p=0,f=e.length;p<f;p++){var m=e[p],g=null,v=!1;if(n(m,!0)){for(o=s=null;!v;){var y=m._intersection,w=g&&m._handleIn;y=y&&(i(y,!0)||i(y,!1))||y;var b=y&&y._segment;if(b&&n(b)&&(m=b),m._visited){if(v=r(m),!v&&y){var _=a(y,!0)||a(y,!1);_&&(m=_,v=!0)}break}g||(g=new A(C.NO_INSERT),o=m,s=b),g.add(new T(m._point,w,m._handleOut)),m._visited=!0,m=m.getNext(),v=r(m)}v?(g.firstSegment.setHandleIn(m._handleIn),g.setClosed(!0)):g&&(console.error("Boolean operation resulted in open path","segments =",g._segments.length,"length =",g.getLength()),g=null),g&&(g._segments.length>8||!d.isZero(g.getArea()))&&(l.push(g),g=null)}}return l}var u={unite:function(e){return 1===e||0===e},intersect:function(e){return 2===e},subtract:function(e){return 1===e},exclude:function(e){return 1===e}};return{_getWinding:function(e,t,n){return o(e,this._getMonoCurves(),t,n)},unite:function(e){return n(this,e,"unite")},intersect:function(e){return n(this,e,"intersect")},subtract:function(e){return n(this,e,"subtract")},exclude:function(e){return n(this,e,"exclude")},divide:function(e){return t(k,[this.subtract(e),this.intersect(e)],this,e,!0)},resolveCrossings:function(){var e=this.getCrossings();if(!e.length)return this;a(R.expand(e));for(var n=this._children||[this],r=[],i=0,o=n.length;i<o;i++)r.push.apply(r,n[i]._segments);return t(B,l(r),this,null,!1)}}}),A.inject({_getMonoCurves:function(){function e(e){var t=e[1],i=e[7],a={values:e,winding:t===i?0:t>i?-1:1,previous:n,next:null};n&&(n.next=a),r.push(a),n=a}function t(t){if(0!==I.getLength(t)){var n=t[1],r=t[3],i=t[5],a=t[7];if(I.isStraight(t))e(t);else{var o=3*(r-i)-n+a,s=2*(n+i)-4*r,l=r-n,u=4e-7,c=1-u,h=[],p=d.solveQuadratic(o,s,l,h,u,c);if(0===p)e(t);else{h.sort();var f=h[0],m=I.subdivide(t,f);e(m[0]),p>1&&(f=(h[1]-f)/(1-f),m=I.subdivide(m[1],f),e(m[0])),e(m[1])}}}}var n,r=this._monoCurves;if(!r){r=this._monoCurves=[];for(var i=this.getCurves(),a=this._segments,o=0,s=i.length;o<s;o++)t(i[o].getValues());if(!this._closed&&a.length>1){var l=a[a.length-1]._point,u=a[0]._point,c=l._x,h=l._y,p=u._x,f=u._y;t([c,h,c,h,p,f,p,f])}if(r.length>0){var m=r[0],g=r[r.length-1];m.previous=g,g.next=m}}return r},getInteriorPoint:function(){var e=this.getBounds(),t=e.getCenter(!0);if(!this.contains(t)){for(var n=this._getMonoCurves(),r=[],i=t.y,a=[],o=0,s=n.length;o<s;o++){var l=n[o].values;if((1===n[o].winding&&i>=l[1]&&i<=l[7]||i>=l[7]&&i<=l[1])&&I.solveCubic(l,1,i,r,0,1)>0)for(var u=r.length-1;u>=0;u--)a.push(I.getPoint(l,r[u]).x);if(a.length>1)break}t.x=(a[0]+a[1])/2}return t},reorient:function(){return this.setClockwise(!0),this}}),B.inject({_getMonoCurves:function(){for(var e=this._children,t=[],n=0,r=e.length;n<r;n++)t.push.apply(t,e[n]._getMonoCurves());return t},reorient:function(){var e=this.removeChildren().sort(function(e,t){return t.getBounds().getArea()-e.getBounds().getArea()});if(e.length>0){this.addChildren(e);for(var t=e[0].isClockwise(),n=1,r=e.length;n<r;n++){for(var i=e[n].getInteriorPoint(),a=0,o=n-1;o>=0;o--)e[o].contains(i)&&a++;e[n].setClockwise(a%2===0&&t)}}return this}});var z=s.extend({_class:"PathIterator",initialize:function(e,t,n,r){function i(e,t){var n=I.getValues(e,t,r);s.push(n),a(n,e._index,0,1)}function a(e,t,r,i){if(i-r>c&&!I.isFlatEnough(e,n||.25)){var o=I.subdivide(e,.5),s=(r+i)/2;a(o[0],t,r,s),a(o[1],t,s,i)}else{var h=e[6]-e[0],d=e[7]-e[1],p=Math.sqrt(h*h+d*d);p>1e-6&&(u+=p,l.push({offset:u,value:i,index:t}))}}for(var o,s=[],l=[],u=0,c=1/(t||32),h=e._segments,d=h[0],p=1,f=h.length;p<f;p++)o=h[p],i(d,o),d=o;e._closed&&i(o,h[0]),this.curves=s,this.parts=l,this.length=u,this.index=0},getParameterAt:function(e){for(var t,n=this.index;t=n,!(0==n||this.parts[--n].offset<e););for(var r=this.parts.length;t<r;t++){var i=this.parts[t];if(i.offset>=e){this.index=t;var a=this.parts[t-1],o=a&&a.index==i.index?a.value:0,s=a?a.offset:0;return{value:o+(i.value-o)*(e-s)/(i.offset-s),index:i.index}}}var i=this.parts[this.parts.length-1];return{value:1,index:i.index}},drawPart:function(e,t,n){t=this.getParameterAt(t),n=this.getParameterAt(n);for(var r=t.index;r<=n.index;r++){var i=I.getPart(this.curves[r],r==t.index?t.value:0,r==n.index?n.value:1);r==t.index&&e.moveTo(i[0],i[1]),e.bezierCurveTo.apply(e,i.slice(2))}}},s.each(I.evaluateMethods,function(e){this[e+"At"]=function(t,n){var r=this.getParameterAt(t);return I[e](this.curves[r.index],r.value,n)}},{})),V=s.extend({initialize:function(e,t){for(var n,r=this.points=[],i=e._segments,a=0,o=i.length;a<o;a++){var s=i[a].point.clone();n&&n.equals(s)||(r.push(s),n=s)}e._closed&&(this.closed=!0,r.unshift(r[r.length-1]),r.push(r[1])),this.error=t},fit:function(){var e=this.points,t=e.length,n=this.segments=t>0?[new T(e[0])]:[];return t>1&&this.fitCubic(0,t-1,e[1].subtract(e[0]).normalize(),e[t-2].subtract(e[t-1]).normalize()),this.closed&&(n.shift(),n.pop()),n},fitCubic:function(e,t,n,r){if(t-e==1){var i=this.points[e],a=this.points[t],o=i.getDistance(a)/3;return void this.addCurve([i,i.add(n.normalize(o)),a.add(r.normalize(o)),a])}for(var s,l=this.chordLengthParameterize(e,t),u=Math.max(this.error,this.error*this.error),c=!0,h=0;h<=4;h++){var d=this.generateBezier(e,t,l,n,r),p=this.findMaxError(e,t,d,l);if(p.error<this.error&&c)return void this.addCurve(d);if(s=p.index,p.error>=u)break;c=this.reparameterize(e,t,l,d),u=p.error}var f=this.points[s-1].subtract(this.points[s]),m=this.points[s].subtract(this.points[s+1]),g=f.add(m).divide(2).normalize();this.fitCubic(e,s,n,g),this.fitCubic(s,t,g.negate(),r)},addCurve:function(e){var t=this.segments[this.segments.length-1];t.setHandleOut(e[1].subtract(e[0])),this.segments.push(new T(e[3],e[2].subtract(e[3])))},generateBezier:function(e,t,n,r,i){for(var a=1e-12,o=this.points[e],s=this.points[t],l=[[0,0],[0,0]],u=[0,0],c=0,h=t-e+1;c<h;c++){var d=n[c],p=1-d,f=3*d*p,m=p*p*p,g=f*p,v=f*d,y=d*d*d,w=r.normalize(g),b=i.normalize(v),_=this.points[e+c].subtract(o.multiply(m+g)).subtract(s.multiply(v+y));l[0][0]+=w.dot(w),l[0][1]+=w.dot(b),l[1][0]=l[0][1],l[1][1]+=b.dot(b),u[0]+=w.dot(_),u[1]+=b.dot(_)}var x,E,C=l[0][0]*l[1][1]-l[1][0]*l[0][1];if(Math.abs(C)>a){var k=l[0][0]*u[1]-l[1][0]*u[0],N=u[0]*l[1][1]-u[1]*l[0][1];x=N/C,E=k/C}else{var S=l[0][0]+l[0][1],P=l[1][0]+l[1][1];x=E=Math.abs(S)>a?u[0]/S:Math.abs(P)>a?u[1]/P:0}var D,O,T=s.getDistance(o),M=a*T;if(x<M||E<M)x=E=T/3;else{var I=s.subtract(o);D=r.normalize(x),O=i.normalize(E),D.dot(I)-O.dot(I)>T*T&&(x=E=T/3,D=O=null)}return[o,o.add(D||r.normalize(x)),s.add(O||i.normalize(E)),s]},reparameterize:function(e,t,n,r){for(var i=e;i<=t;i++)n[i-e]=this.findRoot(r,this.points[i],n[i-e]);for(var i=1,a=n.length;i<a;i++)if(n[i]<=n[i-1])return!1;return!0},findRoot:function(e,t,n){for(var r=[],i=[],a=0;a<=2;a++)r[a]=e[a+1].subtract(e[a]).multiply(3);for(var a=0;a<=1;a++)i[a]=r[a+1].subtract(r[a]).multiply(2);var o=this.evaluate(3,e,n),s=this.evaluate(2,r,n),l=this.evaluate(1,i,n),u=o.subtract(t),c=s.dot(s)+u.dot(l);return Math.abs(c)<1e-6?n:n-u.dot(s)/c},evaluate:function(e,t,n){for(var r=t.slice(),i=1;i<=e;i++)for(var a=0;a<=e-i;a++)r[a]=r[a].multiply(1-n).add(r[a+1].multiply(n));return r[0]},chordLengthParameterize:function(e,t){for(var n=[0],r=e+1;r<=t;r++)n[r-e]=n[r-e-1]+this.points[r].getDistance(this.points[r-1]);for(var r=1,i=t-e;r<=i;r++)n[r]/=n[i];return n},findMaxError:function(e,t,n,r){for(var i=Math.floor((t-e+1)/2),a=0,o=e+1;o<t;o++){var s=this.evaluate(3,n,r[o-e]),l=s.subtract(this.points[o]),u=l.x*l.x+l.y*l.y;u>=a&&(a=u,i=o)}return{error:a,index:i}}}),j=C.extend({_class:"TextItem",_boundsSelected:!0,_applyMatrix:!1,_canApplyMatrix:!1,_serializeFields:{content:null},_boundsGetter:"getBounds",initialize:function(e){this._content="",this._lines=[];var t=e&&s.isPlainObject(e)&&e.x===o&&e.y===o;this._initialize(t&&e,!t&&f.read(arguments))},_equals:function(e){return this._content===e._content},_clone:function ke(e,t,n){return e.setContent(this._content),ke.base.call(this,e,t,n)},getContent:function(){return this._content},setContent:function(e){this._content=""+e,this._lines=this._content.split(/\r\n|\n|\r/gm),this._changed(265)},isEmpty:function(){return!this._content},getCharacterStyle:"#getStyle",setCharacterStyle:"#setStyle",getParagraphStyle:"#getStyle",setParagraphStyle:"#setStyle"}),F=j.extend({_class:"PointText",initialize:function(){j.apply(this,arguments)},clone:function(e){return this._clone(new F(C.NO_INSERT),e)},getPoint:function(){var e=this._matrix.getTranslation();return new m(e.x,e.y,this,"setPoint")},setPoint:function(){var e=f.read(arguments);this.translate(e.subtract(this._matrix.getTranslation()))},_draw:function(e){if(this._content){this._setStyles(e);var t=this._style,n=this._lines,r=t.getLeading(),i=e.shadowColor;e.font=t.getFontStyle(),e.textAlign=t.getJustification();for(var a=0,o=n.length;a<o;a++){e.shadowColor=i;var s=n[a];t.hasFill()&&(e.fillText(s,0,0),e.shadowColor="rgba(0,0,0,0)"),t.hasStroke()&&e.strokeText(s,0,0),e.translate(0,r)}}},_getBounds:function(e,t){var n=this._style,r=this._lines,i=r.length,a=n.getJustification(),o=n.getLeading(),s=this.getView().getTextWidth(n.getFontStyle(),r),l=0;"left"!==a&&(l-=s/("center"===a?2:1));var u=new y(l,i?-.75*o:0,s,i*o);return t?t._transformBounds(u,u):u}}),q=s.extend(new function(){function e(e){var n,r=e.match(/^#(\w{1,2})(\w{1,2})(\w{1,2})$/);if(r){n=[0,0,0];for(var a=0;a<3;a++){var o=r[a+1];n[a]=parseInt(1==o.length?o+o:o,16)/255}}else if(r=e.match(/^rgba?\((.*)\)$/)){n=r[1].split(",");for(var a=0,s=n.length;a<s;a++){var o=+n[a];n[a]=a<3?o/255:o}}else{var l=i[e];if(!l){t||(t=ne.getContext(1,1),t.globalCompositeOperation="copy"),t.fillStyle="rgba(0,0,0,0)",t.fillStyle=e,t.fillRect(0,0,1,1);var u=t.getImageData(0,0,1,1).data;l=i[e]=[u[0]/255,u[1]/255,u[2]/255]}n=l.slice()}return n}var t,n={gray:["gray"],rgb:["red","green","blue"],hsb:["hue","saturation","brightness"],hsl:["hue","saturation","lightness"],gradient:["gradient","origin","destination","highlight"]},r={},i={},a=[[0,3,1],[2,0,1],[1,0,3],[1,2,0],[3,1,0],[0,1,2]],o={"rgb-hsb":function(e,t,n){var r=Math.max(e,t,n),i=Math.min(e,t,n),a=r-i,o=0===a?0:60*(r==e?(t-n)/a+(t<n?6:0):r==t?(n-e)/a+2:(e-t)/a+4);
 return[o,0===r?0:a/r,r]},"hsb-rgb":function(e,t,n){e=(e/60%6+6)%6;var r=Math.floor(e),i=e-r,r=a[r],o=[n,n*(1-t),n*(1-t*i),n*(1-t*(1-i))];return[o[r[0]],o[r[1]],o[r[2]]]},"rgb-hsl":function(e,t,n){var r=Math.max(e,t,n),i=Math.min(e,t,n),a=r-i,o=0===a,s=o?0:60*(r==e?(t-n)/a+(t<n?6:0):r==t?(n-e)/a+2:(e-t)/a+4),l=(r+i)/2,u=o?0:l<.5?a/(r+i):a/(2-r-i);return[s,u,l]},"hsl-rgb":function(e,t,n){if(e=(e/360%1+1)%1,0===t)return[n,n,n];for(var r=[e+1/3,e,e-1/3],i=n<.5?n*(1+t):n+t-n*t,a=2*n-i,o=[],s=0;s<3;s++){var l=r[s];l<0&&(l+=1),l>1&&(l-=1),o[s]=6*l<1?a+6*(i-a)*l:2*l<1?i:3*l<2?a+(i-a)*(2/3-l)*6:a}return o},"rgb-gray":function(e,t,n){return[.2989*e+.587*t+.114*n]},"gray-rgb":function(e){return[e,e,e]},"gray-hsb":function(e){return[0,0,e]},"gray-hsl":function(e){return[0,0,e]},"gradient-rgb":function(){return[]},"rgb-gradient":function(){return[]}};return s.each(n,function(e,t){r[t]=[],s.each(e,function(e,i){var a=s.capitalize(e),o=/^(hue|saturation)$/.test(e),l=r[t][i]="gradient"===e?function(e){var t=this._components[0];return e=U.read(Array.isArray(e)?e:arguments,0,{readNull:!0}),t!==e&&(t&&t._removeOwner(this),e&&e._addOwner(this)),e}:"gradient"===t?function(){return f.read(arguments,0,{readNull:"highlight"===e,clone:!0})}:function(e){return null==e||isNaN(e)?0:e};this["get"+a]=function(){return this._type===t||o&&/^hs[bl]$/.test(this._type)?this._components[i]:this._convert(t)[i]},this["set"+a]=function(e){this._type===t||o&&/^hs[bl]$/.test(this._type)||(this._components=this._convert(t),this._properties=n[t],this._type=t),this._components[i]=l.call(this,e),this._changed()}},this)},{_class:"Color",_readIndex:!0,initialize:function l(t){var i,a,o,s,u=Array.prototype.slice,c=arguments,h=0;Array.isArray(t)&&(c=t,t=c[0]);var d=null!=t&&typeof t;if("string"===d&&t in n&&(i=t,t=c[1],Array.isArray(t)?(a=t,o=c[2]):(this.__read&&(h=1),c=u.call(c,1),d=typeof t)),!a){if(s="number"===d?c:"object"===d&&null!=t.length?t:null){i||(i=s.length>=3?"rgb":"gray");var f=n[i].length;o=s[f],this.__read&&(h+=s===arguments?f+(null!=o?1:0):1),s.length>f&&(s=u.call(s,0,f))}else if("string"===d)i="rgb",a=e(t),4===a.length&&(o=a[3],a.length--);else if("object"===d)if(t.constructor===l){if(i=t._type,a=t._components.slice(),o=t._alpha,"gradient"===i)for(var m=1,g=a.length;m<g;m++){var v=a[m];v&&(a[m]=v.clone())}}else if(t.constructor===U)i="gradient",s=c;else{i="hue"in t?"lightness"in t?"hsl":"hsb":"gradient"in t||"stops"in t||"radial"in t?"gradient":"gray"in t?"gray":"rgb";var y=n[i],w=r[i];this._components=a=[];for(var m=0,g=y.length;m<g;m++){var b=t[y[m]];null==b&&0===m&&"gradient"===i&&"stops"in t&&(b={stops:t.stops,radial:t.radial}),b=w[m].call(this,b),null!=b&&(a[m]=b)}o=t.alpha}this.__read&&i&&(h=1)}if(this._type=i||"rgb",this._id=p.get(l),!a){this._components=a=[];for(var w=r[this._type],m=0,g=w.length;m<g;m++){var b=w[m].call(this,s&&s[m]);null!=b&&(a[m]=b)}}this._components=a,this._properties=n[this._type],this._alpha=o,this.__read&&(this.__read=h)},_serialize:function(e,t){var n=this.getComponents();return s.serialize(/^(gray|rgb)$/.test(this._type)?n:[this._type].concat(n),e,!0,t)},_changed:function(){this._canvasStyle=null,this._owner&&this._owner._changed(65)},_convert:function(e){var t;return this._type===e?this._components.slice():(t=o[this._type+"-"+e])?t.apply(this,this._components):o["rgb-"+e].apply(this,o[this._type+"-rgb"].apply(this,this._components))},convert:function(e){return new q(e,this._convert(e),this._alpha)},getType:function(){return this._type},setType:function(e){this._components=this._convert(e),this._properties=n[e],this._type=e},getComponents:function(){var e=this._components.slice();return null!=this._alpha&&e.push(this._alpha),e},getAlpha:function(){return null!=this._alpha?this._alpha:1},setAlpha:function(e){this._alpha=null==e?null:Math.min(Math.max(e,0),1),this._changed()},hasAlpha:function(){return null!=this._alpha},equals:function(e){var t=s.isPlainValue(e,!0)?q.read(arguments):e;return t===this||t&&this._class===t._class&&this._type===t._type&&this._alpha===t._alpha&&s.equals(this._components,t._components)||!1},toString:function(){for(var e=this._properties,t=[],n="gradient"===this._type,r=h.instance,i=0,a=e.length;i<a;i++){var o=this._components[i];null!=o&&t.push(e[i]+": "+(n?o:r.number(o)))}return null!=this._alpha&&t.push("alpha: "+r.number(this._alpha)),"{ "+t.join(", ")+" }"},toCSS:function(e){function t(e){return Math.round(255*(e<0?0:e>1?1:e))}var n=this._convert("rgb"),r=e||null==this._alpha?1:this._alpha;return n=[t(n[0]),t(n[1]),t(n[2])],r<1&&n.push(r<0?0:r),e?"#"+((1<<24)+(n[0]<<16)+(n[1]<<8)+n[2]).toString(16).slice(1):(4==n.length?"rgba(":"rgb(")+n.join(",")+")"},toCanvasStyle:function(e){if(this._canvasStyle)return this._canvasStyle;if("gradient"!==this._type)return this._canvasStyle=this.toCSS();var t,n=this._components,r=n[0],i=r._stops,a=n[1],o=n[2];if(r._radial){var s=o.getDistance(a),l=n[3];if(l){var u=l.subtract(a);u.getLength()>s&&(l=a.add(u.normalize(s-.1)))}var c=l||a;t=e.createRadialGradient(c.x,c.y,0,a.x,a.y,s)}else t=e.createLinearGradient(a.x,a.y,o.x,o.y);for(var h=0,d=i.length;h<d;h++){var p=i[h];t.addColorStop(p._rampPoint,p._color.toCanvasStyle())}return this._canvasStyle=t},transform:function(e){if("gradient"===this._type){for(var t=this._components,n=1,r=t.length;n<r;n++){var i=t[n];e._transformPoint(i,i,!0)}this._changed()}},statics:{_types:n,random:function(){var e=Math.random;return new q(e(),e(),e())}}})},new function(){var e={add:function(e,t){return e+t},subtract:function(e,t){return e-t},multiply:function(e,t){return e*t},divide:function(e,t){return e/t}};return s.each(e,function(e,t){this[t]=function(t){t=q.read(arguments);for(var n=this._type,r=this._components,i=t._convert(n),a=0,o=r.length;a<o;a++)i[a]=e(r[a],i[a]);return new q(n,i,null!=this._alpha?e(this._alpha,t.getAlpha()):null)}},{})}),U=s.extend({_class:"Gradient",initialize:function(e,t){this._id=p.get(),e&&this._set(e)&&(e=t=null),this._stops||this.setStops(e||["white","black"]),null==this._radial&&this.setRadial("string"==typeof t&&"radial"===t||t||!1)},_serialize:function(e,t){return t.add(this,function(){return s.serialize([this._stops,this._radial],e,!0,t)})},_changed:function(){for(var e=0,t=this._owners&&this._owners.length;e<t;e++)this._owners[e]._changed()},_addOwner:function(e){this._owners||(this._owners=[]),this._owners.push(e)},_removeOwner:function(e){var t=this._owners?this._owners.indexOf(e):-1;t!=-1&&(this._owners.splice(t,1),0===this._owners.length&&(this._owners=o))},clone:function(){for(var e=[],t=0,n=this._stops.length;t<n;t++)e[t]=this._stops[t].clone();return new U(e,this._radial)},getStops:function(){return this._stops},setStops:function(e){if(this.stops)for(var t=0,n=this._stops.length;t<n;t++)this._stops[t]._owner=o;if(e.length<2)throw new Error("Gradient stop list needs to contain at least two stops.");this._stops=W.readAll(e,0,{clone:!0});for(var t=0,n=this._stops.length;t<n;t++){var r=this._stops[t];r._owner=this,r._defaultRamp&&r.setRampPoint(t/(n-1))}this._changed()},getRadial:function(){return this._radial},setRadial:function(e){this._radial=e,this._changed()},equals:function(e){if(e===this)return!0;if(e&&this._class===e._class&&this._stops.length===e._stops.length){for(var t=0,n=this._stops.length;t<n;t++)if(!this._stops[t].equals(e._stops[t]))return!1;return!0}return!1}}),W=s.extend({_class:"GradientStop",initialize:function(e,t){if(e){var n,r;t===o&&Array.isArray(e)?(n=e[0],r=e[1]):e.color?(n=e.color,r=e.rampPoint):(n=e,r=t),this.setColor(n),this.setRampPoint(r)}},clone:function(){return new W(this._color.clone(),this._rampPoint)},_serialize:function(e,t){return s.serialize([this._color,this._rampPoint],e,!0,t)},_changed:function(){this._owner&&this._owner._changed(65)},getRampPoint:function(){return this._rampPoint},setRampPoint:function(e){this._defaultRamp=null==e,this._rampPoint=e||0,this._changed()},getColor:function(){return this._color},setColor:function(e){this._color=q.read(arguments),this._color===e&&(this._color=e.clone()),this._color._owner=this,this._changed()},equals:function(e){return e===this||e&&this._class===e._class&&this._color.equals(e._color)&&this._rampPoint==e._rampPoint||!1}}),G=s.extend(new function(){var e={fillColor:o,strokeColor:o,strokeWidth:1,strokeCap:"butt",strokeJoin:"miter",strokeScaling:!0,miterLimit:10,dashOffset:0,dashArray:[],windingRule:"nonzero",shadowColor:o,shadowBlur:0,shadowOffset:new f,selectedColor:o,fontFamily:"sans-serif",fontWeight:"normal",fontSize:12,font:"sans-serif",leading:null,justification:"left"},t={strokeWidth:97,strokeCap:97,strokeJoin:97,strokeScaling:105,miterLimit:97,fontFamily:9,fontWeight:9,fontSize:9,font:9,leading:9,justification:9},n={beans:!0},r={_defaults:e,_textDefaults:new s(e,{fillColor:new q}),beans:!0};return s.each(e,function(e,i){var a=/Color$/.test(i),l="shadowOffset"===i,u=s.capitalize(i),c=t[i],h="set"+u,d="get"+u;r[h]=function(e){var t=this._owner,n=t&&t._children;if(n&&n.length>0&&!(t instanceof B))for(var r=0,s=n.length;r<s;r++)n[r]._style[h](e);else{var l=this._values[i];l!==e&&(a&&(l&&(l._owner=o),e&&e.constructor===q&&(e._owner&&(e=e.clone()),e._owner=t)),this._values[i]=e,t&&t._changed(c||65))}},r[d]=function(e){var t,n=this._owner,r=n&&n._children;if(!r||0===r.length||e||n instanceof B){var t=this._values[i];if(t===o)t=this._defaults[i],t&&t.clone&&(t=t.clone());else{var u=a?q:l?f:null;!u||t&&t.constructor===u||(this._values[i]=t=u.read([t],0,{readNull:!0,clone:!0}),t&&a&&(t._owner=n))}return t}for(var c=0,h=r.length;c<h;c++){var p=r[c]._style[d]();if(0===c)t=p;else if(!s.equals(t,p))return o}return t},n[d]=function(e){return this._style[d](e)},n[h]=function(e){this._style[h](e)}}),C.inject(n),r},{_class:"Style",initialize:function(e,t,n){this._values={},this._owner=t,this._project=t&&t._project||n||a.project,t instanceof j&&(this._defaults=this._textDefaults),e&&this.set(e)},set:function(e){var t=e instanceof G,n=t?e._values:e;if(n)for(var r in n)if(r in this._defaults){var i=n[r];this[r]=i&&t&&i.clone?i.clone():i}},equals:function(e){return e===this||e&&this._class===e._class&&s.equals(this._values,e._values)||!1},hasFill:function(){return!!this.getFillColor()},hasStroke:function(){return!!this.getStrokeColor()&&this.getStrokeWidth()>0},hasShadow:function(){return!!this.getShadowColor()&&this.getShadowBlur()>0},getView:function(){return this._project.getView()},getFontStyle:function(){var e=this.getFontSize();return this.getFontWeight()+" "+e+(/[a-z]/i.test(e+"")?" ":"px ")+this.getFontFamily()},getFont:"#getFontFamily",setFont:"#setFontFamily",getLeading:function Ne(){var e=Ne.base.call(this),t=this.getFontSize();return/pt|em|%|px/.test(t)&&(t=this.getView().getPixelSize(t)),null!=e?e:1.2*t}}),H=new function(){function e(e,t,n,r){for(var i=["","webkit","moz","Moz","ms","o"],a=t[0].toUpperCase()+t.substring(1),o=0;o<6;o++){var s=i[o],l=s?s+a:t;if(l in e){if(!n)return e[l];e[l]=r;break}}}return{getStyles:function(e){var t=e&&9!==e.nodeType?e.ownerDocument:e,n=t&&t.defaultView;return n&&n.getComputedStyle(e,"")},getBounds:function(e,t){var n,r=e.ownerDocument,i=r.body,a=r.documentElement;try{n=e.getBoundingClientRect()}catch(o){n={left:0,top:0,width:0,height:0}}var s=n.left-(a.clientLeft||i.clientLeft||0),l=n.top-(a.clientTop||i.clientTop||0);if(!t){var u=r.defaultView;s+=u.pageXOffset||a.scrollLeft||i.scrollLeft,l+=u.pageYOffset||a.scrollTop||i.scrollTop}return new y(s,l,n.width,n.height)},getViewportBounds:function(e){var t=e.ownerDocument,n=t.defaultView,r=t.documentElement;return new y(0,0,n.innerWidth||r.clientWidth,n.innerHeight||r.clientHeight)},getOffset:function(e,t){return H.getBounds(e,t).getPoint()},getSize:function(e){return H.getBounds(e,!0).getSize()},isInvisible:function(e){return H.getSize(e).equals(new g(0,0))},isInView:function(e){return!H.isInvisible(e)&&H.getViewportBounds(e).intersects(H.getBounds(e,!0))},getPrefixed:function(t,n){return e(t,n)},setPrefixed:function(t,n,r){if("object"==typeof n)for(var i in n)e(t,i,!0,n[i]);else e(t,n,!0,r)}}},X={add:function(e,t){for(var n in t)for(var r=t[n],i=n.split(/[\s,]+/g),a=0,o=i.length;a<o;a++)e.addEventListener(i[a],r,!1)},remove:function(e,t){for(var n in t)for(var r=t[n],i=n.split(/[\s,]+/g),a=0,o=i.length;a<o;a++)e.removeEventListener(i[a],r,!1)},getPoint:function(e){var t=e.targetTouches?e.targetTouches.length?e.targetTouches[0]:e.changedTouches[0]:e;return new f(t.pageX||t.clientX+document.documentElement.scrollLeft,t.pageY||t.clientY+document.documentElement.scrollTop)},getTarget:function(e){return e.target||e.srcElement},getRelatedTarget:function(e){return e.relatedTarget||e.toElement},getOffset:function(e,t){return X.getPoint(e).subtract(H.getOffset(t||X.getTarget(e)))},stop:function(e){e.stopPropagation(),e.preventDefault()}};X.requestAnimationFrame=new function(){function e(){for(var t=i.length-1;t>=0;t--){var o=i[t],s=o[0],l=o[1];(!l||("true"==u.getAttribute(l,"keepalive")||a)&&H.isInView(l))&&(i.splice(t,1),s())}n&&(i.length?n(e):r=!1)}var t,n=H.getPrefixed(window,"requestAnimationFrame"),r=!1,i=[],a=!0;return X.add(window,{focus:function(){a=!0},blur:function(){a=!1}}),function(a,o){i.push([a,o]),n?r||(n(e),r=!0):t||(t=setInterval(e,1e3/60))}};var K=s.extend(l,{_class:"View",initialize:function Se(e,t){function n(e){return t[e]||parseInt(t.getAttribute(e),10)}function r(){var e=H.getSize(t);return e.isNaN()||e.isZero()?new g(n("width"),n("height")):e}this._project=e,this._scope=e._scope,this._element=t;var i;this._pixelRatio||(this._pixelRatio=window.devicePixelRatio||1),this._id=t.getAttribute("id"),null==this._id&&t.setAttribute("id",this._id="view-"+Se._id++),X.add(t,this._viewEvents);var a="none";if(H.setPrefixed(t.style,{userSelect:a,touchAction:a,touchCallout:a,contentZooming:a,userDrag:a,tapHighlightColor:"rgba(0,0,0,0)"}),u.hasAttribute(t,"resize")){var o=this;X.add(window,this._windowEvents={resize:function(){o.setViewSize(r())}})}if(this._setViewSize(i=r()),u.hasAttribute(t,"stats")&&"undefined"!=typeof Stats){this._stats=new Stats;var s=this._stats.domElement,l=s.style,c=H.getOffset(t);l.position="absolute",l.left=c.x+"px",l.top=c.y+"px",document.body.appendChild(s)}Se._views.push(this),Se._viewsById[this._id]=this,this._viewSize=i,(this._matrix=new b)._owner=this,this._zoom=1,Se._focused||(Se._focused=this),this._frameItems={},this._frameItemCount=0},remove:function(){return!!this._project&&(K._focused===this&&(K._focused=null),K._views.splice(K._views.indexOf(this),1),delete K._viewsById[this._id],this._project._view===this&&(this._project._view=null),X.remove(this._element,this._viewEvents),X.remove(window,this._windowEvents),this._element=this._project=null,this.off("frame"),this._animate=!1,this._frameItems={},!0)},_events:s.each(["onResize","onMouseDown","onMouseUp","onMouseMove"],function(e){this[e]={install:function(e){this._installEvent(e)},uninstall:function(e){this._uninstallEvent(e)}}},{onFrame:{install:function(){this.play()},uninstall:function(){this.pause()}}}),_animate:!1,_time:0,_count:0,_requestFrame:function(){var e=this;X.requestAnimationFrame(function(){e._requested=!1,e._animate&&(e._requestFrame(),e._handleFrame())},this._element),this._requested=!0},_handleFrame:function(){a=this._scope;var e=Date.now()/1e3,t=this._before?e-this._before:0;this._before=e,this._handlingFrame=!0,this.emit("frame",new s({delta:t,time:this._time+=t,count:this._count++})),this._stats&&this._stats.update(),this._handlingFrame=!1,this.update()},_animateItem:function(e,t){var n=this._frameItems;t?(n[e._id]={item:e,time:0,count:0},1===++this._frameItemCount&&this.on("frame",this._handleFrameItems)):(delete n[e._id],0===--this._frameItemCount&&this.off("frame",this._handleFrameItems))},_handleFrameItems:function(e){for(var t in this._frameItems){var n=this._frameItems[t];n.item.emit("frame",new s(e,{time:n.time+=e.delta,count:n.count++}))}},_update:function(){this._project._needsUpdate=!0,this._handlingFrame||(this._animate?this._handleFrame():this.update())},_changed:function(e){1&e&&(this._project._needsUpdate=!0)},_transform:function(e){this._matrix.concatenate(e),this._bounds=null,this._update()},getElement:function(){return this._element},getPixelRatio:function(){return this._pixelRatio},getResolution:function(){return 72*this._pixelRatio},getViewSize:function(){var e=this._viewSize;return new v(e.width,e.height,this,"setViewSize")},setViewSize:function(){var e=g.read(arguments),t=e.subtract(this._viewSize);t.isZero()||(this._viewSize.set(e.width,e.height),this._setViewSize(e),this._bounds=null,this.emit("resize",{size:e,delta:t}),this._update())},_setViewSize:function(e){var t=this._element;t.width=e.width,t.height=e.height},getBounds:function(){return this._bounds||(this._bounds=this._matrix.inverted()._transformBounds(new y(new f,this._viewSize))),this._bounds},getSize:function(){return this.getBounds().getSize()},getCenter:function(){return this.getBounds().getCenter()},setCenter:function(){var e=f.read(arguments);this.scrollBy(e.subtract(this.getCenter()))},getZoom:function(){return this._zoom},setZoom:function(e){this._transform((new b).scale(e/this._zoom,this.getCenter())),this._zoom=e},isVisible:function(){return H.isInView(this._element)},scrollBy:function(){this._transform((new b).translate(f.read(arguments).negate()))},play:function(){this._animate=!0,this._requested||this._requestFrame()},pause:function(){this._animate=!1},draw:function(){this.update()},projectToView:function(){return this._matrix._transformPoint(f.read(arguments))},viewToProject:function(){return this._matrix._inverseTransform(f.read(arguments))}},{statics:{_views:[],_viewsById:{},_id:0,create:function(e,t){return"string"==typeof t&&(t=document.getElementById(t)),new Y(e,t)}}},new function(){function e(e){var t=X.getTarget(e);return t.getAttribute&&K._viewsById[t.getAttribute("id")]}function t(e,t){return e.viewToProject(X.getOffset(t,e._element))}function n(){if(!K._focused||!K._focused.isVisible())for(var e=0,t=K._views.length;e<t;e++){var n=K._views[e];if(n&&n.isVisible()){K._focused=o=n;break}}}function r(e,t,n){e._handleEvent("mousemove",t,n);var r=e._scope.tool;return r&&r._handleEvent(c&&r.responds("mousedrag")?"mousedrag":"mousemove",t,n),e.update(),r}var i,a,o,s,l,u,c=!1,h=window.navigator;h.pointerEnabled||h.msPointerEnabled?(s="pointerdown MSPointerDown",l="pointermove MSPointerMove",u="pointerup pointercancel MSPointerUp MSPointerCancel"):(s="touchstart",l="touchmove",u="touchend touchcancel","ontouchstart"in window&&h.userAgent.match(/mobile|tablet|ip(ad|hone|od)|android|silk/i)||(s+=" mousedown",l+=" mousemove",u+=" mouseup"));var d={"selectstart dragstart":function(e){c&&e.preventDefault()}},p={mouseout:function(e){var n=K._focused,i=X.getRelatedTarget(e);!n||i&&"HTML"!==i.nodeName||r(n,t(n,e),e)},scroll:n};d[s]=function(n){var r=K._focused=e(n),a=t(r,n);c=!0,r._handleEvent("mousedown",a,n),(i=r._scope.tool)&&i._handleEvent("mousedown",a,n),r.update()},p[l]=function(s){var l=K._focused;if(!c){var u=e(s);u?(l!==u&&r(l,t(l,s),s),a=l,l=K._focused=o=u):o&&o===l&&(l=K._focused=a,n())}if(l){var h=t(l,s);(c||l.getBounds().contains(h))&&(i=r(l,h,s))}},p[u]=function(e){var n=K._focused;if(n&&c){var r=t(n,e);c=!1,n._handleEvent("mouseup",r,e),i&&i._handleEvent("mouseup",r,e),n.update()}},X.add(document,p),X.add(window,{load:n});var f={mousedown:{mousedown:1,mousedrag:1,click:1,doubleclick:1},mouseup:{mouseup:1,mousedrag:1,click:1,doubleclick:1},mousemove:{mousedrag:1,mousemove:1,mouseenter:1,mouseleave:1}};return{_viewEvents:d,_handleEvent:function(){},_installEvent:function(e){var t=this._eventCounters;if(t)for(var n in f)t[n]=(t[n]||0)+(f[n][e]||0)},_uninstallEvent:function(e){var t=this._eventCounters;if(t)for(var n in f)t[n]-=f[n][e]||0},statics:{updateFocus:n}}}),Y=K.extend({_class:"CanvasView",initialize:function(e,t){if(!(t instanceof HTMLCanvasElement)){var n=g.read(arguments,1);if(n.isZero())throw new Error("Cannot create CanvasView with the provided argument: "+[].slice.call(arguments,1));t=ne.getCanvas(n)}if(this._context=t.getContext("2d"),this._eventCounters={},this._pixelRatio=1,!/^off|false$/.test(u.getAttribute(t,"hidpi"))){var r=window.devicePixelRatio||1,i=H.getPrefixed(this._context,"backingStorePixelRatio")||1;this._pixelRatio=r/i}K.call(this,e,t)},_setViewSize:function(e){var t=this._element,n=this._pixelRatio,r=e.width,i=e.height;if(t.width=r*n,t.height=i*n,1!==n){if(!u.hasAttribute(t,"resize")){var a=t.style;a.width=r+"px",a.height=i+"px"}this._context.scale(n,n)}},getPixelSize:function(e){var t,n=a.browser;if(n&&n.firefox){var r=this._element.parentNode,i=document.createElement("div");i.style.fontSize=e,r.appendChild(i),t=parseFloat(H.getStyles(i).fontSize),r.removeChild(i)}else{var o=this._context,s=o.font;o.font=e+" serif",t=parseFloat(o.font),o.font=s}return t},getTextWidth:function(e,t){var n=this._context,r=n.font,i=0;n.font=e;for(var a=0,o=t.length;a<o;a++)i=Math.max(i,n.measureText(t[a]).width);return n.font=r,i},update:function(e){var t=this._project;if(!t||!e&&!t._needsUpdate)return!1;var n=this._context,r=this._viewSize;return n.clearRect(0,0,r.width+1,r.height+1),t.draw(n,this._matrix,this._pixelRatio),t._needsUpdate=!1,!0}},new function(){function e(e,t,n,r,i,a){function o(e){if(e.responds(t)&&(s||(s=new $(t,n,r,i,a?r.subtract(a):null)),e.emit(t,s)&&s.isStopped))return n.preventDefault(),!0}for(var s,l=i;l;){if(o(l))return!0;l=l.getParent()}return!!o(e)}var t,n,r,i,a,o,s,l,u;return{_handleEvent:function(c,h,d){if(this._eventCounters[c]){var p=this._project,f=p.hitTest(h,{tolerance:0,fill:!0,stroke:!0}),m=f&&f.item,g=!1;switch(c){case"mousedown":for(g=e(this,c,d,h,m),l=a==m&&Date.now()-u<300,i=a=m,t=n=r=h,s=!g&&m;s&&!s.responds("mousedrag");)s=s._parent;break;case"mouseup":g=e(this,c,d,h,m,t),s&&(n&&!n.equals(h)&&e(this,"mousedrag",d,h,s,n),m!==s&&(r=h,e(this,"mousemove",d,h,m,r))),!g&&m&&m===i&&(u=Date.now(),e(this,l&&i.responds("doubleclick")?"doubleclick":"click",d,t,m),l=!1),i=s=null;break;case"mousemove":s&&(g=e(this,"mousedrag",d,h,s,n)),g||(m!==o&&(r=h),g=e(this,c,d,h,m,r)),n=r=h,m!==o&&(e(this,"mouseleave",d,h,o),o=m,e(this,"mouseenter",d,h,m))}return g}}}}),Q=s.extend({_class:"Event",initialize:function(e){this.event=e},isPrevented:!1,isStopped:!1,preventDefault:function(){this.isPrevented=!0,this.event.preventDefault()},stopPropagation:function(){this.isStopped=!0,this.event.stopPropagation()},stop:function(){this.stopPropagation(),this.preventDefault()},getModifiers:function(){return J.modifiers}}),Z=Q.extend({_class:"KeyEvent",initialize:function(e,t,n,r){Q.call(this,r),this.type=e?"keydown":"keyup",this.key=t,this.character=n},toString:function(){return"{ type: '"+this.type+"', key: '"+this.key+"', character: '"+this.character+"', modifiers: "+this.getModifiers()+" }"}}),J=new function(){function e(n,i,c,h){var d,p=c?String.fromCharCode(c):"",f=r[i],m=f||p.toLowerCase(),g=n?"keydown":"keyup",v=K._focused,y=v&&v.isVisible()&&v._scope,w=y&&y.tool;if(u[m]=n,n?l[i]=c:delete l[i],f&&(d=s.camelize(f))in o){o[d]=n;var b=a.browser;if("command"===d&&b&&b.mac)if(n)t={};else{for(var _ in t)_ in l&&e(!1,_,t[_],h);t=null}}else n&&t&&(t[i]=c);w&&w.responds(g)&&(a=y,w.emit(g,new Z(n,m,p,h)),v&&v.update())}var t,n,r={8:"backspace",9:"tab",13:"enter",16:"shift",17:"control",18:"option",19:"pause",20:"caps-lock",27:"escape",32:"space",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",46:"delete",91:"command",93:"command",224:"command"},i={9:!0,13:!0,32:!0},o=new s({shift:!1,control:!1,option:!1,command:!1,capsLock:!1,space:!1}),l={},u={};return X.add(document,{keydown:function(t){var a=t.which||t.keyCode;a in r||o.command?e(!0,a,a in i||o.command?a:0,t):n=a},keypress:function(t){null!=n&&(e(!0,n,t.which||t.keyCode,t),n=null)},keyup:function(t){var n=t.which||t.keyCode;n in l&&e(!1,n,l[n],t)}}),X.add(window,{blur:function(t){for(var n in l)e(!1,n,l[n],t)}}),{modifiers:o,isDown:function(e){return!!u[e]}}},$=Q.extend({_class:"MouseEvent",initialize:function(e,t,n,r,i){Q.call(this,t),this.type=e,this.point=n,this.target=r,this.delta=i},toString:function(){return"{ type: '"+this.type+"', point: "+this.point+", target: "+this.target+(this.delta?", delta: "+this.delta:"")+", modifiers: "+this.getModifiers()+" }"}}),ee=Q.extend({_class:"ToolEvent",_item:null,initialize:function(e,t,n){this.tool=e,this.type=t,this.event=n},_choosePoint:function(e,t){return e?e:t?t.clone():null},getPoint:function(){return this._choosePoint(this._point,this.tool._point)},setPoint:function(e){this._point=e},getLastPoint:function(){return this._choosePoint(this._lastPoint,this.tool._lastPoint)},setLastPoint:function(e){this._lastPoint=e},getDownPoint:function(){return this._choosePoint(this._downPoint,this.tool._downPoint)},setDownPoint:function(e){this._downPoint=e},getMiddlePoint:function(){return!this._middlePoint&&this.tool._lastPoint?this.tool._point.add(this.tool._lastPoint).divide(2):this._middlePoint},setMiddlePoint:function(e){this._middlePoint=e},getDelta:function(){return!this._delta&&this.tool._lastPoint?this.tool._point.subtract(this.tool._lastPoint):this._delta},setDelta:function(e){this._delta=e},getCount:function(){return/^mouse(down|up)$/.test(this.type)?this.tool._downCount:this.tool._count},setCount:function(e){this.tool[/^mouse(down|up)$/.test(this.type)?"downCount":"count"]=e},getItem:function(){if(!this._item){var e=this.tool._scope.project.hitTest(this.getPoint());if(e){for(var t=e.item,n=t._parent;/^(Group|CompoundPath)$/.test(n._class);)t=n,n=n._parent;this._item=t}}return this._item},setItem:function(e){this._item=e},toString:function(){return"{ type: "+this.type+", point: "+this.getPoint()+", count: "+this.getCount()+", modifiers: "+this.getModifiers()+" }"}}),te=(c.extend({_class:"Tool",_list:"tools",_reference:"tool",_events:["onActivate","onDeactivate","onEditOptions","onMouseDown","onMouseUp","onMouseDrag","onMouseMove","onKeyDown","onKeyUp"],initialize:function(e){c.call(this),this._firstMove=!0,this._count=0,this._downCount=0,this._set(e)},getMinDistance:function(){return this._minDistance},setMinDistance:function(e){this._minDistance=e,null!=e&&null!=this._maxDistance&&e>this._maxDistance&&(this._maxDistance=e)},getMaxDistance:function(){return this._maxDistance},setMaxDistance:function(e){this._maxDistance=e,null!=this._minDistance&&null!=e&&e<this._minDistance&&(this._minDistance=e)},getFixedDistance:function(){return this._minDistance==this._maxDistance?this._minDistance:null},setFixedDistance:function(e){this._minDistance=this._maxDistance=e},_updateEvent:function(e,t,n,r,i,a,o){if(!i){if(null!=n||null!=r){var s=null!=n?n:0,l=t.subtract(this._point),u=l.getLength();if(u<s)return!1;if(null!=r&&0!=r)if(u>r)t=this._point.add(l.normalize(r));else if(o)return!1}if(a&&t.equals(this._point))return!1}switch(this._lastPoint=i&&"mousemove"==e?t:this._point,this._point=t,e){case"mousedown":this._lastPoint=this._downPoint,this._downPoint=this._point,this._downCount++;break;case"mouseup":this._lastPoint=this._downPoint}return this._count=i?0:this._count+1,!0},_fireEvent:function(e,t){var n=a.project._removeSets;if(n){"mouseup"===e&&(n.mousedrag=null);var r=n[e];if(r){for(var i in r){var o=r[i];for(var s in n){var l=n[s];l&&l!=r&&delete l[o._id]}o.remove()}n[e]=null}}return this.responds(e)&&this.emit(e,new ee(this,e,t))},_handleEvent:function(e,t,n){a=this._scope;var r=!1;switch(e){case"mousedown":this._updateEvent(e,t,null,null,!0,!1,!1),r=this._fireEvent(e,n);break;case"mousedrag":for(var i=!1,o=!1;this._updateEvent(e,t,this.minDistance,this.maxDistance,!1,i,o);)r=this._fireEvent(e,n)||r,i=!0,o=!0;break;case"mouseup":!t.equals(this._point)&&this._updateEvent("mousedrag",t,this.minDistance,this.maxDistance,!1,!1,!1)&&(r=this._fireEvent("mousedrag",n)),this._updateEvent(e,t,null,this.maxDistance,!1,!1,!1),r=this._fireEvent(e,n)||r,this._updateEvent(e,t,null,null,!0,!1,!1),this._firstMove=!0;break;case"mousemove":for(;this._updateEvent(e,t,this.minDistance,this.maxDistance,this._firstMove,!0,!1);)r=this._fireEvent(e,n)||r,this._firstMove=!1}return r&&n.preventDefault(),r}}),{request:function(e,t,n,r){r=r===o||r;var i=new(window.ActiveXObject||XMLHttpRequest)("Microsoft.XMLHTTP");return i.open(e.toUpperCase(),t,r),"overrideMimeType"in i&&i.overrideMimeType("text/plain"),i.onreadystatechange=function(){if(4===i.readyState){var e=i.status;if(0!==e&&200!==e)throw new Error("Could not load "+t+" (Error "+e+")");n.call(i,i.responseText)}},i.send(null)}}),ne={canvases:[],getCanvas:function(e,t){var n,r=!0;"object"==typeof e&&(t=e.height,e=e.width),n=this.canvases.length?this.canvases.pop():document.createElement("canvas");var i=n.getContext("2d");return n.width===e&&n.height===t?r&&i.clearRect(0,0,e+1,t+1):(n.width=e,n.height=t),i.save(),n},getContext:function(e,t){return this.getCanvas(e,t).getContext("2d")},release:function(e){var t=e.canvas?e.canvas:e;t.getContext("2d").restore(),this.canvases.push(t)}},re=new function(){function e(e,t,n){return.2989*e+.587*t+.114*n}function t(t,n,r,i){var a=i-e(t,n,r);p=t+a,f=n+a,m=r+a;var i=e(p,f,m),o=g(p,f,m),s=v(p,f,m);if(o<0){var l=i-o;p=i+(p-i)*i/l,f=i+(f-i)*i/l,m=i+(m-i)*i/l}if(s>255){var u=255-i,c=s-i;p=i+(p-i)*u/c,f=i+(f-i)*u/c,m=i+(m-i)*u/c}}function n(e,t,n){return v(e,t,n)-g(e,t,n)}function r(e,t,n,r){var i,a=[e,t,n],o=v(e,t,n),s=g(e,t,n);s=s===e?0:s===t?1:2,o=o===e?0:o===t?1:2,i=0===g(s,o)?1===v(s,o)?2:1:0,a[o]>a[s]?(a[i]=(a[i]-a[s])*r/(a[o]-a[s]),a[o]=r):a[i]=a[o]=0,a[s]=0,p=a[0],f=a[1],m=a[2]}var i,a,o,l,u,c,h,d,p,f,m,g=Math.min,v=Math.max,y=Math.abs,w={multiply:function(){p=u*i/255,f=c*a/255,m=h*o/255},screen:function(){p=u+i-u*i/255,f=c+a-c*a/255,m=h+o-h*o/255},overlay:function(){p=u<128?2*u*i/255:255-2*(255-u)*(255-i)/255,f=c<128?2*c*a/255:255-2*(255-c)*(255-a)/255,m=h<128?2*h*o/255:255-2*(255-h)*(255-o)/255},"soft-light":function(){var e=i*u/255;p=e+u*(255-(255-u)*(255-i)/255-e)/255,e=a*c/255,f=e+c*(255-(255-c)*(255-a)/255-e)/255,e=o*h/255,m=e+h*(255-(255-h)*(255-o)/255-e)/255},"hard-light":function(){p=i<128?2*i*u/255:255-2*(255-i)*(255-u)/255,f=a<128?2*a*c/255:255-2*(255-a)*(255-c)/255,m=o<128?2*o*h/255:255-2*(255-o)*(255-h)/255},"color-dodge":function(){p=0===u?0:255===i?255:g(255,255*u/(255-i)),f=0===c?0:255===a?255:g(255,255*c/(255-a)),m=0===h?0:255===o?255:g(255,255*h/(255-o))},"color-burn":function(){p=255===u?255:0===i?0:v(0,255-255*(255-u)/i),f=255===c?255:0===a?0:v(0,255-255*(255-c)/a),m=255===h?255:0===o?0:v(0,255-255*(255-h)/o)},darken:function(){p=u<i?u:i,f=c<a?c:a,m=h<o?h:o},lighten:function(){p=u>i?u:i,f=c>a?c:a,m=h>o?h:o},difference:function(){p=u-i,p<0&&(p=-p),f=c-a,f<0&&(f=-f),m=h-o,m<0&&(m=-m)},exclusion:function(){p=u+i*(255-u-u)/255,f=c+a*(255-c-c)/255,m=h+o*(255-h-h)/255},hue:function(){r(i,a,o,n(u,c,h)),t(p,f,m,e(u,c,h))},saturation:function(){r(u,c,h,n(i,a,o)),t(p,f,m,e(u,c,h))},luminosity:function(){t(u,c,h,e(i,a,o))},color:function(){t(i,a,o,e(u,c,h))},add:function(){p=g(u+i,255),f=g(c+a,255),m=g(h+o,255)},subtract:function(){p=v(u-i,0),f=v(c-a,0),m=v(h-o,0)},average:function(){p=(u+i)/2,f=(c+a)/2,m=(h+o)/2},negation:function(){p=255-y(255-i-u),f=255-y(255-a-c),m=255-y(255-o-h)}},b=this.nativeModes=s.each(["source-over","source-in","source-out","source-atop","destination-over","destination-in","destination-out","destination-atop","lighter","darker","copy","xor"],function(e){this[e]=!0},{}),_=ne.getContext(1,1);s.each(w,function(e,t){var n="darken"===t,r=!1;_.save();try{_.fillStyle=n?"#300":"#a00",_.fillRect(0,0,1,1),_.globalCompositeOperation=t,_.globalCompositeOperation===t&&(_.fillStyle=n?"#a00":"#300",_.fillRect(0,0,1,1),r=_.getImageData(0,0,1,1).data[0]!==n?170:51)}catch(i){}_.restore(),b[t]=r}),ne.release(_),this.process=function(e,t,n,r,s){var g=t.canvas,v="normal"===e;if(v||b[e])n.save(),n.setTransform(1,0,0,1,0,0),n.globalAlpha=r,v||(n.globalCompositeOperation=e),n.drawImage(g,s.x,s.y),n.restore();else{var y=w[e];if(!y)return;for(var _=n.getImageData(s.x,s.y,g.width,g.height),x=_.data,E=t.getImageData(0,0,g.width,g.height).data,C=0,k=x.length;C<k;C+=4){i=E[C],u=x[C],
-a=E[C+1],c=x[C+1],o=E[C+2],h=x[C+2],l=E[C+3],d=x[C+3],y();var N=l*r/255,S=1-N;x[C]=N*p+S*u,x[C+1]=N*f+S*c,x[C+2]=N*m+S*h,x[C+3]=l*r+S*d}n.putImageData(_,s.x,s.y)}}},ie=s.each({fillColor:["fill","color"],strokeColor:["stroke","color"],strokeWidth:["stroke-width","number"],strokeCap:["stroke-linecap","string"],strokeJoin:["stroke-linejoin","string"],strokeScaling:["vector-effect","lookup",{"true":"none","false":"non-scaling-stroke"},function(e,t){return!t&&(e instanceof L||e instanceof S||e instanceof j)}],miterLimit:["stroke-miterlimit","number"],dashArray:["stroke-dasharray","array"],dashOffset:["stroke-dashoffset","number"],fontFamily:["font-family","string"],fontWeight:["font-weight","string"],fontSize:["font-size","number"],justification:["text-anchor","lookup",{left:"start",center:"middle",right:"end"}],opacity:["opacity","number"],blendMode:["mix-blend-mode","string"]},function(e,t){var n=s.capitalize(t),r=e[2];this[t]={type:e[1],property:t,attribute:e[0],toSVG:r,fromSVG:r&&s.each(r,function(e,t){this[e]=t},{}),exportFilter:e[3],get:"get"+n,set:"set"+n}},{}),ae={href:"http://www.w3.org/1999/xlink",xlink:"http://www.w3.org/2000/xmlns"};return new function(){function e(e,t){for(var n in t){var r=t[n],i=ae[n];"number"==typeof r&&(r=b.number(r)),i?e.setAttributeNS(i,n,r):e.setAttribute(n,r)}return e}function t(t,n){return e(document.createElementNS("http://www.w3.org/2000/svg",t),n)}function n(e,t,n){var r=new s,i=e.getTranslation();if(t){e=e.shiftless();var a=e._inverseTransform(i);r[n?"cx":"x"]=a.x,r[n?"cy":"y"]=a.y,i=null}if(!e.isIdentity()){var o=e.decompose();if(o&&!o.shearing){var l=[],u=o.rotation,c=o.scaling;i&&!i.isZero()&&l.push("translate("+b.point(i)+")"),d.isZero(c.x-1)&&d.isZero(c.y-1)||l.push("scale("+b.point(c)+")"),u&&l.push("rotate("+b.number(u)+")"),r.transform=l.join(" ")}else r.transform="matrix("+e.getValues().join(",")+")"}return r}function r(r,i){for(var a=n(r._matrix),o=r._children,s=t("g",a),l=0,u=o.length;l<u;l++){var c=o[l],h=y(c,i);if(h)if(c.isClipMask()){var d=t("clipPath");d.appendChild(h),g(c,d,"clip"),e(s,{"clip-path":"url(#"+d.id+")"})}else s.appendChild(h)}return s}function i(e,r){var i=n(e._matrix,!0),a=e.getSize(),o=e.getImage();return i.x-=a.width/2,i.y-=a.height/2,i.width=a.width,i.height=a.height,i.href=r.embedImages===!1&&o&&o.src||e.toDataURL(),t("image",i)}function a(e,r){var i=r.matchShapes;if(i){var a=e.toShape(!1);if(a)return o(a,r)}var s,l=e._segments,u=n(e._matrix);if(0===l.length)return null;if(i&&!e.hasHandles())if(l.length>=3){s=e._closed?"polygon":"polyline";for(var c=[],h=0,d=l.length;h<d;h++)c.push(b.point(l[h]._point));u.points=c.join(" ")}else{s="line";var p=l[0]._point,f=l[l.length-1]._point;u.set({x1:p.x,y1:p.y,x2:f.x,y2:f.y})}else s="path",u.d=e.getPathData(null,r.precision);return t(s,u)}function o(e){var r=e._type,i=e._radius,a=n(e._matrix,!0,"rectangle"!==r);if("rectangle"===r){r="rect";var o=e._size,s=o.width,l=o.height;a.x-=s/2,a.y-=l/2,a.width=s,a.height=l,i.isZero()&&(i=null)}return i&&("circle"===r?a.r=i:(a.rx=i.width,a.ry=i.height)),t(r,a)}function l(e,r){var i=n(e._matrix),a=e.getPathData(null,r.precision);return a&&(i.d=a),t("path",i)}function u(e,r){var i=n(e._matrix,!0),a=e.getSymbol(),o=m(a,"symbol"),s=a.getDefinition(),l=s.getBounds();return o||(o=t("symbol",{viewBox:b.rectangle(l)}),o.appendChild(y(s,r)),g(a,o,"symbol")),i.href="#"+o.id,i.x+=l.x,i.y+=l.y,i.width=b.number(l.width),i.height=b.number(l.height),i.overflow="visible",t("use",i)}function c(e){var n=m(e,"color");if(!n){var r,i=e.getGradient(),a=i._radial,o=e.getOrigin().transform(),s=e.getDestination().transform();if(a){r={cx:o.x,cy:o.y,r:o.getDistance(s)};var l=e.getHighlight();l&&(l=l.transform(),r.fx=l.x,r.fy=l.y)}else r={x1:o.x,y1:o.y,x2:s.x,y2:s.y};r.gradientUnits="userSpaceOnUse",n=t((a?"radial":"linear")+"Gradient",r);for(var u=i._stops,c=0,h=u.length;c<h;c++){var d=u[c],p=d._color,f=p.getAlpha();r={offset:d._rampPoint,"stop-color":p.toCSS(!0)},f<1&&(r["stop-opacity"]=f),n.appendChild(t("stop",r))}g(e,n,"color")}return"url(#"+n.id+")"}function p(e){var r=t("text",n(e._matrix,!0));return r.textContent=e._content,r}function f(t,n,r){var i={},a=!r&&t.getParent();return null!=t._name&&(i.id=t._name),s.each(ie,function(e){var n=e.get,r=e.type,o=t[n]();if(e.exportFilter?e.exportFilter(t,o):!a||!s.equals(a[n](),o)){if("color"===r&&null!=o){var l=o.getAlpha();l<1&&(i[e.attribute+"-opacity"]=l)}i[e.attribute]=null==o?"none":"number"===r?b.number(o):"color"===r?o.gradient?c(o,t):o.toCSS(!0):"array"===r?o.join(","):"lookup"===r?e.toSVG[o]:o}}),1===i.opacity&&delete i.opacity,t._visible||(i.visibility="hidden"),e(n,i)}function m(e,t){return _||(_={ids:{},svgs:{}}),e&&_.svgs[t+"-"+e._id]}function g(e,t,n){_||m();var r=_.ids[n]=(_.ids[n]||0)+1;t.id=n+"-"+r,_.svgs[n+"-"+e._id]=t}function v(e,n){var r=e,i=null;if(_){r="svg"===e.nodeName.toLowerCase()&&e;for(var a in _.svgs)i||(r||(r=t("svg"),r.appendChild(e)),i=r.insertBefore(t("defs"),r.firstChild)),i.appendChild(_.svgs[a]);_=null}return n.asString?(new XMLSerializer).serializeToString(r):r}function y(e,t,n){var r=E[e._class],i=r&&r(e,t);if(i){var a=t.onExport;a&&(i=a(e,i,t)||i);var o=JSON.stringify(e._data);o&&"{}"!==o&&"null"!==o&&i.setAttribute("data-paper-data",o)}return i&&f(e,i,n)}function w(e){return e||(e={}),b=new h(e.precision),e}var b,_,E={Group:r,Layer:r,Raster:i,Path:a,Shape:o,CompoundPath:l,PlacedSymbol:u,PointText:p};C.inject({exportSVG:function(e){return e=w(e),v(y(this,e,!0),e)}}),x.inject({exportSVG:function(e){e=w(e);var r=this.layers,i=this.getView(),a=i.getViewSize(),o=t("svg",{x:0,y:0,width:a.width,height:a.height,version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}),s=o,l=i._matrix;l.isIdentity()||(s=o.appendChild(t("g",n(l))));for(var u=0,c=r.length;u<c;u++)s.appendChild(y(r[u],e,!0));return v(o,e)}})},new function(){function e(e,t,n,r){var i=ae[t],a=i?e.getAttributeNS(i,t):e.getAttribute(t);return"null"===a&&(a=null),null==a?r?null:n?"":0:n?a:parseFloat(a)}function t(t,n,r,i){return n=e(t,n,!1,i),r=e(t,r,!1,i),!i||null!=n&&null!=r?new f(n,r):null}function n(t,n,r,i){return n=e(t,n,!1,i),r=e(t,r,!1,i),!i||null!=n&&null!=r?new g(n,r):null}function r(e,t,n){return"none"===e?null:"number"===t?parseFloat(e):"array"===t?e?e.split(/[\s,]+/g).map(parseFloat):[]:"color"===t?v(e)||e:"lookup"===t?n[e]:e}function i(e,t,n,r){var i=e.childNodes,a="clippath"===t,o=new k,s=o._project,l=s._currentStyle,u=[];if(a||(o=m(o,e,r),s._currentStyle=o._style.clone()),r)for(var c=e.querySelectorAll("defs"),h=0,d=c.length;h<d;h++)w(c[h],n,!1);for(var h=0,d=i.length;h<d;h++){var p,f=i[h];1!==f.nodeType||"defs"===f.nodeName.toLowerCase()||!(p=w(f,n,!1))||p instanceof E||u.push(p)}return o.addChildren(u),a&&(o=m(o.reduce(),e,r)),s._currentStyle=l,(a||"defs"===t)&&(o.remove(),o=null),o}function l(e,t){for(var n=e.getAttribute("points").match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g),r=[],i=0,a=n.length;i<a;i+=2)r.push(new f(parseFloat(n[i]),parseFloat(n[i+1])));var o=new A(r);return"polygon"===t&&o.closePath(),o}function u(e){var t=e.getAttribute("d"),n={pathData:t};return(t.match(/m/gi)||[]).length>1||/z\S+/i.test(t)?new B(n):new A(n)}function c(n,r){var i,a=(e(n,"href",!0)||"").substring(1),o="radialgradient"===r;if(a)i=D[a].getGradient();else{for(var s=n.childNodes,l=[],u=0,c=s.length;u<c;u++){var h=s[u];1===h.nodeType&&l.push(m(new W,h))}i=new U(l,o)}var d,p,f;return o?(d=t(n,"cx","cy"),p=d.add(e(n,"r"),0),f=t(n,"fx","fy",!0)):(d=t(n,"x1","y1"),p=t(n,"x2","y2")),m(new q(i,d,p,f),n),null}function h(e,t,n,r){for(var i=(r.getAttribute(n)||"").split(/\)\s*/g),a=new b,o=0,s=i.length;o<s;o++){var l=i[o];if(!l)break;for(var u=l.split(/\(\s*/),c=u[0],h=u[1].split(/[\s,]+/g),d=0,p=h.length;d<p;d++)h[d]=parseFloat(h[d]);switch(c){case"matrix":a.concatenate(new b(h[0],h[1],h[2],h[3],h[4],h[5]));break;case"rotate":a.rotate(h[0],h[1],h[2]);break;case"translate":a.translate(h[0],h[1]);break;case"scale":a.scale(h);break;case"skewX":a.skew(h[0],0);break;case"skewY":a.skew(0,h[0])}}e.transform(a)}function d(e,t,n){var r=e["fill-opacity"===n?"getFillColor":"getStrokeColor"]();r&&r.setAlpha(parseFloat(t))}function p(e,t,n){var r=e.attributes[t],i=r&&r.value;if(!i){var a=s.camelize(t);i=e.style[a],i||n.node[a]===n.parent[a]||(i=n.node[a])}return i?"none"===i?null:i:o}function m(e,t,n){var r={node:H.getStyles(t)||{},parent:!n&&H.getStyles(t.parentNode)||{}};return s.each(N,function(n,i){var a=p(t,i,r);a!==o&&(e=s.pick(n(e,a,i,t,r),e))}),e}function v(e){var t=e&&e.match(/\((?:#|)([^)']+)/);return t&&D[t[1]]}function w(e,t,n){function r(e){a=o;var r=w(e,t,n),i=t.onLoad,s=o.project&&o.getView();i&&i.call(this,r),s.update()}if(!e)return null;t?"function"==typeof t&&(t={onLoad:t}):t={};var i=e,o=a;if(n)if("string"!=typeof e||/^.*</.test(e)){if("undefined"!=typeof File&&e instanceof File){var l=new FileReader;return l.onload=function(){r(l.result)},l.readAsText(e)}}else{if(i=document.getElementById(e),!i)return te.request("get",e,r);e=null}if("string"==typeof e&&(i=(new DOMParser).parseFromString(e,"image/svg+xml")),!i.nodeName)throw new Error("Unsupported SVG source: "+e);var u,c=i.nodeName.toLowerCase(),h=_[c],d=i.getAttribute&&i.getAttribute("data-paper-data"),p=o.settings,f=p.applyMatrix;if(p.applyMatrix=!1,u=h&&h(i,c,t,n)||null,p.applyMatrix=f,u){"#document"===c||u instanceof k||(u=m(u,i,n));var g=t.onImport;g&&(u=g(i,u,t)||u),t.expandShapes&&u instanceof S&&(u.remove(),u=u.toPath()),d&&(u._data=JSON.parse(d))}return n&&(D={},u&&s.pick(t.applyMatrix,f)&&u.matrix.apply(!0,!0)),u}var _={"#document":function(e,t,n,r){for(var i=e.childNodes,a=0,o=i.length;a<o;a++){var s=i[a];if(1===s.nodeType){var l=s.nextSibling;document.body.appendChild(s);var u=w(s,n,r);return l?e.insertBefore(s,l):e.appendChild(s),u}}},g:i,svg:i,clippath:i,polygon:l,polyline:l,path:u,lineargradient:c,radialgradient:c,image:function(r){var i=new P(e(r,"href",!0));return i.on("load",function(){var e=n(r,"width","height");this.setSize(e);var i=this._matrix._transformPoint(t(r,"x","y").add(e.divide(2)));this.translate(i)}),i},symbol:function(e,t,n,r){return new E(i(e,t,n,r),(!0))},defs:i,use:function(n){var r=(e(n,"href",!0)||"").substring(1),i=D[r],a=t(n,"x","y");return i?i instanceof E?i.place(a):i.clone().translate(a):null},circle:function(n){return new S.Circle(t(n,"cx","cy"),e(n,"r"))},ellipse:function(e){return new S.Ellipse({center:t(e,"cx","cy"),radius:n(e,"rx","ry")})},rect:function(e){var r=t(e,"x","y"),i=n(e,"width","height"),a=n(e,"rx","ry");return new S.Rectangle(new y(r,i),a)},line:function(e){return new A.Line(t(e,"x1","y1"),t(e,"x2","y2"))},text:function(e){var n=new F(t(e,"x","y").add(t(e,"dx","dy")));return n.setContent(e.textContent.trim()||""),n}},N=s.set(s.each(ie,function(e){this[e.attribute]=function(t,n){if(t[e.set](r(n,e.type,e.fromSVG)),"color"===e.type&&t instanceof S){var i=t[e.get]();i&&i.transform((new b).translate(t.getPosition(!0).negate()))}}},{}),{id:function(e,t){D[t]=e,e.setName&&e.setName(t)},"clip-path":function(e,t){var n=v(t);if(n){if(n=n.clone(),n.setClipMask(!0),!(e instanceof k))return new k(n,e);e.insertChild(0,n)}},gradientTransform:h,transform:h,"fill-opacity":d,"stroke-opacity":d,visibility:function(e,t){e.setVisible("visible"===t)},display:function(e,t){e.setVisible(null!==t)},"stop-color":function(e,t){e.setColor&&e.setColor(t)},"stop-opacity":function(e,t){e._color&&e._color.setAlpha(parseFloat(t))},offset:function(e,t){var n=t.match(/(.*)%$/);e.setRampPoint(n?n[1]/100:parseFloat(t))},viewBox:function(e,t,i,a,o){var s=new y(r(t,"array")),l=n(a,"width","height",!0);if(e instanceof k){var u=l?s.getSize().divide(l):1,c=(new b).translate(s.getPoint()).scale(u);e.transform(c.inverted())}else if(e instanceof E){l&&s.setSize(l);var h="visible"!=p(a,"overflow",o),d=e._definition;h&&!s.contains(d.getBounds())&&(h=new S.Rectangle(s).transform(d._matrix),h.setClipMask(!0),d.addChild(h))}}}),D={};C.inject({importSVG:function(e,t){return this.addChild(w(e,t,!0))}}),x.inject({importSVG:function(e,t){return this.activate(),w(e,t,!0)}})},a=new(u.inject(s.exports,{enumerable:!0,Base:s,Numerical:d,Key:J})),r=a,i="function"==typeof r?r.call(t,n,t,e):r,!(i!==o&&(e.exports=i)),a}},function(e,t,n){"use strict";var r=n(2),i=r.createClass({displayName:"SectionHeader",render:function(){return r.createElement("h2",{id:this.props.name,"data-num":this.props.number},r.createElement("a",{href:"#"+this.props.name},this.props.title))},componentDidMount:function(){var e=window.location.hash;e&&(window.location=window.location.hash)}});e.exports=i},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:"So what makes a Bézier Curve?"}},setup:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();e.setCurve(t),e.step=25},draw:function(e,t){var n,r,i,a,o,s,l,u,c=e.getPanelWidth(),h=t.points,d=h[0],p=h[1],f=h[2],m={x:0,y:0};for(e.reset(),e.setColor("black"),e.setFill("black"),e.drawSkeleton(t,m),e.text("First linear interpolation at "+e.step+"% steps",{x:5,y:15},m),m.x+=c,e.drawLine({x:0,y:0},{x:0,y:this.dim},m),e.drawSkeleton(t,m),e.text("Second interpolation at "+e.step+"% steps",{x:5,y:15},m),m.x+=c,e.drawLine({x:0,y:0},{x:0,y:this.dim},m),e.drawSkeleton(t,m),e.text("Curve points generated this way",{x:5,y:15},m),e.setColor("lightgrey"),a=1,s=20,u;a<s;a++)l=a/s,u=t.get(l),e.drawCircle(u,2,m);for(o=3*e.step;o>0;o-=e.step)a=o/100,a>1||(e.setRandomColor(),n={x:d.x+a*(p.x-d.x),y:d.y+a*(p.y-d.y)},r={x:p.x+a*(f.x-p.x),y:p.y+a*(f.y-p.y)},i={x:n.x+a*(r.x-n.x),y:n.y+a*(r.y-n.y)},m={x:0,y:0},e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(d,n,m),e.drawLine(p,r,m),e.setWeight(1),m.x+=c,e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(n,i,m),e.setWeight(1),e.drawCircle(i,3,m),m.x+=c,e.drawCircle(i,3,m),e.text(o+"%, or t = "+e.utils.round(a,2),{x:i.x+10+m.x,y:i.y+10+m.y}))},values:{38:1,40:-1},onKeyDown:function(e,t){var n=this.values[e.keyCode];n&&(e.preventDefault(),t.step+=n,t.step<1&&(t.step=1))},render:function(){return r.createElement("section",null,r.createElement(a,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/75bb049d813d8ee084b076531823f2109cc1660f.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 up and down arrow 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(i,{title:"Linear Interpolation leading to Bézier curves",setup:this.setup,draw:this.draw,onKeyDown:this.onKeyDown}),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=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=n(226),s=r.createClass({displayName:"Explanation",statics:{keyHandlingOptions:{propName:"step",values:{38:.1,40:-.1},controller:function(e){e.step<.1&&(e.step=.1)}}},getDefaultProps:function(){return{title:"The mathematics of Bézier curves"}},setup:function(e){e.step=5},draw:function(e,t){var n=e.getPanelWidth(),r=n,i=n,a=r/2,o=i/2,s=a/2,l=o/2;e.reset(),e.setColor("black"),e.drawLine({x:0,y:o},{x:r,y:o}),e.drawLine({x:a,y:0},{x:a,y:i});for(var u,c={x:a,y:o},h=0;h<=e.step;h+=.1){u={x:s*Math.cos(h),y:l*Math.sin(h)},e.drawPoint(u,c);var d=h%1;(d<.05||d>.95)&&(e.text("t = "+Math.round(h),{x:c.x+1.25*s*Math.cos(h)-10,y:c.y+1.25*l*Math.sin(h)+5}),e.drawCircle(u,2,c))}},render:function(){return r.createElement("section",null,r.createElement(a,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/785e792c343b71d4e674ac94d8800940b30917ac.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/0dfe7562b43441e72201ff4cdd2e8b6e2e3ecb2d.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/ed6f533530199d1e99b3319ba137c1327b0459c0.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/ea632ea75d6a2aeb6fe69c07feb6e76f81884746.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 (use your up and down arrow keys to change the plot end value):"),r.createElement(i,{preset:"empty",title:"A (partial) circle: x=sin(t), y=cos(t)","static":!0,setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),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/3e8b26cf8833db7089d65e9c6b3953a3140bb19f.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/24e915ab4c69b85951f1ea9018b0ece9e52a10dd.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/448d10d21afd49135055cf685fedf6c494984b53.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/87c7f5294b902def4ea56e8f6cf24265a37143b6.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/d79bf595a0911c17e2ac86d8806a0a8ab6ba7dfe.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 ...=<value> 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<n; k++):","\n","    sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)","\n","  return sum"),r.createElement("p",null,"I say we could, because we're not going to: the factorial function is ",r.createElement("em",null,"incredibly"),'expensive. And, as we can see from the above explanation, we can actually create Pascal\'s triangle quite easily without it: just start at [1], then [1,1], then [1,2,1], then [1,3,3,1], and so on, with each next row fitting 1 more number than the previous row, starting and ending with "1", with all the numbers in between being the sum of the previous row\'s elements on either side "above" the one we\'re computing.'),r.createElement("p",null,"We can generate this as a list of lists lightning fast, and then never have to compute the binomial terms because we have a lookup table:"),r.createElement("pre",null,"lut = [      [1],           // n=0","\n","            [1,1],          // n=1","\n","           [1,2,1],         // n=2","\n","          [1,3,3,1],        // n=3","\n","         [1,4,6,4,1],       // n=4","\n","        [1,5,10,10,5,1],    // n=5","\n","       [1,6,15,20,15,6,1]]  // n=6","\n","\n","binomial(n,k):","\n","  while(n >= lut.length):","\n","    s = lut.length","\n","    nextRow = new array(size=s+1)","\n","    nextRow[0] = 1","\n","    for(i=1, prev=s-1; i&ltprev; i++):","\n","      nextRow[i] = lut[prev][i-1] + lut[prev][i]","\n","    nextRow[s] = 1","\n","    lut.add(nextRow)","\n","  return lut[n][k]"),r.createElement("p",null,"So what's going on here? First, we declare a lookup table with a size that's reasonably large enough to accommodate most lookups. Then, we declare a function to get us the values we need, and we make sure that if an n/k pair is requested that isn't in the LUT yet, we expand it first. Our basis function now looks like this:"),r.createElement("pre",null,"function Bezier(n,t):","\n","  sum = 0","\n","  for(k=0; k<n; k++):","\n","    sum += binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum"),r.createElement("p",null,"Perfect. Of course, we can optimize further. For most computer graphics purposes, we don't need arbitrary curves. We need quadratic and  cubic curves (this primer actually does do arbitrary curves, so you'll find code similar to shown here), which means we can drastically simplify the code:"),r.createElement("pre",null,"function Bezier(2,t):","\n","  t2 = t * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  return mt2 + 2*mt*t + t2","\n","\n","function Bezier(3,t):","\n","  t2 = t * t","\n","  t3 = t2 * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  mt3 = mt2 * mt","\n","  return mt3 + 3*mt2*t + 3*mt*t2 + t3"),r.createElement("p",null,"And now we know how to program the basis function. Exellent.")),r.createElement("p",null,"So, now we know what the base function(s) look(s) like, time to add in the magic that makes Bézier curves so special: control points."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=n(2),a=n(227);e.exports=function(e){var t=e.keyHandlingOptions,n=t.propName||"",o=t.values||{},s=t.controller||a,l=e.getDefaultProps,u="wrappedComponent";return i.createClass({values:o,getDefaultProps:l,onKeyDown:function(e,t){var r=this.values[e.keyCode];r&&(e.preventDefault(),"function"==typeof r?r(t):(t[n]+=r,s(t)))},getComponent:function(){var e=this.refs[u];return e.getComponent?e.getComponent():e},render:function(){return i.createElement(e,r({},this.props,{onKeyDown:this.onKeyDown,ref:u}))}})}},function(e,t){e.exports=function(){}},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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 i={x:r.x-5,y:n},a={x:r.x+5,y:t};e.drawRect(i,a),e.setColor("black")},drawLerpPoint:function(e,t,n,r,i){i.y=n+t*r,e.drawCircle(i,3),e.setFill("black"),e.text((1e4*t|0)/100+"%",{x:i.x+10,y:i.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 i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,2*(1-a)*a,n,r,i),this.drawLerpPoint(e,a*a,n,r,i)}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 i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,3*(1-a)*(1-a)*a,n,r,i),
-this.drawLerpPoint(e,3*(1-a)*a*a,n,r,i),this.drawLerpPoint(e,a*a*a,n,r,i)}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 i,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)for(this.drawLerpBox(e,t,n,o),i=0;i<=15;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(i=0;i<=15;i++){var u=!1,c=!1;0===i&&(u="first term",c={x:n+5,y:r}),15===i&&(u="last term",c={x:t-3.5*n,y:r}),this.drawFunction(e,u,c,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(a,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(i,{inline:!0,preset:"simple",title:"Quadratic interpolations",draw:this.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:this.drawCubicLerp}),r.createElement(i,{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/b98618f8061e9e58289abccc06a624a14561d40f.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/853858526831a7ef3eb170efe49de397bb4913a1.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(i,{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<n; k++):","\n","    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum"),r.createElement("p",null,"And for the extremely optimized versions:"),r.createElement("pre",null,"function Bezier(2,t,w[]):","\n","  t2 = t * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2","\n","\n","function Bezier(3,t,w[]):","\n","  t2 = t * t","\n","  t3 = t2 * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  mt3 = mt2 * mt","\n","  return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:"The Bézier interval [0,1]"}},setupQuadratic:function(e){var t=new e.Bezier(70,155,20,110,100,75);e.setCurve(t)},setupCubic:function(e){var t=new e.Bezier(60,105,75,30,215,115,140,160);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("lightgrey");var n,r,i=.05,a=-10,o=t.get(a-i);for(n=a;n<=i;n+=i)r=t.get(n),e.drawLine(o,r),o=r;o=t.get(1);var s=10;for(n=1+i;n<=s;n+=i)r=t.get(n),e.drawLine(o,r),o=r},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from ",r.createElement("i",null,"t-0")," to ",r.createElement("i",null,"t=1"),". Why that particular interval?"),r.createElement("p",null,'It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have a value that is a mixture of two other values, then the general formula for this is:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7f5ebb8489a8d04beb28f47c8aac2632b78ae764.svg",style:{width:"14.99985rem",height:"0.9rem"}})),r.createElement("p",null,"The obvious start and end values here need to be ",r.createElement("i",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("i",null,"a=0, b=1"),', so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don\'t want "a" and "b" to be independent: if they are, then we could just pick whatever values we like, and end up with a mixed value that is, for example, 100% value 1 ',r.createElement("strong",null,"and")," 100% value 2. In principle that's fine, but for Bézier curves we always want mixed values ",r.createElement("em",null,"between"),' the start and end point, so we need to make sure we can never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And that\'s easy:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d326c8f323ccd2da00d998b533ac26a1c04fcfba.svg",style:{width:"14.774849999999999rem",height:"1.125rem"}})),r.createElement("p",null,"With this we can guarantee that we never sum above 100%. By restricting ",r.createElement("i",null,"a")," to values in the interval [0,1], we will always be somewhere between our two values (inclusively), and we will always sum to a 100% mix."),r.createElement("p",null,'But... what if we use this form, used in the assumption that we will only ever use values between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong? Well... not really, but we get to "see more".'),r.createElement("p",null,'In the case of Bézier curves, extending the interval simply makes our curve "keep going". Bézier curves are simply segments on some polynomial curve, so if we pick a wider interval we simply get to see more of the curve. So what do they look like?'),r.createElement("p",null,'The following two graphics show you Bézier curves rendered "the usual way", as well as the curves they "lie on" if we were to extend the ',r.createElement("i",null,"t"),' values much further. As you can see, there\'s a lot more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve points around.'),r.createElement(i,{preset:"simple",title:"Quadratic infinite interval Bézier curve",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"In fact, there are curves used in graphics design and computer modelling that do the opposite of Bézier curves, where rather than fixing the interval, and giving you free coordinates, they fix the coordinates, but give you freedom over the interval. A great example of this is the ",r.createElement("a",{href:"http://levien.com/phd/phd.html"},'"Spiro" curve'),", which is a curve based on part of a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Euler_spiral"},"Cornu Spiral, also known as Euler's Spiral"),". It's a very easthetically pleasing curve and you'll find it in quite a few graphics packages like ",r.createElement("a",{href:"https://fontforge.github.io"},"FontForge")," and ",r.createElement("a",{href:"https://inkscape.org"},"Inkscape"),", having even been used in font design (such as for the Inconsolata font)."))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(223),a=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:"Bézier curvatures as matrix operations"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"We can also represent Bézier as matrix operations, by expressing the Bézier formula as a polynomial basis function, the weight matrix, and the actual coordinates as matrix. Let's look at what this means for the cubic curve :"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d961171d6d1dfc22bb1756901e79102147914360.svg",style:{width:"31.12515rem",height:"1.20015rem"}})),r.createElement("p",null,"Disregarding our actual coordinates for a moment, we have:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f925c339011e6c38e47b9c3a571e02fca80eb5c3.svg",style:{width:"23.475150000000003rem",height:"1.20015rem"}})),r.createElement("p",null,"We can write this as a sum of four expressions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/30d76165668bf15f62986503bea100f39c5b9fec.svg",style:{width:"10.42515rem",height:"5.8500000000000005rem"}})),r.createElement("p",null,"And we can expand these expressions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7ca5abe1124ba1e51b7f12e0469cb4b1407593b8.svg",style:{width:"27.82485rem",height:"5.8500000000000005rem"}})),r.createElement("p",null,"Furthermore, we can make all the 1 and 0 factors explicit:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bccbb94942e3ff79579e4719106f4701c157727e.svg",style:{width:"15.67485rem",height:"5.625rem"}})),r.createElement("p",null,"And ",r.createElement("em",null,"that"),", we can view as a series of four matrix operations:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d5f85d80fbbc62e1e8d58621b76f3d0224876b62.svg",style:{width:"45.225rem",height:"5.47515rem"}})),r.createElement("p",null,"If we compact this into a single matrix operation, we get:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7140be48f45b2e7190fa8dffef5c05c47c038ab0.svg",style:{width:"16.875rem",height:"5.47515rem"}})),r.createElement("p",null,"This kind of polynomial basis representation is generally written with the bases in increasing order, which means we need to flip our ",r.createElement("em",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4e1849950a5c13f5135aa3412e0ee634cdc67301.svg",style:{width:"16.875rem",height:"5.47515rem"}})),r.createElement("p",null,"And then finally, we can add in our original coordinates as a single third matrix:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5910e25a46d9e86ab34513017f1274628a40e5a7.svg",style:{width:"23.925150000000002rem",height:"5.47515rem"}})),r.createElement("p",null,"We can perform the same trick for the quadratic curve, in which case we end up with:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}})),r.createElement("p",null,"If we plug in a ",r.createElement("em",null,"t")," value, and then multiply the matrices, we will get exactly the same values as when we evaluate the original polynomial function, or as when we evaluate the curve using progessive linear interpolation."),r.createElement("p",null,r.createElement("strong",null,"So: why would we bother with matrices?")," Matrix representations allow us to discover things about functions that would otherwise be hard to tell. It turns out that the curves form ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Triangular_matrix"},"triangular matrices"),", and they have a determinant equal to the product of the actual coordinates we use for our curve. It's also invertible, which means there's",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Invertible_matrix#The_invertible_matrix_theorem"},"a ton of properties")," that are all satisfied. Of course, the main question is: \"Why is this useful to us, now?\", and the answer to that is that it's not immediately useful, but you'll be seeing some instances where certain curve properties can be either computed via function manipulation, or via clever use of matrices, and sometimes the matrix approach can be (drastically) faster."),r.createElement("p",null,"So for now, just remember that we can represent curves this way, and let's move on."))}});e.exports=a},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"deCasteljau",getDefaultProps:function(){return{title:"de Casteljau's algorithm"}},setup:function(e){var t=[{x:90,y:110},{x:25,y:40},{x:230,y:40},{x:150,y:240}];e.setCurve(new e.Bezier(t))},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.hover){e.setColor("rgb(200,100,100)");for(var n=e.getPanelWidth(),r=e.hover.x/n,i=e.drawHull(t,r),a=4;a<=8;a++)e.drawCircle(i[a],3);var o=t.get(r);e.drawCircle(o,5),e.setFill("black"),e.drawCircle(o,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(a,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; i<newpoints.length; i++):","\n","      newpoints[i] = (1-t) * points[i] + t * points[i+1]","\n","    drawCurve(newpoints, t)"),r.createElement("p",null,"And done, that's the algorithm implemented. Except usually you don't get the luxury of overloading the \"+\" operator, so let's also give the code for when you need to work with",r.createElement("i",null,"x")," and ",r.createElement("i",null,"y")," values:"),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; i<newpoints.length; i++):","\n","      x = (1-t) * points[i].x + t * points[i+1].x","\n","      y = (1-t) * points[i].y + t * points[i+1].y","\n","      newpoints[i] = new point(x,y)","\n","    drawCurve(newpoints, t)"),r.createElement("p",null,"So what does this do? This draws a point, if the passed list of points is only 1 point long. Otherwise it will create a new list of points that sit at the ",r.createElement("i",null,"t"),' ratios (i.e. the "markers" outlined in the above algorithm), and then call the draw function for this new list.')),r.createElement("p",null,"To see this in action, mouse-over the following sketch. Moving the mouse changes which curve point is explicitly evaluated using de Casteljau's algorithm, moving the cursor left-to-right (or, of course, right-to-left), shows you how a curve is generated using this approach."),r.createElement(i,{preset:"simple",title:"Traversing a curve using de Casteljau's algorithm",setup:this.setup,draw:this.draw}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=n(226),s=r.createClass({displayName:"Flattening",statics:{keyHandlingOptions:{propName:"steps",values:{38:1,40:-1},controller:function(e){e.steps<1&&(e.steps=1)}}},getDefaultProps:function(){return{title:"Simplified drawing"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t),e.steps=3},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.steps=5},drawFlattened:function(e,t){e.reset(),e.setColor("#DDD"),e.drawSkeleton(t),e.setColor("#DDD"),e.drawCurve(t);for(var n,r=1/e.steps,i=t.points[0],a=r;a<1+r;a+=r)n=t.get(Math.min(a,1)),e.setColor("red"),e.drawLine(i,n),i=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(a,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(i,{preset:"twopanel",title:"Flattening a quadratic curve",setup:this.setupQuadratic,draw:this.drawFlattened,onKeyDown:this.onKeyDown}),r.createElement(i,{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=o(s)},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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,i=t.get(.5),a=t.split(r);e.drawCurve(a.left),e.drawCurve(a.right),e.setColor("red"),e.drawCircle(i,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(i,4),n.x-=20,n.y-=20,e.drawSkeleton(a.left,n,!0),e.drawCurve(a.left,n),n.x+=40,n.y+=40,e.drawSkeleton(a.right,n,!0),e.drawCurve(a.right,n)},drawAnimated:function(e,t){e.setPanelCount(3),e.reset();var n=e.getFrame(),r=5*e.getPlayInterval(),i=n%r/r,a=n%(2*r)<r;a?i%=1:i=1-i%1;var o={x:0,y:0};e.setColor("lightblue"),e.drawHull(t,i),e.drawSkeleton(t),e.drawCurve(t);var s=t.get(i);e.drawCircle(s,4),e.setColor("black"),o.x+=e.getPanelWidth(),e.drawLine({x:0,y:0},{x:0,y:e.getPanelHeight()},o);var l=t.split(i);e.setColor("lightgrey"),e.drawCurve(t,o),e.drawHull(t,i,o),e.setColor("black"),e.drawCurve(l.left,o),e.drawPoints(l.left.points,o),e.setFill("black"),e.text("Left side of curve split at t = "+(100*i|0)/100,{x:10+o.x,y:15+o.y}),o.x+=e.getPanelWidth(),e.drawLine({x:0,y:0},{x:0,y:e.getPanelHeight()},o),e.setColor("lightgrey"),e.drawCurve(t,o),e.drawHull(t,i,o),e.setColor("black"),e.drawCurve(l.right,o),e.drawPoints(l.right.points,o),e.setFill("black"),e.text("Right side of curve split at t = "+(100*i|0)/100,{x:10+o.x,y:15+o.y})},togglePlay:function(e,t){t.playing?t.pause():t.play()},render:function(){return r.createElement("section",null,r.createElement(a,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(i,{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; i<newpoints.length; i++):","\n","      if(i==0):","\n","        left.add(points[i])","\n","      if(i==newpoints.length-1):","\n","        right.add(points[i+1])","\n","      newpoints[i] = (1-t) * points[i] + t * points[i+1]","\n","    drawCurve(newpoints, t)"),r.createElement("p",null,"After running this function for some value ",r.createElement("i",null,"t"),", the ",r.createElement("i",null,"left")," and ",r.createElement("i",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("i",null,"t"),' value, the other on the "right", of the same order as the original curve, and overlayed exactly on the original curve.')),r.createElement("p",null,"This is best illustrated with an animated graphic (click to play/pause):"),r.createElement(i,{preset:"threepanel",title:"Bézier curve splitting",setup:this.setupCubic,draw:this.drawAnimated,onClick:this.togglePlay}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(223),a=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:"Splitting curves using matrices"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Another way to split curves is to exploit the matrix representation of a Bézier curve. In ",r.createElement("a",{href:"#matrix"},"the section on matrices")," we saw that we can represent curves as matrix multiplications. Specifically, we saw these two forms for the quadratic, and cubic curves, respectively (using the reversed Bézier coefficients vector for legibility):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/01ea4f74c4785a19bedf18034b51510c5ce2ad8f.svg",style:{width:"23.925150000000002rem",height:"5.47515rem"}})),r.createElement("p",null,"Let's say we want to split the curve at some point ",r.createElement("em",null,"t = z"),', forming two new (obviously smaller) Bézier curves. To find the coordinates for these two Bézier curves, we can use the matrix representation and some linear algebra. First, we split out the the actual "point on the curve" information as a new matrix multiplication:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d487e1e0181420995be49b25bc6595c9d0360435.svg",style:{width:"60.82515rem",height:"5.54985rem"}})),r.createElement("p",null,"If we could compact these matrices back to a form ",r.createElement("strong",null,"[t values] · [bezier matrix] · [column matrix]"),", with the first two staying the same, then that column matrix on the right would be the coordinates of a new Bézier curve that describes the first segment, from ",r.createElement("em",null,"t = 0")," to ",r.createElement("em",null,"t = z"),". As it turns out, we can do this quite easily, by exploiting some simple rules of linear algebra (and if you don't care about the derivations, just skip to the end of the box for the results!)."),r.createElement("div",{className:"note"},r.createElement("h2",null,"Deriving new hull coordinates"),r.createElement("p",null,"Deriving the two segments upon splitting a curve takes a few steps, and the higher the curve order, the more work it is, so let's look at the quadratic curve first:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc85dbb857222546bd30ea559a452fe9f36c8090.svg",style:{width:"17.69985rem",height:"4.05rem"}})),r.createElement("p",null,"We do this, because [",r.createElement("em",null,"M · M",r.createElement("sup",null,"-1")),"] is the identity matrix (a bit like multiplying something by x/x in calculus. It doesn't do anything to the function, but it does allow you to rewrite it to something that may be easier to work with, or can be broken up differently). Adding that as matrix multiplication has no effect on the total formula, but it does allow us to change the matrix sequence [",r.createElement("em",null,"something · M"),"] to a sequence [",r.createElement("em",null,"M · something"),"], and that makes a world of difference: if we know what [",r.createElement("em",null,"M",r.createElement("sup",null,"-1")," · Z · M"),"] is, we can apply that to our coordinates, and be left with a proper matrix representation of a quadratic Bézier curve (which is [",r.createElement("em",null,"T · M · P"),"]), with a new set of coordinates that represent the curve from",r.createElement("em",null,"t = 0")," to ",r.createElement("em",null,"t = z"),". So let's get computing:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1dbabc115128a85389cbbcc75fbced48e5a2ca25.svg",style:{width:"45.9rem",height:"4.35015rem"}})),r.createElement("p",null,"Excellent! Now we can form our new quadratic curve:"),r.createElement("p",null,r.createElement("img",{
+a=E[C+1],c=x[C+1],o=E[C+2],h=x[C+2],l=E[C+3],d=x[C+3],y();var N=l*r/255,S=1-N;x[C]=N*p+S*u,x[C+1]=N*f+S*c,x[C+2]=N*m+S*h,x[C+3]=l*r+S*d}n.putImageData(_,s.x,s.y)}}},ie=s.each({fillColor:["fill","color"],strokeColor:["stroke","color"],strokeWidth:["stroke-width","number"],strokeCap:["stroke-linecap","string"],strokeJoin:["stroke-linejoin","string"],strokeScaling:["vector-effect","lookup",{"true":"none","false":"non-scaling-stroke"},function(e,t){return!t&&(e instanceof L||e instanceof S||e instanceof j)}],miterLimit:["stroke-miterlimit","number"],dashArray:["stroke-dasharray","array"],dashOffset:["stroke-dashoffset","number"],fontFamily:["font-family","string"],fontWeight:["font-weight","string"],fontSize:["font-size","number"],justification:["text-anchor","lookup",{left:"start",center:"middle",right:"end"}],opacity:["opacity","number"],blendMode:["mix-blend-mode","string"]},function(e,t){var n=s.capitalize(t),r=e[2];this[t]={type:e[1],property:t,attribute:e[0],toSVG:r,fromSVG:r&&s.each(r,function(e,t){this[e]=t},{}),exportFilter:e[3],get:"get"+n,set:"set"+n}},{}),ae={href:"http://www.w3.org/1999/xlink",xlink:"http://www.w3.org/2000/xmlns"};return new function(){function e(e,t){for(var n in t){var r=t[n],i=ae[n];"number"==typeof r&&(r=b.number(r)),i?e.setAttributeNS(i,n,r):e.setAttribute(n,r)}return e}function t(t,n){return e(document.createElementNS("http://www.w3.org/2000/svg",t),n)}function n(e,t,n){var r=new s,i=e.getTranslation();if(t){e=e.shiftless();var a=e._inverseTransform(i);r[n?"cx":"x"]=a.x,r[n?"cy":"y"]=a.y,i=null}if(!e.isIdentity()){var o=e.decompose();if(o&&!o.shearing){var l=[],u=o.rotation,c=o.scaling;i&&!i.isZero()&&l.push("translate("+b.point(i)+")"),d.isZero(c.x-1)&&d.isZero(c.y-1)||l.push("scale("+b.point(c)+")"),u&&l.push("rotate("+b.number(u)+")"),r.transform=l.join(" ")}else r.transform="matrix("+e.getValues().join(",")+")"}return r}function r(r,i){for(var a=n(r._matrix),o=r._children,s=t("g",a),l=0,u=o.length;l<u;l++){var c=o[l],h=y(c,i);if(h)if(c.isClipMask()){var d=t("clipPath");d.appendChild(h),g(c,d,"clip"),e(s,{"clip-path":"url(#"+d.id+")"})}else s.appendChild(h)}return s}function i(e,r){var i=n(e._matrix,!0),a=e.getSize(),o=e.getImage();return i.x-=a.width/2,i.y-=a.height/2,i.width=a.width,i.height=a.height,i.href=r.embedImages===!1&&o&&o.src||e.toDataURL(),t("image",i)}function a(e,r){var i=r.matchShapes;if(i){var a=e.toShape(!1);if(a)return o(a,r)}var s,l=e._segments,u=n(e._matrix);if(0===l.length)return null;if(i&&!e.hasHandles())if(l.length>=3){s=e._closed?"polygon":"polyline";for(var c=[],h=0,d=l.length;h<d;h++)c.push(b.point(l[h]._point));u.points=c.join(" ")}else{s="line";var p=l[0]._point,f=l[l.length-1]._point;u.set({x1:p.x,y1:p.y,x2:f.x,y2:f.y})}else s="path",u.d=e.getPathData(null,r.precision);return t(s,u)}function o(e){var r=e._type,i=e._radius,a=n(e._matrix,!0,"rectangle"!==r);if("rectangle"===r){r="rect";var o=e._size,s=o.width,l=o.height;a.x-=s/2,a.y-=l/2,a.width=s,a.height=l,i.isZero()&&(i=null)}return i&&("circle"===r?a.r=i:(a.rx=i.width,a.ry=i.height)),t(r,a)}function l(e,r){var i=n(e._matrix),a=e.getPathData(null,r.precision);return a&&(i.d=a),t("path",i)}function u(e,r){var i=n(e._matrix,!0),a=e.getSymbol(),o=m(a,"symbol"),s=a.getDefinition(),l=s.getBounds();return o||(o=t("symbol",{viewBox:b.rectangle(l)}),o.appendChild(y(s,r)),g(a,o,"symbol")),i.href="#"+o.id,i.x+=l.x,i.y+=l.y,i.width=b.number(l.width),i.height=b.number(l.height),i.overflow="visible",t("use",i)}function c(e){var n=m(e,"color");if(!n){var r,i=e.getGradient(),a=i._radial,o=e.getOrigin().transform(),s=e.getDestination().transform();if(a){r={cx:o.x,cy:o.y,r:o.getDistance(s)};var l=e.getHighlight();l&&(l=l.transform(),r.fx=l.x,r.fy=l.y)}else r={x1:o.x,y1:o.y,x2:s.x,y2:s.y};r.gradientUnits="userSpaceOnUse",n=t((a?"radial":"linear")+"Gradient",r);for(var u=i._stops,c=0,h=u.length;c<h;c++){var d=u[c],p=d._color,f=p.getAlpha();r={offset:d._rampPoint,"stop-color":p.toCSS(!0)},f<1&&(r["stop-opacity"]=f),n.appendChild(t("stop",r))}g(e,n,"color")}return"url(#"+n.id+")"}function p(e){var r=t("text",n(e._matrix,!0));return r.textContent=e._content,r}function f(t,n,r){var i={},a=!r&&t.getParent();return null!=t._name&&(i.id=t._name),s.each(ie,function(e){var n=e.get,r=e.type,o=t[n]();if(e.exportFilter?e.exportFilter(t,o):!a||!s.equals(a[n](),o)){if("color"===r&&null!=o){var l=o.getAlpha();l<1&&(i[e.attribute+"-opacity"]=l)}i[e.attribute]=null==o?"none":"number"===r?b.number(o):"color"===r?o.gradient?c(o,t):o.toCSS(!0):"array"===r?o.join(","):"lookup"===r?e.toSVG[o]:o}}),1===i.opacity&&delete i.opacity,t._visible||(i.visibility="hidden"),e(n,i)}function m(e,t){return _||(_={ids:{},svgs:{}}),e&&_.svgs[t+"-"+e._id]}function g(e,t,n){_||m();var r=_.ids[n]=(_.ids[n]||0)+1;t.id=n+"-"+r,_.svgs[n+"-"+e._id]=t}function v(e,n){var r=e,i=null;if(_){r="svg"===e.nodeName.toLowerCase()&&e;for(var a in _.svgs)i||(r||(r=t("svg"),r.appendChild(e)),i=r.insertBefore(t("defs"),r.firstChild)),i.appendChild(_.svgs[a]);_=null}return n.asString?(new XMLSerializer).serializeToString(r):r}function y(e,t,n){var r=E[e._class],i=r&&r(e,t);if(i){var a=t.onExport;a&&(i=a(e,i,t)||i);var o=JSON.stringify(e._data);o&&"{}"!==o&&"null"!==o&&i.setAttribute("data-paper-data",o)}return i&&f(e,i,n)}function w(e){return e||(e={}),b=new h(e.precision),e}var b,_,E={Group:r,Layer:r,Raster:i,Path:a,Shape:o,CompoundPath:l,PlacedSymbol:u,PointText:p};C.inject({exportSVG:function(e){return e=w(e),v(y(this,e,!0),e)}}),x.inject({exportSVG:function(e){e=w(e);var r=this.layers,i=this.getView(),a=i.getViewSize(),o=t("svg",{x:0,y:0,width:a.width,height:a.height,version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}),s=o,l=i._matrix;l.isIdentity()||(s=o.appendChild(t("g",n(l))));for(var u=0,c=r.length;u<c;u++)s.appendChild(y(r[u],e,!0));return v(o,e)}})},new function(){function e(e,t,n,r){var i=ae[t],a=i?e.getAttributeNS(i,t):e.getAttribute(t);return"null"===a&&(a=null),null==a?r?null:n?"":0:n?a:parseFloat(a)}function t(t,n,r,i){return n=e(t,n,!1,i),r=e(t,r,!1,i),!i||null!=n&&null!=r?new f(n,r):null}function n(t,n,r,i){return n=e(t,n,!1,i),r=e(t,r,!1,i),!i||null!=n&&null!=r?new g(n,r):null}function r(e,t,n){return"none"===e?null:"number"===t?parseFloat(e):"array"===t?e?e.split(/[\s,]+/g).map(parseFloat):[]:"color"===t?v(e)||e:"lookup"===t?n[e]:e}function i(e,t,n,r){var i=e.childNodes,a="clippath"===t,o=new k,s=o._project,l=s._currentStyle,u=[];if(a||(o=m(o,e,r),s._currentStyle=o._style.clone()),r)for(var c=e.querySelectorAll("defs"),h=0,d=c.length;h<d;h++)w(c[h],n,!1);for(var h=0,d=i.length;h<d;h++){var p,f=i[h];1!==f.nodeType||"defs"===f.nodeName.toLowerCase()||!(p=w(f,n,!1))||p instanceof E||u.push(p)}return o.addChildren(u),a&&(o=m(o.reduce(),e,r)),s._currentStyle=l,(a||"defs"===t)&&(o.remove(),o=null),o}function l(e,t){for(var n=e.getAttribute("points").match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g),r=[],i=0,a=n.length;i<a;i+=2)r.push(new f(parseFloat(n[i]),parseFloat(n[i+1])));var o=new A(r);return"polygon"===t&&o.closePath(),o}function u(e){var t=e.getAttribute("d"),n={pathData:t};return(t.match(/m/gi)||[]).length>1||/z\S+/i.test(t)?new B(n):new A(n)}function c(n,r){var i,a=(e(n,"href",!0)||"").substring(1),o="radialgradient"===r;if(a)i=D[a].getGradient();else{for(var s=n.childNodes,l=[],u=0,c=s.length;u<c;u++){var h=s[u];1===h.nodeType&&l.push(m(new W,h))}i=new U(l,o)}var d,p,f;return o?(d=t(n,"cx","cy"),p=d.add(e(n,"r"),0),f=t(n,"fx","fy",!0)):(d=t(n,"x1","y1"),p=t(n,"x2","y2")),m(new q(i,d,p,f),n),null}function h(e,t,n,r){for(var i=(r.getAttribute(n)||"").split(/\)\s*/g),a=new b,o=0,s=i.length;o<s;o++){var l=i[o];if(!l)break;for(var u=l.split(/\(\s*/),c=u[0],h=u[1].split(/[\s,]+/g),d=0,p=h.length;d<p;d++)h[d]=parseFloat(h[d]);switch(c){case"matrix":a.concatenate(new b(h[0],h[1],h[2],h[3],h[4],h[5]));break;case"rotate":a.rotate(h[0],h[1],h[2]);break;case"translate":a.translate(h[0],h[1]);break;case"scale":a.scale(h);break;case"skewX":a.skew(h[0],0);break;case"skewY":a.skew(0,h[0])}}e.transform(a)}function d(e,t,n){var r=e["fill-opacity"===n?"getFillColor":"getStrokeColor"]();r&&r.setAlpha(parseFloat(t))}function p(e,t,n){var r=e.attributes[t],i=r&&r.value;if(!i){var a=s.camelize(t);i=e.style[a],i||n.node[a]===n.parent[a]||(i=n.node[a])}return i?"none"===i?null:i:o}function m(e,t,n){var r={node:H.getStyles(t)||{},parent:!n&&H.getStyles(t.parentNode)||{}};return s.each(N,function(n,i){var a=p(t,i,r);a!==o&&(e=s.pick(n(e,a,i,t,r),e))}),e}function v(e){var t=e&&e.match(/\((?:#|)([^)']+)/);return t&&D[t[1]]}function w(e,t,n){function r(e){a=o;var r=w(e,t,n),i=t.onLoad,s=o.project&&o.getView();i&&i.call(this,r),s.update()}if(!e)return null;t?"function"==typeof t&&(t={onLoad:t}):t={};var i=e,o=a;if(n)if("string"!=typeof e||/^.*</.test(e)){if("undefined"!=typeof File&&e instanceof File){var l=new FileReader;return l.onload=function(){r(l.result)},l.readAsText(e)}}else{if(i=document.getElementById(e),!i)return te.request("get",e,r);e=null}if("string"==typeof e&&(i=(new DOMParser).parseFromString(e,"image/svg+xml")),!i.nodeName)throw new Error("Unsupported SVG source: "+e);var u,c=i.nodeName.toLowerCase(),h=_[c],d=i.getAttribute&&i.getAttribute("data-paper-data"),p=o.settings,f=p.applyMatrix;if(p.applyMatrix=!1,u=h&&h(i,c,t,n)||null,p.applyMatrix=f,u){"#document"===c||u instanceof k||(u=m(u,i,n));var g=t.onImport;g&&(u=g(i,u,t)||u),t.expandShapes&&u instanceof S&&(u.remove(),u=u.toPath()),d&&(u._data=JSON.parse(d))}return n&&(D={},u&&s.pick(t.applyMatrix,f)&&u.matrix.apply(!0,!0)),u}var _={"#document":function(e,t,n,r){for(var i=e.childNodes,a=0,o=i.length;a<o;a++){var s=i[a];if(1===s.nodeType){var l=s.nextSibling;document.body.appendChild(s);var u=w(s,n,r);return l?e.insertBefore(s,l):e.appendChild(s),u}}},g:i,svg:i,clippath:i,polygon:l,polyline:l,path:u,lineargradient:c,radialgradient:c,image:function(r){var i=new P(e(r,"href",!0));return i.on("load",function(){var e=n(r,"width","height");this.setSize(e);var i=this._matrix._transformPoint(t(r,"x","y").add(e.divide(2)));this.translate(i)}),i},symbol:function(e,t,n,r){return new E(i(e,t,n,r),(!0))},defs:i,use:function(n){var r=(e(n,"href",!0)||"").substring(1),i=D[r],a=t(n,"x","y");return i?i instanceof E?i.place(a):i.clone().translate(a):null},circle:function(n){return new S.Circle(t(n,"cx","cy"),e(n,"r"))},ellipse:function(e){return new S.Ellipse({center:t(e,"cx","cy"),radius:n(e,"rx","ry")})},rect:function(e){var r=t(e,"x","y"),i=n(e,"width","height"),a=n(e,"rx","ry");return new S.Rectangle(new y(r,i),a)},line:function(e){return new A.Line(t(e,"x1","y1"),t(e,"x2","y2"))},text:function(e){var n=new F(t(e,"x","y").add(t(e,"dx","dy")));return n.setContent(e.textContent.trim()||""),n}},N=s.set(s.each(ie,function(e){this[e.attribute]=function(t,n){if(t[e.set](r(n,e.type,e.fromSVG)),"color"===e.type&&t instanceof S){var i=t[e.get]();i&&i.transform((new b).translate(t.getPosition(!0).negate()))}}},{}),{id:function(e,t){D[t]=e,e.setName&&e.setName(t)},"clip-path":function(e,t){var n=v(t);if(n){if(n=n.clone(),n.setClipMask(!0),!(e instanceof k))return new k(n,e);e.insertChild(0,n)}},gradientTransform:h,transform:h,"fill-opacity":d,"stroke-opacity":d,visibility:function(e,t){e.setVisible("visible"===t)},display:function(e,t){e.setVisible(null!==t)},"stop-color":function(e,t){e.setColor&&e.setColor(t)},"stop-opacity":function(e,t){e._color&&e._color.setAlpha(parseFloat(t))},offset:function(e,t){var n=t.match(/(.*)%$/);e.setRampPoint(n?n[1]/100:parseFloat(t))},viewBox:function(e,t,i,a,o){var s=new y(r(t,"array")),l=n(a,"width","height",!0);if(e instanceof k){var u=l?s.getSize().divide(l):1,c=(new b).translate(s.getPoint()).scale(u);e.transform(c.inverted())}else if(e instanceof E){l&&s.setSize(l);var h="visible"!=p(a,"overflow",o),d=e._definition;h&&!s.contains(d.getBounds())&&(h=new S.Rectangle(s).transform(d._matrix),h.setClipMask(!0),d.addChild(h))}}}),D={};C.inject({importSVG:function(e,t){return this.addChild(w(e,t,!0))}}),x.inject({importSVG:function(e,t){return this.activate(),w(e,t,!0)}})},a=new(u.inject(s.exports,{enumerable:!0,Base:s,Numerical:d,Key:J})),r=a,i="function"==typeof r?r.call(t,n,t,e):r,!(i!==o&&(e.exports=i)),a}},function(e,t,n){"use strict";var r=n(2),i=r.createClass({displayName:"SectionHeader",render:function(){return r.createElement("h2",{id:this.props.name,"data-num":this.props.number},r.createElement("a",{href:"#"+this.props.name},this.props.title))},componentDidMount:function(){var e=window.location.hash;e&&(window.location=window.location.hash)}});e.exports=i},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:"So what makes a Bézier Curve?"}},setup:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();e.setCurve(t),e.step=25},draw:function(e,t){var n,r,i,a,o,s,l,u,c=e.getPanelWidth(),h=t.points,d=h[0],p=h[1],f=h[2],m={x:0,y:0};for(e.reset(),e.setColor("black"),e.setFill("black"),e.drawSkeleton(t,m),e.text("First linear interpolation at "+e.step+"% steps",{x:5,y:15},m),m.x+=c,e.drawLine({x:0,y:0},{x:0,y:this.dim},m),e.drawSkeleton(t,m),e.text("Second interpolation at "+e.step+"% steps",{x:5,y:15},m),m.x+=c,e.drawLine({x:0,y:0},{x:0,y:this.dim},m),e.drawSkeleton(t,m),e.text("Curve points generated this way",{x:5,y:15},m),e.setColor("lightgrey"),a=1,s=20,u;a<s;a++)l=a/s,u=t.get(l),e.drawCircle(u,2,m);for(o=3*e.step;o>0;o-=e.step)a=o/100,a>1||(e.setRandomColor(),n={x:d.x+a*(p.x-d.x),y:d.y+a*(p.y-d.y)},r={x:p.x+a*(f.x-p.x),y:p.y+a*(f.y-p.y)},i={x:n.x+a*(r.x-n.x),y:n.y+a*(r.y-n.y)},m={x:0,y:0},e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(d,n,m),e.drawLine(p,r,m),e.setWeight(1),m.x+=c,e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(n,i,m),e.setWeight(1),e.drawCircle(i,3,m),m.x+=c,e.drawCircle(i,3,m),e.text(o+"%, or t = "+e.utils.round(a,2),{x:i.x+10+m.x,y:i.y+10+m.y}))},values:{38:1,40:-1},onKeyDown:function(e,t){var n=this.values[e.keyCode];n&&(e.preventDefault(),t.step+=n,t.step<1&&(t.step=1))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Playing with the points for curves may have given you a feel for how Bézier curves behave, 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/75bb049d813d8ee084b076531823f2109cc1660f.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 up and down arrow keys to increase or decrease the interpolation ratio, 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 ratios taken together— form our Bézier curve:"),r.createElement(i,{title:"Linear Interpolation leading to Bézier curves",setup:this.setup,draw:this.draw,onKeyDown:this.onKeyDown}),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=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=n(226),s=r.createClass({displayName:"Explanation",statics:{keyHandlingOptions:{propName:"step",values:{38:.1,40:-.1},controller:function(e){e.step<.1&&(e.step=.1)}}},getDefaultProps:function(){return{title:"The mathematics of Bézier curves"}},setup:function(e){e.step=5},draw:function(e,t){var n=e.getPanelWidth(),r=n,i=n,a=r/2,o=i/2,s=a/2,l=o/2;e.reset(),e.setColor("black"),e.drawLine({x:0,y:o},{x:r,y:o}),e.drawLine({x:a,y:0},{x:a,y:i});for(var u,c={x:a,y:o},h=0;h<=e.step;h+=.1){u={x:s*Math.cos(h),y:l*Math.sin(h)},e.drawPoint(u,c);var d=h%1;(d<.05||d>.95)&&(e.text("t = "+Math.round(h),{x:c.x+1.25*s*Math.cos(h)-10,y:c.y+1.25*l*Math.sin(h)+5}),e.drawCircle(u,2,c))}},render:function(){return r.createElement("section",null,r.createElement(a,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/785e792c343b71d4e674ac94d8800940b30917ac.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/0dfe7562b43441e72201ff4cdd2e8b6e2e3ecb2d.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/ed6f533530199d1e99b3319ba137c1327b0459c0.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/ea632ea75d6a2aeb6fe69c07feb6e76f81884746.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 (use your up and down arrow keys to change the plot end value):"),r.createElement(i,{preset:"empty",title:"A (partial) circle: x=sin(t), y=cos(t)","static":!0,setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),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/3e8b26cf8833db7089d65e9c6b3953a3140bb19f.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/24e915ab4c69b85951f1ea9018b0ece9e52a10dd.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/448d10d21afd49135055cf685fedf6c494984b53.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/87c7f5294b902def4ea56e8f6cf24265a37143b6.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/d79bf595a0911c17e2ac86d8806a0a8ab6ba7dfe.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 ...=<value> 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<n; k++):","\n","    sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)","\n","  return sum"),r.createElement("p",null,"I say we could, because we're not going to: the factorial function is ",r.createElement("em",null,"incredibly"),'expensive. And, as we can see from the above explanation, we can actually create Pascal\'s triangle quite easily without it: just start at [1], then [1,1], then [1,2,1], then [1,3,3,1], and so on, with each next row fitting 1 more number than the previous row, starting and ending with "1", with all the numbers in between being the sum of the previous row\'s elements on either side "above" the one we\'re computing.'),r.createElement("p",null,"We can generate this as a list of lists lightning fast, and then never have to compute the binomial terms because we have a lookup table:"),r.createElement("pre",null,"lut = [      [1],           // n=0","\n","            [1,1],          // n=1","\n","           [1,2,1],         // n=2","\n","          [1,3,3,1],        // n=3","\n","         [1,4,6,4,1],       // n=4","\n","        [1,5,10,10,5,1],    // n=5","\n","       [1,6,15,20,15,6,1]]  // n=6","\n","\n","binomial(n,k):","\n","  while(n >= lut.length):","\n","    s = lut.length","\n","    nextRow = new array(size=s+1)","\n","    nextRow[0] = 1","\n","    for(i=1, prev=s-1; i&ltprev; i++):","\n","      nextRow[i] = lut[prev][i-1] + lut[prev][i]","\n","    nextRow[s] = 1","\n","    lut.add(nextRow)","\n","  return lut[n][k]"),r.createElement("p",null,"So what's going on here? First, we declare a lookup table with a size that's reasonably large enough to accommodate most lookups. Then, we declare a function to get us the values we need, and we make sure that if an n/k pair is requested that isn't in the LUT yet, we expand it first. Our basis function now looks like this:"),r.createElement("pre",null,"function Bezier(n,t):","\n","  sum = 0","\n","  for(k=0; k<=n; k++):","\n","    sum += binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum"),r.createElement("p",null,"Perfect. Of course, we can optimize further. For most computer graphics purposes, we don't need arbitrary curves. We need quadratic and  cubic curves (this primer actually does do arbitrary curves, so you'll find code similar to shown here), which means we can drastically simplify the code:"),r.createElement("pre",null,"function Bezier(2,t):","\n","  t2 = t * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  return mt2 + 2*mt*t + t2","\n","\n","function Bezier(3,t):","\n","  t2 = t * t","\n","  t3 = t2 * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  mt3 = mt2 * mt","\n","  return mt3 + 3*mt2*t + 3*mt*t2 + t3"),r.createElement("p",null,"And now we know how to program the basis function. Exellent.")),r.createElement("p",null,"So, now we know what the base function(s) look(s) like, time to add in the magic that makes Bézier curves so special: control points."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=n(2),a=n(227);e.exports=function(e){var t=e.keyHandlingOptions,n=t.propName||"",o=t.values||{},s=t.controller||a,l=e.getDefaultProps,u="wrappedComponent";return i.createClass({values:o,getDefaultProps:l,onKeyDown:function(e,t){var r=this.values[e.keyCode];r&&(e.preventDefault(),"function"==typeof r?r(t):(t[n]+=r,s(t)))},getComponent:function(){var e=this.refs[u];return e.getComponent?e.getComponent():e},render:function(){return i.createElement(e,r({},this.props,{onKeyDown:this.onKeyDown,ref:u}))}})}},function(e,t){e.exports=function(){}},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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 i={x:r.x-5,y:n},a={x:r.x+5,y:t};e.drawRect(i,a),e.setColor("black")},drawLerpPoint:function(e,t,n,r,i){i.y=n+t*r,e.drawCircle(i,3),e.setFill("black"),e.text((1e4*t|0)/100+"%",{x:i.x+10,y:i.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 i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,2*(1-a)*a,n,r,i),this.drawLerpPoint(e,a*a,n,r,i)}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 i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,3*(1-a)*(1-a)*a,n,r,i),
+this.drawLerpPoint(e,3*(1-a)*a*a,n,r,i),this.drawLerpPoint(e,a*a*a,n,r,i)}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 i,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)for(this.drawLerpBox(e,t,n,o),i=0;i<=15;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(i=0;i<=15;i++){var u=!1,c=!1;0===i&&(u="first term",c={x:n+5,y:r}),15===i&&(u="last term",c={x:t-3.5*n,y:r}),this.drawFunction(e,u,c,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(a,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(i,{inline:!0,preset:"simple",title:"Quadratic interpolations",draw:this.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:this.drawCubicLerp}),r.createElement(i,{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/b98618f8061e9e58289abccc06a624a14561d40f.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/853858526831a7ef3eb170efe49de397bb4913a1.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(i,{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<n; k++):","\n","    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum"),r.createElement("p",null,"And for the extremely optimized versions:"),r.createElement("pre",null,"function Bezier(2,t,w[]):","\n","  t2 = t * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2","\n","\n","function Bezier(3,t,w[]):","\n","  t2 = t * t","\n","  t3 = t2 * t","\n","  mt = 1-t","\n","  mt2 = mt * mt","\n","  mt3 = mt2 * mt","\n","  return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:"The Bézier interval [0,1]"}},setupQuadratic:function(e){var t=new e.Bezier(70,155,20,110,100,75);e.setCurve(t)},setupCubic:function(e){var t=new e.Bezier(60,105,75,30,215,115,140,160);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("lightgrey");var n,r,i=.05,a=-10,o=t.get(a-i);for(n=a;n<=i;n+=i)r=t.get(n),e.drawLine(o,r),o=r;o=t.get(1);var s=10;for(n=1+i;n<=s;n+=i)r=t.get(n),e.drawLine(o,r),o=r},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from ",r.createElement("i",null,"t=0")," to ",r.createElement("i",null,"t=1"),". Why that particular interval?"),r.createElement("p",null,'It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have a value that is a mixture of two other values, then the general formula for this is:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7f5ebb8489a8d04beb28f47c8aac2632b78ae764.svg",style:{width:"14.99985rem",height:"0.9rem"}})),r.createElement("p",null,"The obvious start and end values here need to be ",r.createElement("i",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("i",null,"a=0, b=1"),', so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don\'t want "a" and "b" to be independent: if they are, then we could just pick whatever values we like, and end up with a mixed value that is, for example, 100% value 1 ',r.createElement("strong",null,"and")," 100% value 2. In principle that's fine, but for Bézier curves we always want mixed values ",r.createElement("em",null,"between"),' the start and end point, so we need to make sure we can never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And that\'s easy:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d326c8f323ccd2da00d998b533ac26a1c04fcfba.svg",style:{width:"14.774849999999999rem",height:"1.125rem"}})),r.createElement("p",null,"With this we can guarantee that we never sum above 100%. By restricting ",r.createElement("i",null,"a")," to values in the interval [0,1], we will always be somewhere between our two values (inclusively), and we will always sum to a 100% mix."),r.createElement("p",null,'But... what if we use this form, used in the assumption that we will only ever use values between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong? Well... not really, but we get to "see more".'),r.createElement("p",null,'In the case of Bézier curves, extending the interval simply makes our curve "keep going". Bézier curves are simply segments on some polynomial curve, so if we pick a wider interval we simply get to see more of the curve. So what do they look like?'),r.createElement("p",null,'The following two graphics show you Bézier curves rendered "the usual way", as well as the curves they "lie on" if we were to extend the ',r.createElement("i",null,"t"),' values much further. As you can see, there\'s a lot more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve points around.'),r.createElement(i,{preset:"simple",title:"Quadratic infinite interval Bézier curve",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"In fact, there are curves used in graphics design and computer modelling that do the opposite of Bézier curves, where rather than fixing the interval, and giving you free coordinates, they fix the coordinates, but give you freedom over the interval. A great example of this is the ",r.createElement("a",{href:"http://levien.com/phd/phd.html"},'"Spiro" curve'),", which is a curve based on part of a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Euler_spiral"},"Cornu Spiral, also known as Euler's Spiral"),". It's a very aesthetically pleasing curve and you'll find it in quite a few graphics packages like ",r.createElement("a",{href:"https://fontforge.github.io"},"FontForge")," and ",r.createElement("a",{href:"https://inkscape.org"},"Inkscape"),", having even been used in font design (such as for the Inconsolata font)."))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(223),a=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:"Bézier curvatures as matrix operations"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"We can also represent Bézier as matrix operations, by expressing the Bézier formula as a polynomial basis function, the weight matrix, and the actual coordinates as matrix. Let's look at what this means for the cubic curve :"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d961171d6d1dfc22bb1756901e79102147914360.svg",style:{width:"31.12515rem",height:"1.20015rem"}})),r.createElement("p",null,"Disregarding our actual coordinates for a moment, we have:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f925c339011e6c38e47b9c3a571e02fca80eb5c3.svg",style:{width:"23.475150000000003rem",height:"1.20015rem"}})),r.createElement("p",null,"We can write this as a sum of four expressions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/30d76165668bf15f62986503bea100f39c5b9fec.svg",style:{width:"10.42515rem",height:"5.8500000000000005rem"}})),r.createElement("p",null,"And we can expand these expressions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7ca5abe1124ba1e51b7f12e0469cb4b1407593b8.svg",style:{width:"27.82485rem",height:"5.8500000000000005rem"}})),r.createElement("p",null,"Furthermore, we can make all the 1 and 0 factors explicit:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bccbb94942e3ff79579e4719106f4701c157727e.svg",style:{width:"15.67485rem",height:"5.625rem"}})),r.createElement("p",null,"And ",r.createElement("em",null,"that"),", we can view as a series of four matrix operations:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d5f85d80fbbc62e1e8d58621b76f3d0224876b62.svg",style:{width:"45.225rem",height:"5.47515rem"}})),r.createElement("p",null,"If we compact this into a single matrix operation, we get:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7140be48f45b2e7190fa8dffef5c05c47c038ab0.svg",style:{width:"16.875rem",height:"5.47515rem"}})),r.createElement("p",null,"This kind of polynomial basis representation is generally written with the bases in increasing order, which means we need to flip our ",r.createElement("em",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4e1849950a5c13f5135aa3412e0ee634cdc67301.svg",style:{width:"16.875rem",height:"5.47515rem"}})),r.createElement("p",null,"And then finally, we can add in our original coordinates as a single third matrix:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5910e25a46d9e86ab34513017f1274628a40e5a7.svg",style:{width:"23.925150000000002rem",height:"5.47515rem"}})),r.createElement("p",null,"We can perform the same trick for the quadratic curve, in which case we end up with:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}})),r.createElement("p",null,"If we plug in a ",r.createElement("em",null,"t")," value, and then multiply the matrices, we will get exactly the same values as when we evaluate the original polynomial function, or as when we evaluate the curve using progessive linear interpolation."),r.createElement("p",null,r.createElement("strong",null,"So: why would we bother with matrices?")," Matrix representations allow us to discover things about functions that would otherwise be hard to tell. It turns out that the curves form ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Triangular_matrix"},"triangular matrices"),", and they have a determinant equal to the product of the actual coordinates we use for our curve. It's also invertible, which means there's",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Invertible_matrix#The_invertible_matrix_theorem"},"a ton of properties")," that are all satisfied. Of course, the main question is: \"Why is this useful to us, now?\", and the answer to that is that it's not immediately useful, but you'll be seeing some instances where certain curve properties can be either computed via function manipulation, or via clever use of matrices, and sometimes the matrix approach can be (drastically) faster."),r.createElement("p",null,"So for now, just remember that we can represent curves this way, and let's move on."))}});e.exports=a},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"deCasteljau",getDefaultProps:function(){return{title:"de Casteljau's algorithm"}},setup:function(e){var t=[{x:90,y:110},{x:25,y:40},{x:230,y:40},{x:150,y:240}];e.setCurve(new e.Bezier(t))},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.hover){e.setColor("rgb(200,100,100)");for(var n=e.getPanelWidth(),r=e.hover.x/n,i=e.drawHull(t,r),a=4;a<=8;a++)e.drawCircle(i[a],3);var o=t.get(r);e.drawCircle(o,5),e.setFill("black"),e.drawCircle(o,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(a,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; i<newpoints.length; i++):","\n","      newpoints[i] = (1-t) * points[i] + t * points[i+1]","\n","    drawCurve(newpoints, t)"),r.createElement("p",null,"And done, that's the algorithm implemented. Except usually you don't get the luxury of overloading the \"+\" operator, so let's also give the code for when you need to work with",r.createElement("i",null,"x")," and ",r.createElement("i",null,"y")," values:"),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; i<newpoints.length; i++):","\n","      x = (1-t) * points[i].x + t * points[i+1].x","\n","      y = (1-t) * points[i].y + t * points[i+1].y","\n","      newpoints[i] = new point(x,y)","\n","    drawCurve(newpoints, t)"),r.createElement("p",null,"So what does this do? This draws a point, if the passed list of points is only 1 point long. Otherwise it will create a new list of points that sit at the ",r.createElement("i",null,"t"),' ratios (i.e. the "markers" outlined in the above algorithm), and then call the draw function for this new list.')),r.createElement("p",null,"To see this in action, mouse-over the following sketch. Moving the mouse changes which curve point is explicitly evaluated using de Casteljau's algorithm, moving the cursor left-to-right (or, of course, right-to-left), shows you how a curve is generated using this approach."),r.createElement(i,{preset:"simple",title:"Traversing a curve using de Casteljau's algorithm",setup:this.setup,draw:this.draw}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=n(226),s=r.createClass({displayName:"Flattening",statics:{keyHandlingOptions:{propName:"steps",values:{38:1,40:-1},controller:function(e){e.steps<1&&(e.steps=1)}}},getDefaultProps:function(){return{title:"Simplified drawing"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t),e.steps=3},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.steps=5},drawFlattened:function(e,t){e.reset(),e.setColor("#DDD"),e.drawSkeleton(t),e.setColor("#DDD"),e.drawCurve(t);for(var n,r=1/e.steps,i=t.points[0],a=r;a<1+r;a+=r)n=t.get(Math.min(a,1)),e.setColor("red"),e.drawLine(i,n),i=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(a,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(i,{preset:"twopanel",title:"Flattening a quadratic curve",setup:this.setupQuadratic,draw:this.drawFlattened,onKeyDown:this.onKeyDown}),r.createElement(i,{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=o(s)},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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,i=t.get(.5),a=t.split(r);e.drawCurve(a.left),e.drawCurve(a.right),e.setColor("red"),e.drawCircle(i,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(i,4),n.x-=20,n.y-=20,e.drawSkeleton(a.left,n,!0),e.drawCurve(a.left,n),n.x+=40,n.y+=40,e.drawSkeleton(a.right,n,!0),e.drawCurve(a.right,n)},drawAnimated:function(e,t){e.setPanelCount(3),e.reset();var n=e.getFrame(),r=5*e.getPlayInterval(),i=n%r/r,a=n%(2*r)<r;a?i%=1:i=1-i%1;var o={x:0,y:0};e.setColor("lightblue"),e.drawHull(t,i),e.drawSkeleton(t),e.drawCurve(t);var s=t.get(i);e.drawCircle(s,4),e.setColor("black"),o.x+=e.getPanelWidth(),e.drawLine({x:0,y:0},{x:0,y:e.getPanelHeight()},o);var l=t.split(i);e.setColor("lightgrey"),e.drawCurve(t,o),e.drawHull(t,i,o),e.setColor("black"),e.drawCurve(l.left,o),e.drawPoints(l.left.points,o),e.setFill("black"),e.text("Left side of curve split at t = "+(100*i|0)/100,{x:10+o.x,y:15+o.y}),o.x+=e.getPanelWidth(),e.drawLine({x:0,y:0},{x:0,y:e.getPanelHeight()},o),e.setColor("lightgrey"),e.drawCurve(t,o),e.drawHull(t,i,o),e.setColor("black"),e.drawCurve(l.right,o),e.drawPoints(l.right.points,o),e.setFill("black"),e.text("Right side of curve split at t = "+(100*i|0)/100,{x:10+o.x,y:15+o.y})},togglePlay:function(e,t){t.playing?t.pause():t.play()},render:function(){return r.createElement("section",null,r.createElement(a,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(i,{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; i<newpoints.length; i++):","\n","      if(i==0):","\n","        left.add(points[i])","\n","      if(i==newpoints.length-1):","\n","        right.add(points[i+1])","\n","      newpoints[i] = (1-t) * points[i] + t * points[i+1]","\n","    drawCurve(newpoints, t)"),r.createElement("p",null,"After running this function for some value ",r.createElement("i",null,"t"),", the ",r.createElement("i",null,"left")," and ",r.createElement("i",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("i",null,"t"),' value, the other on the "right", of the same order as the original curve, and overlayed exactly on the original curve.')),r.createElement("p",null,"This is best illustrated with an animated graphic (click to play/pause):"),r.createElement(i,{preset:"threepanel",title:"Bézier curve splitting",setup:this.setupCubic,draw:this.drawAnimated,onClick:this.togglePlay}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(223),a=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:"Splitting curves using matrices"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Another way to split curves is to exploit the matrix representation of a Bézier curve. In ",r.createElement("a",{href:"#matrix"},"the section on matrices")," we saw that we can represent curves as matrix multiplications. Specifically, we saw these two forms for the quadratic, and cubic curves, respectively (using the reversed Bézier coefficients vector for legibility):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/01ea4f74c4785a19bedf18034b51510c5ce2ad8f.svg",style:{width:"23.925150000000002rem",height:"5.47515rem"}})),r.createElement("p",null,"Let's say we want to split the curve at some point ",r.createElement("em",null,"t = z"),', forming two new (obviously smaller) Bézier curves. To find the coordinates for these two Bézier curves, we can use the matrix representation and some linear algebra. First, we split out the the actual "point on the curve" information as a new matrix multiplication:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d487e1e0181420995be49b25bc6595c9d0360435.svg",style:{width:"60.82515rem",height:"5.54985rem"}})),r.createElement("p",null,"If we could compact these matrices back to a form ",r.createElement("strong",null,"[t values] · [bezier matrix] · [column matrix]"),", with the first two staying the same, then that column matrix on the right would be the coordinates of a new Bézier curve that describes the first segment, from ",r.createElement("em",null,"t = 0")," to ",r.createElement("em",null,"t = z"),". As it turns out, we can do this quite easily, by exploiting some simple rules of linear algebra (and if you don't care about the derivations, just skip to the end of the box for the results!)."),r.createElement("div",{className:"note"},r.createElement("h2",null,"Deriving new hull coordinates"),r.createElement("p",null,"Deriving the two segments upon splitting a curve takes a few steps, and the higher the curve order, the more work it is, so let's look at the quadratic curve first:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc85dbb857222546bd30ea559a452fe9f36c8090.svg",style:{width:"17.69985rem",height:"4.05rem"}})),r.createElement("p",null,"We do this, because [",r.createElement("em",null,"M · M",r.createElement("sup",null,"-1")),"] is the identity matrix (a bit like multiplying something by x/x in calculus. It doesn't do anything to the function, but it does allow you to rewrite it to something that may be easier to work with, or can be broken up differently). Adding that as matrix multiplication has no effect on the total formula, but it does allow us to change the matrix sequence [",r.createElement("em",null,"something · M"),"] to a sequence [",r.createElement("em",null,"M · something"),"], and that makes a world of difference: if we know what [",r.createElement("em",null,"M",r.createElement("sup",null,"-1")," · Z · M"),"] is, we can apply that to our coordinates, and be left with a proper matrix representation of a quadratic Bézier curve (which is [",r.createElement("em",null,"T · M · P"),"]), with a new set of coordinates that represent the curve from",r.createElement("em",null,"t = 0")," to ",r.createElement("em",null,"t = z"),". So let's get computing:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1dbabc115128a85389cbbcc75fbced48e5a2ca25.svg",style:{width:"45.9rem",height:"4.35015rem"}})),r.createElement("p",null,"Excellent! Now we can form our new quadratic curve:"),r.createElement("p",null,r.createElement("img",{
 className:"LaTeX SVG",src:"images/latex/2972cd74dab6560ea68189c2e53f247287cbefae.svg",style:{width:"30.45015rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/39b64e07c41ef6d734064f017036f6391321e924.svg",style:{width:"35.17515rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d615960f862664749c54858520c364efeb4a4c5a.svg",style:{width:"34.79985rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,r.createElement("strong",null,r.createElement("em",null,"Brilliant")),": if we want a subcurve from ",r.createElement("em",null,"t = 0"),"to ",r.createElement("em",null,"t = z"),", we can keep the first coordinate the same (which makes sense), our control point becomes a z-ratio mixture of the original control point and the start point, and the new end point is a mixture that looks oddly similar to a bernstein polynomial of degree two, except it uses (z-1) rather than (1-z)... These new coordinates are actually really easy to compute directly!"),r.createElement("p",null,"Of course, that's only one of the two curves. Getting the section from ",r.createElement("em",null,"t = z"),"to ",r.createElement("em",null,"t = 1")," requires doing this again. We first observe what what we just did is actually evaluate the general interval [0,",r.createElement("em",null,"z"),"], which we wrote down simplified becuase of that zero, but we actually evaluated this:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a51e64df3cb31acf32d0ad5814c8c6cff41ae611.svg",style:{width:"27.45rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b50cdfed6656e681d5885a14a3af3e67efa4ccb.svg",style:{width:"23.99985rem",height:"4.05rem"}})),r.createElement("p",null,"If we want the interval [",r.createElement("em",null,"z"),",1], we will be evaluating this instead:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/eca8cfda9b7a3f0819ec38acc53f95af67bb26bb.svg",style:{width:"32.625rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e8c983a3efd47356c971fe46add4d0cdf103cced.svg",style:{width:"30.45015rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,"We're going to do the same trick, to turn ",r.createElement("em",null,"[something · M]")," into ",r.createElement("em",null,"[M · something]"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a28b6dcc1335de19a065b6a04d8bb45d86122bb7.svg",style:{width:"52.72515rem",height:"4.35015rem"}})),r.createElement("p",null,"So, our final second curve looks like:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5851c9191acb59456e3706a8f6f1a0f85e691eda.svg",style:{width:"30.74985rem",height:"3.97485rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0333e63f50b3d43067dc299280f70e9eb98711bb.svg",style:{width:"34.875rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/00a133860115d7a4db4ddf62781b5ae2bffef088.svg",style:{width:"34.79985rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,r.createElement("strong",null,r.createElement("em",null,"Nice")),": we see the same as before; can keep the last coordinate the same (which makes sense), our control point becomes a z-ratio mixture of the original control point and the end point, and the new start point is a mixture that looks oddly similar to a bernstein polynomial of degree two, except it uses (z-1) rather than (1-z). These new coordinates are ",r.createElement("em",null,"also"),"really easy to compute directly!")),r.createElement("p",null,"So, using linear algebra rather than de Casteljau's algorithm, we have determined that for any quadratic curve split at some value ",r.createElement("em",null,"t = z"),", we get two subcurves that are described as Bézier curves with simple-to-derive coordinates."),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5769f44aea3344c32c497a3a77d236f524222b95.svg",style:{width:"40.57515rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1fdde935dc357642358bdf5e632d6539c9d4debd.svg",style:{width:"40.275rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,"We can do the same for cubic curves. However, I'll spare you the actual derivation (don't let that stop you from writing that out yourself, though) and simply show you the resulting new coordinate sets:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/44db09290062827525a9b23cbaf91e65063d86d7.svg",style:{width:"58.87485rem",height:"5.70015rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d6b1abe72bac1b55d184f2c4254769404371d06f.svg",style:{width:"59.025150000000004rem",height:"5.70015rem"}})),r.createElement("p",null,"So, looking at our matrices, did we really need to compute the second segment matrix? No, we didn't. Actually having one segment's matrix means we implicitly have the other: push the values of each row in the matrix ",r.createElement("strong",null,r.createElement("em",null,"Q")),' to the right, with zeroes getting pushed off the right edge and appearing back on the left, and then flip the matrix vertically. Presto, you just "calculated" ',r.createElement("strong",null,r.createElement("em",null,"Q'")),"."),r.createElement("p",null,"Implementing curve splitting this way requires less recursion, and is just straight arithmetic with cached values, so can be cheaper on systems were recursion is expensive. If you're doing computation with devices that are good at matrix multiplication, chopping up a Bézier curve with this method will be a lot faster than applying de Casteljau."))}});e.exports=a},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=n(226),s=r.createClass({displayName:"Reordering",statics:{lower:function(e){var t=e.points,n=[],r=t.length;return t.forEach(function(e,i){if(!i)return n[i]=e;var a=i/r,o=1-a;n[i]={x:a*e.x+o*t[i-1].x,y:a*e.y+o*t[i-1].y}}),n.splice(r-1,1),n[r-2]=t[r-1],e.points=n,e},keyHandlingOptions:{values:{38:function(e){e.setCurve(e.curve.raise())},40:function(e){e.setCurve(s.lower(e.curve))}}}},getDefaultProps:function(){return{title:"Lowering and elevating curve order"}},getInitialState:function(){return{order:0}},setup:function(e){for(var t=[],n=e.getPanelWidth(),r=e.getPanelHeight(),i=0;i<10;i++)t.push({x:n/2+20*Math.random()+Math.cos(2*Math.PI*i/10)*(n/2-40),y:r/2+20*Math.random()+Math.sin(2*Math.PI*i/10)*(r/2-40)});var a=new e.Bezier(t);e.setCurve(a)},draw:function(e,t){e.reset();var n=t.points;this.setState({order:n.length});for(var r=n[0],i=0;i<=1;i+=.01){for(var a=JSON.parse(JSON.stringify(n));a.length>1;){for(var o=0;o<a.length-1;o++)a[o]={x:a[o].x+(a[o+1].x-a[o].x)*i,y:a[o].y+(a[o+1].y-a[o].y)*i};a.splice(a.length-1,1)}e.drawLine(r,a[0]),r=a[0]}r=n[0],e.setColor("black"),e.drawCircle(r,3),n.forEach(function(t){t!==r&&(e.setColor("#DDD"),e.drawLine(r,t),e.setColor("black"),e.drawCircle(t,3),r=t)})},getOrder:function(){var e=this.state.order;return e+=e%10===1&&11!==e?"st":e%10===2&&12!==e?"nd":e%10===3&&13!==e?"rd":"th"},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"One interesting property of Bézier curves is that an ",r.createElement("i",null,"n",r.createElement("sup",null,"th"))," order curve can always be perfectly represented by an ",r.createElement("i",null,"(n+1)",r.createElement("sup",null,"th"))," order curve, by giving the higher order curve specific control points."),r.createElement("p",null,'If we have a curve with three points, then we can create a four point curve that exactly reproduce the original curve as long as we give it the same start and end points, and for its two control points we pick "1/3',r.createElement("sup",null,"rd")," start + 2/3",r.createElement("sup",null,"rd"),' control" and "2/3',r.createElement("sup",null,"rd")," control + 1/3",r.createElement("sup",null,"rd"),' end", and now we have exactly the same curve as before, except represented as a cubic curve, rather than a quadratic curve.'),r.createElement("p",null,"The general rule for raising an ",r.createElement("i",null,"n",r.createElement("sup",null,"th"))," order curve to an ",r.createElement("i",null,"(n+1)",r.createElement("sup",null,"th")),"order curve is as follows (observing that the start and end weights are the same as the start and end weights for the old curve):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/339fbe6b94d4580c7be2a43b8c575188c6a2ce58.svg",style:{width:"52.875rem",height:"4.42485rem"}})),r.createElement("p",null,"However, this rule also has as direct consequence that you ",r.createElement("strong",null,"cannot")," generally safely lower a curve from ",r.createElement("i",null,"n",r.createElement("sup",null,"th"))," order to ",r.createElement("i",null,"(n-1)",r.createElement("sup",null,"th")),' order, because the control points cannot be "pulled apart" cleanly. We can try to, but the resulting curve will not be identical to the original, and may in fact look completely different.'),r.createElement("p",null,"We can apply this to a (semi) random curve, as is done in the following graphic. Select the sketch and press your up and down arrow keys to elevate or lower the curve order."),r.createElement(i,{preset:"simple",title:"A "+this.getOrder()+" order Bézier curve",setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"There is a good, if mathematical, explanation on the matrices necessary for optimal reduction over on ",r.createElement("a",{href:"http://www.sirver.net/blog/2011/08/23/degree-reduction-of-bezier-curves/"},"Sirver's Castle"),", which given time will find its way in a more direct description into this article."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(2),i=n(223),a=r.createClass({displayName:"Derivatives",getDefaultProps:function(){return{title:"Derivatives"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"There's a number of useful things that you can do with Bézier curves based on their derivative, and one of the more amusing observations about Bézier curves is that their derivatives are, in fact, also Bézier curves. In fact, the derivation of a Bézier curve is relatively straight forward, although we do need a bit of math. First, let's look at the derivative rule for Bézier curves, which is:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ff6d9fc6f1697ca0b1e599a4e8ce43f9bd1f17da.svg",style:{width:"23.09985rem",height:"3.15rem"}})),r.createElement("p",null,"which we can also write (observing that ",r.createElement("i",null,"b")," in this formula is the same as our ",r.createElement("i",null,"w")," weights, and that ",r.createElement("i",null,"n")," times a summation is the same as a summation where each term is multiplied by ",r.createElement("i",null,"n"),") as:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3437e732e8a61ec6badcfe292b6258f6ea6535c9.svg",style:{width:"23.85rem",height:"3.15rem"}})),r.createElement("p",null,"Or, in plain text: the derivative of an n",r.createElement("sup",null,"th")," degree Bézier curve is an (n-1)",r.createElement("sup",null,"th"),"degree Bézier curve, with one fewer term, and new weights w'",r.createElement("sub",null,"0"),"...w'",r.createElement("sub",null,"n-1")," derived from the original weights as n(w",r.createElement("sub",null,"i+1")," - w",r.createElement("sub",null,"i"),"), so for a 3rd degree curve, with four weights, the derivative has three new weights w'",r.createElement("sub",null,"0")," = 3(w",r.createElement("sub",null,"1"),"-w",r.createElement("sub",null,"0"),"), w'",r.createElement("sub",null,"1")," = 3(w",r.createElement("sub",null,"2"),"-w",r.createElement("sub",null,"1"),") and w'",r.createElement("sub",null,"2")," = 3(w",r.createElement("sub",null,"3"),"-w",r.createElement("sub",null,"2"),")."),r.createElement("div",{className:"note"},r.createElement("h3",null,'"Slow down, why is that true?"'),r.createElement("p",null,"Sometimes just being told \"this is the derivative\" is nice, but you might want to see why this is indeed the case. As such, let's have a look at the proof for this derivative. First off, the weights are independent of the full Bézier function, so the derivative involves only the derivative of the polynomial basis function. So, let's find that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f8148ecaac6af494a8bb96d2f96f7a96f85d9e0.svg",style:{width:"14.625rem",height:"2.32515rem"}})),r.createElement("p",null,"Applying the ",r.createElement("a",{href:"http://en.wikipedia.org/wiki/Product_rule"},"product")," and",r.createElement("a",{href:"http://en.wikipedia.org/wiki/Chain_rule"},"chain")," rules gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02ecde09cea052e99e92b062e70cd724467f0e38.svg",style:{width:"28.425150000000002rem",height:"1.27485rem"}})),r.createElement("p",null,"Which is hard to work with, so let's expand that properly:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c67d5c6165c04b4bba3e9c8f7b8362300153d00d.svg",style:{width:"24.075rem",height:"1.94985rem"}})),r.createElement("p",null,'Now, the trick is to turn this expression into something that has binomial coefficients again, so we want to end up with things that look like "x! over y!(x-y)!". If we can do that in a way that involves terms of ',r.createElement("i",null,"n-1")," and ",r.createElement("i",null,"k-1"),", we'll be on the right track."),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cf675f8434c96397a548f91aae8150d99d8587a2.svg",style:{width:"36.525150000000004rem",height:"6.60015rem"}})),r.createElement("p",null,"And that's the first part done: the two components inside the parentheses are actually regular, lower order Bezier expressions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/33bbfd279ee71b319a9a93598607c687b00636af.svg",style:{width:"37.42515rem",height:"3.6rem"}})),r.createElement("p",null,"Now to apply this to our weighted Bezier curves. We'll write out the plain curve formula that we saw earlier, and then work our way through to its derivative:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/88bc44a562fcdfb6b263970c252d149d7b473a39.svg",style:{width:"36.14985rem",height:"9.225rem"}})),r.createElement("p",null,"If we expand this (with some color to show how terms line up), and reorder the terms by increasing values for ",r.createElement("i",null,"k"),"we see the following:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/833a6e9be84cd27fdaff1a7a3757411f8a356c95.svg",style:{width:"20.62485rem",height:"8.850150000000001rem"}})),r.createElement("p",null,"Two of these terms fall way: the first term falls away because there is no -1",r.createElement("sup",null,"st"),' term in a summation. As such, it always contributes "nothing", so we can safely completely ignore it for the purpose of finding the derivative function. The other term is the very last term in this expansion: one involving ',r.createElement("i",null,"B",r.createElement("sub",null,"n-1,n")),". This term would have a binomial coefficient of [",r.createElement("i",null,"i")," choose ",r.createElement("i",null,"i+1"),'], which is a non-existent binomial coefficient. Again, this term would contribute "nothing", so we can ignore it, too. This means we\'re left with:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/eac65797eafbe2732babcfc335733cbdf363693a.svg",style:{width:"20.39985rem",height:"5.77485rem"}})),r.createElement("p",null,"And that's just a summation of lower order curves:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7cfbe72b898fcbf054564e8b0813acb0e5d7c26d.svg",style:{width:"48.15rem",height:"2.25rem"}})),r.createElement("p",null,"We can rewrite this as a normal summation, and we're done:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/418b48749012978b0f3e58cbb56c1049b977270e.svg",style:{width:"36.525150000000004rem",height:"3.67515rem"}}))),r.createElement("p",null,"Let's rewrite that in a form similar to our original formula, so we can see the difference. We will first list our original formula for Bézier curves, and then the derivative:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b98618f8061e9e58289abccc06a624a14561d40f.svg",style:{width:"23.70015rem",height:"3.90015rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/52947a49ac9e3a189ed56b89a018eff6288435f5.svg",style:{width:"36.45rem",height:"4.05rem"}})),r.createElement("p",null,"What are the differences? In terms of the actual Bézier curve, virtually nothing! We lowered the order (rather than ",r.createElement("i",null,"n"),", it's now ",r.createElement("i",null,"n-1"),"), but it's still the same Bézier function. The only real difference is in how the weights change when we derive the curve's function. If we have four points A, B, C, and D, then the derivative will have three points, the second derivative two, and the third derivative one:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6df1b35ac11dc089a02db4f6d04bc3fa17f03e39.svg",style:{width:"37.125rem",height:"5.99985rem"}})),r.createElement("p",null,"We can keep performing this trick for as long as we have more than one weight. Once we have one weight left, the next step will see ",r.createElement("i",null,"k = 0"),', and the result of our "Bézier function" summation is zero, because we\'re not adding anything at all. As such, a quadratic curve has no second derivative, a cubic curve has no third derivative, and generalized: an ',r.createElement("i",null,"n",r.createElement("sup",null,"th"))," order curve has ",r.createElement("i",null,"n-1")," (meaningful) derivatives, with any further derivative being zero."))}});e.exports=a},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:"Tangents and normals"}},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);var n,r,i,a,o,s,l=20;for(n=0;n<=10;n++)r=n/10,i=t.get(r),a=t.derivative(r),s=Math.sqrt(a.x*a.x+a.y*a.y),a={x:a.x/s,y:a.y/s},o=t.normal(r),e.setColor("blue"),e.drawLine(i,{x:i.x+a.x*l,y:i.y+a.y*l}),e.setColor("red"),e.drawLine(i,{x:i.x+o.x*l,y:i.y+o.y*l}),e.setColor("black"),e.drawCircle(i,3)},render:function(){return r.createElement("section",null,r.createElement(a,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/2271ae26977a681a1695d14ea8255564e716916e.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/3cb2c4f5806142e83c66e1312520d0783d15201c.svg",style:{width:"17.62515rem",height:"2.025rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/72826b8f5053c299dbb2082678191e3564bb50a6.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/6cb29c325e059e236343bdd448c149ecc6d8795f.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/d3932ac925ad9f238029d888dc5432f6678f6491.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/7297632eb150a8f5f37178612f71e5d0f2c367b1.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(i,{preset:"simple",title:"Quadratic Bézier tangents and normals",inline:!0,setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:this.setupCubic,draw:this.draw})))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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,i=t.points,a=e.getPanelWidth(),o=e.getPanelHeight(),s={x:a,y:0},l=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.x}});e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"x",0,a,s),s.x+=r,e.drawCurve(new e.Bezier(l),s),s.x+=a-r;var u=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.y}});e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"y",0,a,s),s.x+=r,e.drawCurve(new e.Bezier(u),s)},render:function(){return r.createElement("section",null,r.createElement(a,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(i,{preset:"simple",title:"Quadratic Bézier curve components",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve components",setup:this.setupCubic,draw:this.draw}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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,i=t.points,a=e.getPanelWidth(),o=e.getPanelHeight(),s={x:a,y:0},l=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.x}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"x",0,a,s),s.x+=r;var u=new e.Bezier(l);e.drawCurve(u,s),e.setColor("red"),u.extrema().y.forEach(function(t){var n=u.get(t);e.drawCircle(n,3,s)}),s.x+=a-r;var c=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.y}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"y",0,a,s),s.x+=r;var h=new e.Bezier(c);e.drawCurve(h,s),e.setColor("red"),h.extrema().y.forEach(function(t){var n=h.get(t);e.drawCircle(n,3,s)})},render:function(){return r.createElement("section",null,r.createElement(a,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/9929fd19d54366db382b7d453491d90f894352a7.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/d5882cc83b002196c8e701ad273ced103e2b4484.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/d904e86a3967e7e5bdba8a5f6b943a8fde3ad458.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/c638a85a950ffb535fbf2056958bed5f44be5067.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/076b74a0f2bcb43a3b2d39fdc52c58c6f89ce33a.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/a16a0da87e138b1307973397275c296eb475b1b1.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:"howtocode"},r.createElement("h3",null,"Implementing Cardano's algorithm for finding all real roots"),r.createElement("p",null,'The "real roots" part is fairly important, because while you cannot take a square, cube, etc. root of a negative number in the "real" number space (denoted with ℝ), this is perfectly fine in the ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Complex_number"},'"complex" number')," space (denoted with ℂ). And, as it so happens, Cardano is also attributed as the first mathematician in history to have made use of complex numbers in his calculations. For this very algorithm!"),r.createElement("pre",null,"// 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 real-cuberoots-only function:","\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("em",null,r.createElement("a",{href:"https://en.wikipedia.org/wiki/Isaac_Newton"},"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/b563256be7016370365935944308cf878cdbc29c.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(i,{preset:"simple",title:"Quadratic Bézier curve extremities",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve extremities",setup:this.setupCubic,draw:this.draw}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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.setColor("#00FF00"),e.drawbbox(t.bbox()),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},render:function(){return r.createElement("section",null,r.createElement(a,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(i,{preset:"simple",title:"Quadratic Bézier bounding box",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{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=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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,i=-Math.atan2(t.p2.y-r,t.p2.x-n),a=Math.cos,o=Math.sin,s=function(e){return{x:(e.x-n)*a(i)-(e.y-r)*o(i),y:(e.x-n)*o(i)+(e.y-r)*a(i)}};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]},i=this.align(n,r),a=new e.Bezier(i),o=e.getPanelWidth(),s=e.getPanelHeight(),l={x:o,y:0};e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:s},l),l.x+=o/4,l.y+=s/2,e.setColor("grey"),e.drawLine({x:0,y:-s/2},{x:0,y:s/2},l),e.drawLine({x:-o/4,y:0},{x:o,y:0},l),e.setFill("grey"),e.setColor("black"),e.drawSkeleton(a,l),e.drawCurve(a,l)},render:function(){return r.createElement("section",null,r.createElement(a,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/d253dc7ff011a8ae46f3351975f1d4beedd7a794.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/b3ec747086a146c1b2c682afea6b1eae016c9a7a.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/fd82fad845da25b074dff33bbc4aa563d5f367a7.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/b4d6e220358b2d00f0cf516f433fbe5ecb58f25d.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(i,{preset:"twopanel",title:"Aligning a quadratic curve",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:this.setupCubic,draw:this.draw}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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,i=-Math.atan2(t.p2.y-r,t.p2.x-n),a=Math.cos,o=Math.sin,s=function(e){return{x:(e.x-n)*a(i)-(e.y-r)*o(i),y:(e.x-n)*o(i)+(e.y-r)*a(i),a:i}};return e.map(s)},transpose:function(e,t,n){var r=n.x,i=n.y,a=Math.cos,o=Math.sin,s=[e.x.min,e.y.min,e.x.max,e.y.max];return[{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*a(t)-s*o(t)+r,y:n*o(t)+s*a(t)+i}})},draw:function(e,t){e.reset();var n=t.points,r={p1:n[0],p2:n[n.length-1]},i=this.align(n,r),a=-i[0].a,o=new e.Bezier(i),s=o.bbox(),l=this.transpose(s,a,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]),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},render:function(){return r.createElement("section",null,r.createElement(a,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(i,{preset:"twopanel",title:"Aligning a quadratic curve",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{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=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:"Curve inflections"}},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),t.inflections().forEach(function(n){e.drawCircle(t.get(n),5)})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now that we know how to align a curve, there's one more thing we can calculate: inflection points. Imagine we have a variable size circle that we can slide up against our curve. We place it against the curve and adjust its radius so that where it touches the curve, the curvatures of the curve and the circle are the same, and then we start to slide the circle along the curve - for quadratic curves, we can always do this without the circle behaviour oddly: we might have to change the radius of the circle as we slide it alone, but it'll always sit against the same side of the curve."),r.createElement("p",null,'But what happens with cubic curves? Imagine we have an S curve and we place our circle at the start of the curve, and start sliding it along. For a while we can simply adjust the radius and things will be fine, but once we get to the midpoint of that S, something odd happens: the circle "flips" from one side of the curve to the other side, in order for the curvatures to keep matching. This is called an inflection, and we can find out where those happen relatively easily.'),r.createElement("p",null,"What we need to do is solve a simple equation:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b039194e01b6081628efaf4aa169a4c50fa4aae4.svg",style:{width:"3.90015rem",height:"1.125rem"}})),r.createElement("p",null,"What we're saying here is that given the curvature function ",r.createElement("i",null,"C(t)"),", we want to know for which values of ",r.createElement("i",null,"t"),' this function is zero, meaning there is no "curvature", which will be exactly at the point between our circle being on one side of the curve, and our circle being on the other side of the curve. So what does ',r.createElement("i",null,"C(t)")," look like? Actually something that seems not too hard:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2488885d57cfc55b50b1c8ad808180e50337b411.svg",style:{width:"27.37485rem",height:"1.125rem"}})),r.createElement("p",null,"So the function ",r.createElement("i",null,"C(t)")," is wholly defined by the first and second derivative functions for the parametric dimensions of our curve. And as already shown, derivatives of Bézier curves are just simpler Bézier curves, with very easy to compute new coefficients, so this should be pretty easy."),r.createElement("p",null,"However as we've seen in the section on aligning, aligning lets us simplify things ",r.createElement("em",null,"a lot"),", by completely removing the contributions of the first coordinate from most mathematical evaluations, and removing the last ",r.createElement("i",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",r.createElement("i",null,"C(t) = 0")," for our curve, it'll be much easier to first axis-align the curve and ",r.createElement("em",null,"then")," evalutating the curvature function."),r.createElement("div",{className:"note"},r.createElement("h3",null,"Let's derive the full formula anyway"),r.createElement("p",null,"Of course, before we do our aligned check, let's see what happens if we compute the curvature function without axis-aligning. We start with the first and second derivatives, given our basis functions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/462664d174062cec5f7252d5912057210783776c.svg",style:{width:"41.250150000000005rem",height:"4.35015rem"}})),r.createElement("p",null,"And of course the same functions for ",r.createElement("i",null,"y"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9390cb8ff4f3a9471db41c033b415a0a90b69404.svg",style:{width:"27rem",height:"4.35015rem"}})),r.createElement("p",null,"Asking a computer to now compose the ",r.createElement("i",null,"C(t)")," function for us (and to expand it to a readable form of simple terms) gives us this rather overly complicated set of arithmetic expressions:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/92350c75ebfba40fcab87d091f1f46e4c01be720.svg",style:{width:"29.62485rem",height:"7.12485rem"}})),r.createElement("p",null,"That is... unwieldy. So, we note that there are a lot of terms that involve multiplications involving x1, y1, and y4, which would all disappear if we axis-align our curve, which is why aligning is a great idea.")),r.createElement("p",null,"Aligning our curve so that three of the eight coefficients become zero, we end up with the following simple term function for ",r.createElement("i",null,"C(t)"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f61c01094f0de8ca4c7f26a229f0206d54b13930.svg",style:{width:"37.49985rem",height:"1.35rem"}})),r.createElement("p",null,"That's a lot easier to work with: we see a fair number of terms that we can compute and then cache, giving us the following simplification:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/43ea1c1ea2c15f37d7390c16dfc77834b461777e.svg",style:{width:"33.75rem",height:"5.54985rem"}})),r.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",r.createElement("i",null,"C(t) = 0"),"; we use the quadratic formula:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/368099657b735b0d17becbbe7be915e88e8c04c5.svg",style:{width:"30.675150000000002rem",height:"4.1998500000000005rem"}})),r.createElement("p",null,"We can easily compute this value ",r.createElement("em",null,"if")," the descriminator isn't a negative number (because we only want real roots, not complex roots), and ",r.createElement("em",null,"if")," v",r.createElement("sub",null,"1")," is not zero, because divisions by zero are rather useless."),r.createElement("p",null,"Taking that into account, we compute ",r.createElement("i",null,"t"),", we disregard any ",r.createElement("i",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",r.createElement("i",null,"t")," value(s) our curve will inflect."),r.createElement(i,{title:"Finding cubic Bézier curve inflections",setup:this.setupCubic,draw:this.draw}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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(),e._map_loaded=!1},draw:function(e,t){var n=400,r=n,i=this.unit,a={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._map_loaded?e.image(e._map_image):setTimeout(function(){this.drawBase(e,t),this.draw(e,t)}.bind(this),100),e.drawLine({x:0,y:0},{x:0,y:r});var o=[{x:0,y:0},{x:0,y:i},{x:i,y:i},this.forwardTransform(t.points,i)],s=new e.Bezier(o);e.setColor("blue"),e.drawCurve(s,a),e.drawCircle(o[3],3,a)},forwardTransform:function(e,t){t=t||1;var n=e[0],r=e[1],i=e[2],a=e[3],o=-n.x+a.x-(-n.x+r.x)*(-n.y+a.y)/(-n.y+r.y),s=-n.x+i.x-(-n.x+r.x)*(-n.y+i.y)/(-n.y+r.y),l=t*o/s,u=t*(-n.y+a.y)/(-n.y+r.y),c=t-t*(-n.y+i.y)/(-n.y+r.y),h=c*o/s,d=u+h;return{x:l,y:d}},drawBase:function(e,t){e.reset();var n=400,r=n,i=this.unit=n/5,a={x:n/2,y:r/2};e.setSize(n,r),e.setColor("lightgrey");for(var o=0;o<n;o+=i/2)e.drawLine({x:o,y:0},{x:o,y:r});for(var s=0;s<r;s+=i/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:i},{x:n/2,y:i},a),e.setColor("black"),e.setFill("black"),e.drawCircle({x:0,y:0},4,a),e.text("(0,0)",{x:5+a.x,y:15+a.y}),e.drawCircle({x:0,y:i},4,a),e.text("(0,1)",{x:5+a.x,y:i+15+a.y}),e.drawCircle({x:i,y:i},4,a),e.text("(1,1)",{x:i+5+a.x,y:i+15+a.y}),e.setWeight(1.5),e.setColor("#FF0000"),e.setFill(e.getColor());var l=[],u=1,c=1;for(o=-10;o<=1;o+=.01)s=(-o*o+2*o+3)/4,o>-10&&(l.push({x:i*u,y:i*c}),e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a)),u=o,c=s;l.push({x:i*u,y:i*c}),e.text("Curve form has cusp →",{x:n/2-2*i,y:r/2+i/2.5}),e.setColor("#FF00FF"),e.setFill(e.getColor());var h=Math.sqrt;for(o=1;o>=0;o-=.005)l.push({x:i*u,y:i*c}),s=.5*(h(3)*h(4*o-o*o)-o),e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a),u=o,c=s;for(l.push({x:i*u,y:i*c}),e.text("← Curve forms a loop at t = 1",{x:n/2+i/4,y:r/2+i/1.5}),e.setColor("#3300FF"),e.setFill(e.getColor()),o=0;o>-n;o-=.01)l.push({x:i*u,y:i*c}),s=(-o*o+3*o)/3,e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a),u=o,c=s;l.push({x:i*u,y:i*c}),e.text("← Curve forms a loop at t = 0",{x:n/2-i+10,y:r/2-1.25*i}),e.setColor("transparent"),e.setFill("rgba(255,120,100,0.2)"),e.drawPath(l,a),l=[{x:-n/2,y:i},{x:n/2,y:i},{x:n/2,y:r},{x:-n/2,y:r}],e.setFill("rgba(0,200,0,0.2)"),e.drawPath(l,a),e.setColor("black"),e.setFill(e.getColor()),e.text("← Curve form has one inflection →",{x:n/2-i,y:r/2+1.75*i}),e.text("← Plain curve ↕",{x:n/2+i/2,y:r/6}),e.text("↕ Double inflection",{x:10,y:r/2-10}),e._map_image=e.toImage(),e._map_loaded=!0},render:function(){return r.createElement("section",null,r.createElement(a,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(i,{"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/ae5a63e86bb367e6266a394962387344d0a92b10.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/d389fcde05a773be99f84db5fc9ed7ef043bf406.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/d97181a9d0ada19862a0ff2cebb08bdee00868d7.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/cc3850bd6d6ab81fa414e81f54d4d4e53bcf69c8.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/031d2c01553905f6ab97a7e54543f66b9fd427f0.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/8e98c870c9d5b60bccf196d29e290f9de6657ce7.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/585fa88864a98008c15225bdbeb0eb26a4653dab.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/bf9c60b59e6247de3fece63638a8333bdcd068a4.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/af412fd7df7faf35973314095ec6bf1cb28a8e34.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/66e084e9ee396b8cc40de3d0df9c4658dcd10e14.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/d2dc58a4a6951ff27e5b83fb9be239e2fbe0f7ce.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/ebaea590e50dfce555e8ad2c63682fe9e6285f06.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(i,{preset:"simple",title:"A cubic curve mapped to canonical form",setup:this.setup,draw:this.draw}))}});e.exports=o},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=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*o(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(),i=this.generator;i.dheight=t,e.setColor("black"),e.drawLine({x:0,y:r/2},{x:n,y:r/2}),e.drawFunction(i,{x:0,y:r/2})},drawSlices:function(e,t){var n=e.getPanelWidth(),r=e.getPanelHeight(),i=n/s,a=0,o=t<=25?1:0;e.reset(),e.setColor("transparent"),e.setFill("rgba(150,150,255, 0.4)");for(var l,u,c,h=s/t,d=h/2;d<s+h/2;d+=h)l=this.generator(d),u={x:l.x-i*h/2+o,y:0},c={x:l.x+i*h/2-o,y:l.y*this.generator.scale},o||e.setFill("rgba(150,150,255,"+(.4+.3*Math.random())+")"),e.drawRect(u,c,{x:0,y:r/2}),a+=h*Math.abs(l.y*this.generator.scale);e.setFill("black");var p=(400*r/3|0)/100,f=(100*a|0)/100;e.text("Approximating with "+t+" strips (true area: "+p+"): "+f,{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(a,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/16e3f81dfc12c526ca53b477b2aa67ef7b56bfe2.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/8e2857c32b23969bca67b0ead318493a3e61dc4a.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",{href:"http://www.wolframalpha.com/input/?i=antiderivative+for+sqrt((2*(1-t)*t*B+%2b+t^2*C)'^2+%2b+(2*(1-t)*t*E)'^2)&incParTime=true"},"unwieldy computation"),", and we're simply not going to implement things that way. For cubic Bézier curves, things get even more fun, because there is no \"closed form\" solution, meaning that due to the way calculus works, there is no generic formula that allows you to calculate the arc length. Let me just repeat this, because it's fairly crucial: ",r.createElement("strong",null,r.createElement("em",null,'for cubic and higher Bézier curves, there is no way to solve this function if you want to use it "for all possible coordinates".'))),r.createElement("p",null,"Seriously: ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Abel%E2%80%93Ruffini_theorem"},"It cannot be done.")),r.createElement("p",null,"So we turn to numerical approaches again. The method we'll look at here is the",r.createElement("a",{href:"http://www.youtube.com/watch?v=unWguclP-Ds&feature=BFa&list=PLC8FC40C714F5E60F&index=1"},"Gauss quadrature"),". This approximation is a really neat trick, because for any ",r.createElement("i",null,"n",r.createElement("sup",null,"th"))," degree polynomial it finds approximated values for an integral really efficiently. Explaining this procedure in length is way beyond the scope of this page, so if you're interested in finding out why it works, I can recommend the University of South Florida video lecture on the procedure, linked in this very paragraph. The general solution we're looking for is the following:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e6a8d7d5f1742bb926c0c992d2b89c71090edbf4.svg",style:{width:"37.800000000000004rem",height:"5.175rem"}})),r.createElement("p",null,'In plain text: an integral function can always be treated as the sum of an (infinite) number of (infinitely thin) rectangular strips sitting "under" the function\'s plotted graph. To illustrate this idea, the following graph shows the integral for a sinoid function. The more strips we use (and of course the more we use, the thinner they get) the closer we get to the true area under the curve, and thus the better the approximation:'),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,"static":!0,preset:"empty",title:"A function's approximated integral",setup:this.setup,draw:this.drawCoarseIntegral}),r.createElement(i,{inline:!0,"static":!0,preset:"empty",title:"A better approximation",setup:this.setup,draw:this.drawFineIntegral}),r.createElement(i,{inline:!0,"static":!0,preset:"empty",title:"An even better approximation",setup:this.setup,draw:this.drawSuperFineIntegral})),r.createElement("p",null,'Now, infinitely many terms to sum and infinitely thin rectangles are not something that computers can work with, so instead we\'re going to approximate the infinite summation by using a sum of a finite number of "just thin" rectangular strips. As long as we use a high enough number of thin enough rectangular strips, this will give us an approximation that is pretty close to what the real value is.'),r.createElement("p",null,"So, the trick is to come up with useful rectangular strips. A naive way is to simply create ",r.createElement("i",null,"n")," strips, all with the same width, but there is a far better way using special values for ",r.createElement("i",null,"C")," and ",r.createElement("i",null,"f(t)")," depending on the value of ",r.createElement("i",null,"n"),", which indicates how many strips we'll use, and it's called the Legendre-Gauss quadrature."),r.createElement("p",null,"This approach uses strips that are ",r.createElement("em",null,"not")," spaced evenly, but instead spaces them in a special way that works remarkably well. If you look at the earlier sinoid graphic, you could imagine that we could probably get a result similar to the one with 99 strips if we used fewer strips, but spaced them so that the steeper the curve is, the thinner we make the strip, and conversely, the flatter the curve is (especially near the tops of the function), the wider we make the strip. That's akin to how the Legendre values work."),r.createElement("div",{className:"note"},r.createElement("p",null,"Note that one requirement for the approach we'll use is that the integral must run from -1 to 1. That's no good, because we're dealing with Bézier curves, and the length of a section of curve applies to values which run from 0 to \"some value smaller than or equal to 1\" (let's call that value ",r.createElement("i",null,"z"),"). Thankfully, we can quite easily transform any integral interval to any other integral interval, by shifting and scaling the inputs. Doing so, we get the following:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/631e6396082d9621472546b87c2e27065990d568.svg",style:{width:"24.15015rem",height:"5.92515rem"}})),r.createElement("p",null,"That may look a bit more complicated, but the fraction involving ",r.createElement("i",null,"z")," is a fixed number, so the summation, and the evaluation of the ",r.createElement("i",null,"f(t)")," values are still pretty simple."),r.createElement("p",null,"So, what do we need to perform this calculation? For one, we'll need an explicit formula for ",r.createElement("i",null,"f(t)"),", because that derivative notation is handy on paper, but not when we have to implement it. We'll also need to know what these ",r.createElement("i",null,"C",r.createElement("sub",null,"i"))," and ",r.createElement("i",null,"t",r.createElement("sub",null,"i"))," values should be. Luckily, that's less work because there are actually many tables available that give these values, for any ",r.createElement("i",null,"n"),", so if we want to approximate our integral with only two terms (which is a bit low, really) then ",r.createElement("a",{href:"legendre-gauss.html"},"these tables")," would tell us that for ",r.createElement("i",null,"n=2")," we must use the following values:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6dc4299695f03c27c362e7faf47ae4474794809e.svg",style:{width:"4.80015rem",height:"6.82515rem"}})),r.createElement("p",null,"Which means that in order for us to approximate the integral, we must plug these values into the approximate function, which gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe54606651e308caf83a65e53bc4d6104f8a4ee1.svg",style:{width:"34.95015rem",height:"3.15rem"}})),r.createElement("p",null,"We can program that pretty easily, provided we have that ",r.createElement("i",null,"f(t)")," available, which we do, as we know the full description for the Bézier curve functions B",r.createElement("sub",null,"x"),"(t) and B",r.createElement("sub",null,"y"),"(t).")),r.createElement("p",null,"If we use the Legendre-Gauss values for our ",r.createElement("i",null,"C")," values (thickness for each strip) and ",r.createElement("i",null,"t")," values (location of each strip), we can determine the approximate length of a Bézier curve by computing the Legendre-Gauss sum. The following graphic shows a cubic curve, with its computed lengths; Go ahead and change the curve, to see how its length changes. One thing worth trying is to see if you can make a straight line, and see if the length matches what you'd expect. What if you form a line with the control points on the outside, and the start/end points on the inside?"),r.createElement(i,{preset:"simple",title:"Arc length for a Bézier curve",setup:this.setupCurve,draw:this.drawCurve}))}});e.exports=l},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=n(226),s=r.createClass({displayName:"ArclengthApprox",statics:{keyHandlingOptions:{propName:"steps",values:{38:1,40:-1},controller:function(e){e.steps<1&&(e.steps=1)}}},getDefaultProps:function(){return{title:"Approximated arc length"}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t),e.steps=10},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.steps=16},draw:function(e,t){e.reset(),e.drawSkeleton(t);for(var n,r=t.getLUT(e.steps),i=1/e.steps,a=t.points[0],o=i;o<1+i;o+=i)n=t.get(Math.min(o,1)),e.setColor("red"),e.drawLine(a,n),a=n;for(var s,l,u,c=t.length(),h=0,d=0;d<r.length-1;d++)a=r[d],s=r[d+1],l=s.x-a.x,u=s.y-a.y,h+=Math.sqrt(l*l+u*u);h=(100*h|0)/100,c=(100*c|0)/100,e.text("Approximate length, "+e.steps+" steps: "+h+" (true: "+c+")",{x:10,y:15})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Sometimes, we don't actually need the precision of a true arc length, and we can get away with simply computing the approximate arc length instead. The by far fastest way to do this is to flatten the curve and then simply calculate the linear distance from point to point. This will come with an error, but this can be made arbitrarily small by increasing the segment count."),r.createElement("p",null,"If we combine the work done in the previous sections on curve flattening and arc length computation, we can implement these with minimal effort:"),r.createElement(i,{preset:"twopanel",title:"Approximate quadratic curve arc length",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"twopanel",title:"Approximate cubic curve arc length",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.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 may notice that the error in length is actually pretty significant, even if the percentage is fairly low: if the number of segments used yields an error of 0.1% or higher, the flattened curve already looks fairly obviously flattened. And of course, the longer the curve, the more significant the error will be."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=n(226),s=r.createClass({displayName:"Tracing",statics:{keyHandlingOptions:{propName:"steps",values:{38:1,40:-1},controller:function(e){e.steps<1&&(e.steps=1)}}},getDefaultProps:function(){return{title:"Tracing a curve at fixed distance intervals"}},setup:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.steps=8},generate:function(e,t,n,r,i){n.x+=r,n.y+=r;for(var a,o,s=t.length(),l=[{x:0,y:0,d:0}],u=1;u<=100;u++)a=u/100,o=t.split(a).left.length(),l.push({x:e.utils.map(a,0,1,0,i),y:e.utils.map(o,0,s,0,i),d:o,t:a});return l},draw:function(e,t,n){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var r=t.length(),i=e.getPanelWidth(),a=e.getPanelHeight(),o=20,s=i-2*o;return n.x+=i,e.drawLine({x:0,y:0},{x:0,y:a},n),e.drawAxes(o,"t",0,1,"d",0,r,n),this.generate(e,t,n,o,s)},plotOnly:function(e,t){e.setPanelCount(2);for(var n={x:0,y:0},r=this.draw(e,t,n),i=0;i<r.length-1;i++)e.drawLine(r[i],r[i+1],n)},drawColoured:function(e,t){e.setPanelCount(3);var n,r,i=e.getPanelWidth(),a=e.getPanelHeight(),o=20,s=i-2*o,l={x:0,y:0},u=t.length(),c=this.draw(e,t,l),h=e.steps,d=[];for(n=0;n<=h;n++){var p=n*u/h;for(r=0;r<c.length;r++)if(c[r].d>p){r--;break}r<0&&(r=0),r===c.length&&(r=c.length-1),d.push(c[r])}for(n=0;n<c.length-1;n++)e.drawLine(c[n],c[n+1],l);d.forEach(function(t){var n={x:e.utils.map(t.t,0,1,0,s),y:0},r={x:0,y:e.utils.map(t.d,0,u,0,s)};e.setColor("black"),e.drawCircle(n,3,l),e.drawCircle(r,3,l),e.setColor("lightgrey"),e.drawLine(n,{x:n.x,y:r.y},l),e.drawLine(r,{x:n.x,y:r.y},l)}),l={x:2*i,y:0},e.drawLine({x:0,y:0},{x:0,y:a},l);var f=0,m=["rgb(240,0,200)","rgb(0,40,200)"];e.setColor(m[f]);var g,v=t.get(c[0].t);for(e.drawCircle(t.get(0),4,l),n=1,g;n<c.length;n++)g=t.get(c[n].t),e.drawLine(v,g,l),d.indexOf(c[n])!==-1&&(e.setColor(m[++f%m.length]),e.drawCircle(g,4,l)),v=g},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Say you want to draw a curve with a dashed line, rather than a solid line, or you want to move something along the curve at fixed distance intervals over time, like a train along a track, and you want to use Bézier curves."),r.createElement("p",null,"Now you have a problem."),r.createElement("p",null,"The reason you have a problem is that Bézier curves are parametric functions with non-linear behaviour, whereas moving a train along a track is about as close to a practical example of linear behaviour as you can get. The problem we're faced with is that we can't just pick ",r.createElement("i",null,"t"),' values at some fixed interval and expect the Bézier functions to generate points that are spaced a fixed distance apart. In fact, let\'s look at the relation between "distance long a curve" and "',r.createElement("i",null,"t"),' value", by plotting them against one another.'),r.createElement("p",null,"The following graphic shows a particularly illustrative curve, and it's length-to-t plot. For linear traversal, this line needs to be straight, running from (0,0) to (length,1). This is, it's safe to say, not what we'll see, we'll see something wobbly instead. To make matters even worse, the length-to-",r.createElement("i",null,"t")," function is also of a much higher order than our curve is: while the curve we're using for this exercise is a cubic curve, which can switch concave/convex form once at best, the plot shows that the distance function along the curve is able to switch forms three times (to see this, try creating an S curve with the start/end close together, but the control points far apart)."),r.createElement(i,{preset:"twopanel",title:"The t-for-distance function",setup:this.setup,draw:this.plotOnly}),r.createElement("p",null,"We see a function that might be invertible, but we won't be able to do so, symbolically. You may remember from the section on arc length that we cannot actually compute the true arc length function as an expression of ",r.createElement("i",null,"t"),", which means we also can't compute the true inverted function that gives ",r.createElement("i",null,"t")," as an expression of length. So how do we fix this?"),r.createElement("p",null,"One way is to do what the graphic does: simply run through the curve, determine its",r.createElement("i",null,"t"),"-for-length values as a set of discrete values at some high resolution (the graphic uses 100 discrete points), and then use those as a basis for finding an appropriate ",r.createElement("i",null,"t")," value, given a distance along the curve. This works quite well, actually, and is fairly fast."),r.createElement("p",null,"We can use some colour to show the difference between distance-based and time based intervals: the following graph is similar to the previous one, except it segments the curve in terms of equal-distance intervals. This shows as regular colour intervals going down the graph, but the mapping to ",r.createElement("i",null,"t")," values is not linear, so there will be (highly) irregular intervals along the horizontal axis. It also shows the curve in an alternating colouring based on the t-for-distance values we find our LUT:"),r.createElement(i,{preset:"threepanel",title:"Fixed-interval coloring a curve",setup:this.setup,draw:this.drawColoured,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"Use your up and down arrow keys to increase or decrease the number of equidistant segments used to colour the curve."),r.createElement("p",null,'However, are there better ways? One such way is discussed in "',r.createElement("a",{href:"http://www.geometrictools.com/Documentation/MovingAlongCurveSpecifiedSpeed.pdf"},"Moving Along a Curve with Specified Speed"),"\" by David Eberly of Geometric Tools, LLC, but basically because we have no explicit length function (or rather, one we don't have to constantly compute for different intervals), you may simply be better off with a traditional lookup table (LUT)."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(2),i=n(215),a=n(223),o=Math.min,s=Math.max,l=r.createClass({displayName:"Intersections",getDefaultProps:function(){return{title:"Intersections"}},setupLines:function(e){var t=new e.Bezier([50,50,150,110]),n=new e.Bezier([50,250,170,170]);e.setCurve(t,n)},drawLineIntersection:function(e,t){e.reset();var n=e.utils.lli4,r=n(t[0].points[0],t[0].points[1],t[1].points[0],t[1].points[1]),i=0;t.forEach(function(t){if(e.drawSkeleton(t),e.setColor("black"),r){var n=t.points,a=o(n[0].x,n[1].x),l=o(n[0].y,n[1].y),u=s(n[0].x,n[1].x),c=s(n[0].y,n[1].y);a<=r.x&&l<=r.y&&u>=r.x&&c>=r.y&&(e.setColor("#00FF00"),i++)}e.drawCurve(t)}),r&&(e.setColor(i<2?"red":"#00FF00"),e.drawCircle(r,3))},setupQuadratic:function(e){var t=e.getDefaultQuadratic(),n=new e.Bezier([15,250,220,20]);e.setCurve(t,n)},setupCubic:function(e){var t=new e.Bezier([100,240,30,60,210,230,160,30]),n=new e.Bezier([25,260,230,20]);e.setCurve(t,n)},draw:function(e,t){e.reset(),t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var n=e.utils,r={p1:t[1].points[0],p2:t[1].points[1]},i=n.align(t[0].points,r),a=new e.Bezier(i),o=n.roots(a.points);o.forEach(function(n){var r=t[0].get(n);e.drawCircle(r,3),e.text("t = "+n,{x:r.x+5,y:r.y+10})})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Let's look at some more things we will want to do with Bézier curves. Almost immediately after figuring out how to get bounding boxes to work, people tend to run into the problem that even though the minimal bounding box (based on rotation) is tight, it's not sufficient to perform true collision detection. It's a good first step to make sure there ",r.createElement("em",null,"might")," be a collision (if there is no bounding box overlap, there can't be one), but in order to do real collision detection we need to know whether or not there's an intersection on the actual curve."),r.createElement("p",null,"We'll do this in steps, because it's a bit of a journey to get to curve/curve intersection checking. First, let's start simple, by implementing a line-line intersection checker. While we can solve this the traditional calculus way (determine the functions for both lines, then compute the intersection by equating them and solving for two unknowns), linear algebra actually offers a nicer solution."),r.createElement("h3",null,"Line-line intersections"),r.createElement("p",{id:"intersection_ll"},"if we have two line segments with two coordinates each, segments A-B and C-D, we can find the intersection of the lines these segments are an intervals on by linear algebra, using the procedure outlined in this ",r.createElement("a",{href:"http://www.topcoder.com/tc?module=Static&d1=tutorials&d2=geometry2#line_line_intersection"},"top coder")," article. Of course, we need to make sure that the intersection isn't just on the lines our line segments lie on, but also on our line segments themselves, so after we find the intersection we need to verify it lies without the bounds of our original line segments."),r.createElement("p",null),r.createElement("p",null,"The following graphic implements this intersection detection, showing a red point for an intersection on the lines our segments lie on (thus being a virtual intersection point), and a green point for an intersection that lies on both segments (being a real intersection point)."),r.createElement(i,{preset:"simple",title:"Line/line intersections",setup:this.setupLines,draw:this.drawLineIntersection}),r.createElement("div",{className:"howtocode"},r.createElement("h3",null,"Implementing line-line intersections"),r.createElement("p",null,"Let's have a look at how to implement a line-line intersection checking function. The basics are covered in the article mentioned above, but sometimes you need more function signatures, because you might not want to call your function with eight distinct parameters. Maybe you're using point structs or the line. Let's get coding:"),r.createElement("pre",null,"lli8 = function(x1,y1,x2,y2,x3,y3,x4,y4):","\n","  var nx=(x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4),","\n","      ny=(x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4),","\n","      d=(x1-x2)*(y3-y4)-(y1-y2)*(x3-x4);","\n","  if d=0:","\n","    return false","\n","  return point(nx/d, ny/d)","\n","\n","lli4 = function(p1, p2, p3, p4):","\n","  var x1 = p1.x, y1 = p1.y,","\n","      x2 = p2.x, y2 = p2.y,","\n","      x3 = p3.x, y3 = p3.y,","\n","      x4 = p4.x, y4 = p4.y;","\n","  return lli8(x1,y1,x2,y2,x3,y3,x4,y4)","\n","\n","lli = function(line1, line2):","\n","  return lli4(line1.p1, line1.p2, line2.p1, line2.p2)")),r.createElement("h3",null,"What about curve-line intersections?"),r.createElement("p",null,"Curve/line intersection is more work, but we've already seen the techniques we need to use in order to perform it: first we translate/rotate both the line and curve together, in such a way that the line coincides with the x-axis. This will position the curve in a way that makes it cross the line at points where its y-function is zero. By doing this, the problem of finding intersections between a curve and a line has now become the problem of performing root finding on our translated/rotated curve, as we already covered in the section on finding extremities."),r.createElement(i,{preset:"simple",title:"Quadratic curve/line intersections",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"simple",title:"Cubic curve/line intersections",
diff --git a/components/App.jsx b/components/App.jsx
index 228a638c..60313856 100644
--- a/components/App.jsx
+++ b/components/App.jsx
@@ -1,11 +1,15 @@
 var React = require("react");
 var ReactDOM = require("react-dom");
 var FullArticle = require("./FullArticle.jsx");
-var localized = (
-  <div>
-    <FullArticle/>
-    <script src="https://localize-bezierinfo.herokuapp.com/static/js/jquery-1.11.1.min.js"/>
-    <script src="https://localize-bezierinfo.herokuapp.com/pontoon.js"/>
-  </div>
-);
-ReactDOM.render(localized, document.getElementById("article"));
+
+function addPontoon() {
+  var jquery = document.createElement("script");
+  jquery.src = "https://localize-bezierinfo.herokuapp.com/static/js/jquery-1.11.1.min.js";
+  document.head.appendChild(jquery);
+
+  var pontoon = document.createElement("script");
+  pontoon.src = "https://localize-bezierinfo.herokuapp.com/pontoon.js";
+  document.head.appendChild(pontoon);
+}
+
+ReactDOM.render(<FullArticle/>, document.getElementById("article"), addPontoon);
diff --git a/components/sections/bsplined/demonstrator.js b/components/sections/bsplined/demonstrator.js
new file mode 100644
index 00000000..272ad718
--- /dev/null
+++ b/components/sections/bsplined/demonstrator.js
@@ -0,0 +1,38 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+
+  setup() {
+    this.size(600, 300);
+    this.points = [
+      {x:50,y:240},
+      {x:185,y:30},
+      {x:320,y:135},
+      {x:455,y:25},
+      {x:560,y:255}
+    ];
+    this.knots = this.formKnots(this.points);
+    this.draw();
+  },
+
+  draw() {
+    this.clear();
+    this.grid(25);
+    var p = this.points[0];
+    this.points.forEach(n => {
+      this.stroke(200);
+      this.line(n.x, n.y, p.x, p.y);
+      p = n;
+      this.stroke(0);
+      this.circle(p.x, p.y, 4);
+    });
+    this.drawSplineData();
+  },
+
+  drawSplineData() {
+    if (this.points.length <= this.degree) return;
+    var mapped = this.points.map(p => [p.x, p.y]);
+    this.drawCurve(mapped);
+    this.drawKnots(mapped);
+  }
+};
diff --git a/components/sections/bsplined/derived.js b/components/sections/bsplined/derived.js
new file mode 100644
index 00000000..b1e57b03
--- /dev/null
+++ b/components/sections/bsplined/derived.js
@@ -0,0 +1,37 @@
+module.exports = {
+  degree: 2,
+  activeDistance: 9,
+
+  setup() {
+    this.size(600, 300);
+    this.points = [
+      {x:135,y:-210},
+      {x:135,y:105},
+      {x:135,y:-110},
+      {x:105,y:230}
+    ];
+    this.knots = this.formKnots(this.points);
+    this.draw();
+  },
+
+  draw() {
+    this.clear();
+    this.grid(25);
+    var p = this.points[0];
+    this.points.forEach(n => {
+      this.stroke(200);
+      this.line(n.x, n.y, p.x, p.y);
+      p = n;
+      this.stroke(0);
+      this.circle(p.x, p.y, 4);
+    });
+    this.drawSplineData();
+  },
+
+  drawSplineData() {
+    if (this.points.length <= this.degree) return;
+    var mapped = this.points.map(p => [p.x, p.y]);
+    this.drawCurve(mapped);
+    this.drawKnots(mapped);
+  }
+};
diff --git a/components/sections/bsplined/index.js b/components/sections/bsplined/index.js
new file mode 100644
index 00000000..988f9eca
--- /dev/null
+++ b/components/sections/bsplined/index.js
@@ -0,0 +1,106 @@
+var React = require("react");
+var SectionHeader = require("../../SectionHeader.jsx");
+var BSplineGraphic = require("../../BSplineGraphic.jsx");
+
+var BoundingBox = React.createClass({
+  getDefaultProps: function() {
+    return {
+      title: "B-Spline derivatives"
+    };
+  },
+
+  render: function() {
+    return (
+      <section>
+        <SectionHeader {...this.props} />
+
+        <p>
+          One last section specific to B-Splines: in order to apply the same procedures
+          to B-Splines as we've looked at for BEzier curves, we'll need to know the first
+          and second derivative. But... what is the derivative of a B-Spline?
+        </p>
+
+        <p>
+          Thankfully, much like as was the case for Bezier curves, the derivative of a
+          B-Spline is itself a (lower order) B-Spline. The following two functions specify
+          the general B-Spline formula for a B-Spline of degree <em>d</em> with <em>n</em>
+          points, and knot vector of length <em>d+n+1</em>, and its derivative:
+        </p>
+
+        <p>\[
+          C(t) = \sum_{i=0}^n P_i \cdot N_{i,k}(t)
+        \]</p>
+
+        <p>\[
+          C'(t) = \sum_{i=0}^{n-1} P_i \prime \cdot N_{i+1,k-1}(t)
+        \]</p>
+
+        <p>where</p>
+
+        <p>\[
+          P_i \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+        \]</p>
+
+        <p>
+          So, much as for Bezier derivatives, we see a derivative function that is simply
+          a new interpolation function, with interpolated weights. With this information, we
+          can do things like draw tangents and normals, as well as determine the curvature
+          function, draw inflection points, and all those lovely things.
+        </p>
+
+        <p>
+          As a concrete example, let's look at cubic (=degree 3) B-Spline with five coordinates,
+          and with uniform knot vector of length 3 + 5 + 1 = 9:
+        </p>
+
+        <p>\[\begin{array}{l}
+          d = 3, \\
+          P = {(50,240), (185,30), (320,135), (455,25), (560,255)}, \\
+          knots = {0,1,2,3,4,5,6,7,8}
+        \end{array}\]</p>
+
+        <BSplineGraphic sketch={require('./demonstrator')} />
+
+        <p>
+          Applying the above knowledge, we end up with a new B-Spline of degree <em>d-1</em>,
+          with four points <em>P'</em>:
+        </p>
+
+        <p>\[\begin{array}{l}
+          P_0 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+           = \frac{3}{knot_{4} - knot_{1}} (P_1 - P_0)
+           = \frac{3}{3} (P_1 - P_0)
+           = (135, -210) \\
+          P_1 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+           = \frac{3}{knot_{5} - knot_{2}} (P_2 - P_1)
+           = \frac{3}{3} (P_2 - P_1)
+           = (135, 105) \\
+          P_2 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+           = \frac{3}{knot_{6} - knot_{3}} (P_3 - P_2)
+           = \frac{3}{3} (P_3 - P_2)
+           = (135, -110) \\
+          P_3 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+           = \frac{3}{knot_{7} - knot_{4}} (P_4 - P_3)
+           = \frac{3}{3} (P_4 - P_3)
+           = (105, 230) \\
+        \end{array}\]</p>
+
+        <p>
+          So, we end up with a derivative that has as parameters:
+        </p>
+
+        <p>\[\begin{array}{l}
+          d = 3, \\
+          P = {(50,240), (185,30), (320,135), (455,25), (560,255)}, \\
+          knots = {0,1,2,3,4,5,6,7,8}
+        \end{array}\]</p>
+
+
+        <BSplineGraphic sketch={require('./derived')} />
+
+      </section>
+    );
+  }
+});
+
+module.exports = BoundingBox;