diff --git a/article.ja-JP.js b/article.ja-JP.js
index eb1edad6..0820e3b0 100644
--- a/article.ja-JP.js
+++ b/article.ja-JP.js
@@ -22,14 +22,14 @@ return this._segments[this._segments.length-1]},getCurves:function(){var e=this.
 _class:"PathIterator",initialize:function(e,t,n,r){function i(e,t){var n=A.getValues(e,t,r);s.push(n),a(n,e._index,0,1)}function a(e,t,r,i){if(i-r>c&&!A.isFlatEnough(e,n||.25)){var o=A.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],f=Math.sqrt(h*h+d*d);f>1e-6&&(u+=f,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],f=1,p=h.length;f<p;f++)o=h[f],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=A.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(A.evaluateMethods,function(e){this[e+"At"]=function(t,n){var r=this.getParameterAt(t);return A[e](this.curves[r.index],r.value,n)}},{})),j=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 I(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),f=this.findMaxError(e,t,d,l);if(f.error<this.error&&c)return void this.addCurve(d);if(s=f.index,f.error>=u)break;c=this.reparameterize(e,t,l,d),u=f.error}var p=this.points[s-1].subtract(this.points[s]),m=this.points[s].subtract(this.points[s+1]),g=p.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 I(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],f=1-d,p=3*d*f,m=f*f*f,g=p*f,v=p*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],S=u[0]*l[1][1]-u[1]*l[0][1];x=S/C,E=k/C}else{var P=l[0][0]+l[0][1],T=l[1][0]+l[1][1];x=E=Math.abs(P)>a?u[0]/P:Math.abs(T)>a?u[1]/T:0}var N,M,I=s.getDistance(o),L=a*I;if(x<L||E<L)x=E=I/3;else{var A=s.subtract(o);N=r.normalize(x),M=i.normalize(E),N.dot(A)-M.dot(A)>I*I&&(x=E=I/3,N=M=null)}return[o,o.add(N||r.normalize(x)),s.add(M||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}}}),F=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&&p.read(arguments))},_equals:function(e){return this._content===e._content},_clone:function e(t,n,r){return t.setContent(this._content),e.base.call(this,t,n,r)},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"}),q=F.extend({_class:"PointText",initialize:function(){F.apply(this,arguments)},clone:function(e){return this._clone(new q(C.NO_INSERT),e)},getPoint:function(){var e=this._matrix.getTranslation();return new m(e.x,e.y,this,"setPoint")},setPoint:function(){var e=p.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}}),V=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 p.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 t(i){var a,o,s,l,u=Array.prototype.slice,c=arguments,h=0;Array.isArray(i)&&(c=i,i=c[0]);var d=null!=i&&typeof i;if("string"===d&&i in n&&(a=i,i=c[1],Array.isArray(i)?(o=i,s=c[2]):(this.__read&&(h=1),c=u.call(c,1),d=typeof i)),!o){if(l="number"===d?c:"object"===d&&null!=i.length?i:null){a||(a=l.length>=3?"rgb":"gray");var p=n[a].length;s=l[p],this.__read&&(h+=l===arguments?p+(null!=s?1:0):1),l.length>p&&(l=u.call(l,0,p))}else if("string"===d)a="rgb",o=e(i),4===o.length&&(s=o[3],o.length--);else if("object"===d)if(i.constructor===t){if(a=i._type,o=i._components.slice(),s=i._alpha,"gradient"===a)for(var m=1,g=o.length;m<g;m++){var v=o[m];v&&(o[m]=v.clone())}}else if(i.constructor===U)a="gradient",l=c;else{a="hue"in i?"lightness"in i?"hsl":"hsb":"gradient"in i||"stops"in i||"radial"in i?"gradient":"gray"in i?"gray":"rgb";var y=n[a],w=r[a];this._components=o=[];for(var m=0,g=y.length;m<g;m++){var b=i[y[m]];null==b&&0===m&&"gradient"===a&&"stops"in i&&(b={stops:i.stops,radial:i.radial}),b=w[m].call(this,b),null!=b&&(o[m]=b)}s=i.alpha}this.__read&&a&&(h=1)}if(this._type=a||"rgb",this._id=f.get(t),!o){this._components=o=[];for(var w=r[this._type],m=0,g=w.length;m<g;m++){var b=w[m].call(this,l&&l[m]);null!=b&&(o[m]=b)}}this._components=o,this._properties=n[this._type],this._alpha=s,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 V(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)?V.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 f=i[h];t.addColorStop(f._rampPoint,f._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 V(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=V.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 V(n,i,null!=this._alpha?e(this._alpha,t.getAlpha()):null)}},{})}),U=s.extend({_class:"Gradient",initialize:function(e,t){this._id=f.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=V.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 p,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 V}),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 D))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===V&&(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 D){var t=this._values[i];if(t===o)t=this._defaults[i],t&&t.clone&&(t=t.clone());else{var u=a?V:l?p: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 f=r[c]._style[d]();if(0===c)t=f;else if(!s.equals(t,f))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 F&&(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 e(){var t=e.base.call(this),n=this.getFontSize();return/pt|em|%|px/.test(n)&&(n=this.getView().getPixelSize(n)),null!=t?t:1.2*n}}),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(e){n={left:0,top:0,width:0,height:0}}var o=n.left-(a.clientLeft||i.clientLeft||0),s=n.top-(a.clientTop||i.clientTop||0);if(!t){var l=r.defaultView;o+=l.pageXOffset||a.scrollLeft||i.scrollLeft,s+=l.pageYOffset||a.scrollTop||i.scrollTop}return new y(o,s,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 p(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 e(t,n){function r(e){return n[e]||parseInt(n.getAttribute(e),10)}function i(){var e=H.getSize(n);return e.isNaN()||e.isZero()?new g(r("width"),r("height")):e}this._project=t,this._scope=t._scope,this._element=n;var a;this._pixelRatio||(this._pixelRatio=window.devicePixelRatio||1),this._id=n.getAttribute("id"),null==this._id&&n.setAttribute("id",this._id="view-"+e._id++),X.add(n,this._viewEvents);var o="none";if(H.setPrefixed(n.style,{userSelect:o,touchAction:o,touchCallout:o,contentZooming:o,userDrag:o,tapHighlightColor:"rgba(0,0,0,0)"}),u.hasAttribute(n,"resize")){var s=this;X.add(window,this._windowEvents={resize:function(){s.setViewSize(i())}})}if(this._setViewSize(a=i()),u.hasAttribute(n,"stats")&&"undefined"!=typeof Stats){this._stats=new Stats;var l=this._stats.domElement,c=l.style,h=H.getOffset(n);c.position="absolute",c.left=h.x+"px",c.top=h.y+"px",document.body.appendChild(l)}e._views.push(this),e._viewsById[this._id]=this,this._viewSize=a,(this._matrix=new b)._owner=this,this._zoom=1,e._focused||(e._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 p,this._viewSize))),this._bounds},getSize:function(){return this.getBounds().getSize()},getCenter:function(){return this.getBounds().getCenter()},setCenter:function(){var e=p.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(p.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(p.read(arguments))},viewToProject:function(){return this._matrix._inverseTransform(p.read(arguments))}},{statics:{_views:[],_viewsById:{},_id:0,create:function(e,t){return"string"==typeof t&&(t=document.getElementById(t)),new Q(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()}},f={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()},f[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))}},f[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,f),X.add(window,{load:n});var p={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 p)t[n]=(t[n]||0)+(p[n][e]||0)},_uninstallEvent:function(e){var t=this._eventCounters;if(t)for(var n in p)t[n]-=p[n][e]||0},statics:{updateFocus:n}}}),Q=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 J(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 f=this._project,p=f.hitTest(h,{tolerance:0,fill:!0,stroke:!0}),m=p&&p.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}}}}),Y=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 $.modifiers}}),Z=Y.extend({_class:"KeyEvent",initialize:function(e,t,n,r){Y.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()+" }"}}),$=new function(){function e(n,i,c,h){var d,f=c?String.fromCharCode(c):"",p=r[i],m=p||f.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],p&&(d=s.camelize(p))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,f,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]}}},J=Y.extend({_class:"MouseEvent",initialize:function(e,t,n,r,i){Y.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=Y.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);f=t+a,p=n+a,m=r+a;var i=e(f,p,m),o=g(f,p,m),s=v(f,p,m);if(o<0){var l=i-o;f=i+(f-i)*i/l,p=i+(p-i)*i/l,m=i+(m-i)*i/l}if(s>255){var u=255-i,c=s-i;f=i+(f-i)*u/c,p=i+(p-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,f=a[0],p=a[1],m=a[2]}var i,a,o,l,u,c,h,d,f,p,m,g=Math.min,v=Math.max,y=Math.abs,w={multiply:function(){f=u*i/255,p=c*a/255,m=h*o/255},screen:function(){f=u+i-u*i/255,p=c+a-c*a/255,m=h+o-h*o/255},overlay:function(){f=u<128?2*u*i/255:255-2*(255-u)*(255-i)/255,p=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;f=e+u*(255-(255-u)*(255-i)/255-e)/255,e=a*c/255,p=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(){f=i<128?2*i*u/255:255-2*(255-i)*(255-u)/255,p=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(){f=0===u?0:255===i?255:g(255,255*u/(255-i)),p=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(){f=255===u?255:0===i?0:v(0,255-255*(255-u)/i),p=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(){f=u<i?u:i,p=c<a?c:a,m=h<o?h:o},lighten:function(){f=u>i?u:i,p=c>a?c:a,m=h>o?h:o},difference:function(){f=u-i,f<0&&(f=-f),p=c-a,p<0&&(p=-p),m=h-o,m<0&&(m=-m)},exclusion:function(){f=u+i*(255-u-u)/255,p=c+a*(255-c-c)/255,m=h+o*(255-h-h)/255},hue:function(){r(i,a,o,n(u,c,h)),t(f,p,m,e(u,c,h))},saturation:function(){r(u,c,h,n(i,a,o)),t(f,p,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(){f=g(u+i,255),p=g(c+a,255),m=g(h+o,255)},subtract:function(){f=v(u-i,0),p=v(c-a,0),m=v(h-o,0)},average:function(){f=(u+i)/2,p=(c+a)/2,m=(h+o)/2},negation:function(){f=255-y(255-i-u),p=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(e){}_.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 S=l*r/255,P=1-S;x[C]=S*f+P*u,x[C+1]=S*p+P*c,x[C+2]=S*m+P*h,x[C+3]=l*r+P*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 B||e instanceof P||e instanceof F)}],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 f=l[0]._point,p=l[l.length-1]._point;u.set({x1:f.x,y1:f.y,x2:p.x,y2:p.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],f=d._color,p=f.getAlpha();r={offset:d._rampPoint,"stop-color":f.toCSS(!0)},p<1&&(r["stop-opacity"]=p),n.appendChild(t("stop",r))}g(e,n,"color")}return"url(#"+n.id+")"}function f(e){var r=t("text",n(e._matrix,!0));return r.textContent=e._content,r}function p(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&&p(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:f};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 p(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 f,p=i[h];1!==p.nodeType||"defs"===p.nodeName.toLowerCase()||!(f=w(p,n,!1))||f instanceof E||u.push(f)}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 p(parseFloat(n[i]),parseFloat(n[i+1])));var o=new z(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 D(n):new z(n)}function c(n,r){var i,a=(e(n,"href",!0)||"").substring(1),o="radialgradient"===r;if(a)i=N[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,f,p;return o?(d=t(n,"cx","cy"),f=d.add(e(n,"r"),0),p=t(n,"fx","fy",!0)):(d=t(n,"x1","y1"),f=t(n,"x2","y2")),m(new V(i,d,f,p),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,f=h.length;d<f;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 f(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(S,function(n,i){var a=f(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&&N[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"),f=o.settings,p=f.applyMatrix;if(f.applyMatrix=!1,u=h&&h(i,c,t,n)||null,f.applyMatrix=p,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 P&&(u.remove(),u=u.toPath()),d&&(u._data=JSON.parse(d))}return n&&(N={},u&&s.pick(t.applyMatrix,p)&&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 T(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=N[r],a=t(n,"x","y");return i?i instanceof E?i.place(a):i.clone().translate(a):null},circle:function(n){return new P.Circle(t(n,"cx","cy"),e(n,"r"))},ellipse:function(e){return new P.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 P.Rectangle(new y(r,i),a)},line:function(e){return new z.Line(t(e,"x1","y1"),t(e,"x2","y2"))},text:function(e){var n=new q(t(e,"x","y").add(t(e,"dx","dy")));return n.setContent(e.textContent.trim()||""),n}},S=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 P){var i=t[e.get]();i&&i.transform((new b).translate(t.getPosition(!0).negate()))}}},{}),{id:function(e,t){N[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"!=f(a,"overflow",o),d=e._definition;h&&!s.contains(d.getBounds())&&(h=new P.Rectangle(s).transform(d._matrix),h.setClipMask(!0),d.addChild(h))}}}),N={};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:$})),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(0),i=n(105),a=r.createClass({displayName:"BSplineGraphic",componentWillMount:function(){var e=this;this.cvs=void 0,this.ctx=void 0,this.key=void 0,this.keyCode=void 0,this.mouseX=void 0,this.mouseY=void 0,this.isMouseDown=void 0,this.width=0,this.height=0,this.activeDistance=9,this.points=[],this.knots=[],this.weights=[],this.nodes=[],this.cp=void 0,this.dx=void 0,this.dy=void 0;var t=this.props.sketch;Object.keys(t).forEach(function(n){e[n]=t[n],"function"==typeof e[n]&&(e[n]=e[n].bind(e))})},render:function(){return r.createElement("canvas",{className:"bspline-graphic",ref:"sketch"})},keydownlisten:function(e){this.setKeyboardValues(e),this.keyDown()},keyuplisten:function(e){this.setKeyboardValues(e),this.keyUp()},keypresslisten:function(e){this.setKeyboardValues(e),this.keyPressed()},mousedownlisten:function(e){this.setMouseValues(e),this.mouseDown()},mouseuplisten:function(e){this.setMouseValues(e),this.mouseUp()},mousemovelisten:function(e){this.setMouseValues(e),this.mouseMove(),this.isMouseDown&&this.mouseDrag&&this.mouseDrag()},wheellissten:function(e){e.preventDefault(),this.scrolled(e.deltaY<0?1:-1)},componentDidMount:function(){var e=this.cvs=this.refs.sketch;e.addEventListener("keydown",this.keydownlisten),e.addEventListener("keyup",this.keyuplisten),e.addEventListener("keypress",this.keypresslisten),e.addEventListener("mousedown",this.mousedownlisten),e.addEventListener("mouseup",this.mouseuplisten),e.addEventListener("mousemove",this.mousemovelisten),this.props.scrolling&&e.addEventListener("wheel",this.wheellissten),this.setup()},componentWillUnmount:function(){var e=this.cvs=this.refs.sketch;e.removeEventListener("keydown",this.keydownlisten),e.removeEventListener("keyup",this.keyuplisten),e.removeEventListener("keypress",this.keypresslisten),e.removeEventListener("mousedown",this.mousedownlisten),e.removeEventListener("mouseup",this.mouseuplisten),e.removeEventListener("mousemove",this.mousemovelisten),this.props.scrolling&&e.removeEventListener("wheel",this.wheellissten)},drawCurve:function(e){e=e||this.points;var t=this.ctx,n=this.weights.length>0&&this.weights;t.beginPath();var r=i(0,this.degree,e,this.knots,n);t.moveTo(r[0],r[1]);for(var a=.01;a<1;a+=.01)r=i(a,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]);r=i(1,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]),t.stroke(),t.closePath()},drawKnots:function(e){var t=this,n=this.knots,r=this.weights.length>0&&this.weights;n.forEach(function(a,o){if(!(o<t.degree||o>n.length-1-t.degree)){var s=i(a,t.degree,e,n,r,!1,!0);t.circle(s[0],s[1],3)}})},drawNodes:function(e){var t,n=this;this.stroke(150),this.nodes.forEach(function(r,a){try{t=i(r,n.degree,e,n.knots,!1,!1,!0),n.line(t[0],t[1],e[a][0],e[a++][1])}catch(e){console.error(e)}})},formKnots:function(e,t){if(t=t===!0,!t)return this.formUniformKnots(e);var n,r=e.length,i=[],a=r-this.degree;for(n=1;n<r-this.degree;n++)i.push(n+this.degree);for(n=0;n<=this.degree;n++)i=[this.degree].concat(i);for(n=0;n<=this.degree;n++)i.push(a+this.degree);return i},formUniformKnots:function(e){for(var t=[],n=this.points.length+this.degree;n>=0;n--)t.push(n);return t.reverse()},formNodes:function(e,t){var n,r,i,a=[this.degree,e.length-1-this.degree],o=[];for(r=0;r<this.points.length;r++){for(n=0,i=1;i<=this.degree;i++)n+=e[r+i];n/=this.degree,n<e[a[0]]||n>e[a[1]]||o.push(n)}return o},formWeights:function(e){var t=[];return e.forEach(function(e){return t.push(1)}),t},setDegree:function(e){this.degree+=e,this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)},near:function(e,t,n){var r=e.x-t,i=e.y-n,a=Math.sqrt(r*r+i*i);return a<this.activeDistance},getCurrentPoint:function(e,t){for(var n=0;n<this.points.length;n++)if(this.near(this.points[n],e,t))return this.points[n]},keyDown:function(){console.log(this.key,this.keyCode),"ArrowUp"===this.key&&this.setDegree(1),"ArrowDown"===this.key&&this.degree>1&&this.setDegree(-1),this.redraw()},keyUp:function(){},keyPressed:function(){},mouseDown:function(){this.isMouseDown=!0,this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp||(this.points.push({x:this.mouseX,y:this.mouseY}),this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)),this.redraw()},mouseUp:function(){this.isMouseDown=!1,this.cp=!1,this.redraw()},mouseDrag:function(){this.cp&&(this.cp.x=this.mouseX,this.cp.y=this.mouseY,this.redraw())},mouseMove:function(){},scrolled:function(e){if(this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp){var t=this.points.indexOf(this.cp);this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),t=this.points.indexOf(this.cp,t+1),t!==-1&&this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),this.redraw()}},setKeyboardValues:function(e){e.ctrlKey||e.metaKey||e.altKey||e.preventDefault(),this.key=e.key,this.keyCode=e.code},setMouseValues:function(e){var t=this.cvs.getBoundingClientRect();this.mouseX=e.clientX-t.left,this.mouseY=e.clientY-t.top},size:function(e,t){this.width=0|e,this.height=0|(t||e),this.cvs.width=this.width,this.cvs.height=this.height,this.ctx=this.cvs.getContext("2d")},redraw:function(){this.draw()},clear:function(){this.ctx.clearRect(0,0,this.width,this.height)},grid:function(e){e=(0|(e||10))+.5,this.stroke(200,200,220);for(var t=e;t<this.width-1;t+=e)this.line(t,0,t,this.height);for(var n=e;n<this.height-1;n+=e)this.line(0,n,this.width,n)},circle:function(e,t,n){var r=this.ctx;r.beginPath(),r.moveTo(e,t),r.arc(e,t,n,0,2*Math.PI),r.stroke(),r.closePath()},line:function(e,t,n,r){var i=this.ctx;i.beginPath(),i.moveTo(e,t),i.lineTo(n,r),i.stroke(),i.closePath()},stroke:function(e,t,n,r){return"string"==typeof e?this.ctx.strokeStyle=e:(void 0===t&&(t=e,n=e),void 0===r&&(r=1),void(this.ctx.strokeStyle=this.rgba(e,t,n,r)))},noStroke:function(){this.ctx.strokeStyle="none"},fill:function(e,t,n,r){return"string"==typeof e?this.ctx.fillStyle=e:(void 0===t&&(t=e,n=e),void 0===r&&(r=1),void(this.ctx.fillStyle=this.rgba(e,t,n,r)))},noFill:function(){this.ctx.fillStyle="none"},rgba:function(e,t,n,r){return"rgba("+e+","+t+","+n+","+r+")"},beginPath:function(){this.ctx.beginPath(),this.bp=!0},vertex:function(e,t){return this.bp?(this.ctx.moveTo(e,t),void(this.bp=!1)):this.ctx.lineTo(e,t)},endPath:function(){this.ctx.stroke(),this.ctx.closePath()}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=r.createClass({displayName:"Footer",render:function(){return r.createElement("footer",{className:"copyright"},'This article is © 2011-2016 to me, Mike "Pomax" Kamermans, but the text, code, and images are ',r.createElement("a",{href:"https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md"},"almost no rights reserved"),". Go do something cool with it!")}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(113),a=n(40),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(0),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(0),i=r.createClass({displayName:"KnotController",getInitialState:function(){return{owner:!1,knots:[]}},bindKnots:function(e,t){this.setState({owner:e,knots:t})},render:function(){var e=this,t="range",n=0,i=this.state.knots.length,a=1;return r.createElement("section",{className:"knot-controls"},r.createElement("h2",null,"knot values"),this.state.knots.map(function(o,s){var l={type:t,min:n,max:i,step:a,value:o,onChange:function(t){var n=e.state.knots;n[s]=t.target.value,e.setState({knots:n},function(){e.state.owner.redraw()})}};return r.createElement("div",{key:"knot"+s},n,r.createElement("input",l),i," (= ",o,")")}))}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(97),a=i.Link,o=n(40),s=Object.keys(o),l=r.createClass({displayName:"Navigation",generateNavItem:function(e,t){var n=o[e],i=n.getDefaultProps().title,l=r.createElement("a",{href:"#"+e},i);this.props.fullNav&&(l=r.createElement(a,{to:e},i));var u=s.length-1;return t===u&&(t=null),r.createElement("li",{key:e,"data-number":t},l)},generateNav:function(){return this.props.compact?null:r.createElement("div",{ref:"navigation"},r.createElement("navigation",{className:this.props.compact?"compact":null},r.createElement("ul",{className:"navigation"},s.map(this.generateNavItem))))},render:function(){return this.generateNav()}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(115),a=n(110),o=n(114),s=n(118).LocaleSwitcher,l=n(112),u=n(108),c=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,r.createElement(s,null),e,this.props.children)},render:function(){var e,t=this.props.compact,n="/"===this.props.name,o=r.createElement(l,{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(u,null))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(97),a=i.Link,o=n(40),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";var r=n(0),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",style:{border:"none"},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(0),i=r.createClass({displayName:"WeightController",getInitialState:function(){return{owner:!1,weights:[],closed:!1}},bindWeights:function(e,t,n){this.setState({owner:e,weights:t,closed:n})},render:function(){var e=this,t="range",n=0,i=this.state.weights.length,a=1,o=this.state.closed,s=this.state.weights.length;return o!==!1&&(s-=o),r.createElement("section",{className:"knot-controls"},r.createElement("h2",null,"weight values"),this.state.weights.map(function(l,u){if(o&&u>=s)return null;var c={type:t,min:n,max:i,step:a,value:l,onChange:function(t){var n=e.state.weights;n[u]=t.target.value,o&&u<o&&(n[u+s]=t.target.value),e.setState({weights:n},function(){e.state.owner.redraw()})}};return r.createElement("div",{key:"knot"+u},n,r.createElement("input",c),i," (= ",l,")")}))}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="locale-switcher";e.exports=function(e){return r.createElement("div",{className:"locale-switcher"},a.getContent(o,this))}},function(e,t,n){"use strict";e.exports={LocaleSwitcher:n(117)}},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:"The projection identity"}},onClick:function(e,t){t.t=t.curve.on({x:e.offsetX,y:e.offsetY},7),(t.t<.05||t.t>.95)&&(t.t=!1),t.redraw()},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[0].y-=10,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelHeight();if(e.setColor("black"),e.t){e.drawCircle(e.curve.get(e.t),3),e.setColor("lightgrey");var r,i,a,o=e.drawHull(t,e.t),s=e.utils;
 6===o.length?(r=t.points[1],i=o[5],a=s.lli4(r,i,t.points[0],t.points[2]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[2])):10===o.length&&(r=o[5],i=o[9],a=s.lli4(r,i,t.points[0],t.points[3]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[3])),e.setColor("#00FF00"),e.drawLine(r,i),e.setColor("red"),e.drawLine(i,a),e.setColor("black"),e.drawCircle(a,3),e.setFill("black"),e.text("A",{x:10+r.x,y:r.y}),e.text("B (t = "+e.utils.round(e.t,2)+")",{x:10+i.x,y:i.y}),e.text("C",{x:10+a.x,y:a.y});var l=s.dist(r,i),u=s.dist(i,a),c=l/u;e.text("d1 (A-B): "+s.round(l,2)+", d2 (B-C): "+s.round(u,2)+", ratio (d1/d2): "+s.round(c,4),{x:10,y:n-7})}},setCT:function(e,t){t.t=e.offsetX/t.getPanelWidth()},drawCTgraph:function(e){e.reset(),e.setColor("black");var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"u",0,1),e.setColor("blue");var i=function(t){var i=e.u(t),a={x:n+t*r,y:n+i*r};return a};if(e.drawFunction(i),e.t){var a=e.u(e.t),o=e.utils.round(a,3),s=e.utils.round(1-a,3),l=i(e.t);e.drawLine({x:l.x,y:n},l),e.drawLine({x:n,y:l.y},l),e.drawCircle(l,3),e.setFill("blue"),e.text("    t = "+e.utils.round(e.t,3),{x:l.x+10,y:l.y-7}),e.text("u(t) = "+e.utils.round(a,3),{x:l.x+10,y:l.y+7}),e.setFill("black"),e.text("C = "+o+" * start + "+s+" * end",{x:t/2-n,y:n+r})}},drawQCT:function(e){e.u=e.u||function(e){var t=(e-1)*(e-1),n=2*e*e-2*e+1;return t/n},this.drawCTgraph(e)},drawCCT:function(e){e.u=e.u||function(e){var t=(1-e)*(1-e)*(1-e),n=e*e*e+t;return t/n},this.drawCTgraph(e)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"De Casteljau's algorithm is the pivotal algorithm when it comes to Bézier curves. You can use it not just to split curves, but also to draw them efficiently (especially for high-order Bézier curves), as well as to come up with curves based on three points and a tangent. Particularly this last thing is really useful because it lets us \"mould\" a curve, by picking it up at some point, and dragging that point around to change the curve's shape."),r.createElement("p",null,"How does that work? Succinctly: we run de Casteljau's algorithm in reverse!"),r.createElement("p",null,"In order to run de Casteljau's algorithm in reverse, we need a few basic things: a start and end point, a point on the curve that want to be moving around, which has an associated ",r.createElement("i",null,"t"),' value, and a point we\'ve not explicitly talked about before, and as far as I know has no explicit name, but lives one iteration higher in the de Casteljau process then our on-curve point does. I like to call it "A" for reasons that will become obvious.'),r.createElement("p",null,'So let\'s use graphics instead of text to see where this "A" is, because text only gets us so far: in the following graphic, click anywhere on the curves to see the identity information that we\'ll be using to run de Casteljau in reverse (you can manipulate the curve even after picking a point. Note the "ratio" value when you do so: does it change?):'),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,preset:"abc",title:"Projections in a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onClick:this.onClick}),r.createElement(i,{inline:!0,preset:"abc",title:"Projections in a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onClick:this.onClick})),r.createElement("p",null,"Clicking anywhere on the curves shows us three things:"),r.createElement("ol",null,r.createElement("li",null,"our on-curve point; let's call that ",r.createElement("b",null,"B"),","),r.createElement("li",null,"a point at the tip of B's \"hat\", on de Casteljau step up; let's call that ",r.createElement("b",null,"A"),", and"),r.createElement("li",null,"a point that we get by projecting B onto the start--end baseline; let's call that ",r.createElement("b",null,"C"),".")),r.createElement("p",null,"These three values ABC hide an important identity formula for quadratic and cubic Bézier curves: for any point on the curve with some ",r.createElement("i",null,"t")," value, the ratio distance of C along baseline is fixed: if some ",r.createElement("i",null,"t")," value sets up a C that is 20% away from the start and 80% away from the end, then it doesn't matter where the start, end, or control points are: for that ",r.createElement("i",null,"t")," value, C will ",r.createElement("em",null,"always")," lie at 20% from the start and 80% from the end point. Go ahead, pick an on-curve point in either graphic and then move all the other points around: if you only move the control points, start and end won't move, and so neither will C, and if you move either start or end point, C will move but its relative position will not change. The following function stays true:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f48f095d9c37c079ff6a5f71b3047397aa7dfc6b.svg",style:{width:"13.19985rem",height:"1.125rem"}})),r.createElement("p",null,"So that just leaves finding A."),r.createElement("div",{className:"note"},r.createElement("p",null,"While that relation is fixed, the function ",r.createElement("i",null,"u(t)")," differs depending on whether we're working with quadratic or cubic curves:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d351ad8dd7d1ab5c5e65f5abd78caf082fc84eb4.svg",style:{width:"12.825000000000001rem",height:"5.92515rem"}})),r.createElement("p",null,"So, if we know the start and end coordinates, and we know the ",r.createElement("i",null,"t")," value, we know C:"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,preset:"abc",title:"Quadratic value of C for t",draw:this.drawQCT,onMouseMove:this.setCT}),r.createElement(i,{inline:!0,preset:"abc",title:"Cubic value of C for t",draw:this.drawCCT,onMouseMove:this.setCT})),r.createElement("p",null,"Mouse-over the graphs to see the expression for C, given the ",r.createElement("i",null,"t")," value at the mouse pointer.")),r.createElement("p",null,"There's also another important bit of information that is inherent to the ABC values: while the distances between A and B, and B and C, are dynamic (based on where we put B), the ",r.createElement("em",null,"ratio")," between the two distances is stable: given some ",r.createElement("i",null,"t")," value, the following always holds:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6cb3e94fe9164128a25570a32abed15baa726f17.svg",style:{width:"17.92485rem",height:"2.7rem"}})),r.createElement("p",null,"This leads to a pretty powerful bit of knowledge: merely by knowing the ",r.createElement("i",null,"t")," value of some on curve point, we know where C has to be (as per the above note), and because we know B and C, and thus have the distance between them, we know where A has to be:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1dffb79b42799c95c899e689b074361f662ec807.svg",style:{width:"15.525rem",height:"2.55015rem"}})),r.createElement("p",null,"And that's it, all values found."),r.createElement("div",{className:"note"},r.createElement("p",null,"Much like the ",r.createElement("i",null,"u(t)")," function in the above note, the ",r.createElement("i",null,"ratio(t)")," function depends on whether we're looking at quadratic or cubic curves. Their form is intrinsically related to the ",r.createElement("i",null,"u(t)")," function in that they both come rolling out of the same function evalution, explained over on ",r.createElement("a",{href:"http://mathoverflow.net/questions/122257/finding-the-formula-for-Bézier-curve-ratios-hull-point-point-baseline"},"MathOverflow"),' by Boris Zbarsky and myself. The ratio functions are the "s(t)" functions from the answers there, while the "u(t)" functions have the same name both here and on MathOverflow.'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7ef64890f95db9e48258edb46a3d52d5ed143155.svg",style:{width:"16.57485rem",height:"2.77515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5f2bb71795c615637d632da70b722938cb103b03.svg",style:{width:"15.075000000000001rem",height:"2.77515rem"}})),r.createElement("p",null,'Unfortunately, this trick only works for quadratic and cubic curves. Once we hit higher order curves, things become a lot less predictable; the "fixed point ',r.createElement("i",null,"C"),'" is no longer fixed, moving around as we move the control points, and projections of ',r.createElement("i",null,"B")," onto the line between start and end may actually lie on that line before the start, or after the end, and there are no simple ratios that we can exploit.")),r.createElement("p",null,"So: if we know B and its corresponding ",r.createElement("i",null,"t"),' value, then we know all the ABC values, which —together with a start and end coordinate— gives us the necessary information to reconstruct a curve\'s "de Casteljau skeleton", which means that two points and a value between 0 and 1, we can come up with a curve. And that opens up possibilities: curve manipulation by dragging an on-curve point, curve fitting of "a bunch of coordinates", these are useful things, and we\'ll look at both in the next sections.'))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="aligning",s=r.createClass({displayName:"Aligning",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=Math.atan2,l=Math.PI,u=2*l,c=Math.cos,h=Math.sin,d=r.createClass({displayName:"Introduction",statics:{keyHandlingOptions:{propName:"error",values:{38:.1,40:-.1},controller:function(e){e.error<.1&&(e.error=.1)}}},getDefaultProps:function(){return{title:"Approximating Bézier curves with circular arcs"}},setupCircle:function(e){var t=new e.Bezier(70,70,140,40,240,130);e.setCurve(t)},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.error=.5},getCCenter:function(e,t,n,r){var i,a=n.x-t.x,o=n.y-t.y,d=r.x-n.x,f=r.y-n.y,p=a*c(l/2)-o*h(l/2),m=a*h(l/2)+o*c(l/2),g=d*c(l/2)-f*h(l/2),v=d*h(l/2)+f*c(l/2),y=(t.x+n.x)/2,w=(t.y+n.y)/2,b=(n.x+r.x)/2,_=(n.y+r.y)/2,x=y+p,E=w+m,C=b+g,k=_+v,S=e.utils.lli8(y,w,x,E,b,_,C,k),P=e.utils.dist(S,t),T=s(t.y-S.y,t.x-S.x),N=s(n.y-S.y,n.x-S.x),M=s(r.y-S.y,r.x-S.x);return T<M?((T>N||N>M)&&(T+=u),T>M&&(i=M,M=T,T=i)):M<N&&N<T?(i=M,M=T,T=i):M+=u,S.s=T,S.e=M,S.r=P,S},drawCircle:function(e,t){e.reset();var n=t.points,r=this.getCCenter(e,n[0],n[1],n[2]);e.setColor("grey"),e.drawCircle(r,e.utils.dist(r,n[0])),e.setColor("black"),n.forEach(function(t){return e.drawCircle(t,3)});var i;e.setColor("blue"),e.drawLine(n[0],n[1]),i={x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("red"),e.drawLine(n[1],n[2]),i={x:(n[1].x+n[2].x)/2,y:(n[1].y+n[2].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("green"),e.drawLine(n[2],n[0]),i={x:(n[2].x+n[0].x)/2,y:(n[2].y+n[0].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("black"),e.drawPoint(r),e.setFill("black"),e.text("Intersection point",r,{x:-25,y:10})},drawSingleArc:function(e,t){e.reset();var n=t.arcs(e.error);e.drawSkeleton(t),e.drawCurve(t);var r=n[0];e.setColor("red"),e.setFill("rgba(255,0,0,0.2)"),e.debug=!0,e.drawArc(r),e.setFill("black"),e.text("Arc approximation with total error "+e.utils.round(e.error,1),{x:10,y:15})},drawArcs:function(e,t){e.reset();var n=t.arcs(e.error);e.drawSkeleton(t),e.drawCurve(t),n.forEach(function(t){e.setRandomColor(.3),e.setFill(e.getColor()),e.drawArc(t)}),e.setFill("black"),e.text("Arc approximation with total error "+e.utils.round(e.error,1)+" per arc segment",{x:10,y:15})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Let's look at doing the exact opposite of the previous section: rather than approximating circular arc using Bézier curves, let's approximate Bézier curves using circular arcs."),r.createElement("p",null,"We already saw in the section on circle approximation that this will never yield a perfect equivalent, but sometimes you need circular arcs, such as when you're working with fabrication machinery, or simple vector languages that understand lines and circles, but not much else."),r.createElement("p",null,'The approach is fairly simple: pick a starting point on the curve, and pick two points that are further along the curve. Determine the circle that goes through those three points, and see if it fits the part of the curve we\'re trying to approximate. Decent fit? Try spacing the points further apart. Bad fit? Try spacing the points closer together. Keep doing this until you\'ve found the "good approximation/bad approximation" boundary, record the "good" arc, and then move the starting point up to overlap the end point we previously found. Rinse and repeat until we\'ve covered the entire curve.'),r.createElement("p",null,"So: step 1, how do we find a circle through three points? That part is actually really simple. You may remember (if you ever learned it!) that a line between two points on a circle is called a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Chord_%28geometry%29"},"chord"),", and one property of chords is that the line from the center of any chord, perpendicular to that chord, passes through the center of the circle."),r.createElement("p",null,"So: if we have have three points, we have three (different) chords, and consequently, three (different) lines that go from those chords through the center of the circle. So we find the centers of the chords, find the perpendicular lines, find the intersection of those lines, and thus find the center of the circle."),r.createElement("p",null,"The following graphic shows this procedure with a different colour for each chord and its associated perpendicular through the center. You can move the points around as much as you like, those lines will always meet!"),r.createElement(i,{preset:"simple",title:"Finding a circle through three points",setup:this.setupCircle,draw:this.drawCircle}),r.createElement("p",null,"So, with the procedure on how to find a circle through three points, finding the arc through those points is straight-forward: pick one of the three points as start point, pick another as an end point, and the arc has to necessarily go from the start point, over the remaining point, to the end point."),r.createElement("p",null,"So how can we convert a Bezier curve into a (sequence of) circular arc(s)?"),r.createElement("ul",null,r.createElement("li",null,"Start at ",r.createElement("em",null,"t=0")),r.createElement("li",null,"Pick two points further down the curve at some value ",r.createElement("em",null,"m = t + n")," and ",r.createElement("em",null,"e = t + 2n")),r.createElement("li",null,"Find the arc that these points define"),r.createElement("li",null,"Determine how close the found arc is to the curve:",r.createElement("ul",null,r.createElement("li",null,"Pick two additional points ",r.createElement("em",null,"e1 = t + n/2")," and ",r.createElement("em",null,"e2 = t + n + n/2"),"."),r.createElement("li",null,"These points, if the arc is a good approximation of the curve interval chosen, should lie ",r.createElement("em",null,"on")," the circle, so their distance to the center of the circle should be the same as the distance from any of the three other points to the center."),r.createElement("li",null,"For point points, determine the (absolute) error between the radius of the circle, and the",r.createElement("em",null,"actual")," distance from the center of the circle to the point on the curve."),r.createElement("li",null,"If this error is too high, we consider the arc bad, and try a smaller interval.")))),r.createElement("p",null,"The result of this is shown in the next graphic: we start at a guaranteed failure: s=0, e=1. That's the entire curve. The midpoint is simply at ",r.createElement("em",null,"t=0.5"),", and then we start performing a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"Binary Search"),"."),r.createElement("ol",null,r.createElement("li",null,"We start with ",1),r.createElement("li",null,"That'll fail, so we retry with the interval halved: ",.5),r.createElement("ul",null,r.createElement("li",null,"If that arc's good, we move back up by half distance: ",.75,"."),r.createElement("li",null,"However, if the arc was still bad, we move ",r.createElement("em",null,"down")," by half the distance: ",.25,".")),r.createElement("li",null,"We keep doing this over and over until we have two arcs found in sequence of which the first arc is good, and the second arc is bad. When we find that pair, we've found the boundary between a good approximation and a bad approximation, and we pick the former")),r.createElement("p",null,"The following graphic shows the result of this approach, with a default error threshold of 0.5, meaning that if an arc is off by a ",r.createElement("em",null,"combined")," half pixel over both verification points, then we treat the arc as bad. This is an extremely simple error policy, but already works really well. Note that the graphic is still interactive, and you can use your up and down arrow keys keys to increase or decrease the error threshold, to see what the effect of a smaller or larger error threshold is."),r.createElement(i,{preset:"simple",title:"Arc approximation of a Bézier curve",setup:this.setupCubic,draw:this.drawSingleArc,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"With that in place, all that's left now is to \"restart\" the procedure by treating the found arc's end point as the new to-be-determined arc's starting point, and using points further down the curve. We keep trying this until the found end point is for ",r.createElement("em",null,"t=1"),", at which point we are done. Again, the following graphic allows for up and down arrow key input to increase or decrease the error threshold, so you can see how picking a different threshold changes the number of arcs that are necessary to reasonably approximate a curve:"),r.createElement(i,{preset:"simple",title:"Arc approximation of a Bézier curve",setup:this.setupCubic,draw:this.drawArcs,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,'So... what is this good for? Obviously, If you\'re working with technologies that can\'t do curves, but can do lines and circles, then the answer is pretty straight-forward, but what else? There are some reasons why you might need this technique: using circular arcs means you can determine whether a coordinate lies "on" your curve really easily: simply compute the distance to each circular arc center, and if any of those are close to the arc radii, at an angle betwee the arc start and end: bingo, this point can be treated as lying "on the curve". Another benefit is that this approximation is "linear": you can almost trivially travel along the arcs at fixed speed. You can also trivially compute the arc length of the approximated curve (it\'s a bit like curve flattening). The only thing to bear in mind is that this is a lossy equivalence: things that you compute based on the approximation are guaranteed "off" by some small value, and depending on how much precision you need, arc approximation is either going to be super useful, or completely useless. It\'s up to you to decide which, based on your application!'))}});e.exports=o(d)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),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 f=(400*r/3|0)/100,p=(100*a|0)/100;e.text("Approximating with "+t+" strips (true area: "+f+"): "+p,{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(0),i=n(8),a=n(6),o=n(15),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(0),i=n(4),a=new i,o="boundingbox",s=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:a.getTitle(o)}},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),e.setColor("red"),t.extrema().values.forEach(function(n){e.drawCircle(t.get(n),3)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(600,300),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/9)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points);var n=0|Math.round(this.points.length/2);this.knots[n+0]=this.knots[n],this.knots[n+1]=this.knots[n],this.knots[n+2]=this.knots[n];for(var r=n+3;r<this.knots.length;r++)this.knots[r]=this.knots[r-1]+1;this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(107),a=n(6),o=n(111),s=n(116),l=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:"B-Splines"}},bindKnots:function(e,t,n){console.log("binding knots for "+n),this.refs[n].bindKnots(e,t)},bindWeights:function(e,t,n,r){this.refs[r].bindWeights(e,t,n)},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. Easily confused to mean Bézier splines, that's not actually what they are; they are \"basis function\" splines, which makes a lot of difference, which we'll be looking at in this section. We're not going to dive as deep into B-Splines as we have for Bézier curves (that would be an entire primer on its own) but we'll be looking at how B-Splines work, what kind of maths is involved in computing them, and how to draw them based on a number of parameters that you can pick for individual B-Splines."),r.createElement("p",null,"First off: B-Splines are ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Piecewise"},'"piecewise polynomial interpolation curves"'),', where the "single curve" is built by performing polynomial interpolation over a set of points, using a sliding window of a fixed number of points. For instance, a "cubic" B-Spline defined by twelve points will have its curve built by evaluating the polynomial interpolation of four points, and the curve can be treated as a lot of different sections, each controlled by four points at a time, such that the full curve consists of smoothly connected sections defined by points ',"{","1,2,3,4","}",", ","{","2,3,4,5","}",", ..., ","{","8,9,10,11","}",", and finally ","{","9,10,11,12","}",", for eight sections."),r.createElement("p",null,"What do they look like? They look like this! .. okay that's an empty graph, but simply click to place some point, with the stipulation that you need at least four point to see any curve. More than four points simply draws a longer B-Spline curve:"),r.createElement(i,{sketch:n(125)}),r.createElement("p",null,"The important part to notice here is that we are ",r.createElement("strong",null,"not"),' doing the same thing with B-Splines that we do for poly-Béziers or Catmull-Rom curves: both of the latter simply define new sections as literally "new sections based on new points", so a 12 point cubic poly-Bézier curve is actually impossible, because we start with a four point curve, and then add three more points for each section that follows, so we can only have 4, 7, 10, 13, 16, etc point Poly-Béziers. Similarly, while Catmull-Rom curves can grow by adding single points, this addition of a single point introduces three implicit Bézier points. Cubic B-Splines, on the other hand, are smooth interpolations of ',r.createElement("em",null,"each possible curve involving four consecutive points"),", such that at any point along the curve except for our start and end points, our on-curve coordinate is defined by four control points."),r.createElement("p",null,"Consider the difference to be this:"),r.createElement("ul",null,r.createElement("li",null,"for Bézier curves, the curve is defined as an interpolation of points, but:"),r.createElement("li",null,"for B-Splines, the curve is defined as an interpolation of ",r.createElement("em",null,"curves"),".")),r.createElement("p",null,"In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work."),r.createElement("h2",null,"How to compute a B-Spline curve: some maths"),r.createElement("p",null,"Given a B-Spline of degree ",r.createElement("code",null,"d")," and thus order ",r.createElement("code",null,"k=d+1")," (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and ",r.createElement("code",null,"n")," control points ",r.createElement("code",null,"P",r.createElement("sub",null,"0"))," through ",r.createElement("code",null,"P",r.createElement("sub",null,"n-1")),", we can compute a point on the curve for some value ",r.createElement("code",null,"t")," in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluting the following function:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/329da80e737b0005f4dbe4c84ff868bde5dfaee0.svg",style:{width:"11.775150000000002rem",height:"3.00015rem"}})),r.createElement("p",null,'Which, honestly, doesn\'t tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the ',r.createElement("em",null,"N(...)")," function, subscipted with an obvious parameter ",r.createElement("code",null,"i"),", which comes from our summation, and some magical parameter ",r.createElement("code",null,"k"),". So we need to know two things: 1. what does N(t) do, and 2. what is that ",r.createElement("code",null,"k"),"? Let's cover both, in reverse order."),r.createElement("p",null,"The parameter ",r.createElement("code",null,"k"),' represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or tops influencing the total curvature as a "knot on the curve". Doing so for a degree ',r.createElement("code",null,"d")," B-Spline with ",r.createElement("code",null,"n")," control point gives us ",r.createElement("code",null,"d + n + 1")," knots, defining ",r.createElement("code",null,"d + n")," intervals along the curve, and it is these intervals that the above ",r.createElement("code",null,"k")," subscript to the N() function applies to."),r.createElement("p",null,"Then the N() function itself. What does it look like?"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c10575fb591062784484357356796a4c0be4f83e.svg",style:{width:"38.39985rem",height:"3.15rem"}})),r.createElement("p",null,"So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where ",r.createElement("code",null,"i")," goes up, and ",r.createElement("code",null,"k")," goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following ",r.createElement("code",null,"i"),"/",r.createElement("code",null,"k")," values:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6664a4fc5832059bbc68eaa8068a4b2577e1d96a.svg",style:{width:"16.725150000000003rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And this function finally has a straight up evaluation: if a ",r.createElement("code",null,"t")," value lies within a knot-specific interval once we reach a ",r.createElement("code",null,"k=1"),' value, it "counts", otherwise it doesn\'t. We did cheat a little, though, because for all these values we need to scale our ',r.createElement("code",null,"t")," value first, so that it lies in the interval bounded by ",r.createElement("code",null,"knots[d]")," and ",r.createElement("code",null,"knots[n]"),", which are the start point and end point where curvature is controlled by exactly ",r.createElement("code",null,"order")," control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map ",r.createElement("code",null,"t")," from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead."),r.createElement("h2",null,"Can we simplify that?"),r.createElement("p",null,"We can, yes."),r.createElement("p",null,"People far smarter than us have looked at this work, and two in particular —",r.createElement("a",{href:"http://www.npl.co.uk/people/maurice-cox"},"Maurice Cox")," and ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Carl_R._de_Boor"},"Carl de Boor"),"— came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating ",r.createElement("em",null,"d(t)")," on a curve section between knots ",r.createElement("em",null,"i")," and ",r.createElement("em",null,"i+1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3780a420cd9b1bc59bec2c49bbd29f5e58497a3c.svg",style:{width:"18.75015rem",height:"1.27485rem"}})),"This is another recursive function, with ",r.createElement("em",null,"k")," values decreasing from the curve order to 1, and the value ",r.createElement("em",null,"α")," (alpha) defined by:",r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ba3b25cd54993b4601d8f415bc4cde73af4fc460.svg",style:{width:"17.325rem",height:"2.7rem"}})),r.createElement("p",null,'That looks complicated, but it\'s not. Computing alpha is just a fraction involving known, plain numbers and once we have our alpha value, computing (1-alpha) is literally just "computing one minus alpha". Computing this d() function is thus simply a matter of "computing simple arithmetics but with recursion", which might be computationally expensive because we\'re doing "a lot of" steps, but is also computationally cheap because each step only involves very simple maths. Of course as before the recursion has to stop:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1405067abebab73574934e3e69d7a7158106c744.svg",style:{width:"25.34985rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So, we see two stopping conditions: either ",r.createElement("code",null,"i")," becomes 0, in which case d() is zero, or ",r.createElement("code",null,"k"),' becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.'),r.createElement("p",null,"Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily: we just need to compute a triangle of interconnected values. For instance, d() for i=3, k=3 yields the following triangle:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a0a1069b001c75a1fab7f40ffa8bc403e1408f0d.svg",style:{width:"28.87515rem",height:"18.300150000000002rem"}})),r.createElement("p",null,"That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2): d(3,3) = a(3,3) x d(2,3) + (1-a(3,3)) x d(2,2)... and we simply keep expanding our triangle until we reach the terminating function parameters. Done deal!"),r.createElement("p",null,"One thing we need to keep in mind is that we're working with a spline that is contrained by its control points, so even though the ",r.createElement("code",null,"d(..., k)")," values are zero or one at the lowest level, they are really \"zero or one, times their respective control point\", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point: that's pretty essential!"),r.createElement("p",null,'If we run this computation "down", starting at d(3,3), then without special code in place we would be computing quite a few terms multiple times at each step. On the other hand, we can also start with that last "column", we can generate the terminating d() values first, then compute the a() constants, perform our multiplcations, generate the previous step\'s d() values, compute their a() constants, do the multiplications, etc. until we end up all the way back at the top. If we run our computation this way, we don\'t need any explicit caching, we can just "recycle" the list of numbers we start with and simply update them as we move up the triangle. So, let\'s implement that!'),r.createElement("h2",null,"Cool, cool... but I don't know what to do with that information"),r.createElement("p",null,"I know, this is pretty mathy, so let's have a look at what happens when we change parameters here. We can't change the maths for the interpolation functions, so that gives us only one way to control what happens here: the knot vector itself. As such, let's look at the graph that shows the interpolation functions for a cubic B-Spline with seven points with a uniform knot vector (so we see seven identical functions), representing how much each point (represented by one function each) influences the total curvature, given our knot values. And, because exploration is the key to discovery, let's make the knot vector a thing we can actually manipulate. Normally a proper knot vector has a constraint that any value is strictly equal to, or larger than the previous ones, but screw it this is programming, let's ignore that hard restriction and just mess with the knots however we like."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"interpolation-graph"}),r.createElement(i,{sketch:n(128),controller:function(t,n){return e.bindKnots(t,n,"interpolation-graph")}})),r.createElement("p",null,"Changing the values in the knot vector changes how much each point influences the total curvature (with some clever knot value manipulation, we can even make the influence of certain points disappear entirely!), so we can see that while the control points define the hull inside of which we're going to be drawing a curve, it is actually the knot vector that determines the actual ",r.createElement("em",null,"shape")," of the curve inside that hull."),r.createElement("p",null,"After reading the rest of this section you may want to come back here to try some specific knot vectors, and see if the resulting interpolation landscape makes sense given what you will now think should happen!"),r.createElement("h2",null,"Running the computation"),r.createElement("p",null,"Unlike the de Casteljau algorithm, where the ",r.createElement("code",null,"t")," value stays the same at every iteration, for B-Splines that is not the case, and so we end having to (for each point we evaluate) run a fairly involving bit of recursive computation. The algorithm is discussed on ",r.createElement("a",{href:"http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/de-Boor.html"},"this Michigan Tech")," page, but an easier to read version is implemented by ",r.createElement("a",{href:"https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71"},"b-spline.js"),", so we'll look at its code."),r.createElement("p",null,"Given an input value ",r.createElement("code",null,"t"),", we first map the input to a value from the domain [0,1] to the domain [knots[degree], knots[knots.length - 1 - degree]. Then, we find the section number ",r.createElement("code",null,"s")," that this mapped ",r.createElement("code",null,"t")," value lies on:"),r.createElement("pre",null,"\n","        for(s=domain[0]; s < domain[1]; s++) ","{","\n","          if(knots[s] <= t && t <= knots[s+1]) break;","\n","        ","}"),r.createElement("p",null,"after running this code, ",r.createElement("code",null,"s")," is the index for the section the point will lie on. We then run the algorithm mentioned on the MU page (updated to use this description's variable names):"),r.createElement("pre",null,"\n","        let v = copy of control points","\n","\n","        for(let L = 1; L <= order; L++) ","{","\n","          for(let i=s; i > s + L - order; i--) ","{","\n","            let numerator = t - knots[i]","\n","            let denominator = knots[i - L + order] - knots[i]","\n","            let alpha = numerator / denominator","\n","            let v[i] = alpha * v[i] + (1-alpha) * v[i-1]","\n","          ","}","\n","        ","}"),r.createElement("p",null,'(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at ',r.createElement("code",null,"i=s")," at each level of the interpolation, and we stop when ",r.createElement("code",null,"i = s - order + level"),", so we always end up with a value for ",r.createElement("code",null,"i")," such that those ",r.createElement("code",null,"v[i-1]")," don't try to use an array index that doesn't exist)"),r.createElement("h2",null,"Open vs. closed paths"),r.createElement("p",null,"Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are ",r.createElement("em",null,"the same point"),". However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order ",r.createElement("code",null,"d")," B-Spline, we need to make the last ",r.createElement("code",null,"d")," point the same as the first ",r.createElement("code",null,"d")," points. And the easiest way to do this is to simply append ",r.createElement("code",null,"points.splice(0,d)")," to ",r.createElement("code",null,"points"),". Done!"),r.createElement("p",null,'Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for ',r.createElement("code",null,"points[0]")," and ",r.createElement("code",null,"points[n-k]")," etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects."),r.createElement("h2",null,"Manipulating the curve through the knot vector"),r.createElement("p",null,"The most important thing to understand when it comes to B-Splines is that they work ",r.createElement("em",null,"because"),' of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the ',r.createElement("em",null,"values")," that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:"),r.createElement("ol",null,r.createElement("li",null,"we can use a uniform knot vector, with equally spaced intervals,"),r.createElement("li",null,"we can use a non-uniform knot vector, without enforcing equally spaced internvals,"),r.createElement("li",null,'we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and'),r.createElement("li",null,"we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.")),r.createElement("h3",null,"Uniform B-Splines"),r.createElement("p",null,"The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines ",r.createElement("em",null,"the same intervals"),", or even [0,2,3,...,18,20,22], which also defines ",r.createElement("em",null,"the same intervals"),", just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i<r+1+n;i++)this.drawN(i,n,e,(this.width-e)/(2*(r+2)),this.height-2*e)},drawN:function(e,t,n,i,a){this.stroke(r[e]);this.knots;this.beginPath();for(var o=e-1,s=o,l=.1,u=e+t+1;s<u;s+=l){var c=n+e*i+s*i,h=this.height-n-this.N(e,t,s)*a;this.vertex(c,h)}this.endPath()},N:function(e,t,n){var r=this.knots[e],i=this.knots[e+1],a=this.knots[e+t-1],o=this.knots[e+t];if(1===t)return r<=n&&n<=i?1:0;var s=n-r,l=a-r,u=0===l?0:s/l,c=o-n,h=o-i,d=0===h?0:c/h,f=0;if(0!==u){var p=this.ensureN(e,t-1,n);f=void 0===p?this.N(e,t-1,n):p}var m=0;if(0!==d){var g=this.ensureN(e+1,t-1,n);m=void 0===g?this.N(e+1,t-1,n):g}return this.cacheN(e,t,n,u*f+d*m),this.cache.N[e][t][n]},ensureN:function(e,t,n){this.cache.N||(this.cache.N=[]);var r=this.cache.N;return r[e]||(r[e]=[]),r[e][t]||(r[e][t]=[]),r[e][t][n]},cacheN:function(e,t,n,r){this.ensureN(e,t,n),this.cache.N[e][t][n]=r}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points,!0),
-this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,weights:[],setup:function(){this.size(400,400);for(var e=2*Math.PI,t=this.width/3,n=0;n<6;n++)this.points.push({x:this.width/2+t*Math.cos(n/6*e),y:this.height/2+t*Math.sin(n/6*e)});this.points=this.points.concat(this.points.slice(0,3)),this.closed=this.degree,this.knots=this.formKnots(this.points),this.weights=this.formWeights(this.points),this.props.controller&&this.props.controller(this,this.knots,this.weights,this.closed),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="canonical",s=r.createClass({displayName:"Canonical",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(6),a=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:"Bézier curves and Catmull-Rom curves"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Taking an excursion to different splines, the other common design curve is the ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline"},"Catmull-Rom spline"),". Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one into the other, and back, with some simple substitutions?"),r.createElement("p",null,'Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, except the first and last, which makes sense if you read the "natural language" description for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point P',r.createElement("sub",null,"x"),", has a tangent along the line P",r.createElement("sub",null,"x-1")," to P",r.createElement("sub",null,"x+1"),". The curve runs from points P",r.createElement("sub",null,"2")," to  P",r.createElement("sub",null,"n-1"),', and has a "tension" that determines how fast the curve passes through each point. The lower the tension, the faster the curve goes through each point, and the bigger its local tangent is.'),r.createElement("p",null,"I'll be showing the conversion to and from Catmull-Rom curves for the tension that the Processing language uses for its Catmull-Rom algorithm."),r.createElement("p",null,"We start with showing the Catmull-Rom matrix form:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5fc1c44e623f2a9fbeefdaa204557479e3debf5a.svg",style:{width:"30.150000000000002rem",height:"5.70015rem"}})),r.createElement("p",null,"However, there's something funny going on here: the coordinate column matrix looks weird. The reason is that Catmull-Rom curves are actually curve segments that are described by two points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead, this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1 with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate 4). So if we want to express this as a matrix form based on four coordinates, we get this representation instead:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/40b9ca9b5755a4be49517ddfa630fef7b8e23067.svg",style:{width:"29.475rem",height:"6.525rem"}})),r.createElement("div",{className:"note"},r.createElement("h2",null,"Where did that 2 come from?"),r.createElement("p",null,"Catmull-Rom splines are based on the concept of tension: the higher the tensions, the shorter the tangents at the departure and arrival points. The basic Catmull-Rom curve arrives and departs with tangents equal to half the distance between the two adjacent points, so that's where that 2 came from."),r.createElement("p",null,'However, the "real" matrix is this:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7bf9b5e971866babedd991ccdde5c4ab104297e5.svg",style:{width:"24.75rem",height:"6.60015rem"}})),r.createElement("p",null,"This bakes in the tension factor τ explicitly.")),r.createElement("p",null,'Plugging this into the "two coordinates and two tangent vectors" matrix form, we get:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4818f8797c35f23c2b9883aa986b1129b2fa151a.svg",style:{width:"21.45015rem",height:"5.70015rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/08f77989369f664cbc0fb7526791efd4c5299d70.svg",style:{width:"35.47485rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7ae769c5370469b16523bab6f34abf0dd6749be.svg",style:{width:"28.425150000000002rem",height:"5.54985rem"}})),r.createElement("p",null,"So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7250f1c57e2bd66ec4349e4e88db4d5d74401a06.svg",style:{width:"50.85rem",height:"5.54985rem"}})),r.createElement("p",null,"The difference is somewhere in the actual hermite matrix, since the ",r.createElement("em",null,"t")," and coordinate values are identical, so let's solve that matrix equasion:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8a42b24fca3aaf6b8ec08e84b7e91c43e26e8acf.svg",style:{width:"28.575rem",height:"5.54985rem"}})),r.createElement("p",null,"We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the Bézier matrix on the right side of the equals sign:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e111d6e846f4d7204dec484005f74993e66c6c9.svg",style:{width:"58.19985rem",height:"5.70015rem"}})),r.createElement("p",null,"Which gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f94b80113772d90a4fbc93d4495cb5767e5c8123.svg",style:{width:"12.6rem",height:"5.47515rem"}})),r.createElement("p",null,"Multiplying this ",r.createElement("strong",null,r.createElement("em",null,"A"))," with our coordinates will give us a proper Bézier matrix expression again:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d088274e440ceeac2916a0f32176682d776c1c57.svg",style:{width:"31.725rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9e68f80b270d3445d9f9cb28ff2c5aed219aa9d2.svg",style:{width:"25.650000000000002rem",height:"6.60015rem"}})),r.createElement("p",null,"So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning the Catmull-Rom coordinates on the left into the Bézier coordinates on the right (with τ being our tension factor):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f0c5a707b590eaf8899a927ce39fd186a6acecf3.svg",style:{width:"18.07515rem",height:"6.67485rem"}})),r.createElement("p",null,"And the other way around, a Bézier to Catmull-Rom conversion requires turning the Bézier coordinates on the left this time into the Catmull-Rom coordinates on the right. Note that there is no tension this time, because Bézier curves don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension Catmull-Rom curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/51da95daf2645abd9903a4e28749a6d01826625c.svg",style:{width:"21.150000000000002rem",height:"5.625rem"}})),r.createElement("p",null,"Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom splines, the choice mostly being which drawing algorithms we have natively available."))}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Creating a Catmull-Rom curve from three points"}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?"),r.createElement("p",null,"As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve."),r.createElement("p",null,"Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of ",r.createElement("i",null,"n")," points, in order to draw the equivalent curve using cubic Bézier curves we need a massive ",r.createElement("i",null,"3n-1")," points (and that's without double-counting points that are shared by consecutive cubic curves)."),r.createElement("p",null,'In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there\'s the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:'),r.createElement(i,{preset:"threepanel",title:"Catmull-Rom curve fitting",setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"As should be obvious by now, Catmull-Rom curves are great for \"fitting a curvature to some points\", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",style:{width:"20.77515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",style:{width:"14.99985rem",height:"2.7rem"}})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",style:{width:"39.07485rem",height:"1.125rem"}})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",style:{width:"6.9750000000000005rem",height:"2.7rem"}})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e940f26afcd5f80371b6b72a8f52e217da64721d.svg",style:{width:"16.50015rem",height:"13.275rem"}})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",style:{width:"18.225rem",height:"2.17485rem"}})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6e512d83529089b2294b45659b826bb24a598356.svg",style:{width:"29.025000000000002rem",height:"5.175rem"}})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d13ad085587983ba3fa6fe9051dcc2f6a3d0917c.svg",style:{width:"27.675rem",height:"9.525150000000002rem"}})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",style:{width:"18.225rem",height:"4.5rem"}})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points.  However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{
+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(0),i=n(4),a=new i,o="boundingbox",s=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:a.getTitle(o)}},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),e.setColor("red"),t.extrema().values.forEach(function(n){e.drawCircle(t.get(n),3)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(600,300),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/9)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points);var n=0|Math.round(this.points.length/2);this.knots[n+0]=this.knots[n],this.knots[n+1]=this.knots[n],this.knots[n+2]=this.knots[n];for(var r=n+3;r<this.knots.length;r++)this.knots[r]=this.knots[r-1]+1;this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(107),a=n(6),o=n(111),s=n(116),l=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:"B-Splines"}},bindKnots:function(e,t,n){console.log("binding knots for "+n),this.refs[n].bindKnots(e,t)},bindWeights:function(e,t,n,r){this.refs[r].bindWeights(e,t,n)},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. Easily confused to mean Bézier splines, that's not actually what they are; they are \"basis function\" splines, which makes a lot of difference, which we'll be looking at in this section. We're not going to dive as deep into B-Splines as we have for Bézier curves (that would be an entire primer on its own) but we'll be looking at how B-Splines work, what kind of maths is involved in computing them, and how to draw them based on a number of parameters that you can pick for individual B-Splines."),r.createElement("p",null,"First off: B-Splines are ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Piecewise"},'"piecewise polynomial interpolation curves"'),', where the "single curve" is built by performing polynomial interpolation over a set of points, using a sliding window of a fixed number of points. For instance, a "cubic" B-Spline defined by twelve points will have its curve built by evaluating the polynomial interpolation of four points, and the curve can be treated as a lot of different sections, each controlled by four points at a time, such that the full curve consists of smoothly connected sections defined by points ',"{","1,2,3,4","}",", ","{","2,3,4,5","}",", ..., ","{","8,9,10,11","}",", and finally ","{","9,10,11,12","}",", for eight sections."),r.createElement("p",null,"What do they look like? They look like this! .. okay that's an empty graph, but simply click to place some point, with the stipulation that you need at least four point to see any curve. More than four points simply draws a longer B-Spline curve:"),r.createElement(i,{sketch:n(125)}),r.createElement("p",null,"The important part to notice here is that we are ",r.createElement("strong",null,"not"),' doing the same thing with B-Splines that we do for poly-Béziers or Catmull-Rom curves: both of the latter simply define new sections as literally "new sections based on new points", so a 12 point cubic poly-Bézier curve is actually impossible, because we start with a four point curve, and then add three more points for each section that follows, so we can only have 4, 7, 10, 13, 16, etc point Poly-Béziers. Similarly, while Catmull-Rom curves can grow by adding single points, this addition of a single point introduces three implicit Bézier points. Cubic B-Splines, on the other hand, are smooth interpolations of ',r.createElement("em",null,"each possible curve involving four consecutive points"),", such that at any point along the curve except for our start and end points, our on-curve coordinate is defined by four control points."),r.createElement("p",null,"Consider the difference to be this:"),r.createElement("ul",null,r.createElement("li",null,"for Bézier curves, the curve is defined as an interpolation of points, but:"),r.createElement("li",null,"for B-Splines, the curve is defined as an interpolation of ",r.createElement("em",null,"curves"),".")),r.createElement("p",null,"In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work."),r.createElement("h2",null,"How to compute a B-Spline curve: some maths"),r.createElement("p",null,"Given a B-Spline of degree ",r.createElement("code",null,"d")," and thus order ",r.createElement("code",null,"k=d+1")," (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and ",r.createElement("code",null,"n")," control points ",r.createElement("code",null,"P",r.createElement("sub",null,"0"))," through ",r.createElement("code",null,"P",r.createElement("sub",null,"n-1")),", we can compute a point on the curve for some value ",r.createElement("code",null,"t")," in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluting the following function:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/329da80e737b0005f4dbe4c84ff868bde5dfaee0.svg",style:{width:"11.775150000000002rem",height:"3.00015rem"}})),r.createElement("p",null,'Which, honestly, doesn\'t tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the ',r.createElement("em",null,"N(...)")," function, subscipted with an obvious parameter ",r.createElement("code",null,"i"),", which comes from our summation, and some magical parameter ",r.createElement("code",null,"k"),". So we need to know two things: 1. what does N(t) do, and 2. what is that ",r.createElement("code",null,"k"),"? Let's cover both, in reverse order."),r.createElement("p",null,"The parameter ",r.createElement("code",null,"k"),' represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or tops influencing the total curvature as a "knot on the curve". Doing so for a degree ',r.createElement("code",null,"d")," B-Spline with ",r.createElement("code",null,"n")," control point gives us ",r.createElement("code",null,"d + n + 1")," knots, defining ",r.createElement("code",null,"d + n")," intervals along the curve, and it is these intervals that the above ",r.createElement("code",null,"k")," subscript to the N() function applies to."),r.createElement("p",null,"Then the N() function itself. What does it look like?"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c10575fb591062784484357356796a4c0be4f83e.svg",style:{width:"38.39985rem",height:"3.15rem"}})),r.createElement("p",null,"So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where ",r.createElement("code",null,"i")," goes up, and ",r.createElement("code",null,"k")," goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following ",r.createElement("code",null,"i"),"/",r.createElement("code",null,"k")," values:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6664a4fc5832059bbc68eaa8068a4b2577e1d96a.svg",style:{width:"16.725150000000003rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And this function finally has a straight up evaluation: if a ",r.createElement("code",null,"t")," value lies within a knot-specific interval once we reach a ",r.createElement("code",null,"k=1"),' value, it "counts", otherwise it doesn\'t. We did cheat a little, though, because for all these values we need to scale our ',r.createElement("code",null,"t")," value first, so that it lies in the interval bounded by ",r.createElement("code",null,"knots[d]")," and ",r.createElement("code",null,"knots[n]"),", which are the start point and end point where curvature is controlled by exactly ",r.createElement("code",null,"order")," control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map ",r.createElement("code",null,"t")," from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead."),r.createElement("h2",null,"Can we simplify that?"),r.createElement("p",null,"We can, yes."),r.createElement("p",null,"People far smarter than us have looked at this work, and two in particular —",r.createElement("a",{href:"http://www.npl.co.uk/people/maurice-cox"},"Maurice Cox")," and ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Carl_R._de_Boor"},"Carl de Boor"),"— came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating ",r.createElement("em",null,"d(t)")," on a curve section between knots ",r.createElement("em",null,"i")," and ",r.createElement("em",null,"i+1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3780a420cd9b1bc59bec2c49bbd29f5e58497a3c.svg",style:{width:"18.75015rem",height:"1.27485rem"}})),"This is another recursive function, with ",r.createElement("em",null,"k")," values decreasing from the curve order to 1, and the value ",r.createElement("em",null,"α")," (alpha) defined by:",r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ba3b25cd54993b4601d8f415bc4cde73af4fc460.svg",style:{width:"17.325rem",height:"2.7rem"}})),r.createElement("p",null,'That looks complicated, but it\'s not. Computing alpha is just a fraction involving known, plain numbers and once we have our alpha value, computing (1-alpha) is literally just "computing one minus alpha". Computing this d() function is thus simply a matter of "computing simple arithmetics but with recursion", which might be computationally expensive because we\'re doing "a lot of" steps, but is also computationally cheap because each step only involves very simple maths. Of course as before the recursion has to stop:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1405067abebab73574934e3e69d7a7158106c744.svg",style:{width:"25.34985rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So, we see two stopping conditions: either ",r.createElement("code",null,"i")," becomes 0, in which case d() is zero, or ",r.createElement("code",null,"k"),' becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.'),r.createElement("p",null,"Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily: we just need to compute a triangle of interconnected values. For instance, d() for i=3, k=3 yields the following triangle:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a0a1069b001c75a1fab7f40ffa8bc403e1408f0d.svg",style:{width:"28.87515rem",height:"18.300150000000002rem"}})),r.createElement("p",null,"That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2): d(3,3) = a(3,3) x d(2,3) + (1-a(3,3)) x d(2,2)... and we simply keep expanding our triangle until we reach the terminating function parameters. Done deal!"),r.createElement("p",null,"One thing we need to keep in mind is that we're working with a spline that is contrained by its control points, so even though the ",r.createElement("code",null,"d(..., k)")," values are zero or one at the lowest level, they are really \"zero or one, times their respective control point\", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point: that's pretty essential!"),r.createElement("p",null,'If we run this computation "down", starting at d(3,3), then without special code in place we would be computing quite a few terms multiple times at each step. On the other hand, we can also start with that last "column", we can generate the terminating d() values first, then compute the a() constants, perform our multiplcations, generate the previous step\'s d() values, compute their a() constants, do the multiplications, etc. until we end up all the way back at the top. If we run our computation this way, we don\'t need any explicit caching, we can just "recycle" the list of numbers we start with and simply update them as we move up the triangle. So, let\'s implement that!'),r.createElement("h2",null,"Cool, cool... but I don't know what to do with that information"),r.createElement("p",null,"I know, this is pretty mathy, so let's have a look at what happens when we change parameters here. We can't change the maths for the interpolation functions, so that gives us only one way to control what happens here: the knot vector itself. As such, let's look at the graph that shows the interpolation functions for a cubic B-Spline with seven points with a uniform knot vector (so we see seven identical functions), representing how much each point (represented by one function each) influences the total curvature, given our knot values. And, because exploration is the key to discovery, let's make the knot vector a thing we can actually manipulate. Normally a proper knot vector has a constraint that any value is strictly equal to, or larger than the previous ones, but screw it this is programming, let's ignore that hard restriction and just mess with the knots however we like."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"interpolation-graph"}),r.createElement(i,{sketch:n(128),controller:function(t,n){return e.bindKnots(t,n,"interpolation-graph")}})),r.createElement("p",null,"Changing the values in the knot vector changes how much each point influences the total curvature (with some clever knot value manipulation, we can even make the influence of certain points disappear entirely!), so we can see that while the control points define the hull inside of which we're going to be drawing a curve, it is actually the knot vector that determines the actual ",r.createElement("em",null,"shape")," of the curve inside that hull."),r.createElement("p",null,"After reading the rest of this section you may want to come back here to try some specific knot vectors, and see if the resulting interpolation landscape makes sense given what you will now think should happen!"),r.createElement("h2",null,"Running the computation"),r.createElement("p",null,"Unlike the de Casteljau algorithm, where the ",r.createElement("code",null,"t")," value stays the same at every iteration, for B-Splines that is not the case, and so we end having to (for each point we evaluate) run a fairly involving bit of recursive computation. The algorithm is discussed on ",r.createElement("a",{href:"http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/de-Boor.html"},"this Michigan Tech")," page, but an easier to read version is implemented by ",r.createElement("a",{href:"https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71"},"b-spline.js"),", so we'll look at its code."),r.createElement("p",null,"Given an input value ",r.createElement("code",null,"t"),", we first map the input to a value from the domain [0,1] to the domain [knots[degree], knots[knots.length - 1 - degree]. Then, we find the section number ",r.createElement("code",null,"s")," that this mapped ",r.createElement("code",null,"t")," value lies on:"),r.createElement("pre",null,"\n        for(s=domain[0]; s < domain[1]; s++) {\n          if(knots[s] <= t && t <= knots[s+1]) break;\n        }"),r.createElement("p",null,"after running this code, ",r.createElement("code",null,"s")," is the index for the section the point will lie on. We then run the algorithm mentioned on the MU page (updated to use this description's variable names):"),r.createElement("pre",null,"\n        let v = copy of control points\n\n        for(let L = 1; L <= order; L++) {\n          for(let i=s; i > s + L - order; i--) {\n            let numerator = t - knots[i]\n            let denominator = knots[i - L + order] - knots[i]\n            let alpha = numerator / denominator\n            let v[i] = alpha * v[i] + (1-alpha) * v[i-1]\n          }\n        }"),r.createElement("p",null,'(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at ',r.createElement("code",null,"i=s")," at each level of the interpolation, and we stop when ",r.createElement("code",null,"i = s - order + level"),", so we always end up with a value for ",r.createElement("code",null,"i")," such that those ",r.createElement("code",null,"v[i-1]")," don't try to use an array index that doesn't exist)"),r.createElement("h2",null,"Open vs. closed paths"),r.createElement("p",null,"Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are ",r.createElement("em",null,"the same point"),". However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order ",r.createElement("code",null,"d")," B-Spline, we need to make the last ",r.createElement("code",null,"d")," point the same as the first ",r.createElement("code",null,"d")," points. And the easiest way to do this is to simply append ",r.createElement("code",null,"points.splice(0,d)")," to ",r.createElement("code",null,"points"),". Done!"),r.createElement("p",null,'Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for ',r.createElement("code",null,"points[0]")," and ",r.createElement("code",null,"points[n-k]")," etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects."),r.createElement("h2",null,"Manipulating the curve through the knot vector"),r.createElement("p",null,"The most important thing to understand when it comes to B-Splines is that they work ",r.createElement("em",null,"because"),' of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the ',r.createElement("em",null,"values")," that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:"),r.createElement("ol",null,r.createElement("li",null,"we can use a uniform knot vector, with equally spaced intervals,"),r.createElement("li",null,"we can use a non-uniform knot vector, without enforcing equally spaced internvals,"),r.createElement("li",null,'we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and'),r.createElement("li",null,"we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.")),r.createElement("h3",null,"Uniform B-Splines"),r.createElement("p",null,"The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines ",r.createElement("em",null,"the same intervals"),", or even [0,2,3,...,18,20,22], which also defines ",r.createElement("em",null,"the same intervals"),", just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i<r+1+n;i++)this.drawN(i,n,e,(this.width-e)/(2*(r+2)),this.height-2*e)},drawN:function(e,t,n,i,a){this.stroke(r[e]);this.knots;this.beginPath();for(var o=e-1,s=o,l=.1,u=e+t+1;s<u;s+=l){var c=n+e*i+s*i,h=this.height-n-this.N(e,t,s)*a;this.vertex(c,h)}this.endPath()},N:function(e,t,n){var r=this.knots[e],i=this.knots[e+1],a=this.knots[e+t-1],o=this.knots[e+t];if(1===t)return r<=n&&n<=i?1:0;var s=n-r,l=a-r,u=0===l?0:s/l,c=o-n,h=o-i,d=0===h?0:c/h,f=0;if(0!==u){var p=this.ensureN(e,t-1,n);f=void 0===p?this.N(e,t-1,n):p}var m=0;if(0!==d){var g=this.ensureN(e+1,t-1,n);m=void 0===g?this.N(e+1,t-1,n):g}return this.cacheN(e,t,n,u*f+d*m),this.cache.N[e][t][n]},ensureN:function(e,t,n){this.cache.N||(this.cache.N=[]);var r=this.cache.N;return r[e]||(r[e]=[]),r[e][t]||(r[e][t]=[]),r[e][t][n]},cacheN:function(e,t,n,r){this.ensureN(e,t,n),this.cache.N[e][t][n]=r}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points,!0),this.props.controller&&this.props.controller(this,this.knots),this.draw()},
+draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,weights:[],setup:function(){this.size(400,400);for(var e=2*Math.PI,t=this.width/3,n=0;n<6;n++)this.points.push({x:this.width/2+t*Math.cos(n/6*e),y:this.height/2+t*Math.sin(n/6*e)});this.points=this.points.concat(this.points.slice(0,3)),this.closed=this.degree,this.knots=this.formKnots(this.points),this.weights=this.formWeights(this.points),this.props.controller&&this.props.controller(this,this.knots,this.weights,this.closed),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="canonical",s=r.createClass({displayName:"Canonical",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(6),a=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:"Bézier curves and Catmull-Rom curves"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Taking an excursion to different splines, the other common design curve is the ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline"},"Catmull-Rom spline"),". Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one into the other, and back, with some simple substitutions?"),r.createElement("p",null,'Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, except the first and last, which makes sense if you read the "natural language" description for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point P',r.createElement("sub",null,"x"),", has a tangent along the line P",r.createElement("sub",null,"x-1")," to P",r.createElement("sub",null,"x+1"),". The curve runs from points P",r.createElement("sub",null,"2")," to  P",r.createElement("sub",null,"n-1"),', and has a "tension" that determines how fast the curve passes through each point. The lower the tension, the faster the curve goes through each point, and the bigger its local tangent is.'),r.createElement("p",null,"I'll be showing the conversion to and from Catmull-Rom curves for the tension that the Processing language uses for its Catmull-Rom algorithm."),r.createElement("p",null,"We start with showing the Catmull-Rom matrix form:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5fc1c44e623f2a9fbeefdaa204557479e3debf5a.svg",style:{width:"30.150000000000002rem",height:"5.70015rem"}})),r.createElement("p",null,"However, there's something funny going on here: the coordinate column matrix looks weird. The reason is that Catmull-Rom curves are actually curve segments that are described by two points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead, this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1 with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate 4). So if we want to express this as a matrix form based on four coordinates, we get this representation instead:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/40b9ca9b5755a4be49517ddfa630fef7b8e23067.svg",style:{width:"29.475rem",height:"6.525rem"}})),r.createElement("div",{className:"note"},r.createElement("h2",null,"Where did that 2 come from?"),r.createElement("p",null,"Catmull-Rom splines are based on the concept of tension: the higher the tensions, the shorter the tangents at the departure and arrival points. The basic Catmull-Rom curve arrives and departs with tangents equal to half the distance between the two adjacent points, so that's where that 2 came from."),r.createElement("p",null,'However, the "real" matrix is this:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7bf9b5e971866babedd991ccdde5c4ab104297e5.svg",style:{width:"24.75rem",height:"6.60015rem"}})),r.createElement("p",null,"This bakes in the tension factor τ explicitly.")),r.createElement("p",null,'Plugging this into the "two coordinates and two tangent vectors" matrix form, we get:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4818f8797c35f23c2b9883aa986b1129b2fa151a.svg",style:{width:"21.45015rem",height:"5.70015rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/08f77989369f664cbc0fb7526791efd4c5299d70.svg",style:{width:"35.47485rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7ae769c5370469b16523bab6f34abf0dd6749be.svg",style:{width:"28.425150000000002rem",height:"5.54985rem"}})),r.createElement("p",null,"So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7250f1c57e2bd66ec4349e4e88db4d5d74401a06.svg",style:{width:"50.85rem",height:"5.54985rem"}})),r.createElement("p",null,"The difference is somewhere in the actual hermite matrix, since the ",r.createElement("em",null,"t")," and coordinate values are identical, so let's solve that matrix equasion:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8a42b24fca3aaf6b8ec08e84b7e91c43e26e8acf.svg",style:{width:"28.575rem",height:"5.54985rem"}})),r.createElement("p",null,"We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the Bézier matrix on the right side of the equals sign:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e111d6e846f4d7204dec484005f74993e66c6c9.svg",style:{width:"58.19985rem",height:"5.70015rem"}})),r.createElement("p",null,"Which gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f94b80113772d90a4fbc93d4495cb5767e5c8123.svg",style:{width:"12.6rem",height:"5.47515rem"}})),r.createElement("p",null,"Multiplying this ",r.createElement("strong",null,r.createElement("em",null,"A"))," with our coordinates will give us a proper Bézier matrix expression again:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d088274e440ceeac2916a0f32176682d776c1c57.svg",style:{width:"31.725rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9e68f80b270d3445d9f9cb28ff2c5aed219aa9d2.svg",style:{width:"25.650000000000002rem",height:"6.60015rem"}})),r.createElement("p",null,"So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning the Catmull-Rom coordinates on the left into the Bézier coordinates on the right (with τ being our tension factor):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f0c5a707b590eaf8899a927ce39fd186a6acecf3.svg",style:{width:"18.07515rem",height:"6.67485rem"}})),r.createElement("p",null,"And the other way around, a Bézier to Catmull-Rom conversion requires turning the Bézier coordinates on the left this time into the Catmull-Rom coordinates on the right. Note that there is no tension this time, because Bézier curves don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension Catmull-Rom curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/51da95daf2645abd9903a4e28749a6d01826625c.svg",style:{width:"21.150000000000002rem",height:"5.625rem"}})),r.createElement("p",null,"Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom splines, the choice mostly being which drawing algorithms we have natively available."))}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Creating a Catmull-Rom curve from three points"}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?"),r.createElement("p",null,"As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve."),r.createElement("p",null,"Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of ",r.createElement("i",null,"n")," points, in order to draw the equivalent curve using cubic Bézier curves we need a massive ",r.createElement("i",null,"3n-1")," points (and that's without double-counting points that are shared by consecutive cubic curves)."),r.createElement("p",null,'In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there\'s the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:'),r.createElement(i,{preset:"threepanel",title:"Catmull-Rom curve fitting",setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"As should be obvious by now, Catmull-Rom curves are great for \"fitting a curvature to some points\", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",style:{width:"20.77515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",style:{width:"14.99985rem",height:"2.7rem"}})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",style:{width:"39.07485rem",height:"1.125rem"}})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",style:{width:"6.9750000000000005rem",height:"2.7rem"}})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e940f26afcd5f80371b6b72a8f52e217da64721d.svg",style:{width:"16.50015rem",height:"13.275rem"}})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",style:{width:"18.225rem",height:"2.17485rem"}})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6e512d83529089b2294b45659b826bb24a598356.svg",style:{width:"29.025000000000002rem",height:"5.175rem"}})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d13ad085587983ba3fa6fe9051dcc2f6a3d0917c.svg",style:{width:"27.675rem",height:"9.525150000000002rem"}})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",style:{width:"18.225rem",height:"4.5rem"}})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points.  However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{
 preset:"arcfitting",title:"Cubic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,'We see two curves here; in blue, our "guessed" curve and its control points, and in grey/black, the true curve fit, with proper control points that were shifted in, along line between our guessed control points, such that the derivatives at the start and end points are correct.'),r.createElement("p",null,'We can already seethat cubic curves are a lot better than quadratic curves, and don\'t look all that wrong until we go well past a quarter circle; ⅜th starts to hint at problems, and half a circle has an obvious "gap" between the real circle and the cubic approximation. Anything past that just looks plain ridiculous... but quarter curves actually look pretty okay!'),r.createElement("p",null,'So, maths time again: how okay is "okay"? Let\'s apply some more maths to find out.'),r.createElement("p",null,"Unlike for the quadratic curve, we can't use ",r.createElement("i",null,"t=0.5")," as our reference point because by its very nature it's one of the three points that are actually guaranteed to lie on the circular curve. Instead, we need a different ",r.createElement("i",null,"t")," value. If we run some analysis on the curve we find that the actual ",r.createElement("i",null,"t"),' value at which the curve is furthest from what it should be is 0.211325 (rounded), but we don\'t know "why", since finding this value involves root-finding, and is nearly impossible to do symbolically without pages and pages of math just to express one of the possible solutions.'),r.createElement("p",null,"So instead of walking you through the derivation for that value, let's simply take that ",r.createElement("i",null,"t")," value and see what the error is for circular arcs with an angle ranging from 0 to 2π:"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-2pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ 2π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:"))))),r.createElement("p",null,"We see that cubic Bézier curves are much better when it comes to approximating circular arcs, with an error of less than 0.027 at the two \"bulge\" points for a quarter circle (which had an error of 0.06 for quadratic curves at the mid point), and an error near 0.001 for an eighth of a circle, so we're getting less than half the error for a quarter circle, or: at a slightly lower error, we're getting twice the arc. This makes cubic curves quite useful!"),r.createElement("p",null,'In fact, the precision of a cubic curve at a quarter circle is considered "good enough" by so many people that it\'s generally considered "just fine" to use four cubic Bézier curves to fake a full circle when no circle primitives are available; generally, people won\'t notice that it\'s not a real circle unless you also happen to overlay an actual circle, so that the difference becomes obvious.'),r.createElement("p",null,'So with the error analysis out of the way, how do we actually compute the coordinates needed to get that "true fit" cubic curve? The first observation is that we already know the start and end points, because they\'re the same as for the quadratic attempt:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"But we now need to find two control points, rather than one. If we want the derivatives at the start and end point to match the circle, then the first control point can only lie somewhere on the vertical line through S, and the second control point can only lie somewhere on the line tangent to point E, which means:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4df65dae78bc5a0e6c5f23a2faae9a9d7a8b39b3.svg",style:{width:"8.325000000000001rem",height:"2.55015rem"}})),r.createElement("p",null,'where "a" is some scaling factor, and:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cb32f8f9c3ae2b264a48003c237a798d02dc8935.svg",style:{width:"11.62485rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,'where "b" is also some scaling factor.'),r.createElement("p",null,"Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonoetric identities, so if you just want to see the final result just skip past the next section!"),r.createElement("div",{className:"note"},r.createElement("h2",null,"Let's do this thing."),r.createElement("p",null,"Unlike for the quadratic case, we need some more information in order to compute ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),", since they're no longer dependent variables. First, we observe that the curve is symmetrical, so whatever values we end up finding for C",r.createElement("sub",null,"1")," will apply to C",r.createElement("sub",null,"2")," as well (rotated along its tangent), so we'll focus on finding the location of C",r.createElement("sub",null,"1")," only. So here's where we do something that you might not expect: we're going to ignore for a moment, because we're going to have a much easier time if we just solve this problem with geometry first, then move to calculus to solve a much simpler problem."),r.createElement("p",null,"If we look at the triangle that is formed between our starting point, or initial guess C",r.createElement("sub",null,"1"),"and our real C",r.createElement("sub",null,"1"),", there's something funny going on: if we treat the line ","{","start,guess","}"," as our opposite side, the line ","{","guess,real","}"," as our adjacent side, with ","{","start,real","}"," our hypothenuse, then the angle for the corner hypothenuse/adjacent is half that of the arc we're covering. Try it: if you place the end point at a quarter circle (pi/2, or 90 degrees), the angle in our triangle is half a quarter (pi/4, or 45 degrees). With that knowledge, and a knowledge of what the length of any of our lines segments are (as a function), we can determine where our control points are, and thus have everything we need to find the error distance function. Of the three lines, the one we can easiest determine is ","{","start,guess","}",", so let's find out what the guessed control point is. Again geometrically, because we have the benefit of an on-curve ",r.createElement("i",null,"t=0.5")," value."),r.createElement("p",null,"The distance from our guessed point to the start point is exactly the same as the projection distance we looked at earlier. Using ",r.createElement("i",null,"t=0.5"),' as our point "B" in the "A,B,C" projection, then we know the length of the line segment ',"{","C,A","}",", since it's d",r.createElement("sub",null,"1")," = ","{","A,B","}"," + d",r.createElement("sub",null,"2")," = ","{","B,C","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b15a274c1e0a6aeeaf517b5d2c8ee0a7997dd617.svg",style:{width:"27.675rem",height:"2.32515rem"}})),r.createElement("p",null,"So that just leaves us to find the distance from ",r.createElement("i",null,"t=0.5")," to the baseline for an arbitrary angle φ, which is the distance from the centre of the circle to our ",r.createElement("i",null,"t=0.5")," point, minus the distance from the centre to the line that runs from start point to end point. The first is the same as the point P we found for the quadratic curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"And the distance from the origin to the line start/end is another application of angles, since the triangle ","{","origin,start,C","}"," has known angles, and two known sides. We can find the length of the line ","{","origin,C","}",", which lets us trivially compute the coordinate for C:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9be55fb38d5d30bbc6c7140afb1c7bc097bc044e.svg",style:{width:"18.675rem",height:"5.3248500000000005rem"}})),r.createElement("p",null,"With the coordinate C, and knowledge of coordinate B, we can determine coordinate A, and get a vector that is identical to the vector ","{","start,guess","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/262f2eca63105779f30a0a5445cf76f60786039a.svg",style:{width:"27.675rem",height:"3.67515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e83ebbac13a84ef6036bf4be57b3d1b6cb316f8.svg",style:{width:"14.99985rem",height:"3.29985rem"}})),r.createElement("p",null,"Which means we can now determine the distance ","{","start,guessed","}",", which is the same as the distance","{","C,A","}",", and use that to determine the vertical distance from our start point to our C",r.createElement("sub",null,"1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c87e454fb11ef7f15c7386e83ca1ce41a004d8a7.svg",style:{width:"17.850150000000003rem",height:"4.64985rem"}})),r.createElement("p",null,"And after this tedious detour to find the coordinate for C",r.createElement("sub",null,"1"),", we can find C",r.createElement("sub",null,"2")," fairly simply, since it's lies at distance -C",r.createElement("sub",null,"1y")," along the end point's tangent:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/25f027074b6af8ca7b640e27636e3bf89c28afdb.svg",style:{width:"36.675000000000004rem",height:"6.89985rem"}})),r.createElement("p",null,"And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.")),r.createElement("p",null,"So, to recap, given an angle φ, the new control coordinates are:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c4d82e44d1c67dda8ba26aa6da0f406d05eba618.svg",style:{width:"15.075000000000001rem",height:"2.55015rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3a4b1ee00eebb7697e5513ef9df673928913252e.svg",style:{width:"23.02515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,'And, because the "quarter curve" special case comes up so incredibly often, let\'s look at what these new control points mean for the curve coordinates of a quarter curve, by simply filling in φ = π/2:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/63e0936b4849d4cdbb9a2e0909181259be951e4d.svg",style:{width:"28.65015rem",height:"1.94985rem"}})),r.createElement("p",null,"Which, in decimal values, rounded to six significant digits, is:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fd12e65204a31319b66355c6ff99e6b3d9603b05.svg",style:{width:"28.65015rem",height:"1.125rem"}})),r.createElement("p",null,"Of course, this is for a circle with radius 1, so if you have a different radius circle, simply multiply the coordinate by the radius you need. And then finally, forming a full curve is now a simple a matter of mirroring these coordinates about the origin:"),r.createElement(i,{preset:"simple",title:"Cubic Bézier circle approximation",draw:this.drawCircle,static:!0}))}});e.exports=u},function(e,t,n){"use strict";var r=n(0),i={width:"calc(960px + 2em)",marginTop:0,borderTop:"1px solid rgba(255, 0, 0, 0.5)",paddingTop:"3em"},a=r.createElement("section",{id:"comments",style:i},r.createElement("h2",null,"Comments and questions"),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",{className:"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!"),r.createElement("div",{id:"disqus_thread"})),o=r.createClass({displayName:"CommentsAndQuestions",getDefaultProps:function(){return{title:"Comments and Questions"}},componentDidMount:function(){if("undefined"!=typeof document){var e=document.createElement("script");e.setAttribute("async","async"),e.src="lib/site/disqus.js",document.head.appendChild(e)}},render:function(){return a}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="components",s=r.createClass({displayName:"Components",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="control",s=r.createClass({displayName:"Control",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"CurveIntersections",getDefaultProps:function(){return{title:"Curve/curve intersection"}},setup:function(e){this.api=e,e.setPanelCount(3);var t=new e.Bezier(10,100,90,30,40,140,220,220),n=new e.Bezier(5,150,180,20,80,250,210,190);e.setCurve(t,n),this.pairReset()},pairReset:function(){this.prevstep=0,this.step=0},draw:function(e,t){var n=this;e.reset();var r={x:0,y:0};t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var i=e.getPanelWidth(),a=e.getPanelHeight();if(r.x+=i,e.drawLine({x:0,y:0},{x:0,y:a},r),0===this.step&&(this.pairs=[{c1:t[0],c2:t[1]}]),this.step!==this.prevstep){var s=this.pairs;this.pairs=[],this.finals=[],s.forEach(function(t){if(t.c1.length()<.6&&t.c2.length()<.6)return n.finals.push(t);var i=t.c1.split(.5);e.setColor("black"),e.drawCurve(t.c1,r),e.setColor("red"),e.drawbbox(i.left.bbox(),r),e.drawbbox(i.right.bbox(),r);var a=t.c2.split(.5);e.setColor("black"),e.drawCurve(t.c2,r),e.setColor("blue"),e.drawbbox(a.left.bbox(),r),e.drawbbox(a.right.bbox(),r),i.left.overlaps(a.left)&&n.pairs.push({c1:i.left,c2:a.left}),i.left.overlaps(a.right)&&n.pairs.push({c1:i.left,c2:a.right}),i.right.overlaps(a.left)&&n.pairs.push({c1:i.right,c2:a.left}),i.right.overlaps(a.right)&&n.pairs.push({c1:i.right,c2:a.right})}),this.prevstep=this.step}else this.pairs.forEach(function(t){e.setColor("black"),e.drawCurve(t.c1,r),e.drawCurve(t.c2,r),e.setColor("red"),e.drawbbox(t.c1.bbox(),r),e.setColor("blue"),e.drawbbox(t.c2.bbox(),r)});0===this.pairs.length&&(this.pairReset(),this.draw(e,t)),r.x+=i,e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:a},r);var l,u,c=t[0].intersects(t[1]).map(function(e){var t=e.split("/").map(function(e){return parseFloat(e)});return{t1:t[0],t2:t[1]}}),h=c[0],d=function(e,t){return o(e.t1-t.t1)<.01&&o(e.t2-t.t2)<.01};for(u=1;u<c.length;u++)l=c[u],d(h,l)?c.splice(u--,1):h=l;e.setColor("lightblue"),e.drawCurve(t[0],r),e.drawCurve(t[1],r),e.setColor("blue"),c.forEach(function(n){e.drawCircle(t[0].get(n.t1),3,r)})},stepUp:function(){this.step++,this.api.redraw()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Using de Casteljau\'s algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and conquer" technique:'),r.createElement("ul",null,r.createElement("li",null,"Take two curves ",r.createElement("i",null,"C",r.createElement("sub",null,"1"))," and ",r.createElement("i",null,"C",r.createElement("sub",null,"2")),", and treat them as a pair."),r.createElement("li",null,"If their bounding boxes overlap, split up each curve into two sub-curves"),r.createElement("li",null,"With ",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"2.1"))," and ",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),", form four new pairs (",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.1")),"), (",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),"), (",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.1")),"), and (",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),")."),r.createElement("li",null,"For each pair, check whether their bounding boxes overlap.",r.createElement("ul",null,r.createElement("li",null,"If their bounding boxes do not overlap, discard the pair, as there is no intersection between this pair of curves."),r.createElement("li",null,"If there ",r.createElement("em",null,"is")," overlap, rerun all steps for this pair."))),r.createElement("li",null,"Once the sub-curves we form are so small that they effectively occupy sub-pixel areas, we consider an intersection found.")),r.createElement("p",null,'This algorithm will start with a single pair, "balloon" until it runs in parallel for a large number of potential sub-pairs, and then taper back down as it homes in on intersection coordinates, ending up with as many pairs as there are intersections.'),r.createElement("p",null,"The following graphic applies this algorithm to a pair of cubic curves, one step at a time, so you can see the algorithm in action. Click the button to run a single step in the algorithm, after setting up your curves in some creative arrangement. The algorithm resets once it's found a solution, so you can try this with lots of different curves (can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)"),r.createElement(i,{preset:"clipping",title:"Curve/curve intersections",setup:this.setup,draw:this.draw},r.createElement("button",{onClick:this.stepUp},"advance one step")),r.createElement("p",null,"Self-intersection is dealt with in the same way, except we turn a curve into two or more curves first based on the inflection points. We then form all possible curve pairs with the resultant segments, and run exactly the same algorithm. All non-overlapping curve pairs will be removed after the first iteration, and the remaining steps home in on the curve's self-intersection points."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="decasteljau",s=r.createClass({displayName:"deCasteljau",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="derivatives",s=r.createClass({displayName:"Derivatives",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="explanation",l=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:o.getTitle(s)}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="extended",s=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="extremities",s=r.createClass({displayName:"Extremities",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="flattening",s=n(15),l=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:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"GraduatedOffsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Graduated curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("blue");var n=t.outline(0,0,e.distance,e.distance);n.curves.forEach(function(t){return e.drawCurve(t)})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"What if we want to do graduated offsetting, starting at some distance ",r.createElement("i",null,"s")," but ending at some other distance ",r.createElement("i",null,"e"),'? well, if we can compute the length of a curve (which we can if we use the Legendre-Gauss quadrature approach) then we can also determine how far "along the line" any point on the curve is. With that knowledge, we can offset a curve so that its offset curve is not uniformly wide, but graduated between with two different offset widths at the start and end.'),r.createElement("p",null,'Like normal offsetting we cut up our curve in sub-curves, and then check at which distance along the original curve each sub-curve starts and ends, as well as to which point on the curve each of the control points map. This gives us the distance-along-the-curve for each interesting point in the sub-curve. If we call the total length of all sub-curves seen prior to seeing "the\\ current" sub-curve ',r.createElement("i",null,"S")," (and if the current sub-curve is the first one, ",r.createElement("i",null,"S")," is zero), and we call the full length of our original curve ",r.createElement("i",null,"L"),", then we get the following graduation values:"),r.createElement("ul",null,r.createElement("li",null,"start: map ",r.createElement("i",null,"S")," from interval (",r.createElement("i",null,"0,L"),") to interval ",r.createElement("i",null,"(s,e)")),r.createElement("li",null,"c1: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d1"),", 0,L, s,e)"),", d1 = distance along curve to projection of c1"),r.createElement("li",null,"c2: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d2"),", 0,L, s,e)"),", d2 = distance along curve to projection of c2"),r.createElement("li",null,"..."),r.createElement("li",null,"end: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+length(subcurve)"),", 0,L, s,e)"))),r.createElement("p",null,"At each of the relevant points (start, end, and the projections of the control points onto the curve) we know the curve's normal, so offsetting is simply a matter of taking our original point, and moving it along the normal vector by the offset distance for each point. Doing so will give us the following result (these have with a starting width of 0, and an end width of 40 pixels, but can be controlled with your up and down arrow keys):"),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="inflections",s=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:a.getTitle(o)}},setupCubic:function(e){var t=new e.Bezier(135,25,25,135,215,75,215,240);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("red"),t.inflections().forEach(function(n){e.drawCircle(t.get(n),5)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),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",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"Curve/curve intersection, however, is more complicated. Since we have no straight line to align to, we can't simply align one of the curves and be left with a simple procedure. Instead, we'll need to apply two techniques we've not covered yet: de Casteljau's algorithm, and curve splitting."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:"Manipulating a curve"}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,s=o(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=s}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,s=i+a,l=s-1,u=o(l/s),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the ',r.createElement("em",null,"t"),'-value matching that coordinate, and then letting them drag that point around. With every drag update we\'ll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.'),r.createElement(i,{preset:"moulding",title:"Moulding a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markQB,onMouseDrag:this.dragQB,onMouseUp:this.saveCurve}),r.createElement("p",null,r.createElement("strong",null,"Click-dragging the curve itself")," shows what we're using to compute the new coordinates: while dragging you will see the original points B and its corresponding ",r.createElement("i",null,"t"),"-value, the original point C for that ",r.createElement("i",null,"t"),"-value, as well as the new point B' based on the mouse cursor. Since we know the ",r.createElement("i",null,"t"),"-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e361e1235c94bbe87e95834c7fcfb6ab96e028b9.svg",style:{width:"15.600150000000001rem",height:"2.3998500000000003rem"}})),r.createElement("p",null,"For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:"),r.createElement(i,{preset:"moulding",title:"Moulding a cubic Bézier curve",setup:this.setupCubic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markCB,onMouseDrag:this.dragCB,onMouseUp:this.saveCurve}),r.createElement("p",null,"To help understand what's going on, the cubic graphic shows the full de Casteljau construction \"hull\" when repositioning point B. We compute A` in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance ",r.createElement("i",null,"t"),", because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy."),r.createElement("p",null,"First, we construct the one-level-of-de-Casteljau-up points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f813a7d607787329d242bfbfa28570c88c3e30f5.svg",style:{width:"9.975150000000001rem",height:"5.09985rem"}})),r.createElement("p",null,"And then we can compute the new control points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4ec5f4148752a3d332a922048700d2c71918342f.svg",style:{width:"11.700000000000001rem",height:"4.64985rem"}})),r.createElement("p",null,"And that's cubic curve manipulation."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",style:{width:"7.275150000000001rem",height:"1.125rem"}})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",style:{width:"10.125rem",height:"1.125rem"}})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/664fba98ea17b358941b579115bf063edf87ae17.svg",style:{width:"9.450000000000001rem",height:"3.15rem"}})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",style:{width:"12.45015rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",style:{width:"15.150150000000002rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:"Creating a curve from three points"}},setup:function(e){e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}]},onClick:function(e,t){3==t.lpts.length&&(t.lpts=[]),t.lpts.push({x:e.offsetX,y:e.offsetY}),t.redraw()},getQRatio:function(e){var t=2*e,n=t*e-t,r=n+1;return o(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return o(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},y={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},w={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(y.x-r.x),y:r.y+2*(y.y-r.y)},_={x:i.x+2*(w.x-i.x),y:i.y+2*(w.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,y),e.drawLine(l,w),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, unlike circle-fitting, which requires just three points, Bézier curve fitting requires three points, as well as a ",r.createElement("i",null,"t")," value, so we can figure out where point 'C' needs to be."),r.createElement("p",null,"The following graphic lets you place three points, and will use the preceding sections on the ABC ratio and curve construction to form a quadratic curve through them. You can move the points you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks. (There's some freedom here, so for illustrative purposes we clamped ",r.createElement("i",null,"t")," to simply be 0.5, lets us bypass some maths, since a ",r.createElement("i",null,"t")," value of 0.5 always puts C in the middle of the start--end line segment)"),r.createElement(i,{preset:"generate",title:"Fitting a quadratic Bézier curve",setup:this.setup,draw:this.drawQuadratic,onClick:this.onClick}),r.createElement("p",null,'For cubic curves we also need some values to construct the "de Casteljau line through B" with, and that gives us quite a bit of choice. Since we\'ve clamped ',r.createElement("i",null,"t"),' to 0.5, we\'ll set up a line through B parallel to the line start--end, with a length that is proportional to the length of the line B--C: the further away from the baseline B is, the wider its construction line will be, and so the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to scale the length of the construction line as we move B closer or further away from the baseline, so I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end) forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too, and if the points lie on a line, then the curve constructed has the control points very close to B, while still lying between B and the correct curve end point:'),r.createElement(i,{preset:"generate",title:"Fitting a cubic Bézier curve",setup:this.setup,draw:this.drawCubic,onClick:this.onClick}),r.createElement("p",null,'In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which ',r.createElement("i",null,"t")," value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination of ",r.createElement("i",null,"t"),' and tangent values that lead to a more "æsthetic" curve, but this will be left as an exercise to the reader, since there are many, and æsthetics are often quite personal.'))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);
-e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",style:{width:"8.400150000000002rem",height:"1.27485rem"}})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",style:{width:"21.97485rem",height:"2.7rem"}})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r<a;r++)i=n(e[r],t),i<o&&(s=r,o=i);return s/(a-1)},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.mousePt){e.setColor("red"),e.setFill("red"),e.drawCircle(e.mousePt,3);var n=this.findClosest(e._lut,e.mousePt,e.utils.dist),r=t.get(n);e.drawLine(r,e.mousePt),e.drawCircle(r,3),e.text("t = "+e.utils.round(n,2),r,{x:10,y:3})}},onMouseMove:function(e,t){t.mousePt={x:e.offsetX,y:e.offsetY},t._lut=t.curve.getLUT()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Say we have a Bézier curve and some point, not on the curve, of which we want to know which ",r.createElement("i",null,"t")," value on the curve gives us an on-curve point closest to our off-curve point. Or: say we want to find the projection of a random point onto a curve. How do we do that?"),r.createElement("p",null,"If the Bézier curve is of low enough order, we might be able to ",r.createElement("a",{href:"http://jazzros.blogspot.ca/2011/03/projecting-point-on-bezier-curve.html"},"work out the maths for how to do this"),", and get a perfect ",r.createElement("i",null,"t")," value back, but in general this is an incredibly hard problem and the easiest solution is, really, a numerical approach again. We'll be finding our ideal ",r.createElement("i",null,"t")," value using a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"binary search"),". First, we do a coarse distance-check based on ",r.createElement("i",null,"t"),' values associated with the curve\'s "to draw" coordinates (using a lookup table, or LUT). This is pretty fast. Then we run this algorithm:'),r.createElement("ol",null,r.createElement("li",null,"with the ",r.createElement("i",null,"t")," value we found, start with some small interval around ",r.createElement("i",null,"t")," (1/length_of_LUT on either side is a reasonable start),"),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is larger than the distance to ",r.createElement("i",null,"t"),", try again with the interval reduced to half its original length."),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is smaller than the distance to ",r.createElement("i",null,"t"),", replace ",r.createElement("i",null,"t")," with the smaller-distance value."),r.createElement("li",null,"after reducing the interval, or changing ",r.createElement("i",null,"t"),", go back to step 1.")),r.createElement("p",null,"We keep repeating this process until the interval is small enough to claim the difference in precision found is irrelevant for the purpose we're trying to find ",r.createElement("i",null,"t")," for. In this case, I'm arbitrarily fixing it at 0.0001."),r.createElement("p",null,'The following graphic demonstrates the result of this procedure.Simply move the cursor around, and if it does not lie on top of the curve, you will see a line that projects the cursor onto the curve based on an iteratively found "ideal" ',r.createElement("i",null,"t")," value."),r.createElement(i,{preset:"simple",title:"Projecting a point onto a Bézier curve",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="reordering",l=r.createClass({displayName:"Reordering",getDefaultProps:function(){return{title:o.getTitle(s)}},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(l.lower(e.curve))}}}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=["unite","intersect","exclude","subtract"],s=r.createClass({displayName:"Shapes",getDefaultProps:function(){return{title:"Boolean shape operations"}},getInitialState:function(){return{mode:o[0]}},setMode:function(e){this.setState({mode:e})},formPath:function(e,t,n,r,i){t=t||0,n=n||0;var a=30,o=a/2;r=r||8*a,i=i||4*a;var s=r/2,l=i/2,u=s/3,c=l/3,h=e.Paper,d=h.Path,f=h.Point,p=new d;return p.moveTo(new f(t-s+2*a,n-l)),p.cubicCurveTo(new f(t-s+o,n-l+o),new f(t-s+o,n+l-o),new f(t-s+2*a,n+l)),p.cubicCurveTo(new f(t-u,n+c),new f(t+u,n+c),new f(t+s-2*a,n+l)),p.cubicCurveTo(new f(t+s-o,n+l-o),new f(t+s-o,n-l+o),new f(t+s-2*a,n-l)),p.cubicCurveTo(new f(t+u,n-c),new f(t-u,n-c),new f(t-s+2*a,n-l)),p.closePath(!0),p.strokeColor="rgb(100,100,255)",p},setup:function(e){var t=e.getPanelWidth(),n=40,r=t/2,i=t/2;e.c1=this.formPath(e,r,i),r+=n,i+=n,e.c2=this.formPath(e,r,i),this.state.mode=o[0]},onMouseMove:function(e,t){var n=e.offsetX,r=e.offsetY;t.c2.position={x:n,y:r}},draw:function(e){e.c3&&e.c3.remove();var t=e.c1,n=e.c2,r=t[this.state.mode].bind(t),i=e.c3=r(n);i.strokeColor="red",i.fillColor="rgba(255,100,100,0.4)",e.Paper.view.draw()},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or exclusion, between two or more shapes that involve Bézier curves. For simplicity (well.. sort of, more homogeneity), we'll be looking at Poly-Bézier shapes only, but a shape that consists of a mix of lines and Bézier curves is technically a simplification (although it does mean we need to write a definition for the class of shapes that mix lines and Bézier curves. Since poly-Bézier curves are a superset, we'll be using those in the following examples)"),r.createElement("p",null,"The procedure for performing boolean operations consists, broadly, of four steps:"),r.createElement("ol",null,r.createElement("li",null,"Find the intersection points between both shapes,"),r.createElement("li",null,"cut up the shapes into multiple sections between these intersections,"),r.createElement("li",null,"discard any section that isn't part of the desired operation's resultant shape, and"),r.createElement("li",null,"link up the remaining sections to form the new shape.")),r.createElement("p",null,"Finding all intersections between two poly-Bézier curves, or any poly-line-section shape, is similar to the iterative algorithm discussed in the section on curve/curve intersection. For each segment in the poly-Bézier curve we check whether its bounding box overlaps with any of the segment bounding boxes in the other poly-Bézier curve. If so, we run normal intersection detection."),r.createElement("p",null,"After we found all intersection points, we split up our poly-Bézier curves, making sure to record which of the newly formed poly-Bézier curves might potentially link up at the points we split the originals up at. This will let us quickly glue poly-Bézier curves back together after the next step."),r.createElement("p",null,"Once we have all the new poly-Bézier curves, we run the first step of the desired boolean operation."),r.createElement("ul",null,r.createElement("li",null,'Union: discard all poly-Bézier curves that lie "inside" our union of our shapes. E.g. if we want the union of two overlapping circles, the resulting shape is the outline.'),r.createElement("li",null,'Intersection: discard all poly-Bézier curves that lie "outside" the intersection of the two shapes. E.g. if we want the intersection of two overlapping circles, the resulting shape is the tapered ellipse where they overlap.'),r.createElement("li",null,"Exclusion: none of the sections are discarded, but we will need to link the shapes back up in a special way. Flip any section that would qualify for removal under UNION rules.")),r.createElement("table",{className:"sketch"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_base.gif",height:"169px"}),r.createElement("p",null,"Two overlapping shapes.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_union.gif",height:"169px"}),r.createElement("p",null,"The unified region.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_intersection.gif",height:"169px"}),r.createElement("p",null,"Their intersection.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_exclusion.gif",height:"169px"}),r.createElement("p",null,"Their exclusion regions."))))),r.createElement("p",null,'The main complication in the outlined procedure here is determining how sections qualify in terms of being "inside" and "outside" of our shapes. For this, we need to be able to perform point-in-shape detection, for which we\'ll use a classic algorithm: getting the "crossing number" by using ray casting, and then testing for "insidedness" by applying the ',r.createElement("a",{href:"http://folk.uio.no/bjornw/doc/bifrost-ref/bifrost-ref-12.html"},"even-odd rule"),': For any point and any shape, we can cast a ray from our point, to some point that we know lies outside of the shape (such as a corner of our drawing surface). We then count how many times that line crosses our shape (remember that we can perform line/curve intersection detection quite easily). If the number of times it crosses the shape\'s outline is even, the point did not actually lie inside our shape. If the number of intersections is odd, our point did lie inside out shape. With that knowledge, we can decide whether to treat a section that such a point lies on "needs removal" (under union rules), "needs preserving" (under intersection rules), or "needs flipping" (under exclusion rules).'),r.createElement("p",null,"These operations are expensive, and implementing your own code for this is generally a bad idea if there is already a geometry package available for your language of choice. In this case, for JavaScript the most excellent ",r.createElement("a",{href:"http://paperjs.org"},"Paper.js")," already comes with all the code in place to perform efficient boolean shape operations, so rather that implement an inferior version here, I can strongly recommend the Paper.js library if you intend to do any boolean shape work."),r.createElement("p",null,"The following graphic shows Paper.js doing its thing for two shapes: one static, and one that is linked to your mouse pointer. If you move the mouse around, you'll see how the shape intersections are resolved. The base shapes are outlined in blue, and the boolean result is coloured red."),r.createElement(i,{preset:"simple",title:"Boolean shape operations with Paper.js",paperjs:!0,setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove},r.createElement("br",null),o.map(function(t){var n=e.state.mode===t?"selected":null;return r.createElement("button",{className:n,key:t,onClick:function(){this.setMode(t)}.bind(e)},t)})))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="splitting",s=r.createClass({displayName:"Splitting",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="tightbounds",s=r.createClass({displayName:"TightBounds",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),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 f=n*u/h;for(r=0;r<c.length;r++)if(c[r].d>f){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 p=0,m=["rgb(240,0,200)","rgb(0,40,200)"];e.setColor(m[p]);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[++p%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(0),i=n(4),a=new i,o="whatis",s=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:a.getTitle(o)}},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],f=h[1],p=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*(f.x-d.x),y:d.y+a*(f.y-d.y)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.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(f,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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6);e.exports={preface:{locale:"ja-JP",title:"まえがき",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"まえがき"}),r.createElement("p",null,"2次元上になにかを描くとき、普通は線を使いますが、これは直線と曲線の2つに分類することができます。直線を描くのはとても簡単で、これをコンピュータに描かせるのも容易です。直線の始点と終点をコンピュータに与えてやれば、ポン！直線が描けました。疑問の余地もありません。"),r.createElement("p",null,"しかしながら、曲線の方はもっと大きな問題です。私たちはフリーハンドでいとも簡単に曲線を描くことができますが、コンピュータの方は少し不利です。曲線の描き方を表した数学的な関数が与えられないと、コンピュータは曲線を描くことができないのです。実際には、直線でさえも関数が必要になります。直線の関数はとても簡単なので、わたしたちはよく無視してしまいますが、コンピュータにとっては直線であれ曲線であれ、線はすべて「関数」なのです。しかしこれは、コンピュータで速く計算できて、きれいな曲線が得られるような関数を見つける必要がある、ということになります。そのような関数はたくさんありますが、多くの関心を集め続け、そしてどんな場面でも使われている、ある特定の関数に対してこの記事では焦点を絞ります。この関数は「ベジエ」曲線を描きます。"),r.createElement("p",null,"ベジエ曲線は",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/ピエール・ベジェ"},"Pierre Bézier"),"から名付けられました。この曲線がデザイン作業に適していることを世界に知らしめたのが、彼なのです（ルノーに勤務し、1962年にその研究を発表しました）。ただし、この曲線を「発明」したのは彼が最初で唯一というわけではありません。数学者",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),"はシトロエンで働いていた1959年、この曲線の性質について研究し、ベジエ曲線の非常にエレガントな描き方を発見しました。これが最初だと言う人もいます。しかしながら、de Casteljauは自分の成果を発表しなかったため、「誰が最初か？」という問いに答えるのがとても難しくなっています。またベジエ曲線は、核心的には",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/セルゲイ・ベルンシュテイン"},"Sergei Natanovich Bernstein"),"が研究した「ベルンシュタイン多項式」という数学関数の一種ですが、こちらの公刊に関しては少なくとも1912年まで遡ることができます。いずれにせよ、これらはほとんど瑣末なことです。より注目すべきなのは、ベジエ曲線は取り扱いに便利だいうことです。たとえば複数のベジエ曲線を繋いで、1つの曲線に見えるようにすることができます。もしあなたがPhotoshopで「パス」を描いたり、FlashやIllustrator、Inkscapeのようなベクタードローイングソフトを使ったことがあるのであれば、そこで描いてきた曲線はベジエ曲線です。"),r.createElement("p",null,"では、これを自分でプログラムしなければならないとなったらどうでしょう？ハマりどころは何でしょうか？どうやってベジエ曲線を描くのでしょう？バウンディングボックスとは何で、どうやって交点を求め、どうやったら曲線を押し出せるのでしょうか？つまるところ、ベジエ曲線に対して行いたいあらゆる操作は、どのようにすればいいのでしょう？このページはそれに答えるためにあります。数学にとりかかりましょう！"),r.createElement("p",null,"—Pomax (Twitter上では",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{
-className:"note"},r.createElement("h2",{id:"-"},"注：ベジエの図はすべてインタラクティブになっています。"),r.createElement("p",null,"このページでは",r.createElement("a",{href:"http://pomax.github.io/bezierjs"},"Bezier.js"),"を活用し、インタラクティブな例示を行っています。また、",r.createElement("a",{href:"http://mathjax.org"},"MathJax"),"というすばらしいライブラリによって、（LaTeX式の）「本物」の数学組版を行っています。このページはWebpackを使い、Reactアプリケーションとしてオフラインで生成されていますが、このために「ソースを表示」オプションを追加することがかなり難しくなってしまいました。これをどうやって追加すべきかは今もまだ考え中ですが、かといって、数年ぶりとなる今回の更新を延期したくはありませんでした。"),r.createElement("h2",{id:"-"},"本書はオープンソースです。"),r.createElement("p",null,"この本はオープンソースソフトウェアのプロジェクトで、2つのGitHubリポジトリ上に存在しています。1つ目の",r.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo"),"は表示のためだけに用意されたバージョンで、あなたが今読んでいるものです。もう一方の",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),"は開発版で、すべてのHTML・JavaScript・CSSが含まれています。どちらのリポジトリもフォークすることができますし、あなたの好きなように使ってかまいません。ただし、これを自分の成果だと騙って売ることはもちろん除きます。=)"),r.createElement("h2",{id:"-"},"数学はどこまで難しくなりますか？"),r.createElement("p",null,"この入門に出てくる数学は、大半が高校初年度程度です。基本的な計算を理解していて、英語の読み方が分かっていれば、こなすことができるはずです。時には",r.createElement("em",null,"ずっと"),"難しい数学も出てきますが、もし理解できないように感じたら、そこは読み飛ばしても大丈夫です。節の中の「詳細欄」を飛ばしてもいいですし、厄介そうな数学があれば節の最後まで読み飛ばしてもかまいません。各節の最後にはたいてい結論を並べてありますので、これを直に利用することもできます。"),r.createElement("h2",{id:"-"},"質問・コメント："),r.createElement("p",null,"新しい節の提案があれば、",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"GitHubのissueトラッカー"),"をクリックしてください（右上にあるリポジトリのリンクからでもたどり着けます）。改訂中のため、現在はこのページにはコメント欄がありませんが、内容に関する質問がある場合にもissueトラッカーを使ってかまいません。改訂が完了したら、総合的なコメント欄を復活させる予定です。あるいは、「質問対象の節を選択して『質問』ボタンをクリック」するような項目別のシステムになるかもしれません。いずれわかります。"),r.createElement("h2",{id:"-"},"コーヒーをおごってくれませんか？"),r.createElement("p",null,"この本が気に入った場合や、取り組んでいたことに役に立つと思った場合、あるいは、この本への感謝をわたしに伝えるにはどうすればいいのかわからない場合。そのような場合には、",r.createElement("a",{href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"わたしにコーヒーをおごってください"),"。あなたが住んでいるところのコーヒー1杯の値段でかまいません。この本は小さな入門からはじまり、印刷で70ページほどに相当するようなベジエ曲線の読み物へと、年々成長してきています。そして、多くのコーヒーが執筆に費やされてきました。わたしは執筆に使った時間が惜しいとは思いませんが、もう少しコーヒーがあれば、ずっと書き続けることができるのです！")))}},introduction:{locale:"ja-JP",title:"バッとした導入",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"バッとした導入",number:"1"}),r.createElement("p",null,"まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"2次のベジエ曲線",setup:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"3次のベジエ曲線",setup:e.drawCubic,draw:e.drawCurve})),r.createElement("p",null,"ベジエ曲線は、CAD（computer aided designやCAM（computer aided manufacturing）のアプリケーションで多用されています。もちろん、Adobe Illustrator・Photoshop・Inkscape・Gimp などのグラフィックデザインアプリケーションや、SVG（scalable vector graphics）・OpenTypeフォント（otf/ttf）のようなグラフィック技術でも利用されています。ベジエ曲線はたくさんのものに使われていますので、これについてもっと詳しく学びたいのであれば……さあ、準備しましょう！"))}},whatis:{locale:"ja-JP",title:"ではベジエ曲線はどうやってできるのでしょう？",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"ではベジエ曲線はどうやってできるのでしょう？",number:"2"}),r.createElement("p",null,"ベジエ曲線がどのように動くのか、点を触ってみて感覚が摑めたかもしれません。では、実際のところベジエ曲線",r.createElement("em",null,"とは"),"いったい何でしょうか？これを説明する方法は2通りありますが、どちらの説明でも行き着く先はまったく同じです。一方は複雑な数学を使うのに対し、もう一方はとても簡単です。というわけで……簡単な説明の方から始めましょう。"),r.createElement("p",null,"ベジエ曲線は、",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/%E7%B7%9A%E5%BD%A2%E8%A3%9C%E9%96%93"},"線形補間"),"の結果です。というと難しそうに聞こえますが、誰でも幼い頃から線形補間をやってきています。例えば、何か2つのものの間を指し示すときには、いつも線形補間を行っています。線形補間とは、単純に「2点の間から点を得る」ことなのです。"),r.createElement("p",null,"例えば、2点間の距離がわかっているとして、一方の点から距離の20%だけ離れた（すなわち、もう一方の点から80%離れた）新しい点を求めたい場合、次のようにとても簡単に計算できます。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/75bb049d813d8ee084b076531823f2109cc1660f.svg",style:{width:"36.750150000000005rem",height:"6.37515rem"}}),r.createElement("p",null,"では、実際に見てみましょう。下の図はインタラクティブになっています。上下キーで補間の比率が増減しますので、どうなるか確かめてみましょう。最初に3点があり、それを結んで2本の直線が引かれています。この直線の上でそれぞれ線形補間を行うと、2つの点が得られます。この2点の間でさらに線形補間を行うと、1つの点を得ることができます。そして、あらゆる比率に対して同様に点を求め、それをすべて集めると、このようにベジエ曲線ができるのです。"),r.createElement(i,{title:"線形補間でベジエ曲線を得る",setup:e.setup,draw:e.draw,onKeyDown:e.onKeyDown}),r.createElement("p",null,"また、これが複雑な方の数学につながっていきます。微積分です。"),r.createElement("p",null,"いま上で行ったものとは似つかないように思えますが、実はあれは2次曲線を描いていたのです。ただし一発で描きあげるのではなく、手順を追って描いていきました。ベジエ曲線は多項式関数で表現できますが、その一方で、とても単純な補間の補間の補間の……というふうにも説明できます。これがベジエ曲線のおもしろいところです。これはまた、ベジェ曲線は「本当の数学」で見る（関数を調べたり微分を調べたり、あらゆる方法で）ことも可能ですし、「機械的」な組み立て操作として見る（例えば、ベジエ曲線は組み立てに使う点の間からは決してはみ出ないということがわかります）ことも可能だということを意味しています。"),r.createElement("p",null,"それでは、もう少し詳しくベジエ曲線を見ていきましょう。数学的な表現やそこから導かれる性質、さらには、ベジエ曲線に対して／ベジエ曲線を使ってできるさまざまな内容についてです。"))}},explanation:{locale:"en-GB",title:"The mathematics of Bézier curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"The mathematics of Bézier curves",number:"3"}),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("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("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("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("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:e.setup,draw:e.draw,onKeyDown:e.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("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("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("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("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("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",{id:"how-to-implement-the-basis-function"},"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&lt;n; k++):","\n","    sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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 &gt;= 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]","\n"),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&lt;=n; k++):","\n","    sum += binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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","\n"),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."))}},control:{locale:"en-GB",title:"Controlling Bézier curvatures",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"control",title:"Controlling Bézier curvatures",number:"4"}),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:e.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:e.drawCubicLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"15th order interpolations",draw:e.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("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("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:e.drawCubic,draw:e.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",{id:"how-to-implement-the-weighted-basis-function"},"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&lt;n; k++):","\n","    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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","\n"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}},extended:{locale:"en-GB",title:"The Bézier interval [0,1]",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extended",title:"The Bézier interval [0,1]",number:"5"}),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("code",null,"t=0")," to ",r.createElement("code",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("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("code",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("code",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("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("code",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("code",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:e.setupCubic,draw:e.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)."))}},matrix:{locale:"en-GB",title:"Bézier curvatures as matrix operations",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrix",title:"Bézier curvatures as matrix operations",number:"6"}),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("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("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("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("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("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("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("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("code",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),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("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("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("code",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."))}},decasteljau:{locale:"en-GB",title:"de Casteljau's algorithm",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"decasteljau",title:"de Casteljau's algorithm",number:"7"}),r.createElement("p",null,"If we want to draw Bézier curves we can run through all values of ",r.createElement("code",null,"t")," from 0 to 1 and then compute the weighted basis function, getting the ",r.createElement("code",null,"x/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("code",null,"x/y")," values for ",r.createElement("code",null,"t"),", let's do this instead:"),r.createElement("ul",null,r.createElement("li",null,"treat ",r.createElement("code",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("code",null,"n")," curve, that's ",r.createElement("code",null,"n")," lines."),r.createElement("li",null,"Place markers along each of these line, at distance ",r.createElement("code",null,"t"),". So if ",r.createElement("code",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("code",null,"those")," points. This gives ",r.createElement("code",null,"n-1")," lines."),r.createElement("li",null,"Place markers along each of these line at distance ",r.createElement("code",null,"t"),"."),r.createElement("li",null,"Form lines between ",r.createElement("code",null,"those")," points. This'll be ",r.createElement("code",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("code",null,"t")," on that line coincides with the original curve point at ",r.createElement("code",null,"t"),".")),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"how-to-implement-de-casteljau-s-algorithm"},"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&lt;newpoints.length; i++):","\n","      newpoints[i] = (1-t) * points[i] + t * points[i+1]","\n","    drawCurve(newpoints, t)","\n"),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("code",null,"x")," and ",r.createElement("code",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&lt;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)","\n"),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:e.setup,draw:e.draw}))}},flattening:{locale:"en-GB",title:"Simplified drawing",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"flattening",title:"Simplified drawing",number:"8"}),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:e.setupQuadratic,draw:e.drawFlattened,onKeyDown:e.onKeyDown}),r.createElement(i,{preset:"twopanel",title:"Flattening a cubic curve",setup:e.setupCubic,draw:e.drawFlattened,onKeyDown:e.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",{id:"how-to-implement-curve-flattening"},"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 &lt;= segmentCount; i++):","\n","    t = i*step;","\n","    coordinates.push[curve.getXValue(t), curve.getYValue(t)]","\n","  return coordinates;","\n"),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 &lt; coordinates.length; i++):","\n","    _coords = coordinates[i]","\n","    line(coords, _coords)","\n","    coords = _coords","\n"),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.")))}},splitting:{locale:"en-GB",title:"Splitting curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"splitting",title:"Splitting curves",number:"9"}),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("code",null,"t"),", the procedure gives us all the points we need to split a curve at that ",r.createElement("code",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:e.setupCubic,draw:e.drawSplit}),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"implementing-curve-splitting"},"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&lt;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)","\n"),r.createElement("p",null,"After running this function for some value ",r.createElement("code",null,"t"),", the ",r.createElement("code",null,"left")," and ",r.createElement("code",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("code",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:e.setupCubic,draw:e.drawAnimated,onClick:e.togglePlay}))}},matrixsplit:{locale:"en-GB",title:"Splitting curves using matrices",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrixsplit",title:"Splitting curves using matrices",number:"10"}),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("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}}),r.createElement("p",null,"and"),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("code",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("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}}),r.createElement("p",null,"and"),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("code",null,"t = 0")," to ",r.createElement("code",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",{id:"deriving-new-hull-coordinates"},"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("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/55f9d31b32a3e8855f2d28c3253201c8963eefd1.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("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("img",{className:"LaTeX SVG",src:"images/latex/2972cd74dab6560ea68189c2e53f247287cbefae.svg",style:{width:"30.45015rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/39b64e07c41ef6d734064f017036f6391321e924.svg",style:{width:"35.17515rem",height:"4.1998500000000005rem"}}),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("code",null,"t = 0")," to ",r.createElement("code",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("code",null,"t = z")," to ",r.createElement("code",null,"t = 1")," requires doing this again. We first observe what what we just did is actually evaluate the general interval [0,",r.createElement("code",null,"z"),"], which we wrote down simplified becuase of that zero, but we actually evaluated this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a51e64df3cb31acf32d0ad5814c8c6cff41ae611.svg",style:{width:"27.45rem",height:"3.97485rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/eca8cfda9b7a3f0819ec38acc53f95af67bb26bb.svg",style:{width:"32.625rem",height:"3.97485rem"}}),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("code",null,"[something · M]")," into ",r.createElement("code",null,"[M · something]"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/5851c9191acb59456e3706a8f6f1a0f85e691eda.svg",style:{width:"30.74985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0333e63f50b3d43067dc299280f70e9eb98711bb.svg",style:{width:"34.875rem",height:"4.1998500000000005rem"}}),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("code",null,"t = z"),", we get two subcurves that are described as Bézier curves with simple-to-derive coordinates."),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("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("img",{className:"LaTeX SVG",src:"images/latex/44db09290062827525a9b23cbaf91e65063d86d7.svg",style:{width:"58.87485rem",height:"5.70015rem"}}),r.createElement("p",null,"and"),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."))}},reordering:{locale:"en-GB",title:"Lowering and elevating curve order",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"reordering",title:"Lowering and elevating curve order",number:"11"}),r.createElement("p",null,"One interesting property of Bézier curves is that an ",r.createElement("em",null,"n",r.createElement("sup",null,"th"))," order curve can always be perfectly represented by an ",r.createElement("em",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("em",null,"n",r.createElement("sup",null,"th"))," order curve to an ",r.createElement("em",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("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("em",null,"n",r.createElement("sup",null,"th"))," order to ",r.createElement("em",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 "+e.getOrder()+" order Bézier curve",setup:e.setup,draw:e.draw,onKeyDown:e.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."))}},derivatives:{locale:"en-GB",title:"Derivatives",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"derivatives",title:"Derivatives",number:"12"}),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("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("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",{id:"-slow-down-why-is-that-true-"},'"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("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("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("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("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("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("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("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("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("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("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("img",{className:"LaTeX SVG",src:"images/latex/b98618f8061e9e58289abccc06a624a14561d40f.svg",style:{width:"23.70015rem",height:"3.90015rem"}}),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("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."))}},pointvectors:{locale:"en-GB",title:"Tangents and normals",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"pointvectors",title:"Tangents and normals",number:"13"}),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("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("img",{className:"LaTeX SVG",src:"images/latex/3cb2c4f5806142e83c66e1312520d0783d15201c.svg",style:{width:"17.62515rem",height:"2.025rem"}}),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("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 these 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("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("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("em",null,"sin")," and ",r.createElement("em",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("em",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:e.setupCubic,draw:e.draw})))}},components:{locale:"en-GB",title:"Component functions",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"components",title:"Component functions",number:"14"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve components",setup:e.setupCubic,draw:e.draw}))}},extremities:{locale:"en-GB",title:"Finding extremities: root finding",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extremities",title:"Finding extremities: root finding",number:"15"}),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",{id:"quadratic-curves-linear-derivatives-"},"Quadratic curves: linear derivatives."),r.createElement("p",null,'Finding the solution for "where is this line 0" should be trivial:'),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",{id:"cubic-curves-the-quadratic-formula-"},"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 formula"),". If you've seen it before, you'll remember it, and if you haven't, it looks like this:"),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("img",{className:"LaTeX SVG",src:"images/latex/1fc5a3c637460213133bb4576b292e206d67b36f.svg",style:{width:"37.20015rem",height:"2.7rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/c638a85a950ffb535fbf2056958bed5f44be5067.svg",style:{width:"21.375rem",height:"7.2rem"}}),r.createElement("p",null,"This gives us thee coefficients ",r.createElement("em",null,"a"),", ",r.createElement("em",null,"b"),", and ",r.createElement("em",null,"c")," that are expressed in terms of ",r.createElement("em",null,"v")," values, where the ",r.createElement("em",null,"v")," values are just convenient expressions of our original ",r.createElement("em",null,"p")," values, so we can do some trivial substitution to get:"),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 can now almost trivially find the roots by plugging those values into the quadratic formula. 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",{id:"quartic-curves-cardano-s-algorithm-"},"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("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",{id:"implementing-cardano-s-algorithm-for-finding-all-real-roots"},"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&lt;=t && t &lt;=1;","\n","}","\n","\n","// A real-cuberoots-only function:","\n","function crt(v) ","{","\n","  if(v&lt;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 &lt; 0) ","{","\n","    var mp3  = -p/3,","\n","    mp33 = mp3*mp3*mp3,","\n","    r    = sqrt( mp33 ),","\n","    t    = -q / (2*r),","\n","    cosphi = t&lt;-1 ? -1 : t&gt;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","  if(discriminant === 0) ","{","\n","    u1 = q2 &lt; 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","  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",{id:"quintic-and-higher-order-curves-finding-numerical-solutions"},"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("em",null,"t")," (any will do), and getting the corresponding value at that ",r.createElement("em",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("em",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("em",null,"t"),", at step ",r.createElement("em",null,"n=1"),", we perform the following calculation until ",r.createElement("em",null,"f",r.createElement("sub",null,"y")),"(",r.createElement("em",null,"t"),") is zero, so that the next ",r.createElement("em",null,"t")," is the same as the one we already have:"),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 unless there are requests for it)"),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("em",null,"t=0")," to ",r.createElement("em",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",{id:"in-conclusion-"},"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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve extremities",setup:e.setupCubic,draw:e.draw}))}},boundingbox:{locale:"en-GB",title:"Bounding boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"boundingbox",title:"Bounding boxes",number:"16"}),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("em",null,"Computing the bounding box for a Bézier curve"),":"),r.createElement("ol",null,r.createElement("li",null,"Find all ",r.createElement("em",null,"t")," value(s) for the curve derivative's x- and y-roots."),r.createElement("li",null,"Discard any ",r.createElement("em",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("em",null,"t=0"),", ",r.createElement("em",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 all curve extremity points shown on the curve):"),r.createElement(i,{preset:"simple",title:"Quadratic Bézier bounding box",setup:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier bounding box",setup:e.setupCubic,draw:e.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."))}},aligning:{locale:"en-GB",title:"Aligning curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"aligning",title:"Aligning curves",number:"17"}),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("em",null,"n")," term polynomial functions into ",r.createElement("em",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("em",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),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("em",null,"x")," coordinates by -120, and all ",r.createElement("em",null,"y")," coordinates by -160, gives us:"),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("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("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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}))}},tightbounds:{locale:"en-GB",title:"Tight boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"tightbounds",title:"Tight boxes",number:"18"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.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."))}},inflections:{locale:"en-GB",title:"Curve inflections",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"inflections",title:"Curve inflections",number:"19"}),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 behaving oddly: we might have to change the radius of the circle as we slide it along, 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("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("em",null,"C(t)"),", we want to know for which values of ",r.createElement("em",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("em",null,"C(t)")," look like? Actually something that seems not too hard:"),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("em",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("em",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",r.createElement("em",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",{id:"let-s-derive-the-full-formula-anyway"},"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("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("em",null,"y"),":"),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("em",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("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("em",null,"C(t)"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/c1e427616a8a2502abf3cf46415971d0df9a273c.svg",style:{width:"34.72515rem",height:"5.54985rem"}}),r.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",r.createElement("em",null,"C(t) = 0"),"; we use the quadratic formula:"),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")," ",r.createElement("em",null,"x")," is not zero, because divisions by zero are rather useless."),r.createElement("p",null,"Taking that into account, we compute ",r.createElement("em",null,"t"),", we disregard any ",r.createElement("em",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",r.createElement("em",null,"t")," value(s) our curve will inflect."),r.createElement(i,{title:"Finding cubic Bézier curve inflections",setup:e.setupCubic,draw:e.draw}))}},canonical:{locale:"en-GB",title:"Canonical form (for cubic curves)",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"canonical",title:"Canonical form (for cubic curves)",number:"20"}),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:e.setup,draw:e.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("ol",null,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("ol",null,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("ol",null,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",{id:"wait-where-do-those-lines-come-from-"},"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("img",{
+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\nlli4 = 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\nlli = 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",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"Curve/curve intersection, however, is more complicated. Since we have no straight line to align to, we can't simply align one of the curves and be left with a simple procedure. Instead, we'll need to apply two techniques we've not covered yet: de Casteljau's algorithm, and curve splitting."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:"Manipulating a curve"}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,s=o(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=s}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,s=i+a,l=s-1,u=o(l/s),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the ',r.createElement("em",null,"t"),'-value matching that coordinate, and then letting them drag that point around. With every drag update we\'ll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.'),r.createElement(i,{preset:"moulding",title:"Moulding a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markQB,onMouseDrag:this.dragQB,onMouseUp:this.saveCurve}),r.createElement("p",null,r.createElement("strong",null,"Click-dragging the curve itself")," shows what we're using to compute the new coordinates: while dragging you will see the original points B and its corresponding ",r.createElement("i",null,"t"),"-value, the original point C for that ",r.createElement("i",null,"t"),"-value, as well as the new point B' based on the mouse cursor. Since we know the ",r.createElement("i",null,"t"),"-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e361e1235c94bbe87e95834c7fcfb6ab96e028b9.svg",style:{width:"15.600150000000001rem",height:"2.3998500000000003rem"}})),r.createElement("p",null,"For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:"),r.createElement(i,{preset:"moulding",title:"Moulding a cubic Bézier curve",setup:this.setupCubic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markCB,onMouseDrag:this.dragCB,onMouseUp:this.saveCurve}),r.createElement("p",null,"To help understand what's going on, the cubic graphic shows the full de Casteljau construction \"hull\" when repositioning point B. We compute A` in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance ",r.createElement("i",null,"t"),", because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy."),r.createElement("p",null,"First, we construct the one-level-of-de-Casteljau-up points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f813a7d607787329d242bfbfa28570c88c3e30f5.svg",style:{width:"9.975150000000001rem",height:"5.09985rem"}})),r.createElement("p",null,"And then we can compute the new control points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4ec5f4148752a3d332a922048700d2c71918342f.svg",style:{width:"11.700000000000001rem",height:"4.64985rem"}})),r.createElement("p",null,"And that's cubic curve manipulation."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",style:{width:"7.275150000000001rem",height:"1.125rem"}})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",style:{width:"10.125rem",height:"1.125rem"}})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/664fba98ea17b358941b579115bf063edf87ae17.svg",style:{width:"9.450000000000001rem",height:"3.15rem"}})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",style:{width:"12.45015rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",style:{width:"15.150150000000002rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:"Creating a curve from three points"}},setup:function(e){e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}]},onClick:function(e,t){3==t.lpts.length&&(t.lpts=[]),t.lpts.push({x:e.offsetX,y:e.offsetY}),t.redraw()},getQRatio:function(e){var t=2*e,n=t*e-t,r=n+1;return o(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return o(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},y={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},w={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(y.x-r.x),y:r.y+2*(y.y-r.y)},_={x:i.x+2*(w.x-i.x),y:i.y+2*(w.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,y),e.drawLine(l,w),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, unlike circle-fitting, which requires just three points, Bézier curve fitting requires three points, as well as a ",r.createElement("i",null,"t")," value, so we can figure out where point 'C' needs to be."),r.createElement("p",null,"The following graphic lets you place three points, and will use the preceding sections on the ABC ratio and curve construction to form a quadratic curve through them. You can move the points you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks. (There's some freedom here, so for illustrative purposes we clamped ",r.createElement("i",null,"t")," to simply be 0.5, lets us bypass some maths, since a ",r.createElement("i",null,"t")," value of 0.5 always puts C in the middle of the start--end line segment)"),r.createElement(i,{preset:"generate",title:"Fitting a quadratic Bézier curve",setup:this.setup,draw:this.drawQuadratic,onClick:this.onClick}),r.createElement("p",null,'For cubic curves we also need some values to construct the "de Casteljau line through B" with, and that gives us quite a bit of choice. Since we\'ve clamped ',r.createElement("i",null,"t"),' to 0.5, we\'ll set up a line through B parallel to the line start--end, with a length that is proportional to the length of the line B--C: the further away from the baseline B is, the wider its construction line will be, and so the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to scale the length of the construction line as we move B closer or further away from the baseline, so I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end) forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too, and if the points lie on a line, then the curve constructed has the control points very close to B, while still lying between B and the correct curve end point:'),r.createElement(i,{preset:"generate",title:"Fitting a cubic Bézier curve",setup:this.setup,draw:this.drawCubic,onClick:this.onClick}),r.createElement("p",null,'In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which ',r.createElement("i",null,"t")," value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination of ",r.createElement("i",null,"t"),' and tangent values that lead to a more "æsthetic" curve, but this will be left as an exercise to the reader, since there are many, and æsthetics are often quite personal.'))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);
+e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",style:{width:"8.400150000000002rem",height:"1.27485rem"}})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",style:{width:"21.97485rem",height:"2.7rem"}})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r<a;r++)i=n(e[r],t),i<o&&(s=r,o=i);return s/(a-1)},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.mousePt){e.setColor("red"),e.setFill("red"),e.drawCircle(e.mousePt,3);var n=this.findClosest(e._lut,e.mousePt,e.utils.dist),r=t.get(n);e.drawLine(r,e.mousePt),e.drawCircle(r,3),e.text("t = "+e.utils.round(n,2),r,{x:10,y:3})}},onMouseMove:function(e,t){t.mousePt={x:e.offsetX,y:e.offsetY},t._lut=t.curve.getLUT()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Say we have a Bézier curve and some point, not on the curve, of which we want to know which ",r.createElement("i",null,"t")," value on the curve gives us an on-curve point closest to our off-curve point. Or: say we want to find the projection of a random point onto a curve. How do we do that?"),r.createElement("p",null,"If the Bézier curve is of low enough order, we might be able to ",r.createElement("a",{href:"http://jazzros.blogspot.ca/2011/03/projecting-point-on-bezier-curve.html"},"work out the maths for how to do this"),", and get a perfect ",r.createElement("i",null,"t")," value back, but in general this is an incredibly hard problem and the easiest solution is, really, a numerical approach again. We'll be finding our ideal ",r.createElement("i",null,"t")," value using a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"binary search"),". First, we do a coarse distance-check based on ",r.createElement("i",null,"t"),' values associated with the curve\'s "to draw" coordinates (using a lookup table, or LUT). This is pretty fast. Then we run this algorithm:'),r.createElement("ol",null,r.createElement("li",null,"with the ",r.createElement("i",null,"t")," value we found, start with some small interval around ",r.createElement("i",null,"t")," (1/length_of_LUT on either side is a reasonable start),"),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is larger than the distance to ",r.createElement("i",null,"t"),", try again with the interval reduced to half its original length."),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is smaller than the distance to ",r.createElement("i",null,"t"),", replace ",r.createElement("i",null,"t")," with the smaller-distance value."),r.createElement("li",null,"after reducing the interval, or changing ",r.createElement("i",null,"t"),", go back to step 1.")),r.createElement("p",null,"We keep repeating this process until the interval is small enough to claim the difference in precision found is irrelevant for the purpose we're trying to find ",r.createElement("i",null,"t")," for. In this case, I'm arbitrarily fixing it at 0.0001."),r.createElement("p",null,'The following graphic demonstrates the result of this procedure.Simply move the cursor around, and if it does not lie on top of the curve, you will see a line that projects the cursor onto the curve based on an iteratively found "ideal" ',r.createElement("i",null,"t")," value."),r.createElement(i,{preset:"simple",title:"Projecting a point onto a Bézier curve",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="reordering",l=r.createClass({displayName:"Reordering",getDefaultProps:function(){return{title:o.getTitle(s)}},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(l.lower(e.curve))}}}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=["unite","intersect","exclude","subtract"],s=r.createClass({displayName:"Shapes",getDefaultProps:function(){return{title:"Boolean shape operations"}},getInitialState:function(){return{mode:o[0]}},setMode:function(e){this.setState({mode:e})},formPath:function(e,t,n,r,i){t=t||0,n=n||0;var a=30,o=a/2;r=r||8*a,i=i||4*a;var s=r/2,l=i/2,u=s/3,c=l/3,h=e.Paper,d=h.Path,f=h.Point,p=new d;return p.moveTo(new f(t-s+2*a,n-l)),p.cubicCurveTo(new f(t-s+o,n-l+o),new f(t-s+o,n+l-o),new f(t-s+2*a,n+l)),p.cubicCurveTo(new f(t-u,n+c),new f(t+u,n+c),new f(t+s-2*a,n+l)),p.cubicCurveTo(new f(t+s-o,n+l-o),new f(t+s-o,n-l+o),new f(t+s-2*a,n-l)),p.cubicCurveTo(new f(t+u,n-c),new f(t-u,n-c),new f(t-s+2*a,n-l)),p.closePath(!0),p.strokeColor="rgb(100,100,255)",p},setup:function(e){var t=e.getPanelWidth(),n=40,r=t/2,i=t/2;e.c1=this.formPath(e,r,i),r+=n,i+=n,e.c2=this.formPath(e,r,i),this.state.mode=o[0]},onMouseMove:function(e,t){var n=e.offsetX,r=e.offsetY;t.c2.position={x:n,y:r}},draw:function(e){e.c3&&e.c3.remove();var t=e.c1,n=e.c2,r=t[this.state.mode].bind(t),i=e.c3=r(n);i.strokeColor="red",i.fillColor="rgba(255,100,100,0.4)",e.Paper.view.draw()},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or exclusion, between two or more shapes that involve Bézier curves. For simplicity (well.. sort of, more homogeneity), we'll be looking at Poly-Bézier shapes only, but a shape that consists of a mix of lines and Bézier curves is technically a simplification (although it does mean we need to write a definition for the class of shapes that mix lines and Bézier curves. Since poly-Bézier curves are a superset, we'll be using those in the following examples)"),r.createElement("p",null,"The procedure for performing boolean operations consists, broadly, of four steps:"),r.createElement("ol",null,r.createElement("li",null,"Find the intersection points between both shapes,"),r.createElement("li",null,"cut up the shapes into multiple sections between these intersections,"),r.createElement("li",null,"discard any section that isn't part of the desired operation's resultant shape, and"),r.createElement("li",null,"link up the remaining sections to form the new shape.")),r.createElement("p",null,"Finding all intersections between two poly-Bézier curves, or any poly-line-section shape, is similar to the iterative algorithm discussed in the section on curve/curve intersection. For each segment in the poly-Bézier curve we check whether its bounding box overlaps with any of the segment bounding boxes in the other poly-Bézier curve. If so, we run normal intersection detection."),r.createElement("p",null,"After we found all intersection points, we split up our poly-Bézier curves, making sure to record which of the newly formed poly-Bézier curves might potentially link up at the points we split the originals up at. This will let us quickly glue poly-Bézier curves back together after the next step."),r.createElement("p",null,"Once we have all the new poly-Bézier curves, we run the first step of the desired boolean operation."),r.createElement("ul",null,r.createElement("li",null,'Union: discard all poly-Bézier curves that lie "inside" our union of our shapes. E.g. if we want the union of two overlapping circles, the resulting shape is the outline.'),r.createElement("li",null,'Intersection: discard all poly-Bézier curves that lie "outside" the intersection of the two shapes. E.g. if we want the intersection of two overlapping circles, the resulting shape is the tapered ellipse where they overlap.'),r.createElement("li",null,"Exclusion: none of the sections are discarded, but we will need to link the shapes back up in a special way. Flip any section that would qualify for removal under UNION rules.")),r.createElement("table",{className:"sketch"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_base.gif",height:"169px"}),r.createElement("p",null,"Two overlapping shapes.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_union.gif",height:"169px"}),r.createElement("p",null,"The unified region.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_intersection.gif",height:"169px"}),r.createElement("p",null,"Their intersection.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_exclusion.gif",height:"169px"}),r.createElement("p",null,"Their exclusion regions."))))),r.createElement("p",null,'The main complication in the outlined procedure here is determining how sections qualify in terms of being "inside" and "outside" of our shapes. For this, we need to be able to perform point-in-shape detection, for which we\'ll use a classic algorithm: getting the "crossing number" by using ray casting, and then testing for "insidedness" by applying the ',r.createElement("a",{href:"http://folk.uio.no/bjornw/doc/bifrost-ref/bifrost-ref-12.html"},"even-odd rule"),': For any point and any shape, we can cast a ray from our point, to some point that we know lies outside of the shape (such as a corner of our drawing surface). We then count how many times that line crosses our shape (remember that we can perform line/curve intersection detection quite easily). If the number of times it crosses the shape\'s outline is even, the point did not actually lie inside our shape. If the number of intersections is odd, our point did lie inside out shape. With that knowledge, we can decide whether to treat a section that such a point lies on "needs removal" (under union rules), "needs preserving" (under intersection rules), or "needs flipping" (under exclusion rules).'),r.createElement("p",null,"These operations are expensive, and implementing your own code for this is generally a bad idea if there is already a geometry package available for your language of choice. In this case, for JavaScript the most excellent ",r.createElement("a",{href:"http://paperjs.org"},"Paper.js")," already comes with all the code in place to perform efficient boolean shape operations, so rather that implement an inferior version here, I can strongly recommend the Paper.js library if you intend to do any boolean shape work."),r.createElement("p",null,"The following graphic shows Paper.js doing its thing for two shapes: one static, and one that is linked to your mouse pointer. If you move the mouse around, you'll see how the shape intersections are resolved. The base shapes are outlined in blue, and the boolean result is coloured red."),r.createElement(i,{preset:"simple",title:"Boolean shape operations with Paper.js",paperjs:!0,setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove},r.createElement("br",null),o.map(function(t){var n=e.state.mode===t?"selected":null;return r.createElement("button",{className:n,key:t,onClick:function(){this.setMode(t)}.bind(e)},t)})))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="splitting",s=r.createClass({displayName:"Splitting",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="tightbounds",s=r.createClass({displayName:"TightBounds",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),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 f=n*u/h;for(r=0;r<c.length;r++)if(c[r].d>f){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 p=0,m=["rgb(240,0,200)","rgb(0,40,200)"];e.setColor(m[p]);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[++p%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(0),i=n(4),a=new i,o="whatis",s=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:a.getTitle(o)}},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],f=h[1],p=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*(f.x-d.x),y:d.y+a*(f.y-d.y)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.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(f,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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6);e.exports={preface:{locale:"ja-JP",title:"まえがき",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"まえがき"}),r.createElement("p",null,"2次元上になにかを描くとき、普通は線を使いますが、これは直線と曲線の2つに分類することができます。直線を描くのはとても簡単で、これをコンピュータに描かせるのも容易です。直線の始点と終点をコンピュータに与えてやれば、ポン！直線が描けました。疑問の余地もありません。"),r.createElement("p",null,"しかしながら、曲線の方はもっと大きな問題です。私たちはフリーハンドでいとも簡単に曲線を描くことができますが、コンピュータの方は少し不利です。曲線の描き方を表した数学的な関数が与えられないと、コンピュータは曲線を描くことができないのです。実際には、直線でさえも関数が必要になります。直線の関数はとても簡単なので、わたしたちはよく無視してしまいますが、コンピュータにとっては直線であれ曲線であれ、線はすべて「関数」なのです。しかしこれは、コンピュータで速く計算できて、きれいな曲線が得られるような関数を見つける必要がある、ということになります。そのような関数はたくさんありますが、多くの関心を集め続け、そしてどんな場面でも使われている、ある特定の関数に対してこの記事では焦点を絞ります。この関数は「ベジエ」曲線を描きます。"),r.createElement("p",null,"ベジエ曲線は",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/ピエール・ベジェ"},"Pierre Bézier"),"から名付けられました。この曲線がデザイン作業に適していることを世界に知らしめたのが、彼なのです（ルノーに勤務し、1962年にその研究を発表しました）。ただし、この曲線を「発明」したのは彼が最初で唯一というわけではありません。数学者",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),"はシトロエンで働いていた1959年、この曲線の性質について研究し、ベジエ曲線の非常にエレガントな描き方を発見しました。これが最初だと言う人もいます。しかしながら、de Casteljauは自分の成果を発表しなかったため、「誰が最初か？」という問いに答えるのがとても難しくなっています。またベジエ曲線は、核心的には",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/セルゲイ・ベルンシュテイン"},"Sergei Natanovich Bernstein"),"が研究した「ベルンシュタイン多項式」という数学関数の一種ですが、こちらの公刊に関しては少なくとも1912年まで遡ることができます。いずれにせよ、これらはほとんど瑣末なことです。より注目すべきなのは、ベジエ曲線は取り扱いに便利だいうことです。たとえば複数のベジエ曲線を繋いで、1つの曲線に見えるようにすることができます。もしあなたがPhotoshopで「パス」を描いたり、FlashやIllustrator、Inkscapeのようなベクタードローイングソフトを使ったことがあるのであれば、そこで描いてきた曲線はベジエ曲線です。"),r.createElement("p",null,"では、これを自分でプログラムしなければならないとなったらどうでしょう？ハマりどころは何でしょうか？どうやってベジエ曲線を描くのでしょう？バウンディングボックスとは何で、どうやって交点を求め、どうやったら曲線を押し出せるのでしょうか？つまるところ、ベジエ曲線に対して行いたいあらゆる操作は、どのようにすればいいのでしょう？このページはそれに答えるためにあります。数学にとりかかりましょう！"),r.createElement("p",null,"—Pomax (Twitter上では",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{className:"note"},r.createElement("h2",{id:"-"},"注：ベジエの図はすべてインタラクティブになっています。"),r.createElement("p",null,"このページでは",r.createElement("a",{
+href:"http://pomax.github.io/bezierjs"},"Bezier.js"),"を活用し、インタラクティブな例示を行っています。また、",r.createElement("a",{href:"http://mathjax.org"},"MathJax"),"というすばらしいライブラリによって、（LaTeX式の）「本物」の数学組版を行っています。このページはWebpackを使い、Reactアプリケーションとしてオフラインで生成されていますが、このために「ソースを表示」オプションを追加することがかなり難しくなってしまいました。これをどうやって追加すべきかは今もまだ考え中ですが、かといって、数年ぶりとなる今回の更新を延期したくはありませんでした。"),r.createElement("h2",{id:"-"},"本書はオープンソースです。"),r.createElement("p",null,"この本はオープンソースソフトウェアのプロジェクトで、2つのGitHubリポジトリ上に存在しています。1つ目の",r.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo"),"は表示のためだけに用意されたバージョンで、あなたが今読んでいるものです。もう一方の",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),"は開発版で、すべてのHTML・JavaScript・CSSが含まれています。どちらのリポジトリもフォークすることができますし、あなたの好きなように使ってかまいません。ただし、これを自分の成果だと騙って売ることはもちろん除きます。=)"),r.createElement("h2",{id:"-"},"数学はどこまで難しくなりますか？"),r.createElement("p",null,"この入門に出てくる数学は、大半が高校初年度程度です。基本的な計算を理解していて、英語の読み方が分かっていれば、こなすことができるはずです。時には",r.createElement("em",null,"ずっと"),"難しい数学も出てきますが、もし理解できないように感じたら、そこは読み飛ばしても大丈夫です。節の中の「詳細欄」を飛ばしてもいいですし、厄介そうな数学があれば節の最後まで読み飛ばしてもかまいません。各節の最後にはたいてい結論を並べてありますので、これを直に利用することもできます。"),r.createElement("h2",{id:"-"},"質問・コメント："),r.createElement("p",null,"新しい節の提案があれば、",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"GitHubのissueトラッカー"),"をクリックしてください（右上にあるリポジトリのリンクからでもたどり着けます）。改訂中のため、現在はこのページにはコメント欄がありませんが、内容に関する質問がある場合にもissueトラッカーを使ってかまいません。改訂が完了したら、総合的なコメント欄を復活させる予定です。あるいは、「質問対象の節を選択して『質問』ボタンをクリック」するような項目別のシステムになるかもしれません。いずれわかります。"),r.createElement("h2",{id:"-"},"コーヒーをおごってくれませんか？"),r.createElement("p",null,"この本が気に入った場合や、取り組んでいたことに役に立つと思った場合、あるいは、この本への感謝をわたしに伝えるにはどうすればいいのかわからない場合。そのような場合には、",r.createElement("a",{href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"わたしにコーヒーをおごってください"),"。あなたが住んでいるところのコーヒー1杯の値段でかまいません。この本は小さな入門からはじまり、印刷で70ページほどに相当するようなベジエ曲線の読み物へと、年々成長してきています。そして、多くのコーヒーが執筆に費やされてきました。わたしは執筆に使った時間が惜しいとは思いませんが、もう少しコーヒーがあれば、ずっと書き続けることができるのです！")))}},introduction:{locale:"ja-JP",title:"バッとした導入",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"バッとした導入",number:"1"}),r.createElement("p",null,"まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"2次のベジエ曲線",setup:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"3次のベジエ曲線",setup:e.drawCubic,draw:e.drawCurve})),r.createElement("p",null,"ベジエ曲線は、CAD（computer aided designやCAM（computer aided manufacturing）のアプリケーションで多用されています。もちろん、Adobe Illustrator・Photoshop・Inkscape・Gimp などのグラフィックデザインアプリケーションや、SVG（scalable vector graphics）・OpenTypeフォント（otf/ttf）のようなグラフィック技術でも利用されています。ベジエ曲線はたくさんのものに使われていますので、これについてもっと詳しく学びたいのであれば……さあ、準備しましょう！"))}},whatis:{locale:"ja-JP",title:"ではベジエ曲線はどうやってできるのでしょう？",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"ではベジエ曲線はどうやってできるのでしょう？",number:"2"}),r.createElement("p",null,"ベジエ曲線がどのように動くのか、点を触ってみて感覚が摑めたかもしれません。では、実際のところベジエ曲線",r.createElement("em",null,"とは"),"いったい何でしょうか？これを説明する方法は2通りありますが、どちらの説明でも行き着く先はまったく同じです。一方は複雑な数学を使うのに対し、もう一方はとても簡単です。というわけで……簡単な説明の方から始めましょう。"),r.createElement("p",null,"ベジエ曲線は、",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/%E7%B7%9A%E5%BD%A2%E8%A3%9C%E9%96%93"},"線形補間"),"の結果です。というと難しそうに聞こえますが、誰でも幼い頃から線形補間をやってきています。例えば、何か2つのものの間を指し示すときには、いつも線形補間を行っています。線形補間とは、単純に「2点の間から点を得る」ことなのです。"),r.createElement("p",null,"例えば、2点間の距離がわかっているとして、一方の点から距離の20%だけ離れた（すなわち、もう一方の点から80%離れた）新しい点を求めたい場合、次のようにとても簡単に計算できます。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/75bb049d813d8ee084b076531823f2109cc1660f.svg",style:{width:"36.750150000000005rem",height:"6.37515rem"}}),r.createElement("p",null,"では、実際に見てみましょう。下の図はインタラクティブになっています。上下キーで補間の比率が増減しますので、どうなるか確かめてみましょう。最初に3点があり、それを結んで2本の直線が引かれています。この直線の上でそれぞれ線形補間を行うと、2つの点が得られます。この2点の間でさらに線形補間を行うと、1つの点を得ることができます。そして、あらゆる比率に対して同様に点を求め、それをすべて集めると、このようにベジエ曲線ができるのです。"),r.createElement(i,{title:"線形補間でベジエ曲線を得る",setup:e.setup,draw:e.draw,onKeyDown:e.onKeyDown}),r.createElement("p",null,"また、これが複雑な方の数学につながっていきます。微積分です。"),r.createElement("p",null,"いま上で行ったものとは似つかないように思えますが、実はあれは2次曲線を描いていたのです。ただし一発で描きあげるのではなく、手順を追って描いていきました。ベジエ曲線は多項式関数で表現できますが、その一方で、とても単純な補間の補間の補間の……というふうにも説明できます。これがベジエ曲線のおもしろいところです。これはまた、ベジェ曲線は「本当の数学」で見る（関数を調べたり微分を調べたり、あらゆる方法で）ことも可能ですし、「機械的」な組み立て操作として見る（例えば、ベジエ曲線は組み立てに使う点の間からは決してはみ出ないということがわかります）ことも可能だということを意味しています。"),r.createElement("p",null,"それでは、もう少し詳しくベジエ曲線を見ていきましょう。数学的な表現やそこから導かれる性質、さらには、ベジエ曲線に対して／ベジエ曲線を使ってできるさまざまな内容についてです。"))}},explanation:{locale:"en-GB",title:"The mathematics of Bézier curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"The mathematics of Bézier curves",number:"3"}),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("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("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("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("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:e.setup,draw:e.draw,onKeyDown:e.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("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("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("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("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("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",{id:"how-to-implement-the-basis-function"},"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\n"),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\nbinomial(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<prev; i++):\n      nextRow[i] = lut[prev][i-1] + lut[prev][i]\n    nextRow[s] = 1\n    lut.add(nextRow)\n  return lut[n][k]\n"),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\n"),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\nfunction 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\n"),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."))}},control:{locale:"en-GB",title:"Controlling Bézier curvatures",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"control",title:"Controlling Bézier curvatures",number:"4"}),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:e.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:e.drawCubicLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"15th order interpolations",draw:e.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("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("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:e.drawCubic,draw:e.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",{id:"how-to-implement-the-weighted-basis-function"},"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\n"),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\nfunction 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\n"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}},extended:{locale:"en-GB",title:"The Bézier interval [0,1]",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extended",title:"The Bézier interval [0,1]",number:"5"}),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("code",null,"t=0")," to ",r.createElement("code",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("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("code",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("code",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("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("code",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("code",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:e.setupCubic,draw:e.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)."))}},matrix:{locale:"en-GB",title:"Bézier curvatures as matrix operations",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrix",title:"Bézier curvatures as matrix operations",number:"6"}),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("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("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("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("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("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("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("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("code",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),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("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("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("code",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."))}},decasteljau:{locale:"en-GB",title:"de Casteljau's algorithm",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"decasteljau",title:"de Casteljau's algorithm",number:"7"}),r.createElement("p",null,"If we want to draw Bézier curves we can run through all values of ",r.createElement("code",null,"t")," from 0 to 1 and then compute the weighted basis function, getting the ",r.createElement("code",null,"x/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("code",null,"x/y")," values for ",r.createElement("code",null,"t"),", let's do this instead:"),r.createElement("ul",null,r.createElement("li",null,"treat ",r.createElement("code",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("code",null,"n")," curve, that's ",r.createElement("code",null,"n")," lines."),r.createElement("li",null,"Place markers along each of these line, at distance ",r.createElement("code",null,"t"),". So if ",r.createElement("code",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("code",null,"those")," points. This gives ",r.createElement("code",null,"n-1")," lines."),r.createElement("li",null,"Place markers along each of these line at distance ",r.createElement("code",null,"t"),"."),r.createElement("li",null,"Form lines between ",r.createElement("code",null,"those")," points. This'll be ",r.createElement("code",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("code",null,"t")," on that line coincides with the original curve point at ",r.createElement("code",null,"t"),".")),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"how-to-implement-de-casteljau-s-algorithm"},"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)\n"),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("code",null,"x")," and ",r.createElement("code",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)\n"),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:e.setup,draw:e.draw}))}},flattening:{locale:"en-GB",title:"Simplified drawing",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"flattening",title:"Simplified drawing",number:"8"}),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:e.setupQuadratic,draw:e.drawFlattened,onKeyDown:e.onKeyDown}),r.createElement(i,{preset:"twopanel",title:"Flattening a cubic curve",setup:e.setupCubic,draw:e.drawFlattened,onKeyDown:e.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",{id:"how-to-implement-curve-flattening"},"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;\n"),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\n"),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.")))}},splitting:{locale:"en-GB",title:"Splitting curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"splitting",title:"Splitting curves",number:"9"}),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("code",null,"t"),", the procedure gives us all the points we need to split a curve at that ",r.createElement("code",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:e.setupCubic,draw:e.drawSplit}),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"implementing-curve-splitting"},"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=[]\nright=[]\nfunction 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)\n"),r.createElement("p",null,"After running this function for some value ",r.createElement("code",null,"t"),", the ",r.createElement("code",null,"left")," and ",r.createElement("code",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("code",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:e.setupCubic,draw:e.drawAnimated,onClick:e.togglePlay}))}},matrixsplit:{locale:"en-GB",title:"Splitting curves using matrices",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrixsplit",title:"Splitting curves using matrices",number:"10"}),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("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}}),r.createElement("p",null,"and"),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("code",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("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}}),r.createElement("p",null,"and"),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("code",null,"t = 0")," to ",r.createElement("code",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",{id:"deriving-new-hull-coordinates"},"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("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/55f9d31b32a3e8855f2d28c3253201c8963eefd1.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("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("img",{className:"LaTeX SVG",src:"images/latex/2972cd74dab6560ea68189c2e53f247287cbefae.svg",style:{width:"30.45015rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/39b64e07c41ef6d734064f017036f6391321e924.svg",style:{width:"35.17515rem",height:"4.1998500000000005rem"}}),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("code",null,"t = 0")," to ",r.createElement("code",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("code",null,"t = z")," to ",r.createElement("code",null,"t = 1")," requires doing this again. We first observe what what we just did is actually evaluate the general interval [0,",r.createElement("code",null,"z"),"], which we wrote down simplified becuase of that zero, but we actually evaluated this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a51e64df3cb31acf32d0ad5814c8c6cff41ae611.svg",style:{width:"27.45rem",height:"3.97485rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/eca8cfda9b7a3f0819ec38acc53f95af67bb26bb.svg",style:{width:"32.625rem",height:"3.97485rem"}}),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("code",null,"[something · M]")," into ",r.createElement("code",null,"[M · something]"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/5851c9191acb59456e3706a8f6f1a0f85e691eda.svg",style:{width:"30.74985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0333e63f50b3d43067dc299280f70e9eb98711bb.svg",style:{width:"34.875rem",height:"4.1998500000000005rem"}}),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("code",null,"t = z"),", we get two subcurves that are described as Bézier curves with simple-to-derive coordinates."),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("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("img",{className:"LaTeX SVG",src:"images/latex/44db09290062827525a9b23cbaf91e65063d86d7.svg",style:{width:"58.87485rem",height:"5.70015rem"}}),r.createElement("p",null,"and"),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."))}},reordering:{locale:"en-GB",title:"Lowering and elevating curve order",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"reordering",title:"Lowering and elevating curve order",number:"11"}),r.createElement("p",null,"One interesting property of Bézier curves is that an ",r.createElement("em",null,"n",r.createElement("sup",null,"th"))," order curve can always be perfectly represented by an ",r.createElement("em",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("em",null,"n",r.createElement("sup",null,"th"))," order curve to an ",r.createElement("em",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("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("em",null,"n",r.createElement("sup",null,"th"))," order to ",r.createElement("em",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 "+e.getOrder()+" order Bézier curve",setup:e.setup,draw:e.draw,onKeyDown:e.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."))}},derivatives:{locale:"en-GB",title:"Derivatives",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"derivatives",title:"Derivatives",number:"12"}),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("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("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",{id:"-slow-down-why-is-that-true-"},'"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("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("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("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("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("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("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("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("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("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("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("img",{className:"LaTeX SVG",src:"images/latex/b98618f8061e9e58289abccc06a624a14561d40f.svg",style:{width:"23.70015rem",height:"3.90015rem"}}),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("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."))}},pointvectors:{locale:"en-GB",title:"Tangents and normals",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"pointvectors",title:"Tangents and normals",number:"13"}),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("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("img",{className:"LaTeX SVG",src:"images/latex/3cb2c4f5806142e83c66e1312520d0783d15201c.svg",style:{width:"17.62515rem",height:"2.025rem"}}),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("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 these 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("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("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("em",null,"sin")," and ",r.createElement("em",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("em",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:e.setupCubic,draw:e.draw})))}},components:{locale:"en-GB",title:"Component functions",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"components",title:"Component functions",number:"14"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve components",setup:e.setupCubic,draw:e.draw}))}},extremities:{locale:"en-GB",title:"Finding extremities: root finding",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extremities",title:"Finding extremities: root finding",number:"15"}),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",{id:"quadratic-curves-linear-derivatives-"},"Quadratic curves: linear derivatives."),r.createElement("p",null,'Finding the solution for "where is this line 0" should be trivial:'),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",{id:"cubic-curves-the-quadratic-formula-"},"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 formula"),". If you've seen it before, you'll remember it, and if you haven't, it looks like this:"),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("img",{className:"LaTeX SVG",src:"images/latex/1fc5a3c637460213133bb4576b292e206d67b36f.svg",style:{width:"37.20015rem",height:"2.7rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/c638a85a950ffb535fbf2056958bed5f44be5067.svg",style:{width:"21.375rem",height:"7.2rem"}}),r.createElement("p",null,"This gives us thee coefficients ",r.createElement("em",null,"a"),", ",r.createElement("em",null,"b"),", and ",r.createElement("em",null,"c")," that are expressed in terms of ",r.createElement("em",null,"v")," values, where the ",r.createElement("em",null,"v")," values are just convenient expressions of our original ",r.createElement("em",null,"p")," values, so we can do some trivial substitution to get:"),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 can now almost trivially find the roots by plugging those values into the quadratic formula. 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",{id:"quartic-curves-cardano-s-algorithm-"},"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("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",{id:"implementing-cardano-s-algorithm-for-finding-all-real-roots"},"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:\nfunction accept(t) {\n  return 0<=t && t <=1;\n}\n\n// A real-cuberoots-only function:\nfunction 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.\nfunction 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  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  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",{id:"quintic-and-higher-order-curves-finding-numerical-solutions"},"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("em",null,"t")," (any will do), and getting the corresponding value at that ",r.createElement("em",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("em",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("em",null,"t"),", at step ",r.createElement("em",null,"n=1"),", we perform the following calculation until ",r.createElement("em",null,"f",r.createElement("sub",null,"y")),"(",r.createElement("em",null,"t"),") is zero, so that the next ",r.createElement("em",null,"t")," is the same as the one we already have:"),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 unless there are requests for it)"),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("em",null,"t=0")," to ",r.createElement("em",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",{id:"in-conclusion-"},"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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve extremities",setup:e.setupCubic,draw:e.draw}))}},boundingbox:{locale:"en-GB",title:"Bounding boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"boundingbox",title:"Bounding boxes",number:"16"}),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("em",null,"Computing the bounding box for a Bézier curve"),":"),r.createElement("ol",null,r.createElement("li",null,"Find all ",r.createElement("em",null,"t")," value(s) for the curve derivative's x- and y-roots."),r.createElement("li",null,"Discard any ",r.createElement("em",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("em",null,"t=0"),", ",r.createElement("em",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 all curve extremity points shown on the curve):"),r.createElement(i,{preset:"simple",title:"Quadratic Bézier bounding box",setup:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier bounding box",setup:e.setupCubic,draw:e.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."))}},aligning:{locale:"en-GB",title:"Aligning curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"aligning",title:"Aligning curves",number:"17"}),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("em",null,"n")," term polynomial functions into ",r.createElement("em",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("em",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),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("em",null,"x")," coordinates by -120, and all ",r.createElement("em",null,"y")," coordinates by -160, gives us:"),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("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("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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}))}},tightbounds:{locale:"en-GB",title:"Tight boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"tightbounds",title:"Tight boxes",number:"18"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.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."))}},inflections:{locale:"en-GB",title:"Curve inflections",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"inflections",title:"Curve inflections",number:"19"}),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 behaving oddly: we might have to change the radius of the circle as we slide it along, 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("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("em",null,"C(t)"),", we want to know for which values of ",r.createElement("em",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("em",null,"C(t)")," look like? Actually something that seems not too hard:"),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("em",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("em",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",r.createElement("em",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",{id:"let-s-derive-the-full-formula-anyway"},"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("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("em",null,"y"),":"),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("em",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("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("em",null,"C(t)"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/c1e427616a8a2502abf3cf46415971d0df9a273c.svg",style:{width:"34.72515rem",height:"5.54985rem"}}),r.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",r.createElement("em",null,"C(t) = 0"),"; we use the quadratic formula:"),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")," ",r.createElement("em",null,"x")," is not zero, because divisions by zero are rather useless."),r.createElement("p",null,"Taking that into account, we compute ",r.createElement("em",null,"t"),", we disregard any ",r.createElement("em",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",r.createElement("em",null,"t")," value(s) our curve will inflect."),r.createElement(i,{title:"Finding cubic Bézier curve inflections",setup:e.setupCubic,draw:e.draw}))}},canonical:{locale:"en-GB",title:"Canonical form (for cubic curves)",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"canonical",title:"Canonical form (for cubic curves)",number:"20"}),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:e.setup,draw:e.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("ol",null,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("ol",null,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("ol",null,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",{id:"wait-where-do-those-lines-come-from-"},"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("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("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("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("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 ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Scaling_%28geometry%29"},"do some scaling")," 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("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 ",r.createElement("code",null,"y/x")," rather than ",r.createElement("code",null,"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("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("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("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("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",{id:"how-do-you-track-all-that-"},"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:e.setup,draw:e.draw}))}},arclength:{locale:"en-GB",title:"Unknown title (arclength)",getContent:function(e){return r.createElement("section",null)}},arclengthapprox:{locale:"en-GB",title:"Unknown title (arclengthapprox)",getContent:function(e){return r.createElement("section",null)}},tracing:{locale:"en-GB",title:"Unknown title (tracing)",getContent:function(e){return r.createElement("section",null)}},intersections:{locale:"en-GB",title:"Unknown title (intersections)",getContent:function(e){return r.createElement("section",null)}},curveintersection:{locale:"en-GB",title:"Unknown title (curveintersection)",getContent:function(e){return r.createElement("section",null)}},abc:{locale:"en-GB",title:"Unknown title (abc)",getContent:function(e){return r.createElement("section",null)}},moulding:{locale:"en-GB",title:"Unknown title (moulding)",getContent:function(e){return r.createElement("section",null)}},pointcurves:{locale:"en-GB",title:"Unknown title (pointcurves)",getContent:function(e){return r.createElement("section",null)}},catmullconv:{locale:"en-GB",title:"Unknown title (catmullconv)",getContent:function(e){return r.createElement("section",null)}},catmullmoulding:{locale:"en-GB",title:"Unknown title (catmullmoulding)",getContent:function(e){return r.createElement("section",null)}},polybezier:{locale:"en-GB",title:"Unknown title (polybezier)",getContent:function(e){return r.createElement("section",null)}},shapes:{locale:"en-GB",title:"Unknown title (shapes)",getContent:function(e){return r.createElement("section",null)}},projections:{locale:"en-GB",title:"Unknown title (projections)",getContent:function(e){return r.createElement("section",null)}},offsetting:{locale:"en-GB",title:"Unknown title (offsetting)",getContent:function(e){return r.createElement("section",null)}},graduatedoffset:{locale:"en-GB",title:"Unknown title (graduatedoffset)",getContent:function(e){return r.createElement("section",null)}},circles:{locale:"en-GB",title:"Unknown title (circles)",getContent:function(e){return r.createElement("section",null)}},circles_cubic:{locale:"en-GB",title:"Unknown title (circles_cubic)",getContent:function(e){return r.createElement("section",null)}},arcapproximation:{locale:"en-GB",title:"Unknown title (arcapproximation)",getContent:function(e){return r.createElement("section",null)}},bsplines:{locale:"en-GB",title:"Unknown title (bsplines)",getContent:function(e){return r.createElement("section",null)}},comments:{locale:"en-GB",title:"Unknown title (comments)",getContent:function(e){return r.createElement("section",null)}},"locale-switcher":{locale:"en-GB",title:"locale-switcher",getContent:function(e){return r.createElement("section",null,r.createElement("p",null,"Read this in your own language:"),r.createElement("ul",null,r.createElement("li",null,r.createElement("a",{href:"?locale=en-GB"},"English")),r.createElement("li",null,r.createElement("a",{href:"?locale=ja-JP"},"日本語")),r.createElement("li",null,r.createElement("a",{href:"?locale=zh-CN"},"中文"))),r.createElement("p",null,"Don't see your language listed? ",r.createElement("a",{href:"https://github.com/Pomax/BezierInfo-2/wiki/localize"},"Help translate this content!")))}}}},function(e,t,n){e.exports=n(65)},function(e,t,n){!function(){"use strict";var t=n(66),r=function(e){this.curves=[],this._3d=!1,e&&(this.curves=e,this._3d=this.curves[0]._3d)};r.prototype={valueOf:function(){return this.toString()},toString:function(){return t.pointsToString(this.points)},addCurve:function(e){this.curves.push(e),this._3d=this._3d||e._3d},length:function(){return this.curves.map(function(e){return e.length()}).reduce(function(e,t){return e+t})},curve:function(e){return this.curves[e]},bbox:function(){for(var e=this.curves,n=e[0].bbox(),r=1;r<e.length;r++)t.expandbox(n,e[r].bbox());return n},offset:function(e){var t=[];return this.curves.forEach(function(n){t=t.concat(n.offset(e))}),new r(t)}},e.exports=r}()},function(e,t,n){(function(e){var n,r;/**
  * @license
  *
diff --git a/article.js b/article.js
index 6ea43930..50116528 100644
--- a/article.js
+++ b/article.js
@@ -22,15 +22,15 @@ return this._segments[this._segments.length-1]},getCurves:function(){var e=this.
 _class:"PathIterator",initialize:function(e,t,n,r){function i(e,t){var n=A.getValues(e,t,r);s.push(n),a(n,e._index,0,1)}function a(e,t,r,i){if(i-r>c&&!A.isFlatEnough(e,n||.25)){var o=A.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],f=Math.sqrt(h*h+d*d);f>1e-6&&(u+=f,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],f=1,p=h.length;f<p;f++)o=h[f],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=A.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(A.evaluateMethods,function(e){this[e+"At"]=function(t,n){var r=this.getParameterAt(t);return A[e](this.curves[r.index],r.value,n)}},{})),j=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 I(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),f=this.findMaxError(e,t,d,l);if(f.error<this.error&&c)return void this.addCurve(d);if(s=f.index,f.error>=u)break;c=this.reparameterize(e,t,l,d),u=f.error}var p=this.points[s-1].subtract(this.points[s]),m=this.points[s].subtract(this.points[s+1]),g=p.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 I(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],f=1-d,p=3*d*f,m=f*f*f,g=p*f,v=p*d,w=d*d*d,y=r.normalize(g),b=i.normalize(v),_=this.points[e+c].subtract(o.multiply(m+g)).subtract(s.multiply(v+w));l[0][0]+=y.dot(y),l[0][1]+=y.dot(b),l[1][0]=l[0][1],l[1][1]+=b.dot(b),u[0]+=y.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],S=u[0]*l[1][1]-u[1]*l[0][1];x=S/C,E=k/C}else{var P=l[0][0]+l[0][1],T=l[1][0]+l[1][1];x=E=Math.abs(P)>a?u[0]/P:Math.abs(T)>a?u[1]/T:0}var N,M,I=s.getDistance(o),L=a*I;if(x<L||E<L)x=E=I/3;else{var A=s.subtract(o);N=r.normalize(x),M=i.normalize(E),N.dot(A)-M.dot(A)>I*I&&(x=E=I/3,N=M=null)}return[o,o.add(N||r.normalize(x)),s.add(M||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}}}),F=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&&p.read(arguments))},_equals:function(e){return this._content===e._content},_clone:function e(t,n,r){return t.setContent(this._content),e.base.call(this,t,n,r)},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"}),q=F.extend({_class:"PointText",initialize:function(){F.apply(this,arguments)},clone:function(e){return this._clone(new q(C.NO_INSERT),e)},getPoint:function(){var e=this._matrix.getTranslation();return new m(e.x,e.y,this,"setPoint")},setPoint:function(){var e=p.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 w(l,i?-.75*o:0,s,i*o);return t?t._transformBounds(u,u):u}}),V=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 p.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 t(i){var a,o,s,l,u=Array.prototype.slice,c=arguments,h=0;Array.isArray(i)&&(c=i,i=c[0]);var d=null!=i&&typeof i;if("string"===d&&i in n&&(a=i,i=c[1],Array.isArray(i)?(o=i,s=c[2]):(this.__read&&(h=1),c=u.call(c,1),d=typeof i)),!o){if(l="number"===d?c:"object"===d&&null!=i.length?i:null){a||(a=l.length>=3?"rgb":"gray");var p=n[a].length;s=l[p],this.__read&&(h+=l===arguments?p+(null!=s?1:0):1),l.length>p&&(l=u.call(l,0,p))}else if("string"===d)a="rgb",o=e(i),4===o.length&&(s=o[3],o.length--);else if("object"===d)if(i.constructor===t){if(a=i._type,o=i._components.slice(),s=i._alpha,"gradient"===a)for(var m=1,g=o.length;m<g;m++){var v=o[m];v&&(o[m]=v.clone())}}else if(i.constructor===U)a="gradient",l=c;else{a="hue"in i?"lightness"in i?"hsl":"hsb":"gradient"in i||"stops"in i||"radial"in i?"gradient":"gray"in i?"gray":"rgb";var w=n[a],y=r[a];this._components=o=[];for(var m=0,g=w.length;m<g;m++){var b=i[w[m]];null==b&&0===m&&"gradient"===a&&"stops"in i&&(b={stops:i.stops,radial:i.radial}),b=y[m].call(this,b),null!=b&&(o[m]=b)}s=i.alpha}this.__read&&a&&(h=1)}if(this._type=a||"rgb",this._id=f.get(t),!o){this._components=o=[];for(var y=r[this._type],m=0,g=y.length;m<g;m++){var b=y[m].call(this,l&&l[m]);null!=b&&(o[m]=b)}}this._components=o,this._properties=n[this._type],this._alpha=s,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 V(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)?V.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 f=i[h];t.addColorStop(f._rampPoint,f._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 V(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=V.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 V(n,i,null!=this._alpha?e(this._alpha,t.getAlpha()):null)}},{})}),U=s.extend({_class:"Gradient",initialize:function(e,t){this._id=f.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=V.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 p,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 V}),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 D))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===V&&(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 D){var t=this._values[i];if(t===o)t=this._defaults[i],t&&t.clone&&(t=t.clone());else{var u=a?V:l?p: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 f=r[c]._style[d]();if(0===c)t=f;else if(!s.equals(t,f))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 F&&(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 e(){var t=e.base.call(this),n=this.getFontSize();return/pt|em|%|px/.test(n)&&(n=this.getView().getPixelSize(n)),null!=t?t:1.2*n}}),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(e){n={left:0,top:0,width:0,height:0}}var o=n.left-(a.clientLeft||i.clientLeft||0),s=n.top-(a.clientTop||i.clientTop||0);if(!t){var l=r.defaultView;o+=l.pageXOffset||a.scrollLeft||i.scrollLeft,s+=l.pageYOffset||a.scrollTop||i.scrollTop}return new w(o,s,n.width,n.height)},getViewportBounds:function(e){var t=e.ownerDocument,n=t.defaultView,r=t.documentElement;return new w(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 p(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 e(t,n){function r(e){return n[e]||parseInt(n.getAttribute(e),10)}function i(){var e=H.getSize(n);return e.isNaN()||e.isZero()?new g(r("width"),r("height")):e}this._project=t,this._scope=t._scope,this._element=n;var a;this._pixelRatio||(this._pixelRatio=window.devicePixelRatio||1),this._id=n.getAttribute("id"),null==this._id&&n.setAttribute("id",this._id="view-"+e._id++),X.add(n,this._viewEvents);var o="none";if(H.setPrefixed(n.style,{userSelect:o,touchAction:o,touchCallout:o,contentZooming:o,userDrag:o,tapHighlightColor:"rgba(0,0,0,0)"}),u.hasAttribute(n,"resize")){var s=this;X.add(window,this._windowEvents={resize:function(){s.setViewSize(i())}})}if(this._setViewSize(a=i()),u.hasAttribute(n,"stats")&&"undefined"!=typeof Stats){this._stats=new Stats;var l=this._stats.domElement,c=l.style,h=H.getOffset(n);c.position="absolute",c.left=h.x+"px",c.top=h.y+"px",document.body.appendChild(l)}e._views.push(this),e._viewsById[this._id]=this,this._viewSize=a,(this._matrix=new b)._owner=this,this._zoom=1,e._focused||(e._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 w(new p,this._viewSize))),this._bounds},getSize:function(){return this.getBounds().getSize()},getCenter:function(){return this.getBounds().getCenter()},setCenter:function(){var e=p.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(p.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(p.read(arguments))},viewToProject:function(){return this._matrix._inverseTransform(p.read(arguments))}},{statics:{_views:[],_viewsById:{},_id:0,create:function(e,t){return"string"==typeof t&&(t=document.getElementById(t)),new Q(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()}},f={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()},f[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))}},f[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,f),X.add(window,{load:n});var p={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 p)t[n]=(t[n]||0)+(p[n][e]||0)},_uninstallEvent:function(e){var t=this._eventCounters;if(t)for(var n in p)t[n]-=p[n][e]||0},statics:{updateFocus:n}}}),Q=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 J(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 f=this._project,p=f.hitTest(h,{tolerance:0,fill:!0,stroke:!0}),m=p&&p.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}}}}),Y=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 $.modifiers}}),Z=Y.extend({_class:"KeyEvent",initialize:function(e,t,n,r){Y.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()+" }"}}),$=new function(){function e(n,i,c,h){var d,f=c?String.fromCharCode(c):"",p=r[i],m=p||f.toLowerCase(),g=n?"keydown":"keyup",v=K._focused,w=v&&v.isVisible()&&v._scope,y=w&&w.tool;if(u[m]=n,n?l[i]=c:delete l[i],p&&(d=s.camelize(p))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);y&&y.responds(g)&&(a=w,y.emit(g,new Z(n,m,f,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]}}},J=Y.extend({_class:"MouseEvent",initialize:function(e,t,n,r,i){Y.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=Y.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);f=t+a,p=n+a,m=r+a;var i=e(f,p,m),o=g(f,p,m),s=v(f,p,m);if(o<0){var l=i-o;f=i+(f-i)*i/l,p=i+(p-i)*i/l,m=i+(m-i)*i/l}if(s>255){var u=255-i,c=s-i;f=i+(f-i)*u/c,p=i+(p-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,f=a[0],p=a[1],m=a[2]}var i,a,o,l,u,c,h,d,f,p,m,g=Math.min,v=Math.max,w=Math.abs,y={multiply:function(){f=u*i/255,p=c*a/255,m=h*o/255},screen:function(){f=u+i-u*i/255,p=c+a-c*a/255,m=h+o-h*o/255},overlay:function(){f=u<128?2*u*i/255:255-2*(255-u)*(255-i)/255,p=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;f=e+u*(255-(255-u)*(255-i)/255-e)/255,e=a*c/255,p=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(){f=i<128?2*i*u/255:255-2*(255-i)*(255-u)/255,p=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(){f=0===u?0:255===i?255:g(255,255*u/(255-i)),p=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(){f=255===u?255:0===i?0:v(0,255-255*(255-u)/i),p=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(){f=u<i?u:i,p=c<a?c:a,m=h<o?h:o},lighten:function(){f=u>i?u:i,p=c>a?c:a,m=h>o?h:o},difference:function(){f=u-i,f<0&&(f=-f),p=c-a,p<0&&(p=-p),m=h-o,m<0&&(m=-m)},exclusion:function(){f=u+i*(255-u-u)/255,p=c+a*(255-c-c)/255,m=h+o*(255-h-h)/255},hue:function(){r(i,a,o,n(u,c,h)),t(f,p,m,e(u,c,h))},saturation:function(){r(u,c,h,n(i,a,o)),t(f,p,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(){f=g(u+i,255),p=g(c+a,255),m=g(h+o,255)},subtract:function(){f=v(u-i,0),p=v(c-a,0),m=v(h-o,0)},average:function(){f=(u+i)/2,p=(c+a)/2,m=(h+o)/2},negation:function(){f=255-w(255-i-u),p=255-w(255-a-c),m=255-w(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(y,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(e){}_.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 w=y[e];if(!w)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],w();var S=l*r/255,P=1-S;x[C]=S*f+P*u,x[C+1]=S*p+P*c,x[C+2]=S*m+P*h,x[C+3]=l*r+P*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 B||e instanceof P||e instanceof F)}],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=w(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 f=l[0]._point,p=l[l.length-1]._point;u.set({x1:f.x,y1:f.y,x2:p.x,y2:p.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(w(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],f=d._color,p=f.getAlpha();r={offset:d._rampPoint,"stop-color":f.toCSS(!0)},p<1&&(r["stop-opacity"]=p),n.appendChild(t("stop",r))}g(e,n,"color")}return"url(#"+n.id+")"}function f(e){var r=t("text",n(e._matrix,!0));return r.textContent=e._content,r}function p(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 w(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&&p(e,i,n)}function y(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:f};C.inject({exportSVG:function(e){return e=y(e),v(w(this,e,!0),e)}}),x.inject({exportSVG:function(e){e=y(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(w(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 p(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++)y(c[h],n,!1);for(var h=0,d=i.length;h<d;h++){var f,p=i[h];1!==p.nodeType||"defs"===p.nodeName.toLowerCase()||!(f=y(p,n,!1))||f instanceof E||u.push(f)}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 p(parseFloat(n[i]),parseFloat(n[i+1])));var o=new z(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 D(n):new z(n)}function c(n,r){var i,a=(e(n,"href",!0)||"").substring(1),o="radialgradient"===r;if(a)i=N[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,f,p;return o?(d=t(n,"cx","cy"),f=d.add(e(n,"r"),0),p=t(n,"fx","fy",!0)):(d=t(n,"x1","y1"),f=t(n,"x2","y2")),m(new V(i,d,f,p),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,f=h.length;d<f;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 f(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(S,function(n,i){var a=f(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&&N[t[1]]}function y(e,t,n){function r(e){a=o;var r=y(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"),f=o.settings,p=f.applyMatrix;if(f.applyMatrix=!1,u=h&&h(i,c,t,n)||null,f.applyMatrix=p,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 P&&(u.remove(),u=u.toPath()),d&&(u._data=JSON.parse(d))}return n&&(N={},u&&s.pick(t.applyMatrix,p)&&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=y(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 T(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=N[r],a=t(n,"x","y");return i?i instanceof E?i.place(a):i.clone().translate(a):null},circle:function(n){return new P.Circle(t(n,"cx","cy"),e(n,"r"))},ellipse:function(e){return new P.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 P.Rectangle(new w(r,i),a)},line:function(e){return new z.Line(t(e,"x1","y1"),t(e,"x2","y2"))},text:function(e){var n=new q(t(e,"x","y").add(t(e,"dx","dy")));return n.setContent(e.textContent.trim()||""),n}},S=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 P){var i=t[e.get]();i&&i.transform((new b).translate(t.getPosition(!0).negate()))}}},{}),{id:function(e,t){N[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 w(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"!=f(a,"overflow",o),d=e._definition;h&&!s.contains(d.getBounds())&&(h=new P.Rectangle(s).transform(d._matrix),h.setClipMask(!0),d.addChild(h))}}}),N={};C.inject({importSVG:function(e,t){return this.addChild(y(e,t,!0))}}),x.inject({importSVG:function(e,t){return this.activate(),y(e,t,!0)}})},a=new(u.inject(s.exports,{enumerable:!0,Base:s,Numerical:d,Key:$})),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(0),i=n(105),a=r.createClass({displayName:"BSplineGraphic",componentWillMount:function(){var e=this;this.cvs=void 0,this.ctx=void 0,this.key=void 0,this.keyCode=void 0,this.mouseX=void 0,this.mouseY=void 0,this.isMouseDown=void 0,this.width=0,this.height=0,this.activeDistance=9,this.points=[],this.knots=[],this.weights=[],this.nodes=[],this.cp=void 0,this.dx=void 0,this.dy=void 0;var t=this.props.sketch;Object.keys(t).forEach(function(n){e[n]=t[n],"function"==typeof e[n]&&(e[n]=e[n].bind(e))})},render:function(){return r.createElement("canvas",{className:"bspline-graphic",ref:"sketch"})},keydownlisten:function(e){this.setKeyboardValues(e),this.keyDown()},keyuplisten:function(e){this.setKeyboardValues(e),this.keyUp()},keypresslisten:function(e){this.setKeyboardValues(e),this.keyPressed()},mousedownlisten:function(e){this.setMouseValues(e),this.mouseDown()},mouseuplisten:function(e){this.setMouseValues(e),this.mouseUp()},mousemovelisten:function(e){this.setMouseValues(e),this.mouseMove(),this.isMouseDown&&this.mouseDrag&&this.mouseDrag()},wheellissten:function(e){e.preventDefault(),this.scrolled(e.deltaY<0?1:-1)},componentDidMount:function(){var e=this.cvs=this.refs.sketch;e.addEventListener("keydown",this.keydownlisten),e.addEventListener("keyup",this.keyuplisten),e.addEventListener("keypress",this.keypresslisten),e.addEventListener("mousedown",this.mousedownlisten),e.addEventListener("mouseup",this.mouseuplisten),e.addEventListener("mousemove",this.mousemovelisten),this.props.scrolling&&e.addEventListener("wheel",this.wheellissten),this.setup()},componentWillUnmount:function(){var e=this.cvs=this.refs.sketch;e.removeEventListener("keydown",this.keydownlisten),e.removeEventListener("keyup",this.keyuplisten),e.removeEventListener("keypress",this.keypresslisten),e.removeEventListener("mousedown",this.mousedownlisten),e.removeEventListener("mouseup",this.mouseuplisten),e.removeEventListener("mousemove",this.mousemovelisten),this.props.scrolling&&e.removeEventListener("wheel",this.wheellissten)},drawCurve:function(e){e=e||this.points;var t=this.ctx,n=this.weights.length>0&&this.weights;t.beginPath();var r=i(0,this.degree,e,this.knots,n);t.moveTo(r[0],r[1]);for(var a=.01;a<1;a+=.01)r=i(a,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]);r=i(1,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]),t.stroke(),t.closePath()},drawKnots:function(e){var t=this,n=this.knots,r=this.weights.length>0&&this.weights;n.forEach(function(a,o){if(!(o<t.degree||o>n.length-1-t.degree)){var s=i(a,t.degree,e,n,r,!1,!0);t.circle(s[0],s[1],3)}})},drawNodes:function(e){var t,n=this;this.stroke(150),this.nodes.forEach(function(r,a){try{t=i(r,n.degree,e,n.knots,!1,!1,!0),n.line(t[0],t[1],e[a][0],e[a++][1])}catch(e){console.error(e)}})},formKnots:function(e,t){if(t=t===!0,!t)return this.formUniformKnots(e);var n,r=e.length,i=[],a=r-this.degree;for(n=1;n<r-this.degree;n++)i.push(n+this.degree);for(n=0;n<=this.degree;n++)i=[this.degree].concat(i);for(n=0;n<=this.degree;n++)i.push(a+this.degree);return i},formUniformKnots:function(e){for(var t=[],n=this.points.length+this.degree;n>=0;n--)t.push(n);return t.reverse()},formNodes:function(e,t){var n,r,i,a=[this.degree,e.length-1-this.degree],o=[];for(r=0;r<this.points.length;r++){for(n=0,i=1;i<=this.degree;i++)n+=e[r+i];n/=this.degree,n<e[a[0]]||n>e[a[1]]||o.push(n)}return o},formWeights:function(e){var t=[];return e.forEach(function(e){return t.push(1)}),t},setDegree:function(e){this.degree+=e,this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)},near:function(e,t,n){var r=e.x-t,i=e.y-n,a=Math.sqrt(r*r+i*i);return a<this.activeDistance},getCurrentPoint:function(e,t){for(var n=0;n<this.points.length;n++)if(this.near(this.points[n],e,t))return this.points[n]},keyDown:function(){console.log(this.key,this.keyCode),"ArrowUp"===this.key&&this.setDegree(1),"ArrowDown"===this.key&&this.degree>1&&this.setDegree(-1),this.redraw()},keyUp:function(){},keyPressed:function(){},mouseDown:function(){this.isMouseDown=!0,this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp||(this.points.push({x:this.mouseX,y:this.mouseY}),this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)),this.redraw()},mouseUp:function(){this.isMouseDown=!1,this.cp=!1,this.redraw()},mouseDrag:function(){this.cp&&(this.cp.x=this.mouseX,this.cp.y=this.mouseY,this.redraw())},mouseMove:function(){},scrolled:function(e){if(this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp){var t=this.points.indexOf(this.cp);this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),t=this.points.indexOf(this.cp,t+1),t!==-1&&this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),this.redraw()}},setKeyboardValues:function(e){e.ctrlKey||e.metaKey||e.altKey||e.preventDefault(),this.key=e.key,this.keyCode=e.code},setMouseValues:function(e){var t=this.cvs.getBoundingClientRect();this.mouseX=e.clientX-t.left,this.mouseY=e.clientY-t.top},size:function(e,t){this.width=0|e,this.height=0|(t||e),this.cvs.width=this.width,this.cvs.height=this.height,this.ctx=this.cvs.getContext("2d")},redraw:function(){this.draw()},clear:function(){this.ctx.clearRect(0,0,this.width,this.height)},grid:function(e){e=(0|(e||10))+.5,this.stroke(200,200,220);for(var t=e;t<this.width-1;t+=e)this.line(t,0,t,this.height);for(var n=e;n<this.height-1;n+=e)this.line(0,n,this.width,n)},circle:function(e,t,n){var r=this.ctx;r.beginPath(),r.moveTo(e,t),r.arc(e,t,n,0,2*Math.PI),r.stroke(),r.closePath()},line:function(e,t,n,r){var i=this.ctx;i.beginPath(),i.moveTo(e,t),i.lineTo(n,r),i.stroke(),i.closePath()},stroke:function(e,t,n,r){return"string"==typeof e?this.ctx.strokeStyle=e:(void 0===t&&(t=e,n=e),void 0===r&&(r=1),void(this.ctx.strokeStyle=this.rgba(e,t,n,r)))},noStroke:function(){this.ctx.strokeStyle="none"},fill:function(e,t,n,r){return"string"==typeof e?this.ctx.fillStyle=e:(void 0===t&&(t=e,n=e),void 0===r&&(r=1),void(this.ctx.fillStyle=this.rgba(e,t,n,r)))},noFill:function(){this.ctx.fillStyle="none"},rgba:function(e,t,n,r){return"rgba("+e+","+t+","+n+","+r+")"},beginPath:function(){this.ctx.beginPath(),this.bp=!0},vertex:function(e,t){return this.bp?(this.ctx.moveTo(e,t),void(this.bp=!1)):this.ctx.lineTo(e,t)},endPath:function(){this.ctx.stroke(),this.ctx.closePath()}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=r.createClass({displayName:"Footer",render:function(){return r.createElement("footer",{className:"copyright"},'This article is © 2011-2016 to me, Mike "Pomax" Kamermans, but the text, code, and images are ',r.createElement("a",{href:"https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md"},"almost no rights reserved"),". Go do something cool with it!")}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(113),a=n(40),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(0),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(0),i=r.createClass({displayName:"KnotController",getInitialState:function(){return{owner:!1,knots:[]}},bindKnots:function(e,t){this.setState({owner:e,knots:t})},render:function(){var e=this,t="range",n=0,i=this.state.knots.length,a=1;return r.createElement("section",{className:"knot-controls"},r.createElement("h2",null,"knot values"),this.state.knots.map(function(o,s){var l={type:t,min:n,max:i,step:a,value:o,onChange:function(t){var n=e.state.knots;n[s]=t.target.value,e.setState({knots:n},function(){e.state.owner.redraw()})}};return r.createElement("div",{key:"knot"+s},n,r.createElement("input",l),i," (= ",o,")")}))}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(97),a=i.Link,o=n(40),s=Object.keys(o),l=r.createClass({displayName:"Navigation",generateNavItem:function(e,t){var n=o[e],i=n.getDefaultProps().title,l=r.createElement("a",{href:"#"+e},i);this.props.fullNav&&(l=r.createElement(a,{to:e},i));var u=s.length-1;return t===u&&(t=null),r.createElement("li",{key:e,"data-number":t},l)},generateNav:function(){return this.props.compact?null:r.createElement("div",{ref:"navigation"},r.createElement("navigation",{className:this.props.compact?"compact":null},r.createElement("ul",{className:"navigation"},s.map(this.generateNavItem))))},render:function(){return this.generateNav()}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(115),a=n(110),o=n(114),s=n(118).LocaleSwitcher,l=n(112),u=n(108),c=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,r.createElement(s,null),e,this.props.children)},render:function(){var e,t=this.props.compact,n="/"===this.props.name,o=r.createElement(l,{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(u,null))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(97),a=i.Link,o=n(40),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";var r=n(0),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",style:{border:"none"},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(0),i=r.createClass({displayName:"WeightController",getInitialState:function(){return{owner:!1,weights:[],closed:!1}},bindWeights:function(e,t,n){this.setState({owner:e,weights:t,closed:n})},render:function(){var e=this,t="range",n=0,i=this.state.weights.length,a=1,o=this.state.closed,s=this.state.weights.length;return o!==!1&&(s-=o),r.createElement("section",{className:"knot-controls"},r.createElement("h2",null,"weight values"),this.state.weights.map(function(l,u){if(o&&u>=s)return null;var c={type:t,min:n,max:i,step:a,value:l,onChange:function(t){var n=e.state.weights;n[u]=t.target.value,o&&u<o&&(n[u+s]=t.target.value),e.setState({weights:n},function(){e.state.owner.redraw()})}};return r.createElement("div",{key:"knot"+u},n,r.createElement("input",c),i," (= ",l,")")}))}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="locale-switcher";e.exports=function(e){return r.createElement("div",{className:"locale-switcher"},a.getContent(o,this))}},function(e,t,n){"use strict";e.exports={LocaleSwitcher:n(117)}},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:"The projection identity"}},onClick:function(e,t){t.t=t.curve.on({x:e.offsetX,y:e.offsetY},7),(t.t<.05||t.t>.95)&&(t.t=!1),t.redraw()},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[0].y-=10,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelHeight();if(e.setColor("black"),e.t){e.drawCircle(e.curve.get(e.t),3),e.setColor("lightgrey");var r,i,a,o=e.drawHull(t,e.t),s=e.utils;
 6===o.length?(r=t.points[1],i=o[5],a=s.lli4(r,i,t.points[0],t.points[2]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[2])):10===o.length&&(r=o[5],i=o[9],a=s.lli4(r,i,t.points[0],t.points[3]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[3])),e.setColor("#00FF00"),e.drawLine(r,i),e.setColor("red"),e.drawLine(i,a),e.setColor("black"),e.drawCircle(a,3),e.setFill("black"),e.text("A",{x:10+r.x,y:r.y}),e.text("B (t = "+e.utils.round(e.t,2)+")",{x:10+i.x,y:i.y}),e.text("C",{x:10+a.x,y:a.y});var l=s.dist(r,i),u=s.dist(i,a),c=l/u;e.text("d1 (A-B): "+s.round(l,2)+", d2 (B-C): "+s.round(u,2)+", ratio (d1/d2): "+s.round(c,4),{x:10,y:n-7})}},setCT:function(e,t){t.t=e.offsetX/t.getPanelWidth()},drawCTgraph:function(e){e.reset(),e.setColor("black");var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"u",0,1),e.setColor("blue");var i=function(t){var i=e.u(t),a={x:n+t*r,y:n+i*r};return a};if(e.drawFunction(i),e.t){var a=e.u(e.t),o=e.utils.round(a,3),s=e.utils.round(1-a,3),l=i(e.t);e.drawLine({x:l.x,y:n},l),e.drawLine({x:n,y:l.y},l),e.drawCircle(l,3),e.setFill("blue"),e.text("    t = "+e.utils.round(e.t,3),{x:l.x+10,y:l.y-7}),e.text("u(t) = "+e.utils.round(a,3),{x:l.x+10,y:l.y+7}),e.setFill("black"),e.text("C = "+o+" * start + "+s+" * end",{x:t/2-n,y:n+r})}},drawQCT:function(e){e.u=e.u||function(e){var t=(e-1)*(e-1),n=2*e*e-2*e+1;return t/n},this.drawCTgraph(e)},drawCCT:function(e){e.u=e.u||function(e){var t=(1-e)*(1-e)*(1-e),n=e*e*e+t;return t/n},this.drawCTgraph(e)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"De Casteljau's algorithm is the pivotal algorithm when it comes to Bézier curves. You can use it not just to split curves, but also to draw them efficiently (especially for high-order Bézier curves), as well as to come up with curves based on three points and a tangent. Particularly this last thing is really useful because it lets us \"mould\" a curve, by picking it up at some point, and dragging that point around to change the curve's shape."),r.createElement("p",null,"How does that work? Succinctly: we run de Casteljau's algorithm in reverse!"),r.createElement("p",null,"In order to run de Casteljau's algorithm in reverse, we need a few basic things: a start and end point, a point on the curve that want to be moving around, which has an associated ",r.createElement("i",null,"t"),' value, and a point we\'ve not explicitly talked about before, and as far as I know has no explicit name, but lives one iteration higher in the de Casteljau process then our on-curve point does. I like to call it "A" for reasons that will become obvious.'),r.createElement("p",null,'So let\'s use graphics instead of text to see where this "A" is, because text only gets us so far: in the following graphic, click anywhere on the curves to see the identity information that we\'ll be using to run de Casteljau in reverse (you can manipulate the curve even after picking a point. Note the "ratio" value when you do so: does it change?):'),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,preset:"abc",title:"Projections in a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onClick:this.onClick}),r.createElement(i,{inline:!0,preset:"abc",title:"Projections in a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onClick:this.onClick})),r.createElement("p",null,"Clicking anywhere on the curves shows us three things:"),r.createElement("ol",null,r.createElement("li",null,"our on-curve point; let's call that ",r.createElement("b",null,"B"),","),r.createElement("li",null,"a point at the tip of B's \"hat\", on de Casteljau step up; let's call that ",r.createElement("b",null,"A"),", and"),r.createElement("li",null,"a point that we get by projecting B onto the start--end baseline; let's call that ",r.createElement("b",null,"C"),".")),r.createElement("p",null,"These three values ABC hide an important identity formula for quadratic and cubic Bézier curves: for any point on the curve with some ",r.createElement("i",null,"t")," value, the ratio distance of C along baseline is fixed: if some ",r.createElement("i",null,"t")," value sets up a C that is 20% away from the start and 80% away from the end, then it doesn't matter where the start, end, or control points are: for that ",r.createElement("i",null,"t")," value, C will ",r.createElement("em",null,"always")," lie at 20% from the start and 80% from the end point. Go ahead, pick an on-curve point in either graphic and then move all the other points around: if you only move the control points, start and end won't move, and so neither will C, and if you move either start or end point, C will move but its relative position will not change. The following function stays true:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f48f095d9c37c079ff6a5f71b3047397aa7dfc6b.svg",style:{width:"13.19985rem",height:"1.125rem"}})),r.createElement("p",null,"So that just leaves finding A."),r.createElement("div",{className:"note"},r.createElement("p",null,"While that relation is fixed, the function ",r.createElement("i",null,"u(t)")," differs depending on whether we're working with quadratic or cubic curves:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d351ad8dd7d1ab5c5e65f5abd78caf082fc84eb4.svg",style:{width:"12.825000000000001rem",height:"5.92515rem"}})),r.createElement("p",null,"So, if we know the start and end coordinates, and we know the ",r.createElement("i",null,"t")," value, we know C:"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,preset:"abc",title:"Quadratic value of C for t",draw:this.drawQCT,onMouseMove:this.setCT}),r.createElement(i,{inline:!0,preset:"abc",title:"Cubic value of C for t",draw:this.drawCCT,onMouseMove:this.setCT})),r.createElement("p",null,"Mouse-over the graphs to see the expression for C, given the ",r.createElement("i",null,"t")," value at the mouse pointer.")),r.createElement("p",null,"There's also another important bit of information that is inherent to the ABC values: while the distances between A and B, and B and C, are dynamic (based on where we put B), the ",r.createElement("em",null,"ratio")," between the two distances is stable: given some ",r.createElement("i",null,"t")," value, the following always holds:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6cb3e94fe9164128a25570a32abed15baa726f17.svg",style:{width:"17.92485rem",height:"2.7rem"}})),r.createElement("p",null,"This leads to a pretty powerful bit of knowledge: merely by knowing the ",r.createElement("i",null,"t")," value of some on curve point, we know where C has to be (as per the above note), and because we know B and C, and thus have the distance between them, we know where A has to be:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1dffb79b42799c95c899e689b074361f662ec807.svg",style:{width:"15.525rem",height:"2.55015rem"}})),r.createElement("p",null,"And that's it, all values found."),r.createElement("div",{className:"note"},r.createElement("p",null,"Much like the ",r.createElement("i",null,"u(t)")," function in the above note, the ",r.createElement("i",null,"ratio(t)")," function depends on whether we're looking at quadratic or cubic curves. Their form is intrinsically related to the ",r.createElement("i",null,"u(t)")," function in that they both come rolling out of the same function evalution, explained over on ",r.createElement("a",{href:"http://mathoverflow.net/questions/122257/finding-the-formula-for-Bézier-curve-ratios-hull-point-point-baseline"},"MathOverflow"),' by Boris Zbarsky and myself. The ratio functions are the "s(t)" functions from the answers there, while the "u(t)" functions have the same name both here and on MathOverflow.'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7ef64890f95db9e48258edb46a3d52d5ed143155.svg",style:{width:"16.57485rem",height:"2.77515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5f2bb71795c615637d632da70b722938cb103b03.svg",style:{width:"15.075000000000001rem",height:"2.77515rem"}})),r.createElement("p",null,'Unfortunately, this trick only works for quadratic and cubic curves. Once we hit higher order curves, things become a lot less predictable; the "fixed point ',r.createElement("i",null,"C"),'" is no longer fixed, moving around as we move the control points, and projections of ',r.createElement("i",null,"B")," onto the line between start and end may actually lie on that line before the start, or after the end, and there are no simple ratios that we can exploit.")),r.createElement("p",null,"So: if we know B and its corresponding ",r.createElement("i",null,"t"),' value, then we know all the ABC values, which —together with a start and end coordinate— gives us the necessary information to reconstruct a curve\'s "de Casteljau skeleton", which means that two points and a value between 0 and 1, we can come up with a curve. And that opens up possibilities: curve manipulation by dragging an on-curve point, curve fitting of "a bunch of coordinates", these are useful things, and we\'ll look at both in the next sections.'))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="aligning",s=r.createClass({displayName:"Aligning",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=Math.atan2,l=Math.PI,u=2*l,c=Math.cos,h=Math.sin,d=r.createClass({displayName:"Introduction",statics:{keyHandlingOptions:{propName:"error",values:{38:.1,40:-.1},controller:function(e){e.error<.1&&(e.error=.1)}}},getDefaultProps:function(){return{title:"Approximating Bézier curves with circular arcs"}},setupCircle:function(e){var t=new e.Bezier(70,70,140,40,240,130);e.setCurve(t)},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.error=.5},getCCenter:function(e,t,n,r){var i,a=n.x-t.x,o=n.y-t.y,d=r.x-n.x,f=r.y-n.y,p=a*c(l/2)-o*h(l/2),m=a*h(l/2)+o*c(l/2),g=d*c(l/2)-f*h(l/2),v=d*h(l/2)+f*c(l/2),w=(t.x+n.x)/2,y=(t.y+n.y)/2,b=(n.x+r.x)/2,_=(n.y+r.y)/2,x=w+p,E=y+m,C=b+g,k=_+v,S=e.utils.lli8(w,y,x,E,b,_,C,k),P=e.utils.dist(S,t),T=s(t.y-S.y,t.x-S.x),N=s(n.y-S.y,n.x-S.x),M=s(r.y-S.y,r.x-S.x);return T<M?((T>N||N>M)&&(T+=u),T>M&&(i=M,M=T,T=i)):M<N&&N<T?(i=M,M=T,T=i):M+=u,S.s=T,S.e=M,S.r=P,S},drawCircle:function(e,t){e.reset();var n=t.points,r=this.getCCenter(e,n[0],n[1],n[2]);e.setColor("grey"),e.drawCircle(r,e.utils.dist(r,n[0])),e.setColor("black"),n.forEach(function(t){return e.drawCircle(t,3)});var i;e.setColor("blue"),e.drawLine(n[0],n[1]),i={x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("red"),e.drawLine(n[1],n[2]),i={x:(n[1].x+n[2].x)/2,y:(n[1].y+n[2].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("green"),e.drawLine(n[2],n[0]),i={x:(n[2].x+n[0].x)/2,y:(n[2].y+n[0].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("black"),e.drawPoint(r),e.setFill("black"),e.text("Intersection point",r,{x:-25,y:10})},drawSingleArc:function(e,t){e.reset();var n=t.arcs(e.error);e.drawSkeleton(t),e.drawCurve(t);var r=n[0];e.setColor("red"),e.setFill("rgba(255,0,0,0.2)"),e.debug=!0,e.drawArc(r),e.setFill("black"),e.text("Arc approximation with total error "+e.utils.round(e.error,1),{x:10,y:15})},drawArcs:function(e,t){e.reset();var n=t.arcs(e.error);e.drawSkeleton(t),e.drawCurve(t),n.forEach(function(t){e.setRandomColor(.3),e.setFill(e.getColor()),e.drawArc(t)}),e.setFill("black"),e.text("Arc approximation with total error "+e.utils.round(e.error,1)+" per arc segment",{x:10,y:15})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Let's look at doing the exact opposite of the previous section: rather than approximating circular arc using Bézier curves, let's approximate Bézier curves using circular arcs."),r.createElement("p",null,"We already saw in the section on circle approximation that this will never yield a perfect equivalent, but sometimes you need circular arcs, such as when you're working with fabrication machinery, or simple vector languages that understand lines and circles, but not much else."),r.createElement("p",null,'The approach is fairly simple: pick a starting point on the curve, and pick two points that are further along the curve. Determine the circle that goes through those three points, and see if it fits the part of the curve we\'re trying to approximate. Decent fit? Try spacing the points further apart. Bad fit? Try spacing the points closer together. Keep doing this until you\'ve found the "good approximation/bad approximation" boundary, record the "good" arc, and then move the starting point up to overlap the end point we previously found. Rinse and repeat until we\'ve covered the entire curve.'),r.createElement("p",null,"So: step 1, how do we find a circle through three points? That part is actually really simple. You may remember (if you ever learned it!) that a line between two points on a circle is called a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Chord_%28geometry%29"},"chord"),", and one property of chords is that the line from the center of any chord, perpendicular to that chord, passes through the center of the circle."),r.createElement("p",null,"So: if we have have three points, we have three (different) chords, and consequently, three (different) lines that go from those chords through the center of the circle. So we find the centers of the chords, find the perpendicular lines, find the intersection of those lines, and thus find the center of the circle."),r.createElement("p",null,"The following graphic shows this procedure with a different colour for each chord and its associated perpendicular through the center. You can move the points around as much as you like, those lines will always meet!"),r.createElement(i,{preset:"simple",title:"Finding a circle through three points",setup:this.setupCircle,draw:this.drawCircle}),r.createElement("p",null,"So, with the procedure on how to find a circle through three points, finding the arc through those points is straight-forward: pick one of the three points as start point, pick another as an end point, and the arc has to necessarily go from the start point, over the remaining point, to the end point."),r.createElement("p",null,"So how can we convert a Bezier curve into a (sequence of) circular arc(s)?"),r.createElement("ul",null,r.createElement("li",null,"Start at ",r.createElement("em",null,"t=0")),r.createElement("li",null,"Pick two points further down the curve at some value ",r.createElement("em",null,"m = t + n")," and ",r.createElement("em",null,"e = t + 2n")),r.createElement("li",null,"Find the arc that these points define"),r.createElement("li",null,"Determine how close the found arc is to the curve:",r.createElement("ul",null,r.createElement("li",null,"Pick two additional points ",r.createElement("em",null,"e1 = t + n/2")," and ",r.createElement("em",null,"e2 = t + n + n/2"),"."),r.createElement("li",null,"These points, if the arc is a good approximation of the curve interval chosen, should lie ",r.createElement("em",null,"on")," the circle, so their distance to the center of the circle should be the same as the distance from any of the three other points to the center."),r.createElement("li",null,"For point points, determine the (absolute) error between the radius of the circle, and the",r.createElement("em",null,"actual")," distance from the center of the circle to the point on the curve."),r.createElement("li",null,"If this error is too high, we consider the arc bad, and try a smaller interval.")))),r.createElement("p",null,"The result of this is shown in the next graphic: we start at a guaranteed failure: s=0, e=1. That's the entire curve. The midpoint is simply at ",r.createElement("em",null,"t=0.5"),", and then we start performing a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"Binary Search"),"."),r.createElement("ol",null,r.createElement("li",null,"We start with ",1),r.createElement("li",null,"That'll fail, so we retry with the interval halved: ",.5),r.createElement("ul",null,r.createElement("li",null,"If that arc's good, we move back up by half distance: ",.75,"."),r.createElement("li",null,"However, if the arc was still bad, we move ",r.createElement("em",null,"down")," by half the distance: ",.25,".")),r.createElement("li",null,"We keep doing this over and over until we have two arcs found in sequence of which the first arc is good, and the second arc is bad. When we find that pair, we've found the boundary between a good approximation and a bad approximation, and we pick the former")),r.createElement("p",null,"The following graphic shows the result of this approach, with a default error threshold of 0.5, meaning that if an arc is off by a ",r.createElement("em",null,"combined")," half pixel over both verification points, then we treat the arc as bad. This is an extremely simple error policy, but already works really well. Note that the graphic is still interactive, and you can use your up and down arrow keys keys to increase or decrease the error threshold, to see what the effect of a smaller or larger error threshold is."),r.createElement(i,{preset:"simple",title:"Arc approximation of a Bézier curve",setup:this.setupCubic,draw:this.drawSingleArc,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"With that in place, all that's left now is to \"restart\" the procedure by treating the found arc's end point as the new to-be-determined arc's starting point, and using points further down the curve. We keep trying this until the found end point is for ",r.createElement("em",null,"t=1"),", at which point we are done. Again, the following graphic allows for up and down arrow key input to increase or decrease the error threshold, so you can see how picking a different threshold changes the number of arcs that are necessary to reasonably approximate a curve:"),r.createElement(i,{preset:"simple",title:"Arc approximation of a Bézier curve",setup:this.setupCubic,draw:this.drawArcs,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,'So... what is this good for? Obviously, If you\'re working with technologies that can\'t do curves, but can do lines and circles, then the answer is pretty straight-forward, but what else? There are some reasons why you might need this technique: using circular arcs means you can determine whether a coordinate lies "on" your curve really easily: simply compute the distance to each circular arc center, and if any of those are close to the arc radii, at an angle betwee the arc start and end: bingo, this point can be treated as lying "on the curve". Another benefit is that this approximation is "linear": you can almost trivially travel along the arcs at fixed speed. You can also trivially compute the arc length of the approximated curve (it\'s a bit like curve flattening). The only thing to bear in mind is that this is a lossy equivalence: things that you compute based on the approximation are guaranteed "off" by some small value, and depending on how much precision you need, arc approximation is either going to be super useful, or completely useless. It\'s up to you to decide which, based on your application!'))}});e.exports=o(d)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),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 f=(400*r/3|0)/100,p=(100*a|0)/100;e.text("Approximating with "+t+" strips (true area: "+f+"): "+p,{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(0),i=n(8),a=n(6),o=n(15),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(0),i=n(4),a=new i,o="boundingbox",s=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:a.getTitle(o)}},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),e.setColor("red"),t.extrema().values.forEach(function(n){e.drawCircle(t.get(n),3)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(600,300),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/9)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points);var n=0|Math.round(this.points.length/2);this.knots[n+0]=this.knots[n],this.knots[n+1]=this.knots[n],this.knots[n+2]=this.knots[n];for(var r=n+3;r<this.knots.length;r++)this.knots[r]=this.knots[r-1]+1;this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(107),a=n(6),o=n(111),s=n(116),l=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:"B-Splines"}},bindKnots:function(e,t,n){console.log("binding knots for "+n),this.refs[n].bindKnots(e,t)},bindWeights:function(e,t,n,r){this.refs[r].bindWeights(e,t,n)},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. Easily confused to mean Bézier splines, that's not actually what they are; they are \"basis function\" splines, which makes a lot of difference, which we'll be looking at in this section. We're not going to dive as deep into B-Splines as we have for Bézier curves (that would be an entire primer on its own) but we'll be looking at how B-Splines work, what kind of maths is involved in computing them, and how to draw them based on a number of parameters that you can pick for individual B-Splines."),r.createElement("p",null,"First off: B-Splines are ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Piecewise"},'"piecewise polynomial interpolation curves"'),', where the "single curve" is built by performing polynomial interpolation over a set of points, using a sliding window of a fixed number of points. For instance, a "cubic" B-Spline defined by twelve points will have its curve built by evaluating the polynomial interpolation of four points, and the curve can be treated as a lot of different sections, each controlled by four points at a time, such that the full curve consists of smoothly connected sections defined by points ',"{","1,2,3,4","}",", ","{","2,3,4,5","}",", ..., ","{","8,9,10,11","}",", and finally ","{","9,10,11,12","}",", for eight sections."),r.createElement("p",null,"What do they look like? They look like this! .. okay that's an empty graph, but simply click to place some point, with the stipulation that you need at least four point to see any curve. More than four points simply draws a longer B-Spline curve:"),r.createElement(i,{sketch:n(125)}),r.createElement("p",null,"The important part to notice here is that we are ",r.createElement("strong",null,"not"),' doing the same thing with B-Splines that we do for poly-Béziers or Catmull-Rom curves: both of the latter simply define new sections as literally "new sections based on new points", so a 12 point cubic poly-Bézier curve is actually impossible, because we start with a four point curve, and then add three more points for each section that follows, so we can only have 4, 7, 10, 13, 16, etc point Poly-Béziers. Similarly, while Catmull-Rom curves can grow by adding single points, this addition of a single point introduces three implicit Bézier points. Cubic B-Splines, on the other hand, are smooth interpolations of ',r.createElement("em",null,"each possible curve involving four consecutive points"),", such that at any point along the curve except for our start and end points, our on-curve coordinate is defined by four control points."),r.createElement("p",null,"Consider the difference to be this:"),r.createElement("ul",null,r.createElement("li",null,"for Bézier curves, the curve is defined as an interpolation of points, but:"),r.createElement("li",null,"for B-Splines, the curve is defined as an interpolation of ",r.createElement("em",null,"curves"),".")),r.createElement("p",null,"In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work."),r.createElement("h2",null,"How to compute a B-Spline curve: some maths"),r.createElement("p",null,"Given a B-Spline of degree ",r.createElement("code",null,"d")," and thus order ",r.createElement("code",null,"k=d+1")," (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and ",r.createElement("code",null,"n")," control points ",r.createElement("code",null,"P",r.createElement("sub",null,"0"))," through ",r.createElement("code",null,"P",r.createElement("sub",null,"n-1")),", we can compute a point on the curve for some value ",r.createElement("code",null,"t")," in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluting the following function:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/329da80e737b0005f4dbe4c84ff868bde5dfaee0.svg",style:{width:"11.775150000000002rem",height:"3.00015rem"}})),r.createElement("p",null,'Which, honestly, doesn\'t tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the ',r.createElement("em",null,"N(...)")," function, subscipted with an obvious parameter ",r.createElement("code",null,"i"),", which comes from our summation, and some magical parameter ",r.createElement("code",null,"k"),". So we need to know two things: 1. what does N(t) do, and 2. what is that ",r.createElement("code",null,"k"),"? Let's cover both, in reverse order."),r.createElement("p",null,"The parameter ",r.createElement("code",null,"k"),' represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or tops influencing the total curvature as a "knot on the curve". Doing so for a degree ',r.createElement("code",null,"d")," B-Spline with ",r.createElement("code",null,"n")," control point gives us ",r.createElement("code",null,"d + n + 1")," knots, defining ",r.createElement("code",null,"d + n")," intervals along the curve, and it is these intervals that the above ",r.createElement("code",null,"k")," subscript to the N() function applies to."),r.createElement("p",null,"Then the N() function itself. What does it look like?"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c10575fb591062784484357356796a4c0be4f83e.svg",style:{width:"38.39985rem",height:"3.15rem"}})),r.createElement("p",null,"So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where ",r.createElement("code",null,"i")," goes up, and ",r.createElement("code",null,"k")," goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following ",r.createElement("code",null,"i"),"/",r.createElement("code",null,"k")," values:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6664a4fc5832059bbc68eaa8068a4b2577e1d96a.svg",style:{width:"16.725150000000003rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And this function finally has a straight up evaluation: if a ",r.createElement("code",null,"t")," value lies within a knot-specific interval once we reach a ",r.createElement("code",null,"k=1"),' value, it "counts", otherwise it doesn\'t. We did cheat a little, though, because for all these values we need to scale our ',r.createElement("code",null,"t")," value first, so that it lies in the interval bounded by ",r.createElement("code",null,"knots[d]")," and ",r.createElement("code",null,"knots[n]"),", which are the start point and end point where curvature is controlled by exactly ",r.createElement("code",null,"order")," control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map ",r.createElement("code",null,"t")," from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead."),r.createElement("h2",null,"Can we simplify that?"),r.createElement("p",null,"We can, yes."),r.createElement("p",null,"People far smarter than us have looked at this work, and two in particular —",r.createElement("a",{href:"http://www.npl.co.uk/people/maurice-cox"},"Maurice Cox")," and ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Carl_R._de_Boor"},"Carl de Boor"),"— came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating ",r.createElement("em",null,"d(t)")," on a curve section between knots ",r.createElement("em",null,"i")," and ",r.createElement("em",null,"i+1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3780a420cd9b1bc59bec2c49bbd29f5e58497a3c.svg",style:{width:"18.75015rem",height:"1.27485rem"}})),"This is another recursive function, with ",r.createElement("em",null,"k")," values decreasing from the curve order to 1, and the value ",r.createElement("em",null,"α")," (alpha) defined by:",r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ba3b25cd54993b4601d8f415bc4cde73af4fc460.svg",style:{width:"17.325rem",height:"2.7rem"}})),r.createElement("p",null,'That looks complicated, but it\'s not. Computing alpha is just a fraction involving known, plain numbers and once we have our alpha value, computing (1-alpha) is literally just "computing one minus alpha". Computing this d() function is thus simply a matter of "computing simple arithmetics but with recursion", which might be computationally expensive because we\'re doing "a lot of" steps, but is also computationally cheap because each step only involves very simple maths. Of course as before the recursion has to stop:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1405067abebab73574934e3e69d7a7158106c744.svg",style:{width:"25.34985rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So, we see two stopping conditions: either ",r.createElement("code",null,"i")," becomes 0, in which case d() is zero, or ",r.createElement("code",null,"k"),' becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.'),r.createElement("p",null,"Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily: we just need to compute a triangle of interconnected values. For instance, d() for i=3, k=3 yields the following triangle:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a0a1069b001c75a1fab7f40ffa8bc403e1408f0d.svg",style:{width:"28.87515rem",height:"18.300150000000002rem"}})),r.createElement("p",null,"That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2): d(3,3) = a(3,3) x d(2,3) + (1-a(3,3)) x d(2,2)... and we simply keep expanding our triangle until we reach the terminating function parameters. Done deal!"),r.createElement("p",null,"One thing we need to keep in mind is that we're working with a spline that is contrained by its control points, so even though the ",r.createElement("code",null,"d(..., k)")," values are zero or one at the lowest level, they are really \"zero or one, times their respective control point\", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point: that's pretty essential!"),r.createElement("p",null,'If we run this computation "down", starting at d(3,3), then without special code in place we would be computing quite a few terms multiple times at each step. On the other hand, we can also start with that last "column", we can generate the terminating d() values first, then compute the a() constants, perform our multiplcations, generate the previous step\'s d() values, compute their a() constants, do the multiplications, etc. until we end up all the way back at the top. If we run our computation this way, we don\'t need any explicit caching, we can just "recycle" the list of numbers we start with and simply update them as we move up the triangle. So, let\'s implement that!'),r.createElement("h2",null,"Cool, cool... but I don't know what to do with that information"),r.createElement("p",null,"I know, this is pretty mathy, so let's have a look at what happens when we change parameters here. We can't change the maths for the interpolation functions, so that gives us only one way to control what happens here: the knot vector itself. As such, let's look at the graph that shows the interpolation functions for a cubic B-Spline with seven points with a uniform knot vector (so we see seven identical functions), representing how much each point (represented by one function each) influences the total curvature, given our knot values. And, because exploration is the key to discovery, let's make the knot vector a thing we can actually manipulate. Normally a proper knot vector has a constraint that any value is strictly equal to, or larger than the previous ones, but screw it this is programming, let's ignore that hard restriction and just mess with the knots however we like."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"interpolation-graph"}),r.createElement(i,{sketch:n(128),controller:function(t,n){return e.bindKnots(t,n,"interpolation-graph")}})),r.createElement("p",null,"Changing the values in the knot vector changes how much each point influences the total curvature (with some clever knot value manipulation, we can even make the influence of certain points disappear entirely!), so we can see that while the control points define the hull inside of which we're going to be drawing a curve, it is actually the knot vector that determines the actual ",r.createElement("em",null,"shape")," of the curve inside that hull."),r.createElement("p",null,"After reading the rest of this section you may want to come back here to try some specific knot vectors, and see if the resulting interpolation landscape makes sense given what you will now think should happen!"),r.createElement("h2",null,"Running the computation"),r.createElement("p",null,"Unlike the de Casteljau algorithm, where the ",r.createElement("code",null,"t")," value stays the same at every iteration, for B-Splines that is not the case, and so we end having to (for each point we evaluate) run a fairly involving bit of recursive computation. The algorithm is discussed on ",r.createElement("a",{href:"http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/de-Boor.html"},"this Michigan Tech")," page, but an easier to read version is implemented by ",r.createElement("a",{href:"https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71"},"b-spline.js"),", so we'll look at its code."),r.createElement("p",null,"Given an input value ",r.createElement("code",null,"t"),", we first map the input to a value from the domain [0,1] to the domain [knots[degree], knots[knots.length - 1 - degree]. Then, we find the section number ",r.createElement("code",null,"s")," that this mapped ",r.createElement("code",null,"t")," value lies on:"),r.createElement("pre",null,"\n","        for(s=domain[0]; s < domain[1]; s++) ","{","\n","          if(knots[s] <= t && t <= knots[s+1]) break;","\n","        ","}"),r.createElement("p",null,"after running this code, ",r.createElement("code",null,"s")," is the index for the section the point will lie on. We then run the algorithm mentioned on the MU page (updated to use this description's variable names):"),r.createElement("pre",null,"\n","        let v = copy of control points","\n","\n","        for(let L = 1; L <= order; L++) ","{","\n","          for(let i=s; i > s + L - order; i--) ","{","\n","            let numerator = t - knots[i]","\n","            let denominator = knots[i - L + order] - knots[i]","\n","            let alpha = numerator / denominator","\n","            let v[i] = alpha * v[i] + (1-alpha) * v[i-1]","\n","          ","}","\n","        ","}"),r.createElement("p",null,'(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at ',r.createElement("code",null,"i=s")," at each level of the interpolation, and we stop when ",r.createElement("code",null,"i = s - order + level"),", so we always end up with a value for ",r.createElement("code",null,"i")," such that those ",r.createElement("code",null,"v[i-1]")," don't try to use an array index that doesn't exist)"),r.createElement("h2",null,"Open vs. closed paths"),r.createElement("p",null,"Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are ",r.createElement("em",null,"the same point"),". However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order ",r.createElement("code",null,"d")," B-Spline, we need to make the last ",r.createElement("code",null,"d")," point the same as the first ",r.createElement("code",null,"d")," points. And the easiest way to do this is to simply append ",r.createElement("code",null,"points.splice(0,d)")," to ",r.createElement("code",null,"points"),". Done!"),r.createElement("p",null,'Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for ',r.createElement("code",null,"points[0]")," and ",r.createElement("code",null,"points[n-k]")," etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects."),r.createElement("h2",null,"Manipulating the curve through the knot vector"),r.createElement("p",null,"The most important thing to understand when it comes to B-Splines is that they work ",r.createElement("em",null,"because"),' of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the ',r.createElement("em",null,"values")," that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:"),r.createElement("ol",null,r.createElement("li",null,"we can use a uniform knot vector, with equally spaced intervals,"),r.createElement("li",null,"we can use a non-uniform knot vector, without enforcing equally spaced internvals,"),r.createElement("li",null,'we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and'),r.createElement("li",null,"we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.")),r.createElement("h3",null,"Uniform B-Splines"),r.createElement("p",null,"The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines ",r.createElement("em",null,"the same intervals"),", or even [0,2,3,...,18,20,22], which also defines ",r.createElement("em",null,"the same intervals"),", just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i<r+1+n;i++)this.drawN(i,n,e,(this.width-e)/(2*(r+2)),this.height-2*e)},drawN:function(e,t,n,i,a){this.stroke(r[e]);this.knots;this.beginPath();for(var o=e-1,s=o,l=.1,u=e+t+1;s<u;s+=l){var c=n+e*i+s*i,h=this.height-n-this.N(e,t,s)*a;this.vertex(c,h)}this.endPath()},N:function(e,t,n){var r=this.knots[e],i=this.knots[e+1],a=this.knots[e+t-1],o=this.knots[e+t];if(1===t)return r<=n&&n<=i?1:0;var s=n-r,l=a-r,u=0===l?0:s/l,c=o-n,h=o-i,d=0===h?0:c/h,f=0;if(0!==u){var p=this.ensureN(e,t-1,n);f=void 0===p?this.N(e,t-1,n):p}var m=0;if(0!==d){var g=this.ensureN(e+1,t-1,n);m=void 0===g?this.N(e+1,t-1,n):g}return this.cacheN(e,t,n,u*f+d*m),this.cache.N[e][t][n]},ensureN:function(e,t,n){this.cache.N||(this.cache.N=[]);var r=this.cache.N;return r[e]||(r[e]=[]),r[e][t]||(r[e][t]=[]),r[e][t][n]},cacheN:function(e,t,n,r){this.ensureN(e,t,n),this.cache.N[e][t][n]=r}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points,!0),
-this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,weights:[],setup:function(){this.size(400,400);for(var e=2*Math.PI,t=this.width/3,n=0;n<6;n++)this.points.push({x:this.width/2+t*Math.cos(n/6*e),y:this.height/2+t*Math.sin(n/6*e)});this.points=this.points.concat(this.points.slice(0,3)),this.closed=this.degree,this.knots=this.formKnots(this.points),this.weights=this.formWeights(this.points),this.props.controller&&this.props.controller(this,this.knots,this.weights,this.closed),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="canonical",s=r.createClass({displayName:"Canonical",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(6),a=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:"Bézier curves and Catmull-Rom curves"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Taking an excursion to different splines, the other common design curve is the ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline"},"Catmull-Rom spline"),". Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one into the other, and back, with some simple substitutions?"),r.createElement("p",null,'Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, except the first and last, which makes sense if you read the "natural language" description for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point P',r.createElement("sub",null,"x"),", has a tangent along the line P",r.createElement("sub",null,"x-1")," to P",r.createElement("sub",null,"x+1"),". The curve runs from points P",r.createElement("sub",null,"2")," to  P",r.createElement("sub",null,"n-1"),', and has a "tension" that determines how fast the curve passes through each point. The lower the tension, the faster the curve goes through each point, and the bigger its local tangent is.'),r.createElement("p",null,"I'll be showing the conversion to and from Catmull-Rom curves for the tension that the Processing language uses for its Catmull-Rom algorithm."),r.createElement("p",null,"We start with showing the Catmull-Rom matrix form:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5fc1c44e623f2a9fbeefdaa204557479e3debf5a.svg",style:{width:"30.150000000000002rem",height:"5.70015rem"}})),r.createElement("p",null,"However, there's something funny going on here: the coordinate column matrix looks weird. The reason is that Catmull-Rom curves are actually curve segments that are described by two points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead, this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1 with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate 4). So if we want to express this as a matrix form based on four coordinates, we get this representation instead:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/40b9ca9b5755a4be49517ddfa630fef7b8e23067.svg",style:{width:"29.475rem",height:"6.525rem"}})),r.createElement("div",{className:"note"},r.createElement("h2",null,"Where did that 2 come from?"),r.createElement("p",null,"Catmull-Rom splines are based on the concept of tension: the higher the tensions, the shorter the tangents at the departure and arrival points. The basic Catmull-Rom curve arrives and departs with tangents equal to half the distance between the two adjacent points, so that's where that 2 came from."),r.createElement("p",null,'However, the "real" matrix is this:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7bf9b5e971866babedd991ccdde5c4ab104297e5.svg",style:{width:"24.75rem",height:"6.60015rem"}})),r.createElement("p",null,"This bakes in the tension factor τ explicitly.")),r.createElement("p",null,'Plugging this into the "two coordinates and two tangent vectors" matrix form, we get:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4818f8797c35f23c2b9883aa986b1129b2fa151a.svg",style:{width:"21.45015rem",height:"5.70015rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/08f77989369f664cbc0fb7526791efd4c5299d70.svg",style:{width:"35.47485rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7ae769c5370469b16523bab6f34abf0dd6749be.svg",style:{width:"28.425150000000002rem",height:"5.54985rem"}})),r.createElement("p",null,"So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7250f1c57e2bd66ec4349e4e88db4d5d74401a06.svg",style:{width:"50.85rem",height:"5.54985rem"}})),r.createElement("p",null,"The difference is somewhere in the actual hermite matrix, since the ",r.createElement("em",null,"t")," and coordinate values are identical, so let's solve that matrix equasion:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8a42b24fca3aaf6b8ec08e84b7e91c43e26e8acf.svg",style:{width:"28.575rem",height:"5.54985rem"}})),r.createElement("p",null,"We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the Bézier matrix on the right side of the equals sign:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e111d6e846f4d7204dec484005f74993e66c6c9.svg",style:{width:"58.19985rem",height:"5.70015rem"}})),r.createElement("p",null,"Which gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f94b80113772d90a4fbc93d4495cb5767e5c8123.svg",style:{width:"12.6rem",height:"5.47515rem"}})),r.createElement("p",null,"Multiplying this ",r.createElement("strong",null,r.createElement("em",null,"A"))," with our coordinates will give us a proper Bézier matrix expression again:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d088274e440ceeac2916a0f32176682d776c1c57.svg",style:{width:"31.725rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9e68f80b270d3445d9f9cb28ff2c5aed219aa9d2.svg",style:{width:"25.650000000000002rem",height:"6.60015rem"}})),r.createElement("p",null,"So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning the Catmull-Rom coordinates on the left into the Bézier coordinates on the right (with τ being our tension factor):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f0c5a707b590eaf8899a927ce39fd186a6acecf3.svg",style:{width:"18.07515rem",height:"6.67485rem"}})),r.createElement("p",null,"And the other way around, a Bézier to Catmull-Rom conversion requires turning the Bézier coordinates on the left this time into the Catmull-Rom coordinates on the right. Note that there is no tension this time, because Bézier curves don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension Catmull-Rom curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/51da95daf2645abd9903a4e28749a6d01826625c.svg",style:{width:"21.150000000000002rem",height:"5.625rem"}})),r.createElement("p",null,"Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom splines, the choice mostly being which drawing algorithms we have natively available."))}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Creating a Catmull-Rom curve from three points"}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?"),r.createElement("p",null,"As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve."),r.createElement("p",null,"Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of ",r.createElement("i",null,"n")," points, in order to draw the equivalent curve using cubic Bézier curves we need a massive ",r.createElement("i",null,"3n-1")," points (and that's without double-counting points that are shared by consecutive cubic curves)."),r.createElement("p",null,'In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there\'s the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:'),r.createElement(i,{preset:"threepanel",title:"Catmull-Rom curve fitting",setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"As should be obvious by now, Catmull-Rom curves are great for \"fitting a curvature to some points\", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",style:{width:"20.77515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",style:{width:"14.99985rem",height:"2.7rem"}})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",style:{width:"39.07485rem",height:"1.125rem"}})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",style:{width:"6.9750000000000005rem",height:"2.7rem"}})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e940f26afcd5f80371b6b72a8f52e217da64721d.svg",style:{width:"16.50015rem",height:"13.275rem"}})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",style:{width:"18.225rem",height:"2.17485rem"}})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6e512d83529089b2294b45659b826bb24a598356.svg",style:{width:"29.025000000000002rem",height:"5.175rem"}})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d13ad085587983ba3fa6fe9051dcc2f6a3d0917c.svg",style:{width:"27.675rem",height:"9.525150000000002rem"}})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",style:{width:"18.225rem",height:"4.5rem"}})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points.  However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{
+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(0),i=n(4),a=new i,o="boundingbox",s=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:a.getTitle(o)}},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),e.setColor("red"),t.extrema().values.forEach(function(n){e.drawCircle(t.get(n),3)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(600,300),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/9)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points);var n=0|Math.round(this.points.length/2);this.knots[n+0]=this.knots[n],this.knots[n+1]=this.knots[n],this.knots[n+2]=this.knots[n];for(var r=n+3;r<this.knots.length;r++)this.knots[r]=this.knots[r-1]+1;this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(107),a=n(6),o=n(111),s=n(116),l=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:"B-Splines"}},bindKnots:function(e,t,n){console.log("binding knots for "+n),this.refs[n].bindKnots(e,t)},bindWeights:function(e,t,n,r){this.refs[r].bindWeights(e,t,n)},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. Easily confused to mean Bézier splines, that's not actually what they are; they are \"basis function\" splines, which makes a lot of difference, which we'll be looking at in this section. We're not going to dive as deep into B-Splines as we have for Bézier curves (that would be an entire primer on its own) but we'll be looking at how B-Splines work, what kind of maths is involved in computing them, and how to draw them based on a number of parameters that you can pick for individual B-Splines."),r.createElement("p",null,"First off: B-Splines are ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Piecewise"},'"piecewise polynomial interpolation curves"'),', where the "single curve" is built by performing polynomial interpolation over a set of points, using a sliding window of a fixed number of points. For instance, a "cubic" B-Spline defined by twelve points will have its curve built by evaluating the polynomial interpolation of four points, and the curve can be treated as a lot of different sections, each controlled by four points at a time, such that the full curve consists of smoothly connected sections defined by points ',"{","1,2,3,4","}",", ","{","2,3,4,5","}",", ..., ","{","8,9,10,11","}",", and finally ","{","9,10,11,12","}",", for eight sections."),r.createElement("p",null,"What do they look like? They look like this! .. okay that's an empty graph, but simply click to place some point, with the stipulation that you need at least four point to see any curve. More than four points simply draws a longer B-Spline curve:"),r.createElement(i,{sketch:n(125)}),r.createElement("p",null,"The important part to notice here is that we are ",r.createElement("strong",null,"not"),' doing the same thing with B-Splines that we do for poly-Béziers or Catmull-Rom curves: both of the latter simply define new sections as literally "new sections based on new points", so a 12 point cubic poly-Bézier curve is actually impossible, because we start with a four point curve, and then add three more points for each section that follows, so we can only have 4, 7, 10, 13, 16, etc point Poly-Béziers. Similarly, while Catmull-Rom curves can grow by adding single points, this addition of a single point introduces three implicit Bézier points. Cubic B-Splines, on the other hand, are smooth interpolations of ',r.createElement("em",null,"each possible curve involving four consecutive points"),", such that at any point along the curve except for our start and end points, our on-curve coordinate is defined by four control points."),r.createElement("p",null,"Consider the difference to be this:"),r.createElement("ul",null,r.createElement("li",null,"for Bézier curves, the curve is defined as an interpolation of points, but:"),r.createElement("li",null,"for B-Splines, the curve is defined as an interpolation of ",r.createElement("em",null,"curves"),".")),r.createElement("p",null,"In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work."),r.createElement("h2",null,"How to compute a B-Spline curve: some maths"),r.createElement("p",null,"Given a B-Spline of degree ",r.createElement("code",null,"d")," and thus order ",r.createElement("code",null,"k=d+1")," (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and ",r.createElement("code",null,"n")," control points ",r.createElement("code",null,"P",r.createElement("sub",null,"0"))," through ",r.createElement("code",null,"P",r.createElement("sub",null,"n-1")),", we can compute a point on the curve for some value ",r.createElement("code",null,"t")," in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluting the following function:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/329da80e737b0005f4dbe4c84ff868bde5dfaee0.svg",style:{width:"11.775150000000002rem",height:"3.00015rem"}})),r.createElement("p",null,'Which, honestly, doesn\'t tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the ',r.createElement("em",null,"N(...)")," function, subscipted with an obvious parameter ",r.createElement("code",null,"i"),", which comes from our summation, and some magical parameter ",r.createElement("code",null,"k"),". So we need to know two things: 1. what does N(t) do, and 2. what is that ",r.createElement("code",null,"k"),"? Let's cover both, in reverse order."),r.createElement("p",null,"The parameter ",r.createElement("code",null,"k"),' represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or tops influencing the total curvature as a "knot on the curve". Doing so for a degree ',r.createElement("code",null,"d")," B-Spline with ",r.createElement("code",null,"n")," control point gives us ",r.createElement("code",null,"d + n + 1")," knots, defining ",r.createElement("code",null,"d + n")," intervals along the curve, and it is these intervals that the above ",r.createElement("code",null,"k")," subscript to the N() function applies to."),r.createElement("p",null,"Then the N() function itself. What does it look like?"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c10575fb591062784484357356796a4c0be4f83e.svg",style:{width:"38.39985rem",height:"3.15rem"}})),r.createElement("p",null,"So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where ",r.createElement("code",null,"i")," goes up, and ",r.createElement("code",null,"k")," goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following ",r.createElement("code",null,"i"),"/",r.createElement("code",null,"k")," values:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6664a4fc5832059bbc68eaa8068a4b2577e1d96a.svg",style:{width:"16.725150000000003rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And this function finally has a straight up evaluation: if a ",r.createElement("code",null,"t")," value lies within a knot-specific interval once we reach a ",r.createElement("code",null,"k=1"),' value, it "counts", otherwise it doesn\'t. We did cheat a little, though, because for all these values we need to scale our ',r.createElement("code",null,"t")," value first, so that it lies in the interval bounded by ",r.createElement("code",null,"knots[d]")," and ",r.createElement("code",null,"knots[n]"),", which are the start point and end point where curvature is controlled by exactly ",r.createElement("code",null,"order")," control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map ",r.createElement("code",null,"t")," from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead."),r.createElement("h2",null,"Can we simplify that?"),r.createElement("p",null,"We can, yes."),r.createElement("p",null,"People far smarter than us have looked at this work, and two in particular —",r.createElement("a",{href:"http://www.npl.co.uk/people/maurice-cox"},"Maurice Cox")," and ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Carl_R._de_Boor"},"Carl de Boor"),"— came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating ",r.createElement("em",null,"d(t)")," on a curve section between knots ",r.createElement("em",null,"i")," and ",r.createElement("em",null,"i+1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3780a420cd9b1bc59bec2c49bbd29f5e58497a3c.svg",style:{width:"18.75015rem",height:"1.27485rem"}})),"This is another recursive function, with ",r.createElement("em",null,"k")," values decreasing from the curve order to 1, and the value ",r.createElement("em",null,"α")," (alpha) defined by:",r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ba3b25cd54993b4601d8f415bc4cde73af4fc460.svg",style:{width:"17.325rem",height:"2.7rem"}})),r.createElement("p",null,'That looks complicated, but it\'s not. Computing alpha is just a fraction involving known, plain numbers and once we have our alpha value, computing (1-alpha) is literally just "computing one minus alpha". Computing this d() function is thus simply a matter of "computing simple arithmetics but with recursion", which might be computationally expensive because we\'re doing "a lot of" steps, but is also computationally cheap because each step only involves very simple maths. Of course as before the recursion has to stop:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1405067abebab73574934e3e69d7a7158106c744.svg",style:{width:"25.34985rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So, we see two stopping conditions: either ",r.createElement("code",null,"i")," becomes 0, in which case d() is zero, or ",r.createElement("code",null,"k"),' becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.'),r.createElement("p",null,"Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily: we just need to compute a triangle of interconnected values. For instance, d() for i=3, k=3 yields the following triangle:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a0a1069b001c75a1fab7f40ffa8bc403e1408f0d.svg",style:{width:"28.87515rem",height:"18.300150000000002rem"}})),r.createElement("p",null,"That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2): d(3,3) = a(3,3) x d(2,3) + (1-a(3,3)) x d(2,2)... and we simply keep expanding our triangle until we reach the terminating function parameters. Done deal!"),r.createElement("p",null,"One thing we need to keep in mind is that we're working with a spline that is contrained by its control points, so even though the ",r.createElement("code",null,"d(..., k)")," values are zero or one at the lowest level, they are really \"zero or one, times their respective control point\", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point: that's pretty essential!"),r.createElement("p",null,'If we run this computation "down", starting at d(3,3), then without special code in place we would be computing quite a few terms multiple times at each step. On the other hand, we can also start with that last "column", we can generate the terminating d() values first, then compute the a() constants, perform our multiplcations, generate the previous step\'s d() values, compute their a() constants, do the multiplications, etc. until we end up all the way back at the top. If we run our computation this way, we don\'t need any explicit caching, we can just "recycle" the list of numbers we start with and simply update them as we move up the triangle. So, let\'s implement that!'),r.createElement("h2",null,"Cool, cool... but I don't know what to do with that information"),r.createElement("p",null,"I know, this is pretty mathy, so let's have a look at what happens when we change parameters here. We can't change the maths for the interpolation functions, so that gives us only one way to control what happens here: the knot vector itself. As such, let's look at the graph that shows the interpolation functions for a cubic B-Spline with seven points with a uniform knot vector (so we see seven identical functions), representing how much each point (represented by one function each) influences the total curvature, given our knot values. And, because exploration is the key to discovery, let's make the knot vector a thing we can actually manipulate. Normally a proper knot vector has a constraint that any value is strictly equal to, or larger than the previous ones, but screw it this is programming, let's ignore that hard restriction and just mess with the knots however we like."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"interpolation-graph"}),r.createElement(i,{sketch:n(128),controller:function(t,n){return e.bindKnots(t,n,"interpolation-graph")}})),r.createElement("p",null,"Changing the values in the knot vector changes how much each point influences the total curvature (with some clever knot value manipulation, we can even make the influence of certain points disappear entirely!), so we can see that while the control points define the hull inside of which we're going to be drawing a curve, it is actually the knot vector that determines the actual ",r.createElement("em",null,"shape")," of the curve inside that hull."),r.createElement("p",null,"After reading the rest of this section you may want to come back here to try some specific knot vectors, and see if the resulting interpolation landscape makes sense given what you will now think should happen!"),r.createElement("h2",null,"Running the computation"),r.createElement("p",null,"Unlike the de Casteljau algorithm, where the ",r.createElement("code",null,"t")," value stays the same at every iteration, for B-Splines that is not the case, and so we end having to (for each point we evaluate) run a fairly involving bit of recursive computation. The algorithm is discussed on ",r.createElement("a",{href:"http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/de-Boor.html"},"this Michigan Tech")," page, but an easier to read version is implemented by ",r.createElement("a",{href:"https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71"},"b-spline.js"),", so we'll look at its code."),r.createElement("p",null,"Given an input value ",r.createElement("code",null,"t"),", we first map the input to a value from the domain [0,1] to the domain [knots[degree], knots[knots.length - 1 - degree]. Then, we find the section number ",r.createElement("code",null,"s")," that this mapped ",r.createElement("code",null,"t")," value lies on:"),r.createElement("pre",null,"\n        for(s=domain[0]; s < domain[1]; s++) {\n          if(knots[s] <= t && t <= knots[s+1]) break;\n        }"),r.createElement("p",null,"after running this code, ",r.createElement("code",null,"s")," is the index for the section the point will lie on. We then run the algorithm mentioned on the MU page (updated to use this description's variable names):"),r.createElement("pre",null,"\n        let v = copy of control points\n\n        for(let L = 1; L <= order; L++) {\n          for(let i=s; i > s + L - order; i--) {\n            let numerator = t - knots[i]\n            let denominator = knots[i - L + order] - knots[i]\n            let alpha = numerator / denominator\n            let v[i] = alpha * v[i] + (1-alpha) * v[i-1]\n          }\n        }"),r.createElement("p",null,'(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at ',r.createElement("code",null,"i=s")," at each level of the interpolation, and we stop when ",r.createElement("code",null,"i = s - order + level"),", so we always end up with a value for ",r.createElement("code",null,"i")," such that those ",r.createElement("code",null,"v[i-1]")," don't try to use an array index that doesn't exist)"),r.createElement("h2",null,"Open vs. closed paths"),r.createElement("p",null,"Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are ",r.createElement("em",null,"the same point"),". However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order ",r.createElement("code",null,"d")," B-Spline, we need to make the last ",r.createElement("code",null,"d")," point the same as the first ",r.createElement("code",null,"d")," points. And the easiest way to do this is to simply append ",r.createElement("code",null,"points.splice(0,d)")," to ",r.createElement("code",null,"points"),". Done!"),r.createElement("p",null,'Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for ',r.createElement("code",null,"points[0]")," and ",r.createElement("code",null,"points[n-k]")," etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects."),r.createElement("h2",null,"Manipulating the curve through the knot vector"),r.createElement("p",null,"The most important thing to understand when it comes to B-Splines is that they work ",r.createElement("em",null,"because"),' of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the ',r.createElement("em",null,"values")," that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:"),r.createElement("ol",null,r.createElement("li",null,"we can use a uniform knot vector, with equally spaced intervals,"),r.createElement("li",null,"we can use a non-uniform knot vector, without enforcing equally spaced internvals,"),r.createElement("li",null,'we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and'),r.createElement("li",null,"we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.")),r.createElement("h3",null,"Uniform B-Splines"),r.createElement("p",null,"The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines ",r.createElement("em",null,"the same intervals"),", or even [0,2,3,...,18,20,22], which also defines ",r.createElement("em",null,"the same intervals"),", just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i<r+1+n;i++)this.drawN(i,n,e,(this.width-e)/(2*(r+2)),this.height-2*e)},drawN:function(e,t,n,i,a){this.stroke(r[e]);this.knots;this.beginPath();for(var o=e-1,s=o,l=.1,u=e+t+1;s<u;s+=l){var c=n+e*i+s*i,h=this.height-n-this.N(e,t,s)*a;this.vertex(c,h)}this.endPath()},N:function(e,t,n){var r=this.knots[e],i=this.knots[e+1],a=this.knots[e+t-1],o=this.knots[e+t];if(1===t)return r<=n&&n<=i?1:0;var s=n-r,l=a-r,u=0===l?0:s/l,c=o-n,h=o-i,d=0===h?0:c/h,f=0;if(0!==u){var p=this.ensureN(e,t-1,n);f=void 0===p?this.N(e,t-1,n):p}var m=0;if(0!==d){var g=this.ensureN(e+1,t-1,n);m=void 0===g?this.N(e+1,t-1,n):g}return this.cacheN(e,t,n,u*f+d*m),this.cache.N[e][t][n]},ensureN:function(e,t,n){this.cache.N||(this.cache.N=[]);var r=this.cache.N;return r[e]||(r[e]=[]),r[e][t]||(r[e][t]=[]),r[e][t][n]},cacheN:function(e,t,n,r){this.ensureN(e,t,n),this.cache.N[e][t][n]=r}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points,!0),this.props.controller&&this.props.controller(this,this.knots),this.draw()},
+draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,weights:[],setup:function(){this.size(400,400);for(var e=2*Math.PI,t=this.width/3,n=0;n<6;n++)this.points.push({x:this.width/2+t*Math.cos(n/6*e),y:this.height/2+t*Math.sin(n/6*e)});this.points=this.points.concat(this.points.slice(0,3)),this.closed=this.degree,this.knots=this.formKnots(this.points),this.weights=this.formWeights(this.points),this.props.controller&&this.props.controller(this,this.knots,this.weights,this.closed),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="canonical",s=r.createClass({displayName:"Canonical",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(6),a=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:"Bézier curves and Catmull-Rom curves"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Taking an excursion to different splines, the other common design curve is the ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline"},"Catmull-Rom spline"),". Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one into the other, and back, with some simple substitutions?"),r.createElement("p",null,'Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, except the first and last, which makes sense if you read the "natural language" description for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point P',r.createElement("sub",null,"x"),", has a tangent along the line P",r.createElement("sub",null,"x-1")," to P",r.createElement("sub",null,"x+1"),". The curve runs from points P",r.createElement("sub",null,"2")," to  P",r.createElement("sub",null,"n-1"),', and has a "tension" that determines how fast the curve passes through each point. The lower the tension, the faster the curve goes through each point, and the bigger its local tangent is.'),r.createElement("p",null,"I'll be showing the conversion to and from Catmull-Rom curves for the tension that the Processing language uses for its Catmull-Rom algorithm."),r.createElement("p",null,"We start with showing the Catmull-Rom matrix form:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5fc1c44e623f2a9fbeefdaa204557479e3debf5a.svg",style:{width:"30.150000000000002rem",height:"5.70015rem"}})),r.createElement("p",null,"However, there's something funny going on here: the coordinate column matrix looks weird. The reason is that Catmull-Rom curves are actually curve segments that are described by two points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead, this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1 with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate 4). So if we want to express this as a matrix form based on four coordinates, we get this representation instead:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/40b9ca9b5755a4be49517ddfa630fef7b8e23067.svg",style:{width:"29.475rem",height:"6.525rem"}})),r.createElement("div",{className:"note"},r.createElement("h2",null,"Where did that 2 come from?"),r.createElement("p",null,"Catmull-Rom splines are based on the concept of tension: the higher the tensions, the shorter the tangents at the departure and arrival points. The basic Catmull-Rom curve arrives and departs with tangents equal to half the distance between the two adjacent points, so that's where that 2 came from."),r.createElement("p",null,'However, the "real" matrix is this:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7bf9b5e971866babedd991ccdde5c4ab104297e5.svg",style:{width:"24.75rem",height:"6.60015rem"}})),r.createElement("p",null,"This bakes in the tension factor τ explicitly.")),r.createElement("p",null,'Plugging this into the "two coordinates and two tangent vectors" matrix form, we get:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4818f8797c35f23c2b9883aa986b1129b2fa151a.svg",style:{width:"21.45015rem",height:"5.70015rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/08f77989369f664cbc0fb7526791efd4c5299d70.svg",style:{width:"35.47485rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7ae769c5370469b16523bab6f34abf0dd6749be.svg",style:{width:"28.425150000000002rem",height:"5.54985rem"}})),r.createElement("p",null,"So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7250f1c57e2bd66ec4349e4e88db4d5d74401a06.svg",style:{width:"50.85rem",height:"5.54985rem"}})),r.createElement("p",null,"The difference is somewhere in the actual hermite matrix, since the ",r.createElement("em",null,"t")," and coordinate values are identical, so let's solve that matrix equasion:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8a42b24fca3aaf6b8ec08e84b7e91c43e26e8acf.svg",style:{width:"28.575rem",height:"5.54985rem"}})),r.createElement("p",null,"We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the Bézier matrix on the right side of the equals sign:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e111d6e846f4d7204dec484005f74993e66c6c9.svg",style:{width:"58.19985rem",height:"5.70015rem"}})),r.createElement("p",null,"Which gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f94b80113772d90a4fbc93d4495cb5767e5c8123.svg",style:{width:"12.6rem",height:"5.47515rem"}})),r.createElement("p",null,"Multiplying this ",r.createElement("strong",null,r.createElement("em",null,"A"))," with our coordinates will give us a proper Bézier matrix expression again:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d088274e440ceeac2916a0f32176682d776c1c57.svg",style:{width:"31.725rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9e68f80b270d3445d9f9cb28ff2c5aed219aa9d2.svg",style:{width:"25.650000000000002rem",height:"6.60015rem"}})),r.createElement("p",null,"So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning the Catmull-Rom coordinates on the left into the Bézier coordinates on the right (with τ being our tension factor):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f0c5a707b590eaf8899a927ce39fd186a6acecf3.svg",style:{width:"18.07515rem",height:"6.67485rem"}})),r.createElement("p",null,"And the other way around, a Bézier to Catmull-Rom conversion requires turning the Bézier coordinates on the left this time into the Catmull-Rom coordinates on the right. Note that there is no tension this time, because Bézier curves don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension Catmull-Rom curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/51da95daf2645abd9903a4e28749a6d01826625c.svg",style:{width:"21.150000000000002rem",height:"5.625rem"}})),r.createElement("p",null,"Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom splines, the choice mostly being which drawing algorithms we have natively available."))}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Creating a Catmull-Rom curve from three points"}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?"),r.createElement("p",null,"As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve."),r.createElement("p",null,"Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of ",r.createElement("i",null,"n")," points, in order to draw the equivalent curve using cubic Bézier curves we need a massive ",r.createElement("i",null,"3n-1")," points (and that's without double-counting points that are shared by consecutive cubic curves)."),r.createElement("p",null,'In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there\'s the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:'),r.createElement(i,{preset:"threepanel",title:"Catmull-Rom curve fitting",setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"As should be obvious by now, Catmull-Rom curves are great for \"fitting a curvature to some points\", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",style:{width:"20.77515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",style:{width:"14.99985rem",height:"2.7rem"}})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",style:{width:"39.07485rem",height:"1.125rem"}})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",style:{width:"6.9750000000000005rem",height:"2.7rem"}})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e940f26afcd5f80371b6b72a8f52e217da64721d.svg",style:{width:"16.50015rem",height:"13.275rem"}})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",style:{width:"18.225rem",height:"2.17485rem"}})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6e512d83529089b2294b45659b826bb24a598356.svg",style:{width:"29.025000000000002rem",height:"5.175rem"}})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d13ad085587983ba3fa6fe9051dcc2f6a3d0917c.svg",style:{width:"27.675rem",height:"9.525150000000002rem"}})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",style:{width:"18.225rem",height:"4.5rem"}})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points.  However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{
 preset:"arcfitting",title:"Cubic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,'We see two curves here; in blue, our "guessed" curve and its control points, and in grey/black, the true curve fit, with proper control points that were shifted in, along line between our guessed control points, such that the derivatives at the start and end points are correct.'),r.createElement("p",null,'We can already seethat cubic curves are a lot better than quadratic curves, and don\'t look all that wrong until we go well past a quarter circle; ⅜th starts to hint at problems, and half a circle has an obvious "gap" between the real circle and the cubic approximation. Anything past that just looks plain ridiculous... but quarter curves actually look pretty okay!'),r.createElement("p",null,'So, maths time again: how okay is "okay"? Let\'s apply some more maths to find out.'),r.createElement("p",null,"Unlike for the quadratic curve, we can't use ",r.createElement("i",null,"t=0.5")," as our reference point because by its very nature it's one of the three points that are actually guaranteed to lie on the circular curve. Instead, we need a different ",r.createElement("i",null,"t")," value. If we run some analysis on the curve we find that the actual ",r.createElement("i",null,"t"),' value at which the curve is furthest from what it should be is 0.211325 (rounded), but we don\'t know "why", since finding this value involves root-finding, and is nearly impossible to do symbolically without pages and pages of math just to express one of the possible solutions.'),r.createElement("p",null,"So instead of walking you through the derivation for that value, let's simply take that ",r.createElement("i",null,"t")," value and see what the error is for circular arcs with an angle ranging from 0 to 2π:"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-2pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ 2π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:"))))),r.createElement("p",null,"We see that cubic Bézier curves are much better when it comes to approximating circular arcs, with an error of less than 0.027 at the two \"bulge\" points for a quarter circle (which had an error of 0.06 for quadratic curves at the mid point), and an error near 0.001 for an eighth of a circle, so we're getting less than half the error for a quarter circle, or: at a slightly lower error, we're getting twice the arc. This makes cubic curves quite useful!"),r.createElement("p",null,'In fact, the precision of a cubic curve at a quarter circle is considered "good enough" by so many people that it\'s generally considered "just fine" to use four cubic Bézier curves to fake a full circle when no circle primitives are available; generally, people won\'t notice that it\'s not a real circle unless you also happen to overlay an actual circle, so that the difference becomes obvious.'),r.createElement("p",null,'So with the error analysis out of the way, how do we actually compute the coordinates needed to get that "true fit" cubic curve? The first observation is that we already know the start and end points, because they\'re the same as for the quadratic attempt:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"But we now need to find two control points, rather than one. If we want the derivatives at the start and end point to match the circle, then the first control point can only lie somewhere on the vertical line through S, and the second control point can only lie somewhere on the line tangent to point E, which means:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4df65dae78bc5a0e6c5f23a2faae9a9d7a8b39b3.svg",style:{width:"8.325000000000001rem",height:"2.55015rem"}})),r.createElement("p",null,'where "a" is some scaling factor, and:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cb32f8f9c3ae2b264a48003c237a798d02dc8935.svg",style:{width:"11.62485rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,'where "b" is also some scaling factor.'),r.createElement("p",null,"Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonoetric identities, so if you just want to see the final result just skip past the next section!"),r.createElement("div",{className:"note"},r.createElement("h2",null,"Let's do this thing."),r.createElement("p",null,"Unlike for the quadratic case, we need some more information in order to compute ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),", since they're no longer dependent variables. First, we observe that the curve is symmetrical, so whatever values we end up finding for C",r.createElement("sub",null,"1")," will apply to C",r.createElement("sub",null,"2")," as well (rotated along its tangent), so we'll focus on finding the location of C",r.createElement("sub",null,"1")," only. So here's where we do something that you might not expect: we're going to ignore for a moment, because we're going to have a much easier time if we just solve this problem with geometry first, then move to calculus to solve a much simpler problem."),r.createElement("p",null,"If we look at the triangle that is formed between our starting point, or initial guess C",r.createElement("sub",null,"1"),"and our real C",r.createElement("sub",null,"1"),", there's something funny going on: if we treat the line ","{","start,guess","}"," as our opposite side, the line ","{","guess,real","}"," as our adjacent side, with ","{","start,real","}"," our hypothenuse, then the angle for the corner hypothenuse/adjacent is half that of the arc we're covering. Try it: if you place the end point at a quarter circle (pi/2, or 90 degrees), the angle in our triangle is half a quarter (pi/4, or 45 degrees). With that knowledge, and a knowledge of what the length of any of our lines segments are (as a function), we can determine where our control points are, and thus have everything we need to find the error distance function. Of the three lines, the one we can easiest determine is ","{","start,guess","}",", so let's find out what the guessed control point is. Again geometrically, because we have the benefit of an on-curve ",r.createElement("i",null,"t=0.5")," value."),r.createElement("p",null,"The distance from our guessed point to the start point is exactly the same as the projection distance we looked at earlier. Using ",r.createElement("i",null,"t=0.5"),' as our point "B" in the "A,B,C" projection, then we know the length of the line segment ',"{","C,A","}",", since it's d",r.createElement("sub",null,"1")," = ","{","A,B","}"," + d",r.createElement("sub",null,"2")," = ","{","B,C","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b15a274c1e0a6aeeaf517b5d2c8ee0a7997dd617.svg",style:{width:"27.675rem",height:"2.32515rem"}})),r.createElement("p",null,"So that just leaves us to find the distance from ",r.createElement("i",null,"t=0.5")," to the baseline for an arbitrary angle φ, which is the distance from the centre of the circle to our ",r.createElement("i",null,"t=0.5")," point, minus the distance from the centre to the line that runs from start point to end point. The first is the same as the point P we found for the quadratic curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"And the distance from the origin to the line start/end is another application of angles, since the triangle ","{","origin,start,C","}"," has known angles, and two known sides. We can find the length of the line ","{","origin,C","}",", which lets us trivially compute the coordinate for C:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9be55fb38d5d30bbc6c7140afb1c7bc097bc044e.svg",style:{width:"18.675rem",height:"5.3248500000000005rem"}})),r.createElement("p",null,"With the coordinate C, and knowledge of coordinate B, we can determine coordinate A, and get a vector that is identical to the vector ","{","start,guess","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/262f2eca63105779f30a0a5445cf76f60786039a.svg",style:{width:"27.675rem",height:"3.67515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e83ebbac13a84ef6036bf4be57b3d1b6cb316f8.svg",style:{width:"14.99985rem",height:"3.29985rem"}})),r.createElement("p",null,"Which means we can now determine the distance ","{","start,guessed","}",", which is the same as the distance","{","C,A","}",", and use that to determine the vertical distance from our start point to our C",r.createElement("sub",null,"1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c87e454fb11ef7f15c7386e83ca1ce41a004d8a7.svg",style:{width:"17.850150000000003rem",height:"4.64985rem"}})),r.createElement("p",null,"And after this tedious detour to find the coordinate for C",r.createElement("sub",null,"1"),", we can find C",r.createElement("sub",null,"2")," fairly simply, since it's lies at distance -C",r.createElement("sub",null,"1y")," along the end point's tangent:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/25f027074b6af8ca7b640e27636e3bf89c28afdb.svg",style:{width:"36.675000000000004rem",height:"6.89985rem"}})),r.createElement("p",null,"And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.")),r.createElement("p",null,"So, to recap, given an angle φ, the new control coordinates are:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c4d82e44d1c67dda8ba26aa6da0f406d05eba618.svg",style:{width:"15.075000000000001rem",height:"2.55015rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3a4b1ee00eebb7697e5513ef9df673928913252e.svg",style:{width:"23.02515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,'And, because the "quarter curve" special case comes up so incredibly often, let\'s look at what these new control points mean for the curve coordinates of a quarter curve, by simply filling in φ = π/2:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/63e0936b4849d4cdbb9a2e0909181259be951e4d.svg",style:{width:"28.65015rem",height:"1.94985rem"}})),r.createElement("p",null,"Which, in decimal values, rounded to six significant digits, is:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fd12e65204a31319b66355c6ff99e6b3d9603b05.svg",style:{width:"28.65015rem",height:"1.125rem"}})),r.createElement("p",null,"Of course, this is for a circle with radius 1, so if you have a different radius circle, simply multiply the coordinate by the radius you need. And then finally, forming a full curve is now a simple a matter of mirroring these coordinates about the origin:"),r.createElement(i,{preset:"simple",title:"Cubic Bézier circle approximation",draw:this.drawCircle,static:!0}))}});e.exports=u},function(e,t,n){"use strict";var r=n(0),i={width:"calc(960px + 2em)",marginTop:0,borderTop:"1px solid rgba(255, 0, 0, 0.5)",paddingTop:"3em"},a=r.createElement("section",{id:"comments",style:i},r.createElement("h2",null,"Comments and questions"),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",{className:"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!"),r.createElement("div",{id:"disqus_thread"})),o=r.createClass({displayName:"CommentsAndQuestions",getDefaultProps:function(){return{title:"Comments and Questions"}},componentDidMount:function(){if("undefined"!=typeof document){var e=document.createElement("script");e.setAttribute("async","async"),e.src="lib/site/disqus.js",document.head.appendChild(e)}},render:function(){return a}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="components",s=r.createClass({displayName:"Components",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="control",s=r.createClass({displayName:"Control",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"CurveIntersections",getDefaultProps:function(){return{title:"Curve/curve intersection"}},setup:function(e){this.api=e,e.setPanelCount(3);var t=new e.Bezier(10,100,90,30,40,140,220,220),n=new e.Bezier(5,150,180,20,80,250,210,190);e.setCurve(t,n),this.pairReset()},pairReset:function(){this.prevstep=0,this.step=0},draw:function(e,t){var n=this;e.reset();var r={x:0,y:0};t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var i=e.getPanelWidth(),a=e.getPanelHeight();if(r.x+=i,e.drawLine({x:0,y:0},{x:0,y:a},r),0===this.step&&(this.pairs=[{c1:t[0],c2:t[1]}]),this.step!==this.prevstep){var s=this.pairs;this.pairs=[],this.finals=[],s.forEach(function(t){if(t.c1.length()<.6&&t.c2.length()<.6)return n.finals.push(t);var i=t.c1.split(.5);e.setColor("black"),e.drawCurve(t.c1,r),e.setColor("red"),e.drawbbox(i.left.bbox(),r),e.drawbbox(i.right.bbox(),r);var a=t.c2.split(.5);e.setColor("black"),e.drawCurve(t.c2,r),e.setColor("blue"),e.drawbbox(a.left.bbox(),r),e.drawbbox(a.right.bbox(),r),i.left.overlaps(a.left)&&n.pairs.push({c1:i.left,c2:a.left}),i.left.overlaps(a.right)&&n.pairs.push({c1:i.left,c2:a.right}),i.right.overlaps(a.left)&&n.pairs.push({c1:i.right,c2:a.left}),i.right.overlaps(a.right)&&n.pairs.push({c1:i.right,c2:a.right})}),this.prevstep=this.step}else this.pairs.forEach(function(t){e.setColor("black"),e.drawCurve(t.c1,r),e.drawCurve(t.c2,r),e.setColor("red"),e.drawbbox(t.c1.bbox(),r),e.setColor("blue"),e.drawbbox(t.c2.bbox(),r)});0===this.pairs.length&&(this.pairReset(),this.draw(e,t)),r.x+=i,e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:a},r);var l,u,c=t[0].intersects(t[1]).map(function(e){var t=e.split("/").map(function(e){return parseFloat(e)});return{t1:t[0],t2:t[1]}}),h=c[0],d=function(e,t){return o(e.t1-t.t1)<.01&&o(e.t2-t.t2)<.01};for(u=1;u<c.length;u++)l=c[u],d(h,l)?c.splice(u--,1):h=l;e.setColor("lightblue"),e.drawCurve(t[0],r),e.drawCurve(t[1],r),e.setColor("blue"),c.forEach(function(n){e.drawCircle(t[0].get(n.t1),3,r)})},stepUp:function(){this.step++,this.api.redraw()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Using de Casteljau\'s algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and conquer" technique:'),r.createElement("ul",null,r.createElement("li",null,"Take two curves ",r.createElement("i",null,"C",r.createElement("sub",null,"1"))," and ",r.createElement("i",null,"C",r.createElement("sub",null,"2")),", and treat them as a pair."),r.createElement("li",null,"If their bounding boxes overlap, split up each curve into two sub-curves"),r.createElement("li",null,"With ",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"2.1"))," and ",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),", form four new pairs (",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.1")),"), (",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),"), (",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.1")),"), and (",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),")."),r.createElement("li",null,"For each pair, check whether their bounding boxes overlap.",r.createElement("ul",null,r.createElement("li",null,"If their bounding boxes do not overlap, discard the pair, as there is no intersection between this pair of curves."),r.createElement("li",null,"If there ",r.createElement("em",null,"is")," overlap, rerun all steps for this pair."))),r.createElement("li",null,"Once the sub-curves we form are so small that they effectively occupy sub-pixel areas, we consider an intersection found.")),r.createElement("p",null,'This algorithm will start with a single pair, "balloon" until it runs in parallel for a large number of potential sub-pairs, and then taper back down as it homes in on intersection coordinates, ending up with as many pairs as there are intersections.'),r.createElement("p",null,"The following graphic applies this algorithm to a pair of cubic curves, one step at a time, so you can see the algorithm in action. Click the button to run a single step in the algorithm, after setting up your curves in some creative arrangement. The algorithm resets once it's found a solution, so you can try this with lots of different curves (can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)"),r.createElement(i,{preset:"clipping",title:"Curve/curve intersections",setup:this.setup,draw:this.draw},r.createElement("button",{onClick:this.stepUp},"advance one step")),r.createElement("p",null,"Self-intersection is dealt with in the same way, except we turn a curve into two or more curves first based on the inflection points. We then form all possible curve pairs with the resultant segments, and run exactly the same algorithm. All non-overlapping curve pairs will be removed after the first iteration, and the remaining steps home in on the curve's self-intersection points."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="decasteljau",s=r.createClass({displayName:"deCasteljau",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="derivatives",s=r.createClass({displayName:"Derivatives",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="explanation",l=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:o.getTitle(s)}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="extended",s=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="extremities",s=r.createClass({displayName:"Extremities",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="flattening",s=n(15),l=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:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"GraduatedOffsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Graduated curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("blue");var n=t.outline(0,0,e.distance,e.distance);n.curves.forEach(function(t){return e.drawCurve(t)})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"What if we want to do graduated offsetting, starting at some distance ",r.createElement("i",null,"s")," but ending at some other distance ",r.createElement("i",null,"e"),'? well, if we can compute the length of a curve (which we can if we use the Legendre-Gauss quadrature approach) then we can also determine how far "along the line" any point on the curve is. With that knowledge, we can offset a curve so that its offset curve is not uniformly wide, but graduated between with two different offset widths at the start and end.'),r.createElement("p",null,'Like normal offsetting we cut up our curve in sub-curves, and then check at which distance along the original curve each sub-curve starts and ends, as well as to which point on the curve each of the control points map. This gives us the distance-along-the-curve for each interesting point in the sub-curve. If we call the total length of all sub-curves seen prior to seeing "the\\ current" sub-curve ',r.createElement("i",null,"S")," (and if the current sub-curve is the first one, ",r.createElement("i",null,"S")," is zero), and we call the full length of our original curve ",r.createElement("i",null,"L"),", then we get the following graduation values:"),r.createElement("ul",null,r.createElement("li",null,"start: map ",r.createElement("i",null,"S")," from interval (",r.createElement("i",null,"0,L"),") to interval ",r.createElement("i",null,"(s,e)")),r.createElement("li",null,"c1: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d1"),", 0,L, s,e)"),", d1 = distance along curve to projection of c1"),r.createElement("li",null,"c2: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d2"),", 0,L, s,e)"),", d2 = distance along curve to projection of c2"),r.createElement("li",null,"..."),r.createElement("li",null,"end: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+length(subcurve)"),", 0,L, s,e)"))),r.createElement("p",null,"At each of the relevant points (start, end, and the projections of the control points onto the curve) we know the curve's normal, so offsetting is simply a matter of taking our original point, and moving it along the normal vector by the offset distance for each point. Doing so will give us the following result (these have with a starting width of 0, and an end width of 40 pixels, but can be controlled with your up and down arrow keys):"),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="inflections",s=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:a.getTitle(o)}},setupCubic:function(e){var t=new e.Bezier(135,25,25,135,215,75,215,240);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("red"),t.inflections().forEach(function(n){e.drawCircle(t.get(n),5)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),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",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"Curve/curve intersection, however, is more complicated. Since we have no straight line to align to, we can't simply align one of the curves and be left with a simple procedure. Instead, we'll need to apply two techniques we've not covered yet: de Casteljau's algorithm, and curve splitting."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:"Manipulating a curve"}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,s=o(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=s}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,s=i+a,l=s-1,u=o(l/s),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the ',r.createElement("em",null,"t"),'-value matching that coordinate, and then letting them drag that point around. With every drag update we\'ll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.'),r.createElement(i,{preset:"moulding",title:"Moulding a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markQB,onMouseDrag:this.dragQB,onMouseUp:this.saveCurve}),r.createElement("p",null,r.createElement("strong",null,"Click-dragging the curve itself")," shows what we're using to compute the new coordinates: while dragging you will see the original points B and its corresponding ",r.createElement("i",null,"t"),"-value, the original point C for that ",r.createElement("i",null,"t"),"-value, as well as the new point B' based on the mouse cursor. Since we know the ",r.createElement("i",null,"t"),"-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e361e1235c94bbe87e95834c7fcfb6ab96e028b9.svg",style:{width:"15.600150000000001rem",height:"2.3998500000000003rem"}})),r.createElement("p",null,"For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:"),r.createElement(i,{preset:"moulding",title:"Moulding a cubic Bézier curve",setup:this.setupCubic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markCB,onMouseDrag:this.dragCB,onMouseUp:this.saveCurve}),r.createElement("p",null,"To help understand what's going on, the cubic graphic shows the full de Casteljau construction \"hull\" when repositioning point B. We compute A` in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance ",r.createElement("i",null,"t"),", because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy."),r.createElement("p",null,"First, we construct the one-level-of-de-Casteljau-up points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f813a7d607787329d242bfbfa28570c88c3e30f5.svg",style:{width:"9.975150000000001rem",height:"5.09985rem"}})),r.createElement("p",null,"And then we can compute the new control points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4ec5f4148752a3d332a922048700d2c71918342f.svg",style:{width:"11.700000000000001rem",height:"4.64985rem"}})),r.createElement("p",null,"And that's cubic curve manipulation."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",style:{width:"7.275150000000001rem",height:"1.125rem"}})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",style:{width:"10.125rem",height:"1.125rem"}})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/664fba98ea17b358941b579115bf063edf87ae17.svg",style:{width:"9.450000000000001rem",height:"3.15rem"}})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",style:{width:"12.45015rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",style:{width:"15.150150000000002rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:"Creating a curve from three points"}},setup:function(e){e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}]},onClick:function(e,t){3==t.lpts.length&&(t.lpts=[]),t.lpts.push({x:e.offsetX,y:e.offsetY}),t.redraw()},getQRatio:function(e){var t=2*e,n=t*e-t,r=n+1;return o(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return o(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},w={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},y={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(w.x-r.x),y:r.y+2*(w.y-r.y)},_={x:i.x+2*(y.x-i.x),y:i.y+2*(y.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,w),e.drawLine(l,y),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, unlike circle-fitting, which requires just three points, Bézier curve fitting requires three points, as well as a ",r.createElement("i",null,"t")," value, so we can figure out where point 'C' needs to be."),r.createElement("p",null,"The following graphic lets you place three points, and will use the preceding sections on the ABC ratio and curve construction to form a quadratic curve through them. You can move the points you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks. (There's some freedom here, so for illustrative purposes we clamped ",r.createElement("i",null,"t")," to simply be 0.5, lets us bypass some maths, since a ",r.createElement("i",null,"t")," value of 0.5 always puts C in the middle of the start--end line segment)"),r.createElement(i,{preset:"generate",title:"Fitting a quadratic Bézier curve",setup:this.setup,draw:this.drawQuadratic,onClick:this.onClick}),r.createElement("p",null,'For cubic curves we also need some values to construct the "de Casteljau line through B" with, and that gives us quite a bit of choice. Since we\'ve clamped ',r.createElement("i",null,"t"),' to 0.5, we\'ll set up a line through B parallel to the line start--end, with a length that is proportional to the length of the line B--C: the further away from the baseline B is, the wider its construction line will be, and so the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to scale the length of the construction line as we move B closer or further away from the baseline, so I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end) forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too, and if the points lie on a line, then the curve constructed has the control points very close to B, while still lying between B and the correct curve end point:'),r.createElement(i,{preset:"generate",title:"Fitting a cubic Bézier curve",setup:this.setup,draw:this.drawCubic,onClick:this.onClick}),r.createElement("p",null,'In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which ',r.createElement("i",null,"t")," value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination of ",r.createElement("i",null,"t"),' and tangent values that lead to a more "æsthetic" curve, but this will be left as an exercise to the reader, since there are many, and æsthetics are often quite personal.'))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);
-e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",style:{width:"8.400150000000002rem",height:"1.27485rem"}})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",style:{width:"21.97485rem",height:"2.7rem"}})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r<a;r++)i=n(e[r],t),i<o&&(s=r,o=i);return s/(a-1)},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.mousePt){e.setColor("red"),e.setFill("red"),e.drawCircle(e.mousePt,3);var n=this.findClosest(e._lut,e.mousePt,e.utils.dist),r=t.get(n);e.drawLine(r,e.mousePt),e.drawCircle(r,3),e.text("t = "+e.utils.round(n,2),r,{x:10,y:3})}},onMouseMove:function(e,t){t.mousePt={x:e.offsetX,y:e.offsetY},t._lut=t.curve.getLUT()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Say we have a Bézier curve and some point, not on the curve, of which we want to know which ",r.createElement("i",null,"t")," value on the curve gives us an on-curve point closest to our off-curve point. Or: say we want to find the projection of a random point onto a curve. How do we do that?"),r.createElement("p",null,"If the Bézier curve is of low enough order, we might be able to ",r.createElement("a",{href:"http://jazzros.blogspot.ca/2011/03/projecting-point-on-bezier-curve.html"},"work out the maths for how to do this"),", and get a perfect ",r.createElement("i",null,"t")," value back, but in general this is an incredibly hard problem and the easiest solution is, really, a numerical approach again. We'll be finding our ideal ",r.createElement("i",null,"t")," value using a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"binary search"),". First, we do a coarse distance-check based on ",r.createElement("i",null,"t"),' values associated with the curve\'s "to draw" coordinates (using a lookup table, or LUT). This is pretty fast. Then we run this algorithm:'),r.createElement("ol",null,r.createElement("li",null,"with the ",r.createElement("i",null,"t")," value we found, start with some small interval around ",r.createElement("i",null,"t")," (1/length_of_LUT on either side is a reasonable start),"),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is larger than the distance to ",r.createElement("i",null,"t"),", try again with the interval reduced to half its original length."),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is smaller than the distance to ",r.createElement("i",null,"t"),", replace ",r.createElement("i",null,"t")," with the smaller-distance value."),r.createElement("li",null,"after reducing the interval, or changing ",r.createElement("i",null,"t"),", go back to step 1.")),r.createElement("p",null,"We keep repeating this process until the interval is small enough to claim the difference in precision found is irrelevant for the purpose we're trying to find ",r.createElement("i",null,"t")," for. In this case, I'm arbitrarily fixing it at 0.0001."),r.createElement("p",null,'The following graphic demonstrates the result of this procedure.Simply move the cursor around, and if it does not lie on top of the curve, you will see a line that projects the cursor onto the curve based on an iteratively found "ideal" ',r.createElement("i",null,"t")," value."),r.createElement(i,{preset:"simple",title:"Projecting a point onto a Bézier curve",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="reordering",l=r.createClass({displayName:"Reordering",getDefaultProps:function(){return{title:o.getTitle(s)}},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(l.lower(e.curve))}}}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=["unite","intersect","exclude","subtract"],s=r.createClass({displayName:"Shapes",getDefaultProps:function(){return{title:"Boolean shape operations"}},getInitialState:function(){return{mode:o[0]}},setMode:function(e){this.setState({mode:e})},formPath:function(e,t,n,r,i){t=t||0,n=n||0;var a=30,o=a/2;r=r||8*a,i=i||4*a;var s=r/2,l=i/2,u=s/3,c=l/3,h=e.Paper,d=h.Path,f=h.Point,p=new d;return p.moveTo(new f(t-s+2*a,n-l)),p.cubicCurveTo(new f(t-s+o,n-l+o),new f(t-s+o,n+l-o),new f(t-s+2*a,n+l)),p.cubicCurveTo(new f(t-u,n+c),new f(t+u,n+c),new f(t+s-2*a,n+l)),p.cubicCurveTo(new f(t+s-o,n+l-o),new f(t+s-o,n-l+o),new f(t+s-2*a,n-l)),p.cubicCurveTo(new f(t+u,n-c),new f(t-u,n-c),new f(t-s+2*a,n-l)),p.closePath(!0),p.strokeColor="rgb(100,100,255)",p},setup:function(e){var t=e.getPanelWidth(),n=40,r=t/2,i=t/2;e.c1=this.formPath(e,r,i),r+=n,i+=n,e.c2=this.formPath(e,r,i),this.state.mode=o[0]},onMouseMove:function(e,t){var n=e.offsetX,r=e.offsetY;t.c2.position={x:n,y:r}},draw:function(e){e.c3&&e.c3.remove();var t=e.c1,n=e.c2,r=t[this.state.mode].bind(t),i=e.c3=r(n);i.strokeColor="red",i.fillColor="rgba(255,100,100,0.4)",e.Paper.view.draw()},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or exclusion, between two or more shapes that involve Bézier curves. For simplicity (well.. sort of, more homogeneity), we'll be looking at Poly-Bézier shapes only, but a shape that consists of a mix of lines and Bézier curves is technically a simplification (although it does mean we need to write a definition for the class of shapes that mix lines and Bézier curves. Since poly-Bézier curves are a superset, we'll be using those in the following examples)"),r.createElement("p",null,"The procedure for performing boolean operations consists, broadly, of four steps:"),r.createElement("ol",null,r.createElement("li",null,"Find the intersection points between both shapes,"),r.createElement("li",null,"cut up the shapes into multiple sections between these intersections,"),r.createElement("li",null,"discard any section that isn't part of the desired operation's resultant shape, and"),r.createElement("li",null,"link up the remaining sections to form the new shape.")),r.createElement("p",null,"Finding all intersections between two poly-Bézier curves, or any poly-line-section shape, is similar to the iterative algorithm discussed in the section on curve/curve intersection. For each segment in the poly-Bézier curve we check whether its bounding box overlaps with any of the segment bounding boxes in the other poly-Bézier curve. If so, we run normal intersection detection."),r.createElement("p",null,"After we found all intersection points, we split up our poly-Bézier curves, making sure to record which of the newly formed poly-Bézier curves might potentially link up at the points we split the originals up at. This will let us quickly glue poly-Bézier curves back together after the next step."),r.createElement("p",null,"Once we have all the new poly-Bézier curves, we run the first step of the desired boolean operation."),r.createElement("ul",null,r.createElement("li",null,'Union: discard all poly-Bézier curves that lie "inside" our union of our shapes. E.g. if we want the union of two overlapping circles, the resulting shape is the outline.'),r.createElement("li",null,'Intersection: discard all poly-Bézier curves that lie "outside" the intersection of the two shapes. E.g. if we want the intersection of two overlapping circles, the resulting shape is the tapered ellipse where they overlap.'),r.createElement("li",null,"Exclusion: none of the sections are discarded, but we will need to link the shapes back up in a special way. Flip any section that would qualify for removal under UNION rules.")),r.createElement("table",{className:"sketch"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_base.gif",height:"169px"}),r.createElement("p",null,"Two overlapping shapes.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_union.gif",height:"169px"}),r.createElement("p",null,"The unified region.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_intersection.gif",height:"169px"}),r.createElement("p",null,"Their intersection.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_exclusion.gif",height:"169px"}),r.createElement("p",null,"Their exclusion regions."))))),r.createElement("p",null,'The main complication in the outlined procedure here is determining how sections qualify in terms of being "inside" and "outside" of our shapes. For this, we need to be able to perform point-in-shape detection, for which we\'ll use a classic algorithm: getting the "crossing number" by using ray casting, and then testing for "insidedness" by applying the ',r.createElement("a",{href:"http://folk.uio.no/bjornw/doc/bifrost-ref/bifrost-ref-12.html"},"even-odd rule"),': For any point and any shape, we can cast a ray from our point, to some point that we know lies outside of the shape (such as a corner of our drawing surface). We then count how many times that line crosses our shape (remember that we can perform line/curve intersection detection quite easily). If the number of times it crosses the shape\'s outline is even, the point did not actually lie inside our shape. If the number of intersections is odd, our point did lie inside out shape. With that knowledge, we can decide whether to treat a section that such a point lies on "needs removal" (under union rules), "needs preserving" (under intersection rules), or "needs flipping" (under exclusion rules).'),r.createElement("p",null,"These operations are expensive, and implementing your own code for this is generally a bad idea if there is already a geometry package available for your language of choice. In this case, for JavaScript the most excellent ",r.createElement("a",{href:"http://paperjs.org"},"Paper.js")," already comes with all the code in place to perform efficient boolean shape operations, so rather that implement an inferior version here, I can strongly recommend the Paper.js library if you intend to do any boolean shape work."),r.createElement("p",null,"The following graphic shows Paper.js doing its thing for two shapes: one static, and one that is linked to your mouse pointer. If you move the mouse around, you'll see how the shape intersections are resolved. The base shapes are outlined in blue, and the boolean result is coloured red."),r.createElement(i,{preset:"simple",title:"Boolean shape operations with Paper.js",paperjs:!0,setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove},r.createElement("br",null),o.map(function(t){var n=e.state.mode===t?"selected":null;return r.createElement("button",{className:n,key:t,onClick:function(){this.setMode(t)}.bind(e)},t)})))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="splitting",s=r.createClass({displayName:"Splitting",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="tightbounds",s=r.createClass({displayName:"TightBounds",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),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 f=n*u/h;for(r=0;r<c.length;r++)if(c[r].d>f){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 p=0,m=["rgb(240,0,200)","rgb(0,40,200)"];e.setColor(m[p]);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[++p%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(0),i=n(4),a=new i,o="whatis",s=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:a.getTitle(o)}},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],f=h[1],p=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*(f.x-d.x),y:d.y+a*(f.y-d.y)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.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(f,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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6);e.exports={preface:{locale:"en-GB",title:"Preface",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"Preface"}),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 nkscape, 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",{id:"note-virtually-all-b-zier-graphics-are-interactive-"},"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",{id:"this-book-is-open-source-"},"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",{id:"how-complicated-is-the-maths-going-to-be-"},"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",{id:"questions-comments-"},"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",{id:"buy-me-a-coffee-"},"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",{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!")))}},introduction:{locale:"en-GB",title:"A lightning introduction",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"A lightning introduction",number:"1"}),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:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"Cubic Bézier curves",setup:e.drawCubic,draw:e.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!"))}},whatis:{locale:"en-GB",title:"So what makes a Bézier Curve?",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"So what makes a Bézier Curve?",number:"2"}),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("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:e.setup,draw:e.draw,onKeyDown:e.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."))}},explanation:{locale:"en-GB",title:"The mathematics of Bézier curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"The mathematics of Bézier curves",number:"3"}),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("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("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("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("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:e.setup,draw:e.draw,onKeyDown:e.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("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("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("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("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("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",{id:"how-to-implement-the-basis-function"},"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&lt;n; k++):","\n","    sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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 &gt;= 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]","\n"),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&lt;=n; k++):","\n","    sum += binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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","\n"),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."))}},control:{locale:"en-GB",title:"Controlling Bézier curvatures",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"control",title:"Controlling Bézier curvatures",number:"4"}),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:e.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:e.drawCubicLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"15th order interpolations",draw:e.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("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("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:e.drawCubic,draw:e.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",{id:"how-to-implement-the-weighted-basis-function"},"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&lt;n; k++):","\n","    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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","\n"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}},extended:{locale:"en-GB",title:"The Bézier interval [0,1]",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extended",title:"The Bézier interval [0,1]",number:"5"}),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("code",null,"t=0")," to ",r.createElement("code",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("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("code",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("code",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("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("code",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("code",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:e.setupCubic,draw:e.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)."))}},matrix:{locale:"en-GB",title:"Bézier curvatures as matrix operations",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrix",title:"Bézier curvatures as matrix operations",number:"6"}),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("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("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("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("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("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("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("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("code",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),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("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("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("code",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."))}},decasteljau:{locale:"en-GB",title:"de Casteljau's algorithm",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"decasteljau",title:"de Casteljau's algorithm",number:"7"}),r.createElement("p",null,"If we want to draw Bézier curves we can run through all values of ",r.createElement("code",null,"t")," from 0 to 1 and then compute the weighted basis function, getting the ",r.createElement("code",null,"x/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("code",null,"x/y")," values for ",r.createElement("code",null,"t"),", let's do this instead:"),r.createElement("ul",null,r.createElement("li",null,"treat ",r.createElement("code",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("code",null,"n")," curve, that's ",r.createElement("code",null,"n")," lines."),r.createElement("li",null,"Place markers along each of these line, at distance ",r.createElement("code",null,"t"),". So if ",r.createElement("code",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("code",null,"those")," points. This gives ",r.createElement("code",null,"n-1")," lines."),r.createElement("li",null,"Place markers along each of these line at distance ",r.createElement("code",null,"t"),"."),r.createElement("li",null,"Form lines between ",r.createElement("code",null,"those")," points. This'll be ",r.createElement("code",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("code",null,"t")," on that line coincides with the original curve point at ",r.createElement("code",null,"t"),".")),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"how-to-implement-de-casteljau-s-algorithm"},"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&lt;newpoints.length; i++):","\n","      newpoints[i] = (1-t) * points[i] + t * points[i+1]","\n","    drawCurve(newpoints, t)","\n"),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("code",null,"x")," and ",r.createElement("code",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&lt;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)","\n"),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:e.setup,draw:e.draw}))}},flattening:{locale:"en-GB",title:"Simplified drawing",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"flattening",title:"Simplified drawing",number:"8"}),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:e.setupQuadratic,draw:e.drawFlattened,onKeyDown:e.onKeyDown}),r.createElement(i,{preset:"twopanel",title:"Flattening a cubic curve",setup:e.setupCubic,draw:e.drawFlattened,onKeyDown:e.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",{id:"how-to-implement-curve-flattening"},"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 &lt;= segmentCount; i++):","\n","    t = i*step;","\n","    coordinates.push[curve.getXValue(t), curve.getYValue(t)]","\n","  return coordinates;","\n"),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 &lt; coordinates.length; i++):","\n","    _coords = coordinates[i]","\n","    line(coords, _coords)","\n","    coords = _coords","\n"),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.")))}},splitting:{locale:"en-GB",title:"Splitting curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"splitting",title:"Splitting curves",number:"9"}),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("code",null,"t"),", the procedure gives us all the points we need to split a curve at that ",r.createElement("code",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:e.setupCubic,draw:e.drawSplit}),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"implementing-curve-splitting"},"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&lt;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)","\n"),r.createElement("p",null,"After running this function for some value ",r.createElement("code",null,"t"),", the ",r.createElement("code",null,"left")," and ",r.createElement("code",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("code",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:e.setupCubic,draw:e.drawAnimated,onClick:e.togglePlay}))}},matrixsplit:{locale:"en-GB",title:"Splitting curves using matrices",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrixsplit",title:"Splitting curves using matrices",number:"10"}),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("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}}),r.createElement("p",null,"and"),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("code",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("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}}),r.createElement("p",null,"and"),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("code",null,"t = 0")," to ",r.createElement("code",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",{id:"deriving-new-hull-coordinates"},"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("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/55f9d31b32a3e8855f2d28c3253201c8963eefd1.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("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("img",{className:"LaTeX SVG",src:"images/latex/2972cd74dab6560ea68189c2e53f247287cbefae.svg",style:{width:"30.45015rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/39b64e07c41ef6d734064f017036f6391321e924.svg",style:{width:"35.17515rem",height:"4.1998500000000005rem"}}),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("code",null,"t = 0")," to ",r.createElement("code",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("code",null,"t = z")," to ",r.createElement("code",null,"t = 1")," requires doing this again. We first observe what what we just did is actually evaluate the general interval [0,",r.createElement("code",null,"z"),"], which we wrote down simplified becuase of that zero, but we actually evaluated this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a51e64df3cb31acf32d0ad5814c8c6cff41ae611.svg",style:{width:"27.45rem",height:"3.97485rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/eca8cfda9b7a3f0819ec38acc53f95af67bb26bb.svg",style:{width:"32.625rem",height:"3.97485rem"}}),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("code",null,"[something · M]")," into ",r.createElement("code",null,"[M · something]"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/5851c9191acb59456e3706a8f6f1a0f85e691eda.svg",style:{width:"30.74985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0333e63f50b3d43067dc299280f70e9eb98711bb.svg",style:{width:"34.875rem",height:"4.1998500000000005rem"}}),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("code",null,"t = z"),", we get two subcurves that are described as Bézier curves with simple-to-derive coordinates."),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("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("img",{className:"LaTeX SVG",src:"images/latex/44db09290062827525a9b23cbaf91e65063d86d7.svg",style:{width:"58.87485rem",height:"5.70015rem"}}),r.createElement("p",null,"and"),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."))}},reordering:{locale:"en-GB",title:"Lowering and elevating curve order",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"reordering",title:"Lowering and elevating curve order",number:"11"}),r.createElement("p",null,"One interesting property of Bézier curves is that an ",r.createElement("em",null,"n",r.createElement("sup",null,"th"))," order curve can always be perfectly represented by an ",r.createElement("em",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("em",null,"n",r.createElement("sup",null,"th"))," order curve to an ",r.createElement("em",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("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("em",null,"n",r.createElement("sup",null,"th"))," order to ",r.createElement("em",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 "+e.getOrder()+" order Bézier curve",setup:e.setup,draw:e.draw,onKeyDown:e.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."))}},derivatives:{locale:"en-GB",title:"Derivatives",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"derivatives",title:"Derivatives",number:"12"}),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("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("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",{id:"-slow-down-why-is-that-true-"},'"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("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("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("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("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("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("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("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("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("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("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("img",{className:"LaTeX SVG",src:"images/latex/b98618f8061e9e58289abccc06a624a14561d40f.svg",style:{width:"23.70015rem",height:"3.90015rem"}}),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("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."))}},pointvectors:{locale:"en-GB",title:"Tangents and normals",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"pointvectors",title:"Tangents and normals",number:"13"}),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("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("img",{className:"LaTeX SVG",src:"images/latex/3cb2c4f5806142e83c66e1312520d0783d15201c.svg",style:{width:"17.62515rem",height:"2.025rem"}}),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("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 these 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("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("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("em",null,"sin")," and ",r.createElement("em",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("em",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:e.setupCubic,draw:e.draw})))}},components:{locale:"en-GB",title:"Component functions",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"components",title:"Component functions",number:"14"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve components",setup:e.setupCubic,draw:e.draw}))}},extremities:{locale:"en-GB",title:"Finding extremities: root finding",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extremities",title:"Finding extremities: root finding",number:"15"}),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",{id:"quadratic-curves-linear-derivatives-"},"Quadratic curves: linear derivatives."),r.createElement("p",null,'Finding the solution for "where is this line 0" should be trivial:'),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",{id:"cubic-curves-the-quadratic-formula-"},"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 formula"),". If you've seen it before, you'll remember it, and if you haven't, it looks like this:"),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("img",{className:"LaTeX SVG",src:"images/latex/1fc5a3c637460213133bb4576b292e206d67b36f.svg",style:{width:"37.20015rem",height:"2.7rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/c638a85a950ffb535fbf2056958bed5f44be5067.svg",style:{width:"21.375rem",height:"7.2rem"}}),r.createElement("p",null,"This gives us thee coefficients ",r.createElement("em",null,"a"),", ",r.createElement("em",null,"b"),", and ",r.createElement("em",null,"c")," that are expressed in terms of ",r.createElement("em",null,"v")," values, where the ",r.createElement("em",null,"v")," values are just convenient expressions of our original ",r.createElement("em",null,"p")," values, so we can do some trivial substitution to get:"),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 can now almost trivially find the roots by plugging those values into the quadratic formula. 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",{id:"quartic-curves-cardano-s-algorithm-"},"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("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",{id:"implementing-cardano-s-algorithm-for-finding-all-real-roots"},"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&lt;=t && t &lt;=1;","\n","}","\n","\n","// A real-cuberoots-only function:","\n","function crt(v) ","{","\n","  if(v&lt;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 &lt; 0) ","{","\n","    var mp3  = -p/3,","\n","    mp33 = mp3*mp3*mp3,","\n","    r    = sqrt( mp33 ),","\n","    t    = -q / (2*r),","\n","    cosphi = t&lt;-1 ? -1 : t&gt;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","  if(discriminant === 0) ","{","\n","    u1 = q2 &lt; 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","  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",{id:"quintic-and-higher-order-curves-finding-numerical-solutions"},"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("em",null,"t")," (any will do), and getting the corresponding value at that ",r.createElement("em",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("em",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("em",null,"t"),", at step ",r.createElement("em",null,"n=1"),", we perform the following calculation until ",r.createElement("em",null,"f",r.createElement("sub",null,"y")),"(",r.createElement("em",null,"t"),") is zero, so that the next ",r.createElement("em",null,"t")," is the same as the one we already have:"),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 unless there are requests for it)"),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("em",null,"t=0")," to ",r.createElement("em",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",{id:"in-conclusion-"},"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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve extremities",setup:e.setupCubic,draw:e.draw}))}},boundingbox:{locale:"en-GB",title:"Bounding boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"boundingbox",title:"Bounding boxes",number:"16"}),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("em",null,"Computing the bounding box for a Bézier curve"),":"),r.createElement("ol",null,r.createElement("li",null,"Find all ",r.createElement("em",null,"t")," value(s) for the curve derivative's x- and y-roots."),r.createElement("li",null,"Discard any ",r.createElement("em",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("em",null,"t=0"),", ",r.createElement("em",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 all curve extremity points shown on the curve):"),r.createElement(i,{preset:"simple",title:"Quadratic Bézier bounding box",setup:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier bounding box",setup:e.setupCubic,draw:e.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."))}},aligning:{locale:"en-GB",title:"Aligning curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"aligning",title:"Aligning curves",number:"17"}),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("em",null,"n")," term polynomial functions into ",r.createElement("em",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("em",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),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("em",null,"x")," coordinates by -120, and all ",r.createElement("em",null,"y")," coordinates by -160, gives us:"),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("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("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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}))}},tightbounds:{locale:"en-GB",title:"Tight boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"tightbounds",title:"Tight boxes",number:"18"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.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."))}},inflections:{locale:"en-GB",title:"Curve inflections",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"inflections",title:"Curve inflections",number:"19"}),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 behaving oddly: we might have to change the radius of the circle as we slide it along, 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("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("em",null,"C(t)"),", we want to know for which values of ",r.createElement("em",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("em",null,"C(t)")," look like? Actually something that seems not too hard:"),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("em",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("em",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",r.createElement("em",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",{id:"let-s-derive-the-full-formula-anyway"},"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("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("em",null,"y"),":"),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("em",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("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("em",null,"C(t)"),":"),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("img",{
-className:"LaTeX SVG",src:"images/latex/c1e427616a8a2502abf3cf46415971d0df9a273c.svg",style:{width:"34.72515rem",height:"5.54985rem"}}),r.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",r.createElement("em",null,"C(t) = 0"),"; we use the quadratic formula:"),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")," ",r.createElement("em",null,"x")," is not zero, because divisions by zero are rather useless."),r.createElement("p",null,"Taking that into account, we compute ",r.createElement("em",null,"t"),", we disregard any ",r.createElement("em",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",r.createElement("em",null,"t")," value(s) our curve will inflect."),r.createElement(i,{title:"Finding cubic Bézier curve inflections",setup:e.setupCubic,draw:e.draw}))}},canonical:{locale:"en-GB",title:"Canonical form (for cubic curves)",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"canonical",title:"Canonical form (for cubic curves)",number:"20"}),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:e.setup,draw:e.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("ol",null,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("ol",null,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("ol",null,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",{id:"wait-where-do-those-lines-come-from-"},"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("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("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("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("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 ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Scaling_%28geometry%29"},"do some scaling")," 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("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 ",r.createElement("code",null,"y/x")," rather than ",r.createElement("code",null,"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("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("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("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("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",{id:"how-do-you-track-all-that-"},"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:e.setup,draw:e.draw}))}},arclength:{locale:"en-GB",title:"Unknown title (arclength)",getContent:function(e){return r.createElement("section",null)}},arclengthapprox:{locale:"en-GB",title:"Unknown title (arclengthapprox)",getContent:function(e){return r.createElement("section",null)}},tracing:{locale:"en-GB",title:"Unknown title (tracing)",getContent:function(e){return r.createElement("section",null)}},intersections:{locale:"en-GB",title:"Unknown title (intersections)",getContent:function(e){return r.createElement("section",null)}},curveintersection:{locale:"en-GB",title:"Unknown title (curveintersection)",getContent:function(e){return r.createElement("section",null)}},abc:{locale:"en-GB",title:"Unknown title (abc)",getContent:function(e){return r.createElement("section",null)}},moulding:{locale:"en-GB",title:"Unknown title (moulding)",getContent:function(e){return r.createElement("section",null)}},pointcurves:{locale:"en-GB",title:"Unknown title (pointcurves)",getContent:function(e){return r.createElement("section",null)}},catmullconv:{locale:"en-GB",title:"Unknown title (catmullconv)",getContent:function(e){return r.createElement("section",null)}},catmullmoulding:{locale:"en-GB",title:"Unknown title (catmullmoulding)",getContent:function(e){return r.createElement("section",null)}},polybezier:{locale:"en-GB",title:"Unknown title (polybezier)",getContent:function(e){return r.createElement("section",null)}},shapes:{locale:"en-GB",title:"Unknown title (shapes)",getContent:function(e){return r.createElement("section",null)}},projections:{locale:"en-GB",title:"Unknown title (projections)",getContent:function(e){return r.createElement("section",null)}},offsetting:{locale:"en-GB",title:"Unknown title (offsetting)",getContent:function(e){return r.createElement("section",null)}},graduatedoffset:{locale:"en-GB",title:"Unknown title (graduatedoffset)",getContent:function(e){return r.createElement("section",null)}},circles:{locale:"en-GB",title:"Unknown title (circles)",getContent:function(e){return r.createElement("section",null)}},circles_cubic:{locale:"en-GB",title:"Unknown title (circles_cubic)",getContent:function(e){return r.createElement("section",null)}},arcapproximation:{locale:"en-GB",title:"Unknown title (arcapproximation)",getContent:function(e){return r.createElement("section",null)}},bsplines:{locale:"en-GB",title:"Unknown title (bsplines)",getContent:function(e){return r.createElement("section",null)}},comments:{locale:"en-GB",title:"Unknown title (comments)",getContent:function(e){return r.createElement("section",null)}},"locale-switcher":{locale:"en-GB",title:"locale-switcher",getContent:function(e){return r.createElement("section",null,r.createElement("p",null,"Read this in your own language:"),r.createElement("ul",null,r.createElement("li",null,r.createElement("a",{href:"?locale=en-GB"},"English")),r.createElement("li",null,r.createElement("a",{href:"?locale=ja-JP"},"日本語")),r.createElement("li",null,r.createElement("a",{href:"?locale=zh-CN"},"中文"))),r.createElement("p",null,"Don't see your language listed? ",r.createElement("a",{href:"https://github.com/Pomax/BezierInfo-2/wiki/localize"},"Help translate this content!")))}}}},function(e,t,n){e.exports=n(65)},function(e,t,n){!function(){"use strict";var t=n(66),r=function(e){this.curves=[],this._3d=!1,e&&(this.curves=e,this._3d=this.curves[0]._3d)};r.prototype={valueOf:function(){return this.toString()},toString:function(){return t.pointsToString(this.points)},addCurve:function(e){this.curves.push(e),this._3d=this._3d||e._3d},length:function(){return this.curves.map(function(e){return e.length()}).reduce(function(e,t){return e+t})},curve:function(e){return this.curves[e]},bbox:function(){for(var e=this.curves,n=e[0].bbox(),r=1;r<e.length;r++)t.expandbox(n,e[r].bbox());return n},offset:function(e){var t=[];return this.curves.forEach(function(n){t=t.concat(n.offset(e))}),new r(t)}},e.exports=r}()},function(e,t,n){(function(e){var n,r;/**
+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\nlli4 = 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\nlli = 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",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"Curve/curve intersection, however, is more complicated. Since we have no straight line to align to, we can't simply align one of the curves and be left with a simple procedure. Instead, we'll need to apply two techniques we've not covered yet: de Casteljau's algorithm, and curve splitting."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:"Manipulating a curve"}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,s=o(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=s}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,s=i+a,l=s-1,u=o(l/s),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the ',r.createElement("em",null,"t"),'-value matching that coordinate, and then letting them drag that point around. With every drag update we\'ll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.'),r.createElement(i,{preset:"moulding",title:"Moulding a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markQB,onMouseDrag:this.dragQB,onMouseUp:this.saveCurve}),r.createElement("p",null,r.createElement("strong",null,"Click-dragging the curve itself")," shows what we're using to compute the new coordinates: while dragging you will see the original points B and its corresponding ",r.createElement("i",null,"t"),"-value, the original point C for that ",r.createElement("i",null,"t"),"-value, as well as the new point B' based on the mouse cursor. Since we know the ",r.createElement("i",null,"t"),"-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e361e1235c94bbe87e95834c7fcfb6ab96e028b9.svg",style:{width:"15.600150000000001rem",height:"2.3998500000000003rem"}})),r.createElement("p",null,"For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:"),r.createElement(i,{preset:"moulding",title:"Moulding a cubic Bézier curve",setup:this.setupCubic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markCB,onMouseDrag:this.dragCB,onMouseUp:this.saveCurve}),r.createElement("p",null,"To help understand what's going on, the cubic graphic shows the full de Casteljau construction \"hull\" when repositioning point B. We compute A` in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance ",r.createElement("i",null,"t"),", because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy."),r.createElement("p",null,"First, we construct the one-level-of-de-Casteljau-up points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f813a7d607787329d242bfbfa28570c88c3e30f5.svg",style:{width:"9.975150000000001rem",height:"5.09985rem"}})),r.createElement("p",null,"And then we can compute the new control points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4ec5f4148752a3d332a922048700d2c71918342f.svg",style:{width:"11.700000000000001rem",height:"4.64985rem"}})),r.createElement("p",null,"And that's cubic curve manipulation."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",style:{width:"7.275150000000001rem",height:"1.125rem"}})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",style:{width:"10.125rem",height:"1.125rem"}})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/664fba98ea17b358941b579115bf063edf87ae17.svg",style:{width:"9.450000000000001rem",height:"3.15rem"}})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",style:{width:"12.45015rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",style:{width:"15.150150000000002rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:"Creating a curve from three points"}},setup:function(e){e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}]},onClick:function(e,t){3==t.lpts.length&&(t.lpts=[]),t.lpts.push({x:e.offsetX,y:e.offsetY}),t.redraw()},getQRatio:function(e){var t=2*e,n=t*e-t,r=n+1;return o(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return o(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},w={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},y={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(w.x-r.x),y:r.y+2*(w.y-r.y)},_={x:i.x+2*(y.x-i.x),y:i.y+2*(y.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,w),e.drawLine(l,y),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, unlike circle-fitting, which requires just three points, Bézier curve fitting requires three points, as well as a ",r.createElement("i",null,"t")," value, so we can figure out where point 'C' needs to be."),r.createElement("p",null,"The following graphic lets you place three points, and will use the preceding sections on the ABC ratio and curve construction to form a quadratic curve through them. You can move the points you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks. (There's some freedom here, so for illustrative purposes we clamped ",r.createElement("i",null,"t")," to simply be 0.5, lets us bypass some maths, since a ",r.createElement("i",null,"t")," value of 0.5 always puts C in the middle of the start--end line segment)"),r.createElement(i,{preset:"generate",title:"Fitting a quadratic Bézier curve",setup:this.setup,draw:this.drawQuadratic,onClick:this.onClick}),r.createElement("p",null,'For cubic curves we also need some values to construct the "de Casteljau line through B" with, and that gives us quite a bit of choice. Since we\'ve clamped ',r.createElement("i",null,"t"),' to 0.5, we\'ll set up a line through B parallel to the line start--end, with a length that is proportional to the length of the line B--C: the further away from the baseline B is, the wider its construction line will be, and so the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to scale the length of the construction line as we move B closer or further away from the baseline, so I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end) forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too, and if the points lie on a line, then the curve constructed has the control points very close to B, while still lying between B and the correct curve end point:'),r.createElement(i,{preset:"generate",title:"Fitting a cubic Bézier curve",setup:this.setup,draw:this.drawCubic,onClick:this.onClick}),r.createElement("p",null,'In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which ',r.createElement("i",null,"t")," value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination of ",r.createElement("i",null,"t"),' and tangent values that lead to a more "æsthetic" curve, but this will be left as an exercise to the reader, since there are many, and æsthetics are often quite personal.'))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);
+e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",style:{width:"8.400150000000002rem",height:"1.27485rem"}})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",style:{width:"21.97485rem",height:"2.7rem"}})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r<a;r++)i=n(e[r],t),i<o&&(s=r,o=i);return s/(a-1)},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.mousePt){e.setColor("red"),e.setFill("red"),e.drawCircle(e.mousePt,3);var n=this.findClosest(e._lut,e.mousePt,e.utils.dist),r=t.get(n);e.drawLine(r,e.mousePt),e.drawCircle(r,3),e.text("t = "+e.utils.round(n,2),r,{x:10,y:3})}},onMouseMove:function(e,t){t.mousePt={x:e.offsetX,y:e.offsetY},t._lut=t.curve.getLUT()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Say we have a Bézier curve and some point, not on the curve, of which we want to know which ",r.createElement("i",null,"t")," value on the curve gives us an on-curve point closest to our off-curve point. Or: say we want to find the projection of a random point onto a curve. How do we do that?"),r.createElement("p",null,"If the Bézier curve is of low enough order, we might be able to ",r.createElement("a",{href:"http://jazzros.blogspot.ca/2011/03/projecting-point-on-bezier-curve.html"},"work out the maths for how to do this"),", and get a perfect ",r.createElement("i",null,"t")," value back, but in general this is an incredibly hard problem and the easiest solution is, really, a numerical approach again. We'll be finding our ideal ",r.createElement("i",null,"t")," value using a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"binary search"),". First, we do a coarse distance-check based on ",r.createElement("i",null,"t"),' values associated with the curve\'s "to draw" coordinates (using a lookup table, or LUT). This is pretty fast. Then we run this algorithm:'),r.createElement("ol",null,r.createElement("li",null,"with the ",r.createElement("i",null,"t")," value we found, start with some small interval around ",r.createElement("i",null,"t")," (1/length_of_LUT on either side is a reasonable start),"),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is larger than the distance to ",r.createElement("i",null,"t"),", try again with the interval reduced to half its original length."),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is smaller than the distance to ",r.createElement("i",null,"t"),", replace ",r.createElement("i",null,"t")," with the smaller-distance value."),r.createElement("li",null,"after reducing the interval, or changing ",r.createElement("i",null,"t"),", go back to step 1.")),r.createElement("p",null,"We keep repeating this process until the interval is small enough to claim the difference in precision found is irrelevant for the purpose we're trying to find ",r.createElement("i",null,"t")," for. In this case, I'm arbitrarily fixing it at 0.0001."),r.createElement("p",null,'The following graphic demonstrates the result of this procedure.Simply move the cursor around, and if it does not lie on top of the curve, you will see a line that projects the cursor onto the curve based on an iteratively found "ideal" ',r.createElement("i",null,"t")," value."),r.createElement(i,{preset:"simple",title:"Projecting a point onto a Bézier curve",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="reordering",l=r.createClass({displayName:"Reordering",getDefaultProps:function(){return{title:o.getTitle(s)}},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(l.lower(e.curve))}}}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=["unite","intersect","exclude","subtract"],s=r.createClass({displayName:"Shapes",getDefaultProps:function(){return{title:"Boolean shape operations"}},getInitialState:function(){return{mode:o[0]}},setMode:function(e){this.setState({mode:e})},formPath:function(e,t,n,r,i){t=t||0,n=n||0;var a=30,o=a/2;r=r||8*a,i=i||4*a;var s=r/2,l=i/2,u=s/3,c=l/3,h=e.Paper,d=h.Path,f=h.Point,p=new d;return p.moveTo(new f(t-s+2*a,n-l)),p.cubicCurveTo(new f(t-s+o,n-l+o),new f(t-s+o,n+l-o),new f(t-s+2*a,n+l)),p.cubicCurveTo(new f(t-u,n+c),new f(t+u,n+c),new f(t+s-2*a,n+l)),p.cubicCurveTo(new f(t+s-o,n+l-o),new f(t+s-o,n-l+o),new f(t+s-2*a,n-l)),p.cubicCurveTo(new f(t+u,n-c),new f(t-u,n-c),new f(t-s+2*a,n-l)),p.closePath(!0),p.strokeColor="rgb(100,100,255)",p},setup:function(e){var t=e.getPanelWidth(),n=40,r=t/2,i=t/2;e.c1=this.formPath(e,r,i),r+=n,i+=n,e.c2=this.formPath(e,r,i),this.state.mode=o[0]},onMouseMove:function(e,t){var n=e.offsetX,r=e.offsetY;t.c2.position={x:n,y:r}},draw:function(e){e.c3&&e.c3.remove();var t=e.c1,n=e.c2,r=t[this.state.mode].bind(t),i=e.c3=r(n);i.strokeColor="red",i.fillColor="rgba(255,100,100,0.4)",e.Paper.view.draw()},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or exclusion, between two or more shapes that involve Bézier curves. For simplicity (well.. sort of, more homogeneity), we'll be looking at Poly-Bézier shapes only, but a shape that consists of a mix of lines and Bézier curves is technically a simplification (although it does mean we need to write a definition for the class of shapes that mix lines and Bézier curves. Since poly-Bézier curves are a superset, we'll be using those in the following examples)"),r.createElement("p",null,"The procedure for performing boolean operations consists, broadly, of four steps:"),r.createElement("ol",null,r.createElement("li",null,"Find the intersection points between both shapes,"),r.createElement("li",null,"cut up the shapes into multiple sections between these intersections,"),r.createElement("li",null,"discard any section that isn't part of the desired operation's resultant shape, and"),r.createElement("li",null,"link up the remaining sections to form the new shape.")),r.createElement("p",null,"Finding all intersections between two poly-Bézier curves, or any poly-line-section shape, is similar to the iterative algorithm discussed in the section on curve/curve intersection. For each segment in the poly-Bézier curve we check whether its bounding box overlaps with any of the segment bounding boxes in the other poly-Bézier curve. If so, we run normal intersection detection."),r.createElement("p",null,"After we found all intersection points, we split up our poly-Bézier curves, making sure to record which of the newly formed poly-Bézier curves might potentially link up at the points we split the originals up at. This will let us quickly glue poly-Bézier curves back together after the next step."),r.createElement("p",null,"Once we have all the new poly-Bézier curves, we run the first step of the desired boolean operation."),r.createElement("ul",null,r.createElement("li",null,'Union: discard all poly-Bézier curves that lie "inside" our union of our shapes. E.g. if we want the union of two overlapping circles, the resulting shape is the outline.'),r.createElement("li",null,'Intersection: discard all poly-Bézier curves that lie "outside" the intersection of the two shapes. E.g. if we want the intersection of two overlapping circles, the resulting shape is the tapered ellipse where they overlap.'),r.createElement("li",null,"Exclusion: none of the sections are discarded, but we will need to link the shapes back up in a special way. Flip any section that would qualify for removal under UNION rules.")),r.createElement("table",{className:"sketch"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_base.gif",height:"169px"}),r.createElement("p",null,"Two overlapping shapes.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_union.gif",height:"169px"}),r.createElement("p",null,"The unified region.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_intersection.gif",height:"169px"}),r.createElement("p",null,"Their intersection.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_exclusion.gif",height:"169px"}),r.createElement("p",null,"Their exclusion regions."))))),r.createElement("p",null,'The main complication in the outlined procedure here is determining how sections qualify in terms of being "inside" and "outside" of our shapes. For this, we need to be able to perform point-in-shape detection, for which we\'ll use a classic algorithm: getting the "crossing number" by using ray casting, and then testing for "insidedness" by applying the ',r.createElement("a",{href:"http://folk.uio.no/bjornw/doc/bifrost-ref/bifrost-ref-12.html"},"even-odd rule"),': For any point and any shape, we can cast a ray from our point, to some point that we know lies outside of the shape (such as a corner of our drawing surface). We then count how many times that line crosses our shape (remember that we can perform line/curve intersection detection quite easily). If the number of times it crosses the shape\'s outline is even, the point did not actually lie inside our shape. If the number of intersections is odd, our point did lie inside out shape. With that knowledge, we can decide whether to treat a section that such a point lies on "needs removal" (under union rules), "needs preserving" (under intersection rules), or "needs flipping" (under exclusion rules).'),r.createElement("p",null,"These operations are expensive, and implementing your own code for this is generally a bad idea if there is already a geometry package available for your language of choice. In this case, for JavaScript the most excellent ",r.createElement("a",{href:"http://paperjs.org"},"Paper.js")," already comes with all the code in place to perform efficient boolean shape operations, so rather that implement an inferior version here, I can strongly recommend the Paper.js library if you intend to do any boolean shape work."),r.createElement("p",null,"The following graphic shows Paper.js doing its thing for two shapes: one static, and one that is linked to your mouse pointer. If you move the mouse around, you'll see how the shape intersections are resolved. The base shapes are outlined in blue, and the boolean result is coloured red."),r.createElement(i,{preset:"simple",title:"Boolean shape operations with Paper.js",paperjs:!0,setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove},r.createElement("br",null),o.map(function(t){var n=e.state.mode===t?"selected":null;return r.createElement("button",{className:n,key:t,onClick:function(){this.setMode(t)}.bind(e)},t)})))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="splitting",s=r.createClass({displayName:"Splitting",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="tightbounds",s=r.createClass({displayName:"TightBounds",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),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 f=n*u/h;for(r=0;r<c.length;r++)if(c[r].d>f){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 p=0,m=["rgb(240,0,200)","rgb(0,40,200)"];e.setColor(m[p]);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[++p%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(0),i=n(4),a=new i,o="whatis",s=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:a.getTitle(o)}},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],f=h[1],p=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*(f.x-d.x),y:d.y+a*(f.y-d.y)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.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(f,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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6);e.exports={preface:{locale:"en-GB",title:"Preface",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"Preface"}),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 nkscape, 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",{id:"note-virtually-all-b-zier-graphics-are-interactive-"},"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",{id:"this-book-is-open-source-"},"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",{id:"how-complicated-is-the-maths-going-to-be-"},"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",{id:"questions-comments-"},"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",{id:"buy-me-a-coffee-"},"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",{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!")))}},introduction:{locale:"en-GB",title:"A lightning introduction",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"A lightning introduction",number:"1"}),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:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"Cubic Bézier curves",setup:e.drawCubic,draw:e.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!"))}},whatis:{locale:"en-GB",title:"So what makes a Bézier Curve?",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"So what makes a Bézier Curve?",number:"2"}),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("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:e.setup,draw:e.draw,onKeyDown:e.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."))}},explanation:{locale:"en-GB",title:"The mathematics of Bézier curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"The mathematics of Bézier curves",number:"3"}),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("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("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("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("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:e.setup,draw:e.draw,onKeyDown:e.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("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("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("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("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("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",{id:"how-to-implement-the-basis-function"},"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\n"),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\nbinomial(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<prev; i++):\n      nextRow[i] = lut[prev][i-1] + lut[prev][i]\n    nextRow[s] = 1\n    lut.add(nextRow)\n  return lut[n][k]\n"),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\n"),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\nfunction 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\n"),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."))}},control:{locale:"en-GB",title:"Controlling Bézier curvatures",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"control",title:"Controlling Bézier curvatures",number:"4"}),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:e.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:e.drawCubicLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"15th order interpolations",draw:e.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("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("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:e.drawCubic,draw:e.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",{id:"how-to-implement-the-weighted-basis-function"},"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\n"),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\nfunction 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\n"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}},extended:{locale:"en-GB",title:"The Bézier interval [0,1]",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extended",title:"The Bézier interval [0,1]",number:"5"}),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("code",null,"t=0")," to ",r.createElement("code",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("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("code",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("code",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("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("code",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("code",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:e.setupCubic,draw:e.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)."))}},matrix:{locale:"en-GB",title:"Bézier curvatures as matrix operations",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrix",title:"Bézier curvatures as matrix operations",number:"6"}),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("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("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("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("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("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("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("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("code",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),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("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("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("code",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."))}},decasteljau:{locale:"en-GB",title:"de Casteljau's algorithm",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"decasteljau",title:"de Casteljau's algorithm",number:"7"}),r.createElement("p",null,"If we want to draw Bézier curves we can run through all values of ",r.createElement("code",null,"t")," from 0 to 1 and then compute the weighted basis function, getting the ",r.createElement("code",null,"x/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("code",null,"x/y")," values for ",r.createElement("code",null,"t"),", let's do this instead:"),r.createElement("ul",null,r.createElement("li",null,"treat ",r.createElement("code",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("code",null,"n")," curve, that's ",r.createElement("code",null,"n")," lines."),r.createElement("li",null,"Place markers along each of these line, at distance ",r.createElement("code",null,"t"),". So if ",r.createElement("code",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("code",null,"those")," points. This gives ",r.createElement("code",null,"n-1")," lines."),r.createElement("li",null,"Place markers along each of these line at distance ",r.createElement("code",null,"t"),"."),r.createElement("li",null,"Form lines between ",r.createElement("code",null,"those")," points. This'll be ",r.createElement("code",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("code",null,"t")," on that line coincides with the original curve point at ",r.createElement("code",null,"t"),".")),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"how-to-implement-de-casteljau-s-algorithm"},"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)\n"),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("code",null,"x")," and ",r.createElement("code",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)\n"),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:e.setup,draw:e.draw}))}},flattening:{locale:"en-GB",title:"Simplified drawing",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"flattening",title:"Simplified drawing",number:"8"}),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:e.setupQuadratic,draw:e.drawFlattened,onKeyDown:e.onKeyDown}),r.createElement(i,{preset:"twopanel",title:"Flattening a cubic curve",setup:e.setupCubic,draw:e.drawFlattened,onKeyDown:e.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",{id:"how-to-implement-curve-flattening"},"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;\n"),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\n"),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.")))}},splitting:{locale:"en-GB",title:"Splitting curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"splitting",title:"Splitting curves",number:"9"}),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("code",null,"t"),", the procedure gives us all the points we need to split a curve at that ",r.createElement("code",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:e.setupCubic,draw:e.drawSplit}),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"implementing-curve-splitting"},"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=[]\nright=[]\nfunction 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)\n"),r.createElement("p",null,"After running this function for some value ",r.createElement("code",null,"t"),", the ",r.createElement("code",null,"left")," and ",r.createElement("code",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("code",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:e.setupCubic,draw:e.drawAnimated,onClick:e.togglePlay}))}},matrixsplit:{locale:"en-GB",title:"Splitting curves using matrices",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrixsplit",title:"Splitting curves using matrices",number:"10"}),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("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}}),r.createElement("p",null,"and"),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("code",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("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}}),r.createElement("p",null,"and"),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("code",null,"t = 0")," to ",r.createElement("code",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",{id:"deriving-new-hull-coordinates"},"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("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/55f9d31b32a3e8855f2d28c3253201c8963eefd1.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("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("img",{className:"LaTeX SVG",src:"images/latex/2972cd74dab6560ea68189c2e53f247287cbefae.svg",style:{width:"30.45015rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/39b64e07c41ef6d734064f017036f6391321e924.svg",style:{width:"35.17515rem",height:"4.1998500000000005rem"}}),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("code",null,"t = 0")," to ",r.createElement("code",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("code",null,"t = z")," to ",r.createElement("code",null,"t = 1")," requires doing this again. We first observe what what we just did is actually evaluate the general interval [0,",r.createElement("code",null,"z"),"], which we wrote down simplified becuase of that zero, but we actually evaluated this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a51e64df3cb31acf32d0ad5814c8c6cff41ae611.svg",style:{width:"27.45rem",height:"3.97485rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/eca8cfda9b7a3f0819ec38acc53f95af67bb26bb.svg",style:{width:"32.625rem",height:"3.97485rem"}}),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("code",null,"[something · M]")," into ",r.createElement("code",null,"[M · something]"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/5851c9191acb59456e3706a8f6f1a0f85e691eda.svg",style:{width:"30.74985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0333e63f50b3d43067dc299280f70e9eb98711bb.svg",style:{width:"34.875rem",height:"4.1998500000000005rem"}}),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("code",null,"t = z"),", we get two subcurves that are described as Bézier curves with simple-to-derive coordinates."),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("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("img",{className:"LaTeX SVG",src:"images/latex/44db09290062827525a9b23cbaf91e65063d86d7.svg",style:{width:"58.87485rem",height:"5.70015rem"}}),r.createElement("p",null,"and"),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."))}},reordering:{locale:"en-GB",title:"Lowering and elevating curve order",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"reordering",title:"Lowering and elevating curve order",number:"11"}),r.createElement("p",null,"One interesting property of Bézier curves is that an ",r.createElement("em",null,"n",r.createElement("sup",null,"th"))," order curve can always be perfectly represented by an ",r.createElement("em",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("em",null,"n",r.createElement("sup",null,"th"))," order curve to an ",r.createElement("em",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("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("em",null,"n",r.createElement("sup",null,"th"))," order to ",r.createElement("em",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 "+e.getOrder()+" order Bézier curve",setup:e.setup,draw:e.draw,onKeyDown:e.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."))}},derivatives:{locale:"en-GB",title:"Derivatives",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"derivatives",title:"Derivatives",number:"12"}),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("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("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",{id:"-slow-down-why-is-that-true-"},'"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("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("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("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("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("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("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("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("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("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("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("img",{className:"LaTeX SVG",src:"images/latex/b98618f8061e9e58289abccc06a624a14561d40f.svg",style:{width:"23.70015rem",height:"3.90015rem"}}),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("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."));
+}},pointvectors:{locale:"en-GB",title:"Tangents and normals",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"pointvectors",title:"Tangents and normals",number:"13"}),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("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("img",{className:"LaTeX SVG",src:"images/latex/3cb2c4f5806142e83c66e1312520d0783d15201c.svg",style:{width:"17.62515rem",height:"2.025rem"}}),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("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 these 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("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("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("em",null,"sin")," and ",r.createElement("em",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("em",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:e.setupCubic,draw:e.draw})))}},components:{locale:"en-GB",title:"Component functions",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"components",title:"Component functions",number:"14"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve components",setup:e.setupCubic,draw:e.draw}))}},extremities:{locale:"en-GB",title:"Finding extremities: root finding",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extremities",title:"Finding extremities: root finding",number:"15"}),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",{id:"quadratic-curves-linear-derivatives-"},"Quadratic curves: linear derivatives."),r.createElement("p",null,'Finding the solution for "where is this line 0" should be trivial:'),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",{id:"cubic-curves-the-quadratic-formula-"},"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 formula"),". If you've seen it before, you'll remember it, and if you haven't, it looks like this:"),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("img",{className:"LaTeX SVG",src:"images/latex/1fc5a3c637460213133bb4576b292e206d67b36f.svg",style:{width:"37.20015rem",height:"2.7rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/c638a85a950ffb535fbf2056958bed5f44be5067.svg",style:{width:"21.375rem",height:"7.2rem"}}),r.createElement("p",null,"This gives us thee coefficients ",r.createElement("em",null,"a"),", ",r.createElement("em",null,"b"),", and ",r.createElement("em",null,"c")," that are expressed in terms of ",r.createElement("em",null,"v")," values, where the ",r.createElement("em",null,"v")," values are just convenient expressions of our original ",r.createElement("em",null,"p")," values, so we can do some trivial substitution to get:"),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 can now almost trivially find the roots by plugging those values into the quadratic formula. 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",{id:"quartic-curves-cardano-s-algorithm-"},"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("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",{id:"implementing-cardano-s-algorithm-for-finding-all-real-roots"},"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:\nfunction accept(t) {\n  return 0<=t && t <=1;\n}\n\n// A real-cuberoots-only function:\nfunction 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.\nfunction 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  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  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",{id:"quintic-and-higher-order-curves-finding-numerical-solutions"},"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("em",null,"t")," (any will do), and getting the corresponding value at that ",r.createElement("em",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("em",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("em",null,"t"),", at step ",r.createElement("em",null,"n=1"),", we perform the following calculation until ",r.createElement("em",null,"f",r.createElement("sub",null,"y")),"(",r.createElement("em",null,"t"),") is zero, so that the next ",r.createElement("em",null,"t")," is the same as the one we already have:"),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 unless there are requests for it)"),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("em",null,"t=0")," to ",r.createElement("em",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",{id:"in-conclusion-"},"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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve extremities",setup:e.setupCubic,draw:e.draw}))}},boundingbox:{locale:"en-GB",title:"Bounding boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"boundingbox",title:"Bounding boxes",number:"16"}),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("em",null,"Computing the bounding box for a Bézier curve"),":"),r.createElement("ol",null,r.createElement("li",null,"Find all ",r.createElement("em",null,"t")," value(s) for the curve derivative's x- and y-roots."),r.createElement("li",null,"Discard any ",r.createElement("em",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("em",null,"t=0"),", ",r.createElement("em",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 all curve extremity points shown on the curve):"),r.createElement(i,{preset:"simple",title:"Quadratic Bézier bounding box",setup:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier bounding box",setup:e.setupCubic,draw:e.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."))}},aligning:{locale:"en-GB",title:"Aligning curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"aligning",title:"Aligning curves",number:"17"}),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("em",null,"n")," term polynomial functions into ",r.createElement("em",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("em",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),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("em",null,"x")," coordinates by -120, and all ",r.createElement("em",null,"y")," coordinates by -160, gives us:"),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("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("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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}))}},tightbounds:{locale:"en-GB",title:"Tight boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"tightbounds",title:"Tight boxes",number:"18"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.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."))}},inflections:{locale:"en-GB",title:"Curve inflections",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"inflections",title:"Curve inflections",number:"19"}),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 behaving oddly: we might have to change the radius of the circle as we slide it along, 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("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("em",null,"C(t)"),", we want to know for which values of ",r.createElement("em",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("em",null,"C(t)")," look like? Actually something that seems not too hard:"),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("em",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("em",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",r.createElement("em",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",{id:"let-s-derive-the-full-formula-anyway"},"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("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("em",null,"y"),":"),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("em",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("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("em",null,"C(t)"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/c1e427616a8a2502abf3cf46415971d0df9a273c.svg",style:{width:"34.72515rem",height:"5.54985rem"}}),r.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",r.createElement("em",null,"C(t) = 0"),"; we use the quadratic formula:"),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")," ",r.createElement("em",null,"x")," is not zero, because divisions by zero are rather useless."),r.createElement("p",null,"Taking that into account, we compute ",r.createElement("em",null,"t"),", we disregard any ",r.createElement("em",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",r.createElement("em",null,"t")," value(s) our curve will inflect."),r.createElement(i,{
+title:"Finding cubic Bézier curve inflections",setup:e.setupCubic,draw:e.draw}))}},canonical:{locale:"en-GB",title:"Canonical form (for cubic curves)",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"canonical",title:"Canonical form (for cubic curves)",number:"20"}),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:e.setup,draw:e.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("ol",null,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("ol",null,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("ol",null,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",{id:"wait-where-do-those-lines-come-from-"},"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("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("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("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("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 ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Scaling_%28geometry%29"},"do some scaling")," 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("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 ",r.createElement("code",null,"y/x")," rather than ",r.createElement("code",null,"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("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("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("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("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",{id:"how-do-you-track-all-that-"},"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:e.setup,draw:e.draw}))}},arclength:{locale:"en-GB",title:"Unknown title (arclength)",getContent:function(e){return r.createElement("section",null)}},arclengthapprox:{locale:"en-GB",title:"Unknown title (arclengthapprox)",getContent:function(e){return r.createElement("section",null)}},tracing:{locale:"en-GB",title:"Unknown title (tracing)",getContent:function(e){return r.createElement("section",null)}},intersections:{locale:"en-GB",title:"Unknown title (intersections)",getContent:function(e){return r.createElement("section",null)}},curveintersection:{locale:"en-GB",title:"Unknown title (curveintersection)",getContent:function(e){return r.createElement("section",null)}},abc:{locale:"en-GB",title:"Unknown title (abc)",getContent:function(e){return r.createElement("section",null)}},moulding:{locale:"en-GB",title:"Unknown title (moulding)",getContent:function(e){return r.createElement("section",null)}},pointcurves:{locale:"en-GB",title:"Unknown title (pointcurves)",getContent:function(e){return r.createElement("section",null)}},catmullconv:{locale:"en-GB",title:"Unknown title (catmullconv)",getContent:function(e){return r.createElement("section",null)}},catmullmoulding:{locale:"en-GB",title:"Unknown title (catmullmoulding)",getContent:function(e){return r.createElement("section",null)}},polybezier:{locale:"en-GB",title:"Unknown title (polybezier)",getContent:function(e){return r.createElement("section",null)}},shapes:{locale:"en-GB",title:"Unknown title (shapes)",getContent:function(e){return r.createElement("section",null)}},projections:{locale:"en-GB",title:"Unknown title (projections)",getContent:function(e){return r.createElement("section",null)}},offsetting:{locale:"en-GB",title:"Unknown title (offsetting)",getContent:function(e){return r.createElement("section",null)}},graduatedoffset:{locale:"en-GB",title:"Unknown title (graduatedoffset)",getContent:function(e){return r.createElement("section",null)}},circles:{locale:"en-GB",title:"Unknown title (circles)",getContent:function(e){return r.createElement("section",null)}},circles_cubic:{locale:"en-GB",title:"Unknown title (circles_cubic)",getContent:function(e){return r.createElement("section",null)}},arcapproximation:{locale:"en-GB",title:"Unknown title (arcapproximation)",getContent:function(e){return r.createElement("section",null)}},bsplines:{locale:"en-GB",title:"Unknown title (bsplines)",getContent:function(e){return r.createElement("section",null)}},comments:{locale:"en-GB",title:"Unknown title (comments)",getContent:function(e){return r.createElement("section",null)}},"locale-switcher":{locale:"en-GB",title:"locale-switcher",getContent:function(e){return r.createElement("section",null,r.createElement("p",null,"Read this in your own language:"),r.createElement("ul",null,r.createElement("li",null,r.createElement("a",{href:"?locale=en-GB"},"English")),r.createElement("li",null,r.createElement("a",{href:"?locale=ja-JP"},"日本語")),r.createElement("li",null,r.createElement("a",{href:"?locale=zh-CN"},"中文"))),r.createElement("p",null,"Don't see your language listed? ",r.createElement("a",{href:"https://github.com/Pomax/BezierInfo-2/wiki/localize"},"Help translate this content!")))}}}},function(e,t,n){e.exports=n(65)},function(e,t,n){!function(){"use strict";var t=n(66),r=function(e){this.curves=[],this._3d=!1,e&&(this.curves=e,this._3d=this.curves[0]._3d)};r.prototype={valueOf:function(){return this.toString()},toString:function(){return t.pointsToString(this.points)},addCurve:function(e){this.curves.push(e),this._3d=this._3d||e._3d},length:function(){return this.curves.map(function(e){return e.length()}).reduce(function(e,t){return e+t})},curve:function(e){return this.curves[e]},bbox:function(){for(var e=this.curves,n=e[0].bbox(),r=1;r<e.length;r++)t.expandbox(n,e[r].bbox());return n},offset:function(e){var t=[];return this.curves.forEach(function(n){t=t.concat(n.offset(e))}),new r(t)}},e.exports=r}()},function(e,t,n){(function(e){var n,r;/**
  * @license
  *
  * chroma.js - JavaScript library for color conversions
diff --git a/article.zh-CN.js b/article.zh-CN.js
index f8d75b50..111489fb 100644
--- a/article.zh-CN.js
+++ b/article.zh-CN.js
@@ -13,24 +13,24 @@ var r=o.registrationNameModules[n];r&&r.willDeleteListener&&r.willDeleteListener
  * @internal
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
  */
-function r(e,t){if(!a.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var o=document.createElement("div");o.setAttribute(n,"return;"),r="function"==typeof o[n]}return!r&&i&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var i,a=n(9);a.canUseDOM&&(i=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t,n){"use strict";function r(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var i=typeof e,a=typeof t;return"string"===i||"number"===i?"string"===a||"number"===a:"object"===a&&e.type===t.type&&e.key===t.key}e.exports=r},function(e,t,n){"use strict";var r=(n(5),n(11)),i=(n(2),r);e.exports=i},function(e,t,n){"use strict";function r(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 i(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=r,t.mapAsync=i},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){for(var t in e)if(e.hasOwnProperty(t))return!0;return!1}function o(e){return function(){function t(e,t){var n=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];return g.default(e,t,n,k.location,k.routes,k.params)}function n(e){var t=e.pathname,n=e.query,r=e.state;return C.createLocation(C.createPath(t,n),r,u.REPLACE)}function r(e,t){S&&S.location===e?o(S,t):b.default(x,e,function(n,r){n?t(n):r?o(s({},r,{location:e}),t):t()})}function o(e,t){var r=f.default(k,e),i=r.leaveRoutes,a=r.enterRoutes;p.runLeaveHooks(i),p.runEnterHooks(a,e,function(r,i){r?t(r):i?t(null,n(i)):y.default(e,function(n,r){n?t(n):t(null,null,k=s({},e,{components:r}))})})}function l(e){return e.__id__||(e.__id__=P++)}function c(e){return e.reduce(function(e,t){return e.push.apply(e,T[l(t)]),e},[])}function d(e,t){b.default(x,e,function(n,r){if(null==r)return void t();S=s({},r,{location:e});for(var i=c(f.default(k,S).leaveRoutes),a=void 0,o=0,l=i.length;null==a&&o<l;++o)a=i[o](e);t(a)})}function m(){if(k.routes){for(var e=c(k.routes),t=void 0,n=0,r=e.length;"string"!=typeof t&&n<r;++n)t=e[n]();return t}}function v(e,t){var n=l(e),r=T[n];if(null==r){var i=!a(T);r=T[n]=[t],i&&(N=C.listenBefore(d),C.listenBeforeUnload&&(M=C.listenBeforeUnload(m)))}else r.indexOf(t)===-1&&r.push(t);return function(){var e=T[n];if(null!=e){var r=e.filter(function(e){return e!==t});0===r.length?(delete T[n],a(T)||(N&&(N(),N=null),M&&(M(),M=null))):T[n]=r}}}function w(e){return C.listen(function(t){k.location===t?e(null,k):r(t,function(t,n,r){t?e(t):n?C.transitionTo(n):r&&e(null,r)})})}var _=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],x=_.routes,E=i(_,["routes"]),C=h.default(e)(E),k={},S=void 0,P=1,T={},N=void 0,M=void 0;return s({},C,{isActive:t,match:r,listenBeforeLeavingRoute:v,listen:w})}}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(10),u=(r(l),n(29)),c=n(192),h=r(c),d=n(268),f=r(d),p=n(267),m=n(271),g=r(m),v=n(269),y=r(v),w=n(273),b=r(w);t.default=o,e.exports=t.default},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=o,this.updater=n||a}var i=n(27),a=n(64),o=(n(101),n(28));n(1),n(2);r.prototype.isReactComponent={},r.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e?i("85"):void 0,this.updater.enqueueSetState(this,e),t&&this.updater.enqueueCallback(this,t,"setState")},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this),e&&this.updater.enqueueCallback(this,e,"forceUpdate")};e.exports=r},function(e,t,n){"use strict";function r(e,t){}var i=(n(2),{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")}});e.exports=i},function(e,t,n){!function(){"use strict";function t(e,t,n,r,i){"undefined"==typeof i&&(i=.5);var a=c.projectionratio(i,e),o=1-a,s={x:a*t.x+o*r.x,y:a*t.y+o*r.y},l=c.abcratio(i,e),u={x:n.x+(n.x-s.x)/l,y:n.y+(n.y-s.y)/l};return{A:u,B:n,C:s}}var r=Math.abs,i=Math.min,a=Math.max,o=Math.acos,s=Math.sqrt,l=Math.PI,u={x:0,y:0,z:0},c=n(66),h=n(168),d=function(e){var t=e&&e.forEach?e:[].slice.call(arguments),n=!1;if("object"==typeof t[0]){n=t.length;var i=[];t.forEach(function(e){["x","y","z"].forEach(function(t){"undefined"!=typeof e[t]&&i.push(e[t])})}),t=i}var a=!1,o=t.length;if(n){if(n>4){if(1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");a=!0}}else if(6!==o&&8!==o&&9!==o&&12!==o&&1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");var s=!a&&(9===o||12===o)||e&&e[0]&&"undefined"!=typeof e[0].z;this._3d=s;for(var l=[],u=0,h=s?3:2;u<o;u+=h){var d={x:t[u],y:t[u+1]};s&&(d.z=t[u+2]),l.push(d)}this.order=l.length-1,this.points=l;var f=["x","y"];s&&f.push("z"),this.dims=f,this.dimlen=f.length,function(e){for(var t=e.order,n=e.points,i=c.align(n,{p1:n[0],p2:n[t]}),a=0;a<i.length;a++)if(r(i[a].y)>1e-4)return void(e._linear=!1);e._linear=!0}(this),this._t1=0,this._t2=1,this.update()};d.fromSVG=function(e){var t=e.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g).map(parseFloat),n=/[cq]/.test(e);return n?(t=t.map(function(e,n){return n<2?e:e+t[n%2]}),new d(t)):new d(t)},d.quadraticFromPoints=function(e,n,r,i){if("undefined"==typeof i&&(i=.5),0===i)return new d(n,n,r);if(1===i)return new d(e,n,n);var a=t(2,e,n,r,i);return new d(e,a.A,r)},d.cubicFromPoints=function(e,n,r,i,a){"undefined"==typeof i&&(i=.5);var o=t(3,e,n,r,i);"undefined"==typeof a&&(a=c.dist(n,o.C));var s=a*(1-i)/i,l=c.dist(e,r),u=(r.x-e.x)/l,h=(r.y-e.y)/l,f=a*u,p=a*h,m=s*u,g=s*h,v={x:n.x-f,y:n.y-p},y={x:n.x+m,y:n.y+g},w=o.A,b={x:w.x+(v.x-w.x)/(1-i),y:w.y+(v.y-w.y)/(1-i)},_={x:w.x+(y.x-w.x)/i,y:w.y+(y.y-w.y)/i},x={x:e.x+(b.x-e.x)/i,y:e.y+(b.y-e.y)/i},E={x:r.x+(_.x-r.x)/(1-i),y:r.y+(_.y-r.y)/(1-i)};return new d(e,x,E,r)};var f=function(){return c};d.getUtils=f,d.prototype={getUtils:f,valueOf:function(){return this.toString()},toString:function(){return c.pointsToString(this.points)},toSVG:function(e){if(this._3d)return!1;for(var t=this.points,n=t[0].x,r=t[0].y,i=["M",n,r,2===this.order?"Q":"C"],a=1,o=t.length;a<o;a++)i.push(t[a].x),i.push(t[a].y);return i.join(" ")},update:function(){this.dpoints=[];for(var e=this.points,t=e.length,n=t-1;t>1;t--,n--){for(var r,i=[],a=0;a<n;a++)r={x:n*(e[a+1].x-e[a].x),y:n*(e[a+1].y-e[a].y)},this._3d&&(r.z=n*(e[a+1].z-e[a].z)),i.push(r);this.dpoints.push(i),e=i}this.computedirection()},computedirection:function(){var e=this.points,t=c.angle(e[0],e[this.order],e[1]);this.clockwise=t>0},length:function(){return c.length(this.derivative.bind(this))},_lut:[],getLUT:function(e){if(e=e||100,this._lut.length===e)return this._lut;this._lut=[];for(var t=0;t<=e;t++)this._lut.push(this.compute(t/e));return this._lut},on:function(e,t){t=t||5;for(var n,r=this.getLUT(),i=[],a=0,o=0;o<r.length;o++)n=r[o],c.dist(n,e)<t&&(i.push(n),a+=o/r.length);return!!i.length&&(a/=i.length)},project:function(e){var t=this.getLUT(),n=t.length-1,r=c.closest(t,e),i=r.mdist,a=r.mpos;if(0===a||a===n){var o=a/n,s=this.compute(o);return s.t=o,s.d=i,s}var l,o,u,h,d=(a-1)/n,f=(a+1)/n,p=.1/n;for(i+=1,o=d,l=o;o<f+p;o+=p)u=this.compute(o),h=c.dist(e,u),h<i&&(i=h,l=o);return u=this.compute(l),u.t=l,u.d=i,u},get:function(e){return this.compute(e)},point:function(e){return this.points[e]},compute:function(e){if(0===e)return this.points[0];if(1===e)return this.points[this.order];var t=this.points,n=1-e;if(1===this.order)return c={x:n*t[0].x+e*t[1].x,y:n*t[0].y+e*t[1].y},this._3d&&(c.z=n*t[0].z+e*t[1].z),c;if(this.order<4){var r,i,a,o=n*n,s=e*e,l=0;2===this.order?(t=[t[0],t[1],t[2],u],r=o,i=n*e*2,a=s):3===this.order&&(r=o*n,i=o*e*3,a=n*s*3,l=e*s);var c={x:r*t[0].x+i*t[1].x+a*t[2].x+l*t[3].x,y:r*t[0].y+i*t[1].y+a*t[2].y+l*t[3].y};return this._3d&&(c.z=r*t[0].z+i*t[1].z+a*t[2].z+l*t[3].z),c}for(var h=JSON.parse(JSON.stringify(this.points));h.length>1;){for(var d=0;d<h.length-1;d++)h[d]={x:h[d].x+(h[d+1].x-h[d].x)*e,y:h[d].y+(h[d+1].y-h[d].y)*e},"undefined"!=typeof h[d].z&&(h[d]=h[d].z+(h[d+1].z-h[d].z)*e);h.splice(h.length-1,1)}return h[0]},raise:function(){for(var e,t,n,r=this.points,i=[r[0]],a=r.length,e=1;e<a;e++)t=r[e],n=r[e-1],i[e]={x:(a-e)/a*t.x+e/a*n.x,y:(a-e)/a*t.y+e/a*n.y};return i[a]=r[a-1],new d(i)},derivative:function(e){var t,n,r=1-e,i=0,a=this.dpoints[0];2===this.order&&(a=[a[0],a[1],u],t=r,n=e),3===this.order&&(t=r*r,n=r*e*2,i=e*e);var o={x:t*a[0].x+n*a[1].x+i*a[2].x,y:t*a[0].y+n*a[1].y+i*a[2].y};return this._3d&&(o.z=t*a[0].z+n*a[1].z+i*a[2].z),o},inflections:function(){return c.inflections(this.points)},normal:function(e){return this._3d?this.__normal3(e):this.__normal2(e)},__normal2:function(e){var t=this.derivative(e),n=s(t.x*t.x+t.y*t.y);return{x:-t.y/n,y:t.x/n}},__normal3:function(e){var t=this.derivative(e),n=this.derivative(e+.01),r=s(t.x*t.x+t.y*t.y+t.z*t.z),i=s(n.x*n.x+n.y*n.y+n.z*n.z);t.x/=r,t.y/=r,t.z/=r,n.x/=i,n.y/=i,n.z/=i;var a={x:n.y*t.z-n.z*t.y,y:n.z*t.x-n.x*t.z,z:n.x*t.y-n.y*t.x},o=s(a.x*a.x+a.y*a.y+a.z*a.z);a.x/=o,a.y/=o,a.z/=o;var l=[a.x*a.x,a.x*a.y-a.z,a.x*a.z+a.y,a.x*a.y+a.z,a.y*a.y,a.y*a.z-a.x,a.x*a.z-a.y,a.y*a.z+a.x,a.z*a.z],u={x:l[0]*t.x+l[1]*t.y+l[2]*t.z,y:l[3]*t.x+l[4]*t.y+l[5]*t.z,z:l[6]*t.x+l[7]*t.y+l[8]*t.z};return u},hull:function(e){var t,n=this.points,r=[],i=[],a=0,o=0,s=0;for(i[a++]=n[0],i[a++]=n[1],i[a++]=n[2],3===this.order&&(i[a++]=n[3]);n.length>1;){for(r=[],o=0,s=n.length-1;o<s;o++)t=c.lerp(e,n[o],n[o+1]),i[a++]=t,r.push(t);n=r}return i},split:function(e,t){if(0===e&&t)return this.split(t).left;if(1===t)return this.split(e).right;var n=this.hull(e),r={left:new d(2===this.order?[n[0],n[3],n[5]]:[n[0],n[4],n[7],n[9]]),right:new d(2===this.order?[n[5],n[4],n[2]]:[n[9],n[8],n[6],n[3]]),span:n};if(r.left._t1=c.map(0,0,1,this._t1,this._t2),r.left._t2=c.map(e,0,1,this._t1,this._t2),r.right._t1=c.map(e,0,1,this._t1,this._t2),r.right._t2=c.map(1,0,1,this._t1,this._t2),!t)return r;t=c.map(t,e,1,0,1);var i=r.right.split(t);return i.left},extrema:function(){var e,t,n=this.dims,r={},i=[];return n.forEach(function(n){t=function(e){return e[n]},e=this.dpoints[0].map(t),r[n]=c.droots(e),3===this.order&&(e=this.dpoints[1].map(t),r[n]=r[n].concat(c.droots(e))),r[n]=r[n].filter(function(e){return e>=0&&e<=1}),i=i.concat(r[n].sort())}.bind(this)),i=i.sort().filter(function(e,t){return i.indexOf(e)===t}),r.values=i,r},bbox:function(){var e=this.extrema(),t={};return this.dims.forEach(function(n){t[n]=c.getminmax(this,n,e[n])}.bind(this)),t},overlaps:function(e){var t=this.bbox(),n=e.bbox();return c.bboxoverlap(t,n)},offset:function(e,t){if("undefined"!=typeof t){var n=this.get(e),r=this.normal(e),i={c:n,n:r,x:n.x+r.x*t,y:n.y+r.y*t};return this._3d&&(i.z=n.z+r.z*t),i}if(this._linear){var a=this.normal(0),o=this.points.map(function(t){var n={x:t.x+e*a.x,y:t.y+e*a.y};return t.z&&r.z&&(n.z=t.z+e*a.z),n});return[new d(o)]}var s=this.reduce();return s.map(function(t){return t.scale(e)})},simple:function(){if(3===this.order){var e=c.angle(this.points[0],this.points[3],this.points[1]),t=c.angle(this.points[0],this.points[3],this.points[2]);if(e>0&&t<0||e<0&&t>0)return!1}var n=this.normal(0),i=this.normal(1),a=n.x*i.x+n.y*i.y;this._3d&&(a+=n.z*i.z);var s=r(o(a));return s<l/3},reduce:function(){var e,t,n=0,i=0,a=.01,o=[],s=[],l=this.extrema().values;for(l.indexOf(0)===-1&&(l=[0].concat(l)),l.indexOf(1)===-1&&l.push(1),n=l[0],e=1;e<l.length;e++)i=l[e],t=this.split(n,i),t._t1=n,t._t2=i,o.push(t),n=i;return o.forEach(function(e){for(n=0,i=0;i<=1;)for(i=n+a;i<=1+a;i+=a)if(t=e.split(n,i),!t.simple()){if(i-=a,r(n-i)<a)return[];t=e.split(n,i),t._t1=c.map(n,0,1,e._t1,e._t2),t._t2=c.map(i,0,1,e._t1,e._t2),s.push(t),n=i;break}n<1&&(t=e.split(n,1),t._t1=c.map(n,0,1,e._t1,e._t2),t._t2=e._t2,s.push(t))}),s},scale:function(e){var t=this.order,n=!1;if("function"==typeof e&&(n=e),n&&2===t)return this.raise().scale(n);var r=this.clockwise,i=n?n(0):e,a=n?n(1):e,o=[this.offset(0,10),this.offset(1,10)],l=c.lli4(o[0],o[0].c,o[1],o[1].c);if(!l)throw new Error("cannot scale this curve. Try reducing it first.");var u=this.points,h=[];return[0,1].forEach(function(e){var n=h[e*t]=c.copy(u[e*t]);n.x+=(e?a:i)*o[e].n.x,n.y+=(e?a:i)*o[e].n.y}.bind(this)),n?([0,1].forEach(function(i){if(2!==this.order||!i){var a=u[i+1],o={x:a.x-l.x,y:a.y-l.y},c=n?n((i+1)/t):e;n&&!r&&(c=-c);var d=s(o.x*o.x+o.y*o.y);o.x/=d,o.y/=d,h[i+1]={x:a.x+c*o.x,y:a.y+c*o.y}}}.bind(this)),new d(h)):([0,1].forEach(function(e){if(2!==this.order||!e){var n=h[e*t],r=this.derivative(e),i={x:n.x+r.x,y:n.y+r.y};h[e+1]=c.lli4(n,i,l,u[e+1])}}.bind(this)),new d(h))},outline:function(e,t,n,r){function i(e,t,n,r,i){return function(a){var o=r/n,s=(r+i)/n,l=t-e;return c.map(a,0,1,e+o*l,e+s*l)}}t="undefined"==typeof t?e:t;var a,o=this.reduce(),s=o.length,l=[],u=[],d=0,f=this.length(),p="undefined"!=typeof n&&"undefined"!=typeof r;o.forEach(function(a){x=a.length(),p?(l.push(a.scale(i(e,n,f,d,x))),u.push(a.scale(i(-t,-r,f,d,x)))):(l.push(a.scale(e)),u.push(a.scale(-t))),d+=x}),u=u.map(function(e){return a=e.points,a[3]?e.points=[a[3],a[2],a[1],a[0]]:e.points=[a[2],a[1],a[0]],e}).reverse();var m=l[0].points[0],g=l[s-1].points[l[s-1].points.length-1],v=u[s-1].points[u[s-1].points.length-1],y=u[0].points[0],w=c.makeline(v,m),b=c.makeline(g,y),_=[w].concat(l).concat([b]).concat(u),x=_.length;return new h(_)},outlineshapes:function(e,t,n){t=t||e;for(var r=this.outline(e,t).curves,i=[],a=1,o=r.length;a<o/2;a++){var s=c.makeshape(r[a],r[o-a],n);s.startcap.virtual=a>1,s.endcap.virtual=a<o/2-1,i.push(s)}return i},intersects:function(e,t){return e?e.p1&&e.p2?this.lineIntersects(e):(e instanceof d&&(e=e.reduce()),this.curveintersects(this.reduce(),e,t)):this.selfintersects(t)},lineIntersects:function(e){var t=i(e.p1.x,e.p2.x),n=i(e.p1.y,e.p2.y),r=a(e.p1.x,e.p2.x),o=a(e.p1.y,e.p2.y),s=this;return c.roots(this.points,e).filter(function(e){var i=s.get(e);return c.between(i.x,t,r)&&c.between(i.y,n,o)})},selfintersects:function(e){var t,n,r,i,a=this.reduce(),o=a.length-2,s=[];for(t=0;t<o;t++)r=a.slice(t,t+1),i=a.slice(t+2),n=this.curveintersects(r,i,e),s=s.concat(n);return s},curveintersects:function(e,t,n){var r=[];e.forEach(function(e){t.forEach(function(t){e.overlaps(t)&&r.push({left:e,right:t})})});var i=[];return r.forEach(function(e){var t=c.pairiteration(e.left,e.right,n);t.length>0&&(i=i.concat(t))}),i},arcs:function(e){e=e||.5;var t=[];return this._iterate(e,t)},_error:function(e,t,n,i){var a=(i-n)/4,o=this.get(n+a),s=this.get(i-a),l=c.dist(e,t),u=c.dist(e,o),h=c.dist(e,s);return r(u-l)+r(h-l)},_iterate:function(e,t){var n,r=0,i=1;do{n=0,i=1;var a,o,s,l,u,h=this.get(r),d=!1,f=!1,p=i,m=1,g=0;do{f=d,l=s,p=(r+i)/2,g++,a=this.get(p),o=this.get(i),s=c.getccenter(h,a,o),s.interval={start:r,end:i};var v=this._error(s,h,r,i);if(d=v<=e,u=f&&!d,u||(m=i),d){if(i>=1){m=1,l=s;break}i+=(i-r)/2}else i=p}while(!u&&n++<100);if(n>=100){console.error("arc abstraction somehow failed...");break}l=l?l:s,t.push(l),r=m}while(i<1);return t}},e.exports=d}()},function(e,t,n){!function(){"use strict";var t=Math.abs,r=Math.cos,i=Math.sin,a=Math.acos,o=Math.atan2,s=Math.sqrt,l=Math.pow,u=function(e){return e<0?-l(-e,1/3):l(e,1/3)},c=Math.PI,h=2*c,d=c/2,f=1e-6,p={Tvalues:[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213],Cvalues:[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872],arcfn:function(e,t){var n=t(e),r=n.x*n.x+n.y*n.y;return"undefined"!=typeof n.z&&(r+=n.z*n.z),s(r)},between:function(e,t,n){return t<=e&&e<=n||p.approximately(e,t)||p.approximately(e,n)},approximately:function(e,n,r){return t(e-n)<=(r||f)},length:function(e){var t,n,r=.5,i=0,a=p.Tvalues.length;for(t=0;t<a;t++)n=r*p.Tvalues[t]+r,i+=p.Cvalues[t]*p.arcfn(n,e);return r*i},map:function(e,t,n,r,i){var a=n-t,o=i-r,s=e-t,l=s/a;return r+o*l},lerp:function(e,t,n){var r={x:t.x+e*(n.x-t.x),y:t.y+e*(n.y-t.y)};return t.z&&n.z&&(r.z=t.z+e*(n.z-t.z)),r},pointToString:function(e){var t=e.x+"/"+e.y;return"undefined"!=typeof e.z&&(t+="/"+e.z),t},pointsToString:function(e){return"["+e.map(p.pointToString).join(", ")+"]"},copy:function(e){return JSON.parse(JSON.stringify(e))},angle:function(e,t,n){var r,i=t.x-e.x,a=t.y-e.y,l=n.x-e.x,u=n.y-e.y,c=i*u-a*l,h=s(i*i+a*a),d=s(l*l+u*u);return i/=h,a/=h,l/=d,u/=d,r=i*l+a*u,o(c,r)},round:function(e,t){var n=""+e,r=n.indexOf(".");return parseFloat(n.substring(0,r+1+t))},dist:function(e,t){var n=e.x-t.x,r=e.y-t.y;return s(n*n+r*r)},closest:function(e,t){var n,r,i=l(2,63);return e.forEach(function(e,a){r=p.dist(t,e),r<i&&(i=r,n=a)}),{mdist:i,mpos:n}},abcratio:function(e,n){if(2!==n&&3!==n)return!1;if("undefined"==typeof e)e=.5;else if(0===e||1===e)return e;var r=l(e,n)+l(1-e,n),i=r-1;return t(i/r)},projectionratio:function(e,t){if(2!==t&&3!==t)return!1;if("undefined"==typeof e)e=.5;else if(0===e||1===e)return e;var n=l(1-e,t),r=l(e,t)+n;return n/r},lli8:function(e,t,n,r,i,a,o,s){var l=(e*r-t*n)*(i-o)-(e-n)*(i*s-a*o),u=(e*r-t*n)*(a-s)-(t-r)*(i*s-a*o),c=(e-n)*(a-s)-(t-r)*(i-o);return 0!=c&&{x:l/c,y:u/c}},lli4:function(e,t,n,r){var i=e.x,a=e.y,o=t.x,s=t.y,l=n.x,u=n.y,c=r.x,h=r.y;return p.lli8(i,a,o,s,l,u,c,h)},lli:function(e,t){return p.lli4(e,e.c,t,t.c)},makeline:function(e,t){var r=n(65),i=e.x,a=e.y,o=t.x,s=t.y,l=(o-i)/3,u=(s-a)/3;return new r(i,a,i+l,a+u,i+2*l,a+2*u,o,s)},findbbox:function(e){var t=99999999,n=t,r=-t,i=r;return e.forEach(function(e){var a=e.bbox();t>a.x.min&&(t=a.x.min),n>a.y.min&&(n=a.y.min),r<a.x.max&&(r=a.x.max),i<a.y.max&&(i=a.y.max)}),{x:{min:t,mid:(t+r)/2,max:r,size:r-t},y:{min:n,mid:(n+i)/2,max:i,size:i-n}}},shapeintersections:function(e,t,n,r,i){if(!p.bboxoverlap(t,r))return[];var a=[],o=[e.startcap,e.forward,e.back,e.endcap],s=[n.startcap,n.forward,n.back,n.endcap];return o.forEach(function(t){t.virtual||s.forEach(function(r){if(!r.virtual){var o=t.intersects(r,i);o.length>0&&(o.c1=t,o.c2=r,o.s1=e,o.s2=n,a.push(o))}})}),a},makeshape:function(e,t,n){var r=t.points.length,i=e.points.length,a=p.makeline(t.points[r-1],e.points[0]),o=p.makeline(e.points[i-1],t.points[0]),s={startcap:a,forward:e,back:t,endcap:o,bbox:p.findbbox([a,e,t,o])},l=p;return s.intersections=function(e){return l.shapeintersections(s,s.bbox,e,e.bbox,n)},s},getminmax:function(e,t,n){if(!n)return{min:0,max:0};var r,i,a=0x10000000000000000,o=-a;n.indexOf(0)===-1&&(n=[0].concat(n)),n.indexOf(1)===-1&&n.push(1);for(var s=0,l=n.length;s<l;s++)r=n[s],i=e.get(r),i[t]<a&&(a=i[t]),i[t]>o&&(o=i[t]);return{min:a,mid:(a+o)/2,max:o,size:o-a}},align:function(e,t){var n=t.p1.x,a=t.p1.y,s=-o(t.p2.y-a,t.p2.x-n),l=function(e){return{x:(e.x-n)*r(s)-(e.y-a)*i(s),y:(e.x-n)*i(s)+(e.y-a)*r(s)}};return e.map(l)},roots:function(e,t){t=t||{p1:{x:0,y:0},p2:{x:1,y:0}};var n=e.length-1,i=p.align(e,t),o=function(e){return 0<=e&&e<=1};if(2===n){var l=i[0].y,c=i[1].y,d=i[2].y,f=l-2*c+d;if(0!==f){var m=-s(c*c-l*d),g=-l+c,v=-(m+g)/f,y=-(-m+g)/f;return[v,y].filter(o)}return c!==d&&0===f?[(2*c-d)/2*(c-d)].filter(o):[]}var w,v,b,_,x,E=i[0].y,C=i[1].y,k=i[2].y,S=i[3].y,f=-E+3*C-3*k+S,l=(3*E-6*C+3*k)/f,c=(-3*E+3*C)/f,d=E/f,i=(3*c-l*l)/3,P=i/3,T=(2*l*l*l-9*l*c+27*d)/27,N=T/2,M=N*N+P*P*P;if(M<0){var I=-i/3,L=I*I*I,A=s(L),O=-T/(2*A),B=O<-1?-1:O>1?1:O,z=a(B),D=u(A),R=2*D;return b=R*r(z/3)-l/3,_=R*r((z+h)/3)-l/3,x=R*r((z+2*h)/3)-l/3,[b,_,x].filter(o)}if(0===M)return w=N<0?u(-N):-u(N),b=2*w-l/3,_=-w-l/3,[b,_].filter(o);var j=s(M);return w=u(-N+j),v=u(N+j),[w-v-l/3].filter(o)},droots:function(e){if(3===e.length){var t=e[0],n=e[1],r=e[2],i=t-2*n+r;if(0!==i){var a=-s(n*n-t*r),o=-t+n,l=-(a+o)/i,u=-(-a+o)/i;return[l,u]}return n!==r&&0===i?[(2*n-r)/(2*(n-r))]:[]}if(2===e.length){var t=e[0],n=e[1];return t!==n?[t/(t-n)]:[]}},inflections:function(e){if(e.length<4)return[];var t=p.align(e,{p1:e[0],p2:e.slice(-1)[0]}),n=t[2].x*t[1].y,r=t[3].x*t[1].y,i=t[1].x*t[2].y,a=t[3].x*t[2].y,o=18*(-3*n+2*r+3*i-a),s=18*(3*n-r-3*i),l=18*(i-n);if(p.approximately(o,0))return[];var u=s*s-4*o*l,c=Math.sqrt(u),a=2*o;return p.approximately(a,0)?[]:[(c-s)/a,-(s+c)/a].filter(function(e){return 0<=e&&e<=1})},bboxoverlap:function(e,n){var r,i,a,o,s,l=["x","y"],u=l.length;for(r=0;r<u;r++)if(i=l[r],a=e[i].mid,o=n[i].mid,s=(e[i].size+n[i].size)/2,t(a-o)>=s)return!1;return!0},expandbox:function(e,t){t.x.min<e.x.min&&(e.x.min=t.x.min),t.y.min<e.y.min&&(e.y.min=t.y.min),t.z&&t.z.min<e.z.min&&(e.z.min=t.z.min),t.x.max>e.x.max&&(e.x.max=t.x.max),t.y.max>e.y.max&&(e.y.max=t.y.max),t.z&&t.z.max>e.z.max&&(e.z.max=t.z.max),e.x.mid=(e.x.min+e.x.max)/2,e.y.mid=(e.y.min+e.y.max)/2,e.z&&(e.z.mid=(e.z.min+e.z.max)/2),e.x.size=e.x.max-e.x.min,e.y.size=e.y.max-e.y.min,e.z&&(e.z.size=e.z.max-e.z.min)},pairiteration:function(e,t,n){var r=e.bbox(),i=t.bbox(),a=1e5,o=n||.5;if(r.x.size+r.y.size<o&&i.x.size+i.y.size<o)return[(a*(e._t1+e._t2)/2|0)/a+"/"+(a*(t._t1+t._t2)/2|0)/a];var s=e.split(.5),l=t.split(.5),u=[{left:s.left,right:l.left},{left:s.left,right:l.right},{left:s.right,right:l.right},{left:s.right,right:l.left}];u=u.filter(function(e){return p.bboxoverlap(e.left.bbox(),e.right.bbox())});var c=[];return 0===u.length?c:(u.forEach(function(e){c=c.concat(p.pairiteration(e.left,e.right,o))}),c=c.filter(function(e,t){return c.indexOf(e)===t}))},getccenter:function(e,t,n){var a,s=t.x-e.x,l=t.y-e.y,u=n.x-t.x,c=n.y-t.y,f=s*r(d)-l*i(d),m=s*i(d)+l*r(d),g=u*r(d)-c*i(d),v=u*i(d)+c*r(d),y=(e.x+t.x)/2,w=(e.y+t.y)/2,b=(t.x+n.x)/2,_=(t.y+n.y)/2,x=y+f,E=w+m,C=b+g,k=_+v,S=p.lli8(y,w,x,E,b,_,C,k),P=p.dist(S,e),T=o(e.y-S.y,e.x-S.x),N=o(t.y-S.y,t.x-S.x),M=o(n.y-S.y,n.x-S.x);return T<M?((T>N||N>M)&&(T+=h),T>M&&(a=M,M=T,T=a)):M<N&&N<T?(a=M,M=T,T=a):M+=h,S.s=T,S.e=M,S.r=P,S}};e.exports=p}()},function(e,t,n){"use strict";var r=n(11),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,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};e.exports=i},function(e,t,n){"use strict";function r(e){try{e.focus()}catch(e){}}e.exports=r},function(e,t,n){"use strict";function r(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}e.exports=r},function(e,t,n){"use strict";function r(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent("on"+t,n)}function i(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent("on"+t,n)}function a(){return window.location.href.split("#")[1]||""}function o(e){window.location.replace(window.location.pathname+window.location.search+"#"+e)}function s(){return window.location.pathname+window.location.search+window.location.hash}function l(e){e&&window.history.go(e)}function u(e,t){t(window.confirm(e))}function c(){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 h(){var e=navigator.userAgent;return e.indexOf("Firefox")===-1}t.__esModule=!0,t.addEventListener=r,t.removeEventListener=i,t.getHashPath=a,t.replaceHashPath=o,t.getWindowPath=s,t.go=l,t.getUserConfirmation=u,t.supportsHistory=c,t.supportsGoWithoutReloadUsingHash=h},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 D.push(e),function(){D=D.filter(function(t){return t!==e})}}function t(){return q&&q.action===h.POP?R.indexOf(q.key):F?R.indexOf(F.key):-1}function n(e){var n=t();F=e,F.action===h.PUSH?R=[].concat(R.slice(0,n+1),[F.key]):F.action===h.REPLACE&&(R[n]=F.key),j.forEach(function(e){e(F)})}function r(e){if(j.push(e),F)e(F);else{var t=I();R=[t.key],n(t)}return function(){j=j.filter(function(t){return t!==e})}}function o(e,t){c.loopAsync(D.length,function(t,n,r){m.default(D[t],e,function(e){null!=e?r(e):n()})},function(e){z&&"string"==typeof e?z(e,function(e){t(e!==!1)}):t(e!==!1)})}function l(e){F&&a(F,e)||(q=e,o(e,function(t){if(q===e)if(t){if(e.action===h.PUSH){var r=_(F),i=_(e);i===r&&(e.action=h.REPLACE)}L(e)!==!1&&n(e)}else if(F&&e.action===h.POP){var a=R.indexOf(F.key),o=R.indexOf(e.key);a!==-1&&o!==-1&&O(a-o)}}))}function u(e){l(E(e,h.PUSH,y()))}function d(e){l(E(e,h.REPLACE,y()))}function p(){O(-1)}function g(){O(1)}function y(){return i(B)}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()),f.default(e,t,n)}function C(e){F?(k(F,e),n(F)):k(I(),e)}function k(e,t){e.state=s({},e.state,t),A(e.key,e.state)}function S(e){D.indexOf(e)===-1&&D.push(e)}function P(e){D=D.filter(function(t){return t!==e})}function T(e,t){"string"==typeof t&&(t=v.default(t)),u(s({state:e},t))}function N(e,t){"string"==typeof t&&(t=v.default(t)),d(s({state:e},t))}var M=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],I=M.getCurrentLocation,L=M.finishTransition,A=M.saveState,O=M.go,B=M.keyLength,z=M.getUserConfirmation;"number"!=typeof B&&(B=b);var D=[],R=[],j=[],F=void 0,q=void 0;return{listenBefore:e,listen:r,transitionTo:l,push:u,replace:d,go:O,goBack:p,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(S,"registerTransitionHook is deprecated; use listenBefore instead"),unregisterTransitionHook:w.default(P,"unregisterTransitionHook is deprecated; use the callback returned from listenBefore instead"),pushState:w.default(T,"pushState is deprecated; use push instead"),replaceState:w.default(N,"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(170),u=r(l),c=n(185),h=n(29),d=n(189),f=r(d),p=n(44),m=r(p),g=n(21),v=r(g),y=n(43),w=r(y),b=6;t.default=o,e.exports=t.default},function(e,t,n){"use strict";function r(e){var t=e.match(/^https?:\/\/[^\/]*/);return null==t?e:e.substring(t[0].length)}t.__esModule=!0,t.default=r,e.exports=t.default},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&&f&&(m=!1,f.length?p=f.concat(p):g=-1,p.length&&s())}function s(){if(!m){var e=i(o);m=!0;for(var t=p.length;t;){for(f=p,p=[];++g<t;)f&&f[g].run();g=-1,t=p.length}f=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 f,p=[],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];p.push(new l(e,t)),1!==p.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,n){"use strict";function r(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}var i={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},a=["Webkit","ms","Moz","O"];Object.keys(i).forEach(function(e){a.forEach(function(t){i[r(t,e)]=i[e]})});var o={background:{backgroundAttachment:!0,backgroundColor:!0,backgroundImage:!0,backgroundPositionX:!0,backgroundPositionY:!0,backgroundRepeat:!0},backgroundPosition:{backgroundPositionX:!0,backgroundPositionY:!0},border:{borderWidth:!0,borderStyle:!0,borderColor:!0},borderBottom:{borderBottomWidth:!0,borderBottomStyle:!0,borderBottomColor:!0},borderLeft:{borderLeftWidth:!0,borderLeftStyle:!0,borderLeftColor:!0},borderRight:{borderRightWidth:!0,borderRightStyle:!0,borderRightColor:!0},borderTop:{borderTopWidth:!0,borderTopStyle:!0,borderTopColor:!0},font:{fontStyle:!0,fontVariant:!0,fontWeight:!0,fontSize:!0,lineHeight:!0,fontFamily:!0},outline:{outlineWidth:!0,outlineStyle:!0,outlineColor:!0}},s={isUnitlessNumber:i,shorthandPropertyExpansions:o};e.exports=s},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(3),a=n(19),o=(n(1),function(){function e(t){r(this,e),this._callbacks=null,this._contexts=null,this._arg=t}return e.prototype.enqueue=function(e,t){this._callbacks=this._callbacks||[],this._callbacks.push(e),this._contexts=this._contexts||[],this._contexts.push(t)},e.prototype.notifyAll=function(){var e=this._callbacks,t=this._contexts,n=this._arg;if(e&&t){e.length!==t.length?i("24"):void 0,this._callbacks=null,this._contexts=null;for(var r=0;r<e.length;r++)e[r].call(t[r],n);e.length=0,t.length=0}},e.prototype.checkpoint=function(){return this._callbacks?this._callbacks.length:0},e.prototype.rollback=function(e){this._callbacks&&this._contexts&&(this._callbacks.length=e,this._contexts.length=e)},e.prototype.reset=function(){this._callbacks=null,this._contexts=null},e.prototype.destructor=function(){this.reset()},e}());e.exports=a.addPoolingTo(o)},function(e,t,n){
-"use strict";function r(e){return!!u.hasOwnProperty(e)||!l.hasOwnProperty(e)&&(s.test(e)?(u[e]=!0,!0):(l[e]=!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(23),o=(n(7),n(13),n(257)),s=(n(2),new RegExp("^["+a.ATTRIBUTE_NAME_START_CHAR+"]["+a.ATTRIBUTE_NAME_CHAR+"]*$")),l={},u={},c={createMarkupForID:function(e){return a.ID_ATTRIBUTE_NAME+"="+o(e)},setAttributeForID:function(e,t){e.setAttribute(a.ID_ATTRIBUTE_NAME,t)},createMarkupForRoot:function(){return a.ROOT_ATTRIBUTE_NAME+'=""'},setAttributeForRoot:function(e){e.setAttribute(a.ROOT_ATTRIBUTE_NAME,"")},createMarkupForProperty:function(e,t){var n=a.properties.hasOwnProperty(e)?a.properties[e]:null;if(n){if(i(n,t))return"";var r=n.attributeName;return n.hasBooleanValue||n.hasOverloadedBooleanValue&&t===!0?r+'=""':r+"="+o(t)}return a.isCustomAttribute(e)?null==t?"":e+"="+o(t):null},createMarkupForCustomAttribute:function(e,t){return r(e)&&null!=t?e+"="+o(t):""},setValueForProperty:function(e,t,n){var r=a.properties.hasOwnProperty(t)?a.properties[t]:null;if(r){var o=r.mutationMethod;if(o)o(e,n);else{if(i(r,n))return void this.deleteValueForProperty(e,t);if(r.mustUseProperty)e[r.propertyName]=n;else{var s=r.attributeName,l=r.attributeNamespace;l?e.setAttributeNS(l,s,""+n):r.hasBooleanValue||r.hasOverloadedBooleanValue&&n===!0?e.setAttribute(s,""):e.setAttribute(s,""+n)}}}else if(a.isCustomAttribute(t))return void c.setValueForAttribute(e,t,n)},setValueForAttribute:function(e,t,n){if(r(t)){null==n?e.removeAttribute(t):e.setAttribute(t,""+n)}},deleteValueForAttribute:function(e,t){e.removeAttribute(t)},deleteValueForProperty:function(e,t){var n=a.properties.hasOwnProperty(t)?a.properties[t]:null;if(n){var r=n.mutationMethod;if(r)r(e,void 0);else if(n.mustUseProperty){var i=n.propertyName;n.hasBooleanValue?e[i]=!1:e[i]=""}else e.removeAttribute(n.attributeName)}else a.isCustomAttribute(t)&&e.removeAttribute(t)}};e.exports=c},function(e,t,n){"use strict";var r={hasCachedChildNodes:1};e.exports=r},function(e,t,n){"use strict";function r(){if(this._rootNodeID&&this._wrapperState.pendingUpdate){this._wrapperState.pendingUpdate=!1;var e=this._currentElement.props,t=s.getValue(e);null!=t&&i(this,Boolean(e.multiple),t)}}function i(e,t,n){var r,i,a=l.getNodeFromInstance(e).options;if(t){for(r={},i=0;i<n.length;i++)r[""+n[i]]=!0;for(i=0;i<a.length;i++){var o=r.hasOwnProperty(a[i].value);a[i].selected!==o&&(a[i].selected=o)}}else{for(r=""+n,i=0;i<a.length;i++)if(a[i].value===r)return void(a[i].selected=!0);a.length&&(a[0].selected=!0)}}function a(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);return this._rootNodeID&&(this._wrapperState.pendingUpdate=!0),u.asap(r,this),n}var o=n(5),s=n(50),l=n(7),u=n(14),c=(n(2),!1),h={getHostProps:function(e,t){return o({},t,{onChange:e._wrapperState.onChange,value:void 0})},mountWrapper:function(e,t){var n=s.getValue(t);e._wrapperState={pendingUpdate:!1,initialValue:null!=n?n:t.defaultValue,listeners:null,onChange:a.bind(e),wasMultiple:Boolean(t.multiple)},void 0===t.value||void 0===t.defaultValue||c||(c=!0)},getSelectValueContext:function(e){return e._wrapperState.initialValue},postUpdateWrapper:function(e){var t=e._currentElement.props;e._wrapperState.initialValue=void 0;var n=e._wrapperState.wasMultiple;e._wrapperState.wasMultiple=Boolean(t.multiple);var r=s.getValue(t);null!=r?(e._wrapperState.pendingUpdate=!1,i(e,Boolean(t.multiple),r)):n!==Boolean(t.multiple)&&(null!=t.defaultValue?i(e,Boolean(t.multiple),t.defaultValue):i(e,Boolean(t.multiple),t.multiple?[]:""))}};e.exports=h},function(e,t,n){"use strict";var r,i={injectEmptyComponentFactory:function(e){r=e}},a={create:function(e){return r(e)}};a.injection=i,e.exports=a},function(e,t,n){"use strict";var r={logTopLevelRenders:!1};e.exports=r},function(e,t,n){"use strict";function r(e){return s?void 0:o("111",e.type),new s(e)}function i(e){return new l(e)}function a(e){return e instanceof l}var o=n(3),s=(n(1),null),l=null,u={injectGenericComponentClass:function(e){s=e},injectTextComponentClass:function(e){l=e}},c={createInternalComponent:r,createInstanceForText:i,isTextComponent:a,injection:u};e.exports=c},function(e,t,n){"use strict";function r(e){return a(document.documentElement,e)}var i=n(216),a=n(175),o=n(68),s=n(69),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(void 0===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){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===O?e.documentElement:e.firstChild:null}function a(e){return e.getAttribute&&e.getAttribute(I)||""}function o(e,t,n,r,i){var a;if(_.logTopLevelRenders){var o=e._currentElement.props.child,s=o.type;a="React mount: "+("string"==typeof s?s:s.displayName||s.name),console.time(a)}var l=C.mountComponent(e,n,null,w(e,t),i,0);a&&console.timeEnd(a),e._renderedComponent._topLevelWrapper=e,j._mountImageIntoNode(l,t,e,r,n)}function s(e,t,n,r){var i=S.ReactReconcileTransaction.getPooled(!n&&b.useCreateElement);i.perform(o,null,e,t,i,n,r),S.ReactReconcileTransaction.release(i)}function l(e,t,n){for(C.unmountComponent(e,n),t.nodeType===O&&(t=t.documentElement);t.lastChild;)t.removeChild(t.lastChild)}function u(e){var t=i(e);if(t){var n=y.getInstanceFromNode(t);return!(!n||!n._hostParent)}}function c(e){return!(!e||e.nodeType!==A&&e.nodeType!==O&&e.nodeType!==B)}function h(e){var t=i(e),n=t&&y.getInstanceFromNode(t);return n&&!n._hostParent?n:null}function d(e){var t=h(e);return t?t._hostContainerInfo._topLevelWrapper:null}var f=n(3),p=n(22),m=n(23),g=n(25),v=n(35),y=(n(17),n(7)),w=n(210),b=n(212),_=n(80),x=n(32),E=(n(13),n(226)),C=n(24),k=n(53),S=n(14),P=n(28),T=n(90),N=(n(1),n(39)),M=n(59),I=(n(2),m.ID_ATTRIBUTE_NAME),L=m.ROOT_ATTRIBUTE_NAME,A=1,O=9,B=11,z={},D=1,R=function(){this.rootID=D++};R.prototype.isReactComponent={},R.prototype.render=function(){return this.props.child},R.isReactTopLevelWrapper=!0;var j={TopLevelWrapper:R,_instancesByReactRootID:z,scrollMonitor:function(e,t){t()},_updateRootComponent:function(e,t,n,r,i){return j.scrollMonitor(r,function(){k.enqueueElementInternal(e,t,n),i&&k.enqueueCallbackInternal(e,i)}),e},_renderNewRootComponent:function(e,t,n,r){c(t)?void 0:f("37"),v.ensureScrollValueMonitoring();var i=T(e,!1);S.batchedUpdates(s,i,t,n,r);var a=i._instance.rootID;return z[a]=i,i},renderSubtreeIntoContainer:function(e,t,n,r){return null!=e&&x.has(e)?void 0:f("38"),j._renderSubtreeIntoContainer(e,t,n,r)},_renderSubtreeIntoContainer:function(e,t,n,r){k.validateCallback(r,"ReactDOM.render"),g.isValidElement(t)?void 0:f("39","string"==typeof t?" Instead of passing a string like 'div', pass React.createElement('div') or <div />.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or <Foo />.":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var o,s=g.createElement(R,{child:t});if(e){var l=x.get(e);o=l._processChildContext(l._context)}else o=P;var c=d(n);if(c){var h=c._currentElement,p=h.props.child;if(M(p,t)){var m=c._renderedComponent.getPublicInstance(),v=r&&function(){r.call(m)};return j._updateRootComponent(c,s,o,n,v),m}j.unmountComponentAtNode(n)}var y=i(n),w=y&&!!a(y),b=u(n),_=w&&!c&&!b,E=j._renderNewRootComponent(s,n,_,o)._renderedComponent.getPublicInstance();return r&&r.call(E),E},render:function(e,t,n){return j._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){c(e)?void 0:f("40");var t=d(e);if(!t){u(e),1===e.nodeType&&e.hasAttribute(L);return!1}return delete z[t._instance.rootID],S.batchedUpdates(l,t,e,!1),!0},_mountImageIntoNode:function(e,t,n,a,o){if(c(t)?void 0:f("41"),a){var s=i(t);if(E.canReuseMarkup(e,s))return void y.precacheNode(n,s);var l=s.getAttribute(E.CHECKSUM_ATTR_NAME);s.removeAttribute(E.CHECKSUM_ATTR_NAME);var u=s.outerHTML;s.setAttribute(E.CHECKSUM_ATTR_NAME,l);var h=e,d=r(h,u),m=" (client) "+h.substring(d-20,d+20)+"\n (server) "+u.substring(d-20,d+20);t.nodeType===O?f("42",m):void 0}if(t.nodeType===O?f("43"):void 0,o.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);p.insertTreeBefore(t,e,null)}else N(t,e),y.precacheNode(n,t.firstChild)}};e.exports=j},function(e,t,n){"use strict";var r=n(3),i=n(25),a=(n(1),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?a.EMPTY:i.isValidElement(e)?"function"==typeof e.type?a.COMPOSITE:a.HOST:void r("26",e)}});e.exports=a},function(e,t,n){"use strict";var r={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){r.currentScrollLeft=e.x,r.currentScrollTop=e.y}};e.exports=r},function(e,t,n){"use strict";function r(e,t){return null==t?i("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var i=n(3);n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=r},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===i.COMPOSITE;)e=e._renderedComponent;return t===i.HOST?e._renderedComponent:t===i.EMPTY?null:void 0}var i=n(84);e.exports=r},function(e,t,n){"use strict";function r(){return!a&&i.canUseDOM&&(a="textContent"in document.documentElement?"textContent":"innerText"),a}var i=n(9),a=null;e.exports=r},function(e,t,n){"use strict";function r(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function i(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function a(e,t){var n;if(null===e||e===!1)n=u.create(a);else if("object"==typeof e){var s=e,l=s.type;if("function"!=typeof l&&"string"!=typeof l){var d="";d+=r(s._owner),o("130",null==l?l:typeof l,d)}"string"==typeof s.type?n=c.createInternalComponent(s):i(s.type)?(n=new s.type(s),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new h(s)}else"string"==typeof e||"number"==typeof e?n=c.createInstanceForText(e):o("131",typeof e);return n._mountIndex=0,n._mountImage=null,n}var o=n(3),s=n(5),l=n(207),u=n(79),c=n(81),h=(n(254),n(1),n(2),function(e){this.construct(e)});s(h.prototype,l,{_instantiateReactComponent:a}),e.exports=a},function(e,t,n){"use strict";function r(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!i[e.type]:"textarea"===t}var i={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=r},function(e,t,n){"use strict";var r=n(9),i=n(38),a=n(39),o=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(o=function(e,t){return 3===e.nodeType?void(e.nodeValue=t):void a(e,i(t))})),e.exports=o},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?u.escape(e.key):t.toString(36)}function i(e,t,n,a){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||"object"===d&&e.$$typeof===s)return n(a,e,""===t?c+r(e,0):t),1;var f,p,m=0,g=""===t?c:t+h;if(Array.isArray(e))for(var v=0;v<e.length;v++)f=e[v],p=g+r(f,v),m+=i(f,p,n,a);else{var y=l(e);if(y){var w,b=y.call(e);if(y!==e.entries)for(var _=0;!(w=b.next()).done;)f=w.value,p=g+r(f,_++),m+=i(f,p,n,a);else for(;!(w=b.next()).done;){var x=w.value;x&&(f=x[1],p=g+u.escape(x[0])+h+r(f,0),m+=i(f,p,n,a))}}else if("object"===d){var E="",C=String(e);o("31","[object Object]"===C?"object with keys {"+Object.keys(e).join(", ")+"}":C,E)}}return m}function a(e,t,n){return null==e?0:i(e,"",t,n)}var o=n(3),s=(n(17),n(222)),l=n(253),u=(n(1),n(49)),c=(n(2),"."),h=":";e.exports=a},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(0),d=r(h),f=d.default.PropTypes,p=f.bool,m=f.object,g=f.string,v=f.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 f=this.context.history;return f&&(h.href=f.createHref(n,r),a&&(h.href+=a),(o||null!=s&&!u(s))&&f.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:p.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=n(12),s=r(o),l=n(0),u=r(l),c=n(18),h=n(34),d=n(20),f=u.default.PropTypes,p=f.string,m=f.object,g=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(t,e),t.prototype.render=function(){s.default(!1)},t}(l.Component);g.createRouteFromReactElement=function(e){var t=c.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=h.formatPattern(t.to,i);else if(t.to){var o=e.routes.indexOf(t),s=g.getRoutePattern(e.routes,o-1),l=s.replace(/\/*$/,"/")+t.to;a=h.formatPattern(l,i)}else a=r.pathname;n(t.state||r.state,a,t.query||r.query)},t},g.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},g.propTypes={path:p,from:p,to:p.isRequired,query:m,state:m,onEnter:d.falsy,children:d.falsy},t.default=g,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(12),l=r(s),u=n(0),c=r(u),h=n(18),d=n(270),f=r(d),p=c.default.PropTypes,m=p.array,g=p.func,v=p.object,y=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(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,r=t.location,i=t.routes,a=t.params,s=t.components,u=null;return s&&(u=s.reduceRight(function(t,s,l){if(null==s)return t;var u=i[l],c=f.default(u,a),d={history:n,location:r,params:a,route:u,routeParams:c,routes:i};if(h.isReactChildren(t))d.children=t;else if(t)for(var p in t)t.hasOwnProperty(p)&&(d[p]=t[p]);if("object"==typeof s){var m={};for(var g in s)s.hasOwnProperty(g)&&(m[g]=e.createElement(s[g],o({key:g},d)));return m}return e.createElement(s,d)},u)),null===u||u===!1||c.default.isValidElement(u)?void 0:l.default(!1),u},t}(u.Component);y.propTypes={history:v.isRequired,createElement:g.isRequired,location:v.isRequired,routes:m.isRequired,params:v.isRequired,components:m.isRequired},y.defaultProps={createElement:c.default.createElement},y.childContextTypes={history:v.isRequired,location:v.isRequired},t.default=y,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(266),a=r(i);t.Router=a.default;var o=n(94),s=r(o);t.Link=s.default;var l=n(260),u=r(l);t.IndexLink=u.default;var c=n(261),h=r(c);t.IndexRedirect=h.default;var d=n(262),f=r(d);t.IndexRoute=f.default;var p=n(95),m=r(p);t.Redirect=m.default;var g=n(264),v=r(g);t.Route=v.default;var y=n(259),w=r(y);t.History=w.default;var b=n(263),_=r(b);t.Lifecycle=_.default;var x=n(265),E=r(x);t.RouteContext=E.default;var C=n(62),k=r(C);t.useRoutes=k.default;var S=n(18);t.createRoutes=S.createRoutes;var P=n(96),T=r(P);t.RoutingContext=T.default;var N=n(20),M=r(N);t.PropTypes=M.default;var I=n(272),L=r(I);t.match=L.default;var A=r(i);t.default=A.default},function(e,t,n){"use strict";function r(e){var t=Function.prototype.toString,n=Object.prototype.hasOwnProperty,r=RegExp("^"+t.call(n).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");try{var i=t.call(e);return r.test(i)}catch(e){return!1}}function i(e){var t=u(e);if(t){var n=t.childIDs;c(e),n.forEach(i)}}function a(e,t,n){return"\n    in "+(e||"Unknown")+(t?" (at "+t.fileName.replace(/^.*[\\\/]/,"")+":"+t.lineNumber+")":n?" (created by "+n+")":"")}function o(e){return null==e?"#empty":"string"==typeof e||"number"==typeof e?"#text":"string"==typeof e.type?e.type:e.type.displayName||e.type.name||"Unknown"}function s(e){var t,n=k.getDisplayName(e),r=k.getElement(e),i=k.getOwnerID(e);return i&&(t=k.getDisplayName(i)),a(n,r&&r._source,t)}var l,u,c,h,d,f,p,m=n(27),g=n(17),v=(n(1),n(2),"function"==typeof Array.from&&"function"==typeof Map&&r(Map)&&null!=Map.prototype&&"function"==typeof Map.prototype.keys&&r(Map.prototype.keys)&&"function"==typeof Set&&r(Set)&&null!=Set.prototype&&"function"==typeof Set.prototype.keys&&r(Set.prototype.keys));if(v){var y=new Map,w=new Set;l=function(e,t){y.set(e,t)},u=function(e){return y.get(e)},c=function(e){y.delete(e)},h=function(){return Array.from(y.keys())},d=function(e){w.add(e)},f=function(e){w.delete(e)},p=function(){return Array.from(w.keys())}}else{var b={},_={},x=function(e){return"."+e},E=function(e){return parseInt(e.substr(1),10)};l=function(e,t){var n=x(e);b[n]=t},u=function(e){var t=x(e);return b[t]},c=function(e){var t=x(e);delete b[t]},h=function(){return Object.keys(b).map(E)},d=function(e){var t=x(e);_[t]=!0},f=function(e){var t=x(e);delete _[t]},p=function(){return Object.keys(_).map(E)}}var C=[],k={onSetChildren:function(e,t){var n=u(e);n?void 0:m("144"),n.childIDs=t;for(var r=0;r<t.length;r++){var i=t[r],a=u(i);a?void 0:m("140"),null==a.childIDs&&"object"==typeof a.element&&null!=a.element?m("141"):void 0,a.isMounted?void 0:m("71"),null==a.parentID&&(a.parentID=e),a.parentID!==e?m("142",i,a.parentID,e):void 0}},onBeforeMountComponent:function(e,t,n){var r={element:t,parentID:n,text:null,childIDs:[],isMounted:!1,updateCount:0};l(e,r)},onBeforeUpdateComponent:function(e,t){var n=u(e);n&&n.isMounted&&(n.element=t)},onMountComponent:function(e){var t=u(e);t?void 0:m("144"),t.isMounted=!0;var n=0===t.parentID;n&&d(e)},onUpdateComponent:function(e){var t=u(e);t&&t.isMounted&&t.updateCount++},onUnmountComponent:function(e){var t=u(e);if(t){t.isMounted=!1;var n=0===t.parentID;n&&f(e)}C.push(e)},purgeUnmountedComponents:function(){if(!k._preventPurging){for(var e=0;e<C.length;e++){var t=C[e];i(t)}C.length=0}},isMounted:function(e){var t=u(e);return!!t&&t.isMounted},getCurrentStackAddendum:function(e){var t="";if(e){var n=o(e),r=e._owner;t+=a(n,e._source,r&&r.getName())}var i=g.current,s=i&&i._debugID;return t+=k.getStackAddendumByID(s)},getStackAddendumByID:function(e){for(var t="";e;)t+=s(e),e=k.getParentID(e);return t},getChildIDs:function(e){var t=u(e);return t?t.childIDs:[]},getDisplayName:function(e){var t=k.getElement(e);return t?o(t):null},getElement:function(e){var t=u(e);return t?t.element:null},getOwnerID:function(e){var t=k.getElement(e);return t&&t._owner?t._owner._debugID:null},getParentID:function(e){var t=u(e);return t?t.parentID:null},getSource:function(e){var t=u(e),n=t?t.element:null,r=null!=n?n._source:null;return r},getText:function(e){var t=k.getElement(e);return"string"==typeof t?t:"number"==typeof t?""+t:null},getUpdateCount:function(e){var t=u(e);return t?t.updateCount:0},getRootIDs:p,getRegisteredIDs:h};e.exports=k},function(e,t,n){"use strict";var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;e.exports=r},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";var r=!1;e.exports=r},function(e,t,n){"use strict";function r(e){var t=e&&(i&&e[i]||e[a]);if("function"==typeof t)return t}var i="function"==typeof Symbol&&Symbol.iterator,a="@@iterator";e.exports=r},function(e,t,n){"use strict";var r=n(0),i=n(194),a=n(109);i.render(r.createElement(a,null),document.getElementById("article"))},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t,n,r,i,a,o){var s,l,u,c,h=n.length,d=n[0].length;if(t<1)throw new Error("degree must be at least 1 (linear)");if(t>h-1)throw new Error("degree must be less than or equal to point count - 1");if(!i)for(i=[],s=0;s<h;s++)i[s]=1;if(r){if(r.length!==h+t+1)throw new Error("bad knot vector length")}else{var r=[];for(s=0;s<h+t+1;s++)r[s]=s}var f=[t,r.length-1-t],p=r[f[0]],m=r[f[1]];if(o||(e=e*(m-p)+p),e<p||e>m)throw new Error("out of bounds");for(u=f[0];u<f[1]&&!(e>=r[u]&&e<=r[u+1]);u++);var g=[];for(s=0;s<h;s++){for(g[s]=[],l=0;l<d;l++)g[s][l]=n[s][l]*i[s];g[s][d]=i[s]}var v;for(c=1;c<=t+1;c++)for(s=u;s>u-t-1+c;s--)for(v=(e-r[s])/(r[s+t+1-c]-r[s]),l=0;l<d+1;l++)g[s][l]=(1-v)*g[s-1][l]+v*g[s][l];var a=a||[];for(s=0;s<d;s++)a[s]=g[u][s]/g[u][d];return a}},function(e,t,n){var r,i,a=new function(o){var s=new function(){function e(e,t,n,i,a){function o(r,o){o=o||(o=u(t,r))&&(o.get?o:o.value),"string"==typeof o&&"#"===o[0]&&(o=e[o.substring(1)]||o);var c,d="function"==typeof o,f=o,p=a||d&&!o.base?o&&o.get?r in e:e[r]:null;a&&p||(d&&p&&(o.base=p),d&&i!==!1&&(c=r.match(/^([gs]et|is)(([A-Z])(.*))$/))&&(l[c[3].toLowerCase()+c[4]]=c[2]),f&&!d&&f.get&&"function"==typeof f.get&&s.isPlainObject(f)||(f={value:f,writable:!0}),(u(e,r)||{configurable:!0}).configurable&&(f.configurable=!0,f.enumerable=n),h(e,r,f))}var l={};if(t){for(var c in t)t.hasOwnProperty(c)&&!r.test(c)&&o(c);for(var c in l){var d=l[c],f=e["set"+d],p=e["get"+d]||f&&e["is"+d];!p||i!==!0&&0!==p.length||o(c,{get:p,set:f})}}return e}function t(e,t,n){return e&&("length"in e&&!e.getLength&&"number"==typeof e.length?i:a).call(e,t,n=n||e),n}function n(e,t,n){for(var r in t)!t.hasOwnProperty(r)||n&&n[r]||(e[r]=t[r]);return e}var r=/^(statics|enumerable|beans|preserve)$/,i=[].forEach||function(e,t){for(var n=0,r=this.length;n<r;n++)e.call(t,this[n],n,this)},a=function(e,t){for(var n in this)this.hasOwnProperty(n)&&e.call(t,this[n],n,this)},l=Object.create||function(e){return{__proto__:e}},u=Object.getOwnPropertyDescriptor||function(e,t){var n=e.__lookupGetter__&&e.__lookupGetter__(t);return n?{get:n,set:e.__lookupSetter__(t),enumerable:!0,configurable:!0}:e.hasOwnProperty(t)?{value:e[t],enumerable:!0,configurable:!0,writable:!0}:null},c=Object.defineProperty||function(e,t,n){return(n.get||n.set)&&e.__defineGetter__?(n.get&&e.__defineGetter__(t,n.get),n.set&&e.__defineSetter__(t,n.set)):e[t]=n.value,e},h=function(e,t,n){return delete e[t],c(e,t,n)};return e(function(){for(var e=0,t=arguments.length;e<t;e++)n(this,arguments[e])},{inject:function(t){if(t){var n=t.statics===!0?t:t.statics,r=t.beans,i=t.preserve;n!==t&&e(this.prototype,t,t.enumerable,r,i),e(this,n,!0,r,i)}for(var a=1,o=arguments.length;a<o;a++)this.inject(arguments[a]);return this},extend:function(){for(var t,n,r=this,i=0,a=arguments.length;i<a&&!(t=arguments[i].initialize);i++);return t=t||function(){r.apply(this,arguments)},n=t.prototype=l(this.prototype),h(n,"constructor",{value:t,writable:!0,configurable:!0}),e(t,this,!0),arguments.length&&this.inject.apply(t,arguments),t.base=r,t}},!0).inject({inject:function(){for(var t=0,n=arguments.length;t<n;t++){var r=arguments[t];r&&e(this,r,r.enumerable,r.beans,r.preserve)}return this},extend:function(){var e=l(this);return e.inject.apply(e,arguments)},each:function(e,n){return t(this,e,n)},set:function(e){return n(this,e)},clone:function(){return new this.constructor(this)},statics:{each:t,create:l,define:h,describe:u,set:n,clone:function(e){return n(new e.constructor,e)},isPlainObject:function(e){var t=null!=e&&e.constructor;return t&&(t===Object||t===s||"Object"===t.name)},pick:function(e,t){return e!==o?e:t}}})};e.exports=s,s.inject({toString:function(){return null!=this._id?(this._class||"Object")+(this._name?" '"+this._name+"'":" @"+this._id):"{ "+s.each(this,function(e,t){if(!/^_/.test(t)){var n=typeof e;this.push(t+": "+("number"===n?h.instance.number(e):"string"===n?"'"+e+"'":e))}},[]).join(", ")+" }"},getClassName:function(){return this._class||""},exportJSON:function(e){return s.exportJSON(this,e)},toJSON:function(){return s.serialize(this)},_set:function(e,t,n){if(e&&(n||s.isPlainObject(e))){for(var r=Object.keys(e._filtering||e),i=0,a=r.length;i<a;i++){var l=r[i];if(!t||!t[l]){var u=e[l];u!==o&&(this[l]=u)}}return!0}},statics:{exports:{enumerable:!0},extend:function e(){var t=e.base.apply(this,arguments),n=t.prototype._class;return n&&!s.exports[n]&&(s.exports[n]=t),t},equals:function(e,t){if(e===t)return!0;if(e&&e.equals)return e.equals(t);if(t&&t.equals)return t.equals(e);if(e&&t&&"object"==typeof e&&"object"==typeof t){if(Array.isArray(e)&&Array.isArray(t)){var n=e.length;if(n!==t.length)return!1;for(;n--;)if(!s.equals(e[n],t[n]))return!1}else{var r=Object.keys(e),n=r.length;if(n!==Object.keys(t).length)return!1;for(;n--;){var i=r[n];if(!t.hasOwnProperty(i)||!s.equals(e[i],t[i]))return!1}}return!0}return!1},read:function(e,t,n,r){if(this===s){var i=this.peek(e,t);return e.__index++,i}var a=this.prototype,l=a._readIndex,u=t||l&&e.__index||0;r||(r=e.length-u);var c=e[u];return c instanceof this||n&&n.readNull&&null==c&&r<=1?(l&&(e.__index=u+1),c&&n&&n.clone?c.clone():c):(c=s.create(this.prototype),l&&(c.__read=!0),c=c.initialize.apply(c,u>0||r<e.length?Array.prototype.slice.call(e,u,u+r):e)||c,l&&(e.__index=u+c.__read,c.__read=o),c)},peek:function(e,t){return e[e.__index=t||e.__index||0]},remain:function(e){return e.length-(e.__index||0)},readAll:function(e,t,n){for(var r,i=[],a=t||0,o=e.length;a<o;a++)i.push(Array.isArray(r=e[a])?this.read(r,0,n):this.read(e,a,n,1));return i},readNamed:function(e,t,n,r,i){var a=this.getNamed(e,t),l=a!==o;if(l){var u=e._filtered;u||(u=e._filtered=s.create(e[0]),u._filtering=e[0]),u[t]=o}return this.read(l?[a]:e,n,r,i)},getNamed:function(e,t){var n=e[0];if(e._hasObject===o&&(e._hasObject=1===e.length&&s.isPlainObject(n)),e._hasObject)return t?n[t]:e._filtered||n},hasNamed:function(e,t){return!!this.getNamed(e,t)},isPlainValue:function(e,t){return this.isPlainObject(e)||Array.isArray(e)||t&&"string"==typeof e},serialize:function(e,t,n,r){t=t||{};var i,a=!r;if(a&&(t.formatter=new h(t.precision),r={length:0,definitions:{},references:{},add:function(e,t){var n="#"+e._id,r=this.references[n];if(!r){this.length++;var i=t.call(e),a=e._class;a&&i[0]!==a&&i.unshift(a),this.definitions[n]=i,r=this.references[n]=[n]}return r}}),e&&e._serialize){i=e._serialize(t,r);var o=e._class;!o||n||i._compact||i[0]===o||i.unshift(o)}else if(Array.isArray(e)){i=[];for(var l=0,u=e.length;l<u;l++)i[l]=s.serialize(e[l],t,n,r);n&&(i._compact=!0)}else if(s.isPlainObject(e)){i={};for(var c=Object.keys(e),l=0,u=c.length;l<u;l++){var d=c[l];i[d]=s.serialize(e[d],t,n,r)}}else i="number"==typeof e?t.formatter.number(e,t.precision):e;return a&&r.length>0?[["dictionary",r.definitions],i]:i},deserialize:function(e,t,n,r){var i=e,a=!n;if(n=n||{},Array.isArray(e)){var o=e[0],l="dictionary"===o;if(1==e.length&&/^#/.test(o))return n.dictionary[o];o=s.exports[o],i=[],r&&(n.dictionary=i);for(var u=o?1:0,c=e.length;u<c;u++)i.push(s.deserialize(e[u],t,n,l));if(o){var h=i;t?i=t(o,h):(i=s.create(o.prototype),o.apply(i,h))}}else if(s.isPlainObject(e)){i={},r&&(n.dictionary=i);for(var d in e)i[d]=s.deserialize(e[d],t,n)}return a&&e&&e.length&&"dictionary"===e[0][0]?i[1]:i},exportJSON:function(e,t){var n=s.serialize(e,t);return t&&t.asString===!1?n:JSON.stringify(n)},importJSON:function(e,t){return s.deserialize("string"==typeof e?JSON.parse(e):e,function(e,n){var r=t&&t.constructor===e?t:s.create(e.prototype),i=r===t;if(1===n.length&&r instanceof C&&(i||!(r instanceof S))){var a=n[0];s.isPlainObject(a)&&(a.insert=!1)}return e.apply(r,n),i&&(t=null),r})},splice:function(e,t,n,r){var i=t&&t.length,a=n===o;n=a?e.length:n,n>e.length&&(n=e.length);for(var s=0;s<i;s++)t[s]._index=n+s;if(a)return e.push.apply(e,t),[];var l=[n,r];t&&l.push.apply(l,t);for(var u=e.splice.apply(e,l),s=0,c=u.length;s<c;s++)u[s]._index=o;for(var s=n+i,c=e.length;s<c;s++)e[s]._index=s;return u},capitalize:function(e){return e.replace(/\b[a-z]/g,function(e){return e.toUpperCase()})},camelize:function(e){return e.replace(/-(.)/g,function(e,t){return t.toUpperCase()})},hyphenate:function(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}}});var l={on:function(e,t){if("string"!=typeof e)s.each(e,function(e,t){this.on(t,e)},this);else{var n=this._eventTypes,r=n&&n[e],i=this._callbacks=this._callbacks||{};i=i[e]=i[e]||[],i.indexOf(t)===-1&&(i.push(t),
+function r(e,t){if(!a.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var o=document.createElement("div");o.setAttribute(n,"return;"),r="function"==typeof o[n]}return!r&&i&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var i,a=n(9);a.canUseDOM&&(i=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t,n){"use strict";function r(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var i=typeof e,a=typeof t;return"string"===i||"number"===i?"string"===a||"number"===a:"object"===a&&e.type===t.type&&e.key===t.key}e.exports=r},function(e,t,n){"use strict";var r=(n(5),n(11)),i=(n(2),r);e.exports=i},function(e,t,n){"use strict";function r(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 i(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=r,t.mapAsync=i},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){for(var t in e)if(e.hasOwnProperty(t))return!0;return!1}function o(e){return function(){function t(e,t){var n=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];return g.default(e,t,n,k.location,k.routes,k.params)}function n(e){var t=e.pathname,n=e.query,r=e.state;return C.createLocation(C.createPath(t,n),r,u.REPLACE)}function r(e,t){S&&S.location===e?o(S,t):b.default(x,e,function(n,r){n?t(n):r?o(s({},r,{location:e}),t):t()})}function o(e,t){var r=f.default(k,e),i=r.leaveRoutes,a=r.enterRoutes;p.runLeaveHooks(i),p.runEnterHooks(a,e,function(r,i){r?t(r):i?t(null,n(i)):y.default(e,function(n,r){n?t(n):t(null,null,k=s({},e,{components:r}))})})}function l(e){return e.__id__||(e.__id__=P++)}function c(e){return e.reduce(function(e,t){return e.push.apply(e,T[l(t)]),e},[])}function d(e,t){b.default(x,e,function(n,r){if(null==r)return void t();S=s({},r,{location:e});for(var i=c(f.default(k,S).leaveRoutes),a=void 0,o=0,l=i.length;null==a&&o<l;++o)a=i[o](e);t(a)})}function m(){if(k.routes){for(var e=c(k.routes),t=void 0,n=0,r=e.length;"string"!=typeof t&&n<r;++n)t=e[n]();return t}}function v(e,t){var n=l(e),r=T[n];if(null==r){var i=!a(T);r=T[n]=[t],i&&(N=C.listenBefore(d),C.listenBeforeUnload&&(M=C.listenBeforeUnload(m)))}else r.indexOf(t)===-1&&r.push(t);return function(){var e=T[n];if(null!=e){var r=e.filter(function(e){return e!==t});0===r.length?(delete T[n],a(T)||(N&&(N(),N=null),M&&(M(),M=null))):T[n]=r}}}function w(e){return C.listen(function(t){k.location===t?e(null,k):r(t,function(t,n,r){t?e(t):n?C.transitionTo(n):r&&e(null,r)})})}var _=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],x=_.routes,E=i(_,["routes"]),C=h.default(e)(E),k={},S=void 0,P=1,T={},N=void 0,M=void 0;return s({},C,{isActive:t,match:r,listenBeforeLeavingRoute:v,listen:w})}}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(10),u=(r(l),n(29)),c=n(192),h=r(c),d=n(268),f=r(d),p=n(267),m=n(271),g=r(m),v=n(269),y=r(v),w=n(273),b=r(w);t.default=o,e.exports=t.default},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=o,this.updater=n||a}var i=n(27),a=n(64),o=(n(101),n(28));n(1),n(2);r.prototype.isReactComponent={},r.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e?i("85"):void 0,this.updater.enqueueSetState(this,e),t&&this.updater.enqueueCallback(this,t,"setState")},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this),e&&this.updater.enqueueCallback(this,e,"forceUpdate")};e.exports=r},function(e,t,n){"use strict";function r(e,t){}var i=(n(2),{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")}});e.exports=i},function(e,t,n){!function(){"use strict";function t(e,t,n,r,i){"undefined"==typeof i&&(i=.5);var a=c.projectionratio(i,e),o=1-a,s={x:a*t.x+o*r.x,y:a*t.y+o*r.y},l=c.abcratio(i,e),u={x:n.x+(n.x-s.x)/l,y:n.y+(n.y-s.y)/l};return{A:u,B:n,C:s}}var r=Math.abs,i=Math.min,a=Math.max,o=Math.acos,s=Math.sqrt,l=Math.PI,u={x:0,y:0,z:0},c=n(66),h=n(168),d=function(e){var t=e&&e.forEach?e:[].slice.call(arguments),n=!1;if("object"==typeof t[0]){n=t.length;var i=[];t.forEach(function(e){["x","y","z"].forEach(function(t){"undefined"!=typeof e[t]&&i.push(e[t])})}),t=i}var a=!1,o=t.length;if(n){if(n>4){if(1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");a=!0}}else if(6!==o&&8!==o&&9!==o&&12!==o&&1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");var s=!a&&(9===o||12===o)||e&&e[0]&&"undefined"!=typeof e[0].z;this._3d=s;for(var l=[],u=0,h=s?3:2;u<o;u+=h){var d={x:t[u],y:t[u+1]};s&&(d.z=t[u+2]),l.push(d)}this.order=l.length-1,this.points=l;var f=["x","y"];s&&f.push("z"),this.dims=f,this.dimlen=f.length,function(e){for(var t=e.order,n=e.points,i=c.align(n,{p1:n[0],p2:n[t]}),a=0;a<i.length;a++)if(r(i[a].y)>1e-4)return void(e._linear=!1);e._linear=!0}(this),this._t1=0,this._t2=1,this.update()};d.fromSVG=function(e){var t=e.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g).map(parseFloat),n=/[cq]/.test(e);return n?(t=t.map(function(e,n){return n<2?e:e+t[n%2]}),new d(t)):new d(t)},d.quadraticFromPoints=function(e,n,r,i){if("undefined"==typeof i&&(i=.5),0===i)return new d(n,n,r);if(1===i)return new d(e,n,n);var a=t(2,e,n,r,i);return new d(e,a.A,r)},d.cubicFromPoints=function(e,n,r,i,a){"undefined"==typeof i&&(i=.5);var o=t(3,e,n,r,i);"undefined"==typeof a&&(a=c.dist(n,o.C));var s=a*(1-i)/i,l=c.dist(e,r),u=(r.x-e.x)/l,h=(r.y-e.y)/l,f=a*u,p=a*h,m=s*u,g=s*h,v={x:n.x-f,y:n.y-p},y={x:n.x+m,y:n.y+g},w=o.A,b={x:w.x+(v.x-w.x)/(1-i),y:w.y+(v.y-w.y)/(1-i)},_={x:w.x+(y.x-w.x)/i,y:w.y+(y.y-w.y)/i},x={x:e.x+(b.x-e.x)/i,y:e.y+(b.y-e.y)/i},E={x:r.x+(_.x-r.x)/(1-i),y:r.y+(_.y-r.y)/(1-i)};return new d(e,x,E,r)};var f=function(){return c};d.getUtils=f,d.prototype={getUtils:f,valueOf:function(){return this.toString()},toString:function(){return c.pointsToString(this.points)},toSVG:function(e){if(this._3d)return!1;for(var t=this.points,n=t[0].x,r=t[0].y,i=["M",n,r,2===this.order?"Q":"C"],a=1,o=t.length;a<o;a++)i.push(t[a].x),i.push(t[a].y);return i.join(" ")},update:function(){this.dpoints=[];for(var e=this.points,t=e.length,n=t-1;t>1;t--,n--){for(var r,i=[],a=0;a<n;a++)r={x:n*(e[a+1].x-e[a].x),y:n*(e[a+1].y-e[a].y)},this._3d&&(r.z=n*(e[a+1].z-e[a].z)),i.push(r);this.dpoints.push(i),e=i}this.computedirection()},computedirection:function(){var e=this.points,t=c.angle(e[0],e[this.order],e[1]);this.clockwise=t>0},length:function(){return c.length(this.derivative.bind(this))},_lut:[],getLUT:function(e){if(e=e||100,this._lut.length===e)return this._lut;this._lut=[];for(var t=0;t<=e;t++)this._lut.push(this.compute(t/e));return this._lut},on:function(e,t){t=t||5;for(var n,r=this.getLUT(),i=[],a=0,o=0;o<r.length;o++)n=r[o],c.dist(n,e)<t&&(i.push(n),a+=o/r.length);return!!i.length&&(a/=i.length)},project:function(e){var t=this.getLUT(),n=t.length-1,r=c.closest(t,e),i=r.mdist,a=r.mpos;if(0===a||a===n){var o=a/n,s=this.compute(o);return s.t=o,s.d=i,s}var l,o,u,h,d=(a-1)/n,f=(a+1)/n,p=.1/n;for(i+=1,o=d,l=o;o<f+p;o+=p)u=this.compute(o),h=c.dist(e,u),h<i&&(i=h,l=o);return u=this.compute(l),u.t=l,u.d=i,u},get:function(e){return this.compute(e)},point:function(e){return this.points[e]},compute:function(e){if(0===e)return this.points[0];if(1===e)return this.points[this.order];var t=this.points,n=1-e;if(1===this.order)return c={x:n*t[0].x+e*t[1].x,y:n*t[0].y+e*t[1].y},this._3d&&(c.z=n*t[0].z+e*t[1].z),c;if(this.order<4){var r,i,a,o=n*n,s=e*e,l=0;2===this.order?(t=[t[0],t[1],t[2],u],r=o,i=n*e*2,a=s):3===this.order&&(r=o*n,i=o*e*3,a=n*s*3,l=e*s);var c={x:r*t[0].x+i*t[1].x+a*t[2].x+l*t[3].x,y:r*t[0].y+i*t[1].y+a*t[2].y+l*t[3].y};return this._3d&&(c.z=r*t[0].z+i*t[1].z+a*t[2].z+l*t[3].z),c}for(var h=JSON.parse(JSON.stringify(this.points));h.length>1;){for(var d=0;d<h.length-1;d++)h[d]={x:h[d].x+(h[d+1].x-h[d].x)*e,y:h[d].y+(h[d+1].y-h[d].y)*e},"undefined"!=typeof h[d].z&&(h[d]=h[d].z+(h[d+1].z-h[d].z)*e);h.splice(h.length-1,1)}return h[0]},raise:function(){for(var e,t,n,r=this.points,i=[r[0]],a=r.length,e=1;e<a;e++)t=r[e],n=r[e-1],i[e]={x:(a-e)/a*t.x+e/a*n.x,y:(a-e)/a*t.y+e/a*n.y};return i[a]=r[a-1],new d(i)},derivative:function(e){var t,n,r=1-e,i=0,a=this.dpoints[0];2===this.order&&(a=[a[0],a[1],u],t=r,n=e),3===this.order&&(t=r*r,n=r*e*2,i=e*e);var o={x:t*a[0].x+n*a[1].x+i*a[2].x,y:t*a[0].y+n*a[1].y+i*a[2].y};return this._3d&&(o.z=t*a[0].z+n*a[1].z+i*a[2].z),o},inflections:function(){return c.inflections(this.points)},normal:function(e){return this._3d?this.__normal3(e):this.__normal2(e)},__normal2:function(e){var t=this.derivative(e),n=s(t.x*t.x+t.y*t.y);return{x:-t.y/n,y:t.x/n}},__normal3:function(e){var t=this.derivative(e),n=this.derivative(e+.01),r=s(t.x*t.x+t.y*t.y+t.z*t.z),i=s(n.x*n.x+n.y*n.y+n.z*n.z);t.x/=r,t.y/=r,t.z/=r,n.x/=i,n.y/=i,n.z/=i;var a={x:n.y*t.z-n.z*t.y,y:n.z*t.x-n.x*t.z,z:n.x*t.y-n.y*t.x},o=s(a.x*a.x+a.y*a.y+a.z*a.z);a.x/=o,a.y/=o,a.z/=o;var l=[a.x*a.x,a.x*a.y-a.z,a.x*a.z+a.y,a.x*a.y+a.z,a.y*a.y,a.y*a.z-a.x,a.x*a.z-a.y,a.y*a.z+a.x,a.z*a.z],u={x:l[0]*t.x+l[1]*t.y+l[2]*t.z,y:l[3]*t.x+l[4]*t.y+l[5]*t.z,z:l[6]*t.x+l[7]*t.y+l[8]*t.z};return u},hull:function(e){var t,n=this.points,r=[],i=[],a=0,o=0,s=0;for(i[a++]=n[0],i[a++]=n[1],i[a++]=n[2],3===this.order&&(i[a++]=n[3]);n.length>1;){for(r=[],o=0,s=n.length-1;o<s;o++)t=c.lerp(e,n[o],n[o+1]),i[a++]=t,r.push(t);n=r}return i},split:function(e,t){if(0===e&&t)return this.split(t).left;if(1===t)return this.split(e).right;var n=this.hull(e),r={left:new d(2===this.order?[n[0],n[3],n[5]]:[n[0],n[4],n[7],n[9]]),right:new d(2===this.order?[n[5],n[4],n[2]]:[n[9],n[8],n[6],n[3]]),span:n};if(r.left._t1=c.map(0,0,1,this._t1,this._t2),r.left._t2=c.map(e,0,1,this._t1,this._t2),r.right._t1=c.map(e,0,1,this._t1,this._t2),r.right._t2=c.map(1,0,1,this._t1,this._t2),!t)return r;t=c.map(t,e,1,0,1);var i=r.right.split(t);return i.left},extrema:function(){var e,t,n=this.dims,r={},i=[];return n.forEach(function(n){t=function(e){return e[n]},e=this.dpoints[0].map(t),r[n]=c.droots(e),3===this.order&&(e=this.dpoints[1].map(t),r[n]=r[n].concat(c.droots(e))),r[n]=r[n].filter(function(e){return e>=0&&e<=1}),i=i.concat(r[n].sort())}.bind(this)),i=i.sort().filter(function(e,t){return i.indexOf(e)===t}),r.values=i,r},bbox:function(){var e=this.extrema(),t={};return this.dims.forEach(function(n){t[n]=c.getminmax(this,n,e[n])}.bind(this)),t},overlaps:function(e){var t=this.bbox(),n=e.bbox();return c.bboxoverlap(t,n)},offset:function(e,t){if("undefined"!=typeof t){var n=this.get(e),r=this.normal(e),i={c:n,n:r,x:n.x+r.x*t,y:n.y+r.y*t};return this._3d&&(i.z=n.z+r.z*t),i}if(this._linear){var a=this.normal(0),o=this.points.map(function(t){var n={x:t.x+e*a.x,y:t.y+e*a.y};return t.z&&r.z&&(n.z=t.z+e*a.z),n});return[new d(o)]}var s=this.reduce();return s.map(function(t){return t.scale(e)})},simple:function(){if(3===this.order){var e=c.angle(this.points[0],this.points[3],this.points[1]),t=c.angle(this.points[0],this.points[3],this.points[2]);if(e>0&&t<0||e<0&&t>0)return!1}var n=this.normal(0),i=this.normal(1),a=n.x*i.x+n.y*i.y;this._3d&&(a+=n.z*i.z);var s=r(o(a));return s<l/3},reduce:function(){var e,t,n=0,i=0,a=.01,o=[],s=[],l=this.extrema().values;for(l.indexOf(0)===-1&&(l=[0].concat(l)),l.indexOf(1)===-1&&l.push(1),n=l[0],e=1;e<l.length;e++)i=l[e],t=this.split(n,i),t._t1=n,t._t2=i,o.push(t),n=i;return o.forEach(function(e){for(n=0,i=0;i<=1;)for(i=n+a;i<=1+a;i+=a)if(t=e.split(n,i),!t.simple()){if(i-=a,r(n-i)<a)return[];t=e.split(n,i),t._t1=c.map(n,0,1,e._t1,e._t2),t._t2=c.map(i,0,1,e._t1,e._t2),s.push(t),n=i;break}n<1&&(t=e.split(n,1),t._t1=c.map(n,0,1,e._t1,e._t2),t._t2=e._t2,s.push(t))}),s},scale:function(e){var t=this.order,n=!1;if("function"==typeof e&&(n=e),n&&2===t)return this.raise().scale(n);var r=this.clockwise,i=n?n(0):e,a=n?n(1):e,o=[this.offset(0,10),this.offset(1,10)],l=c.lli4(o[0],o[0].c,o[1],o[1].c);if(!l)throw new Error("cannot scale this curve. Try reducing it first.");var u=this.points,h=[];return[0,1].forEach(function(e){var n=h[e*t]=c.copy(u[e*t]);n.x+=(e?a:i)*o[e].n.x,n.y+=(e?a:i)*o[e].n.y}.bind(this)),n?([0,1].forEach(function(i){if(2!==this.order||!i){var a=u[i+1],o={x:a.x-l.x,y:a.y-l.y},c=n?n((i+1)/t):e;n&&!r&&(c=-c);var d=s(o.x*o.x+o.y*o.y);o.x/=d,o.y/=d,h[i+1]={x:a.x+c*o.x,y:a.y+c*o.y}}}.bind(this)),new d(h)):([0,1].forEach(function(e){if(2!==this.order||!e){var n=h[e*t],r=this.derivative(e),i={x:n.x+r.x,y:n.y+r.y};h[e+1]=c.lli4(n,i,l,u[e+1])}}.bind(this)),new d(h))},outline:function(e,t,n,r){function i(e,t,n,r,i){return function(a){var o=r/n,s=(r+i)/n,l=t-e;return c.map(a,0,1,e+o*l,e+s*l)}}t="undefined"==typeof t?e:t;var a,o=this.reduce(),s=o.length,l=[],u=[],d=0,f=this.length(),p="undefined"!=typeof n&&"undefined"!=typeof r;o.forEach(function(a){x=a.length(),p?(l.push(a.scale(i(e,n,f,d,x))),u.push(a.scale(i(-t,-r,f,d,x)))):(l.push(a.scale(e)),u.push(a.scale(-t))),d+=x}),u=u.map(function(e){return a=e.points,a[3]?e.points=[a[3],a[2],a[1],a[0]]:e.points=[a[2],a[1],a[0]],e}).reverse();var m=l[0].points[0],g=l[s-1].points[l[s-1].points.length-1],v=u[s-1].points[u[s-1].points.length-1],y=u[0].points[0],w=c.makeline(v,m),b=c.makeline(g,y),_=[w].concat(l).concat([b]).concat(u),x=_.length;return new h(_)},outlineshapes:function(e,t,n){t=t||e;for(var r=this.outline(e,t).curves,i=[],a=1,o=r.length;a<o/2;a++){var s=c.makeshape(r[a],r[o-a],n);s.startcap.virtual=a>1,s.endcap.virtual=a<o/2-1,i.push(s)}return i},intersects:function(e,t){return e?e.p1&&e.p2?this.lineIntersects(e):(e instanceof d&&(e=e.reduce()),this.curveintersects(this.reduce(),e,t)):this.selfintersects(t)},lineIntersects:function(e){var t=i(e.p1.x,e.p2.x),n=i(e.p1.y,e.p2.y),r=a(e.p1.x,e.p2.x),o=a(e.p1.y,e.p2.y),s=this;return c.roots(this.points,e).filter(function(e){var i=s.get(e);return c.between(i.x,t,r)&&c.between(i.y,n,o)})},selfintersects:function(e){var t,n,r,i,a=this.reduce(),o=a.length-2,s=[];for(t=0;t<o;t++)r=a.slice(t,t+1),i=a.slice(t+2),n=this.curveintersects(r,i,e),s=s.concat(n);return s},curveintersects:function(e,t,n){var r=[];e.forEach(function(e){t.forEach(function(t){e.overlaps(t)&&r.push({left:e,right:t})})});var i=[];return r.forEach(function(e){var t=c.pairiteration(e.left,e.right,n);t.length>0&&(i=i.concat(t))}),i},arcs:function(e){e=e||.5;var t=[];return this._iterate(e,t)},_error:function(e,t,n,i){var a=(i-n)/4,o=this.get(n+a),s=this.get(i-a),l=c.dist(e,t),u=c.dist(e,o),h=c.dist(e,s);return r(u-l)+r(h-l)},_iterate:function(e,t){var n,r=0,i=1;do{n=0,i=1;var a,o,s,l,u,h=this.get(r),d=!1,f=!1,p=i,m=1,g=0;do{f=d,l=s,p=(r+i)/2,g++,a=this.get(p),o=this.get(i),s=c.getccenter(h,a,o),s.interval={start:r,end:i};var v=this._error(s,h,r,i);if(d=v<=e,u=f&&!d,u||(m=i),d){if(i>=1){m=1,l=s;break}i+=(i-r)/2}else i=p}while(!u&&n++<100);if(n>=100){console.error("arc abstraction somehow failed...");break}l=l?l:s,t.push(l),r=m}while(i<1);return t}},e.exports=d}()},function(e,t,n){!function(){"use strict";var t=Math.abs,r=Math.cos,i=Math.sin,a=Math.acos,o=Math.atan2,s=Math.sqrt,l=Math.pow,u=function(e){return e<0?-l(-e,1/3):l(e,1/3)},c=Math.PI,h=2*c,d=c/2,f=1e-6,p={Tvalues:[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213],Cvalues:[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872],arcfn:function(e,t){var n=t(e),r=n.x*n.x+n.y*n.y;return"undefined"!=typeof n.z&&(r+=n.z*n.z),s(r)},between:function(e,t,n){return t<=e&&e<=n||p.approximately(e,t)||p.approximately(e,n)},approximately:function(e,n,r){return t(e-n)<=(r||f)},length:function(e){var t,n,r=.5,i=0,a=p.Tvalues.length;for(t=0;t<a;t++)n=r*p.Tvalues[t]+r,i+=p.Cvalues[t]*p.arcfn(n,e);return r*i},map:function(e,t,n,r,i){var a=n-t,o=i-r,s=e-t,l=s/a;return r+o*l},lerp:function(e,t,n){var r={x:t.x+e*(n.x-t.x),y:t.y+e*(n.y-t.y)};return t.z&&n.z&&(r.z=t.z+e*(n.z-t.z)),r},pointToString:function(e){var t=e.x+"/"+e.y;return"undefined"!=typeof e.z&&(t+="/"+e.z),t},pointsToString:function(e){return"["+e.map(p.pointToString).join(", ")+"]"},copy:function(e){return JSON.parse(JSON.stringify(e))},angle:function(e,t,n){var r,i=t.x-e.x,a=t.y-e.y,l=n.x-e.x,u=n.y-e.y,c=i*u-a*l,h=s(i*i+a*a),d=s(l*l+u*u);return i/=h,a/=h,l/=d,u/=d,r=i*l+a*u,o(c,r)},round:function(e,t){var n=""+e,r=n.indexOf(".");return parseFloat(n.substring(0,r+1+t))},dist:function(e,t){var n=e.x-t.x,r=e.y-t.y;return s(n*n+r*r)},closest:function(e,t){var n,r,i=l(2,63);return e.forEach(function(e,a){r=p.dist(t,e),r<i&&(i=r,n=a)}),{mdist:i,mpos:n}},abcratio:function(e,n){if(2!==n&&3!==n)return!1;if("undefined"==typeof e)e=.5;else if(0===e||1===e)return e;var r=l(e,n)+l(1-e,n),i=r-1;return t(i/r)},projectionratio:function(e,t){if(2!==t&&3!==t)return!1;if("undefined"==typeof e)e=.5;else if(0===e||1===e)return e;var n=l(1-e,t),r=l(e,t)+n;return n/r},lli8:function(e,t,n,r,i,a,o,s){var l=(e*r-t*n)*(i-o)-(e-n)*(i*s-a*o),u=(e*r-t*n)*(a-s)-(t-r)*(i*s-a*o),c=(e-n)*(a-s)-(t-r)*(i-o);return 0!=c&&{x:l/c,y:u/c}},lli4:function(e,t,n,r){var i=e.x,a=e.y,o=t.x,s=t.y,l=n.x,u=n.y,c=r.x,h=r.y;return p.lli8(i,a,o,s,l,u,c,h)},lli:function(e,t){return p.lli4(e,e.c,t,t.c)},makeline:function(e,t){var r=n(65),i=e.x,a=e.y,o=t.x,s=t.y,l=(o-i)/3,u=(s-a)/3;return new r(i,a,i+l,a+u,i+2*l,a+2*u,o,s)},findbbox:function(e){var t=99999999,n=t,r=-t,i=r;return e.forEach(function(e){var a=e.bbox();t>a.x.min&&(t=a.x.min),n>a.y.min&&(n=a.y.min),r<a.x.max&&(r=a.x.max),i<a.y.max&&(i=a.y.max)}),{x:{min:t,mid:(t+r)/2,max:r,size:r-t},y:{min:n,mid:(n+i)/2,max:i,size:i-n}}},shapeintersections:function(e,t,n,r,i){if(!p.bboxoverlap(t,r))return[];var a=[],o=[e.startcap,e.forward,e.back,e.endcap],s=[n.startcap,n.forward,n.back,n.endcap];return o.forEach(function(t){t.virtual||s.forEach(function(r){if(!r.virtual){var o=t.intersects(r,i);o.length>0&&(o.c1=t,o.c2=r,o.s1=e,o.s2=n,a.push(o))}})}),a},makeshape:function(e,t,n){var r=t.points.length,i=e.points.length,a=p.makeline(t.points[r-1],e.points[0]),o=p.makeline(e.points[i-1],t.points[0]),s={startcap:a,forward:e,back:t,endcap:o,bbox:p.findbbox([a,e,t,o])},l=p;return s.intersections=function(e){return l.shapeintersections(s,s.bbox,e,e.bbox,n)},s},getminmax:function(e,t,n){if(!n)return{min:0,max:0};var r,i,a=0x10000000000000000,o=-a;n.indexOf(0)===-1&&(n=[0].concat(n)),n.indexOf(1)===-1&&n.push(1);for(var s=0,l=n.length;s<l;s++)r=n[s],i=e.get(r),i[t]<a&&(a=i[t]),i[t]>o&&(o=i[t]);return{min:a,mid:(a+o)/2,max:o,size:o-a}},align:function(e,t){var n=t.p1.x,a=t.p1.y,s=-o(t.p2.y-a,t.p2.x-n),l=function(e){return{x:(e.x-n)*r(s)-(e.y-a)*i(s),y:(e.x-n)*i(s)+(e.y-a)*r(s)}};return e.map(l)},roots:function(e,t){t=t||{p1:{x:0,y:0},p2:{x:1,y:0}};var n=e.length-1,i=p.align(e,t),o=function(e){return 0<=e&&e<=1};if(2===n){var l=i[0].y,c=i[1].y,d=i[2].y,f=l-2*c+d;if(0!==f){var m=-s(c*c-l*d),g=-l+c,v=-(m+g)/f,y=-(-m+g)/f;return[v,y].filter(o)}return c!==d&&0===f?[(2*c-d)/2*(c-d)].filter(o):[]}var w,v,b,_,x,E=i[0].y,C=i[1].y,k=i[2].y,S=i[3].y,f=-E+3*C-3*k+S,l=(3*E-6*C+3*k)/f,c=(-3*E+3*C)/f,d=E/f,i=(3*c-l*l)/3,P=i/3,T=(2*l*l*l-9*l*c+27*d)/27,N=T/2,M=N*N+P*P*P;if(M<0){var L=-i/3,I=L*L*L,A=s(I),O=-T/(2*A),B=O<-1?-1:O>1?1:O,z=a(B),D=u(A),R=2*D;return b=R*r(z/3)-l/3,_=R*r((z+h)/3)-l/3,x=R*r((z+2*h)/3)-l/3,[b,_,x].filter(o)}if(0===M)return w=N<0?u(-N):-u(N),b=2*w-l/3,_=-w-l/3,[b,_].filter(o);var j=s(M);return w=u(-N+j),v=u(N+j),[w-v-l/3].filter(o)},droots:function(e){if(3===e.length){var t=e[0],n=e[1],r=e[2],i=t-2*n+r;if(0!==i){var a=-s(n*n-t*r),o=-t+n,l=-(a+o)/i,u=-(-a+o)/i;return[l,u]}return n!==r&&0===i?[(2*n-r)/(2*(n-r))]:[]}if(2===e.length){var t=e[0],n=e[1];return t!==n?[t/(t-n)]:[]}},inflections:function(e){if(e.length<4)return[];var t=p.align(e,{p1:e[0],p2:e.slice(-1)[0]}),n=t[2].x*t[1].y,r=t[3].x*t[1].y,i=t[1].x*t[2].y,a=t[3].x*t[2].y,o=18*(-3*n+2*r+3*i-a),s=18*(3*n-r-3*i),l=18*(i-n);if(p.approximately(o,0))return[];var u=s*s-4*o*l,c=Math.sqrt(u),a=2*o;return p.approximately(a,0)?[]:[(c-s)/a,-(s+c)/a].filter(function(e){return 0<=e&&e<=1})},bboxoverlap:function(e,n){var r,i,a,o,s,l=["x","y"],u=l.length;for(r=0;r<u;r++)if(i=l[r],a=e[i].mid,o=n[i].mid,s=(e[i].size+n[i].size)/2,t(a-o)>=s)return!1;return!0},expandbox:function(e,t){t.x.min<e.x.min&&(e.x.min=t.x.min),t.y.min<e.y.min&&(e.y.min=t.y.min),t.z&&t.z.min<e.z.min&&(e.z.min=t.z.min),t.x.max>e.x.max&&(e.x.max=t.x.max),t.y.max>e.y.max&&(e.y.max=t.y.max),t.z&&t.z.max>e.z.max&&(e.z.max=t.z.max),e.x.mid=(e.x.min+e.x.max)/2,e.y.mid=(e.y.min+e.y.max)/2,e.z&&(e.z.mid=(e.z.min+e.z.max)/2),e.x.size=e.x.max-e.x.min,e.y.size=e.y.max-e.y.min,e.z&&(e.z.size=e.z.max-e.z.min)},pairiteration:function(e,t,n){var r=e.bbox(),i=t.bbox(),a=1e5,o=n||.5;if(r.x.size+r.y.size<o&&i.x.size+i.y.size<o)return[(a*(e._t1+e._t2)/2|0)/a+"/"+(a*(t._t1+t._t2)/2|0)/a];var s=e.split(.5),l=t.split(.5),u=[{left:s.left,right:l.left},{left:s.left,right:l.right},{left:s.right,right:l.right},{left:s.right,right:l.left}];u=u.filter(function(e){return p.bboxoverlap(e.left.bbox(),e.right.bbox())});var c=[];return 0===u.length?c:(u.forEach(function(e){c=c.concat(p.pairiteration(e.left,e.right,o))}),c=c.filter(function(e,t){return c.indexOf(e)===t}))},getccenter:function(e,t,n){var a,s=t.x-e.x,l=t.y-e.y,u=n.x-t.x,c=n.y-t.y,f=s*r(d)-l*i(d),m=s*i(d)+l*r(d),g=u*r(d)-c*i(d),v=u*i(d)+c*r(d),y=(e.x+t.x)/2,w=(e.y+t.y)/2,b=(t.x+n.x)/2,_=(t.y+n.y)/2,x=y+f,E=w+m,C=b+g,k=_+v,S=p.lli8(y,w,x,E,b,_,C,k),P=p.dist(S,e),T=o(e.y-S.y,e.x-S.x),N=o(t.y-S.y,t.x-S.x),M=o(n.y-S.y,n.x-S.x);return T<M?((T>N||N>M)&&(T+=h),T>M&&(a=M,M=T,T=a)):M<N&&N<T?(a=M,M=T,T=a):M+=h,S.s=T,S.e=M,S.r=P,S}};e.exports=p}()},function(e,t,n){"use strict";var r=n(11),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,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};e.exports=i},function(e,t,n){"use strict";function r(e){try{e.focus()}catch(e){}}e.exports=r},function(e,t,n){"use strict";function r(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}e.exports=r},function(e,t,n){"use strict";function r(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent("on"+t,n)}function i(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent("on"+t,n)}function a(){return window.location.href.split("#")[1]||""}function o(e){window.location.replace(window.location.pathname+window.location.search+"#"+e)}function s(){return window.location.pathname+window.location.search+window.location.hash}function l(e){e&&window.history.go(e)}function u(e,t){t(window.confirm(e))}function c(){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 h(){var e=navigator.userAgent;return e.indexOf("Firefox")===-1}t.__esModule=!0,t.addEventListener=r,t.removeEventListener=i,t.getHashPath=a,t.replaceHashPath=o,t.getWindowPath=s,t.go=l,t.getUserConfirmation=u,t.supportsHistory=c,t.supportsGoWithoutReloadUsingHash=h},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 D.push(e),function(){D=D.filter(function(t){return t!==e})}}function t(){return q&&q.action===h.POP?R.indexOf(q.key):F?R.indexOf(F.key):-1}function n(e){var n=t();F=e,F.action===h.PUSH?R=[].concat(R.slice(0,n+1),[F.key]):F.action===h.REPLACE&&(R[n]=F.key),j.forEach(function(e){e(F)})}function r(e){if(j.push(e),F)e(F);else{var t=L();R=[t.key],n(t)}return function(){j=j.filter(function(t){return t!==e})}}function o(e,t){c.loopAsync(D.length,function(t,n,r){m.default(D[t],e,function(e){null!=e?r(e):n()})},function(e){z&&"string"==typeof e?z(e,function(e){t(e!==!1)}):t(e!==!1)})}function l(e){F&&a(F,e)||(q=e,o(e,function(t){if(q===e)if(t){if(e.action===h.PUSH){var r=_(F),i=_(e);i===r&&(e.action=h.REPLACE)}I(e)!==!1&&n(e)}else if(F&&e.action===h.POP){var a=R.indexOf(F.key),o=R.indexOf(e.key);a!==-1&&o!==-1&&O(a-o)}}))}function u(e){l(E(e,h.PUSH,y()))}function d(e){l(E(e,h.REPLACE,y()))}function p(){O(-1)}function g(){O(1)}function y(){return i(B)}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()),f.default(e,t,n)}function C(e){F?(k(F,e),n(F)):k(L(),e)}function k(e,t){e.state=s({},e.state,t),A(e.key,e.state)}function S(e){D.indexOf(e)===-1&&D.push(e)}function P(e){D=D.filter(function(t){return t!==e})}function T(e,t){"string"==typeof t&&(t=v.default(t)),u(s({state:e},t))}function N(e,t){"string"==typeof t&&(t=v.default(t)),d(s({state:e},t))}var M=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],L=M.getCurrentLocation,I=M.finishTransition,A=M.saveState,O=M.go,B=M.keyLength,z=M.getUserConfirmation;"number"!=typeof B&&(B=b);var D=[],R=[],j=[],F=void 0,q=void 0;return{listenBefore:e,listen:r,transitionTo:l,push:u,replace:d,go:O,goBack:p,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(S,"registerTransitionHook is deprecated; use listenBefore instead"),unregisterTransitionHook:w.default(P,"unregisterTransitionHook is deprecated; use the callback returned from listenBefore instead"),pushState:w.default(T,"pushState is deprecated; use push instead"),replaceState:w.default(N,"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(170),u=r(l),c=n(185),h=n(29),d=n(189),f=r(d),p=n(44),m=r(p),g=n(21),v=r(g),y=n(43),w=r(y),b=6;t.default=o,e.exports=t.default},function(e,t,n){"use strict";function r(e){var t=e.match(/^https?:\/\/[^\/]*/);return null==t?e:e.substring(t[0].length)}t.__esModule=!0,t.default=r,e.exports=t.default},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&&f&&(m=!1,f.length?p=f.concat(p):g=-1,p.length&&s())}function s(){if(!m){var e=i(o);m=!0;for(var t=p.length;t;){for(f=p,p=[];++g<t;)f&&f[g].run();g=-1,t=p.length}f=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 f,p=[],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];p.push(new l(e,t)),1!==p.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,n){"use strict";function r(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}var i={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},a=["Webkit","ms","Moz","O"];Object.keys(i).forEach(function(e){a.forEach(function(t){i[r(t,e)]=i[e]})});var o={background:{backgroundAttachment:!0,backgroundColor:!0,backgroundImage:!0,backgroundPositionX:!0,backgroundPositionY:!0,backgroundRepeat:!0},backgroundPosition:{backgroundPositionX:!0,backgroundPositionY:!0},border:{borderWidth:!0,borderStyle:!0,borderColor:!0},borderBottom:{borderBottomWidth:!0,borderBottomStyle:!0,borderBottomColor:!0},borderLeft:{borderLeftWidth:!0,borderLeftStyle:!0,borderLeftColor:!0},borderRight:{borderRightWidth:!0,borderRightStyle:!0,borderRightColor:!0},borderTop:{borderTopWidth:!0,borderTopStyle:!0,borderTopColor:!0},font:{fontStyle:!0,fontVariant:!0,fontWeight:!0,fontSize:!0,lineHeight:!0,fontFamily:!0},outline:{outlineWidth:!0,outlineStyle:!0,outlineColor:!0}},s={isUnitlessNumber:i,shorthandPropertyExpansions:o};e.exports=s},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(3),a=n(19),o=(n(1),function(){function e(t){r(this,e),this._callbacks=null,this._contexts=null,this._arg=t}return e.prototype.enqueue=function(e,t){this._callbacks=this._callbacks||[],this._callbacks.push(e),this._contexts=this._contexts||[],this._contexts.push(t)},e.prototype.notifyAll=function(){var e=this._callbacks,t=this._contexts,n=this._arg;if(e&&t){e.length!==t.length?i("24"):void 0,this._callbacks=null,this._contexts=null;for(var r=0;r<e.length;r++)e[r].call(t[r],n);e.length=0,t.length=0}},e.prototype.checkpoint=function(){return this._callbacks?this._callbacks.length:0},e.prototype.rollback=function(e){this._callbacks&&this._contexts&&(this._callbacks.length=e,this._contexts.length=e)},e.prototype.reset=function(){this._callbacks=null,this._contexts=null},e.prototype.destructor=function(){this.reset()},e}());e.exports=a.addPoolingTo(o)},function(e,t,n){
+"use strict";function r(e){return!!u.hasOwnProperty(e)||!l.hasOwnProperty(e)&&(s.test(e)?(u[e]=!0,!0):(l[e]=!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(23),o=(n(7),n(13),n(257)),s=(n(2),new RegExp("^["+a.ATTRIBUTE_NAME_START_CHAR+"]["+a.ATTRIBUTE_NAME_CHAR+"]*$")),l={},u={},c={createMarkupForID:function(e){return a.ID_ATTRIBUTE_NAME+"="+o(e)},setAttributeForID:function(e,t){e.setAttribute(a.ID_ATTRIBUTE_NAME,t)},createMarkupForRoot:function(){return a.ROOT_ATTRIBUTE_NAME+'=""'},setAttributeForRoot:function(e){e.setAttribute(a.ROOT_ATTRIBUTE_NAME,"")},createMarkupForProperty:function(e,t){var n=a.properties.hasOwnProperty(e)?a.properties[e]:null;if(n){if(i(n,t))return"";var r=n.attributeName;return n.hasBooleanValue||n.hasOverloadedBooleanValue&&t===!0?r+'=""':r+"="+o(t)}return a.isCustomAttribute(e)?null==t?"":e+"="+o(t):null},createMarkupForCustomAttribute:function(e,t){return r(e)&&null!=t?e+"="+o(t):""},setValueForProperty:function(e,t,n){var r=a.properties.hasOwnProperty(t)?a.properties[t]:null;if(r){var o=r.mutationMethod;if(o)o(e,n);else{if(i(r,n))return void this.deleteValueForProperty(e,t);if(r.mustUseProperty)e[r.propertyName]=n;else{var s=r.attributeName,l=r.attributeNamespace;l?e.setAttributeNS(l,s,""+n):r.hasBooleanValue||r.hasOverloadedBooleanValue&&n===!0?e.setAttribute(s,""):e.setAttribute(s,""+n)}}}else if(a.isCustomAttribute(t))return void c.setValueForAttribute(e,t,n)},setValueForAttribute:function(e,t,n){if(r(t)){null==n?e.removeAttribute(t):e.setAttribute(t,""+n)}},deleteValueForAttribute:function(e,t){e.removeAttribute(t)},deleteValueForProperty:function(e,t){var n=a.properties.hasOwnProperty(t)?a.properties[t]:null;if(n){var r=n.mutationMethod;if(r)r(e,void 0);else if(n.mustUseProperty){var i=n.propertyName;n.hasBooleanValue?e[i]=!1:e[i]=""}else e.removeAttribute(n.attributeName)}else a.isCustomAttribute(t)&&e.removeAttribute(t)}};e.exports=c},function(e,t,n){"use strict";var r={hasCachedChildNodes:1};e.exports=r},function(e,t,n){"use strict";function r(){if(this._rootNodeID&&this._wrapperState.pendingUpdate){this._wrapperState.pendingUpdate=!1;var e=this._currentElement.props,t=s.getValue(e);null!=t&&i(this,Boolean(e.multiple),t)}}function i(e,t,n){var r,i,a=l.getNodeFromInstance(e).options;if(t){for(r={},i=0;i<n.length;i++)r[""+n[i]]=!0;for(i=0;i<a.length;i++){var o=r.hasOwnProperty(a[i].value);a[i].selected!==o&&(a[i].selected=o)}}else{for(r=""+n,i=0;i<a.length;i++)if(a[i].value===r)return void(a[i].selected=!0);a.length&&(a[0].selected=!0)}}function a(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);return this._rootNodeID&&(this._wrapperState.pendingUpdate=!0),u.asap(r,this),n}var o=n(5),s=n(50),l=n(7),u=n(14),c=(n(2),!1),h={getHostProps:function(e,t){return o({},t,{onChange:e._wrapperState.onChange,value:void 0})},mountWrapper:function(e,t){var n=s.getValue(t);e._wrapperState={pendingUpdate:!1,initialValue:null!=n?n:t.defaultValue,listeners:null,onChange:a.bind(e),wasMultiple:Boolean(t.multiple)},void 0===t.value||void 0===t.defaultValue||c||(c=!0)},getSelectValueContext:function(e){return e._wrapperState.initialValue},postUpdateWrapper:function(e){var t=e._currentElement.props;e._wrapperState.initialValue=void 0;var n=e._wrapperState.wasMultiple;e._wrapperState.wasMultiple=Boolean(t.multiple);var r=s.getValue(t);null!=r?(e._wrapperState.pendingUpdate=!1,i(e,Boolean(t.multiple),r)):n!==Boolean(t.multiple)&&(null!=t.defaultValue?i(e,Boolean(t.multiple),t.defaultValue):i(e,Boolean(t.multiple),t.multiple?[]:""))}};e.exports=h},function(e,t,n){"use strict";var r,i={injectEmptyComponentFactory:function(e){r=e}},a={create:function(e){return r(e)}};a.injection=i,e.exports=a},function(e,t,n){"use strict";var r={logTopLevelRenders:!1};e.exports=r},function(e,t,n){"use strict";function r(e){return s?void 0:o("111",e.type),new s(e)}function i(e){return new l(e)}function a(e){return e instanceof l}var o=n(3),s=(n(1),null),l=null,u={injectGenericComponentClass:function(e){s=e},injectTextComponentClass:function(e){l=e}},c={createInternalComponent:r,createInstanceForText:i,isTextComponent:a,injection:u};e.exports=c},function(e,t,n){"use strict";function r(e){return a(document.documentElement,e)}var i=n(216),a=n(175),o=n(68),s=n(69),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(void 0===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){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===O?e.documentElement:e.firstChild:null}function a(e){return e.getAttribute&&e.getAttribute(L)||""}function o(e,t,n,r,i){var a;if(_.logTopLevelRenders){var o=e._currentElement.props.child,s=o.type;a="React mount: "+("string"==typeof s?s:s.displayName||s.name),console.time(a)}var l=C.mountComponent(e,n,null,w(e,t),i,0);a&&console.timeEnd(a),e._renderedComponent._topLevelWrapper=e,j._mountImageIntoNode(l,t,e,r,n)}function s(e,t,n,r){var i=S.ReactReconcileTransaction.getPooled(!n&&b.useCreateElement);i.perform(o,null,e,t,i,n,r),S.ReactReconcileTransaction.release(i)}function l(e,t,n){for(C.unmountComponent(e,n),t.nodeType===O&&(t=t.documentElement);t.lastChild;)t.removeChild(t.lastChild)}function u(e){var t=i(e);if(t){var n=y.getInstanceFromNode(t);return!(!n||!n._hostParent)}}function c(e){return!(!e||e.nodeType!==A&&e.nodeType!==O&&e.nodeType!==B)}function h(e){var t=i(e),n=t&&y.getInstanceFromNode(t);return n&&!n._hostParent?n:null}function d(e){var t=h(e);return t?t._hostContainerInfo._topLevelWrapper:null}var f=n(3),p=n(22),m=n(23),g=n(25),v=n(35),y=(n(17),n(7)),w=n(210),b=n(212),_=n(80),x=n(32),E=(n(13),n(226)),C=n(24),k=n(53),S=n(14),P=n(28),T=n(90),N=(n(1),n(39)),M=n(59),L=(n(2),m.ID_ATTRIBUTE_NAME),I=m.ROOT_ATTRIBUTE_NAME,A=1,O=9,B=11,z={},D=1,R=function(){this.rootID=D++};R.prototype.isReactComponent={},R.prototype.render=function(){return this.props.child},R.isReactTopLevelWrapper=!0;var j={TopLevelWrapper:R,_instancesByReactRootID:z,scrollMonitor:function(e,t){t()},_updateRootComponent:function(e,t,n,r,i){return j.scrollMonitor(r,function(){k.enqueueElementInternal(e,t,n),i&&k.enqueueCallbackInternal(e,i)}),e},_renderNewRootComponent:function(e,t,n,r){c(t)?void 0:f("37"),v.ensureScrollValueMonitoring();var i=T(e,!1);S.batchedUpdates(s,i,t,n,r);var a=i._instance.rootID;return z[a]=i,i},renderSubtreeIntoContainer:function(e,t,n,r){return null!=e&&x.has(e)?void 0:f("38"),j._renderSubtreeIntoContainer(e,t,n,r)},_renderSubtreeIntoContainer:function(e,t,n,r){k.validateCallback(r,"ReactDOM.render"),g.isValidElement(t)?void 0:f("39","string"==typeof t?" Instead of passing a string like 'div', pass React.createElement('div') or <div />.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or <Foo />.":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var o,s=g.createElement(R,{child:t});if(e){var l=x.get(e);o=l._processChildContext(l._context)}else o=P;var c=d(n);if(c){var h=c._currentElement,p=h.props.child;if(M(p,t)){var m=c._renderedComponent.getPublicInstance(),v=r&&function(){r.call(m)};return j._updateRootComponent(c,s,o,n,v),m}j.unmountComponentAtNode(n)}var y=i(n),w=y&&!!a(y),b=u(n),_=w&&!c&&!b,E=j._renderNewRootComponent(s,n,_,o)._renderedComponent.getPublicInstance();return r&&r.call(E),E},render:function(e,t,n){return j._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){c(e)?void 0:f("40");var t=d(e);if(!t){u(e),1===e.nodeType&&e.hasAttribute(I);return!1}return delete z[t._instance.rootID],S.batchedUpdates(l,t,e,!1),!0},_mountImageIntoNode:function(e,t,n,a,o){if(c(t)?void 0:f("41"),a){var s=i(t);if(E.canReuseMarkup(e,s))return void y.precacheNode(n,s);var l=s.getAttribute(E.CHECKSUM_ATTR_NAME);s.removeAttribute(E.CHECKSUM_ATTR_NAME);var u=s.outerHTML;s.setAttribute(E.CHECKSUM_ATTR_NAME,l);var h=e,d=r(h,u),m=" (client) "+h.substring(d-20,d+20)+"\n (server) "+u.substring(d-20,d+20);t.nodeType===O?f("42",m):void 0}if(t.nodeType===O?f("43"):void 0,o.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);p.insertTreeBefore(t,e,null)}else N(t,e),y.precacheNode(n,t.firstChild)}};e.exports=j},function(e,t,n){"use strict";var r=n(3),i=n(25),a=(n(1),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?a.EMPTY:i.isValidElement(e)?"function"==typeof e.type?a.COMPOSITE:a.HOST:void r("26",e)}});e.exports=a},function(e,t,n){"use strict";var r={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){r.currentScrollLeft=e.x,r.currentScrollTop=e.y}};e.exports=r},function(e,t,n){"use strict";function r(e,t){return null==t?i("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var i=n(3);n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=r},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===i.COMPOSITE;)e=e._renderedComponent;return t===i.HOST?e._renderedComponent:t===i.EMPTY?null:void 0}var i=n(84);e.exports=r},function(e,t,n){"use strict";function r(){return!a&&i.canUseDOM&&(a="textContent"in document.documentElement?"textContent":"innerText"),a}var i=n(9),a=null;e.exports=r},function(e,t,n){"use strict";function r(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function i(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function a(e,t){var n;if(null===e||e===!1)n=u.create(a);else if("object"==typeof e){var s=e,l=s.type;if("function"!=typeof l&&"string"!=typeof l){var d="";d+=r(s._owner),o("130",null==l?l:typeof l,d)}"string"==typeof s.type?n=c.createInternalComponent(s):i(s.type)?(n=new s.type(s),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new h(s)}else"string"==typeof e||"number"==typeof e?n=c.createInstanceForText(e):o("131",typeof e);return n._mountIndex=0,n._mountImage=null,n}var o=n(3),s=n(5),l=n(207),u=n(79),c=n(81),h=(n(254),n(1),n(2),function(e){this.construct(e)});s(h.prototype,l,{_instantiateReactComponent:a}),e.exports=a},function(e,t,n){"use strict";function r(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!i[e.type]:"textarea"===t}var i={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=r},function(e,t,n){"use strict";var r=n(9),i=n(38),a=n(39),o=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(o=function(e,t){return 3===e.nodeType?void(e.nodeValue=t):void a(e,i(t))})),e.exports=o},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?u.escape(e.key):t.toString(36)}function i(e,t,n,a){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||"object"===d&&e.$$typeof===s)return n(a,e,""===t?c+r(e,0):t),1;var f,p,m=0,g=""===t?c:t+h;if(Array.isArray(e))for(var v=0;v<e.length;v++)f=e[v],p=g+r(f,v),m+=i(f,p,n,a);else{var y=l(e);if(y){var w,b=y.call(e);if(y!==e.entries)for(var _=0;!(w=b.next()).done;)f=w.value,p=g+r(f,_++),m+=i(f,p,n,a);else for(;!(w=b.next()).done;){var x=w.value;x&&(f=x[1],p=g+u.escape(x[0])+h+r(f,0),m+=i(f,p,n,a))}}else if("object"===d){var E="",C=String(e);o("31","[object Object]"===C?"object with keys {"+Object.keys(e).join(", ")+"}":C,E)}}return m}function a(e,t,n){return null==e?0:i(e,"",t,n)}var o=n(3),s=(n(17),n(222)),l=n(253),u=(n(1),n(49)),c=(n(2),"."),h=":";e.exports=a},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(0),d=r(h),f=d.default.PropTypes,p=f.bool,m=f.object,g=f.string,v=f.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 f=this.context.history;return f&&(h.href=f.createHref(n,r),a&&(h.href+=a),(o||null!=s&&!u(s))&&f.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:p.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=n(12),s=r(o),l=n(0),u=r(l),c=n(18),h=n(34),d=n(20),f=u.default.PropTypes,p=f.string,m=f.object,g=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(t,e),t.prototype.render=function(){s.default(!1)},t}(l.Component);g.createRouteFromReactElement=function(e){var t=c.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=h.formatPattern(t.to,i);else if(t.to){var o=e.routes.indexOf(t),s=g.getRoutePattern(e.routes,o-1),l=s.replace(/\/*$/,"/")+t.to;a=h.formatPattern(l,i)}else a=r.pathname;n(t.state||r.state,a,t.query||r.query)},t},g.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},g.propTypes={path:p,from:p,to:p.isRequired,query:m,state:m,onEnter:d.falsy,children:d.falsy},t.default=g,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(12),l=r(s),u=n(0),c=r(u),h=n(18),d=n(270),f=r(d),p=c.default.PropTypes,m=p.array,g=p.func,v=p.object,y=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(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,r=t.location,i=t.routes,a=t.params,s=t.components,u=null;return s&&(u=s.reduceRight(function(t,s,l){if(null==s)return t;var u=i[l],c=f.default(u,a),d={history:n,location:r,params:a,route:u,routeParams:c,routes:i};if(h.isReactChildren(t))d.children=t;else if(t)for(var p in t)t.hasOwnProperty(p)&&(d[p]=t[p]);if("object"==typeof s){var m={};for(var g in s)s.hasOwnProperty(g)&&(m[g]=e.createElement(s[g],o({key:g},d)));return m}return e.createElement(s,d)},u)),null===u||u===!1||c.default.isValidElement(u)?void 0:l.default(!1),u},t}(u.Component);y.propTypes={history:v.isRequired,createElement:g.isRequired,location:v.isRequired,routes:m.isRequired,params:v.isRequired,components:m.isRequired},y.defaultProps={createElement:c.default.createElement},y.childContextTypes={history:v.isRequired,location:v.isRequired},t.default=y,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(266),a=r(i);t.Router=a.default;var o=n(94),s=r(o);t.Link=s.default;var l=n(260),u=r(l);t.IndexLink=u.default;var c=n(261),h=r(c);t.IndexRedirect=h.default;var d=n(262),f=r(d);t.IndexRoute=f.default;var p=n(95),m=r(p);t.Redirect=m.default;var g=n(264),v=r(g);t.Route=v.default;var y=n(259),w=r(y);t.History=w.default;var b=n(263),_=r(b);t.Lifecycle=_.default;var x=n(265),E=r(x);t.RouteContext=E.default;var C=n(62),k=r(C);t.useRoutes=k.default;var S=n(18);t.createRoutes=S.createRoutes;var P=n(96),T=r(P);t.RoutingContext=T.default;var N=n(20),M=r(N);t.PropTypes=M.default;var L=n(272),I=r(L);t.match=I.default;var A=r(i);t.default=A.default},function(e,t,n){"use strict";function r(e){var t=Function.prototype.toString,n=Object.prototype.hasOwnProperty,r=RegExp("^"+t.call(n).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");try{var i=t.call(e);return r.test(i)}catch(e){return!1}}function i(e){var t=u(e);if(t){var n=t.childIDs;c(e),n.forEach(i)}}function a(e,t,n){return"\n    in "+(e||"Unknown")+(t?" (at "+t.fileName.replace(/^.*[\\\/]/,"")+":"+t.lineNumber+")":n?" (created by "+n+")":"")}function o(e){return null==e?"#empty":"string"==typeof e||"number"==typeof e?"#text":"string"==typeof e.type?e.type:e.type.displayName||e.type.name||"Unknown"}function s(e){var t,n=k.getDisplayName(e),r=k.getElement(e),i=k.getOwnerID(e);return i&&(t=k.getDisplayName(i)),a(n,r&&r._source,t)}var l,u,c,h,d,f,p,m=n(27),g=n(17),v=(n(1),n(2),"function"==typeof Array.from&&"function"==typeof Map&&r(Map)&&null!=Map.prototype&&"function"==typeof Map.prototype.keys&&r(Map.prototype.keys)&&"function"==typeof Set&&r(Set)&&null!=Set.prototype&&"function"==typeof Set.prototype.keys&&r(Set.prototype.keys));if(v){var y=new Map,w=new Set;l=function(e,t){y.set(e,t)},u=function(e){return y.get(e)},c=function(e){y.delete(e)},h=function(){return Array.from(y.keys())},d=function(e){w.add(e)},f=function(e){w.delete(e)},p=function(){return Array.from(w.keys())}}else{var b={},_={},x=function(e){return"."+e},E=function(e){return parseInt(e.substr(1),10)};l=function(e,t){var n=x(e);b[n]=t},u=function(e){var t=x(e);return b[t]},c=function(e){var t=x(e);delete b[t]},h=function(){return Object.keys(b).map(E)},d=function(e){var t=x(e);_[t]=!0},f=function(e){var t=x(e);delete _[t]},p=function(){return Object.keys(_).map(E)}}var C=[],k={onSetChildren:function(e,t){var n=u(e);n?void 0:m("144"),n.childIDs=t;for(var r=0;r<t.length;r++){var i=t[r],a=u(i);a?void 0:m("140"),null==a.childIDs&&"object"==typeof a.element&&null!=a.element?m("141"):void 0,a.isMounted?void 0:m("71"),null==a.parentID&&(a.parentID=e),a.parentID!==e?m("142",i,a.parentID,e):void 0}},onBeforeMountComponent:function(e,t,n){var r={element:t,parentID:n,text:null,childIDs:[],isMounted:!1,updateCount:0};l(e,r)},onBeforeUpdateComponent:function(e,t){var n=u(e);n&&n.isMounted&&(n.element=t)},onMountComponent:function(e){var t=u(e);t?void 0:m("144"),t.isMounted=!0;var n=0===t.parentID;n&&d(e)},onUpdateComponent:function(e){var t=u(e);t&&t.isMounted&&t.updateCount++},onUnmountComponent:function(e){var t=u(e);if(t){t.isMounted=!1;var n=0===t.parentID;n&&f(e)}C.push(e)},purgeUnmountedComponents:function(){if(!k._preventPurging){for(var e=0;e<C.length;e++){var t=C[e];i(t)}C.length=0}},isMounted:function(e){var t=u(e);return!!t&&t.isMounted},getCurrentStackAddendum:function(e){var t="";if(e){var n=o(e),r=e._owner;t+=a(n,e._source,r&&r.getName())}var i=g.current,s=i&&i._debugID;return t+=k.getStackAddendumByID(s)},getStackAddendumByID:function(e){for(var t="";e;)t+=s(e),e=k.getParentID(e);return t},getChildIDs:function(e){var t=u(e);return t?t.childIDs:[]},getDisplayName:function(e){var t=k.getElement(e);return t?o(t):null},getElement:function(e){var t=u(e);return t?t.element:null},getOwnerID:function(e){var t=k.getElement(e);return t&&t._owner?t._owner._debugID:null},getParentID:function(e){var t=u(e);return t?t.parentID:null},getSource:function(e){var t=u(e),n=t?t.element:null,r=null!=n?n._source:null;return r},getText:function(e){var t=k.getElement(e);return"string"==typeof t?t:"number"==typeof t?""+t:null},getUpdateCount:function(e){var t=u(e);return t?t.updateCount:0},getRootIDs:p,getRegisteredIDs:h};e.exports=k},function(e,t,n){"use strict";var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;e.exports=r},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";var r=!1;e.exports=r},function(e,t,n){"use strict";function r(e){var t=e&&(i&&e[i]||e[a]);if("function"==typeof t)return t}var i="function"==typeof Symbol&&Symbol.iterator,a="@@iterator";e.exports=r},function(e,t,n){"use strict";var r=n(0),i=n(194),a=n(109);i.render(r.createElement(a,null),document.getElementById("article"))},function(e,t){e.exports=function(){}},function(e,t){e.exports=function(e,t,n,r,i,a,o){var s,l,u,c,h=n.length,d=n[0].length;if(t<1)throw new Error("degree must be at least 1 (linear)");if(t>h-1)throw new Error("degree must be less than or equal to point count - 1");if(!i)for(i=[],s=0;s<h;s++)i[s]=1;if(r){if(r.length!==h+t+1)throw new Error("bad knot vector length")}else{var r=[];for(s=0;s<h+t+1;s++)r[s]=s}var f=[t,r.length-1-t],p=r[f[0]],m=r[f[1]];if(o||(e=e*(m-p)+p),e<p||e>m)throw new Error("out of bounds");for(u=f[0];u<f[1]&&!(e>=r[u]&&e<=r[u+1]);u++);var g=[];for(s=0;s<h;s++){for(g[s]=[],l=0;l<d;l++)g[s][l]=n[s][l]*i[s];g[s][d]=i[s]}var v;for(c=1;c<=t+1;c++)for(s=u;s>u-t-1+c;s--)for(v=(e-r[s])/(r[s+t+1-c]-r[s]),l=0;l<d+1;l++)g[s][l]=(1-v)*g[s-1][l]+v*g[s][l];var a=a||[];for(s=0;s<d;s++)a[s]=g[u][s]/g[u][d];return a}},function(e,t,n){var r,i,a=new function(o){var s=new function(){function e(e,t,n,i,a){function o(r,o){o=o||(o=u(t,r))&&(o.get?o:o.value),"string"==typeof o&&"#"===o[0]&&(o=e[o.substring(1)]||o);var c,d="function"==typeof o,f=o,p=a||d&&!o.base?o&&o.get?r in e:e[r]:null;a&&p||(d&&p&&(o.base=p),d&&i!==!1&&(c=r.match(/^([gs]et|is)(([A-Z])(.*))$/))&&(l[c[3].toLowerCase()+c[4]]=c[2]),f&&!d&&f.get&&"function"==typeof f.get&&s.isPlainObject(f)||(f={value:f,writable:!0}),(u(e,r)||{configurable:!0}).configurable&&(f.configurable=!0,f.enumerable=n),h(e,r,f))}var l={};if(t){for(var c in t)t.hasOwnProperty(c)&&!r.test(c)&&o(c);for(var c in l){var d=l[c],f=e["set"+d],p=e["get"+d]||f&&e["is"+d];!p||i!==!0&&0!==p.length||o(c,{get:p,set:f})}}return e}function t(e,t,n){return e&&("length"in e&&!e.getLength&&"number"==typeof e.length?i:a).call(e,t,n=n||e),n}function n(e,t,n){for(var r in t)!t.hasOwnProperty(r)||n&&n[r]||(e[r]=t[r]);return e}var r=/^(statics|enumerable|beans|preserve)$/,i=[].forEach||function(e,t){for(var n=0,r=this.length;n<r;n++)e.call(t,this[n],n,this)},a=function(e,t){for(var n in this)this.hasOwnProperty(n)&&e.call(t,this[n],n,this)},l=Object.create||function(e){return{__proto__:e}},u=Object.getOwnPropertyDescriptor||function(e,t){var n=e.__lookupGetter__&&e.__lookupGetter__(t);return n?{get:n,set:e.__lookupSetter__(t),enumerable:!0,configurable:!0}:e.hasOwnProperty(t)?{value:e[t],enumerable:!0,configurable:!0,writable:!0}:null},c=Object.defineProperty||function(e,t,n){return(n.get||n.set)&&e.__defineGetter__?(n.get&&e.__defineGetter__(t,n.get),n.set&&e.__defineSetter__(t,n.set)):e[t]=n.value,e},h=function(e,t,n){return delete e[t],c(e,t,n)};return e(function(){for(var e=0,t=arguments.length;e<t;e++)n(this,arguments[e])},{inject:function(t){if(t){var n=t.statics===!0?t:t.statics,r=t.beans,i=t.preserve;n!==t&&e(this.prototype,t,t.enumerable,r,i),e(this,n,!0,r,i)}for(var a=1,o=arguments.length;a<o;a++)this.inject(arguments[a]);return this},extend:function(){for(var t,n,r=this,i=0,a=arguments.length;i<a&&!(t=arguments[i].initialize);i++);return t=t||function(){r.apply(this,arguments)},n=t.prototype=l(this.prototype),h(n,"constructor",{value:t,writable:!0,configurable:!0}),e(t,this,!0),arguments.length&&this.inject.apply(t,arguments),t.base=r,t}},!0).inject({inject:function(){for(var t=0,n=arguments.length;t<n;t++){var r=arguments[t];r&&e(this,r,r.enumerable,r.beans,r.preserve)}return this},extend:function(){var e=l(this);return e.inject.apply(e,arguments)},each:function(e,n){return t(this,e,n)},set:function(e){return n(this,e)},clone:function(){return new this.constructor(this)},statics:{each:t,create:l,define:h,describe:u,set:n,clone:function(e){return n(new e.constructor,e)},isPlainObject:function(e){var t=null!=e&&e.constructor;return t&&(t===Object||t===s||"Object"===t.name)},pick:function(e,t){return e!==o?e:t}}})};e.exports=s,s.inject({toString:function(){return null!=this._id?(this._class||"Object")+(this._name?" '"+this._name+"'":" @"+this._id):"{ "+s.each(this,function(e,t){if(!/^_/.test(t)){var n=typeof e;this.push(t+": "+("number"===n?h.instance.number(e):"string"===n?"'"+e+"'":e))}},[]).join(", ")+" }"},getClassName:function(){return this._class||""},exportJSON:function(e){return s.exportJSON(this,e)},toJSON:function(){return s.serialize(this)},_set:function(e,t,n){if(e&&(n||s.isPlainObject(e))){for(var r=Object.keys(e._filtering||e),i=0,a=r.length;i<a;i++){var l=r[i];if(!t||!t[l]){var u=e[l];u!==o&&(this[l]=u)}}return!0}},statics:{exports:{enumerable:!0},extend:function e(){var t=e.base.apply(this,arguments),n=t.prototype._class;return n&&!s.exports[n]&&(s.exports[n]=t),t},equals:function(e,t){if(e===t)return!0;if(e&&e.equals)return e.equals(t);if(t&&t.equals)return t.equals(e);if(e&&t&&"object"==typeof e&&"object"==typeof t){if(Array.isArray(e)&&Array.isArray(t)){var n=e.length;if(n!==t.length)return!1;for(;n--;)if(!s.equals(e[n],t[n]))return!1}else{var r=Object.keys(e),n=r.length;if(n!==Object.keys(t).length)return!1;for(;n--;){var i=r[n];if(!t.hasOwnProperty(i)||!s.equals(e[i],t[i]))return!1}}return!0}return!1},read:function(e,t,n,r){if(this===s){var i=this.peek(e,t);return e.__index++,i}var a=this.prototype,l=a._readIndex,u=t||l&&e.__index||0;r||(r=e.length-u);var c=e[u];return c instanceof this||n&&n.readNull&&null==c&&r<=1?(l&&(e.__index=u+1),c&&n&&n.clone?c.clone():c):(c=s.create(this.prototype),l&&(c.__read=!0),c=c.initialize.apply(c,u>0||r<e.length?Array.prototype.slice.call(e,u,u+r):e)||c,l&&(e.__index=u+c.__read,c.__read=o),c)},peek:function(e,t){return e[e.__index=t||e.__index||0]},remain:function(e){return e.length-(e.__index||0)},readAll:function(e,t,n){for(var r,i=[],a=t||0,o=e.length;a<o;a++)i.push(Array.isArray(r=e[a])?this.read(r,0,n):this.read(e,a,n,1));return i},readNamed:function(e,t,n,r,i){var a=this.getNamed(e,t),l=a!==o;if(l){var u=e._filtered;u||(u=e._filtered=s.create(e[0]),u._filtering=e[0]),u[t]=o}return this.read(l?[a]:e,n,r,i)},getNamed:function(e,t){var n=e[0];if(e._hasObject===o&&(e._hasObject=1===e.length&&s.isPlainObject(n)),e._hasObject)return t?n[t]:e._filtered||n},hasNamed:function(e,t){return!!this.getNamed(e,t)},isPlainValue:function(e,t){return this.isPlainObject(e)||Array.isArray(e)||t&&"string"==typeof e},serialize:function(e,t,n,r){t=t||{};var i,a=!r;if(a&&(t.formatter=new h(t.precision),r={length:0,definitions:{},references:{},add:function(e,t){var n="#"+e._id,r=this.references[n];if(!r){this.length++;var i=t.call(e),a=e._class;a&&i[0]!==a&&i.unshift(a),this.definitions[n]=i,r=this.references[n]=[n]}return r}}),e&&e._serialize){i=e._serialize(t,r);var o=e._class;!o||n||i._compact||i[0]===o||i.unshift(o)}else if(Array.isArray(e)){i=[];for(var l=0,u=e.length;l<u;l++)i[l]=s.serialize(e[l],t,n,r);n&&(i._compact=!0)}else if(s.isPlainObject(e)){i={};for(var c=Object.keys(e),l=0,u=c.length;l<u;l++){var d=c[l];i[d]=s.serialize(e[d],t,n,r)}}else i="number"==typeof e?t.formatter.number(e,t.precision):e;return a&&r.length>0?[["dictionary",r.definitions],i]:i},deserialize:function(e,t,n,r){var i=e,a=!n;if(n=n||{},Array.isArray(e)){var o=e[0],l="dictionary"===o;if(1==e.length&&/^#/.test(o))return n.dictionary[o];o=s.exports[o],i=[],r&&(n.dictionary=i);for(var u=o?1:0,c=e.length;u<c;u++)i.push(s.deserialize(e[u],t,n,l));if(o){var h=i;t?i=t(o,h):(i=s.create(o.prototype),o.apply(i,h))}}else if(s.isPlainObject(e)){i={},r&&(n.dictionary=i);for(var d in e)i[d]=s.deserialize(e[d],t,n)}return a&&e&&e.length&&"dictionary"===e[0][0]?i[1]:i},exportJSON:function(e,t){var n=s.serialize(e,t);return t&&t.asString===!1?n:JSON.stringify(n)},importJSON:function(e,t){return s.deserialize("string"==typeof e?JSON.parse(e):e,function(e,n){var r=t&&t.constructor===e?t:s.create(e.prototype),i=r===t;if(1===n.length&&r instanceof C&&(i||!(r instanceof S))){var a=n[0];s.isPlainObject(a)&&(a.insert=!1)}return e.apply(r,n),i&&(t=null),r})},splice:function(e,t,n,r){var i=t&&t.length,a=n===o;n=a?e.length:n,n>e.length&&(n=e.length);for(var s=0;s<i;s++)t[s]._index=n+s;if(a)return e.push.apply(e,t),[];var l=[n,r];t&&l.push.apply(l,t);for(var u=e.splice.apply(e,l),s=0,c=u.length;s<c;s++)u[s]._index=o;for(var s=n+i,c=e.length;s<c;s++)e[s]._index=s;return u},capitalize:function(e){return e.replace(/\b[a-z]/g,function(e){return e.toUpperCase()})},camelize:function(e){return e.replace(/-(.)/g,function(e,t){return t.toUpperCase()})},hyphenate:function(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}}});var l={on:function(e,t){if("string"!=typeof e)s.each(e,function(e,t){this.on(t,e)},this);else{var n=this._eventTypes,r=n&&n[e],i=this._callbacks=this._callbacks||{};i=i[e]=i[e]||[],i.indexOf(t)===-1&&(i.push(t),
 r&&r.install&&1===i.length&&r.install.call(this,e))}return this},off:function(e,t){if("string"!=typeof e)return void s.each(e,function(e,t){this.off(t,e)},this);var n,r=this._eventTypes,i=r&&r[e],a=this._callbacks&&this._callbacks[e];return a&&(!t||(n=a.indexOf(t))!==-1&&1===a.length?(i&&i.uninstall&&i.uninstall.call(this,e),delete this._callbacks[e]):n!==-1&&a.splice(n,1)),this},once:function(e,t){return this.on(e,function(){t.apply(this,arguments),this.off(e,t)})},emit:function(e,t){var n=this._callbacks&&this._callbacks[e];if(!n)return!1;var r=[].slice.call(arguments,1);n=n.slice();for(var i=0,a=n.length;i<a;i++)if(n[i].apply(this,r)===!1){t&&t.stop&&t.stop();break}return!0},responds:function(e){return!(!this._callbacks||!this._callbacks[e])},attach:"#on",detach:"#off",fire:"#emit",_installEvents:function(e){var t=this._callbacks,n=e?"install":"uninstall";for(var r in t)if(t[r].length>0){var i=this._eventTypes,a=i&&i[r],o=a&&a[n];o&&o.call(this,r)}},statics:{inject:function e(t){var n=t._events;if(n){var r={};s.each(n,function(e,n){var i="string"==typeof e,a=i?e:n,o=s.capitalize(a),l=a.substring(2).toLowerCase();r[l]=i?{}:e,a="_"+a,t["get"+o]=function(){return this[a]},t["set"+o]=function(e){var t=this[a];t&&this.off(l,t),e&&this.on(l,e),this[a]=e}}),t._eventTypes=r}return e.base.apply(this,arguments)}}},u=s.extend({_class:"PaperScope",initialize:function e(){a=this,this.settings=new s({applyMatrix:!0,handleSize:4,hitTolerance:0}),this.project=null,this.projects=[],this.tools=[],this.palettes=[],this._id=e._id++,e._scopes[this._id]=this;var t=e.prototype;if(!this.support){var n=ne.getContext(1,1);t.support={nativeDash:"setLineDash"in n||"mozDash"in n,nativeBlendModes:re.nativeModes},ne.release(n)}if(!this.browser){var r=navigator.userAgent.toLowerCase(),i=(/(win)/.exec(r)||/(mac)/.exec(r)||/(linux)/.exec(r)||[])[0],o=t.browser={platform:i};i&&(o[i]=!0),r.replace(/(opera|chrome|safari|webkit|firefox|msie|trident|atom)\/?\s*([.\d]+)(?:.*version\/([.\d]+))?(?:.*rv\:([.\d]+))?/g,function(e,t,n,r,i){if(!o.chrome){var a="opera"===t?r:n;"trident"===t&&(a=i,t="msie"),o.version=a,o.versionNumber=parseFloat(a),o.name=t,o[t]=!0}}),o.chrome&&delete o.webkit,o.atom&&delete o.chrome}},version:"0.9.25",getView:function(){return this.project&&this.project.getView()},getPaper:function(){return this},execute:function(e,t,n){a.PaperScript.execute(e,this,t,n),K.updateFocus()},install:function(e){var t=this;s.each(["project","view","tool"],function(n){s.define(e,n,{configurable:!0,get:function(){return t[n]}})});for(var n in this)!/^_/.test(n)&&this[n]&&(e[n]=this[n])},setup:function(e){return a=this,this.project=new x(e),this},activate:function(){a=this},clear:function(){for(var e=this.projects.length-1;e>=0;e--)this.projects[e].remove();for(var e=this.tools.length-1;e>=0;e--)this.tools[e].remove();for(var e=this.palettes.length-1;e>=0;e--)this.palettes[e].remove()},remove:function(){this.clear(),delete u._scopes[this._id]},statics:new function(){function e(e){return e+="Attribute",function(t,n){return t[e](n)||t[e]("data-paper-"+n)}}return{_scopes:{},_id:0,get:function(e){return this._scopes[e]||null},getAttribute:e("get"),hasAttribute:e("has")}}}),c=s.extend(l,{initialize:function(e){this._scope=a,this._index=this._scope[this._list].push(this)-1,!e&&this._scope[this._reference]||this.activate()},activate:function(){if(!this._scope)return!1;var e=this._scope[this._reference];return e&&e!==this&&e.emit("deactivate"),this._scope[this._reference]=this,this.emit("activate",e),!0},isActive:function(){return this._scope[this._reference]===this},remove:function(){return null!=this._index&&(s.splice(this._scope[this._list],null,this._index,1),this._scope[this._reference]==this&&(this._scope[this._reference]=null),this._scope=null,!0)}}),h=s.extend({initialize:function(e){this.precision=e||5,this.multiplier=Math.pow(10,this.precision)},number:function(e){return Math.round(e*this.multiplier)/this.multiplier},pair:function(e,t,n){return this.number(e)+(n||",")+this.number(t)},point:function(e,t){return this.number(e.x)+(t||",")+this.number(e.y)},size:function(e,t){return this.number(e.width)+(t||",")+this.number(e.height)},rectangle:function(e,t){return this.point(e,t)+(t||",")+this.size(e,t)}});h.instance=new h;var d=new function(){function e(e,t,n){return e<t?t:e>n?n:e}var t=[[.5773502691896257],[0,.7745966692414834],[.33998104358485626,.8611363115940526],[0,.5384693101056831,.906179845938664],[.2386191860831969,.6612093864662645,.932469514203152],[0,.4058451513773972,.7415311855993945,.9491079123427585],[.1834346424956498,.525532409916329,.7966664774136267,.9602898564975363],[0,.3242534234038089,.6133714327005904,.8360311073266358,.9681602395076261],[.14887433898163122,.4333953941292472,.6794095682990244,.8650633666889845,.9739065285171717],[0,.26954315595234496,.5190961292068118,.7301520055740494,.8870625997680953,.978228658146057],[.1252334085114689,.3678314989981802,.5873179542866175,.7699026741943047,.9041172563704749,.9815606342467192],[0,.2304583159551348,.44849275103644687,.6423493394403402,.8015780907333099,.9175983992229779,.9841830547185881],[.10805494870734367,.31911236892788974,.5152486363581541,.6872929048116855,.827201315069765,.9284348836635735,.9862838086968123],[0,.20119409399743451,.3941513470775634,.5709721726085388,.7244177313601701,.8482065834104272,.937273392400706,.9879925180204854],[.09501250983763744,.2816035507792589,.45801677765722737,.6178762444026438,.755404408355003,.8656312023878318,.9445750230732326,.9894009349916499]],n=[[1],[.8888888888888888,.5555555555555556],[.6521451548625461,.34785484513745385],[.5688888888888889,.47862867049936647,.23692688505618908],[.46791393457269104,.3607615730481386,.17132449237917036],[.4179591836734694,.3818300505051189,.27970539148927664,.1294849661688697],[.362683783378362,.31370664587788727,.22238103445337448,.10122853629037626],[.3302393550012598,.31234707704000286,.26061069640293544,.1806481606948574,.08127438836157441],[.29552422471475287,.26926671930999635,.21908636251598204,.1494513491505806,.06667134430868814],[.2729250867779006,.26280454451024665,.23319376459199048,.18629021092773426,.1255803694649046,.05566856711617366],[.24914704581340277,.2334925365383548,.20316742672306592,.16007832854334622,.10693932599531843,.04717533638651183],[.2325515532308739,.22628318026289723,.2078160475368885,.17814598076194574,.13887351021978725,.09212149983772845,.04048400476531588],[.2152638534631578,.2051984637212956,.18553839747793782,.15720316715819355,.12151857068790319,.08015808715976021,.03511946033175186],[.2025782419255613,.19843148532711158,.1861610000155622,.16626920581699392,.13957067792615432,.10715922046717194,.07036604748810812,.03075324199611727],[.1894506104550685,.18260341504492358,.16915651939500254,.14959598881657674,.12462897125553388,.09515851168249279,.062253523938647894,.027152459411754096]],r=Math.abs,i=Math.sqrt,a=Math.pow,o=1e-12,s=1.12e-16;return{TOLERANCE:1e-6,EPSILON:o,MACHINE_EPSILON:s,CURVETIME_EPSILON:4e-7,GEOMETRIC_EPSILON:2e-7,WINDING_EPSILON:2e-7,TRIGONOMETRIC_EPSILON:1e-7,CLIPPING_EPSILON:1e-7,KAPPA:4*(i(2)-1)/3,isZero:function(e){return e>=-o&&e<=o},integrate:function(e,r,i,a){for(var o=t[a-2],s=n[a-2],l=.5*(i-r),u=l+r,c=0,h=a+1>>1,d=1&a?s[c++]*e(u):0;c<h;){var f=l*o[c];d+=s[c++]*(e(u+f)+e(u-f))}return l*d},findRoot:function(e,t,n,i,a,o,s){for(var l=0;l<o;l++){var u=e(n),c=u/t(n),h=n-c;if(r(c)<s)return h;u>0?(a=n,n=h<=i?.5*(i+a):h):(i=n,n=h>=a?.5*(i+a):h)}return n},solveQuadratic:function(t,n,l,u,c,h){var d,f,p=0,m=c-o,g=h+o,v=1/0,y=n;if(n/=-2,f=n*n-t*l,0!==f&&r(f)<s){var w=a(r(t*n*l),1/3);if(w<1e-8){var b=a(10,r(Math.floor(Math.log(w)*Math.LOG10E)));isFinite(b)||(b=0),t*=b,n*=b,l*=b,f=n*n-t*l}}if(r(t)<o){if(r(y)<o)return r(l)<o?-1:0;d=-l/y}else if(f>=-s){var _=f<0?0:i(f),x=n+(n<0?-_:_);0===x?(d=l/t,v=-d):(d=x/t,v=l/x)}return isFinite(d)&&(null==c||d>m&&d<g)&&(u[p++]=null==c?d:e(d,c,h)),v!==d&&isFinite(v)&&(null==c||v>m&&v<g)&&(u[p++]=null==c?v:e(v,c,h)),p},solveCubic:function(t,n,l,u,c,h,f){var p,m,g,v=0;if(r(t)<o)t=n,m=l,g=u,p=1/0;else if(r(u)<o)m=n,g=l,p=0;else{var y,w,b,_,x,E,C,k=1+s;if(p=-(n/t)/3,C=t*p,m=C+n,g=m*p+l,b=(C+m)*p+g,w=g*p+u,_=w/t,x=a(r(_),1/3),E=_<0?-1:1,_=-b/t,x=_>0?1.3247179572*Math.max(x,i(_)):x,y=p-E*x,y!==p){do if(p=y,C=t*p,m=C+n,g=m*p+l,b=(C+m)*p+g,w=g*p+u,y=0===b?p:p-w/b/k,y===p){p=y;break}while(E*y>E*p);r(t)*p*p>r(u/p)&&(g=-u/p,m=(g-l)/p)}}var v=d.solveQuadratic(t,m,g,c,h,f);return isFinite(p)&&(0===v||p!==c[v-1])&&(null==h||p>h-o&&p<f+o)&&(c[v++]=null==h?p:e(p,h,f)),v}}},f={_id:1,_pools:{},get:function(e){if(e){var t=e._class,n=this._pools[t];return n||(n=this._pools[t]={_id:1}),n._id++}return this._id++}},p=s.extend({_class:"Point",_readIndex:!0,initialize:function(e,t){var n=typeof e;if("number"===n){var r="number"==typeof t;this.x=e,this.y=r?t:e,this.__read&&(this.__read=r?2:1)}else"undefined"===n||null===e?(this.x=this.y=0,this.__read&&(this.__read=null===e?1:0)):(Array.isArray(e)?(this.x=e[0],this.y=e.length>1?e[1]:e[0]):null!=e.x?(this.x=e.x,this.y=e.y):null!=e.width?(this.x=e.width,this.y=e.height):null!=e.angle?(this.x=e.length,this.y=0,this.setAngle(e.angle)):(this.x=this.y=0,this.__read&&(this.__read=0)),this.__read&&(this.__read=1))},set:function(e,t){return this.x=e,this.y=t,this},equals:function(e){return this===e||e&&(this.x===e.x&&this.y===e.y||Array.isArray(e)&&this.x===e[0]&&this.y===e[1])||!1},clone:function(){return new p(this.x,this.y)},toString:function(){var e=h.instance;return"{ x: "+e.number(this.x)+", y: "+e.number(this.y)+" }"},_serialize:function(e){var t=e.formatter;return[t.number(this.x),t.number(this.y)]},getLength:function(){return Math.sqrt(this.x*this.x+this.y*this.y)},setLength:function(e){if(this.isZero()){var t=this._angle||0;this.set(Math.cos(t)*e,Math.sin(t)*e)}else{var n=e/this.getLength();d.isZero(n)&&this.getAngle(),this.set(this.x*n,this.y*n)}},getAngle:function(){return 180*this.getAngleInRadians.apply(this,arguments)/Math.PI},setAngle:function(e){this.setAngleInRadians.call(this,e*Math.PI/180)},getAngleInDegrees:"#getAngle",setAngleInDegrees:"#setAngle",getAngleInRadians:function(){if(arguments.length){var e=p.read(arguments),t=this.getLength()*e.getLength();if(d.isZero(t))return NaN;var n=this.dot(e)/t;return Math.acos(n<-1?-1:n>1?1:n)}return this.isZero()?this._angle||0:this._angle=Math.atan2(this.y,this.x)},setAngleInRadians:function(e){if(this._angle=e,!this.isZero()){var t=this.getLength();this.set(Math.cos(e)*t,Math.sin(e)*t)}},getQuadrant:function(){return this.x>=0?this.y>=0?1:4:this.y>=0?2:3}},{beans:!1,getDirectedAngle:function(){var e=p.read(arguments);return 180*Math.atan2(this.cross(e),this.dot(e))/Math.PI},getDistance:function(){var e=p.read(arguments),t=e.x-this.x,n=e.y-this.y,r=t*t+n*n,i=s.read(arguments);return i?r:Math.sqrt(r)},normalize:function(e){e===o&&(e=1);var t=this.getLength(),n=0!==t?e/t:0,r=new p(this.x*n,this.y*n);return n>=0&&(r._angle=this._angle),r},rotate:function(e,t){if(0===e)return this.clone();e=e*Math.PI/180;var n=t?this.subtract(t):this,r=Math.sin(e),i=Math.cos(e);return n=new p(n.x*i-n.y*r,n.x*r+n.y*i),t?n.add(t):n},transform:function(e){return e?e._transformPoint(this):this},add:function(){var e=p.read(arguments);return new p(this.x+e.x,this.y+e.y)},subtract:function(){var e=p.read(arguments);return new p(this.x-e.x,this.y-e.y)},multiply:function(){var e=p.read(arguments);return new p(this.x*e.x,this.y*e.y)},divide:function(){var e=p.read(arguments);return new p(this.x/e.x,this.y/e.y)},modulo:function(){var e=p.read(arguments);return new p(this.x%e.x,this.y%e.y)},negate:function(){return new p(-this.x,-this.y)},isInside:function(){return y.read(arguments).contains(this)},isClose:function(){var e=p.read(arguments),t=s.read(arguments);return this.getDistance(e)<t},isCollinear:function(){var e=p.read(arguments);return p.isCollinear(this.x,this.y,e.x,e.y)},isColinear:"#isCollinear",isOrthogonal:function(){var e=p.read(arguments);return p.isOrthogonal(this.x,this.y,e.x,e.y)},isZero:function(){return d.isZero(this.x)&&d.isZero(this.y)},isNaN:function(){return isNaN(this.x)||isNaN(this.y)},dot:function(){var e=p.read(arguments);return this.x*e.x+this.y*e.y},cross:function(){var e=p.read(arguments);return this.x*e.y-this.y*e.x},project:function(){var e=p.read(arguments),t=e.isZero()?0:this.dot(e)/e.dot(e);return new p(e.x*t,e.y*t)},statics:{min:function(){var e=p.read(arguments),t=p.read(arguments);return new p(Math.min(e.x,t.x),Math.min(e.y,t.y))},max:function(){var e=p.read(arguments),t=p.read(arguments);return new p(Math.max(e.x,t.x),Math.max(e.y,t.y))},random:function(){return new p(Math.random(),Math.random())},isCollinear:function(e,t,n,r){return Math.abs(e*r-t*n)<=1e-7*Math.sqrt((e*e+t*t)*(n*n+r*r))},isOrthogonal:function(e,t,n,r){return Math.abs(e*n+t*r)<=1e-7*Math.sqrt((e*e+t*t)*(n*n+r*r))}}},s.each(["round","ceil","floor","abs"],function(e){var t=Math[e];this[e]=function(){return new p(t(this.x),t(this.y))}},{})),m=p.extend({initialize:function(e,t,n,r){this._x=e,this._y=t,this._owner=n,this._setter=r},set:function(e,t,n){return this._x=e,this._y=t,n||this._owner[this._setter](this),this},getX:function(){return this._x},setX:function(e){this._x=e,this._owner[this._setter](this)},getY:function(){return this._y},setY:function(e){this._y=e,this._owner[this._setter](this)}}),g=s.extend({_class:"Size",_readIndex:!0,initialize:function(e,t){var n=typeof e;if("number"===n){var r="number"==typeof t;this.width=e,this.height=r?t:e,this.__read&&(this.__read=r?2:1)}else"undefined"===n||null===e?(this.width=this.height=0,this.__read&&(this.__read=null===e?1:0)):(Array.isArray(e)?(this.width=e[0],this.height=e.length>1?e[1]:e[0]):null!=e.width?(this.width=e.width,this.height=e.height):null!=e.x?(this.width=e.x,this.height=e.y):(this.width=this.height=0,this.__read&&(this.__read=0)),this.__read&&(this.__read=1))},set:function(e,t){return this.width=e,this.height=t,this},equals:function(e){return e===this||e&&(this.width===e.width&&this.height===e.height||Array.isArray(e)&&this.width===e[0]&&this.height===e[1])||!1},clone:function(){return new g(this.width,this.height)},toString:function(){var e=h.instance;return"{ width: "+e.number(this.width)+", height: "+e.number(this.height)+" }"},_serialize:function(e){var t=e.formatter;return[t.number(this.width),t.number(this.height)]},add:function(){var e=g.read(arguments);return new g(this.width+e.width,this.height+e.height)},subtract:function(){var e=g.read(arguments);return new g(this.width-e.width,this.height-e.height)},multiply:function(){var e=g.read(arguments);return new g(this.width*e.width,this.height*e.height)},divide:function(){var e=g.read(arguments);return new g(this.width/e.width,this.height/e.height)},modulo:function(){var e=g.read(arguments);return new g(this.width%e.width,this.height%e.height)},negate:function(){return new g(-this.width,-this.height)},isZero:function(){return d.isZero(this.width)&&d.isZero(this.height)},isNaN:function(){return isNaN(this.width)||isNaN(this.height)},statics:{min:function(e,t){return new g(Math.min(e.width,t.width),Math.min(e.height,t.height))},max:function(e,t){return new g(Math.max(e.width,t.width),Math.max(e.height,t.height))},random:function(){return new g(Math.random(),Math.random())}}},s.each(["round","ceil","floor","abs"],function(e){var t=Math[e];this[e]=function(){return new g(t(this.width),t(this.height))}},{})),v=g.extend({initialize:function(e,t,n,r){this._width=e,this._height=t,this._owner=n,this._setter=r},set:function(e,t,n){return this._width=e,this._height=t,n||this._owner[this._setter](this),this},getWidth:function(){return this._width},setWidth:function(e){this._width=e,this._owner[this._setter](this)},getHeight:function(){return this._height},setHeight:function(e){this._height=e,this._owner[this._setter](this)}}),y=s.extend({_class:"Rectangle",_readIndex:!0,beans:!0,initialize:function(e,t,n,r){var i=typeof e,a=0;if("number"===i?(this.x=e,this.y=t,this.width=n,this.height=r,a=4):"undefined"===i||null===e?(this.x=this.y=this.width=this.height=0,a=null===e?1:0):1===arguments.length&&(Array.isArray(e)?(this.x=e[0],this.y=e[1],this.width=e[2],this.height=e[3],a=1):e.x!==o||e.width!==o?(this.x=e.x||0,this.y=e.y||0,this.width=e.width||0,this.height=e.height||0,a=1):e.from===o&&e.to===o&&(this.x=this.y=this.width=this.height=0,this._set(e),a=1)),!a){var l=p.readNamed(arguments,"from"),u=s.peek(arguments);if(this.x=l.x,this.y=l.y,u&&u.x!==o||s.hasNamed(arguments,"to")){var c=p.readNamed(arguments,"to");this.width=c.x-l.x,this.height=c.y-l.y,this.width<0&&(this.x=c.x,this.width=-this.width),this.height<0&&(this.y=c.y,this.height=-this.height)}else{var h=g.read(arguments);this.width=h.width,this.height=h.height}a=arguments.__index}this.__read&&(this.__read=a)},set:function(e,t,n,r){return this.x=e,this.y=t,this.width=n,this.height=r,this},clone:function(){return new y(this.x,this.y,this.width,this.height)},equals:function(e){var t=s.isPlainValue(e)?y.read(arguments):e;return t===this||t&&this.x===t.x&&this.y===t.y&&this.width===t.width&&this.height===t.height||!1},toString:function(){var e=h.instance;return"{ x: "+e.number(this.x)+", y: "+e.number(this.y)+", width: "+e.number(this.width)+", height: "+e.number(this.height)+" }"},_serialize:function(e){var t=e.formatter;return[t.number(this.x),t.number(this.y),t.number(this.width),t.number(this.height)]},getPoint:function(e){var t=e?p:m;return new t(this.x,this.y,this,"setPoint")},setPoint:function(){var e=p.read(arguments);this.x=e.x,this.y=e.y},getSize:function(e){var t=e?g:v;return new t(this.width,this.height,this,"setSize")},setSize:function(){var e=g.read(arguments);this._fixX&&(this.x+=(this.width-e.width)*this._fixX),this._fixY&&(this.y+=(this.height-e.height)*this._fixY),this.width=e.width,this.height=e.height,this._fixW=1,this._fixH=1},getLeft:function(){return this.x},setLeft:function(e){this._fixW||(this.width-=e-this.x),this.x=e,this._fixX=0},getTop:function(){return this.y},setTop:function(e){this._fixH||(this.height-=e-this.y),this.y=e,this._fixY=0},getRight:function(){return this.x+this.width},setRight:function(e){this._fixX!==o&&1!==this._fixX&&(this._fixW=0),this._fixW?this.x=e-this.width:this.width=e-this.x,this._fixX=1},getBottom:function(){return this.y+this.height},setBottom:function(e){this._fixY!==o&&1!==this._fixY&&(this._fixH=0),this._fixH?this.y=e-this.height:this.height=e-this.y,this._fixY=1},getCenterX:function(){return this.x+.5*this.width},setCenterX:function(e){this.x=e-.5*this.width,this._fixX=.5},getCenterY:function(){return this.y+.5*this.height},setCenterY:function(e){this.y=e-.5*this.height,this._fixY=.5},getCenter:function(e){var t=e?p:m;return new t(this.getCenterX(),this.getCenterY(),this,"setCenter")},setCenter:function(){var e=p.read(arguments);return this.setCenterX(e.x),this.setCenterY(e.y),this},getArea:function(){return this.width*this.height},isEmpty:function(){return 0===this.width||0===this.height},contains:function(e){return e&&e.width!==o||4==(Array.isArray(e)?e:arguments).length?this._containsRectangle(y.read(arguments)):this._containsPoint(p.read(arguments))},_containsPoint:function(e){var t=e.x,n=e.y;return t>=this.x&&n>=this.y&&t<=this.x+this.width&&n<=this.y+this.height},_containsRectangle:function(e){var t=e.x,n=e.y;return t>=this.x&&n>=this.y&&t+e.width<=this.x+this.width&&n+e.height<=this.y+this.height},intersects:function(){var e=y.read(arguments);return e.x+e.width>this.x&&e.y+e.height>this.y&&e.x<this.x+this.width&&e.y<this.y+this.height},touches:function(){var e=y.read(arguments);return e.x+e.width>=this.x&&e.y+e.height>=this.y&&e.x<=this.x+this.width&&e.y<=this.y+this.height},intersect:function(){var e=y.read(arguments),t=Math.max(this.x,e.x),n=Math.max(this.y,e.y),r=Math.min(this.x+this.width,e.x+e.width),i=Math.min(this.y+this.height,e.y+e.height);return new y(t,n,r-t,i-n)},unite:function(){var e=y.read(arguments),t=Math.min(this.x,e.x),n=Math.min(this.y,e.y),r=Math.max(this.x+this.width,e.x+e.width),i=Math.max(this.y+this.height,e.y+e.height);return new y(t,n,r-t,i-n)},include:function(){var e=p.read(arguments),t=Math.min(this.x,e.x),n=Math.min(this.y,e.y),r=Math.max(this.x+this.width,e.x),i=Math.max(this.y+this.height,e.y);return new y(t,n,r-t,i-n)},expand:function(){var e=g.read(arguments),t=e.width,n=e.height;return new y(this.x-t/2,this.y-n/2,this.width+t,this.height+n)},scale:function(e,t){return this.expand(this.width*e-this.width,this.height*(t===o?e:t)-this.height)}},s.each([["Top","Left"],["Top","Right"],["Bottom","Left"],["Bottom","Right"],["Left","Center"],["Top","Center"],["Right","Center"],["Bottom","Center"]],function(e,t){var n=e.join(""),r=/^[RL]/.test(n);t>=4&&(e[1]+=r?"Y":"X");var i=e[r?0:1],a=e[r?1:0],o="get"+i,s="get"+a,l="set"+i,u="set"+a,c="get"+n,h="set"+n;this[c]=function(e){var t=e?p:m;return new t(this[o](),this[s](),this,h)},this[h]=function(){var e=p.read(arguments);this[l](e.x),this[u](e.y)}},{beans:!0})),w=y.extend({initialize:function(e,t,n,r,i,a){this.set(e,t,n,r,!0),this._owner=i,this._setter=a},set:function(e,t,n,r,i){return this._x=e,this._y=t,this._width=n,this._height=r,i||this._owner[this._setter](this),this}},new function(){var e=y.prototype;return s.each(["x","y","width","height"],function(e){var t=s.capitalize(e),n="_"+e;this["get"+t]=function(){return this[n]},this["set"+t]=function(e){this[n]=e,this._dontNotify||this._owner[this._setter](this)}},s.each(["Point","Size","Center","Left","Top","Right","Bottom","CenterX","CenterY","TopLeft","TopRight","BottomLeft","BottomRight","LeftCenter","TopCenter","RightCenter","BottomCenter"],function(t){var n="set"+t;this[n]=function(){this._dontNotify=!0,e[n].apply(this,arguments),this._dontNotify=!1,this._owner[this._setter](this)}},{isSelected:function(){return this._owner._boundsSelected},setSelected:function(e){var t=this._owner;t.setSelected&&(t._boundsSelected=e,t.setSelected(e||t._selectedSegmentState>0))}}))}),b=s.extend({_class:"Matrix",initialize:function e(t){var n=arguments.length,r=!0;if(6===n?this.set.apply(this,arguments):1===n?t instanceof e?this.set(t._a,t._c,t._b,t._d,t._tx,t._ty):Array.isArray(t)?this.set.apply(this,t):r=!1:0===n?this.reset():r=!1,!r)throw new Error("Unsupported matrix parameters")},set:function(e,t,n,r,i,a,o){return this._a=e,this._c=t,this._b=n,this._d=r,this._tx=i,this._ty=a,o||this._changed(),this},_serialize:function(e){return s.serialize(this.getValues(),e)},_changed:function(){var e=this._owner;e&&(e._applyMatrix?e.transform(null,!0):e._changed(9))},clone:function(){return new b(this._a,this._c,this._b,this._d,this._tx,this._ty)},equals:function(e){return e===this||e&&this._a===e._a&&this._b===e._b&&this._c===e._c&&this._d===e._d&&this._tx===e._tx&&this._ty===e._ty||!1},toString:function(){var e=h.instance;return"[["+[e.number(this._a),e.number(this._b),e.number(this._tx)].join(", ")+"], ["+[e.number(this._c),e.number(this._d),e.number(this._ty)].join(", ")+"]]"},reset:function(e){return this._a=this._d=1,this._c=this._b=this._tx=this._ty=0,e||this._changed(),this},apply:function(e,t){var n=this._owner;return!!n&&(n.transform(null,!0,s.pick(e,!0),t),this.isIdentity())},translate:function(){var e=p.read(arguments),t=e.x,n=e.y;return this._tx+=t*this._a+n*this._b,this._ty+=t*this._c+n*this._d,this._changed(),this},scale:function(){var e=p.read(arguments),t=p.read(arguments,0,{readNull:!0});return t&&this.translate(t),this._a*=e.x,this._c*=e.x,this._b*=e.y,this._d*=e.y,t&&this.translate(t.negate()),this._changed(),this},rotate:function(e){e*=Math.PI/180;var t=p.read(arguments,1),n=t.x,r=t.y,i=Math.cos(e),a=Math.sin(e),o=n-n*i+r*a,s=r-n*a-r*i,l=this._a,u=this._b,c=this._c,h=this._d;return this._a=i*l+a*u,this._b=-a*l+i*u,this._c=i*c+a*h,this._d=-a*c+i*h,this._tx+=o*l+s*u,this._ty+=o*c+s*h,this._changed(),this},shear:function(){var e=p.read(arguments),t=p.read(arguments,0,{readNull:!0});t&&this.translate(t);var n=this._a,r=this._c;return this._a+=e.y*this._b,this._c+=e.y*this._d,this._b+=e.x*n,this._d+=e.x*r,t&&this.translate(t.negate()),this._changed(),this},skew:function(){var e=p.read(arguments),t=p.read(arguments,0,{readNull:!0}),n=Math.PI/180,r=new p(Math.tan(e.x*n),Math.tan(e.y*n));return this.shear(r,t)},concatenate:function(e){var t=this._a,n=this._b,r=this._c,i=this._d,a=e._a,o=e._b,s=e._c,l=e._d,u=e._tx,c=e._ty;return this._a=a*t+s*n,this._b=o*t+l*n,this._c=a*r+s*i,this._d=o*r+l*i,this._tx+=u*t+c*n,this._ty+=u*r+c*i,this._changed(),this},preConcatenate:function(e){var t=this._a,n=this._b,r=this._c,i=this._d,a=this._tx,o=this._ty,s=e._a,l=e._b,u=e._c,c=e._d,h=e._tx,d=e._ty;return this._a=s*t+l*r,this._b=s*n+l*i,this._c=u*t+c*r,this._d=u*n+c*i,this._tx=s*a+l*o+h,this._ty=u*a+c*o+d,this._changed(),this},chain:function(e){var t=this._a,n=this._b,r=this._c,i=this._d,a=this._tx,o=this._ty,s=e._a,l=e._b,u=e._c,c=e._d,h=e._tx,d=e._ty;return new b(s*t+u*n,s*r+u*i,l*t+c*n,l*r+c*i,a+h*t+d*n,o+h*r+d*i)},isIdentity:function(){return 1===this._a&&0===this._c&&0===this._b&&1===this._d&&0===this._tx&&0===this._ty},orNullIfIdentity:function(){return this.isIdentity()?null:this},isInvertible:function(){return!!this._getDeterminant()},isSingular:function(){return!this._getDeterminant()},transform:function(e,t,n){return arguments.length<3?this._transformPoint(p.read(arguments)):this._transformCoordinates(e,t,n)},_transformPoint:function(e,t,n){var r=e.x,i=e.y;return t||(t=new p),t.set(r*this._a+i*this._b+this._tx,r*this._c+i*this._d+this._ty,n)},_transformCoordinates:function(e,t,n){for(var r=0,i=0,a=2*n;r<a;){var o=e[r++],s=e[r++];t[i++]=o*this._a+s*this._b+this._tx,t[i++]=o*this._c+s*this._d+this._ty}return t},_transformCorners:function(e){var t=e.x,n=e.y,r=t+e.width,i=n+e.height,a=[t,n,r,n,r,i,t,i];return this._transformCoordinates(a,a,4)},_transformBounds:function(e,t,n){for(var r=this._transformCorners(e),i=r.slice(0,2),a=i.slice(),o=2;o<8;o++){var s=r[o],l=1&o;s<i[l]?i[l]=s:s>a[l]&&(a[l]=s)}return t||(t=new y),t.set(i[0],i[1],a[0]-i[0],a[1]-i[1],n)},inverseTransform:function(){return this._inverseTransform(p.read(arguments))},_getDeterminant:function(){var e=this._a*this._d-this._b*this._c;return isFinite(e)&&!d.isZero(e)&&isFinite(this._tx)&&isFinite(this._ty)?e:null},_inverseTransform:function(e,t,n){var r=this._getDeterminant();if(!r)return null;var i=e.x-this._tx,a=e.y-this._ty;return t||(t=new p),t.set((i*this._d-a*this._b)/r,(a*this._a-i*this._c)/r,n)},decompose:function(){var e=this._a,t=this._b,n=this._c,r=this._d;if(d.isZero(e*r-t*n))return null;var i=Math.sqrt(e*e+t*t);e/=i,t/=i;var a=e*n+t*r;n-=e*a,r-=t*a;var o=Math.sqrt(n*n+r*r);return n/=o,r/=o,a/=o,e*r<t*n&&(e=-e,t=-t,a=-a,i=-i),{scaling:new p(i,o),rotation:180*-Math.atan2(t,e)/Math.PI,shearing:a}},getValues:function(){return[this._a,this._c,this._b,this._d,this._tx,this._ty]},getTranslation:function(){return new p(this._tx,this._ty)},getScaling:function(){return(this.decompose()||{}).scaling},getRotation:function(){return(this.decompose()||{}).rotation},inverted:function(){var e=this._getDeterminant();return e&&new b(this._d/e,-this._c/e,-this._b/e,this._a/e,(this._b*this._ty-this._d*this._tx)/e,(this._c*this._tx-this._a*this._ty)/e)},shiftless:function(){return new b(this._a,this._c,this._b,this._d,0,0)},applyToContext:function(e){e.transform(this._a,this._c,this._b,this._d,this._tx,this._ty)}},s.each(["a","c","b","d","tx","ty"],function(e){var t=s.capitalize(e),n="_"+e;this["get"+t]=function(){return this[n]},this["set"+t]=function(e){this[n]=e,this._changed()}},{})),_=s.extend({_class:"Line",initialize:function(e,t,n,r,i){var a=!1;arguments.length>=4?(this._px=e,this._py=t,this._vx=n,this._vy=r,a=i):(this._px=e.x,this._py=e.y,this._vx=t.x,this._vy=t.y,a=n),a||(this._vx-=this._px,this._vy-=this._py)},getPoint:function(){return new p(this._px,this._py)},getVector:function(){return new p(this._vx,this._vy)},getLength:function(){return this.getVector().getLength()},intersect:function(e,t){return _.intersect(this._px,this._py,this._vx,this._vy,e._px,e._py,e._vx,e._vy,!0,t)},getSide:function(e,t){return _.getSide(this._px,this._py,this._vx,this._vy,e.x,e.y,!0,t)},getDistance:function(e){return Math.abs(_.getSignedDistance(this._px,this._py,this._vx,this._vy,e.x,e.y,!0))},isCollinear:function(e){return p.isCollinear(this._vx,this._vy,e._vx,e._vy)},isOrthogonal:function(e){return p.isOrthogonal(this._vx,this._vy,e._vx,e._vy)},statics:{intersect:function(e,t,n,r,i,a,o,s,l,u){l||(n-=e,r-=t,o-=i,s-=a);var c=n*s-r*o;if(!d.isZero(c)){var h=e-i,f=t-a,m=(o*f-s*h)/c,g=(n*f-r*h)/c,v=1e-12,y=-v,w=1+v;if(u||y<m&&m<w&&y<g&&g<w)return u||(m=m<=0?0:m>=1?1:m),new p(e+m*n,t+m*r)}},getSide:function(e,t,n,r,i,a,o,s){o||(n-=e,r-=t);var l=i-e,u=a-t,c=l*r-u*n;return 0!==c||s||(c=(l*n+l*n)/(n*n+r*r),c>=0&&c<=1&&(c=0)),c<0?-1:c>0?1:0},getSignedDistance:function(e,t,n,r,i,a,o){return o||(n-=e,r-=t),0===n?r>0?i-e:e-i:0===r?n<0?a-t:t-a:((i-e)*r-(a-t)*n)/Math.sqrt(n*n+r*r)}}}),x=c.extend({_class:"Project",_list:"projects",_reference:"project",initialize:function(e){c.call(this,!0),this.layers=[],this._activeLayer=null,this.symbols=[],this._currentStyle=new G(null,null,this),this._view=K.create(this,e||ne.getCanvas(1,1)),this._selectedItems={},this._selectedItemCount=0,this._updateVersion=0},_serialize:function(e,t){return s.serialize(this.layers,e,!0,t)},clear:function(){for(var e=this.layers.length-1;e>=0;e--)this.layers[e].remove();this.symbols=[]},isEmpty:function(){return 0===this.layers.length},remove:function e(){return!!e.base.call(this)&&(this._view&&this._view.remove(),!0)},getView:function(){return this._view},getCurrentStyle:function(){return this._currentStyle},setCurrentStyle:function(e){this._currentStyle.initialize(e)},getIndex:function(){return this._index},getOptions:function(){return this._scope.settings},getActiveLayer:function(){return this._activeLayer||new S({project:this})},getSelectedItems:function(){var e=[];for(var t in this._selectedItems){var n=this._selectedItems[t];n.isInserted()&&e.push(n)}return e},insertChild:function(e,t,n){return t instanceof S?(t._remove(!1,!0),s.splice(this.layers,[t],e,0),t._setProject(this,!0),this._changes&&t._changed(5),this._activeLayer||(this._activeLayer=t)):t instanceof C?(this._activeLayer||this.insertChild(e,new S(C.NO_INSERT))).insertChild(e,t,n):t=null,t},addChild:function(e,t){return this.insertChild(o,e,t)},_updateSelection:function(e){var t=e._id,n=this._selectedItems;e._selected?n[t]!==e&&(this._selectedItemCount++,n[t]=e):n[t]===e&&(this._selectedItemCount--,delete n[t])},selectAll:function(){for(var e=this.layers,t=0,n=e.length;t<n;t++)e[t].setFullySelected(!0)},deselectAll:function(){var e=this._selectedItems;for(var t in e)e[t].setFullySelected(!1)},hitTest:function(){for(var e=p.read(arguments),t=M.getOptions(s.read(arguments)),n=this.layers.length-1;n>=0;n--){var r=this.layers[n]._hitTest(e,t);if(r)return r}return null},getItems:function(e){return C._getItems(this.layers,e)},getItem:function(e){return C._getItems(this.layers,e,null,null,!0)[0]||null},importJSON:function(e){this.activate();var t=this._activeLayer;return s.importJSON(e,t&&t.isEmpty()&&t)},draw:function(e,t,n){this._updateVersion++,e.save(),t.applyToContext(e);for(var r=new s({offset:new p(0,0),pixelRatio:n,viewMatrix:t.isIdentity()?null:t,matrices:[new b],updateMatrix:!0}),i=0,a=this.layers,o=a.length;i<o;i++)a[i].draw(e,r);if(e.restore(),this._selectedItemCount>0){e.save(),e.strokeWidth=1;var l=this._selectedItems,u=this._scope.settings.handleSize,c=this._updateVersion;for(var h in l)l[h]._drawSelection(e,t,u,l,c);e.restore()}}}),E=s.extend({_class:"Symbol",initialize:function(e,t){this._id=f.get(),this.project=a.project,this.project.symbols.push(this),e&&this.setDefinition(e,t)},_serialize:function(e,t){return t.add(this,function(){return s.serialize([this._class,this._definition],e,!1,t)})},_changed:function(e){8&e&&C._clearBoundsCache(this),1&e&&(this.project._needsUpdate=!0)},getDefinition:function(){return this._definition},setDefinition:function(e,t){e._parentSymbol&&(e=e.clone()),this._definition&&(this._definition._parentSymbol=null),
 this._definition=e,e.remove(),e.setSelected(!1),t||e.setPosition(new p),e._parentSymbol=this,this._changed(9)},place:function(e){return new N(this,e)},clone:function(){return new E(this._definition.clone(!1))},equals:function(e){return e===this||e&&this.definition.equals(e.definition)||!1}}),C=s.extend(l,{statics:{extend:function e(t){return t._serializeFields&&(t._serializeFields=new s(this.prototype._serializeFields,t._serializeFields)),e.base.apply(this,arguments)},NO_INSERT:{insert:!1}},_class:"Item",_applyMatrix:!0,_canApplyMatrix:!0,_boundsSelected:!1,_selectChildren:!1,_serializeFields:{name:null,applyMatrix:null,matrix:new b,pivot:null,locked:!1,visible:!0,blendMode:"normal",opacity:1,guide:!1,selected:!1,clipMask:!1,data:{}},initialize:function(){},_initialize:function(e,t){var n=e&&s.isPlainObject(e),r=n&&e.internal===!0,i=this._matrix=new b,o=n&&e.project||a.project;return r||(this._id=f.get()),this._applyMatrix=this._canApplyMatrix&&a.settings.applyMatrix,t&&i.translate(t),i._owner=this,this._style=new G(o._currentStyle,this,o),this._project||(r||n&&e.insert===!1?this._setProject(o):n&&e.parent?this.setParent(e.parent):(o._activeLayer||new S).addChild(this)),n&&e!==C.NO_INSERT&&this._set(e,{insert:!0,project:!0,parent:!0},!0),n},_events:s.each(["onMouseDown","onMouseUp","onMouseDrag","onClick","onDoubleClick","onMouseMove","onMouseEnter","onMouseLeave"],function(e){this[e]={install:function(e){this.getView()._installEvent(e)},uninstall:function(e){this.getView()._uninstallEvent(e)}}},{onFrame:{install:function(){this.getView()._animateItem(this,!0)},uninstall:function(){this.getView()._animateItem(this,!1)}},onLoad:{}}),_serialize:function(e,t){function n(n){for(var a in n){var o=i[a];s.equals(o,"leading"===a?1.2*n.fontSize:n[a])||(r[a]=s.serialize(o,e,"data"!==a,t))}}var r={},i=this;return n(this._serializeFields),this instanceof k||n(this._style._defaults),[this._class,r]},_changed:function(e){var t=this._parentSymbol,n=this._parent||t,r=this._project;if(8&e&&(this._bounds=this._position=this._decomposed=this._globalMatrix=this._currentPath=o),n&&40&e&&C._clearBoundsCache(n),2&e&&C._clearBoundsCache(this),r&&(1&e&&(r._needsUpdate=!0),r._changes)){var i=r._changesById[this._id];i?i.flags|=e:(i={item:this,flags:e},r._changesById[this._id]=i,r._changes.push(i))}t&&t._changed(e)},set:function(e){return e&&this._set(e),this},getId:function(){return this._id},getName:function(){return this._name},setName:function(e,t){if(this._name&&this._removeNamed(),e===+e+"")throw new Error("Names consisting only of numbers are not supported.");var n=this._parent;if(e&&n){for(var r=n._children,i=n._namedChildren,a=e,s=1;t&&r[e];)e=a+" "+s++;(i[e]=i[e]||[]).push(this),r[e]=this}this._name=e||o,this._changed(128)},getStyle:function(){return this._style},setStyle:function(e){this.getStyle().set(e)}},s.each(["locked","visible","blendMode","opacity","guide"],function(e){var t=s.capitalize(e),e="_"+e;this["get"+t]=function(){return this[e]},this["set"+t]=function(t){t!=this[e]&&(this[e]=t,this._changed("_locked"===e?128:129))}},{}),{beans:!0,_locked:!1,_visible:!0,_blendMode:"normal",_opacity:1,_guide:!1,isSelected:function(){if(this._selectChildren)for(var e=this._children,t=0,n=e.length;t<n;t++)if(e[t].isSelected())return!0;return this._selected},setSelected:function(e,t){if(!t&&this._selectChildren)for(var n=this._children,r=0,i=n.length;r<i;r++)n[r].setSelected(e);(e=!!e)^this._selected&&(this._selected=e,this._project._updateSelection(this),this._changed(129))},_selected:!1,isFullySelected:function(){var e=this._children;if(e&&this._selected){for(var t=0,n=e.length;t<n;t++)if(!e[t].isFullySelected())return!1;return!0}return this._selected},setFullySelected:function(e){var t=this._children;if(t)for(var n=0,r=t.length;n<r;n++)t[n].setFullySelected(e);this.setSelected(e,!0)},isClipMask:function(){return this._clipMask},setClipMask:function(e){this._clipMask!=(e=!!e)&&(this._clipMask=e,e&&(this.setFillColor(null),this.setStrokeColor(null)),this._changed(129),this._parent&&this._parent._changed(1024))},_clipMask:!1,getData:function(){return this._data||(this._data={}),this._data},setData:function(e){this._data=e},getPosition:function(e){var t=this._position,n=e?p:m;if(!t){var r=this._pivot;t=this._position=r?this._matrix._transformPoint(r):this.getBounds().getCenter(!0)}return new n(t.x,t.y,this,"setPosition")},setPosition:function(){this.translate(p.read(arguments).subtract(this.getPosition(!0)))},getPivot:function(e){var t=this._pivot;if(t){var n=e?p:m;t=new n(t.x,t.y,this,"setPivot")}return t},setPivot:function(){this._pivot=p.read(arguments,0,{clone:!0,readNull:!0}),this._position=o},_pivot:null},s.each(["bounds","strokeBounds","handleBounds","roughBounds","internalBounds","internalRoughBounds"],function(e){var t="get"+s.capitalize(e),n=e.match(/^internal(.*)$/),r=n?"get"+n[1]:null;this[t]=function(n){var i=this._boundsGetter,a=!r&&("string"==typeof i?i:i&&i[t])||t,o=this._getCachedBounds(a,n,this,r);return"bounds"===e?new w(o.x,o.y,o.width,o.height,this,"setBounds"):o}},{beans:!0,_getBounds:function(e,t,n){var r=this._children;if(!r||0==r.length)return new y;C._updateBoundsCache(this,n);for(var i=1/0,a=-i,o=i,s=a,l=0,u=r.length;l<u;l++){var c=r[l];if(c._visible&&!c.isEmpty()){var h=c._getCachedBounds(e,t&&t.chain(c._matrix),n);i=Math.min(h.x,i),o=Math.min(h.y,o),a=Math.max(h.x+h.width,a),s=Math.max(h.y+h.height,s)}}return isFinite(i)?new y(i,o,a-i,s-o):new y},setBounds:function(){var e=y.read(arguments),t=this.getBounds(),n=new b,r=e.getCenter();n.translate(r),e.width==t.width&&e.height==t.height||n.scale(0!=t.width?e.width/t.width:1,0!=t.height?e.height/t.height:1),r=t.getCenter(),n.translate(-r.x,-r.y),this.transform(n)},_getCachedBounds:function(e,t,n,r){t=t&&t.orNullIfIdentity();var i=r?null:this._matrix.orNullIfIdentity(),a=(!t||t.equals(i))&&e;if(C._updateBoundsCache(this._parent||this._parentSymbol,n),a&&this._bounds&&this._bounds[a])return this._bounds[a].clone();var o=this._getBounds(r||e,t||i,n);if(a){this._bounds||(this._bounds={});var s=this._bounds[a]=o.clone();s._internal=!!r}return o},statics:{_updateBoundsCache:function(e,t){if(e){var n=t._id,r=e._boundsCache=e._boundsCache||{ids:{},list:[]};r.ids[n]||(r.list.push(t),r.ids[n]=t)}},_clearBoundsCache:function(e){var t=e._boundsCache;if(t){e._bounds=e._position=e._boundsCache=o;for(var n=0,r=t.list,i=r.length;n<i;n++){var a=r[n];a!==e&&(a._bounds=a._position=o,a._boundsCache&&C._clearBoundsCache(a))}}}}}),{beans:!0,_decompose:function(){return this._decomposed=this._matrix.decompose()},getRotation:function(){var e=this._decomposed||this._decompose();return e&&e.rotation},setRotation:function(e){var t=this.getRotation();if(null!=t&&null!=e){var n=this._decomposed;this.rotate(e-t),n.rotation=e,this._decomposed=n}},getScaling:function(e){var t=this._decomposed||this._decompose(),n=t&&t.scaling,r=e?p:m;return n&&new r(n.x,n.y,this,"setScaling")},setScaling:function(){var e=this.getScaling();if(e){var t=p.read(arguments,0,{clone:!0}),n=this._decomposed;this.scale(t.x/e.x,t.y/e.y),n.scaling=t,this._decomposed=n}},getMatrix:function(){return this._matrix},setMatrix:function(){var e=this._matrix;e.initialize.apply(e,arguments),this._applyMatrix?this.transform(null,!0):this._changed(9)},getGlobalMatrix:function(e){var t=this._globalMatrix,n=this._project._updateVersion;if(t&&t._updateVersion!==n&&(t=null),!t){t=this._globalMatrix=this._matrix.clone();var r=this._parent;r&&t.preConcatenate(r.getGlobalMatrix(!0)),t._updateVersion=n}return e?t:t.clone()},getApplyMatrix:function(){return this._applyMatrix},setApplyMatrix:function(e){(this._applyMatrix=this._canApplyMatrix&&!!e)&&this.transform(null,!0)},getTransformContent:"#getApplyMatrix",setTransformContent:"#setApplyMatrix"},{getProject:function(){return this._project},_setProject:function(e,t){if(this._project!==e){this._project&&this._installEvents(!1),this._project=e;for(var n=this._children,r=0,i=n&&n.length;r<i;r++)n[r]._setProject(e);t=!0}t&&this._installEvents(!0)},getView:function(){return this._project.getView()},_installEvents:function e(t){e.base.call(this,t);for(var n=this._children,r=0,i=n&&n.length;r<i;r++)n[r]._installEvents(t)},getLayer:function(){for(var e=this;e=e._parent;)if(e instanceof S)return e;return null},getParent:function(){return this._parent},setParent:function(e){return e.addChild(this)},getChildren:function(){return this._children},setChildren:function(e){this.removeChildren(),this.addChildren(e)},getFirstChild:function(){return this._children&&this._children[0]||null},getLastChild:function(){return this._children&&this._children[this._children.length-1]||null},getNextSibling:function(){return this._parent&&this._parent._children[this._index+1]||null},getPreviousSibling:function(){return this._parent&&this._parent._children[this._index-1]||null},getIndex:function(){return this._index},equals:function(e){return e===this||e&&this._class===e._class&&this._style.equals(e._style)&&this._matrix.equals(e._matrix)&&this._locked===e._locked&&this._visible===e._visible&&this._blendMode===e._blendMode&&this._opacity===e._opacity&&this._clipMask===e._clipMask&&this._guide===e._guide&&this._equals(e)||!1},_equals:function(e){return s.equals(this._children,e._children)},clone:function(e){return this._clone(new this.constructor(C.NO_INSERT),e)},_clone:function(e,t,n){var r=["_locked","_visible","_blendMode","_opacity","_clipMask","_guide"],i=this._children;e.setStyle(this._style);for(var a=0,l=i&&i.length;a<l;a++)e.addChild(i[a].clone(!1),!0);for(var a=0,l=r.length;a<l;a++){var u=r[a];this.hasOwnProperty(u)&&(e[u]=this[u])}return n!==!1&&e._matrix.initialize(this._matrix),e.setApplyMatrix(this._applyMatrix),e.setPivot(this._pivot),e.setSelected(this._selected),e._data=this._data?s.clone(this._data):null,(t||t===o)&&e.insertAbove(this),this._name&&e.setName(this._name,!0),e},copyTo:function(e){return e.addChild(this.clone(!1))},rasterize:function(e){var t=this.getStrokeBounds(),n=(e||this.getView().getResolution())/72,r=t.getTopLeft().floor(),i=t.getBottomRight().ceil(),a=new g(i.subtract(r)),o=ne.getCanvas(a.multiply(n)),l=o.getContext("2d"),u=(new b).scale(n).translate(r.negate());l.save(),u.applyToContext(l),this.draw(l,new s({matrices:[u]})),l.restore();var c=new T(C.NO_INSERT);return c.setCanvas(o),c.transform((new b).translate(r.add(a.divide(2))).scale(1/n)),c.insertAbove(this),c},contains:function(){return!!this._contains(this._matrix._inverseTransform(p.read(arguments)))},_contains:function(e){if(this._children){for(var t=this._children.length-1;t>=0;t--)if(this._children[t].contains(e))return!0;return!1}return e.isInside(this.getInternalBounds())},isInside:function(){return y.read(arguments).contains(this.getBounds())},_asPathItem:function(){return new z.Rectangle({rectangle:this.getInternalBounds(),matrix:this._matrix,insert:!1})},intersects:function(e,t){return e instanceof C&&this._asPathItem().getIntersections(e._asPathItem(),null,t||e._matrix,!0).length>0},hitTest:function(){return this._hitTest(p.read(arguments),M.getOptions(s.read(arguments)))},_hitTest:function(e,t){function n(t,n){var r=d["get"+n]();if(e.subtract(r).divide(l).length<=1)return new M(t,h,{name:s.hyphenate(n),point:r})}if(this._locked||!this._visible||this._guide&&!t.guides||this.isEmpty())return null;var r=this._matrix,i=t._totalMatrix,a=this.getView(),o=t._totalMatrix=i?i.chain(r):this.getGlobalMatrix().preConcatenate(a._matrix),l=t._tolerancePadding=new g(z._getPenPadding(1,o.inverted())).multiply(Math.max(t.tolerance,1e-6));if(e=r._inverseTransform(e),!this._children&&!this.getInternalRoughBounds().expand(l.multiply(2))._containsPoint(e))return null;var u,c=!(t.guides&&!this._guide||t.selected&&!this._selected||t.type&&t.type!==s.hyphenate(this._class)||t.class&&!(this instanceof t.class)),h=this;if(c&&(t.center||t.bounds)&&this._parent){var d=this.getInternalBounds();if(t.center&&(u=n("center","Center")),!u&&t.bounds)for(var f=["TopLeft","TopRight","BottomLeft","BottomRight","LeftCenter","TopCenter","RightCenter","BottomCenter"],p=0;p<8&&!u;p++)u=n("bounds",f[p])}var m=!u&&this._children;if(m)for(var v=this._getChildHitTestOptions(t),p=m.length-1;p>=0&&!u;p--)u=m[p]._hitTest(e,v);return!u&&c&&(u=this._hitTestSelf(e,t)),u&&u.point&&(u.point=r.transform(u.point)),t._totalMatrix=i,u},_getChildHitTestOptions:function(e){return e},_hitTestSelf:function(e,t){if(t.fill&&this.hasFill()&&this._contains(e))return new M("fill",this)},matches:function(e,t){function n(e,t){for(var r in e)if(e.hasOwnProperty(r)){var i=e[r],a=t[r];if(s.isPlainObject(i)&&s.isPlainObject(a)){if(!n(i,a))return!1}else if(!s.equals(i,a))return!1}return!0}var r=typeof e;if("object"===r){for(var i in e)if(e.hasOwnProperty(i)&&!this.matches(i,e[i]))return!1}else{if("function"===r)return e(this);var a=/^(empty|editable)$/.test(e)?this["is"+s.capitalize(e)]():"type"===e?s.hyphenate(this._class):this[e];if(/^(constructor|class)$/.test(e)){if(!(this instanceof t))return!1}else if(t instanceof RegExp){if(!t.test(a))return!1}else if("function"==typeof t){if(!t(a))return!1}else if(s.isPlainObject(t)){if(!n(t,a))return!1}else if(!s.equals(a,t))return!1}return!0},getItems:function(e){return C._getItems(this._children,e,this._matrix)},getItem:function(e){return C._getItems(this._children,e,this._matrix,null,!0)[0]||null},statics:{_getItems:function e(t,n,r,i,a){if(!i&&"object"==typeof n){var o=n.overlapping,l=n.inside,u=o||l,c=u&&y.read([u]);i={items:[],inside:!!l,overlapping:!!o,rect:c,path:o&&new z.Rectangle({rectangle:c,insert:!1})},u&&(n=s.set({},n,{inside:!0,overlapping:!0}))}var h=i&&i.items,c=i&&i.rect;r=c&&(r||new b);for(var d=0,f=t&&t.length;d<f;d++){var p=t[d],m=r&&r.chain(p._matrix),g=!0;if(c){var u=p.getBounds(m);if(!c.intersects(u))continue;i.inside&&c.contains(u)||i.overlapping&&(u.contains(c)||i.path.intersects(p,m))||(g=!1)}if(g&&p.matches(n)&&(h.push(p),a))break;if(e(p._children,n,m,i,a),a&&h.length>0)break}return h}}},{importJSON:function(e){var t=s.importJSON(e,this);return t!==this?this.addChild(t):t},addChild:function(e,t){return this.insertChild(o,e,t)},insertChild:function(e,t,n){var r=t?this.insertChildren(e,[t],n):null;return r&&r[0]},addChildren:function(e,t){return this.insertChildren(this._children.length,e,t)},insertChildren:function(e,t,n,r){var i=this._children;if(i&&t&&t.length>0){t=Array.prototype.slice.apply(t);for(var a=t.length-1;a>=0;a--){var o=t[a];if(!r||o instanceof r){var l=o._parent===this&&o._index<e;o._remove(!1,!0)&&l&&e--}else t.splice(a,1)}s.splice(i,t,e,0);for(var u=this._project,c=u&&u._changes,a=0,h=t.length;a<h;a++){var o=t[a];o._parent=this,o._setProject(this._project,!0),o._name&&o.setName(o._name),c&&this._changed(5)}this._changed(11)}else t=null;return t},_insertSibling:function(e,t,n){return this._parent?this._parent.insertChild(e,t,n):null},insertAbove:function(e,t){return e._insertSibling(e._index+1,this,t)},insertBelow:function(e,t){return e._insertSibling(e._index,this,t)},sendToBack:function(){return(this._parent||this instanceof S&&this._project).insertChild(0,this)},bringToFront:function(){return(this._parent||this instanceof S&&this._project).addChild(this)},appendTop:"#addChild",appendBottom:function(e){return this.insertChild(0,e)},moveAbove:"#insertAbove",moveBelow:"#insertBelow",reduce:function(){if(this._children&&1===this._children.length){var e=this._children[0].reduce();return e.insertAbove(this),e.setStyle(this._style),this.remove(),e}return this},_removeNamed:function(){var e=this._parent;if(e){var t=e._children,n=e._namedChildren,r=this._name,i=n[r],a=i?i.indexOf(this):-1;a!==-1&&(t[r]==this&&delete t[r],i.splice(a,1),i.length?t[r]=i[i.length-1]:delete n[r])}},_remove:function(e,t){var n=this._parent;if(n){if(this._name&&this._removeNamed(),null!=this._index&&s.splice(n._children,null,this._index,1),this._installEvents(!1),e){var r=this._project;r&&r._changes&&this._changed(5)}return t&&n._changed(11),this._parent=null,!0}return!1},remove:function(){return this._remove(!0,!0)},replaceWith:function(e){var t=e&&e.insertBelow(this);return t&&this.remove(),t},removeChildren:function(e,t){if(!this._children)return null;e=e||0,t=s.pick(t,this._children.length);for(var n=s.splice(this._children,null,e,t-e),r=n.length-1;r>=0;r--)n[r]._remove(!0,!1);return n.length>0&&this._changed(11),n},clear:"#removeChildren",reverseChildren:function(){if(this._children){this._children.reverse();for(var e=0,t=this._children.length;e<t;e++)this._children[e]._index=e;this._changed(11)}},isEmpty:function(){return!this._children||0===this._children.length},isEditable:function(){for(var e=this;e;){if(!e._visible||e._locked)return!1;e=e._parent}return!0},hasFill:function(){return this.getStyle().hasFill()},hasStroke:function(){return this.getStyle().hasStroke()},hasShadow:function(){return this.getStyle().hasShadow()},_getOrder:function(e){function t(e){var t=[];do t.unshift(e);while(e=e._parent);return t}for(var n=t(this),r=t(e),i=0,a=Math.min(n.length,r.length);i<a;i++)if(n[i]!=r[i])return n[i]._index<r[i]._index?1:-1;return 0},hasChildren:function(){return this._children&&this._children.length>0},isInserted:function(){return!!this._parent&&this._parent.isInserted()},isAbove:function(e){return this._getOrder(e)===-1},isBelow:function(e){return 1===this._getOrder(e)},isParent:function(e){return this._parent===e},isChild:function(e){return e&&e._parent===this},isDescendant:function(e){for(var t=this;t=t._parent;)if(t==e)return!0;return!1},isAncestor:function(e){return!!e&&e.isDescendant(this)},isSibling:function(e){return this._parent===e._parent},isGroupedWith:function(e){for(var t=this._parent;t;){if(t._parent&&/^(Group|Layer|CompoundPath)$/.test(t._class)&&e.isDescendant(t))return!0;t=t._parent}return!1},translate:function(){var e=new b;return this.transform(e.translate.apply(e,arguments))},rotate:function(e){return this.transform((new b).rotate(e,p.read(arguments,1,{readNull:!0})||this.getPosition(!0)))}},s.each(["scale","shear","skew"],function(e){this[e]=function(){var t=p.read(arguments),n=p.read(arguments,0,{readNull:!0});return this.transform((new b)[e](t,n||this.getPosition(!0)))}},{}),{transform:function(e,t,n,r){e&&e.isIdentity()&&(e=null);var i=this._matrix,a=(t||this._applyMatrix)&&(!i.isIdentity()||e||t&&n&&this._children);if(!e&&!a)return this;if(e&&i.preConcatenate(e),a=a&&this._transformContent(i,n,r)){var o=this._pivot,s=this._style,l=s.getFillColor(!0),u=s.getStrokeColor(!0);o&&i._transformPoint(o,o,!0),l&&l.transform(i),u&&u.transform(i),i.reset(!0),r&&this._canApplyMatrix&&(this._applyMatrix=!0)}var c=this._bounds,h=this._position;this._changed(9);var d=c&&e&&e.decompose();if(d&&!d.shearing&&d.rotation%90===0){for(var f in c){var p=c[f];!a&&p._internal||e._transformBounds(p,p)}var m=this._boundsGetter,p=c[m&&m.getBounds||m||"getBounds"];p&&(this._position=p.getCenter(!0)),this._bounds=c}else e&&h&&(this._position=e._transformPoint(h,h));return this},_transformContent:function(e,t,n){var r=this._children;if(r){for(var i=0,a=r.length;i<a;i++)r[i].transform(e,!0,t,n);return!0}},globalToLocal:function(){return this.getGlobalMatrix(!0)._inverseTransform(p.read(arguments))},localToGlobal:function(){return this.getGlobalMatrix(!0)._transformPoint(p.read(arguments))},parentToLocal:function(){return this._matrix._inverseTransform(p.read(arguments))},localToParent:function(){return this._matrix._transformPoint(p.read(arguments))},fitBounds:function(e,t){e=y.read(arguments);var n=this.getBounds(),r=n.height/n.width,i=e.height/e.width,a=(t?r>i:r<i)?e.width/n.width:e.height/n.height,o=new y(new p,new g(n.width*a,n.height*a));o.setCenter(e.getCenter()),this.setBounds(o)},_setStyles:function(e){var t=this._style,n=t.getFillColor(),r=t.getStrokeColor(),i=t.getShadowColor();if(n&&(e.fillStyle=n.toCanvasStyle(e)),r){var o=t.getStrokeWidth();if(o>0){e.strokeStyle=r.toCanvasStyle(e),e.lineWidth=o;var s=t.getStrokeJoin(),l=t.getStrokeCap(),u=t.getMiterLimit();if(s&&(e.lineJoin=s),l&&(e.lineCap=l),u&&(e.miterLimit=u),a.support.nativeDash){var c=t.getDashArray(),h=t.getDashOffset();c&&c.length&&("setLineDash"in e?(e.setLineDash(c),e.lineDashOffset=h):(e.mozDash=c,e.mozDashOffset=h))}}}if(i){var d=t.getShadowBlur();if(d>0){e.shadowColor=i.toCanvasStyle(e),e.shadowBlur=d;var f=this.getShadowOffset();e.shadowOffsetX=f.x,e.shadowOffsetY=f.y}}},draw:function(e,t,n){function r(e){return o?o.chain(e):e}var i=this._updateVersion=this._project._updateVersion;if(this._visible&&0!==this._opacity){var a=t.matrices,o=t.viewMatrix,s=this._matrix,l=a[a.length-1].chain(s);if(l.isInvertible()){a.push(l),t.updateMatrix&&(l._updateVersion=i,this._globalMatrix=l);var u,c,h,d=this._blendMode,f=this._opacity,p="normal"===d,m=re.nativeModes[d],g=p&&1===f||t.dontStart||t.clip||(m||p&&f<1)&&this._canComposite(),v=t.pixelRatio||1;if(!g){var y=this.getStrokeBounds(r(l));if(!y.width||!y.height)return;h=t.offset,c=t.offset=y.getTopLeft().floor(),u=e,e=ne.getContext(y.getSize().ceil().add(1).multiply(v)),1!==v&&e.scale(v,v)}e.save();var w=n?n.chain(s):!this.getStrokeScaling(!0)&&r(l),b=!g&&t.clipItem,_=!w||b;if(g?(e.globalAlpha=f,m&&(e.globalCompositeOperation=d)):_&&e.translate(-c.x,-c.y),_&&(g?s:r(l)).applyToContext(e),b&&t.clipItem.draw(e,t.extend({clip:!0})),w){e.setTransform(v,0,0,v,0,0);var x=t.offset;x&&e.translate(-x.x,-x.y)}this._draw(e,t,w),e.restore(),a.pop(),t.clip&&!t.dontFinish&&e.clip(),g||(re.process(d,e,u,f,c.subtract(h).multiply(v)),ne.release(e),t.offset=h)}}},_isUpdated:function(e){var t=this._parent;if(t instanceof D)return t._isUpdated(e);var n=this._updateVersion===e;return!n&&t&&t._visible&&t._isUpdated(e)&&(this._updateVersion=e,n=!0),n},_drawSelection:function(e,t,n,r,i){if((this._drawSelected||this._boundsSelected)&&this._isUpdated(i)){var a=this.getSelectedColor(!0)||this.getLayer().getSelectedColor(!0),o=t.chain(this.getGlobalMatrix(!0));if(e.strokeStyle=e.fillStyle=a?a.toCanvasStyle(e):"#009dec",this._drawSelected&&this._drawSelected(e,o,r),this._boundsSelected){var s=n/2,l=o._transformCorners(this.getInternalBounds());e.beginPath();for(var u=0;u<8;u++)e[0===u?"moveTo":"lineTo"](l[u],l[++u]);e.closePath(),e.stroke();for(var u=0;u<8;u++)e.fillRect(l[u]-s,l[++u]-s,n,n)}}},_canComposite:function(){return!1}},s.each(["down","drag","up","move"],function(e){this["removeOn"+s.capitalize(e)]=function(){var t={};return t[e]=!0,this.removeOn(t)}},{removeOn:function(e){for(var t in e)if(e[t]){var n="mouse"+t,r=this._project,i=r._removeSets=r._removeSets||{};i[n]=i[n]||{},i[n][this._id]=this}return this}})),k=C.extend({_class:"Group",_selectChildren:!0,_serializeFields:{children:[]},initialize:function(e){this._children=[],this._namedChildren={},this._initialize(e)||this.addChildren(Array.isArray(e)?e:arguments)},_changed:function e(t){e.base.call(this,t),1026&t&&(this._clipItem=o)},_getClipItem:function(){var e=this._clipItem;if(e===o){e=null;for(var t=0,n=this._children.length;t<n;t++){var r=this._children[t];if(r._clipMask){e=r;break}}this._clipItem=e}return e},isClipped:function(){return!!this._getClipItem()},setClipped:function(e){var t=this.getFirstChild();t&&t.setClipMask(e)},_draw:function(e,t){var n=t.clip,r=!n&&this._getClipItem(),i=!0;if(t=t.extend({clipItem:r,clip:!1}),n?this._currentPath?(e.currentPath=this._currentPath,i=!1):(e.beginPath(),t.dontStart=t.dontFinish=!0):r&&r.draw(e,t.extend({clip:!0})),i)for(var a=0,o=this._children.length;a<o;a++){var s=this._children[a];s!==r&&s.draw(e,t)}n&&(this._currentPath=e.currentPath)}}),S=k.extend({_class:"Layer",initialize:function(e){var t=s.isPlainObject(e)?new s(e):{children:Array.isArray(e)?e:arguments},n=t.insert;t.insert=!1,k.call(this,t),(n||n===o)&&(this._project.addChild(this),this.activate())},_remove:function e(t,n){if(this._parent)return e.base.call(this,t,n);if(null!=this._index){var r=this._project;return r._activeLayer===this&&(r._activeLayer=this.getNextSibling()||this.getPreviousSibling()),s.splice(r.layers,null,this._index,1),this._installEvents(!1),t&&r._changes&&this._changed(5),n&&(r._needsUpdate=!0),!0}return!1},getNextSibling:function e(){return this._parent?e.base.call(this):this._project.layers[this._index+1]||null},getPreviousSibling:function e(){return this._parent?e.base.call(this):this._project.layers[this._index-1]||null},isInserted:function e(){return this._parent?e.base.call(this):null!=this._index},activate:function(){this._project._activeLayer=this},_insertSibling:function e(t,n,r){return this._parent?e.base.call(this,t,n,r):this._project.insertChild(t,n,r)}}),P=C.extend({_class:"Shape",_applyMatrix:!1,_canApplyMatrix:!1,_boundsSelected:!0,_serializeFields:{type:null,size:null,radius:null},initialize:function(e){this._initialize(e)},_equals:function(e){return this._type===e._type&&this._size.equals(e._size)&&s.equals(this._radius,e._radius)},clone:function(e){var t=new P(C.NO_INSERT);return t.setType(this._type),t.setSize(this._size),t.setRadius(this._radius),this._clone(t,e)},getType:function(){return this._type},setType:function(e){this._type=e},getShape:"#getType",setShape:"#setType",getSize:function(){var e=this._size;return new v(e.width,e.height,this,"setSize")},setSize:function(){var e=g.read(arguments);if(this._size){if(!this._size.equals(e)){var t=this._type,n=e.width,r=e.height;if("rectangle"===t){var i=g.min(this._radius,e.divide(2));this._radius.set(i.width,i.height)}else"circle"===t?(n=r=(n+r)/2,this._radius=n/2):"ellipse"===t&&this._radius.set(n/2,r/2);this._size.set(n,r),this._changed(9)}}else this._size=e.clone()},getRadius:function(){var e=this._radius;return"circle"===this._type?e:new v(e.width,e.height,this,"setRadius")},setRadius:function(e){var t=this._type;if("circle"===t){if(e===this._radius)return;var n=2*e;this._radius=e,this._size.set(n,n)}else if(e=g.read(arguments),this._radius){if(this._radius.equals(e))return;if(this._radius.set(e.width,e.height),"rectangle"===t){var n=g.max(this._size,e.multiply(2));this._size.set(n.width,n.height)}else"ellipse"===t&&this._size.set(2*e.width,2*e.height)}else this._radius=e.clone();this._changed(9)},isEmpty:function(){return!1},toPath:function(e){var t=this._clone(new(z[s.capitalize(this._type)])({center:new p,size:this._size,radius:this._radius,insert:!1}),e);return a.settings.applyMatrix&&t.setApplyMatrix(!0),t},_draw:function(e,t,n){var r=this._style,i=r.hasFill(),a=r.hasStroke(),o=t.dontFinish||t.clip,s=!n;if(i||a||o){var l=this._type,u=this._radius,c="circle"===l;if(t.dontStart||e.beginPath(),s&&c)e.arc(0,0,u,0,2*Math.PI,!0);else{var h=c?u:u.width,d=c?u:u.height,f=this._size,p=f.width,m=f.height;if(s&&"rectangle"===l&&0===h&&0===d)e.rect(-p/2,-m/2,p,m);else{var g=p/2,v=m/2,y=.44771525016920644,w=h*y,b=d*y,_=[-g,-v+d,-g,-v+b,-g+w,-v,-g+h,-v,g-h,-v,g-w,-v,g,-v+b,g,-v+d,g,v-d,g,v-b,g-w,v,g-h,v,-g+h,v,-g+w,v,-g,v-b,-g,v-d];n&&n.transform(_,_,32),e.moveTo(_[0],_[1]),e.bezierCurveTo(_[2],_[3],_[4],_[5],_[6],_[7]),g!==h&&e.lineTo(_[8],_[9]),e.bezierCurveTo(_[10],_[11],_[12],_[13],_[14],_[15]),v!==d&&e.lineTo(_[16],_[17]),e.bezierCurveTo(_[18],_[19],_[20],_[21],_[22],_[23]),g!==h&&e.lineTo(_[24],_[25]),e.bezierCurveTo(_[26],_[27],_[28],_[29],_[30],_[31])}}e.closePath()}o||!i&&!a||(this._setStyles(e),i&&(e.fill(r.getWindingRule()),e.shadowColor="rgba(0,0,0,0)"),a&&e.stroke())},_canComposite:function(){return!(this.hasFill()&&this.hasStroke())},_getBounds:function(e,t){var n=new y(this._size).setCenter(0,0);return"getBounds"!==e&&this.hasStroke()&&(n=n.expand(this.getStrokeWidth())),t?t._transformBounds(n):n}},new function(){function e(e,t,n){var r=e._radius;if(!r.isZero())for(var i=e._size.divide(2),a=0;a<4;a++){var o=new p(1&a?1:-1,a>1?1:-1),s=o.multiply(i),l=s.subtract(o.multiply(r)),u=new y(s,l);if((n?u.expand(n):u).contains(t))return l}}function t(e,t){var n=e.getAngleInRadians(),r=2*t.width,i=2*t.height,a=r*Math.sin(n),o=i*Math.cos(n);return r*i/(2*Math.sqrt(a*a+o*o))}return{_contains:function t(n){if("rectangle"===this._type){var r=e(this,n);return r?n.subtract(r).divide(this._radius).getLength()<=1:t.base.call(this,n)}return n.divide(this.size).getLength()<=.5},_hitTestSelf:function n(r,i){var a=!1;if(this.hasStroke()){var o=this._type,s=this._radius,l=this.getStrokeWidth()+2*i.tolerance;if("rectangle"===o){var u=e(this,r,l);if(u){var c=r.subtract(u);a=2*Math.abs(c.getLength()-t(c,s))<=l}else{var h=new y(this._size).setCenter(0,0),d=h.expand(l),f=h.expand(-l);a=d._containsPoint(r)&&!f._containsPoint(r)}}else"ellipse"===o&&(s=t(r,s)),a=2*Math.abs(r.getLength()-s)<=l}return a?new M("stroke",this):n.base.apply(this,arguments)}}},{statics:new function(){function e(e,t,n,r,i){var a=new P(s.getNamed(i));return a._type=e,a._size=n,a._radius=r,a.translate(t)}return{Circle:function(){var t=p.readNamed(arguments,"center"),n=s.readNamed(arguments,"radius");return e("circle",t,new g(2*n),n,arguments)},Rectangle:function(){var t=y.readNamed(arguments,"rectangle"),n=g.min(g.readNamed(arguments,"radius"),t.getSize(!0).divide(2));return e("rectangle",t.getCenter(!0),t.getSize(!0),n,arguments)},Ellipse:function(){var t=P._readEllipse(arguments),n=t.radius;return e("ellipse",t.center,n.multiply(2),n,arguments)},_readEllipse:function(e){var t,n;if(s.hasNamed(e,"radius"))t=p.readNamed(e,"center"),n=g.readNamed(e,"radius");else{var r=y.readNamed(e,"rectangle");t=r.getCenter(!0),n=r.getSize(!0).divide(2)}return{center:t,radius:n}}}}}),T=C.extend({_class:"Raster",_applyMatrix:!1,_canApplyMatrix:!1,_boundsGetter:"getBounds",_boundsSelected:!0,_serializeFields:{crossOrigin:null,source:null},initialize:function(e,t){this._initialize(e,t!==o&&p.read(arguments,1))||("string"==typeof e?this.setSource(e):this.setImage(e)),this._size||(this._size=new g,this._loaded=!1)},_equals:function(e){return this.getSource()===e.getSource()},clone:function(e){var t=new T(C.NO_INSERT),n=this._image,r=this._canvas;if(n)t.setImage(n);else if(r){var i=ne.getCanvas(this._size);i.getContext("2d").drawImage(r,0,0),t.setImage(i)}return t._crossOrigin=this._crossOrigin,this._clone(t,e)},getSize:function(){var e=this._size;return new v(e?e.width:0,e?e.height:0,this,"setSize")},setSize:function(){var e=g.read(arguments);if(!e.equals(this._size))if(e.width>0&&e.height>0){var t=this.getElement();this.setImage(ne.getCanvas(e)),t&&this.getContext(!0).drawImage(t,0,0,e.width,e.height)}else this._canvas&&ne.release(this._canvas),this._size=e.clone()},getWidth:function(){return this._size?this._size.width:0},setWidth:function(e){this.setSize(e,this.getHeight())},getHeight:function(){return this._size?this._size.height:0},setHeight:function(e){this.setSize(this.getWidth(),e)},isEmpty:function(){var e=this._size;return!e||0===e.width&&0===e.height},getResolution:function(){var e=this._matrix,t=new p(0,0).transform(e),n=new p(1,0).transform(e).subtract(t),r=new p(0,1).transform(e).subtract(t);return new g(72/n.getLength(),72/r.getLength())},getPpi:"#getResolution",getImage:function(){return this._image},setImage:function(e){this._canvas&&ne.release(this._canvas),e&&e.getContext?(this._image=null,this._canvas=e,this._loaded=!0):(this._image=e,this._canvas=null,this._loaded=e&&e.complete),this._size=new g(e?e.naturalWidth||e.width:0,e?e.naturalHeight||e.height:0),this._context=null,this._changed(521)},getCanvas:function(){if(!this._canvas){var e=ne.getContext(this._size);try{this._image&&e.drawImage(this._image,0,0),this._canvas=e.canvas}catch(t){ne.release(e)}}return this._canvas},setCanvas:"#setImage",getContext:function(e){return this._context||(this._context=this.getCanvas().getContext("2d")),e&&(this._image=null,this._changed(513)),this._context},setContext:function(e){this._context=e},getSource:function(){return this._image&&this._image.src||this.toDataURL()},setSource:function(e){function t(){var e=r.getView();e&&(a=e._scope,r.setImage(n),r.emit("load"),e.update())}var n,r=this,i=this._crossOrigin;n=document.getElementById(e)||new Image,i&&(n.crossOrigin=i),n.naturalWidth&&n.naturalHeight?setTimeout(t,0):(X.add(n,{load:t}),n.src||(n.src=e)),this.setImage(n)},getCrossOrigin:function(){return this._image&&this._image.crossOrigin||this._crossOrigin||"";
-},setCrossOrigin:function(e){this._crossOrigin=e,this._image&&(this._image.crossOrigin=e)},getElement:function(){return this._canvas||this._loaded&&this._image}},{beans:!1,getSubCanvas:function(){var e=y.read(arguments),t=ne.getContext(e.getSize());return t.drawImage(this.getCanvas(),e.x,e.y,e.width,e.height,0,0,e.width,e.height),t.canvas},getSubRaster:function(){var e=y.read(arguments),t=new T(C.NO_INSERT);return t.setImage(this.getSubCanvas(e)),t.translate(e.getCenter().subtract(this.getSize().divide(2))),t._matrix.preConcatenate(this._matrix),t.insertAbove(this),t},toDataURL:function(){var e=this._image&&this._image.src;if(/^data:/.test(e))return e;var t=this.getCanvas();return t?t.toDataURL.apply(t,arguments):null},drawImage:function(e){var t=p.read(arguments,1);this.getContext(!0).drawImage(e,t.x,t.y)},getAverageColor:function(e){var t,n;e?e instanceof B?(n=e,t=e.getBounds()):e.width?t=new y(e):e.x&&(t=new y(e.x-.5,e.y-.5,1,1)):t=this.getBounds();var r=32,i=Math.min(t.width,r),a=Math.min(t.height,r),o=T._sampleContext;o?o.clearRect(0,0,r+1,r+1):o=T._sampleContext=ne.getContext(new g(r)),o.save();var l=(new b).scale(i/t.width,a/t.height).translate(-t.x,-t.y);l.applyToContext(o),n&&n.draw(o,new s({clip:!0,matrices:[l]})),this._matrix.applyToContext(o);var u=this.getElement(),c=this._size;u&&o.drawImage(u,-c.width/2,-c.height/2),o.restore();for(var h=o.getImageData(.5,.5,Math.ceil(i),Math.ceil(a)).data,d=[0,0,0],f=0,p=0,m=h.length;p<m;p+=4){var v=h[p+3];f+=v,v/=255,d[0]+=h[p]*v,d[1]+=h[p+1]*v,d[2]+=h[p+2]*v}for(var p=0;p<3;p++)d[p]/=f;return f?V.read(d):null},getPixel:function(){var e=p.read(arguments),t=this.getContext().getImageData(e.x,e.y,1,1).data;return new V("rgb",[t[0]/255,t[1]/255,t[2]/255],t[3]/255)},setPixel:function(){var e=p.read(arguments),t=V.read(arguments),n=t._convert("rgb"),r=t._alpha,i=this.getContext(!0),a=i.createImageData(1,1),o=a.data;o[0]=255*n[0],o[1]=255*n[1],o[2]=255*n[2],o[3]=null!=r?255*r:255,i.putImageData(a,e.x,e.y)},createImageData:function(){var e=g.read(arguments);return this.getContext().createImageData(e.width,e.height)},getImageData:function(){var e=y.read(arguments);return e.isEmpty()&&(e=new y(this._size)),this.getContext().getImageData(e.x,e.y,e.width,e.height)},setImageData:function(e){var t=p.read(arguments,1);this.getContext(!0).putImageData(e,t.x,t.y)},_getBounds:function(e,t){var n=new y(this._size).setCenter(0,0);return t?t._transformBounds(n):n},_hitTestSelf:function(e){if(this._contains(e)){var t=this;return new M("pixel",t,{offset:e.add(t._size.divide(2)).round(),color:{get:function(){return t.getPixel(this.offset)}}})}},_draw:function(e){var t=this.getElement();t&&(e.globalAlpha=this._opacity,e.drawImage(t,-this._size.width/2,-this._size.height/2))},_canComposite:function(){return!0}}),N=C.extend({_class:"PlacedSymbol",_applyMatrix:!1,_canApplyMatrix:!1,_boundsGetter:{getBounds:"getStrokeBounds"},_boundsSelected:!0,_serializeFields:{symbol:null},initialize:function(e,t){this._initialize(e,t!==o&&p.read(arguments,1))||this.setSymbol(e instanceof E?e:new E(e))},_equals:function(e){return this._symbol===e._symbol},getSymbol:function(){return this._symbol},setSymbol:function(e){this._symbol=e,this._changed(9)},clone:function(e){var t=new N(C.NO_INSERT);return t.setSymbol(this._symbol),this._clone(t,e)},isEmpty:function(){return this._symbol._definition.isEmpty()},_getBounds:function(e,t,n){var r=this.symbol._definition;return r._getCachedBounds(e,t&&t.chain(r._matrix),n)},_hitTestSelf:function(e,t){var n=this._symbol._definition._hitTest(e,t);return n&&(n.item=this),n},_draw:function(e,t){this.symbol._definition.draw(e,t)}}),M=s.extend({_class:"HitResult",initialize:function(e,t,n){this.type=e,this.item=t,n&&(n.enumerable=!0,this.inject(n))},statics:{getOptions:function(e){return new s({type:null,tolerance:a.settings.hitTolerance,fill:!e,stroke:!e,segments:!e,handles:!1,ends:!1,center:!1,bounds:!1,guides:!1,selected:!1},e)}}}),I=s.extend({_class:"Segment",beans:!0,initialize:function(e,t,n,r,i,a){var s,l,u,c=arguments.length;0===c||(1===c?"point"in e?(s=e.point,l=e.handleIn,u=e.handleOut):s=e:2===c&&"number"==typeof e?s=arguments:c<=3?(s=e,l=t,u=n):(s=e!==o?[e,t]:null,l=n!==o?[n,r]:null,u=i!==o?[i,a]:null)),new L(s,this,"_point"),new L(l,this,"_handleIn"),new L(u,this,"_handleOut")},_serialize:function(e){return s.serialize(this.hasHandles()?[this._point,this._handleIn,this._handleOut]:this._point,e,!0)},_changed:function(e){var t=this._path;if(t){var n,r=t._curves,i=this._index;r&&(e&&e!==this._point&&e!==this._handleIn||!(n=i>0?r[i-1]:t._closed?r[r.length-1]:null)||n._changed(),e&&e!==this._point&&e!==this._handleOut||!(n=r[i])||n._changed()),t._changed(25)}},getPoint:function(){return this._point},setPoint:function(){var e=p.read(arguments);this._point.set(e.x,e.y)},getHandleIn:function(){return this._handleIn},setHandleIn:function(){var e=p.read(arguments);this._handleIn.set(e.x,e.y)},getHandleOut:function(){return this._handleOut},setHandleOut:function(){var e=p.read(arguments);this._handleOut.set(e.x,e.y)},hasHandles:function(){return!this._handleIn.isZero()||!this._handleOut.isZero()},clearHandles:function(){this._handleIn.set(0,0),this._handleOut.set(0,0)},_selectionState:0,isSelected:function(e){var t=this._selectionState;return e?e===this._point?!!(4&t):e===this._handleIn?!!(1&t):e===this._handleOut&&!!(2&t):!!(7&t)},setSelected:function(e,t){var n=this._path,e=!!e,r=this._selectionState,i=r,a=t?t===this._point?4:t===this._handleIn?1:t===this._handleOut?2:0:7;e?r|=a:r&=~a,this._selectionState=r,n&&r!==i&&(n._updateSelection(this,i,r),n._changed(129))},getIndex:function(){return this._index!==o?this._index:null},getPath:function(){return this._path||null},getCurve:function(){var e=this._path,t=this._index;return e?(t>0&&!e._closed&&t===e._segments.length-1&&t--,e.getCurves()[t]||null):null},getLocation:function(){var e=this.getCurve();return e?new O(e,this===e._segment1?0:1):null},getNext:function(){var e=this._path&&this._path._segments;return e&&(e[this._index+1]||this._path._closed&&e[0])||null},getPrevious:function(){var e=this._path&&this._path._segments;return e&&(e[this._index-1]||this._path._closed&&e[e.length-1])||null},isFirst:function(){return 0===this._index},isLast:function(){var e=this._path;return e&&this._index===e._segments.length-1||!1},reverse:function(){var e=this._handleIn,t=this._handleOut,n=e._x,r=e._y;e.set(t._x,t._y),t.set(n,r)},reversed:function(){return new I(this._point,this._handleOut,this._handleIn)},remove:function(){return!!this._path&&!!this._path.removeSegment(this._index)},clone:function(){return new I(this._point,this._handleIn,this._handleOut)},equals:function(e){return e===this||e&&this._class===e._class&&this._point.equals(e._point)&&this._handleIn.equals(e._handleIn)&&this._handleOut.equals(e._handleOut)||!1},toString:function(){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}}),L=p.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=p.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)}}),A=s.extend({_class:"Curve",initialize:function(e,t,n,r,i,a,o,s){var l,u,c,h,d,f,p=arguments.length;3===p?(this._path=e,l=t,u=n):0===p?(l=new I,u=new I):1===p?"segment1"in e?(l=new I(e.segment1),u=new I(e.segment2)):"point1"in e?(c=e.point1,d=e.handle1,f=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]],f=[e[4]-e[6],e[5]-e[7]]):2===p?(l=new I(e),u=new I(t)):4===p?(c=e,d=t,f=n,h=r):8===p&&(c=[e,t],h=[o,s],d=[n-e,r-t],f=[i-o,a-s]),this._segment1=l||new I(c,null,d),this._segment2=u||new I(h,f,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 A(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=p.read(arguments);this._segment1._point.set(e.x,e.y)},getPoint2:function(){return this._segment2._point},setPoint2:function(){var e=p.read(arguments);this._segment2._point.set(e.x,e.y)},getHandle1:function(){return this._segment1._handleOut},setHandle1:function(){var e=p.read(arguments);this._segment1._handleOut.set(e.x,e.y)},getHandle2:function(){return this._segment2._handleIn},setHandle2:function(){var e=p.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 A.getValues(this._segment1,this._segment2,e)},getPoints:function(){for(var e=this.getValues(),t=[],n=0;n<8;n+=2)t.push(new p(e[n],e[n+1]));return t},getLength:function(){return null==this._length&&(this._length=A.getLength(this.getValues(),0,1)),this._length},getArea:function(){return A.getArea(this.getValues())},getLine:function(){return new _(this._segment1._point,this._segment2._point)},getPart:function(e,t){return new A(A.getPart(this.getValues(),e,t))},getPartLength:function(e,t){return A.getLength(this.getValues(),e,t)},getIntersections:function(e){return A._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=A.subdivide(this.getValues(),r),l=s[0],u=s[1],c=n||this.hasHandles(),h=this._segment1,d=this._segment2,f=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 I(new p(m,g),c&&new p(l[4]-m,l[5]-g),c&&new p(u[2]-m,u[3]-g));f?(f.insert(h._index+1,v),o=this.getNext()):(this._segment2=v,o=new A(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 A(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,f=h*r+t*a,p=h*i+t*s,m=h*a+t*l,g=h*s+t*u,v=h*l+t*c,y=h*d+t*p,w=h*f+t*m,b=h*p+t*g,_=h*m+t*v,x=h*y+t*b,E=h*w+t*_;return[[n,r,d,f,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,f=u-o-c-h;return d.solveCubic(f,h,c,o-n,r,i,a)},getParameterOf:function(e,t){var n=new p(e[0],e[1]),r=new p(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=A.solveCubic(e,u,o[u],s,0,1),h=0;h<c;h++)if(a=s[h],t.isClose(A.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(A.getPoint(e,n),!0);if(r<d)return d=r,f=n,!0}}if(A.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:A.getParameterOf(e,new p(r+c*s,i+c*l))}for(var h=100,d=1/0,f=0,m=0;m<=h;m++)n(m/h);for(var g=1/(2*h);g>4e-7;)n(f-g)||n(f+g)||(g/=2);return f},getPart:function(e,t,n){var r=t>n;if(r){var i=t;t=n,n=i}return t>0&&(e=A.subdivide(e,t)[1]),n<1&&(e=A.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,f=3*s-2*u-r;return Math.max(c*c,d*d)+Math.max(h*h,f*f)<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++)A._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,f=t-e,p=d.solveQuadratic(c,h,f,l),m=4e-7,g=1-m;u(r,0);for(var v=0;v<p;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]=z[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 p(i-n,a-r),new p(t[2]-n,t[3]-r),new p(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 A.getParameterAt(this.getValues(),e,t)},getParameterOf:function(){return A.getParameterOf(this.getValues(),p.read(arguments))},getLocationAt:function(e,t){var n=t?e:this.getParameterAt(e);return null!=n&&n>=0&&n<=1?new O(this,n):null},getLocationOf:function(){return this.getLocationAt(this.getParameterOf(p.read(arguments)),!0)},getOffsetOf:function(){var e=this.getLocationOf.apply(this,arguments);return e?e.getOffset():null},getNearestLocation:function(){var e=p.read(arguments),t=this.getValues(),n=A.getNearestParameter(t,e),r=A.getPoint(t,n);return new O(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 A[e](r,n?t:A.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),f=6*(n+o)-12*i,p=3*(i-n);return function(e){var t=(u*e+c)*e+h,n=(d*e+f)*e+p;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],f=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:f}else{var y=3*(l-o),w=3*(c-l)-y,b=d-o-y-w,_=3*(u-s),x=3*(h-u)-_,E=f-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*(f-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,S=6*E*t+2*x,P=Math.pow(i*i+a*a,1.5);i=0!==P?(i*S-a*k)/P:0,a=0}}}return 2===n?new p(a,-i):new p(i,a)}return{statics:{getLength:function(n,r,i){if(r===o&&(r=0),i===o&&(i=1),0===r&&1===i&&A.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),f=d.integrate(h,u,c,t(u,c));if(s(r-f)<1e-12)return l?c:u;if(s(r)>f)return null;var p=r/f,m=0;return d.findRoot(a,h,i+p,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,f=4e-7,p=1-f;if(null==i&&(i=A.getParameterOf(n,a)),null!==i&&i>=(h?f:0)&&i<=(d?p:1)&&(null==l&&(l=A.getParameterOf(o,u)),null!==l&&l>=(d?f:0)&&l<=(h?p:1))){var m=t.renormalize;if(m){var g=m(i,l);i=g[0],l=g[1]}var v=new O(r,i,a||A.getPoint(n,i),c),y=new O(s,l,u||A.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)||O.insert(e,b,!0)}}function t(i,a,o,s,l,u,c,h,d,f,p,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]),S=C(w,b,x,E,a[4],a[5]),P=k*S>0?.75:4/9,T=P*Math.min(0,k,S),N=P*Math.max(0,k,S),M=C(w,b,x,E,i[0],i[1]),I=C(w,b,x,E,i[2],i[3]),L=C(w,b,x,E,i[4],i[5]),O=C(w,b,x,E,i[6],i[7]),B=n(M,I,L,O),z=B[0],D=B[1];if(null!=(v=r(z,D,T,N))&&null!=(y=r(z.reverse(),D.reverse(),T,N))){i=A.getPart(i,v,y);var R=y-v,j=c+(h-c)*v,F=c+(h-c)*y;if(p>.5&&R>.5)if(F-j>f-d){var q=A.subdivide(i,.5),V=j+(F-j)/2;t(a,q[0],s,o,l,u,d,f,j,V,R,!m,g),t(a,q[1],s,o,l,u,d,f,V,F,R,!m,g)}else{var q=A.subdivide(a,.5),V=d+(f-d)/2;t(q[0],i,s,o,l,u,d,V,j,F,R,!m,g),t(q[1],i,s,o,l,u,V,f,j,F,R,!m,g)}else if(Math.max(f-d,F-j)<1e-7){var U=j+(F-j)/2,W=d+(f-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 R>1e-12&&t(a,i,s,o,l,u,d,f,j,F,R,!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=A.isStraight(t),l=s?n:t,u=s?t:n,c=u[0],h=u[1],f=u[6],p=u[7],m=f-c,g=p-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=A.solveCubic(b,1,0,C,0,1),_=0;_<k;_++){var S=C[_],P=A.getPoint(l,S),T=A.getParameterOf(u,P);if(null!==T){var N=A.getPoint(u,T),M=s?T:S,I=s?S:T;(!o.endConnected||I>d.CURVETIME_EPSILON)&&e(a,o,t,r,M,s?N:P,n,i,I,s?P:N)}}}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 A._getSelfIntersection(n,i,l,u);var c=n[0],h=n[1],d=n[6],f=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]+f)/4,E=(3*r[2]+m)/4,C=(3*r[3]+g)/4,k=(3*r[4]+v)/4,S=(3*r[5]+y)/4,P=Math.min,T=Math.max;if(!(T(c,w,_,d)>=P(m,E,k,v)&&P(c,w,_,d)<=T(m,E,k,v)&&T(h,b,x,f)>=P(g,C,S,y)&&P(h,b,x,f)<=T(g,C,S,y)))return l;if(!u.startConnected&&!u.endConnected){var N=A.getOverlaps(n,r);if(N){for(var M=0;M<2;M++){var I=N[M];e(l,u,n,i,I[0],null,r,s,I[1],null,!0)}return l}}var L=A.isStraight(n),O=A.isStraight(r),B=L&&O,z=1e-12,D=l.length;if((B?o:L||O?a:t)(n,r,i,s,l,u,0,1,0,1,0,!1,0),B&&l.length>D)return l;var R=new p(c,h),j=new p(d,f),F=new p(m,g),q=new p(v,y);return R.isClose(F,z)&&e(l,u,n,i,0,R,r,s,0,F),!u.startConnected&&R.isClose(q,z)&&e(l,u,n,i,0,R,r,s,1,q),!u.endConnected&&j.isClose(F,z)&&e(l,u,n,i,1,j,r,s,0,F),j.isClose(q,z)&&e(l,u,n,i,1,j,r,s,1,q),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],f=new _(i,a,c,h,!1),m=f.getSide(new p(o,s),!0),g=f.getSide(new p(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,S=x*w-y*E,P=E*b-w*C;if(k*k-4*S*P<0){var T,N=[],M=d.solveCubic(y*y+x*x,3*(y*w+x*E),2*(w*w+E*E)+y*b+x*C,w*b+E*C,N,0,1);if(M>0){for(var I=0,L=0;I<M;I++){var O=Math.abs(t.getCurvatureAt(N[I],!0));O>L&&(L=O,T=N[I])}var B=A.subdivide(e,T);r.endConnected=!0,r.renormalize=function(e,t){return[e*T,t*(1-T)+T]},A._getIntersections(B[0],B[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=A.isStraight(e),s=A.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 p(h[0],h[1]))>a||d.getDistance(new p(h[6],h[7]))>a)return null}else if(o^s)return null;for(var f=[e,t],m=[],g=0,v=0;g<2&&m.length<2;g+=0===v?0:1,v^=1){var y=A.getParameterOf(f[1^g],new p(f[g][0===v?0:6],f[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=A.getPart(e,m[0][0],m[1][0]),x=A.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}}}}),O=s.extend({_class:"CurveLocation",beans:!0,initialize:function e(t,n,r,i,a){if(n>.9999996){var o=t.getNext();o&&(n=0,t=o)}this._id=f.get(e),this._setCurve(t),this._parameter=n,this._point=r||t.getPointAt(n,!0),this._overlap=i,this._distance=a,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 O&&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(),f=u.getTangentAt(a,!0).negate().getAngleInRadians(),p=l.getTangentAt(i,!0).getAngleInRadians();return e(f,h,d)^e(p,h,d)&&e(f,d,h)^e(p,d,h)},isOverlap:function(){return!!this._overlap}},s.each(A.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}}}}),B=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=[],f=[],p=0;p<h;p++)d[p]=u[p].getValues(o);for(var p=0;p<c;p++){var m=l[p],g=i?d[p]:m.getValues(a),v=m.getPath();v!==e&&(e=v,s=[],f.push(s)),i&&A._getSelfIntersection(g,m,s,{include:t,startConnected:1===c&&m.getPoint1().equals(m.getPoint2())});for(var y=i?p+1:0;y<h;y++){if(r&&s.length)return s;var w=u[y];A._getIntersections(g,d[y],m,w,s,{include:t,startConnected:i&&m.getPrevious()===w,endConnected:i&&m.getNext()===w})}}s=[];for(var p=0,b=f.length;p<b;p++)s.push.apply(s,f[p]);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 p(t(e,"x"),t(e+1,"y"))}var r,i,a,o=e.match(/[mlhvcsqtaz][^mlhvcsqtaz]*/gi),s=!1,l=new p,u=new p;this.clear();for(var c=0,h=o&&o.length;c<h;c++){var d=o[c],f=d[0],m=f.toLowerCase();r=d.match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);var v=r&&r.length;switch(s=f===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)}}),z=B.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 z(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(t){if(e.base.call(this,t),8&t){var n=this._parent;if(n&&(n._currentPath=o),this._length=this._area=this._clockwise=this._monoCurves=o,16&t)this._version++;else if(this._curves)for(var r=0,i=this._curves.length;r<i;r++)this._curves[r]._changed()}else 32&t&&(this._bounds=o)},getStyle:function(){var e=this._parent;return(e instanceof D?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(I.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 A(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 A(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"+p.pair(r,i)),g=!1):(s=m[2],l=m[3],s===r&&l===i&&u===a&&c===o?n||v.push("l"+p.pair(r-a,i-o)):v.push("c"+p.pair(u-a,c-o)+" "+p.pair(s-a,l-o)+" "+p.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,f=d.length,p=new h(t),m=new Array(6),g=!0,v=[];if(0===f)return"";for(var y=0;y<f;y++)n(d[y]);return this._closed&&f>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 A(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(I.readAll(arguments)):this._add([I.read(arguments)])[0]},insert:function(e,t){return arguments.length>2&&"number"!=typeof t?this._add(I.readAll(arguments,1),e):this._add([I.read(arguments,1)],e)[0]},addSegment:function(){return this._add([I.read(arguments)])[0]},insertSegment:function(e){return this._add([I.read(arguments,1)],e)[0]},addSegments:function(e){return this._add(I.readAll(e))},insertSegments:function(e,t){return this._add(I.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+=A.getArea(A.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 e(t){t||this._selectSegments(!1),e.base.call(this,t)},_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 R(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 I(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 j(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 z(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=P.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=P.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=P.Circle,s=i(0,2)/2):(a=P.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 M(i,f,{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 z({internal:!0,closed:!0}),y||t._index>0&&t._index<v-1?"round"!==s&&(t._handleIn.isZero()||t._handleOut.isZero())&&z._addBevelJoin(t,s,C,u,a,!0):"round"!==l&&z._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,f=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 p(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 S=h.getParameter();0===S||1===S&&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 P=g[k];if(e.getDistance(P._point)<=u&&o(P)){h=P.getLocation();break}}}return!h&&x&&this._contains(e)||h&&!_&&!E?new M("fill",this):h?new M(_?"stroke":"curve",this,{location:h,point:h.getPoint()}):null}},s.each(A.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=p.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 O(n[n.length-1],1):null},getNearestLocation:function(){for(var e=p.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 f=e.fillStyle;e.fillStyle="#ffffff",e.fillRect(h-a+1,d-a+1,r-2,r-2),e.fillStyle=f}}}function t(e,t,n){function r(t){if(n)t._transformCoordinates(n,p,!1),i=p[0],a=p[1];else{var r=t._point;i=r._x,a=r._y}if(m)e.moveTo(i,a),m=!1;else{if(n)l=p[2],u=p[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=p[4],h=p[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,f=d.length,p=new Array(6),m=!0,g=0;g<f;g++)r(d[g]);t._closed&&f>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 f,p=new R(this,32,.25,r),m=p.length,g=-l.getDashOffset(),v=0;for(g%=m;g>0;)g-=i(v--)+i(v--);for(;g<m;)f=g+i(v++),(g>0||f>0)&&p.drawPart(e,Math.max(g,0),Math.max(f,0)),g=f+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,f=1-d,m=s+a,g=h+a;u[h]=u[s]*d+u[h]*f,c[h]=c[s]*d+c[h]*f,u[g]=u[m]*f+u[g]*d,c[g]=c[m]*f+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 p(u[s],c[s]).subtract(y._point)),v=s<i-1?new p(2*o[s+1]._x-u[s+1],2*o[s+1]._y-c[s+1]):new p((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 I(p.read(arguments))])},moveBy:function(){throw new Error("moveBy() is unsupported on Path items.")},lineTo:function(){this._add([new I(p.read(arguments))])},cubicCurveTo:function(){var t=p.read(arguments),n=p.read(arguments),r=p.read(arguments),i=e(this);i.setHandleOut(t.subtract(i._point)),this._add([new I(r,n.subtract(r))])},quadraticCurveTo:function(){var t=p.read(arguments),n=p.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=p.read(arguments),n=p.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=p.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=p.read(arguments);else{var f=g.read(arguments);if(f.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(f.width),k=E(f.height),S=C*C,P=k*k,T=w*w,N=x*x,M=Math.sqrt(T/S+N/P);if(M>1&&(C*=M,k*=M,S=C*C,P=k*k),M=(S*P-S*N-P*T)/(S*N+P*T),E(M)<1e-12&&(M=0),M<0)throw new Error("Cannot create an arc with the given arguments");n=new p(C*x/k,-k*w/C).multiply((v===h?-1:1)*Math.sqrt(M)).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 L=new _(l.add(t).divide(2),t.subtract(l).rotate(90),!0),A=new _(t.add(u).divide(2),u.subtract(t).rotate(90),!0),O=new _(l,u),B=O.getSide(t);if(n=L.intersect(A,!0),!n){if(!B)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 z=O.getSide(n);0===z?r=B*Math.abs(r):B===z&&(r+=r<0?360:-360)}for(var D=Math.abs(r),R=D>=360?4:Math.ceil(D/90),j=r/R,F=j*Math.PI/360,q=4/3*Math.sin(F)/(1+Math.cos(F)),V=[],U=0;U<=R;U++){var y=u,W=null;if(U<R&&(W=i.rotate(90).multiply(q),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(q);a&&(G=a._transformPoint(i.add(G)).subtract(y)),V.push(new I(y,G,W))}i=i.rotate(j)}this._add(V)},lineBy:function(){var t=p.read(arguments),n=e(this)._point;this.lineTo(n.add(t))},curveBy:function(){var t=p.read(arguments),n=p.read(arguments),r=s.read(arguments),i=e(this)._point;this.curveTo(i.add(t),i.add(n),r)},cubicCurveBy:function(){var t=p.read(arguments),n=p.read(arguments),r=p.read(arguments),i=e(this)._point;this.cubicCurveTo(i.add(t),i.add(n),i.add(r))},quadraticCurveBy:function(){var t=p.read(arguments),n=p.read(arguments),r=e(this)._point;this.quadraticCurveTo(r.add(t),r.add(n))},arcBy:function(){var t=e(this)._point,n=t.add(p.read(arguments)),r=s.pick(s.peek(arguments),!0);"boolean"==typeof r?this.arcTo(n,r):this.arcTo(n,t.add(p.read(arguments)))},closePath:function(e){this.setClosed(!0),e&&this.join()}}},{_getBounds:function(e,t){return z[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++)A._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,f=e.length;d<f;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):z._addBevelJoin(e,t,u,p,i)}function s(e,t){"round"===t?a(e):z._addSquareCap(e,t,u,i)}if(!n.hasStroke())return z.getBounds(e,t,n,r);for(var l=e.length-(t?0:1),u=n.getStrokeWidth()/2,c=z._getPenPadding(u,r),h=z.getBounds(e,t,n,r,c),d=n.getStrokeJoin(),f=n.getStrokeCap(),p=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],f),s(e[e.length-1],f)),h},_getPenPadding:function(e,t){if(!t)return[e,e];var n=t.shiftless(),r=n.transform(new p(e,0)),i=n.transform(new p(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 p(-u.y,u.x),!0).intersect(new _(l.add(c),new p(-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 f=e[h];f._transformCoordinates(r,o,!1);for(var p=0;p<6;p+=2){var m=0===p?a:i,g=m?m[0]:0,v=m?m[1]:0,w=o[p],b=o[p+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)))),z.getHandleBounds(e,t,n,r,z._getPenPadding(i,r),z._getPenPadding(a,r))}}});z.inject({statics:new function(){function e(e,t,n){var r=s.getNamed(n),i=new z(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 I(s._point.multiply(n).add(t),s._handleIn.multiply(n),s._handleOut.multiply(n))}return e(a,!0,i)}var n=.5522847498307936,r=[new I([-1,0],[0,n],[0,-n]),new I([0,-1],[-n,0],[n,0]),new I([1,0],[0,-n],[0,n]),new I([0,1],[n,0],[-n,0])];return{Line:function(){return e([new I(p.readNamed(arguments,"from")),new I(p.readNamed(arguments,"to"))],!1,arguments)},Circle:function(){var e=p.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 I(a),new I(o),new I(s),new I(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 I(a.add(u,0),null,[-h,0]),new I(a.subtract(0,c),[0,d]),new I(o.add(0,c),null,[0,-d]),new I(o.add(u,0),[-h,0],null),new I(s.subtract(u,0),null,[h,0]),new I(s.add(0,c),[0,-d],null),new I(l.subtract(0,c),null,[0,d]),new I(l.subtract(u,0),[h,0])]}return e(t,!0,arguments)},RoundRectangle:"#Rectangle",Ellipse:function(){var e=P._readEllipse(arguments);return t(e.center,e.radius,arguments)},Oval:"#Ellipse",Arc:function(){var e=p.readNamed(arguments,"from"),t=p.readNamed(arguments,"through"),n=p.readNamed(arguments,"to"),r=s.getNamed(arguments),i=new z(r&&r.insert===!1&&C.NO_INSERT);return i.moveTo(e),i.arcTo(t,n),i.set(r)},RegularPolygon:function(){for(var t=p.readNamed(arguments,"center"),n=s.readNamed(arguments,"sides"),r=s.readNamed(arguments,"radius"),i=360/n,a=!(n%3),o=new p(0,a?-r:r),l=a?-1:.5,u=new Array(n),c=0;c<n;c++)u[c]=new I(t.add(o.rotate((c+l)*i)));return e(u,!0,arguments)},Star:function(){for(var t=p.readNamed(arguments,"center"),n=2*s.readNamed(arguments,"points"),r=s.readNamed(arguments,"radius1"),i=s.readNamed(arguments,"radius2"),a=360/n,o=new p(0,-1),l=new Array(n),u=0;u<n;u++)l[u]=new I(t.add(o.rotate(a*u).multiply(u%2?i:r)));return e(l,!0,arguments)}}}});var D=B.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 e(t,n,r){for(var i=n.length-1;i>=0;i--){var a=n[i];a instanceof D&&(n.splice.apply(n,[i,1].concat(a.removeChildren())),a.remove())}n=e.base.call(this,t,n,r,z);for(var i=0,s=!r&&n&&n.length;i<s;i++){var a=n[i];a._clockwise===o&&a.setClockwise(0===a._index)}return n},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 e(){for(var t=this._children,n=t.length-1;n>=0;n--){var r=t[n].reduce();r.isEmpty()&&t.splice(n,1)}if(0===t.length){var r=new z(C.NO_INSERT);return r.insertAbove(this),r.setStyle(this._style),this.remove(),r}return e.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===z||"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 z(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=p.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});B.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];f.push.apply(f,r._segments),p.push.apply(p,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=O.expand(c.getIntersections(h,function(e){return h&&e.isOverlap()||e.isCrossing()}));a(d);var f=[],p=[];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,p,o);for(var m=0,g=f.length;m<g;m++){var v=f[m];null==v._winding&&s(v,c,h,p,o)}return t(D,l(f,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 f;h<r?f=c._segment1:h>a?f=c._segment2:(f=c.divide(h,!0,!0)._segment1,o&&s.push(f)),u._setSegment(f);var p=f._intersection,m=u._intersection;if(p){i(p,m);for(var g=p;g;)i(g._intersection,p),g=g._next}else f._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,f=[],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(A.solveCubic(x,0,l,f,0,1)>0)for(var E=f.length-1;E>=0;E--){var C=A.getPoint(x,f[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 p(l,g),t,!1,r)),v<1/0&&(h=o(new p(l,v),t,!1,r))}else for(var k,S,P=l-i,T=l+i,N=!1,b=0,_=t.length;b<_;b++){var M=t[b],x=M.values,I=M.winding;if(I&&(1===I&&u>=x[1]&&u<=x[7]||u>=x[7]&&u<=x[1])&&1===A.solveCubic(x,1,u,f,0,1)){var L=f[0];if(!(L>s&&N&&M.next!==t[b+1]||L<a&&S>s&&M.previous===k)){var O=A.getPoint(x,L).x,B=A.getTangent(x,L).y,z=!1;d.isZero(B)&&!A.isStraight(x)||L<a&&B*A.getTangent(M.previous.values,1).y<0||L>s&&B*A.getTangent(M.next.values,0).y<0?r&&O>=P&&O<=T&&(++c,++h,z=!0):O<=P?(c+=I,z=!0):O>=T&&(h+=I,z=!0),M.previous!==t[b-1]&&(N=L<a&&z)}k=M,S=L}}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 f=0;f<3;f++)for(var d=u*(f+1)/4,p=0,m=s.length;p<m;p++){var g=s[p],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 D&&(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],f=0,p=e.length;f<p;f++){var m=e[f],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 z(C.NO_INSERT),o=m,s=b),g.add(new I(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(O.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(D,l(r),this,null,!1)}}}),z.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!==A.getLength(t)){var n=t[1],r=t[3],i=t[5],a=t[7];if(A.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=[],f=d.solveQuadratic(o,s,l,h,u,c);if(0===f)e(t);else{h.sort();var p=h[0],m=A.subdivide(t,p);e(m[0]),f>1&&(p=(h[1]-p)/(1-p),m=A.subdivide(m[1],p),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,f=u._x,p=u._y;t([c,h,c,h,f,p,f,p])}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])&&A.solveCubic(l,1,i,r,0,1)>0)for(var u=r.length-1;u>=0;u--)a.push(A.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}}),D.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 R=s.extend({
-_class:"PathIterator",initialize:function(e,t,n,r){function i(e,t){var n=A.getValues(e,t,r);s.push(n),a(n,e._index,0,1)}function a(e,t,r,i){if(i-r>c&&!A.isFlatEnough(e,n||.25)){var o=A.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],f=Math.sqrt(h*h+d*d);f>1e-6&&(u+=f,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],f=1,p=h.length;f<p;f++)o=h[f],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=A.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(A.evaluateMethods,function(e){this[e+"At"]=function(t,n){var r=this.getParameterAt(t);return A[e](this.curves[r.index],r.value,n)}},{})),j=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 I(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),f=this.findMaxError(e,t,d,l);if(f.error<this.error&&c)return void this.addCurve(d);if(s=f.index,f.error>=u)break;c=this.reparameterize(e,t,l,d),u=f.error}var p=this.points[s-1].subtract(this.points[s]),m=this.points[s].subtract(this.points[s+1]),g=p.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 I(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],f=1-d,p=3*d*f,m=f*f*f,g=p*f,v=p*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],S=u[0]*l[1][1]-u[1]*l[0][1];x=S/C,E=k/C}else{var P=l[0][0]+l[0][1],T=l[1][0]+l[1][1];x=E=Math.abs(P)>a?u[0]/P:Math.abs(T)>a?u[1]/T:0}var N,M,I=s.getDistance(o),L=a*I;if(x<L||E<L)x=E=I/3;else{var A=s.subtract(o);N=r.normalize(x),M=i.normalize(E),N.dot(A)-M.dot(A)>I*I&&(x=E=I/3,N=M=null)}return[o,o.add(N||r.normalize(x)),s.add(M||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}}}),F=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&&p.read(arguments))},_equals:function(e){return this._content===e._content},_clone:function e(t,n,r){return t.setContent(this._content),e.base.call(this,t,n,r)},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"}),q=F.extend({_class:"PointText",initialize:function(){F.apply(this,arguments)},clone:function(e){return this._clone(new q(C.NO_INSERT),e)},getPoint:function(){var e=this._matrix.getTranslation();return new m(e.x,e.y,this,"setPoint")},setPoint:function(){var e=p.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}}),V=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 p.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 t(i){var a,o,s,l,u=Array.prototype.slice,c=arguments,h=0;Array.isArray(i)&&(c=i,i=c[0]);var d=null!=i&&typeof i;if("string"===d&&i in n&&(a=i,i=c[1],Array.isArray(i)?(o=i,s=c[2]):(this.__read&&(h=1),c=u.call(c,1),d=typeof i)),!o){if(l="number"===d?c:"object"===d&&null!=i.length?i:null){a||(a=l.length>=3?"rgb":"gray");var p=n[a].length;s=l[p],this.__read&&(h+=l===arguments?p+(null!=s?1:0):1),l.length>p&&(l=u.call(l,0,p))}else if("string"===d)a="rgb",o=e(i),4===o.length&&(s=o[3],o.length--);else if("object"===d)if(i.constructor===t){if(a=i._type,o=i._components.slice(),s=i._alpha,"gradient"===a)for(var m=1,g=o.length;m<g;m++){var v=o[m];v&&(o[m]=v.clone())}}else if(i.constructor===U)a="gradient",l=c;else{a="hue"in i?"lightness"in i?"hsl":"hsb":"gradient"in i||"stops"in i||"radial"in i?"gradient":"gray"in i?"gray":"rgb";var y=n[a],w=r[a];this._components=o=[];for(var m=0,g=y.length;m<g;m++){var b=i[y[m]];null==b&&0===m&&"gradient"===a&&"stops"in i&&(b={stops:i.stops,radial:i.radial}),b=w[m].call(this,b),null!=b&&(o[m]=b)}s=i.alpha}this.__read&&a&&(h=1)}if(this._type=a||"rgb",this._id=f.get(t),!o){this._components=o=[];for(var w=r[this._type],m=0,g=w.length;m<g;m++){var b=w[m].call(this,l&&l[m]);null!=b&&(o[m]=b)}}this._components=o,this._properties=n[this._type],this._alpha=s,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 V(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)?V.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 f=i[h];t.addColorStop(f._rampPoint,f._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 V(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=V.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 V(n,i,null!=this._alpha?e(this._alpha,t.getAlpha()):null)}},{})}),U=s.extend({_class:"Gradient",initialize:function(e,t){this._id=f.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=V.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 p,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 V}),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 D))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===V&&(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 D){var t=this._values[i];if(t===o)t=this._defaults[i],t&&t.clone&&(t=t.clone());else{var u=a?V:l?p: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 f=r[c]._style[d]();if(0===c)t=f;else if(!s.equals(t,f))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 F&&(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 e(){var t=e.base.call(this),n=this.getFontSize();return/pt|em|%|px/.test(n)&&(n=this.getView().getPixelSize(n)),null!=t?t:1.2*n}}),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(e){n={left:0,top:0,width:0,height:0}}var o=n.left-(a.clientLeft||i.clientLeft||0),s=n.top-(a.clientTop||i.clientTop||0);if(!t){var l=r.defaultView;o+=l.pageXOffset||a.scrollLeft||i.scrollLeft,s+=l.pageYOffset||a.scrollTop||i.scrollTop}return new y(o,s,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 p(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 e(t,n){function r(e){return n[e]||parseInt(n.getAttribute(e),10)}function i(){var e=H.getSize(n);return e.isNaN()||e.isZero()?new g(r("width"),r("height")):e}this._project=t,this._scope=t._scope,this._element=n;var a;this._pixelRatio||(this._pixelRatio=window.devicePixelRatio||1),this._id=n.getAttribute("id"),null==this._id&&n.setAttribute("id",this._id="view-"+e._id++),X.add(n,this._viewEvents);var o="none";if(H.setPrefixed(n.style,{userSelect:o,touchAction:o,touchCallout:o,contentZooming:o,userDrag:o,tapHighlightColor:"rgba(0,0,0,0)"}),u.hasAttribute(n,"resize")){var s=this;X.add(window,this._windowEvents={resize:function(){s.setViewSize(i())}})}if(this._setViewSize(a=i()),u.hasAttribute(n,"stats")&&"undefined"!=typeof Stats){this._stats=new Stats;var l=this._stats.domElement,c=l.style,h=H.getOffset(n);c.position="absolute",c.left=h.x+"px",c.top=h.y+"px",document.body.appendChild(l)}e._views.push(this),e._viewsById[this._id]=this,this._viewSize=a,(this._matrix=new b)._owner=this,this._zoom=1,e._focused||(e._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 p,this._viewSize))),this._bounds},getSize:function(){return this.getBounds().getSize()},getCenter:function(){return this.getBounds().getCenter()},setCenter:function(){var e=p.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(p.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(p.read(arguments))},viewToProject:function(){return this._matrix._inverseTransform(p.read(arguments))}},{statics:{_views:[],_viewsById:{},_id:0,create:function(e,t){return"string"==typeof t&&(t=document.getElementById(t)),new Q(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()}},f={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()},f[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))}},f[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,f),X.add(window,{load:n});var p={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 p)t[n]=(t[n]||0)+(p[n][e]||0)},_uninstallEvent:function(e){var t=this._eventCounters;if(t)for(var n in p)t[n]-=p[n][e]||0},statics:{updateFocus:n}}}),Q=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 J(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 f=this._project,p=f.hitTest(h,{tolerance:0,fill:!0,stroke:!0}),m=p&&p.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}}}}),Y=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 $.modifiers}}),Z=Y.extend({_class:"KeyEvent",initialize:function(e,t,n,r){Y.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()+" }"}}),$=new function(){function e(n,i,c,h){var d,f=c?String.fromCharCode(c):"",p=r[i],m=p||f.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],p&&(d=s.camelize(p))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,f,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]}}},J=Y.extend({_class:"MouseEvent",initialize:function(e,t,n,r,i){Y.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=Y.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;
+},setCrossOrigin:function(e){this._crossOrigin=e,this._image&&(this._image.crossOrigin=e)},getElement:function(){return this._canvas||this._loaded&&this._image}},{beans:!1,getSubCanvas:function(){var e=y.read(arguments),t=ne.getContext(e.getSize());return t.drawImage(this.getCanvas(),e.x,e.y,e.width,e.height,0,0,e.width,e.height),t.canvas},getSubRaster:function(){var e=y.read(arguments),t=new T(C.NO_INSERT);return t.setImage(this.getSubCanvas(e)),t.translate(e.getCenter().subtract(this.getSize().divide(2))),t._matrix.preConcatenate(this._matrix),t.insertAbove(this),t},toDataURL:function(){var e=this._image&&this._image.src;if(/^data:/.test(e))return e;var t=this.getCanvas();return t?t.toDataURL.apply(t,arguments):null},drawImage:function(e){var t=p.read(arguments,1);this.getContext(!0).drawImage(e,t.x,t.y)},getAverageColor:function(e){var t,n;e?e instanceof B?(n=e,t=e.getBounds()):e.width?t=new y(e):e.x&&(t=new y(e.x-.5,e.y-.5,1,1)):t=this.getBounds();var r=32,i=Math.min(t.width,r),a=Math.min(t.height,r),o=T._sampleContext;o?o.clearRect(0,0,r+1,r+1):o=T._sampleContext=ne.getContext(new g(r)),o.save();var l=(new b).scale(i/t.width,a/t.height).translate(-t.x,-t.y);l.applyToContext(o),n&&n.draw(o,new s({clip:!0,matrices:[l]})),this._matrix.applyToContext(o);var u=this.getElement(),c=this._size;u&&o.drawImage(u,-c.width/2,-c.height/2),o.restore();for(var h=o.getImageData(.5,.5,Math.ceil(i),Math.ceil(a)).data,d=[0,0,0],f=0,p=0,m=h.length;p<m;p+=4){var v=h[p+3];f+=v,v/=255,d[0]+=h[p]*v,d[1]+=h[p+1]*v,d[2]+=h[p+2]*v}for(var p=0;p<3;p++)d[p]/=f;return f?V.read(d):null},getPixel:function(){var e=p.read(arguments),t=this.getContext().getImageData(e.x,e.y,1,1).data;return new V("rgb",[t[0]/255,t[1]/255,t[2]/255],t[3]/255)},setPixel:function(){var e=p.read(arguments),t=V.read(arguments),n=t._convert("rgb"),r=t._alpha,i=this.getContext(!0),a=i.createImageData(1,1),o=a.data;o[0]=255*n[0],o[1]=255*n[1],o[2]=255*n[2],o[3]=null!=r?255*r:255,i.putImageData(a,e.x,e.y)},createImageData:function(){var e=g.read(arguments);return this.getContext().createImageData(e.width,e.height)},getImageData:function(){var e=y.read(arguments);return e.isEmpty()&&(e=new y(this._size)),this.getContext().getImageData(e.x,e.y,e.width,e.height)},setImageData:function(e){var t=p.read(arguments,1);this.getContext(!0).putImageData(e,t.x,t.y)},_getBounds:function(e,t){var n=new y(this._size).setCenter(0,0);return t?t._transformBounds(n):n},_hitTestSelf:function(e){if(this._contains(e)){var t=this;return new M("pixel",t,{offset:e.add(t._size.divide(2)).round(),color:{get:function(){return t.getPixel(this.offset)}}})}},_draw:function(e){var t=this.getElement();t&&(e.globalAlpha=this._opacity,e.drawImage(t,-this._size.width/2,-this._size.height/2))},_canComposite:function(){return!0}}),N=C.extend({_class:"PlacedSymbol",_applyMatrix:!1,_canApplyMatrix:!1,_boundsGetter:{getBounds:"getStrokeBounds"},_boundsSelected:!0,_serializeFields:{symbol:null},initialize:function(e,t){this._initialize(e,t!==o&&p.read(arguments,1))||this.setSymbol(e instanceof E?e:new E(e))},_equals:function(e){return this._symbol===e._symbol},getSymbol:function(){return this._symbol},setSymbol:function(e){this._symbol=e,this._changed(9)},clone:function(e){var t=new N(C.NO_INSERT);return t.setSymbol(this._symbol),this._clone(t,e)},isEmpty:function(){return this._symbol._definition.isEmpty()},_getBounds:function(e,t,n){var r=this.symbol._definition;return r._getCachedBounds(e,t&&t.chain(r._matrix),n)},_hitTestSelf:function(e,t){var n=this._symbol._definition._hitTest(e,t);return n&&(n.item=this),n},_draw:function(e,t){this.symbol._definition.draw(e,t)}}),M=s.extend({_class:"HitResult",initialize:function(e,t,n){this.type=e,this.item=t,n&&(n.enumerable=!0,this.inject(n))},statics:{getOptions:function(e){return new s({type:null,tolerance:a.settings.hitTolerance,fill:!e,stroke:!e,segments:!e,handles:!1,ends:!1,center:!1,bounds:!1,guides:!1,selected:!1},e)}}}),L=s.extend({_class:"Segment",beans:!0,initialize:function(e,t,n,r,i,a){var s,l,u,c=arguments.length;0===c||(1===c?"point"in e?(s=e.point,l=e.handleIn,u=e.handleOut):s=e:2===c&&"number"==typeof e?s=arguments:c<=3?(s=e,l=t,u=n):(s=e!==o?[e,t]:null,l=n!==o?[n,r]:null,u=i!==o?[i,a]:null)),new I(s,this,"_point"),new I(l,this,"_handleIn"),new I(u,this,"_handleOut")},_serialize:function(e){return s.serialize(this.hasHandles()?[this._point,this._handleIn,this._handleOut]:this._point,e,!0)},_changed:function(e){var t=this._path;if(t){var n,r=t._curves,i=this._index;r&&(e&&e!==this._point&&e!==this._handleIn||!(n=i>0?r[i-1]:t._closed?r[r.length-1]:null)||n._changed(),e&&e!==this._point&&e!==this._handleOut||!(n=r[i])||n._changed()),t._changed(25)}},getPoint:function(){return this._point},setPoint:function(){var e=p.read(arguments);this._point.set(e.x,e.y)},getHandleIn:function(){return this._handleIn},setHandleIn:function(){var e=p.read(arguments);this._handleIn.set(e.x,e.y)},getHandleOut:function(){return this._handleOut},setHandleOut:function(){var e=p.read(arguments);this._handleOut.set(e.x,e.y)},hasHandles:function(){return!this._handleIn.isZero()||!this._handleOut.isZero()},clearHandles:function(){this._handleIn.set(0,0),this._handleOut.set(0,0)},_selectionState:0,isSelected:function(e){var t=this._selectionState;return e?e===this._point?!!(4&t):e===this._handleIn?!!(1&t):e===this._handleOut&&!!(2&t):!!(7&t)},setSelected:function(e,t){var n=this._path,e=!!e,r=this._selectionState,i=r,a=t?t===this._point?4:t===this._handleIn?1:t===this._handleOut?2:0:7;e?r|=a:r&=~a,this._selectionState=r,n&&r!==i&&(n._updateSelection(this,i,r),n._changed(129))},getIndex:function(){return this._index!==o?this._index:null},getPath:function(){return this._path||null},getCurve:function(){var e=this._path,t=this._index;return e?(t>0&&!e._closed&&t===e._segments.length-1&&t--,e.getCurves()[t]||null):null},getLocation:function(){var e=this.getCurve();return e?new O(e,this===e._segment1?0:1):null},getNext:function(){var e=this._path&&this._path._segments;return e&&(e[this._index+1]||this._path._closed&&e[0])||null},getPrevious:function(){var e=this._path&&this._path._segments;return e&&(e[this._index-1]||this._path._closed&&e[e.length-1])||null},isFirst:function(){return 0===this._index},isLast:function(){var e=this._path;return e&&this._index===e._segments.length-1||!1},reverse:function(){var e=this._handleIn,t=this._handleOut,n=e._x,r=e._y;e.set(t._x,t._y),t.set(n,r)},reversed:function(){return new L(this._point,this._handleOut,this._handleIn)},remove:function(){return!!this._path&&!!this._path.removeSegment(this._index)},clone:function(){return new L(this._point,this._handleIn,this._handleOut)},equals:function(e){return e===this||e&&this._class===e._class&&this._point.equals(e._point)&&this._handleIn.equals(e._handleIn)&&this._handleOut.equals(e._handleOut)||!1},toString:function(){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}}),I=p.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=p.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)}}),A=s.extend({_class:"Curve",initialize:function(e,t,n,r,i,a,o,s){var l,u,c,h,d,f,p=arguments.length;3===p?(this._path=e,l=t,u=n):0===p?(l=new L,u=new L):1===p?"segment1"in e?(l=new L(e.segment1),u=new L(e.segment2)):"point1"in e?(c=e.point1,d=e.handle1,f=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]],f=[e[4]-e[6],e[5]-e[7]]):2===p?(l=new L(e),u=new L(t)):4===p?(c=e,d=t,f=n,h=r):8===p&&(c=[e,t],h=[o,s],d=[n-e,r-t],f=[i-o,a-s]),this._segment1=l||new L(c,null,d),this._segment2=u||new L(h,f,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 A(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=p.read(arguments);this._segment1._point.set(e.x,e.y)},getPoint2:function(){return this._segment2._point},setPoint2:function(){var e=p.read(arguments);this._segment2._point.set(e.x,e.y)},getHandle1:function(){return this._segment1._handleOut},setHandle1:function(){var e=p.read(arguments);this._segment1._handleOut.set(e.x,e.y)},getHandle2:function(){return this._segment2._handleIn},setHandle2:function(){var e=p.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 A.getValues(this._segment1,this._segment2,e)},getPoints:function(){for(var e=this.getValues(),t=[],n=0;n<8;n+=2)t.push(new p(e[n],e[n+1]));return t},getLength:function(){return null==this._length&&(this._length=A.getLength(this.getValues(),0,1)),this._length},getArea:function(){return A.getArea(this.getValues())},getLine:function(){return new _(this._segment1._point,this._segment2._point)},getPart:function(e,t){return new A(A.getPart(this.getValues(),e,t))},getPartLength:function(e,t){return A.getLength(this.getValues(),e,t)},getIntersections:function(e){return A._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=A.subdivide(this.getValues(),r),l=s[0],u=s[1],c=n||this.hasHandles(),h=this._segment1,d=this._segment2,f=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 L(new p(m,g),c&&new p(l[4]-m,l[5]-g),c&&new p(u[2]-m,u[3]-g));f?(f.insert(h._index+1,v),o=this.getNext()):(this._segment2=v,o=new A(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 A(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,f=h*r+t*a,p=h*i+t*s,m=h*a+t*l,g=h*s+t*u,v=h*l+t*c,y=h*d+t*p,w=h*f+t*m,b=h*p+t*g,_=h*m+t*v,x=h*y+t*b,E=h*w+t*_;return[[n,r,d,f,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,f=u-o-c-h;return d.solveCubic(f,h,c,o-n,r,i,a)},getParameterOf:function(e,t){var n=new p(e[0],e[1]),r=new p(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=A.solveCubic(e,u,o[u],s,0,1),h=0;h<c;h++)if(a=s[h],t.isClose(A.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(A.getPoint(e,n),!0);if(r<d)return d=r,f=n,!0}}if(A.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:A.getParameterOf(e,new p(r+c*s,i+c*l))}for(var h=100,d=1/0,f=0,m=0;m<=h;m++)n(m/h);for(var g=1/(2*h);g>4e-7;)n(f-g)||n(f+g)||(g/=2);return f},getPart:function(e,t,n){var r=t>n;if(r){var i=t;t=n,n=i}return t>0&&(e=A.subdivide(e,t)[1]),n<1&&(e=A.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,f=3*s-2*u-r;return Math.max(c*c,d*d)+Math.max(h*h,f*f)<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++)A._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,f=t-e,p=d.solveQuadratic(c,h,f,l),m=4e-7,g=1-m;u(r,0);for(var v=0;v<p;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]=z[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 p(i-n,a-r),new p(t[2]-n,t[3]-r),new p(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 A.getParameterAt(this.getValues(),e,t)},getParameterOf:function(){return A.getParameterOf(this.getValues(),p.read(arguments))},getLocationAt:function(e,t){var n=t?e:this.getParameterAt(e);return null!=n&&n>=0&&n<=1?new O(this,n):null},getLocationOf:function(){return this.getLocationAt(this.getParameterOf(p.read(arguments)),!0)},getOffsetOf:function(){var e=this.getLocationOf.apply(this,arguments);return e?e.getOffset():null},getNearestLocation:function(){var e=p.read(arguments),t=this.getValues(),n=A.getNearestParameter(t,e),r=A.getPoint(t,n);return new O(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 A[e](r,n?t:A.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),f=6*(n+o)-12*i,p=3*(i-n);return function(e){var t=(u*e+c)*e+h,n=(d*e+f)*e+p;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],f=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:f}else{var y=3*(l-o),w=3*(c-l)-y,b=d-o-y-w,_=3*(u-s),x=3*(h-u)-_,E=f-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*(f-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,S=6*E*t+2*x,P=Math.pow(i*i+a*a,1.5);i=0!==P?(i*S-a*k)/P:0,a=0}}}return 2===n?new p(a,-i):new p(i,a)}return{statics:{getLength:function(n,r,i){if(r===o&&(r=0),i===o&&(i=1),0===r&&1===i&&A.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),f=d.integrate(h,u,c,t(u,c));if(s(r-f)<1e-12)return l?c:u;if(s(r)>f)return null;var p=r/f,m=0;return d.findRoot(a,h,i+p,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,f=4e-7,p=1-f;if(null==i&&(i=A.getParameterOf(n,a)),null!==i&&i>=(h?f:0)&&i<=(d?p:1)&&(null==l&&(l=A.getParameterOf(o,u)),null!==l&&l>=(d?f:0)&&l<=(h?p:1))){var m=t.renormalize;if(m){var g=m(i,l);i=g[0],l=g[1]}var v=new O(r,i,a||A.getPoint(n,i),c),y=new O(s,l,u||A.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)||O.insert(e,b,!0)}}function t(i,a,o,s,l,u,c,h,d,f,p,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]),S=C(w,b,x,E,a[4],a[5]),P=k*S>0?.75:4/9,T=P*Math.min(0,k,S),N=P*Math.max(0,k,S),M=C(w,b,x,E,i[0],i[1]),L=C(w,b,x,E,i[2],i[3]),I=C(w,b,x,E,i[4],i[5]),O=C(w,b,x,E,i[6],i[7]),B=n(M,L,I,O),z=B[0],D=B[1];if(null!=(v=r(z,D,T,N))&&null!=(y=r(z.reverse(),D.reverse(),T,N))){i=A.getPart(i,v,y);var R=y-v,j=c+(h-c)*v,F=c+(h-c)*y;if(p>.5&&R>.5)if(F-j>f-d){var q=A.subdivide(i,.5),V=j+(F-j)/2;t(a,q[0],s,o,l,u,d,f,j,V,R,!m,g),t(a,q[1],s,o,l,u,d,f,V,F,R,!m,g)}else{var q=A.subdivide(a,.5),V=d+(f-d)/2;t(q[0],i,s,o,l,u,d,V,j,F,R,!m,g),t(q[1],i,s,o,l,u,V,f,j,F,R,!m,g)}else if(Math.max(f-d,F-j)<1e-7){var U=j+(F-j)/2,W=d+(f-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 R>1e-12&&t(a,i,s,o,l,u,d,f,j,F,R,!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=A.isStraight(t),l=s?n:t,u=s?t:n,c=u[0],h=u[1],f=u[6],p=u[7],m=f-c,g=p-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=A.solveCubic(b,1,0,C,0,1),_=0;_<k;_++){var S=C[_],P=A.getPoint(l,S),T=A.getParameterOf(u,P);if(null!==T){var N=A.getPoint(u,T),M=s?T:S,L=s?S:T;(!o.endConnected||L>d.CURVETIME_EPSILON)&&e(a,o,t,r,M,s?N:P,n,i,L,s?P:N)}}}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 A._getSelfIntersection(n,i,l,u);var c=n[0],h=n[1],d=n[6],f=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]+f)/4,E=(3*r[2]+m)/4,C=(3*r[3]+g)/4,k=(3*r[4]+v)/4,S=(3*r[5]+y)/4,P=Math.min,T=Math.max;if(!(T(c,w,_,d)>=P(m,E,k,v)&&P(c,w,_,d)<=T(m,E,k,v)&&T(h,b,x,f)>=P(g,C,S,y)&&P(h,b,x,f)<=T(g,C,S,y)))return l;if(!u.startConnected&&!u.endConnected){var N=A.getOverlaps(n,r);if(N){for(var M=0;M<2;M++){var L=N[M];e(l,u,n,i,L[0],null,r,s,L[1],null,!0)}return l}}var I=A.isStraight(n),O=A.isStraight(r),B=I&&O,z=1e-12,D=l.length;if((B?o:I||O?a:t)(n,r,i,s,l,u,0,1,0,1,0,!1,0),B&&l.length>D)return l;var R=new p(c,h),j=new p(d,f),F=new p(m,g),q=new p(v,y);return R.isClose(F,z)&&e(l,u,n,i,0,R,r,s,0,F),!u.startConnected&&R.isClose(q,z)&&e(l,u,n,i,0,R,r,s,1,q),!u.endConnected&&j.isClose(F,z)&&e(l,u,n,i,1,j,r,s,0,F),j.isClose(q,z)&&e(l,u,n,i,1,j,r,s,1,q),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],f=new _(i,a,c,h,!1),m=f.getSide(new p(o,s),!0),g=f.getSide(new p(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,S=x*w-y*E,P=E*b-w*C;if(k*k-4*S*P<0){var T,N=[],M=d.solveCubic(y*y+x*x,3*(y*w+x*E),2*(w*w+E*E)+y*b+x*C,w*b+E*C,N,0,1);if(M>0){for(var L=0,I=0;L<M;L++){var O=Math.abs(t.getCurvatureAt(N[L],!0));O>I&&(I=O,T=N[L])}var B=A.subdivide(e,T);r.endConnected=!0,r.renormalize=function(e,t){return[e*T,t*(1-T)+T]},A._getIntersections(B[0],B[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=A.isStraight(e),s=A.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 p(h[0],h[1]))>a||d.getDistance(new p(h[6],h[7]))>a)return null}else if(o^s)return null;for(var f=[e,t],m=[],g=0,v=0;g<2&&m.length<2;g+=0===v?0:1,v^=1){var y=A.getParameterOf(f[1^g],new p(f[g][0===v?0:6],f[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=A.getPart(e,m[0][0],m[1][0]),x=A.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}}}}),O=s.extend({_class:"CurveLocation",beans:!0,initialize:function e(t,n,r,i,a){if(n>.9999996){var o=t.getNext();o&&(n=0,t=o)}this._id=f.get(e),this._setCurve(t),this._parameter=n,this._point=r||t.getPointAt(n,!0),this._overlap=i,this._distance=a,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 O&&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(),f=u.getTangentAt(a,!0).negate().getAngleInRadians(),p=l.getTangentAt(i,!0).getAngleInRadians();return e(f,h,d)^e(p,h,d)&&e(f,d,h)^e(p,d,h)},isOverlap:function(){return!!this._overlap}},s.each(A.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}}}}),B=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=[],f=[],p=0;p<h;p++)d[p]=u[p].getValues(o);for(var p=0;p<c;p++){var m=l[p],g=i?d[p]:m.getValues(a),v=m.getPath();v!==e&&(e=v,s=[],f.push(s)),i&&A._getSelfIntersection(g,m,s,{include:t,startConnected:1===c&&m.getPoint1().equals(m.getPoint2())});for(var y=i?p+1:0;y<h;y++){if(r&&s.length)return s;var w=u[y];A._getIntersections(g,d[y],m,w,s,{include:t,startConnected:i&&m.getPrevious()===w,endConnected:i&&m.getNext()===w})}}s=[];for(var p=0,b=f.length;p<b;p++)s.push.apply(s,f[p]);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 p(t(e,"x"),t(e+1,"y"))}var r,i,a,o=e.match(/[mlhvcsqtaz][^mlhvcsqtaz]*/gi),s=!1,l=new p,u=new p;this.clear();for(var c=0,h=o&&o.length;c<h;c++){var d=o[c],f=d[0],m=f.toLowerCase();r=d.match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);var v=r&&r.length;switch(s=f===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)}}),z=B.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 z(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(t){if(e.base.call(this,t),8&t){var n=this._parent;if(n&&(n._currentPath=o),this._length=this._area=this._clockwise=this._monoCurves=o,16&t)this._version++;else if(this._curves)for(var r=0,i=this._curves.length;r<i;r++)this._curves[r]._changed()}else 32&t&&(this._bounds=o)},getStyle:function(){var e=this._parent;return(e instanceof D?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(L.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 A(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 A(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"+p.pair(r,i)),g=!1):(s=m[2],l=m[3],s===r&&l===i&&u===a&&c===o?n||v.push("l"+p.pair(r-a,i-o)):v.push("c"+p.pair(u-a,c-o)+" "+p.pair(s-a,l-o)+" "+p.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,f=d.length,p=new h(t),m=new Array(6),g=!0,v=[];if(0===f)return"";for(var y=0;y<f;y++)n(d[y]);return this._closed&&f>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 A(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(L.readAll(arguments)):this._add([L.read(arguments)])[0]},insert:function(e,t){return arguments.length>2&&"number"!=typeof t?this._add(L.readAll(arguments,1),e):this._add([L.read(arguments,1)],e)[0]},addSegment:function(){return this._add([L.read(arguments)])[0]},insertSegment:function(e){return this._add([L.read(arguments,1)],e)[0]},addSegments:function(e){return this._add(L.readAll(e))},insertSegments:function(e,t){return this._add(L.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+=A.getArea(A.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 e(t){t||this._selectSegments(!1),e.base.call(this,t)},_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 R(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 L(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 j(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 z(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=P.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=P.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=P.Circle,s=i(0,2)/2):(a=P.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 M(i,f,{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 z({internal:!0,closed:!0}),y||t._index>0&&t._index<v-1?"round"!==s&&(t._handleIn.isZero()||t._handleOut.isZero())&&z._addBevelJoin(t,s,C,u,a,!0):"round"!==l&&z._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,f=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 p(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 S=h.getParameter();0===S||1===S&&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 P=g[k];if(e.getDistance(P._point)<=u&&o(P)){h=P.getLocation();break}}}return!h&&x&&this._contains(e)||h&&!_&&!E?new M("fill",this):h?new M(_?"stroke":"curve",this,{location:h,point:h.getPoint()}):null}},s.each(A.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=p.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 O(n[n.length-1],1):null},getNearestLocation:function(){for(var e=p.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 f=e.fillStyle;e.fillStyle="#ffffff",e.fillRect(h-a+1,d-a+1,r-2,r-2),e.fillStyle=f}}}function t(e,t,n){function r(t){if(n)t._transformCoordinates(n,p,!1),i=p[0],a=p[1];else{var r=t._point;i=r._x,a=r._y}if(m)e.moveTo(i,a),m=!1;else{if(n)l=p[2],u=p[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=p[4],h=p[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,f=d.length,p=new Array(6),m=!0,g=0;g<f;g++)r(d[g]);t._closed&&f>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 f,p=new R(this,32,.25,r),m=p.length,g=-l.getDashOffset(),v=0;for(g%=m;g>0;)g-=i(v--)+i(v--);for(;g<m;)f=g+i(v++),(g>0||f>0)&&p.drawPart(e,Math.max(g,0),Math.max(f,0)),g=f+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,f=1-d,m=s+a,g=h+a;u[h]=u[s]*d+u[h]*f,c[h]=c[s]*d+c[h]*f,u[g]=u[m]*f+u[g]*d,c[g]=c[m]*f+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 p(u[s],c[s]).subtract(y._point)),v=s<i-1?new p(2*o[s+1]._x-u[s+1],2*o[s+1]._y-c[s+1]):new p((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 L(p.read(arguments))])},moveBy:function(){throw new Error("moveBy() is unsupported on Path items.")},lineTo:function(){this._add([new L(p.read(arguments))])},cubicCurveTo:function(){var t=p.read(arguments),n=p.read(arguments),r=p.read(arguments),i=e(this);i.setHandleOut(t.subtract(i._point)),this._add([new L(r,n.subtract(r))])},quadraticCurveTo:function(){var t=p.read(arguments),n=p.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=p.read(arguments),n=p.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=p.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=p.read(arguments);else{var f=g.read(arguments);if(f.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(f.width),k=E(f.height),S=C*C,P=k*k,T=w*w,N=x*x,M=Math.sqrt(T/S+N/P);if(M>1&&(C*=M,k*=M,S=C*C,P=k*k),M=(S*P-S*N-P*T)/(S*N+P*T),E(M)<1e-12&&(M=0),M<0)throw new Error("Cannot create an arc with the given arguments");n=new p(C*x/k,-k*w/C).multiply((v===h?-1:1)*Math.sqrt(M)).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 I=new _(l.add(t).divide(2),t.subtract(l).rotate(90),!0),A=new _(t.add(u).divide(2),u.subtract(t).rotate(90),!0),O=new _(l,u),B=O.getSide(t);if(n=I.intersect(A,!0),!n){if(!B)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 z=O.getSide(n);0===z?r=B*Math.abs(r):B===z&&(r+=r<0?360:-360)}for(var D=Math.abs(r),R=D>=360?4:Math.ceil(D/90),j=r/R,F=j*Math.PI/360,q=4/3*Math.sin(F)/(1+Math.cos(F)),V=[],U=0;U<=R;U++){var y=u,W=null;if(U<R&&(W=i.rotate(90).multiply(q),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(q);a&&(G=a._transformPoint(i.add(G)).subtract(y)),V.push(new L(y,G,W))}i=i.rotate(j)}this._add(V)},lineBy:function(){var t=p.read(arguments),n=e(this)._point;this.lineTo(n.add(t))},curveBy:function(){var t=p.read(arguments),n=p.read(arguments),r=s.read(arguments),i=e(this)._point;this.curveTo(i.add(t),i.add(n),r)},cubicCurveBy:function(){var t=p.read(arguments),n=p.read(arguments),r=p.read(arguments),i=e(this)._point;this.cubicCurveTo(i.add(t),i.add(n),i.add(r))},quadraticCurveBy:function(){var t=p.read(arguments),n=p.read(arguments),r=e(this)._point;this.quadraticCurveTo(r.add(t),r.add(n))},arcBy:function(){var t=e(this)._point,n=t.add(p.read(arguments)),r=s.pick(s.peek(arguments),!0);"boolean"==typeof r?this.arcTo(n,r):this.arcTo(n,t.add(p.read(arguments)))},closePath:function(e){this.setClosed(!0),e&&this.join()}}},{_getBounds:function(e,t){return z[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++)A._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,f=e.length;d<f;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):z._addBevelJoin(e,t,u,p,i)}function s(e,t){"round"===t?a(e):z._addSquareCap(e,t,u,i)}if(!n.hasStroke())return z.getBounds(e,t,n,r);for(var l=e.length-(t?0:1),u=n.getStrokeWidth()/2,c=z._getPenPadding(u,r),h=z.getBounds(e,t,n,r,c),d=n.getStrokeJoin(),f=n.getStrokeCap(),p=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],f),s(e[e.length-1],f)),h},_getPenPadding:function(e,t){if(!t)return[e,e];var n=t.shiftless(),r=n.transform(new p(e,0)),i=n.transform(new p(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 p(-u.y,u.x),!0).intersect(new _(l.add(c),new p(-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 f=e[h];f._transformCoordinates(r,o,!1);for(var p=0;p<6;p+=2){var m=0===p?a:i,g=m?m[0]:0,v=m?m[1]:0,w=o[p],b=o[p+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)))),z.getHandleBounds(e,t,n,r,z._getPenPadding(i,r),z._getPenPadding(a,r))}}});z.inject({statics:new function(){function e(e,t,n){var r=s.getNamed(n),i=new z(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 L(s._point.multiply(n).add(t),s._handleIn.multiply(n),s._handleOut.multiply(n))}return e(a,!0,i)}var n=.5522847498307936,r=[new L([-1,0],[0,n],[0,-n]),new L([0,-1],[-n,0],[n,0]),new L([1,0],[0,-n],[0,n]),new L([0,1],[n,0],[-n,0])];return{Line:function(){return e([new L(p.readNamed(arguments,"from")),new L(p.readNamed(arguments,"to"))],!1,arguments)},Circle:function(){var e=p.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 L(a),new L(o),new L(s),new L(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 L(a.add(u,0),null,[-h,0]),new L(a.subtract(0,c),[0,d]),new L(o.add(0,c),null,[0,-d]),new L(o.add(u,0),[-h,0],null),new L(s.subtract(u,0),null,[h,0]),new L(s.add(0,c),[0,-d],null),new L(l.subtract(0,c),null,[0,d]),new L(l.subtract(u,0),[h,0])]}return e(t,!0,arguments)},RoundRectangle:"#Rectangle",Ellipse:function(){var e=P._readEllipse(arguments);return t(e.center,e.radius,arguments)},Oval:"#Ellipse",Arc:function(){var e=p.readNamed(arguments,"from"),t=p.readNamed(arguments,"through"),n=p.readNamed(arguments,"to"),r=s.getNamed(arguments),i=new z(r&&r.insert===!1&&C.NO_INSERT);return i.moveTo(e),i.arcTo(t,n),i.set(r)},RegularPolygon:function(){for(var t=p.readNamed(arguments,"center"),n=s.readNamed(arguments,"sides"),r=s.readNamed(arguments,"radius"),i=360/n,a=!(n%3),o=new p(0,a?-r:r),l=a?-1:.5,u=new Array(n),c=0;c<n;c++)u[c]=new L(t.add(o.rotate((c+l)*i)));return e(u,!0,arguments)},Star:function(){for(var t=p.readNamed(arguments,"center"),n=2*s.readNamed(arguments,"points"),r=s.readNamed(arguments,"radius1"),i=s.readNamed(arguments,"radius2"),a=360/n,o=new p(0,-1),l=new Array(n),u=0;u<n;u++)l[u]=new L(t.add(o.rotate(a*u).multiply(u%2?i:r)));return e(l,!0,arguments)}}}});var D=B.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 e(t,n,r){for(var i=n.length-1;i>=0;i--){var a=n[i];a instanceof D&&(n.splice.apply(n,[i,1].concat(a.removeChildren())),a.remove())}n=e.base.call(this,t,n,r,z);for(var i=0,s=!r&&n&&n.length;i<s;i++){var a=n[i];a._clockwise===o&&a.setClockwise(0===a._index)}return n},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 e(){for(var t=this._children,n=t.length-1;n>=0;n--){var r=t[n].reduce();r.isEmpty()&&t.splice(n,1)}if(0===t.length){var r=new z(C.NO_INSERT);return r.insertAbove(this),r.setStyle(this._style),this.remove(),r}return e.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===z||"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 z(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=p.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});B.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];f.push.apply(f,r._segments),p.push.apply(p,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=O.expand(c.getIntersections(h,function(e){return h&&e.isOverlap()||e.isCrossing()}));a(d);var f=[],p=[];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,p,o);for(var m=0,g=f.length;m<g;m++){var v=f[m];null==v._winding&&s(v,c,h,p,o)}return t(D,l(f,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 f;h<r?f=c._segment1:h>a?f=c._segment2:(f=c.divide(h,!0,!0)._segment1,o&&s.push(f)),u._setSegment(f);var p=f._intersection,m=u._intersection;if(p){i(p,m);for(var g=p;g;)i(g._intersection,p),g=g._next}else f._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,f=[],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(A.solveCubic(x,0,l,f,0,1)>0)for(var E=f.length-1;E>=0;E--){var C=A.getPoint(x,f[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 p(l,g),t,!1,r)),v<1/0&&(h=o(new p(l,v),t,!1,r))}else for(var k,S,P=l-i,T=l+i,N=!1,b=0,_=t.length;b<_;b++){var M=t[b],x=M.values,L=M.winding;if(L&&(1===L&&u>=x[1]&&u<=x[7]||u>=x[7]&&u<=x[1])&&1===A.solveCubic(x,1,u,f,0,1)){var I=f[0];if(!(I>s&&N&&M.next!==t[b+1]||I<a&&S>s&&M.previous===k)){var O=A.getPoint(x,I).x,B=A.getTangent(x,I).y,z=!1;d.isZero(B)&&!A.isStraight(x)||I<a&&B*A.getTangent(M.previous.values,1).y<0||I>s&&B*A.getTangent(M.next.values,0).y<0?r&&O>=P&&O<=T&&(++c,++h,z=!0):O<=P?(c+=L,z=!0):O>=T&&(h+=L,z=!0),M.previous!==t[b-1]&&(N=I<a&&z)}k=M,S=I}}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 f=0;f<3;f++)for(var d=u*(f+1)/4,p=0,m=s.length;p<m;p++){var g=s[p],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 D&&(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],f=0,p=e.length;f<p;f++){var m=e[f],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 z(C.NO_INSERT),o=m,s=b),g.add(new L(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(O.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(D,l(r),this,null,!1)}}}),z.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!==A.getLength(t)){var n=t[1],r=t[3],i=t[5],a=t[7];if(A.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=[],f=d.solveQuadratic(o,s,l,h,u,c);if(0===f)e(t);else{h.sort();var p=h[0],m=A.subdivide(t,p);e(m[0]),f>1&&(p=(h[1]-p)/(1-p),m=A.subdivide(m[1],p),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,f=u._x,p=u._y;t([c,h,c,h,f,p,f,p])}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])&&A.solveCubic(l,1,i,r,0,1)>0)for(var u=r.length-1;u>=0;u--)a.push(A.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}}),D.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 R=s.extend({
+_class:"PathIterator",initialize:function(e,t,n,r){function i(e,t){var n=A.getValues(e,t,r);s.push(n),a(n,e._index,0,1)}function a(e,t,r,i){if(i-r>c&&!A.isFlatEnough(e,n||.25)){var o=A.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],f=Math.sqrt(h*h+d*d);f>1e-6&&(u+=f,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],f=1,p=h.length;f<p;f++)o=h[f],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=A.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(A.evaluateMethods,function(e){this[e+"At"]=function(t,n){var r=this.getParameterAt(t);return A[e](this.curves[r.index],r.value,n)}},{})),j=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 L(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),f=this.findMaxError(e,t,d,l);if(f.error<this.error&&c)return void this.addCurve(d);if(s=f.index,f.error>=u)break;c=this.reparameterize(e,t,l,d),u=f.error}var p=this.points[s-1].subtract(this.points[s]),m=this.points[s].subtract(this.points[s+1]),g=p.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 L(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],f=1-d,p=3*d*f,m=f*f*f,g=p*f,v=p*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],S=u[0]*l[1][1]-u[1]*l[0][1];x=S/C,E=k/C}else{var P=l[0][0]+l[0][1],T=l[1][0]+l[1][1];x=E=Math.abs(P)>a?u[0]/P:Math.abs(T)>a?u[1]/T:0}var N,M,L=s.getDistance(o),I=a*L;if(x<I||E<I)x=E=L/3;else{var A=s.subtract(o);N=r.normalize(x),M=i.normalize(E),N.dot(A)-M.dot(A)>L*L&&(x=E=L/3,N=M=null)}return[o,o.add(N||r.normalize(x)),s.add(M||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}}}),F=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&&p.read(arguments))},_equals:function(e){return this._content===e._content},_clone:function e(t,n,r){return t.setContent(this._content),e.base.call(this,t,n,r)},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"}),q=F.extend({_class:"PointText",initialize:function(){F.apply(this,arguments)},clone:function(e){return this._clone(new q(C.NO_INSERT),e)},getPoint:function(){var e=this._matrix.getTranslation();return new m(e.x,e.y,this,"setPoint")},setPoint:function(){var e=p.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}}),V=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 p.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 t(i){var a,o,s,l,u=Array.prototype.slice,c=arguments,h=0;Array.isArray(i)&&(c=i,i=c[0]);var d=null!=i&&typeof i;if("string"===d&&i in n&&(a=i,i=c[1],Array.isArray(i)?(o=i,s=c[2]):(this.__read&&(h=1),c=u.call(c,1),d=typeof i)),!o){if(l="number"===d?c:"object"===d&&null!=i.length?i:null){a||(a=l.length>=3?"rgb":"gray");var p=n[a].length;s=l[p],this.__read&&(h+=l===arguments?p+(null!=s?1:0):1),l.length>p&&(l=u.call(l,0,p))}else if("string"===d)a="rgb",o=e(i),4===o.length&&(s=o[3],o.length--);else if("object"===d)if(i.constructor===t){if(a=i._type,o=i._components.slice(),s=i._alpha,"gradient"===a)for(var m=1,g=o.length;m<g;m++){var v=o[m];v&&(o[m]=v.clone())}}else if(i.constructor===U)a="gradient",l=c;else{a="hue"in i?"lightness"in i?"hsl":"hsb":"gradient"in i||"stops"in i||"radial"in i?"gradient":"gray"in i?"gray":"rgb";var y=n[a],w=r[a];this._components=o=[];for(var m=0,g=y.length;m<g;m++){var b=i[y[m]];null==b&&0===m&&"gradient"===a&&"stops"in i&&(b={stops:i.stops,radial:i.radial}),b=w[m].call(this,b),null!=b&&(o[m]=b)}s=i.alpha}this.__read&&a&&(h=1)}if(this._type=a||"rgb",this._id=f.get(t),!o){this._components=o=[];for(var w=r[this._type],m=0,g=w.length;m<g;m++){var b=w[m].call(this,l&&l[m]);null!=b&&(o[m]=b)}}this._components=o,this._properties=n[this._type],this._alpha=s,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 V(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)?V.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 f=i[h];t.addColorStop(f._rampPoint,f._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 V(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=V.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 V(n,i,null!=this._alpha?e(this._alpha,t.getAlpha()):null)}},{})}),U=s.extend({_class:"Gradient",initialize:function(e,t){this._id=f.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=V.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 p,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 V}),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 D))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===V&&(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 D){var t=this._values[i];if(t===o)t=this._defaults[i],t&&t.clone&&(t=t.clone());else{var u=a?V:l?p: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 f=r[c]._style[d]();if(0===c)t=f;else if(!s.equals(t,f))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 F&&(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 e(){var t=e.base.call(this),n=this.getFontSize();return/pt|em|%|px/.test(n)&&(n=this.getView().getPixelSize(n)),null!=t?t:1.2*n}}),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(e){n={left:0,top:0,width:0,height:0}}var o=n.left-(a.clientLeft||i.clientLeft||0),s=n.top-(a.clientTop||i.clientTop||0);if(!t){var l=r.defaultView;o+=l.pageXOffset||a.scrollLeft||i.scrollLeft,s+=l.pageYOffset||a.scrollTop||i.scrollTop}return new y(o,s,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 p(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 e(t,n){function r(e){return n[e]||parseInt(n.getAttribute(e),10)}function i(){var e=H.getSize(n);return e.isNaN()||e.isZero()?new g(r("width"),r("height")):e}this._project=t,this._scope=t._scope,this._element=n;var a;this._pixelRatio||(this._pixelRatio=window.devicePixelRatio||1),this._id=n.getAttribute("id"),null==this._id&&n.setAttribute("id",this._id="view-"+e._id++),X.add(n,this._viewEvents);var o="none";if(H.setPrefixed(n.style,{userSelect:o,touchAction:o,touchCallout:o,contentZooming:o,userDrag:o,tapHighlightColor:"rgba(0,0,0,0)"}),u.hasAttribute(n,"resize")){var s=this;X.add(window,this._windowEvents={resize:function(){s.setViewSize(i())}})}if(this._setViewSize(a=i()),u.hasAttribute(n,"stats")&&"undefined"!=typeof Stats){this._stats=new Stats;var l=this._stats.domElement,c=l.style,h=H.getOffset(n);c.position="absolute",c.left=h.x+"px",c.top=h.y+"px",document.body.appendChild(l)}e._views.push(this),e._viewsById[this._id]=this,this._viewSize=a,(this._matrix=new b)._owner=this,this._zoom=1,e._focused||(e._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 p,this._viewSize))),this._bounds},getSize:function(){return this.getBounds().getSize()},getCenter:function(){return this.getBounds().getCenter()},setCenter:function(){var e=p.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(p.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(p.read(arguments))},viewToProject:function(){return this._matrix._inverseTransform(p.read(arguments))}},{statics:{_views:[],_viewsById:{},_id:0,create:function(e,t){return"string"==typeof t&&(t=document.getElementById(t)),new Q(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()}},f={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()},f[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))}},f[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,f),X.add(window,{load:n});var p={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 p)t[n]=(t[n]||0)+(p[n][e]||0)},_uninstallEvent:function(e){var t=this._eventCounters;if(t)for(var n in p)t[n]-=p[n][e]||0},statics:{updateFocus:n}}}),Q=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 J(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 f=this._project,p=f.hitTest(h,{tolerance:0,fill:!0,stroke:!0}),m=p&&p.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}}}}),Y=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 $.modifiers}}),Z=Y.extend({_class:"KeyEvent",initialize:function(e,t,n,r){Y.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()+" }"}}),$=new function(){function e(n,i,c,h){var d,f=c?String.fromCharCode(c):"",p=r[i],m=p||f.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],p&&(d=s.camelize(p))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,f,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]}}},J=Y.extend({_class:"MouseEvent",initialize:function(e,t,n,r,i){Y.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=Y.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);f=t+a,p=n+a,m=r+a;var i=e(f,p,m),o=g(f,p,m),s=v(f,p,m);if(o<0){var l=i-o;f=i+(f-i)*i/l,p=i+(p-i)*i/l,m=i+(m-i)*i/l}if(s>255){var u=255-i,c=s-i;f=i+(f-i)*u/c,p=i+(p-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,f=a[0],p=a[1],m=a[2]}var i,a,o,l,u,c,h,d,f,p,m,g=Math.min,v=Math.max,y=Math.abs,w={multiply:function(){f=u*i/255,p=c*a/255,m=h*o/255},screen:function(){f=u+i-u*i/255,p=c+a-c*a/255,m=h+o-h*o/255},overlay:function(){f=u<128?2*u*i/255:255-2*(255-u)*(255-i)/255,p=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;f=e+u*(255-(255-u)*(255-i)/255-e)/255,e=a*c/255,p=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(){f=i<128?2*i*u/255:255-2*(255-i)*(255-u)/255,p=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(){f=0===u?0:255===i?255:g(255,255*u/(255-i)),p=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(){f=255===u?255:0===i?0:v(0,255-255*(255-u)/i),p=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(){f=u<i?u:i,p=c<a?c:a,m=h<o?h:o},lighten:function(){f=u>i?u:i,p=c>a?c:a,m=h>o?h:o},difference:function(){f=u-i,f<0&&(f=-f),p=c-a,p<0&&(p=-p),m=h-o,m<0&&(m=-m)},exclusion:function(){f=u+i*(255-u-u)/255,p=c+a*(255-c-c)/255,m=h+o*(255-h-h)/255},hue:function(){r(i,a,o,n(u,c,h)),t(f,p,m,e(u,c,h))},saturation:function(){r(u,c,h,n(i,a,o)),t(f,p,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(){f=g(u+i,255),p=g(c+a,255),m=g(h+o,255)},subtract:function(){f=v(u-i,0),p=v(c-a,0),m=v(h-o,0)},average:function(){f=(u+i)/2,p=(c+a)/2,m=(h+o)/2},negation:function(){f=255-y(255-i-u),p=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(e){}_.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 S=l*r/255,P=1-S;x[C]=S*f+P*u,x[C+1]=S*p+P*c,x[C+2]=S*m+P*h,x[C+3]=l*r+P*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 B||e instanceof P||e instanceof F)}],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 f=l[0]._point,p=l[l.length-1]._point;u.set({x1:f.x,y1:f.y,x2:p.x,y2:p.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],f=d._color,p=f.getAlpha();r={offset:d._rampPoint,"stop-color":f.toCSS(!0)},p<1&&(r["stop-opacity"]=p),n.appendChild(t("stop",r))}g(e,n,"color")}return"url(#"+n.id+")"}function f(e){var r=t("text",n(e._matrix,!0));return r.textContent=e._content,r}function p(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&&p(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:f};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 p(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 f,p=i[h];1!==p.nodeType||"defs"===p.nodeName.toLowerCase()||!(f=w(p,n,!1))||f instanceof E||u.push(f)}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 p(parseFloat(n[i]),parseFloat(n[i+1])));var o=new z(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 D(n):new z(n)}function c(n,r){var i,a=(e(n,"href",!0)||"").substring(1),o="radialgradient"===r;if(a)i=N[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,f,p;return o?(d=t(n,"cx","cy"),f=d.add(e(n,"r"),0),p=t(n,"fx","fy",!0)):(d=t(n,"x1","y1"),f=t(n,"x2","y2")),m(new V(i,d,f,p),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,f=h.length;d<f;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 f(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(S,function(n,i){var a=f(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&&N[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"),f=o.settings,p=f.applyMatrix;if(f.applyMatrix=!1,u=h&&h(i,c,t,n)||null,f.applyMatrix=p,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 P&&(u.remove(),u=u.toPath()),d&&(u._data=JSON.parse(d))}return n&&(N={},u&&s.pick(t.applyMatrix,p)&&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 T(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=N[r],a=t(n,"x","y");return i?i instanceof E?i.place(a):i.clone().translate(a):null},circle:function(n){return new P.Circle(t(n,"cx","cy"),e(n,"r"))},ellipse:function(e){return new P.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 P.Rectangle(new y(r,i),a)},line:function(e){return new z.Line(t(e,"x1","y1"),t(e,"x2","y2"))},text:function(e){var n=new q(t(e,"x","y").add(t(e,"dx","dy")));return n.setContent(e.textContent.trim()||""),n}},S=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 P){var i=t[e.get]();i&&i.transform((new b).translate(t.getPosition(!0).negate()))}}},{}),{id:function(e,t){N[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"!=f(a,"overflow",o),d=e._definition;h&&!s.contains(d.getBounds())&&(h=new P.Rectangle(s).transform(d._matrix),h.setClipMask(!0),d.addChild(h))}}}),N={};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:$})),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(0),i=n(105),a=r.createClass({displayName:"BSplineGraphic",componentWillMount:function(){var e=this;this.cvs=void 0,this.ctx=void 0,this.key=void 0,this.keyCode=void 0,this.mouseX=void 0,this.mouseY=void 0,this.isMouseDown=void 0,this.width=0,this.height=0,this.activeDistance=9,this.points=[],this.knots=[],this.weights=[],this.nodes=[],this.cp=void 0,this.dx=void 0,this.dy=void 0;var t=this.props.sketch;Object.keys(t).forEach(function(n){e[n]=t[n],"function"==typeof e[n]&&(e[n]=e[n].bind(e))})},render:function(){return r.createElement("canvas",{className:"bspline-graphic",ref:"sketch"})},keydownlisten:function(e){this.setKeyboardValues(e),this.keyDown()},keyuplisten:function(e){this.setKeyboardValues(e),this.keyUp()},keypresslisten:function(e){this.setKeyboardValues(e),this.keyPressed()},mousedownlisten:function(e){this.setMouseValues(e),this.mouseDown()},mouseuplisten:function(e){this.setMouseValues(e),this.mouseUp()},mousemovelisten:function(e){this.setMouseValues(e),this.mouseMove(),this.isMouseDown&&this.mouseDrag&&this.mouseDrag()},wheellissten:function(e){e.preventDefault(),this.scrolled(e.deltaY<0?1:-1)},componentDidMount:function(){var e=this.cvs=this.refs.sketch;e.addEventListener("keydown",this.keydownlisten),e.addEventListener("keyup",this.keyuplisten),e.addEventListener("keypress",this.keypresslisten),e.addEventListener("mousedown",this.mousedownlisten),e.addEventListener("mouseup",this.mouseuplisten),e.addEventListener("mousemove",this.mousemovelisten),this.props.scrolling&&e.addEventListener("wheel",this.wheellissten),this.setup()},componentWillUnmount:function(){var e=this.cvs=this.refs.sketch;e.removeEventListener("keydown",this.keydownlisten),e.removeEventListener("keyup",this.keyuplisten),e.removeEventListener("keypress",this.keypresslisten),e.removeEventListener("mousedown",this.mousedownlisten),e.removeEventListener("mouseup",this.mouseuplisten),e.removeEventListener("mousemove",this.mousemovelisten),this.props.scrolling&&e.removeEventListener("wheel",this.wheellissten)},drawCurve:function(e){e=e||this.points;var t=this.ctx,n=this.weights.length>0&&this.weights;t.beginPath();var r=i(0,this.degree,e,this.knots,n);t.moveTo(r[0],r[1]);for(var a=.01;a<1;a+=.01)r=i(a,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]);r=i(1,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]),t.stroke(),t.closePath()},drawKnots:function(e){var t=this,n=this.knots,r=this.weights.length>0&&this.weights;n.forEach(function(a,o){if(!(o<t.degree||o>n.length-1-t.degree)){var s=i(a,t.degree,e,n,r,!1,!0);t.circle(s[0],s[1],3)}})},drawNodes:function(e){var t,n=this;this.stroke(150),this.nodes.forEach(function(r,a){try{t=i(r,n.degree,e,n.knots,!1,!1,!0),n.line(t[0],t[1],e[a][0],e[a++][1])}catch(e){console.error(e)}})},formKnots:function(e,t){if(t=t===!0,!t)return this.formUniformKnots(e);var n,r=e.length,i=[],a=r-this.degree;for(n=1;n<r-this.degree;n++)i.push(n+this.degree);for(n=0;n<=this.degree;n++)i=[this.degree].concat(i);for(n=0;n<=this.degree;n++)i.push(a+this.degree);return i},formUniformKnots:function(e){for(var t=[],n=this.points.length+this.degree;n>=0;n--)t.push(n);return t.reverse()},formNodes:function(e,t){var n,r,i,a=[this.degree,e.length-1-this.degree],o=[];for(r=0;r<this.points.length;r++){for(n=0,i=1;i<=this.degree;i++)n+=e[r+i];n/=this.degree,n<e[a[0]]||n>e[a[1]]||o.push(n)}return o},formWeights:function(e){var t=[];return e.forEach(function(e){return t.push(1)}),t},setDegree:function(e){this.degree+=e,this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)},near:function(e,t,n){var r=e.x-t,i=e.y-n,a=Math.sqrt(r*r+i*i);return a<this.activeDistance},getCurrentPoint:function(e,t){for(var n=0;n<this.points.length;n++)if(this.near(this.points[n],e,t))return this.points[n]},keyDown:function(){console.log(this.key,this.keyCode),"ArrowUp"===this.key&&this.setDegree(1),"ArrowDown"===this.key&&this.degree>1&&this.setDegree(-1),this.redraw()},keyUp:function(){},keyPressed:function(){},mouseDown:function(){this.isMouseDown=!0,this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp||(this.points.push({x:this.mouseX,y:this.mouseY}),this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)),this.redraw()},mouseUp:function(){this.isMouseDown=!1,this.cp=!1,this.redraw()},mouseDrag:function(){this.cp&&(this.cp.x=this.mouseX,this.cp.y=this.mouseY,this.redraw())},mouseMove:function(){},scrolled:function(e){if(this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp){var t=this.points.indexOf(this.cp);this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),t=this.points.indexOf(this.cp,t+1),t!==-1&&this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),this.redraw()}},setKeyboardValues:function(e){e.ctrlKey||e.metaKey||e.altKey||e.preventDefault(),this.key=e.key,this.keyCode=e.code},setMouseValues:function(e){var t=this.cvs.getBoundingClientRect();this.mouseX=e.clientX-t.left,this.mouseY=e.clientY-t.top},size:function(e,t){this.width=0|e,this.height=0|(t||e),this.cvs.width=this.width,this.cvs.height=this.height,this.ctx=this.cvs.getContext("2d")},redraw:function(){this.draw()},clear:function(){this.ctx.clearRect(0,0,this.width,this.height)},grid:function(e){e=(0|(e||10))+.5,this.stroke(200,200,220);for(var t=e;t<this.width-1;t+=e)this.line(t,0,t,this.height);for(var n=e;n<this.height-1;n+=e)this.line(0,n,this.width,n)},circle:function(e,t,n){var r=this.ctx;r.beginPath(),r.moveTo(e,t),r.arc(e,t,n,0,2*Math.PI),r.stroke(),r.closePath()},line:function(e,t,n,r){var i=this.ctx;i.beginPath(),i.moveTo(e,t),i.lineTo(n,r),i.stroke(),i.closePath()},stroke:function(e,t,n,r){return"string"==typeof e?this.ctx.strokeStyle=e:(void 0===t&&(t=e,n=e),void 0===r&&(r=1),void(this.ctx.strokeStyle=this.rgba(e,t,n,r)))},noStroke:function(){this.ctx.strokeStyle="none"},fill:function(e,t,n,r){return"string"==typeof e?this.ctx.fillStyle=e:(void 0===t&&(t=e,n=e),void 0===r&&(r=1),void(this.ctx.fillStyle=this.rgba(e,t,n,r)))},noFill:function(){this.ctx.fillStyle="none"},rgba:function(e,t,n,r){return"rgba("+e+","+t+","+n+","+r+")"},beginPath:function(){this.ctx.beginPath(),this.bp=!0},vertex:function(e,t){return this.bp?(this.ctx.moveTo(e,t),void(this.bp=!1)):this.ctx.lineTo(e,t)},endPath:function(){this.ctx.stroke(),this.ctx.closePath()}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=r.createClass({displayName:"Footer",render:function(){return r.createElement("footer",{className:"copyright"},'This article is © 2011-2016 to me, Mike "Pomax" Kamermans, but the text, code, and images are ',r.createElement("a",{href:"https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md"},"almost no rights reserved"),". Go do something cool with it!")}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(113),a=n(40),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(0),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(0),i=r.createClass({displayName:"KnotController",getInitialState:function(){return{owner:!1,knots:[]}},bindKnots:function(e,t){this.setState({owner:e,knots:t})},render:function(){var e=this,t="range",n=0,i=this.state.knots.length,a=1;return r.createElement("section",{className:"knot-controls"},r.createElement("h2",null,"knot values"),this.state.knots.map(function(o,s){var l={type:t,min:n,max:i,step:a,value:o,onChange:function(t){var n=e.state.knots;n[s]=t.target.value,e.setState({knots:n},function(){e.state.owner.redraw()})}};return r.createElement("div",{key:"knot"+s},n,r.createElement("input",l),i," (= ",o,")")}))}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(97),a=i.Link,o=n(40),s=Object.keys(o),l=r.createClass({displayName:"Navigation",generateNavItem:function(e,t){var n=o[e],i=n.getDefaultProps().title,l=r.createElement("a",{href:"#"+e},i);this.props.fullNav&&(l=r.createElement(a,{to:e},i));var u=s.length-1;return t===u&&(t=null),r.createElement("li",{key:e,"data-number":t},l)},generateNav:function(){return this.props.compact?null:r.createElement("div",{ref:"navigation"},r.createElement("navigation",{className:this.props.compact?"compact":null},r.createElement("ul",{className:"navigation"},s.map(this.generateNavItem))))},render:function(){return this.generateNav()}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(115),a=n(110),o=n(114),s=n(118).LocaleSwitcher,l=n(112),u=n(108),c=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,r.createElement(s,null),e,this.props.children)},render:function(){var e,t=this.props.compact,n="/"===this.props.name,o=r.createElement(l,{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(u,null))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(97),a=i.Link,o=n(40),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";var r=n(0),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",style:{border:"none"},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(0),i=r.createClass({displayName:"WeightController",getInitialState:function(){return{owner:!1,weights:[],closed:!1}},bindWeights:function(e,t,n){this.setState({owner:e,weights:t,closed:n})},render:function(){var e=this,t="range",n=0,i=this.state.weights.length,a=1,o=this.state.closed,s=this.state.weights.length;return o!==!1&&(s-=o),r.createElement("section",{className:"knot-controls"},r.createElement("h2",null,"weight values"),this.state.weights.map(function(l,u){if(o&&u>=s)return null;var c={type:t,min:n,max:i,step:a,value:l,onChange:function(t){var n=e.state.weights;n[u]=t.target.value,o&&u<o&&(n[u+s]=t.target.value),e.setState({weights:n},function(){e.state.owner.redraw()})}};return r.createElement("div",{key:"knot"+u},n,r.createElement("input",c),i," (= ",l,")")}))}});e.exports=i},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="locale-switcher";e.exports=function(e){return r.createElement("div",{className:"locale-switcher"},a.getContent(o,this))}},function(e,t,n){"use strict";e.exports={LocaleSwitcher:n(117)}},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:"The projection identity"}},onClick:function(e,t){t.t=t.curve.on({x:e.offsetX,y:e.offsetY},7),(t.t<.05||t.t>.95)&&(t.t=!1),t.redraw()},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[0].y-=10,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelHeight();if(e.setColor("black"),e.t){e.drawCircle(e.curve.get(e.t),3),e.setColor("lightgrey");var r,i,a,o=e.drawHull(t,e.t),s=e.utils;
 6===o.length?(r=t.points[1],i=o[5],a=s.lli4(r,i,t.points[0],t.points[2]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[2])):10===o.length&&(r=o[5],i=o[9],a=s.lli4(r,i,t.points[0],t.points[3]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[3])),e.setColor("#00FF00"),e.drawLine(r,i),e.setColor("red"),e.drawLine(i,a),e.setColor("black"),e.drawCircle(a,3),e.setFill("black"),e.text("A",{x:10+r.x,y:r.y}),e.text("B (t = "+e.utils.round(e.t,2)+")",{x:10+i.x,y:i.y}),e.text("C",{x:10+a.x,y:a.y});var l=s.dist(r,i),u=s.dist(i,a),c=l/u;e.text("d1 (A-B): "+s.round(l,2)+", d2 (B-C): "+s.round(u,2)+", ratio (d1/d2): "+s.round(c,4),{x:10,y:n-7})}},setCT:function(e,t){t.t=e.offsetX/t.getPanelWidth()},drawCTgraph:function(e){e.reset(),e.setColor("black");var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"u",0,1),e.setColor("blue");var i=function(t){var i=e.u(t),a={x:n+t*r,y:n+i*r};return a};if(e.drawFunction(i),e.t){var a=e.u(e.t),o=e.utils.round(a,3),s=e.utils.round(1-a,3),l=i(e.t);e.drawLine({x:l.x,y:n},l),e.drawLine({x:n,y:l.y},l),e.drawCircle(l,3),e.setFill("blue"),e.text("    t = "+e.utils.round(e.t,3),{x:l.x+10,y:l.y-7}),e.text("u(t) = "+e.utils.round(a,3),{x:l.x+10,y:l.y+7}),e.setFill("black"),e.text("C = "+o+" * start + "+s+" * end",{x:t/2-n,y:n+r})}},drawQCT:function(e){e.u=e.u||function(e){var t=(e-1)*(e-1),n=2*e*e-2*e+1;return t/n},this.drawCTgraph(e)},drawCCT:function(e){e.u=e.u||function(e){var t=(1-e)*(1-e)*(1-e),n=e*e*e+t;return t/n},this.drawCTgraph(e)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"De Casteljau's algorithm is the pivotal algorithm when it comes to Bézier curves. You can use it not just to split curves, but also to draw them efficiently (especially for high-order Bézier curves), as well as to come up with curves based on three points and a tangent. Particularly this last thing is really useful because it lets us \"mould\" a curve, by picking it up at some point, and dragging that point around to change the curve's shape."),r.createElement("p",null,"How does that work? Succinctly: we run de Casteljau's algorithm in reverse!"),r.createElement("p",null,"In order to run de Casteljau's algorithm in reverse, we need a few basic things: a start and end point, a point on the curve that want to be moving around, which has an associated ",r.createElement("i",null,"t"),' value, and a point we\'ve not explicitly talked about before, and as far as I know has no explicit name, but lives one iteration higher in the de Casteljau process then our on-curve point does. I like to call it "A" for reasons that will become obvious.'),r.createElement("p",null,'So let\'s use graphics instead of text to see where this "A" is, because text only gets us so far: in the following graphic, click anywhere on the curves to see the identity information that we\'ll be using to run de Casteljau in reverse (you can manipulate the curve even after picking a point. Note the "ratio" value when you do so: does it change?):'),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,preset:"abc",title:"Projections in a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onClick:this.onClick}),r.createElement(i,{inline:!0,preset:"abc",title:"Projections in a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onClick:this.onClick})),r.createElement("p",null,"Clicking anywhere on the curves shows us three things:"),r.createElement("ol",null,r.createElement("li",null,"our on-curve point; let's call that ",r.createElement("b",null,"B"),","),r.createElement("li",null,"a point at the tip of B's \"hat\", on de Casteljau step up; let's call that ",r.createElement("b",null,"A"),", and"),r.createElement("li",null,"a point that we get by projecting B onto the start--end baseline; let's call that ",r.createElement("b",null,"C"),".")),r.createElement("p",null,"These three values ABC hide an important identity formula for quadratic and cubic Bézier curves: for any point on the curve with some ",r.createElement("i",null,"t")," value, the ratio distance of C along baseline is fixed: if some ",r.createElement("i",null,"t")," value sets up a C that is 20% away from the start and 80% away from the end, then it doesn't matter where the start, end, or control points are: for that ",r.createElement("i",null,"t")," value, C will ",r.createElement("em",null,"always")," lie at 20% from the start and 80% from the end point. Go ahead, pick an on-curve point in either graphic and then move all the other points around: if you only move the control points, start and end won't move, and so neither will C, and if you move either start or end point, C will move but its relative position will not change. The following function stays true:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f48f095d9c37c079ff6a5f71b3047397aa7dfc6b.svg",style:{width:"13.19985rem",height:"1.125rem"}})),r.createElement("p",null,"So that just leaves finding A."),r.createElement("div",{className:"note"},r.createElement("p",null,"While that relation is fixed, the function ",r.createElement("i",null,"u(t)")," differs depending on whether we're working with quadratic or cubic curves:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d351ad8dd7d1ab5c5e65f5abd78caf082fc84eb4.svg",style:{width:"12.825000000000001rem",height:"5.92515rem"}})),r.createElement("p",null,"So, if we know the start and end coordinates, and we know the ",r.createElement("i",null,"t")," value, we know C:"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,preset:"abc",title:"Quadratic value of C for t",draw:this.drawQCT,onMouseMove:this.setCT}),r.createElement(i,{inline:!0,preset:"abc",title:"Cubic value of C for t",draw:this.drawCCT,onMouseMove:this.setCT})),r.createElement("p",null,"Mouse-over the graphs to see the expression for C, given the ",r.createElement("i",null,"t")," value at the mouse pointer.")),r.createElement("p",null,"There's also another important bit of information that is inherent to the ABC values: while the distances between A and B, and B and C, are dynamic (based on where we put B), the ",r.createElement("em",null,"ratio")," between the two distances is stable: given some ",r.createElement("i",null,"t")," value, the following always holds:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6cb3e94fe9164128a25570a32abed15baa726f17.svg",style:{width:"17.92485rem",height:"2.7rem"}})),r.createElement("p",null,"This leads to a pretty powerful bit of knowledge: merely by knowing the ",r.createElement("i",null,"t")," value of some on curve point, we know where C has to be (as per the above note), and because we know B and C, and thus have the distance between them, we know where A has to be:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1dffb79b42799c95c899e689b074361f662ec807.svg",style:{width:"15.525rem",height:"2.55015rem"}})),r.createElement("p",null,"And that's it, all values found."),r.createElement("div",{className:"note"},r.createElement("p",null,"Much like the ",r.createElement("i",null,"u(t)")," function in the above note, the ",r.createElement("i",null,"ratio(t)")," function depends on whether we're looking at quadratic or cubic curves. Their form is intrinsically related to the ",r.createElement("i",null,"u(t)")," function in that they both come rolling out of the same function evalution, explained over on ",r.createElement("a",{href:"http://mathoverflow.net/questions/122257/finding-the-formula-for-Bézier-curve-ratios-hull-point-point-baseline"},"MathOverflow"),' by Boris Zbarsky and myself. The ratio functions are the "s(t)" functions from the answers there, while the "u(t)" functions have the same name both here and on MathOverflow.'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7ef64890f95db9e48258edb46a3d52d5ed143155.svg",style:{width:"16.57485rem",height:"2.77515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5f2bb71795c615637d632da70b722938cb103b03.svg",style:{width:"15.075000000000001rem",height:"2.77515rem"}})),r.createElement("p",null,'Unfortunately, this trick only works for quadratic and cubic curves. Once we hit higher order curves, things become a lot less predictable; the "fixed point ',r.createElement("i",null,"C"),'" is no longer fixed, moving around as we move the control points, and projections of ',r.createElement("i",null,"B")," onto the line between start and end may actually lie on that line before the start, or after the end, and there are no simple ratios that we can exploit.")),r.createElement("p",null,"So: if we know B and its corresponding ",r.createElement("i",null,"t"),' value, then we know all the ABC values, which —together with a start and end coordinate— gives us the necessary information to reconstruct a curve\'s "de Casteljau skeleton", which means that two points and a value between 0 and 1, we can come up with a curve. And that opens up possibilities: curve manipulation by dragging an on-curve point, curve fitting of "a bunch of coordinates", these are useful things, and we\'ll look at both in the next sections.'))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="aligning",s=r.createClass({displayName:"Aligning",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=Math.atan2,l=Math.PI,u=2*l,c=Math.cos,h=Math.sin,d=r.createClass({displayName:"Introduction",statics:{keyHandlingOptions:{propName:"error",values:{38:.1,40:-.1},controller:function(e){e.error<.1&&(e.error=.1)}}},getDefaultProps:function(){return{title:"Approximating Bézier curves with circular arcs"}},setupCircle:function(e){var t=new e.Bezier(70,70,140,40,240,130);e.setCurve(t)},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.error=.5},getCCenter:function(e,t,n,r){var i,a=n.x-t.x,o=n.y-t.y,d=r.x-n.x,f=r.y-n.y,p=a*c(l/2)-o*h(l/2),m=a*h(l/2)+o*c(l/2),g=d*c(l/2)-f*h(l/2),v=d*h(l/2)+f*c(l/2),y=(t.x+n.x)/2,w=(t.y+n.y)/2,b=(n.x+r.x)/2,_=(n.y+r.y)/2,x=y+p,E=w+m,C=b+g,k=_+v,S=e.utils.lli8(y,w,x,E,b,_,C,k),P=e.utils.dist(S,t),T=s(t.y-S.y,t.x-S.x),N=s(n.y-S.y,n.x-S.x),M=s(r.y-S.y,r.x-S.x);return T<M?((T>N||N>M)&&(T+=u),T>M&&(i=M,M=T,T=i)):M<N&&N<T?(i=M,M=T,T=i):M+=u,S.s=T,S.e=M,S.r=P,S},drawCircle:function(e,t){e.reset();var n=t.points,r=this.getCCenter(e,n[0],n[1],n[2]);e.setColor("grey"),e.drawCircle(r,e.utils.dist(r,n[0])),e.setColor("black"),n.forEach(function(t){return e.drawCircle(t,3)});var i;e.setColor("blue"),e.drawLine(n[0],n[1]),i={x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("red"),e.drawLine(n[1],n[2]),i={x:(n[1].x+n[2].x)/2,y:(n[1].y+n[2].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("green"),e.drawLine(n[2],n[0]),i={x:(n[2].x+n[0].x)/2,y:(n[2].y+n[0].y)/2},e.drawLine(i,{x:r.x+(r.x-i.x),y:r.y+(r.y-i.y)}),e.setColor("black"),e.drawPoint(r),e.setFill("black"),e.text("Intersection point",r,{x:-25,y:10})},drawSingleArc:function(e,t){e.reset();var n=t.arcs(e.error);e.drawSkeleton(t),e.drawCurve(t);var r=n[0];e.setColor("red"),e.setFill("rgba(255,0,0,0.2)"),e.debug=!0,e.drawArc(r),e.setFill("black"),e.text("Arc approximation with total error "+e.utils.round(e.error,1),{x:10,y:15})},drawArcs:function(e,t){e.reset();var n=t.arcs(e.error);e.drawSkeleton(t),e.drawCurve(t),n.forEach(function(t){e.setRandomColor(.3),e.setFill(e.getColor()),e.drawArc(t)}),e.setFill("black"),e.text("Arc approximation with total error "+e.utils.round(e.error,1)+" per arc segment",{x:10,y:15})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Let's look at doing the exact opposite of the previous section: rather than approximating circular arc using Bézier curves, let's approximate Bézier curves using circular arcs."),r.createElement("p",null,"We already saw in the section on circle approximation that this will never yield a perfect equivalent, but sometimes you need circular arcs, such as when you're working with fabrication machinery, or simple vector languages that understand lines and circles, but not much else."),r.createElement("p",null,'The approach is fairly simple: pick a starting point on the curve, and pick two points that are further along the curve. Determine the circle that goes through those three points, and see if it fits the part of the curve we\'re trying to approximate. Decent fit? Try spacing the points further apart. Bad fit? Try spacing the points closer together. Keep doing this until you\'ve found the "good approximation/bad approximation" boundary, record the "good" arc, and then move the starting point up to overlap the end point we previously found. Rinse and repeat until we\'ve covered the entire curve.'),r.createElement("p",null,"So: step 1, how do we find a circle through three points? That part is actually really simple. You may remember (if you ever learned it!) that a line between two points on a circle is called a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Chord_%28geometry%29"},"chord"),", and one property of chords is that the line from the center of any chord, perpendicular to that chord, passes through the center of the circle."),r.createElement("p",null,"So: if we have have three points, we have three (different) chords, and consequently, three (different) lines that go from those chords through the center of the circle. So we find the centers of the chords, find the perpendicular lines, find the intersection of those lines, and thus find the center of the circle."),r.createElement("p",null,"The following graphic shows this procedure with a different colour for each chord and its associated perpendicular through the center. You can move the points around as much as you like, those lines will always meet!"),r.createElement(i,{preset:"simple",title:"Finding a circle through three points",setup:this.setupCircle,draw:this.drawCircle}),r.createElement("p",null,"So, with the procedure on how to find a circle through three points, finding the arc through those points is straight-forward: pick one of the three points as start point, pick another as an end point, and the arc has to necessarily go from the start point, over the remaining point, to the end point."),r.createElement("p",null,"So how can we convert a Bezier curve into a (sequence of) circular arc(s)?"),r.createElement("ul",null,r.createElement("li",null,"Start at ",r.createElement("em",null,"t=0")),r.createElement("li",null,"Pick two points further down the curve at some value ",r.createElement("em",null,"m = t + n")," and ",r.createElement("em",null,"e = t + 2n")),r.createElement("li",null,"Find the arc that these points define"),r.createElement("li",null,"Determine how close the found arc is to the curve:",r.createElement("ul",null,r.createElement("li",null,"Pick two additional points ",r.createElement("em",null,"e1 = t + n/2")," and ",r.createElement("em",null,"e2 = t + n + n/2"),"."),r.createElement("li",null,"These points, if the arc is a good approximation of the curve interval chosen, should lie ",r.createElement("em",null,"on")," the circle, so their distance to the center of the circle should be the same as the distance from any of the three other points to the center."),r.createElement("li",null,"For point points, determine the (absolute) error between the radius of the circle, and the",r.createElement("em",null,"actual")," distance from the center of the circle to the point on the curve."),r.createElement("li",null,"If this error is too high, we consider the arc bad, and try a smaller interval.")))),r.createElement("p",null,"The result of this is shown in the next graphic: we start at a guaranteed failure: s=0, e=1. That's the entire curve. The midpoint is simply at ",r.createElement("em",null,"t=0.5"),", and then we start performing a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"Binary Search"),"."),r.createElement("ol",null,r.createElement("li",null,"We start with ",1),r.createElement("li",null,"That'll fail, so we retry with the interval halved: ",.5),r.createElement("ul",null,r.createElement("li",null,"If that arc's good, we move back up by half distance: ",.75,"."),r.createElement("li",null,"However, if the arc was still bad, we move ",r.createElement("em",null,"down")," by half the distance: ",.25,".")),r.createElement("li",null,"We keep doing this over and over until we have two arcs found in sequence of which the first arc is good, and the second arc is bad. When we find that pair, we've found the boundary between a good approximation and a bad approximation, and we pick the former")),r.createElement("p",null,"The following graphic shows the result of this approach, with a default error threshold of 0.5, meaning that if an arc is off by a ",r.createElement("em",null,"combined")," half pixel over both verification points, then we treat the arc as bad. This is an extremely simple error policy, but already works really well. Note that the graphic is still interactive, and you can use your up and down arrow keys keys to increase or decrease the error threshold, to see what the effect of a smaller or larger error threshold is."),r.createElement(i,{preset:"simple",title:"Arc approximation of a Bézier curve",setup:this.setupCubic,draw:this.drawSingleArc,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"With that in place, all that's left now is to \"restart\" the procedure by treating the found arc's end point as the new to-be-determined arc's starting point, and using points further down the curve. We keep trying this until the found end point is for ",r.createElement("em",null,"t=1"),", at which point we are done. Again, the following graphic allows for up and down arrow key input to increase or decrease the error threshold, so you can see how picking a different threshold changes the number of arcs that are necessary to reasonably approximate a curve:"),r.createElement(i,{preset:"simple",title:"Arc approximation of a Bézier curve",setup:this.setupCubic,draw:this.drawArcs,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,'So... what is this good for? Obviously, If you\'re working with technologies that can\'t do curves, but can do lines and circles, then the answer is pretty straight-forward, but what else? There are some reasons why you might need this technique: using circular arcs means you can determine whether a coordinate lies "on" your curve really easily: simply compute the distance to each circular arc center, and if any of those are close to the arc radii, at an angle betwee the arc start and end: bingo, this point can be treated as lying "on the curve". Another benefit is that this approximation is "linear": you can almost trivially travel along the arcs at fixed speed. You can also trivially compute the arc length of the approximated curve (it\'s a bit like curve flattening). The only thing to bear in mind is that this is a lossy equivalence: things that you compute based on the approximation are guaranteed "off" by some small value, and depending on how much precision you need, arc approximation is either going to be super useful, or completely useless. It\'s up to you to decide which, based on your application!'))}});e.exports=o(d)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),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 f=(400*r/3|0)/100,p=(100*a|0)/100;e.text("Approximating with "+t+" strips (true area: "+f+"): "+p,{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(0),i=n(8),a=n(6),o=n(15),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(0),i=n(4),a=new i,o="boundingbox",s=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:a.getTitle(o)}},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),e.setColor("red"),t.extrema().values.forEach(function(n){e.drawCircle(t.get(n),3)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(600,300),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/9)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points);var n=0|Math.round(this.points.length/2);this.knots[n+0]=this.knots[n],this.knots[n+1]=this.knots[n],this.knots[n+2]=this.knots[n];for(var r=n+3;r<this.knots.length;r++)this.knots[r]=this.knots[r-1]+1;this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(107),a=n(6),o=n(111),s=n(116),l=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:"B-Splines"}},bindKnots:function(e,t,n){console.log("binding knots for "+n),this.refs[n].bindKnots(e,t)},bindWeights:function(e,t,n,r){this.refs[r].bindWeights(e,t,n)},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. Easily confused to mean Bézier splines, that's not actually what they are; they are \"basis function\" splines, which makes a lot of difference, which we'll be looking at in this section. We're not going to dive as deep into B-Splines as we have for Bézier curves (that would be an entire primer on its own) but we'll be looking at how B-Splines work, what kind of maths is involved in computing them, and how to draw them based on a number of parameters that you can pick for individual B-Splines."),r.createElement("p",null,"First off: B-Splines are ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Piecewise"},'"piecewise polynomial interpolation curves"'),', where the "single curve" is built by performing polynomial interpolation over a set of points, using a sliding window of a fixed number of points. For instance, a "cubic" B-Spline defined by twelve points will have its curve built by evaluating the polynomial interpolation of four points, and the curve can be treated as a lot of different sections, each controlled by four points at a time, such that the full curve consists of smoothly connected sections defined by points ',"{","1,2,3,4","}",", ","{","2,3,4,5","}",", ..., ","{","8,9,10,11","}",", and finally ","{","9,10,11,12","}",", for eight sections."),r.createElement("p",null,"What do they look like? They look like this! .. okay that's an empty graph, but simply click to place some point, with the stipulation that you need at least four point to see any curve. More than four points simply draws a longer B-Spline curve:"),r.createElement(i,{sketch:n(125)}),r.createElement("p",null,"The important part to notice here is that we are ",r.createElement("strong",null,"not"),' doing the same thing with B-Splines that we do for poly-Béziers or Catmull-Rom curves: both of the latter simply define new sections as literally "new sections based on new points", so a 12 point cubic poly-Bézier curve is actually impossible, because we start with a four point curve, and then add three more points for each section that follows, so we can only have 4, 7, 10, 13, 16, etc point Poly-Béziers. Similarly, while Catmull-Rom curves can grow by adding single points, this addition of a single point introduces three implicit Bézier points. Cubic B-Splines, on the other hand, are smooth interpolations of ',r.createElement("em",null,"each possible curve involving four consecutive points"),", such that at any point along the curve except for our start and end points, our on-curve coordinate is defined by four control points."),r.createElement("p",null,"Consider the difference to be this:"),r.createElement("ul",null,r.createElement("li",null,"for Bézier curves, the curve is defined as an interpolation of points, but:"),r.createElement("li",null,"for B-Splines, the curve is defined as an interpolation of ",r.createElement("em",null,"curves"),".")),r.createElement("p",null,"In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work."),r.createElement("h2",null,"How to compute a B-Spline curve: some maths"),r.createElement("p",null,"Given a B-Spline of degree ",r.createElement("code",null,"d")," and thus order ",r.createElement("code",null,"k=d+1")," (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and ",r.createElement("code",null,"n")," control points ",r.createElement("code",null,"P",r.createElement("sub",null,"0"))," through ",r.createElement("code",null,"P",r.createElement("sub",null,"n-1")),", we can compute a point on the curve for some value ",r.createElement("code",null,"t")," in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluting the following function:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/329da80e737b0005f4dbe4c84ff868bde5dfaee0.svg",style:{width:"11.775150000000002rem",height:"3.00015rem"}})),r.createElement("p",null,'Which, honestly, doesn\'t tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the ',r.createElement("em",null,"N(...)")," function, subscipted with an obvious parameter ",r.createElement("code",null,"i"),", which comes from our summation, and some magical parameter ",r.createElement("code",null,"k"),". So we need to know two things: 1. what does N(t) do, and 2. what is that ",r.createElement("code",null,"k"),"? Let's cover both, in reverse order."),r.createElement("p",null,"The parameter ",r.createElement("code",null,"k"),' represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or tops influencing the total curvature as a "knot on the curve". Doing so for a degree ',r.createElement("code",null,"d")," B-Spline with ",r.createElement("code",null,"n")," control point gives us ",r.createElement("code",null,"d + n + 1")," knots, defining ",r.createElement("code",null,"d + n")," intervals along the curve, and it is these intervals that the above ",r.createElement("code",null,"k")," subscript to the N() function applies to."),r.createElement("p",null,"Then the N() function itself. What does it look like?"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c10575fb591062784484357356796a4c0be4f83e.svg",style:{width:"38.39985rem",height:"3.15rem"}})),r.createElement("p",null,"So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where ",r.createElement("code",null,"i")," goes up, and ",r.createElement("code",null,"k")," goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following ",r.createElement("code",null,"i"),"/",r.createElement("code",null,"k")," values:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6664a4fc5832059bbc68eaa8068a4b2577e1d96a.svg",style:{width:"16.725150000000003rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And this function finally has a straight up evaluation: if a ",r.createElement("code",null,"t")," value lies within a knot-specific interval once we reach a ",r.createElement("code",null,"k=1"),' value, it "counts", otherwise it doesn\'t. We did cheat a little, though, because for all these values we need to scale our ',r.createElement("code",null,"t")," value first, so that it lies in the interval bounded by ",r.createElement("code",null,"knots[d]")," and ",r.createElement("code",null,"knots[n]"),", which are the start point and end point where curvature is controlled by exactly ",r.createElement("code",null,"order")," control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map ",r.createElement("code",null,"t")," from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead."),r.createElement("h2",null,"Can we simplify that?"),r.createElement("p",null,"We can, yes."),r.createElement("p",null,"People far smarter than us have looked at this work, and two in particular —",r.createElement("a",{href:"http://www.npl.co.uk/people/maurice-cox"},"Maurice Cox")," and ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Carl_R._de_Boor"},"Carl de Boor"),"— came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating ",r.createElement("em",null,"d(t)")," on a curve section between knots ",r.createElement("em",null,"i")," and ",r.createElement("em",null,"i+1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3780a420cd9b1bc59bec2c49bbd29f5e58497a3c.svg",style:{width:"18.75015rem",height:"1.27485rem"}})),"This is another recursive function, with ",r.createElement("em",null,"k")," values decreasing from the curve order to 1, and the value ",r.createElement("em",null,"α")," (alpha) defined by:",r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ba3b25cd54993b4601d8f415bc4cde73af4fc460.svg",style:{width:"17.325rem",height:"2.7rem"}})),r.createElement("p",null,'That looks complicated, but it\'s not. Computing alpha is just a fraction involving known, plain numbers and once we have our alpha value, computing (1-alpha) is literally just "computing one minus alpha". Computing this d() function is thus simply a matter of "computing simple arithmetics but with recursion", which might be computationally expensive because we\'re doing "a lot of" steps, but is also computationally cheap because each step only involves very simple maths. Of course as before the recursion has to stop:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1405067abebab73574934e3e69d7a7158106c744.svg",style:{width:"25.34985rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So, we see two stopping conditions: either ",r.createElement("code",null,"i")," becomes 0, in which case d() is zero, or ",r.createElement("code",null,"k"),' becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.'),r.createElement("p",null,"Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily: we just need to compute a triangle of interconnected values. For instance, d() for i=3, k=3 yields the following triangle:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a0a1069b001c75a1fab7f40ffa8bc403e1408f0d.svg",style:{width:"28.87515rem",height:"18.300150000000002rem"}})),r.createElement("p",null,"That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2): d(3,3) = a(3,3) x d(2,3) + (1-a(3,3)) x d(2,2)... and we simply keep expanding our triangle until we reach the terminating function parameters. Done deal!"),r.createElement("p",null,"One thing we need to keep in mind is that we're working with a spline that is contrained by its control points, so even though the ",r.createElement("code",null,"d(..., k)")," values are zero or one at the lowest level, they are really \"zero or one, times their respective control point\", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point: that's pretty essential!"),r.createElement("p",null,'If we run this computation "down", starting at d(3,3), then without special code in place we would be computing quite a few terms multiple times at each step. On the other hand, we can also start with that last "column", we can generate the terminating d() values first, then compute the a() constants, perform our multiplcations, generate the previous step\'s d() values, compute their a() constants, do the multiplications, etc. until we end up all the way back at the top. If we run our computation this way, we don\'t need any explicit caching, we can just "recycle" the list of numbers we start with and simply update them as we move up the triangle. So, let\'s implement that!'),r.createElement("h2",null,"Cool, cool... but I don't know what to do with that information"),r.createElement("p",null,"I know, this is pretty mathy, so let's have a look at what happens when we change parameters here. We can't change the maths for the interpolation functions, so that gives us only one way to control what happens here: the knot vector itself. As such, let's look at the graph that shows the interpolation functions for a cubic B-Spline with seven points with a uniform knot vector (so we see seven identical functions), representing how much each point (represented by one function each) influences the total curvature, given our knot values. And, because exploration is the key to discovery, let's make the knot vector a thing we can actually manipulate. Normally a proper knot vector has a constraint that any value is strictly equal to, or larger than the previous ones, but screw it this is programming, let's ignore that hard restriction and just mess with the knots however we like."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"interpolation-graph"}),r.createElement(i,{sketch:n(128),controller:function(t,n){return e.bindKnots(t,n,"interpolation-graph")}})),r.createElement("p",null,"Changing the values in the knot vector changes how much each point influences the total curvature (with some clever knot value manipulation, we can even make the influence of certain points disappear entirely!), so we can see that while the control points define the hull inside of which we're going to be drawing a curve, it is actually the knot vector that determines the actual ",r.createElement("em",null,"shape")," of the curve inside that hull."),r.createElement("p",null,"After reading the rest of this section you may want to come back here to try some specific knot vectors, and see if the resulting interpolation landscape makes sense given what you will now think should happen!"),r.createElement("h2",null,"Running the computation"),r.createElement("p",null,"Unlike the de Casteljau algorithm, where the ",r.createElement("code",null,"t")," value stays the same at every iteration, for B-Splines that is not the case, and so we end having to (for each point we evaluate) run a fairly involving bit of recursive computation. The algorithm is discussed on ",r.createElement("a",{href:"http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/de-Boor.html"},"this Michigan Tech")," page, but an easier to read version is implemented by ",r.createElement("a",{href:"https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71"},"b-spline.js"),", so we'll look at its code."),r.createElement("p",null,"Given an input value ",r.createElement("code",null,"t"),", we first map the input to a value from the domain [0,1] to the domain [knots[degree], knots[knots.length - 1 - degree]. Then, we find the section number ",r.createElement("code",null,"s")," that this mapped ",r.createElement("code",null,"t")," value lies on:"),r.createElement("pre",null,"\n","        for(s=domain[0]; s < domain[1]; s++) ","{","\n","          if(knots[s] <= t && t <= knots[s+1]) break;","\n","        ","}"),r.createElement("p",null,"after running this code, ",r.createElement("code",null,"s")," is the index for the section the point will lie on. We then run the algorithm mentioned on the MU page (updated to use this description's variable names):"),r.createElement("pre",null,"\n","        let v = copy of control points","\n","\n","        for(let L = 1; L <= order; L++) ","{","\n","          for(let i=s; i > s + L - order; i--) ","{","\n","            let numerator = t - knots[i]","\n","            let denominator = knots[i - L + order] - knots[i]","\n","            let alpha = numerator / denominator","\n","            let v[i] = alpha * v[i] + (1-alpha) * v[i-1]","\n","          ","}","\n","        ","}"),r.createElement("p",null,'(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at ',r.createElement("code",null,"i=s")," at each level of the interpolation, and we stop when ",r.createElement("code",null,"i = s - order + level"),", so we always end up with a value for ",r.createElement("code",null,"i")," such that those ",r.createElement("code",null,"v[i-1]")," don't try to use an array index that doesn't exist)"),r.createElement("h2",null,"Open vs. closed paths"),r.createElement("p",null,"Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are ",r.createElement("em",null,"the same point"),". However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order ",r.createElement("code",null,"d")," B-Spline, we need to make the last ",r.createElement("code",null,"d")," point the same as the first ",r.createElement("code",null,"d")," points. And the easiest way to do this is to simply append ",r.createElement("code",null,"points.splice(0,d)")," to ",r.createElement("code",null,"points"),". Done!"),r.createElement("p",null,'Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for ',r.createElement("code",null,"points[0]")," and ",r.createElement("code",null,"points[n-k]")," etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects."),r.createElement("h2",null,"Manipulating the curve through the knot vector"),r.createElement("p",null,"The most important thing to understand when it comes to B-Splines is that they work ",r.createElement("em",null,"because"),' of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the ',r.createElement("em",null,"values")," that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:"),r.createElement("ol",null,r.createElement("li",null,"we can use a uniform knot vector, with equally spaced intervals,"),r.createElement("li",null,"we can use a non-uniform knot vector, without enforcing equally spaced internvals,"),r.createElement("li",null,'we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and'),r.createElement("li",null,"we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.")),r.createElement("h3",null,"Uniform B-Splines"),r.createElement("p",null,"The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines ",r.createElement("em",null,"the same intervals"),", or even [0,2,3,...,18,20,22], which also defines ",r.createElement("em",null,"the same intervals"),", just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i<r+1+n;i++)this.drawN(i,n,e,(this.width-e)/(2*(r+2)),this.height-2*e)},drawN:function(e,t,n,i,a){this.stroke(r[e]);this.knots;this.beginPath();for(var o=e-1,s=o,l=.1,u=e+t+1;s<u;s+=l){var c=n+e*i+s*i,h=this.height-n-this.N(e,t,s)*a;this.vertex(c,h)}this.endPath()},N:function(e,t,n){var r=this.knots[e],i=this.knots[e+1],a=this.knots[e+t-1],o=this.knots[e+t];if(1===t)return r<=n&&n<=i?1:0;var s=n-r,l=a-r,u=0===l?0:s/l,c=o-n,h=o-i,d=0===h?0:c/h,f=0;if(0!==u){var p=this.ensureN(e,t-1,n);f=void 0===p?this.N(e,t-1,n):p}var m=0;if(0!==d){var g=this.ensureN(e+1,t-1,n);m=void 0===g?this.N(e+1,t-1,n):g}return this.cacheN(e,t,n,u*f+d*m),this.cache.N[e][t][n]},ensureN:function(e,t,n){this.cache.N||(this.cache.N=[]);var r=this.cache.N;return r[e]||(r[e]=[]),r[e][t]||(r[e][t]=[]),r[e][t][n]},cacheN:function(e,t,n,r){this.ensureN(e,t,n),this.cache.N[e][t][n]=r}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points,!0),
-this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,weights:[],setup:function(){this.size(400,400);for(var e=2*Math.PI,t=this.width/3,n=0;n<6;n++)this.points.push({x:this.width/2+t*Math.cos(n/6*e),y:this.height/2+t*Math.sin(n/6*e)});this.points=this.points.concat(this.points.slice(0,3)),this.closed=this.degree,this.knots=this.formKnots(this.points),this.weights=this.formWeights(this.points),this.props.controller&&this.props.controller(this,this.knots,this.weights,this.closed),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="canonical",s=r.createClass({displayName:"Canonical",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(6),a=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:"Bézier curves and Catmull-Rom curves"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Taking an excursion to different splines, the other common design curve is the ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline"},"Catmull-Rom spline"),". Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one into the other, and back, with some simple substitutions?"),r.createElement("p",null,'Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, except the first and last, which makes sense if you read the "natural language" description for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point P',r.createElement("sub",null,"x"),", has a tangent along the line P",r.createElement("sub",null,"x-1")," to P",r.createElement("sub",null,"x+1"),". The curve runs from points P",r.createElement("sub",null,"2")," to  P",r.createElement("sub",null,"n-1"),', and has a "tension" that determines how fast the curve passes through each point. The lower the tension, the faster the curve goes through each point, and the bigger its local tangent is.'),r.createElement("p",null,"I'll be showing the conversion to and from Catmull-Rom curves for the tension that the Processing language uses for its Catmull-Rom algorithm."),r.createElement("p",null,"We start with showing the Catmull-Rom matrix form:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5fc1c44e623f2a9fbeefdaa204557479e3debf5a.svg",style:{width:"30.150000000000002rem",height:"5.70015rem"}})),r.createElement("p",null,"However, there's something funny going on here: the coordinate column matrix looks weird. The reason is that Catmull-Rom curves are actually curve segments that are described by two points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead, this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1 with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate 4). So if we want to express this as a matrix form based on four coordinates, we get this representation instead:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/40b9ca9b5755a4be49517ddfa630fef7b8e23067.svg",style:{width:"29.475rem",height:"6.525rem"}})),r.createElement("div",{className:"note"},r.createElement("h2",null,"Where did that 2 come from?"),r.createElement("p",null,"Catmull-Rom splines are based on the concept of tension: the higher the tensions, the shorter the tangents at the departure and arrival points. The basic Catmull-Rom curve arrives and departs with tangents equal to half the distance between the two adjacent points, so that's where that 2 came from."),r.createElement("p",null,'However, the "real" matrix is this:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7bf9b5e971866babedd991ccdde5c4ab104297e5.svg",style:{width:"24.75rem",height:"6.60015rem"}})),r.createElement("p",null,"This bakes in the tension factor τ explicitly.")),r.createElement("p",null,'Plugging this into the "two coordinates and two tangent vectors" matrix form, we get:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4818f8797c35f23c2b9883aa986b1129b2fa151a.svg",style:{width:"21.45015rem",height:"5.70015rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/08f77989369f664cbc0fb7526791efd4c5299d70.svg",style:{width:"35.47485rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7ae769c5370469b16523bab6f34abf0dd6749be.svg",style:{width:"28.425150000000002rem",height:"5.54985rem"}})),r.createElement("p",null,"So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7250f1c57e2bd66ec4349e4e88db4d5d74401a06.svg",style:{width:"50.85rem",height:"5.54985rem"}})),r.createElement("p",null,"The difference is somewhere in the actual hermite matrix, since the ",r.createElement("em",null,"t")," and coordinate values are identical, so let's solve that matrix equasion:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8a42b24fca3aaf6b8ec08e84b7e91c43e26e8acf.svg",style:{width:"28.575rem",height:"5.54985rem"}})),r.createElement("p",null,"We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the Bézier matrix on the right side of the equals sign:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e111d6e846f4d7204dec484005f74993e66c6c9.svg",style:{width:"58.19985rem",height:"5.70015rem"}})),r.createElement("p",null,"Which gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f94b80113772d90a4fbc93d4495cb5767e5c8123.svg",style:{width:"12.6rem",height:"5.47515rem"}})),r.createElement("p",null,"Multiplying this ",r.createElement("strong",null,r.createElement("em",null,"A"))," with our coordinates will give us a proper Bézier matrix expression again:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d088274e440ceeac2916a0f32176682d776c1c57.svg",style:{width:"31.725rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9e68f80b270d3445d9f9cb28ff2c5aed219aa9d2.svg",style:{width:"25.650000000000002rem",height:"6.60015rem"}})),r.createElement("p",null,"So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning the Catmull-Rom coordinates on the left into the Bézier coordinates on the right (with τ being our tension factor):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f0c5a707b590eaf8899a927ce39fd186a6acecf3.svg",style:{width:"18.07515rem",height:"6.67485rem"}})),r.createElement("p",null,"And the other way around, a Bézier to Catmull-Rom conversion requires turning the Bézier coordinates on the left this time into the Catmull-Rom coordinates on the right. Note that there is no tension this time, because Bézier curves don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension Catmull-Rom curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/51da95daf2645abd9903a4e28749a6d01826625c.svg",style:{width:"21.150000000000002rem",height:"5.625rem"}})),r.createElement("p",null,"Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom splines, the choice mostly being which drawing algorithms we have natively available."))}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Creating a Catmull-Rom curve from three points"}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?"),r.createElement("p",null,"As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve."),r.createElement("p",null,"Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of ",r.createElement("i",null,"n")," points, in order to draw the equivalent curve using cubic Bézier curves we need a massive ",r.createElement("i",null,"3n-1")," points (and that's without double-counting points that are shared by consecutive cubic curves)."),r.createElement("p",null,'In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there\'s the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:'),r.createElement(i,{preset:"threepanel",title:"Catmull-Rom curve fitting",setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"As should be obvious by now, Catmull-Rom curves are great for \"fitting a curvature to some points\", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",style:{width:"20.77515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",style:{width:"14.99985rem",height:"2.7rem"}})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",style:{width:"39.07485rem",height:"1.125rem"}})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",style:{width:"6.9750000000000005rem",height:"2.7rem"}})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e940f26afcd5f80371b6b72a8f52e217da64721d.svg",style:{width:"16.50015rem",height:"13.275rem"}})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",style:{width:"18.225rem",height:"2.17485rem"}})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6e512d83529089b2294b45659b826bb24a598356.svg",style:{width:"29.025000000000002rem",height:"5.175rem"}})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d13ad085587983ba3fa6fe9051dcc2f6a3d0917c.svg",style:{width:"27.675rem",height:"9.525150000000002rem"}})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",style:{width:"18.225rem",height:"4.5rem"}})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points.  However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{
+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(0),i=n(4),a=new i,o="boundingbox",s=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:a.getTitle(o)}},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),e.setColor("red"),t.extrema().values.forEach(function(n){e.drawCircle(t.get(n),3)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(600,300),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/9)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points);var n=0|Math.round(this.points.length/2);this.knots[n+0]=this.knots[n],this.knots[n+1]=this.knots[n],this.knots[n+2]=this.knots[n];for(var r=n+3;r<this.knots.length;r++)this.knots[r]=this.knots[r-1]+1;this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(107),a=n(6),o=n(111),s=n(116),l=r.createClass({displayName:"BoundingBox",getDefaultProps:function(){return{title:"B-Splines"}},bindKnots:function(e,t,n){console.log("binding knots for "+n),this.refs[n].bindKnots(e,t)},bindWeights:function(e,t,n,r){this.refs[r].bindWeights(e,t,n)},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. Easily confused to mean Bézier splines, that's not actually what they are; they are \"basis function\" splines, which makes a lot of difference, which we'll be looking at in this section. We're not going to dive as deep into B-Splines as we have for Bézier curves (that would be an entire primer on its own) but we'll be looking at how B-Splines work, what kind of maths is involved in computing them, and how to draw them based on a number of parameters that you can pick for individual B-Splines."),r.createElement("p",null,"First off: B-Splines are ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Piecewise"},'"piecewise polynomial interpolation curves"'),', where the "single curve" is built by performing polynomial interpolation over a set of points, using a sliding window of a fixed number of points. For instance, a "cubic" B-Spline defined by twelve points will have its curve built by evaluating the polynomial interpolation of four points, and the curve can be treated as a lot of different sections, each controlled by four points at a time, such that the full curve consists of smoothly connected sections defined by points ',"{","1,2,3,4","}",", ","{","2,3,4,5","}",", ..., ","{","8,9,10,11","}",", and finally ","{","9,10,11,12","}",", for eight sections."),r.createElement("p",null,"What do they look like? They look like this! .. okay that's an empty graph, but simply click to place some point, with the stipulation that you need at least four point to see any curve. More than four points simply draws a longer B-Spline curve:"),r.createElement(i,{sketch:n(125)}),r.createElement("p",null,"The important part to notice here is that we are ",r.createElement("strong",null,"not"),' doing the same thing with B-Splines that we do for poly-Béziers or Catmull-Rom curves: both of the latter simply define new sections as literally "new sections based on new points", so a 12 point cubic poly-Bézier curve is actually impossible, because we start with a four point curve, and then add three more points for each section that follows, so we can only have 4, 7, 10, 13, 16, etc point Poly-Béziers. Similarly, while Catmull-Rom curves can grow by adding single points, this addition of a single point introduces three implicit Bézier points. Cubic B-Splines, on the other hand, are smooth interpolations of ',r.createElement("em",null,"each possible curve involving four consecutive points"),", such that at any point along the curve except for our start and end points, our on-curve coordinate is defined by four control points."),r.createElement("p",null,"Consider the difference to be this:"),r.createElement("ul",null,r.createElement("li",null,"for Bézier curves, the curve is defined as an interpolation of points, but:"),r.createElement("li",null,"for B-Splines, the curve is defined as an interpolation of ",r.createElement("em",null,"curves"),".")),r.createElement("p",null,"In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work."),r.createElement("h2",null,"How to compute a B-Spline curve: some maths"),r.createElement("p",null,"Given a B-Spline of degree ",r.createElement("code",null,"d")," and thus order ",r.createElement("code",null,"k=d+1")," (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and ",r.createElement("code",null,"n")," control points ",r.createElement("code",null,"P",r.createElement("sub",null,"0"))," through ",r.createElement("code",null,"P",r.createElement("sub",null,"n-1")),", we can compute a point on the curve for some value ",r.createElement("code",null,"t")," in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluting the following function:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/329da80e737b0005f4dbe4c84ff868bde5dfaee0.svg",style:{width:"11.775150000000002rem",height:"3.00015rem"}})),r.createElement("p",null,'Which, honestly, doesn\'t tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the ',r.createElement("em",null,"N(...)")," function, subscipted with an obvious parameter ",r.createElement("code",null,"i"),", which comes from our summation, and some magical parameter ",r.createElement("code",null,"k"),". So we need to know two things: 1. what does N(t) do, and 2. what is that ",r.createElement("code",null,"k"),"? Let's cover both, in reverse order."),r.createElement("p",null,"The parameter ",r.createElement("code",null,"k"),' represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or tops influencing the total curvature as a "knot on the curve". Doing so for a degree ',r.createElement("code",null,"d")," B-Spline with ",r.createElement("code",null,"n")," control point gives us ",r.createElement("code",null,"d + n + 1")," knots, defining ",r.createElement("code",null,"d + n")," intervals along the curve, and it is these intervals that the above ",r.createElement("code",null,"k")," subscript to the N() function applies to."),r.createElement("p",null,"Then the N() function itself. What does it look like?"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c10575fb591062784484357356796a4c0be4f83e.svg",style:{width:"38.39985rem",height:"3.15rem"}})),r.createElement("p",null,"So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where ",r.createElement("code",null,"i")," goes up, and ",r.createElement("code",null,"k")," goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following ",r.createElement("code",null,"i"),"/",r.createElement("code",null,"k")," values:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6664a4fc5832059bbc68eaa8068a4b2577e1d96a.svg",style:{width:"16.725150000000003rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And this function finally has a straight up evaluation: if a ",r.createElement("code",null,"t")," value lies within a knot-specific interval once we reach a ",r.createElement("code",null,"k=1"),' value, it "counts", otherwise it doesn\'t. We did cheat a little, though, because for all these values we need to scale our ',r.createElement("code",null,"t")," value first, so that it lies in the interval bounded by ",r.createElement("code",null,"knots[d]")," and ",r.createElement("code",null,"knots[n]"),", which are the start point and end point where curvature is controlled by exactly ",r.createElement("code",null,"order")," control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map ",r.createElement("code",null,"t")," from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead."),r.createElement("h2",null,"Can we simplify that?"),r.createElement("p",null,"We can, yes."),r.createElement("p",null,"People far smarter than us have looked at this work, and two in particular —",r.createElement("a",{href:"http://www.npl.co.uk/people/maurice-cox"},"Maurice Cox")," and ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Carl_R._de_Boor"},"Carl de Boor"),"— came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating ",r.createElement("em",null,"d(t)")," on a curve section between knots ",r.createElement("em",null,"i")," and ",r.createElement("em",null,"i+1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3780a420cd9b1bc59bec2c49bbd29f5e58497a3c.svg",style:{width:"18.75015rem",height:"1.27485rem"}})),"This is another recursive function, with ",r.createElement("em",null,"k")," values decreasing from the curve order to 1, and the value ",r.createElement("em",null,"α")," (alpha) defined by:",r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ba3b25cd54993b4601d8f415bc4cde73af4fc460.svg",style:{width:"17.325rem",height:"2.7rem"}})),r.createElement("p",null,'That looks complicated, but it\'s not. Computing alpha is just a fraction involving known, plain numbers and once we have our alpha value, computing (1-alpha) is literally just "computing one minus alpha". Computing this d() function is thus simply a matter of "computing simple arithmetics but with recursion", which might be computationally expensive because we\'re doing "a lot of" steps, but is also computationally cheap because each step only involves very simple maths. Of course as before the recursion has to stop:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1405067abebab73574934e3e69d7a7158106c744.svg",style:{width:"25.34985rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So, we see two stopping conditions: either ",r.createElement("code",null,"i")," becomes 0, in which case d() is zero, or ",r.createElement("code",null,"k"),' becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.'),r.createElement("p",null,"Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily: we just need to compute a triangle of interconnected values. For instance, d() for i=3, k=3 yields the following triangle:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a0a1069b001c75a1fab7f40ffa8bc403e1408f0d.svg",style:{width:"28.87515rem",height:"18.300150000000002rem"}})),r.createElement("p",null,"That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2): d(3,3) = a(3,3) x d(2,3) + (1-a(3,3)) x d(2,2)... and we simply keep expanding our triangle until we reach the terminating function parameters. Done deal!"),r.createElement("p",null,"One thing we need to keep in mind is that we're working with a spline that is contrained by its control points, so even though the ",r.createElement("code",null,"d(..., k)")," values are zero or one at the lowest level, they are really \"zero or one, times their respective control point\", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point: that's pretty essential!"),r.createElement("p",null,'If we run this computation "down", starting at d(3,3), then without special code in place we would be computing quite a few terms multiple times at each step. On the other hand, we can also start with that last "column", we can generate the terminating d() values first, then compute the a() constants, perform our multiplcations, generate the previous step\'s d() values, compute their a() constants, do the multiplications, etc. until we end up all the way back at the top. If we run our computation this way, we don\'t need any explicit caching, we can just "recycle" the list of numbers we start with and simply update them as we move up the triangle. So, let\'s implement that!'),r.createElement("h2",null,"Cool, cool... but I don't know what to do with that information"),r.createElement("p",null,"I know, this is pretty mathy, so let's have a look at what happens when we change parameters here. We can't change the maths for the interpolation functions, so that gives us only one way to control what happens here: the knot vector itself. As such, let's look at the graph that shows the interpolation functions for a cubic B-Spline with seven points with a uniform knot vector (so we see seven identical functions), representing how much each point (represented by one function each) influences the total curvature, given our knot values. And, because exploration is the key to discovery, let's make the knot vector a thing we can actually manipulate. Normally a proper knot vector has a constraint that any value is strictly equal to, or larger than the previous ones, but screw it this is programming, let's ignore that hard restriction and just mess with the knots however we like."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"interpolation-graph"}),r.createElement(i,{sketch:n(128),controller:function(t,n){return e.bindKnots(t,n,"interpolation-graph")}})),r.createElement("p",null,"Changing the values in the knot vector changes how much each point influences the total curvature (with some clever knot value manipulation, we can even make the influence of certain points disappear entirely!), so we can see that while the control points define the hull inside of which we're going to be drawing a curve, it is actually the knot vector that determines the actual ",r.createElement("em",null,"shape")," of the curve inside that hull."),r.createElement("p",null,"After reading the rest of this section you may want to come back here to try some specific knot vectors, and see if the resulting interpolation landscape makes sense given what you will now think should happen!"),r.createElement("h2",null,"Running the computation"),r.createElement("p",null,"Unlike the de Casteljau algorithm, where the ",r.createElement("code",null,"t")," value stays the same at every iteration, for B-Splines that is not the case, and so we end having to (for each point we evaluate) run a fairly involving bit of recursive computation. The algorithm is discussed on ",r.createElement("a",{href:"http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/de-Boor.html"},"this Michigan Tech")," page, but an easier to read version is implemented by ",r.createElement("a",{href:"https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71"},"b-spline.js"),", so we'll look at its code."),r.createElement("p",null,"Given an input value ",r.createElement("code",null,"t"),", we first map the input to a value from the domain [0,1] to the domain [knots[degree], knots[knots.length - 1 - degree]. Then, we find the section number ",r.createElement("code",null,"s")," that this mapped ",r.createElement("code",null,"t")," value lies on:"),r.createElement("pre",null,"\n        for(s=domain[0]; s < domain[1]; s++) {\n          if(knots[s] <= t && t <= knots[s+1]) break;\n        }"),r.createElement("p",null,"after running this code, ",r.createElement("code",null,"s")," is the index for the section the point will lie on. We then run the algorithm mentioned on the MU page (updated to use this description's variable names):"),r.createElement("pre",null,"\n        let v = copy of control points\n\n        for(let L = 1; L <= order; L++) {\n          for(let i=s; i > s + L - order; i--) {\n            let numerator = t - knots[i]\n            let denominator = knots[i - L + order] - knots[i]\n            let alpha = numerator / denominator\n            let v[i] = alpha * v[i] + (1-alpha) * v[i-1]\n          }\n        }"),r.createElement("p",null,'(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at ',r.createElement("code",null,"i=s")," at each level of the interpolation, and we stop when ",r.createElement("code",null,"i = s - order + level"),", so we always end up with a value for ",r.createElement("code",null,"i")," such that those ",r.createElement("code",null,"v[i-1]")," don't try to use an array index that doesn't exist)"),r.createElement("h2",null,"Open vs. closed paths"),r.createElement("p",null,"Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are ",r.createElement("em",null,"the same point"),". However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order ",r.createElement("code",null,"d")," B-Spline, we need to make the last ",r.createElement("code",null,"d")," point the same as the first ",r.createElement("code",null,"d")," points. And the easiest way to do this is to simply append ",r.createElement("code",null,"points.splice(0,d)")," to ",r.createElement("code",null,"points"),". Done!"),r.createElement("p",null,'Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for ',r.createElement("code",null,"points[0]")," and ",r.createElement("code",null,"points[n-k]")," etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects."),r.createElement("h2",null,"Manipulating the curve through the knot vector"),r.createElement("p",null,"The most important thing to understand when it comes to B-Splines is that they work ",r.createElement("em",null,"because"),' of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the ',r.createElement("em",null,"values")," that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:"),r.createElement("ol",null,r.createElement("li",null,"we can use a uniform knot vector, with equally spaced intervals,"),r.createElement("li",null,"we can use a non-uniform knot vector, without enforcing equally spaced internvals,"),r.createElement("li",null,'we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and'),r.createElement("li",null,"we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.")),r.createElement("h3",null,"Uniform B-Splines"),r.createElement("p",null,"The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines ",r.createElement("em",null,"the same intervals"),", or even [0,2,3,...,18,20,22], which also defines ",r.createElement("em",null,"the same intervals"),", just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature."),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i<r+1+n;i++)this.drawN(i,n,e,(this.width-e)/(2*(r+2)),this.height-2*e)},drawN:function(e,t,n,i,a){this.stroke(r[e]);this.knots;this.beginPath();for(var o=e-1,s=o,l=.1,u=e+t+1;s<u;s+=l){var c=n+e*i+s*i,h=this.height-n-this.N(e,t,s)*a;this.vertex(c,h)}this.endPath()},N:function(e,t,n){var r=this.knots[e],i=this.knots[e+1],a=this.knots[e+t-1],o=this.knots[e+t];if(1===t)return r<=n&&n<=i?1:0;var s=n-r,l=a-r,u=0===l?0:s/l,c=o-n,h=o-i,d=0===h?0:c/h,f=0;if(0!==u){var p=this.ensureN(e,t-1,n);f=void 0===p?this.N(e,t-1,n):p}var m=0;if(0!==d){var g=this.ensureN(e+1,t-1,n);m=void 0===g?this.N(e+1,t-1,n):g}return this.cacheN(e,t,n,u*f+d*m),this.cache.N[e][t][n]},ensureN:function(e,t,n){this.cache.N||(this.cache.N=[]);var r=this.cache.N;return r[e]||(r[e]=[]),r[e][t]||(r[e][t]=[]),r[e][t][n]},cacheN:function(e,t,n,r){this.ensureN(e,t,n),this.cache.N[e][t][n]=r}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points,!0),this.props.controller&&this.props.controller(this,this.knots),this.draw()},
+draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,weights:[],setup:function(){this.size(400,400);for(var e=2*Math.PI,t=this.width/3,n=0;n<6;n++)this.points.push({x:this.width/2+t*Math.cos(n/6*e),y:this.height/2+t*Math.sin(n/6*e)});this.points=this.points.concat(this.points.slice(0,3)),this.closed=this.degree,this.knots=this.formKnots(this.points),this.weights=this.formWeights(this.points),this.props.controller&&this.props.controller(this,this.knots,this.weights,this.closed),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";e.exports={degree:3,activeDistance:9,setup:function(){this.size(400,400);for(var e=2*Math.PI,t=0;t<e;t+=e/10)this.points.push({x:this.width/2+100*Math.cos(t),y:this.height/2+100*Math.sin(t)});this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){var e=this;this.clear(),this.grid(25);var t=this.points[0];this.points.forEach(function(n){e.stroke(200),e.line(n.x,n.y,t.x,t.y),t=n,e.stroke(0),e.circle(t.x,t.y,4)}),this.drawSplineData()},drawSplineData:function(){if(!(this.points.length<=this.degree)){var e=this.points.map(function(e){return[e.x,e.y]});this.drawCurve(e),this.drawKnots(e)}}}},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="canonical",s=r.createClass({displayName:"Canonical",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(6),a=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:"Bézier curves and Catmull-Rom curves"}},render:function(){return r.createElement("section",null,r.createElement(i,this.props),r.createElement("p",null,"Taking an excursion to different splines, the other common design curve is the ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline"},"Catmull-Rom spline"),". Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one into the other, and back, with some simple substitutions?"),r.createElement("p",null,'Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, except the first and last, which makes sense if you read the "natural language" description for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point P',r.createElement("sub",null,"x"),", has a tangent along the line P",r.createElement("sub",null,"x-1")," to P",r.createElement("sub",null,"x+1"),". The curve runs from points P",r.createElement("sub",null,"2")," to  P",r.createElement("sub",null,"n-1"),', and has a "tension" that determines how fast the curve passes through each point. The lower the tension, the faster the curve goes through each point, and the bigger its local tangent is.'),r.createElement("p",null,"I'll be showing the conversion to and from Catmull-Rom curves for the tension that the Processing language uses for its Catmull-Rom algorithm."),r.createElement("p",null,"We start with showing the Catmull-Rom matrix form:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5fc1c44e623f2a9fbeefdaa204557479e3debf5a.svg",style:{width:"30.150000000000002rem",height:"5.70015rem"}})),r.createElement("p",null,"However, there's something funny going on here: the coordinate column matrix looks weird. The reason is that Catmull-Rom curves are actually curve segments that are described by two points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead, this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1 with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate 4). So if we want to express this as a matrix form based on four coordinates, we get this representation instead:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/40b9ca9b5755a4be49517ddfa630fef7b8e23067.svg",style:{width:"29.475rem",height:"6.525rem"}})),r.createElement("div",{className:"note"},r.createElement("h2",null,"Where did that 2 come from?"),r.createElement("p",null,"Catmull-Rom splines are based on the concept of tension: the higher the tensions, the shorter the tangents at the departure and arrival points. The basic Catmull-Rom curve arrives and departs with tangents equal to half the distance between the two adjacent points, so that's where that 2 came from."),r.createElement("p",null,'However, the "real" matrix is this:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7bf9b5e971866babedd991ccdde5c4ab104297e5.svg",style:{width:"24.75rem",height:"6.60015rem"}})),r.createElement("p",null,"This bakes in the tension factor τ explicitly.")),r.createElement("p",null,'Plugging this into the "two coordinates and two tangent vectors" matrix form, we get:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4818f8797c35f23c2b9883aa986b1129b2fa151a.svg",style:{width:"21.45015rem",height:"5.70015rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/08f77989369f664cbc0fb7526791efd4c5299d70.svg",style:{width:"35.47485rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7ae769c5370469b16523bab6f34abf0dd6749be.svg",style:{width:"28.425150000000002rem",height:"5.54985rem"}})),r.createElement("p",null,"So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/7250f1c57e2bd66ec4349e4e88db4d5d74401a06.svg",style:{width:"50.85rem",height:"5.54985rem"}})),r.createElement("p",null,"The difference is somewhere in the actual hermite matrix, since the ",r.createElement("em",null,"t")," and coordinate values are identical, so let's solve that matrix equasion:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8a42b24fca3aaf6b8ec08e84b7e91c43e26e8acf.svg",style:{width:"28.575rem",height:"5.54985rem"}})),r.createElement("p",null,"We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the Bézier matrix on the right side of the equals sign:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e111d6e846f4d7204dec484005f74993e66c6c9.svg",style:{width:"58.19985rem",height:"5.70015rem"}})),r.createElement("p",null,"Which gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f94b80113772d90a4fbc93d4495cb5767e5c8123.svg",style:{width:"12.6rem",height:"5.47515rem"}})),r.createElement("p",null,"Multiplying this ",r.createElement("strong",null,r.createElement("em",null,"A"))," with our coordinates will give us a proper Bézier matrix expression again:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d088274e440ceeac2916a0f32176682d776c1c57.svg",style:{width:"31.725rem",height:"5.47515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9e68f80b270d3445d9f9cb28ff2c5aed219aa9d2.svg",style:{width:"25.650000000000002rem",height:"6.60015rem"}})),r.createElement("p",null,"So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning the Catmull-Rom coordinates on the left into the Bézier coordinates on the right (with τ being our tension factor):"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f0c5a707b590eaf8899a927ce39fd186a6acecf3.svg",style:{width:"18.07515rem",height:"6.67485rem"}})),r.createElement("p",null,"And the other way around, a Bézier to Catmull-Rom conversion requires turning the Bézier coordinates on the left this time into the Catmull-Rom coordinates on the right. Note that there is no tension this time, because Bézier curves don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension Catmull-Rom curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/51da95daf2645abd9903a4e28749a6d01826625c.svg",style:{width:"21.150000000000002rem",height:"5.625rem"}})),r.createElement("p",null,"Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom splines, the choice mostly being which drawing algorithms we have natively available."))}});e.exports=a},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Creating a Catmull-Rom curve from three points"}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?"),r.createElement("p",null,"As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve."),r.createElement("p",null,"Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of ",r.createElement("i",null,"n")," points, in order to draw the equivalent curve using cubic Bézier curves we need a massive ",r.createElement("i",null,"3n-1")," points (and that's without double-counting points that are shared by consecutive cubic curves)."),r.createElement("p",null,'In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there\'s the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:'),r.createElement(i,{preset:"threepanel",title:"Catmull-Rom curve fitting",setup:this.setup,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"As should be obvious by now, Catmull-Rom curves are great for \"fitting a curvature to some points\", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",style:{width:"20.77515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",style:{width:"14.99985rem",height:"2.7rem"}})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",style:{width:"39.07485rem",height:"1.125rem"}})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",style:{width:"6.9750000000000005rem",height:"2.7rem"}})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e940f26afcd5f80371b6b72a8f52e217da64721d.svg",style:{width:"16.50015rem",height:"13.275rem"}})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",style:{width:"18.225rem",height:"2.17485rem"}})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/6e512d83529089b2294b45659b826bb24a598356.svg",style:{width:"29.025000000000002rem",height:"5.175rem"}})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d13ad085587983ba3fa6fe9051dcc2f6a3d0917c.svg",style:{width:"27.675rem",height:"9.525150000000002rem"}})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",style:{width:"18.225rem",height:"4.5rem"}})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points.  However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{
 preset:"arcfitting",title:"Cubic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,'We see two curves here; in blue, our "guessed" curve and its control points, and in grey/black, the true curve fit, with proper control points that were shifted in, along line between our guessed control points, such that the derivatives at the start and end points are correct.'),r.createElement("p",null,'We can already seethat cubic curves are a lot better than quadratic curves, and don\'t look all that wrong until we go well past a quarter circle; ⅜th starts to hint at problems, and half a circle has an obvious "gap" between the real circle and the cubic approximation. Anything past that just looks plain ridiculous... but quarter curves actually look pretty okay!'),r.createElement("p",null,'So, maths time again: how okay is "okay"? Let\'s apply some more maths to find out.'),r.createElement("p",null,"Unlike for the quadratic curve, we can't use ",r.createElement("i",null,"t=0.5")," as our reference point because by its very nature it's one of the three points that are actually guaranteed to lie on the circular curve. Instead, we need a different ",r.createElement("i",null,"t")," value. If we run some analysis on the curve we find that the actual ",r.createElement("i",null,"t"),' value at which the curve is furthest from what it should be is 0.211325 (rounded), but we don\'t know "why", since finding this value involves root-finding, and is nearly impossible to do symbolically without pages and pages of math just to express one of the possible solutions.'),r.createElement("p",null,"So instead of walking you through the derivation for that value, let's simply take that ",r.createElement("i",null,"t")," value and see what the error is for circular arcs with an angle ranging from 0 to 2π:"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-2pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ 2π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:"))))),r.createElement("p",null,"We see that cubic Bézier curves are much better when it comes to approximating circular arcs, with an error of less than 0.027 at the two \"bulge\" points for a quarter circle (which had an error of 0.06 for quadratic curves at the mid point), and an error near 0.001 for an eighth of a circle, so we're getting less than half the error for a quarter circle, or: at a slightly lower error, we're getting twice the arc. This makes cubic curves quite useful!"),r.createElement("p",null,'In fact, the precision of a cubic curve at a quarter circle is considered "good enough" by so many people that it\'s generally considered "just fine" to use four cubic Bézier curves to fake a full circle when no circle primitives are available; generally, people won\'t notice that it\'s not a real circle unless you also happen to overlay an actual circle, so that the difference becomes obvious.'),r.createElement("p",null,'So with the error analysis out of the way, how do we actually compute the coordinates needed to get that "true fit" cubic curve? The first observation is that we already know the start and end points, because they\'re the same as for the quadratic attempt:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",style:{width:"13.275rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"But we now need to find two control points, rather than one. If we want the derivatives at the start and end point to match the circle, then the first control point can only lie somewhere on the vertical line through S, and the second control point can only lie somewhere on the line tangent to point E, which means:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4df65dae78bc5a0e6c5f23a2faae9a9d7a8b39b3.svg",style:{width:"8.325000000000001rem",height:"2.55015rem"}})),r.createElement("p",null,'where "a" is some scaling factor, and:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cb32f8f9c3ae2b264a48003c237a798d02dc8935.svg",style:{width:"11.62485rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,'where "b" is also some scaling factor.'),r.createElement("p",null,"Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonoetric identities, so if you just want to see the final result just skip past the next section!"),r.createElement("div",{className:"note"},r.createElement("h2",null,"Let's do this thing."),r.createElement("p",null,"Unlike for the quadratic case, we need some more information in order to compute ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),", since they're no longer dependent variables. First, we observe that the curve is symmetrical, so whatever values we end up finding for C",r.createElement("sub",null,"1")," will apply to C",r.createElement("sub",null,"2")," as well (rotated along its tangent), so we'll focus on finding the location of C",r.createElement("sub",null,"1")," only. So here's where we do something that you might not expect: we're going to ignore for a moment, because we're going to have a much easier time if we just solve this problem with geometry first, then move to calculus to solve a much simpler problem."),r.createElement("p",null,"If we look at the triangle that is formed between our starting point, or initial guess C",r.createElement("sub",null,"1"),"and our real C",r.createElement("sub",null,"1"),", there's something funny going on: if we treat the line ","{","start,guess","}"," as our opposite side, the line ","{","guess,real","}"," as our adjacent side, with ","{","start,real","}"," our hypothenuse, then the angle for the corner hypothenuse/adjacent is half that of the arc we're covering. Try it: if you place the end point at a quarter circle (pi/2, or 90 degrees), the angle in our triangle is half a quarter (pi/4, or 45 degrees). With that knowledge, and a knowledge of what the length of any of our lines segments are (as a function), we can determine where our control points are, and thus have everything we need to find the error distance function. Of the three lines, the one we can easiest determine is ","{","start,guess","}",", so let's find out what the guessed control point is. Again geometrically, because we have the benefit of an on-curve ",r.createElement("i",null,"t=0.5")," value."),r.createElement("p",null,"The distance from our guessed point to the start point is exactly the same as the projection distance we looked at earlier. Using ",r.createElement("i",null,"t=0.5"),' as our point "B" in the "A,B,C" projection, then we know the length of the line segment ',"{","C,A","}",", since it's d",r.createElement("sub",null,"1")," = ","{","A,B","}"," + d",r.createElement("sub",null,"2")," = ","{","B,C","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b15a274c1e0a6aeeaf517b5d2c8ee0a7997dd617.svg",style:{width:"27.675rem",height:"2.32515rem"}})),r.createElement("p",null,"So that just leaves us to find the distance from ",r.createElement("i",null,"t=0.5")," to the baseline for an arbitrary angle φ, which is the distance from the centre of the circle to our ",r.createElement("i",null,"t=0.5")," point, minus the distance from the centre to the line that runs from start point to end point. The first is the same as the point P we found for the quadratic curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",style:{width:"13.350150000000001rem",height:"2.025rem"}})),r.createElement("p",null,"And the distance from the origin to the line start/end is another application of angles, since the triangle ","{","origin,start,C","}"," has known angles, and two known sides. We can find the length of the line ","{","origin,C","}",", which lets us trivially compute the coordinate for C:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9be55fb38d5d30bbc6c7140afb1c7bc097bc044e.svg",style:{width:"18.675rem",height:"5.3248500000000005rem"}})),r.createElement("p",null,"With the coordinate C, and knowledge of coordinate B, we can determine coordinate A, and get a vector that is identical to the vector ","{","start,guess","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/262f2eca63105779f30a0a5445cf76f60786039a.svg",style:{width:"27.675rem",height:"3.67515rem"}})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e83ebbac13a84ef6036bf4be57b3d1b6cb316f8.svg",style:{width:"14.99985rem",height:"3.29985rem"}})),r.createElement("p",null,"Which means we can now determine the distance ","{","start,guessed","}",", which is the same as the distance","{","C,A","}",", and use that to determine the vertical distance from our start point to our C",r.createElement("sub",null,"1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c87e454fb11ef7f15c7386e83ca1ce41a004d8a7.svg",style:{width:"17.850150000000003rem",height:"4.64985rem"}})),r.createElement("p",null,"And after this tedious detour to find the coordinate for C",r.createElement("sub",null,"1"),", we can find C",r.createElement("sub",null,"2")," fairly simply, since it's lies at distance -C",r.createElement("sub",null,"1y")," along the end point's tangent:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/25f027074b6af8ca7b640e27636e3bf89c28afdb.svg",style:{width:"36.675000000000004rem",height:"6.89985rem"}})),r.createElement("p",null,"And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.")),r.createElement("p",null,"So, to recap, given an angle φ, the new control coordinates are:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c4d82e44d1c67dda8ba26aa6da0f406d05eba618.svg",style:{width:"15.075000000000001rem",height:"2.55015rem"}})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3a4b1ee00eebb7697e5513ef9df673928913252e.svg",style:{width:"23.02515rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,'And, because the "quarter curve" special case comes up so incredibly often, let\'s look at what these new control points mean for the curve coordinates of a quarter curve, by simply filling in φ = π/2:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/63e0936b4849d4cdbb9a2e0909181259be951e4d.svg",style:{width:"28.65015rem",height:"1.94985rem"}})),r.createElement("p",null,"Which, in decimal values, rounded to six significant digits, is:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fd12e65204a31319b66355c6ff99e6b3d9603b05.svg",style:{width:"28.65015rem",height:"1.125rem"}})),r.createElement("p",null,"Of course, this is for a circle with radius 1, so if you have a different radius circle, simply multiply the coordinate by the radius you need. And then finally, forming a full curve is now a simple a matter of mirroring these coordinates about the origin:"),r.createElement(i,{preset:"simple",title:"Cubic Bézier circle approximation",draw:this.drawCircle,static:!0}))}});e.exports=u},function(e,t,n){"use strict";var r=n(0),i={width:"calc(960px + 2em)",marginTop:0,borderTop:"1px solid rgba(255, 0, 0, 0.5)",paddingTop:"3em"},a=r.createElement("section",{id:"comments",style:i},r.createElement("h2",null,"Comments and questions"),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",{className:"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!"),r.createElement("div",{id:"disqus_thread"})),o=r.createClass({displayName:"CommentsAndQuestions",getDefaultProps:function(){return{title:"Comments and Questions"}},componentDidMount:function(){if("undefined"!=typeof document){var e=document.createElement("script");e.setAttribute("async","async"),e.src="lib/site/disqus.js",document.head.appendChild(e)}},render:function(){return a}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="components",s=r.createClass({displayName:"Components",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="control",s=r.createClass({displayName:"Control",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"CurveIntersections",getDefaultProps:function(){return{title:"Curve/curve intersection"}},setup:function(e){this.api=e,e.setPanelCount(3);var t=new e.Bezier(10,100,90,30,40,140,220,220),n=new e.Bezier(5,150,180,20,80,250,210,190);e.setCurve(t,n),this.pairReset()},pairReset:function(){this.prevstep=0,this.step=0},draw:function(e,t){var n=this;e.reset();var r={x:0,y:0};t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var i=e.getPanelWidth(),a=e.getPanelHeight();if(r.x+=i,e.drawLine({x:0,y:0},{x:0,y:a},r),0===this.step&&(this.pairs=[{c1:t[0],c2:t[1]}]),this.step!==this.prevstep){var s=this.pairs;this.pairs=[],this.finals=[],s.forEach(function(t){if(t.c1.length()<.6&&t.c2.length()<.6)return n.finals.push(t);var i=t.c1.split(.5);e.setColor("black"),e.drawCurve(t.c1,r),e.setColor("red"),e.drawbbox(i.left.bbox(),r),e.drawbbox(i.right.bbox(),r);var a=t.c2.split(.5);e.setColor("black"),e.drawCurve(t.c2,r),e.setColor("blue"),e.drawbbox(a.left.bbox(),r),e.drawbbox(a.right.bbox(),r),i.left.overlaps(a.left)&&n.pairs.push({c1:i.left,c2:a.left}),i.left.overlaps(a.right)&&n.pairs.push({c1:i.left,c2:a.right}),i.right.overlaps(a.left)&&n.pairs.push({c1:i.right,c2:a.left}),i.right.overlaps(a.right)&&n.pairs.push({c1:i.right,c2:a.right})}),this.prevstep=this.step}else this.pairs.forEach(function(t){e.setColor("black"),e.drawCurve(t.c1,r),e.drawCurve(t.c2,r),e.setColor("red"),e.drawbbox(t.c1.bbox(),r),e.setColor("blue"),e.drawbbox(t.c2.bbox(),r)});0===this.pairs.length&&(this.pairReset(),this.draw(e,t)),r.x+=i,e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:a},r);var l,u,c=t[0].intersects(t[1]).map(function(e){var t=e.split("/").map(function(e){return parseFloat(e)});return{t1:t[0],t2:t[1]}}),h=c[0],d=function(e,t){return o(e.t1-t.t1)<.01&&o(e.t2-t.t2)<.01};for(u=1;u<c.length;u++)l=c[u],d(h,l)?c.splice(u--,1):h=l;e.setColor("lightblue"),e.drawCurve(t[0],r),e.drawCurve(t[1],r),e.setColor("blue"),c.forEach(function(n){e.drawCircle(t[0].get(n.t1),3,r)})},stepUp:function(){this.step++,this.api.redraw()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Using de Casteljau\'s algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and conquer" technique:'),r.createElement("ul",null,r.createElement("li",null,"Take two curves ",r.createElement("i",null,"C",r.createElement("sub",null,"1"))," and ",r.createElement("i",null,"C",r.createElement("sub",null,"2")),", and treat them as a pair."),r.createElement("li",null,"If their bounding boxes overlap, split up each curve into two sub-curves"),r.createElement("li",null,"With ",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"2.1"))," and ",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),", form four new pairs (",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.1")),"), (",r.createElement("i",null,"C",r.createElement("sub",null,"1.1")),", ",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),"), (",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.1")),"), and (",r.createElement("i",null,"C",r.createElement("sub",null,"1.2")),",",r.createElement("i",null,"C",r.createElement("sub",null,"2.2")),")."),r.createElement("li",null,"For each pair, check whether their bounding boxes overlap.",r.createElement("ul",null,r.createElement("li",null,"If their bounding boxes do not overlap, discard the pair, as there is no intersection between this pair of curves."),r.createElement("li",null,"If there ",r.createElement("em",null,"is")," overlap, rerun all steps for this pair."))),r.createElement("li",null,"Once the sub-curves we form are so small that they effectively occupy sub-pixel areas, we consider an intersection found.")),r.createElement("p",null,'This algorithm will start with a single pair, "balloon" until it runs in parallel for a large number of potential sub-pairs, and then taper back down as it homes in on intersection coordinates, ending up with as many pairs as there are intersections.'),r.createElement("p",null,"The following graphic applies this algorithm to a pair of cubic curves, one step at a time, so you can see the algorithm in action. Click the button to run a single step in the algorithm, after setting up your curves in some creative arrangement. The algorithm resets once it's found a solution, so you can try this with lots of different curves (can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)"),r.createElement(i,{preset:"clipping",title:"Curve/curve intersections",setup:this.setup,draw:this.draw},r.createElement("button",{onClick:this.stepUp},"advance one step")),r.createElement("p",null,"Self-intersection is dealt with in the same way, except we turn a curve into two or more curves first based on the inflection points. We then form all possible curve pairs with the resultant segments, and run exactly the same algorithm. All non-overlapping curve pairs will be removed after the first iteration, and the remaining steps home in on the curve's self-intersection points."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="decasteljau",s=r.createClass({displayName:"deCasteljau",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="derivatives",s=r.createClass({displayName:"Derivatives",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="explanation",l=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:o.getTitle(s)}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="extended",s=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="extremities",s=r.createClass({displayName:"Extremities",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="flattening",s=n(15),l=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:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"GraduatedOffsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Graduated curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("blue");var n=t.outline(0,0,e.distance,e.distance);n.curves.forEach(function(t){return e.drawCurve(t)})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"What if we want to do graduated offsetting, starting at some distance ",r.createElement("i",null,"s")," but ending at some other distance ",r.createElement("i",null,"e"),'? well, if we can compute the length of a curve (which we can if we use the Legendre-Gauss quadrature approach) then we can also determine how far "along the line" any point on the curve is. With that knowledge, we can offset a curve so that its offset curve is not uniformly wide, but graduated between with two different offset widths at the start and end.'),r.createElement("p",null,'Like normal offsetting we cut up our curve in sub-curves, and then check at which distance along the original curve each sub-curve starts and ends, as well as to which point on the curve each of the control points map. This gives us the distance-along-the-curve for each interesting point in the sub-curve. If we call the total length of all sub-curves seen prior to seeing "the\\ current" sub-curve ',r.createElement("i",null,"S")," (and if the current sub-curve is the first one, ",r.createElement("i",null,"S")," is zero), and we call the full length of our original curve ",r.createElement("i",null,"L"),", then we get the following graduation values:"),r.createElement("ul",null,r.createElement("li",null,"start: map ",r.createElement("i",null,"S")," from interval (",r.createElement("i",null,"0,L"),") to interval ",r.createElement("i",null,"(s,e)")),r.createElement("li",null,"c1: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d1"),", 0,L, s,e)"),", d1 = distance along curve to projection of c1"),r.createElement("li",null,"c2: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d2"),", 0,L, s,e)"),", d2 = distance along curve to projection of c2"),r.createElement("li",null,"..."),r.createElement("li",null,"end: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+length(subcurve)"),", 0,L, s,e)"))),r.createElement("p",null,"At each of the relevant points (start, end, and the projections of the control points onto the curve) we know the curve's normal, so offsetting is simply a matter of taking our original point, and moving it along the normal vector by the offset distance for each point. Doing so will give us the following result (these have with a starting width of 0, and an end width of 40 pixels, but can be controlled with your up and down arrow keys):"),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="inflections",s=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:a.getTitle(o)}},setupCubic:function(e){var t=new e.Bezier(135,25,25,135,215,75,215,240);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("red"),t.inflections().forEach(function(n){e.drawCircle(t.get(n),5)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),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",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"Curve/curve intersection, however, is more complicated. Since we have no straight line to align to, we can't simply align one of the curves and be left with a simple procedure. Instead, we'll need to apply two techniques we've not covered yet: de Casteljau's algorithm, and curve splitting."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:"Manipulating a curve"}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,s=o(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=s}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,s=i+a,l=s-1,u=o(l/s),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the ',r.createElement("em",null,"t"),'-value matching that coordinate, and then letting them drag that point around. With every drag update we\'ll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.'),r.createElement(i,{preset:"moulding",title:"Moulding a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markQB,onMouseDrag:this.dragQB,onMouseUp:this.saveCurve}),r.createElement("p",null,r.createElement("strong",null,"Click-dragging the curve itself")," shows what we're using to compute the new coordinates: while dragging you will see the original points B and its corresponding ",r.createElement("i",null,"t"),"-value, the original point C for that ",r.createElement("i",null,"t"),"-value, as well as the new point B' based on the mouse cursor. Since we know the ",r.createElement("i",null,"t"),"-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e361e1235c94bbe87e95834c7fcfb6ab96e028b9.svg",style:{width:"15.600150000000001rem",height:"2.3998500000000003rem"}})),r.createElement("p",null,"For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:"),r.createElement(i,{preset:"moulding",title:"Moulding a cubic Bézier curve",setup:this.setupCubic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markCB,onMouseDrag:this.dragCB,onMouseUp:this.saveCurve}),r.createElement("p",null,"To help understand what's going on, the cubic graphic shows the full de Casteljau construction \"hull\" when repositioning point B. We compute A` in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance ",r.createElement("i",null,"t"),", because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy."),r.createElement("p",null,"First, we construct the one-level-of-de-Casteljau-up points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f813a7d607787329d242bfbfa28570c88c3e30f5.svg",style:{width:"9.975150000000001rem",height:"5.09985rem"}})),r.createElement("p",null,"And then we can compute the new control points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4ec5f4148752a3d332a922048700d2c71918342f.svg",style:{width:"11.700000000000001rem",height:"4.64985rem"}})),r.createElement("p",null,"And that's cubic curve manipulation."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",style:{width:"7.275150000000001rem",height:"1.125rem"}})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",style:{width:"10.125rem",height:"1.125rem"}})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/664fba98ea17b358941b579115bf063edf87ae17.svg",style:{width:"9.450000000000001rem",height:"3.15rem"}})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",style:{width:"12.45015rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",style:{width:"15.150150000000002rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:"Creating a curve from three points"}},setup:function(e){e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}]},onClick:function(e,t){3==t.lpts.length&&(t.lpts=[]),t.lpts.push({x:e.offsetX,y:e.offsetY}),t.redraw()},getQRatio:function(e){var t=2*e,n=t*e-t,r=n+1;return o(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return o(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},y={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},w={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(y.x-r.x),y:r.y+2*(y.y-r.y)},_={x:i.x+2*(w.x-i.x),y:i.y+2*(w.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,y),e.drawLine(l,w),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, unlike circle-fitting, which requires just three points, Bézier curve fitting requires three points, as well as a ",r.createElement("i",null,"t")," value, so we can figure out where point 'C' needs to be."),r.createElement("p",null,"The following graphic lets you place three points, and will use the preceding sections on the ABC ratio and curve construction to form a quadratic curve through them. You can move the points you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks. (There's some freedom here, so for illustrative purposes we clamped ",r.createElement("i",null,"t")," to simply be 0.5, lets us bypass some maths, since a ",r.createElement("i",null,"t")," value of 0.5 always puts C in the middle of the start--end line segment)"),r.createElement(i,{preset:"generate",title:"Fitting a quadratic Bézier curve",setup:this.setup,draw:this.drawQuadratic,onClick:this.onClick}),r.createElement("p",null,'For cubic curves we also need some values to construct the "de Casteljau line through B" with, and that gives us quite a bit of choice. Since we\'ve clamped ',r.createElement("i",null,"t"),' to 0.5, we\'ll set up a line through B parallel to the line start--end, with a length that is proportional to the length of the line B--C: the further away from the baseline B is, the wider its construction line will be, and so the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to scale the length of the construction line as we move B closer or further away from the baseline, so I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end) forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too, and if the points lie on a line, then the curve constructed has the control points very close to B, while still lying between B and the correct curve end point:'),r.createElement(i,{preset:"generate",title:"Fitting a cubic Bézier curve",setup:this.setup,draw:this.drawCubic,onClick:this.onClick}),r.createElement("p",null,'In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which ',r.createElement("i",null,"t")," value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination of ",r.createElement("i",null,"t"),' and tangent values that lead to a more "æsthetic" curve, but this will be left as an exercise to the reader, since there are many, and æsthetics are often quite personal.'))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);
-e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",style:{width:"8.400150000000002rem",height:"1.27485rem"}})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",style:{width:"21.97485rem",height:"2.7rem"}})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r<a;r++)i=n(e[r],t),i<o&&(s=r,o=i);return s/(a-1)},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.mousePt){e.setColor("red"),e.setFill("red"),e.drawCircle(e.mousePt,3);var n=this.findClosest(e._lut,e.mousePt,e.utils.dist),r=t.get(n);e.drawLine(r,e.mousePt),e.drawCircle(r,3),e.text("t = "+e.utils.round(n,2),r,{x:10,y:3})}},onMouseMove:function(e,t){t.mousePt={x:e.offsetX,y:e.offsetY},t._lut=t.curve.getLUT()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Say we have a Bézier curve and some point, not on the curve, of which we want to know which ",r.createElement("i",null,"t")," value on the curve gives us an on-curve point closest to our off-curve point. Or: say we want to find the projection of a random point onto a curve. How do we do that?"),r.createElement("p",null,"If the Bézier curve is of low enough order, we might be able to ",r.createElement("a",{href:"http://jazzros.blogspot.ca/2011/03/projecting-point-on-bezier-curve.html"},"work out the maths for how to do this"),", and get a perfect ",r.createElement("i",null,"t")," value back, but in general this is an incredibly hard problem and the easiest solution is, really, a numerical approach again. We'll be finding our ideal ",r.createElement("i",null,"t")," value using a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"binary search"),". First, we do a coarse distance-check based on ",r.createElement("i",null,"t"),' values associated with the curve\'s "to draw" coordinates (using a lookup table, or LUT). This is pretty fast. Then we run this algorithm:'),r.createElement("ol",null,r.createElement("li",null,"with the ",r.createElement("i",null,"t")," value we found, start with some small interval around ",r.createElement("i",null,"t")," (1/length_of_LUT on either side is a reasonable start),"),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is larger than the distance to ",r.createElement("i",null,"t"),", try again with the interval reduced to half its original length."),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is smaller than the distance to ",r.createElement("i",null,"t"),", replace ",r.createElement("i",null,"t")," with the smaller-distance value."),r.createElement("li",null,"after reducing the interval, or changing ",r.createElement("i",null,"t"),", go back to step 1.")),r.createElement("p",null,"We keep repeating this process until the interval is small enough to claim the difference in precision found is irrelevant for the purpose we're trying to find ",r.createElement("i",null,"t")," for. In this case, I'm arbitrarily fixing it at 0.0001."),r.createElement("p",null,'The following graphic demonstrates the result of this procedure.Simply move the cursor around, and if it does not lie on top of the curve, you will see a line that projects the cursor onto the curve based on an iteratively found "ideal" ',r.createElement("i",null,"t")," value."),r.createElement(i,{preset:"simple",title:"Projecting a point onto a Bézier curve",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="reordering",l=r.createClass({displayName:"Reordering",getDefaultProps:function(){return{title:o.getTitle(s)}},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(l.lower(e.curve))}}}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=["unite","intersect","exclude","subtract"],s=r.createClass({displayName:"Shapes",getDefaultProps:function(){return{title:"Boolean shape operations"}},getInitialState:function(){return{mode:o[0]}},setMode:function(e){this.setState({mode:e})},formPath:function(e,t,n,r,i){t=t||0,n=n||0;var a=30,o=a/2;r=r||8*a,i=i||4*a;var s=r/2,l=i/2,u=s/3,c=l/3,h=e.Paper,d=h.Path,f=h.Point,p=new d;return p.moveTo(new f(t-s+2*a,n-l)),p.cubicCurveTo(new f(t-s+o,n-l+o),new f(t-s+o,n+l-o),new f(t-s+2*a,n+l)),p.cubicCurveTo(new f(t-u,n+c),new f(t+u,n+c),new f(t+s-2*a,n+l)),p.cubicCurveTo(new f(t+s-o,n+l-o),new f(t+s-o,n-l+o),new f(t+s-2*a,n-l)),p.cubicCurveTo(new f(t+u,n-c),new f(t-u,n-c),new f(t-s+2*a,n-l)),p.closePath(!0),p.strokeColor="rgb(100,100,255)",p},setup:function(e){var t=e.getPanelWidth(),n=40,r=t/2,i=t/2;e.c1=this.formPath(e,r,i),r+=n,i+=n,e.c2=this.formPath(e,r,i),this.state.mode=o[0]},onMouseMove:function(e,t){var n=e.offsetX,r=e.offsetY;t.c2.position={x:n,y:r}},draw:function(e){e.c3&&e.c3.remove();var t=e.c1,n=e.c2,r=t[this.state.mode].bind(t),i=e.c3=r(n);i.strokeColor="red",i.fillColor="rgba(255,100,100,0.4)",e.Paper.view.draw()},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or exclusion, between two or more shapes that involve Bézier curves. For simplicity (well.. sort of, more homogeneity), we'll be looking at Poly-Bézier shapes only, but a shape that consists of a mix of lines and Bézier curves is technically a simplification (although it does mean we need to write a definition for the class of shapes that mix lines and Bézier curves. Since poly-Bézier curves are a superset, we'll be using those in the following examples)"),r.createElement("p",null,"The procedure for performing boolean operations consists, broadly, of four steps:"),r.createElement("ol",null,r.createElement("li",null,"Find the intersection points between both shapes,"),r.createElement("li",null,"cut up the shapes into multiple sections between these intersections,"),r.createElement("li",null,"discard any section that isn't part of the desired operation's resultant shape, and"),r.createElement("li",null,"link up the remaining sections to form the new shape.")),r.createElement("p",null,"Finding all intersections between two poly-Bézier curves, or any poly-line-section shape, is similar to the iterative algorithm discussed in the section on curve/curve intersection. For each segment in the poly-Bézier curve we check whether its bounding box overlaps with any of the segment bounding boxes in the other poly-Bézier curve. If so, we run normal intersection detection."),r.createElement("p",null,"After we found all intersection points, we split up our poly-Bézier curves, making sure to record which of the newly formed poly-Bézier curves might potentially link up at the points we split the originals up at. This will let us quickly glue poly-Bézier curves back together after the next step."),r.createElement("p",null,"Once we have all the new poly-Bézier curves, we run the first step of the desired boolean operation."),r.createElement("ul",null,r.createElement("li",null,'Union: discard all poly-Bézier curves that lie "inside" our union of our shapes. E.g. if we want the union of two overlapping circles, the resulting shape is the outline.'),r.createElement("li",null,'Intersection: discard all poly-Bézier curves that lie "outside" the intersection of the two shapes. E.g. if we want the intersection of two overlapping circles, the resulting shape is the tapered ellipse where they overlap.'),r.createElement("li",null,"Exclusion: none of the sections are discarded, but we will need to link the shapes back up in a special way. Flip any section that would qualify for removal under UNION rules.")),r.createElement("table",{className:"sketch"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_base.gif",height:"169px"}),r.createElement("p",null,"Two overlapping shapes.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_union.gif",height:"169px"}),r.createElement("p",null,"The unified region.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_intersection.gif",height:"169px"}),r.createElement("p",null,"Their intersection.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_exclusion.gif",height:"169px"}),r.createElement("p",null,"Their exclusion regions."))))),r.createElement("p",null,'The main complication in the outlined procedure here is determining how sections qualify in terms of being "inside" and "outside" of our shapes. For this, we need to be able to perform point-in-shape detection, for which we\'ll use a classic algorithm: getting the "crossing number" by using ray casting, and then testing for "insidedness" by applying the ',r.createElement("a",{href:"http://folk.uio.no/bjornw/doc/bifrost-ref/bifrost-ref-12.html"},"even-odd rule"),': For any point and any shape, we can cast a ray from our point, to some point that we know lies outside of the shape (such as a corner of our drawing surface). We then count how many times that line crosses our shape (remember that we can perform line/curve intersection detection quite easily). If the number of times it crosses the shape\'s outline is even, the point did not actually lie inside our shape. If the number of intersections is odd, our point did lie inside out shape. With that knowledge, we can decide whether to treat a section that such a point lies on "needs removal" (under union rules), "needs preserving" (under intersection rules), or "needs flipping" (under exclusion rules).'),r.createElement("p",null,"These operations are expensive, and implementing your own code for this is generally a bad idea if there is already a geometry package available for your language of choice. In this case, for JavaScript the most excellent ",r.createElement("a",{href:"http://paperjs.org"},"Paper.js")," already comes with all the code in place to perform efficient boolean shape operations, so rather that implement an inferior version here, I can strongly recommend the Paper.js library if you intend to do any boolean shape work."),r.createElement("p",null,"The following graphic shows Paper.js doing its thing for two shapes: one static, and one that is linked to your mouse pointer. If you move the mouse around, you'll see how the shape intersections are resolved. The base shapes are outlined in blue, and the boolean result is coloured red."),r.createElement(i,{preset:"simple",title:"Boolean shape operations with Paper.js",paperjs:!0,setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove},r.createElement("br",null),o.map(function(t){var n=e.state.mode===t?"selected":null;return r.createElement("button",{className:n,key:t,onClick:function(){this.setMode(t)}.bind(e)},t)})))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="splitting",s=r.createClass({displayName:"Splitting",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="tightbounds",s=r.createClass({displayName:"TightBounds",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),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 f=n*u/h;for(r=0;r<c.length;r++)if(c[r].d>f){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 p=0,m=["rgb(240,0,200)","rgb(0,40,200)"];e.setColor(m[p]);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[++p%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(0),i=n(4),a=new i,o="whatis",s=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:a.getTitle(o)}},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],f=h[1],p=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*(f.x-d.x),y:d.y+a*(f.y-d.y)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.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(f,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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6);e.exports={preface:{locale:"zh-CN",title:"序言",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"序言"}),r.createElement("p",null,"我们通常用线条来绘制2D图形，大致分为两种线条：直线和曲线。不论我们动手还是用电脑，都能很容易地画出第一种线条。只要给电脑起点和终点，砰！直线就画出来了。没什么好疑问的。"),r.createElement("p",null,"然而，绘制曲线却是个大问题。虽然我们可以很容易地徒手画出曲线，但除非给出描述曲线的数学函数，不然计算机无法画出曲线。实际上，画直线时也需要数学函数，但画直线所需的方程式很简单，我们在这里不去考虑。在计算机看来，所有线条都是“函数”，不管它们是直线还是曲线。然而，这就表示我们需要找到能在计算机上表现良好的曲线方程。这样的曲线有很多种，在本文我们主要关注一类特殊的、备受关注的函数，基本上任何画曲线的地方都会用到它：贝塞尔曲线。"),r.createElement("p",null,"它们是以",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier"},"Pierre Bézier"),"命名的，尽管他并不是第一个，或者说唯一“发明”了这种曲线的人，但他让世界知道了这种曲线十分适合设计工作（在1962年为Renault工作并发表了他的研究）。有人也许会说数学家",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),"是第一个发现这类曲线特性的人，在Citroën工作时，他提出了一种很优雅的方法来画这些曲线。然而，de Casteljau没有发表他的工作，这使得“谁先发现”这一问题很难有一个确切的答案。 贝塞尔曲线本质上是伯恩斯坦多项式，这是",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein"},"Sergei Natanovich Bernstein"),"研究的一种数学函数，关于它们的出版物至少可以追溯到1912年。无论如何，这些都只是一些冷知识，你可能更在意的是这些曲线很方便：你可以连接多条贝塞尔曲线，并且连接起来的曲线看起来就像是一条曲线。甚至，在你在Photoshop中画“路径”或使用一些像Flash、Illustrator和Inkscape这样的矢量绘图程序时，所画的曲线都是贝塞尔曲线。"),r.createElement("p",null,"那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧!"),r.createElement("p",null,"—Pomax (推特账号, ",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{className:"note"},r.createElement("h2",{id:"-"},"注意：几乎所有的贝塞尔图形都是可交互的。"),r.createElement("p",null,"这个页面使用了基于",r.createElement("a",{href:"http://pomax.github.io/bezierjs"},"Bezier.js")," 的可交互例子，还有一些用",r.createElement("a",{href:"http://MathJax.org"},"MathJax")," 排版的“真正的”数学（LaTeX形式）。这个页面是用Webpack离线生成的React应用，这便让加入“查看源码”选项更具挑战性了。我仍然试图将它们添加回来，但跟前几年的版本相比，不觉得它能够支撑部署这个更新。"),r.createElement("h2",{id:"-"},"这本书是开源的。"),r.createElement("p",null,"这本书是开源的软件项目，现有两个github仓库。第一个",r.createElement("a",{
-href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo"),"，它是你现在在看的这个，纯粹用来展示的版本。另外一个",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),"，是带有所有html, javascript和css的开发版本。你可以fork任意一个，随便做些什么，当然除了把它当作自己的作品来商用。 =)"),r.createElement("h2",{id:"-"},"用到的数学将有多复杂？"),r.createElement("p",null,"这份入门读物用到的大部分数学知识都是高中所学的。如果你理解基本的计算并能看懂英文的话，就能上手这份材料。有时候会用到",r.createElement("em",null,"复杂"),"一点的数学，但如果你不想深究它们，可以选择跳过段落里的“详解”部分，或者直接跳到章节末尾，避开那些看起来很深入的数学。章节的末尾往往会列出一些结论，因此你可以直接利用这些结论。"),r.createElement("h2",{id:"-"},"问题，评论："),r.createElement("p",null,"如果你有对于新章节的一些建议，点击 ",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"Github issue tracker")," （也可以点右上角的repo链接）。如果你有关于材料的一些问题，由于我现在在做改写工作，目前没有评论功能，但你可以用issue跟踪来发表评论。一旦完成重写工作，我会把评论功能加上，或者会有“选择文字段落，点击‘问题’按钮来提问”的系统。到时候我们看看。"),r.createElement("h2",{id:"-"},"给我买杯咖啡？"),r.createElement("p",null,"如果你很喜欢这本书，或发现它对你要做的事很有帮助，或者你想知道怎么表达自己对这本书的感激，你可以 ",r.createElement("a",{href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"给我买杯咖啡")," ，所少钱取决于你。这份工作持续了很多年，从一份小小的简要到70多页关于贝塞尔曲线的读物，在完成它的过程中倾注了很多咖啡。我从未后悔花在这上面的每一分钟，但如果有更多咖啡的话，我可以坚持写下去!")))}},introduction:{locale:"zh-CN",title:"简单介绍",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"简单介绍",number:"1"}),r.createElement("p",null,"让我们有个好的开始：当我们在谈论贝塞尔曲线的时候，所指的就是你在如下图像看到的东西。它们从某些起点开始，到终点结束，并且受到一个或多个的“中间”控制点的影响。本页面上的图形都是可交互的，你可以拖动这些点，看看这些形状在你的操作下会怎么变化。"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"Quadratic Bézier curves",setup:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"Cubic Bézier curves",setup:e.drawCubic,draw:e.drawCurve})),r.createElement("p",null,"这些曲线在计算机辅助设计和计算机辅助制造应用（CAD/CAM）中用的很多。在图形设计软件中也常用到，像Adobe Illustrator, Photoshop, Inkscape, Gimp等等。还可以应用在一些图形技术中，像矢量图形（SVG）和OpenType字体（ttf/otf）。许多东西都用到贝塞尔曲线，如果你想更了解它们...准备好继续往下学吧！"))}},whatis:{locale:"zh-CN",title:"什么构成了贝塞尔曲线？",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"什么构成了贝塞尔曲线？",number:"2"}),r.createElement("p",null,"操作点的移动，看看曲线的变化，可能让你感受到了贝塞尔曲线是如何表现的。但贝塞尔曲线究竟",r.createElement("em",null,"是"),"什么呢？有两种方式来解释贝塞尔曲线，并且可以证明它们完全相等，但是其中一种用到了复杂的数学，另外一种比较简单。所以...我们先从简单的开始吧："),r.createElement("p",null,"贝塞尔曲线是",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Linear_interpolation"},"线性插值"),"的结果。这听起来很复杂，但你在很小的时候就做过线性插值：当你指向两个物体中的另外一个物体时，你就用到了线性插值。它就是很简单的“选出两点之间的一个点”。"),r.createElement("p",null,"如果我们知道两点之间的距离，并想找出离第一个点20%间距的一个新的点(也就是离第二个点80%的间距)，我们可以通过简单的计算来得到："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/75bb049d813d8ee084b076531823f2109cc1660f.svg",style:{width:"36.750150000000005rem",height:"6.37515rem"}}),r.createElement("p",null,"让我们来通过实际操作看一下：下面的图形都是可交互的，因此你可以通过上下键来增加或减少插值距离，来观察图形的变化。我们从三个点构成的两条线段开始。通过对各条线段进行线性插值得到两个点，对点之间的线段再进行线性插值，产生一个新的点。最终这些点——所有的点都可以通过选取不同的距离插值产生——构成了贝塞尔曲线："),r.createElement(i,{title:"Linear Interpolation leading to Bézier curves",setup:e.setup,draw:e.draw,onKeyDown:e.onKeyDown}),r.createElement("p",null,"这为我们引出了复杂的数学：微积分。"),r.createElement("p",null,"虽然我们刚才好像没有用到这个，我们实际上只是逐步地画了一条二次曲线，而不是一次画好。贝塞尔曲线的一个很棒的特性就是它们可以通过多项式方程表示，也可以用很简单的插值形式表示。因此，反过来说，我们可以基于“真正的数学”（检查方程式，导数之类的东西），也可以通过观察曲线的“机械”构成（比如说，可以得知曲线永远不会延伸超过我们用来构造它的点），来看看这些曲线能够做什么。"),r.createElement("p",null,"让我们从更深的层次来观察贝塞尔曲线。看看它们的数学表达式，从这些表达式衍生得到的属性，以及我们可以对贝塞尔曲线做的事。"))}},explanation:{locale:"en-GB",title:"The mathematics of Bézier curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"The mathematics of Bézier curves",number:"3"}),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("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("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("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("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:e.setup,draw:e.draw,onKeyDown:e.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("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("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("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("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("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",{id:"how-to-implement-the-basis-function"},"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&lt;n; k++):","\n","    sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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 &gt;= 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]","\n"),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&lt;=n; k++):","\n","    sum += binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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","\n"),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."))}},control:{locale:"en-GB",title:"Controlling Bézier curvatures",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"control",title:"Controlling Bézier curvatures",number:"4"}),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:e.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:e.drawCubicLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"15th order interpolations",draw:e.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("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("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:e.drawCubic,draw:e.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",{id:"how-to-implement-the-weighted-basis-function"},"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&lt;n; k++):","\n","    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)","\n","  return sum","\n"),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","\n"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}},extended:{locale:"en-GB",title:"The Bézier interval [0,1]",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extended",title:"The Bézier interval [0,1]",number:"5"}),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("code",null,"t=0")," to ",r.createElement("code",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("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("code",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("code",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("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("code",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("code",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:e.setupCubic,draw:e.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)."))}},matrix:{locale:"en-GB",title:"Bézier curvatures as matrix operations",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrix",title:"Bézier curvatures as matrix operations",number:"6"}),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("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("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("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("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("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("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("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("code",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),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("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("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("code",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."))}},decasteljau:{locale:"en-GB",title:"de Casteljau's algorithm",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"decasteljau",title:"de Casteljau's algorithm",number:"7"}),r.createElement("p",null,"If we want to draw Bézier curves we can run through all values of ",r.createElement("code",null,"t")," from 0 to 1 and then compute the weighted basis function, getting the ",r.createElement("code",null,"x/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("code",null,"x/y")," values for ",r.createElement("code",null,"t"),", let's do this instead:"),r.createElement("ul",null,r.createElement("li",null,"treat ",r.createElement("code",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("code",null,"n")," curve, that's ",r.createElement("code",null,"n")," lines."),r.createElement("li",null,"Place markers along each of these line, at distance ",r.createElement("code",null,"t"),". So if ",r.createElement("code",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("code",null,"those")," points. This gives ",r.createElement("code",null,"n-1")," lines."),r.createElement("li",null,"Place markers along each of these line at distance ",r.createElement("code",null,"t"),"."),r.createElement("li",null,"Form lines between ",r.createElement("code",null,"those")," points. This'll be ",r.createElement("code",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("code",null,"t")," on that line coincides with the original curve point at ",r.createElement("code",null,"t"),".")),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"how-to-implement-de-casteljau-s-algorithm"},"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&lt;newpoints.length; i++):","\n","      newpoints[i] = (1-t) * points[i] + t * points[i+1]","\n","    drawCurve(newpoints, t)","\n"),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("code",null,"x")," and ",r.createElement("code",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&lt;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)","\n"),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:e.setup,draw:e.draw}))}},flattening:{locale:"en-GB",title:"Simplified drawing",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"flattening",title:"Simplified drawing",number:"8"}),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:e.setupQuadratic,draw:e.drawFlattened,onKeyDown:e.onKeyDown}),r.createElement(i,{preset:"twopanel",title:"Flattening a cubic curve",setup:e.setupCubic,draw:e.drawFlattened,onKeyDown:e.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",{id:"how-to-implement-curve-flattening"},"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 &lt;= segmentCount; i++):","\n","    t = i*step;","\n","    coordinates.push[curve.getXValue(t), curve.getYValue(t)]","\n","  return coordinates;","\n"),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 &lt; coordinates.length; i++):","\n","    _coords = coordinates[i]","\n","    line(coords, _coords)","\n","    coords = _coords","\n"),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.")))}},splitting:{locale:"en-GB",title:"Splitting curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"splitting",title:"Splitting curves",number:"9"}),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("code",null,"t"),", the procedure gives us all the points we need to split a curve at that ",r.createElement("code",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:e.setupCubic,draw:e.drawSplit}),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"implementing-curve-splitting"},"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&lt;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)","\n"),r.createElement("p",null,"After running this function for some value ",r.createElement("code",null,"t"),", the ",r.createElement("code",null,"left")," and ",r.createElement("code",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("code",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:e.setupCubic,draw:e.drawAnimated,onClick:e.togglePlay}))}},matrixsplit:{locale:"en-GB",title:"Splitting curves using matrices",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrixsplit",title:"Splitting curves using matrices",number:"10"}),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("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}}),r.createElement("p",null,"and"),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("code",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("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}}),r.createElement("p",null,"and"),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("code",null,"t = 0")," to ",r.createElement("code",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",{id:"deriving-new-hull-coordinates"},"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("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/55f9d31b32a3e8855f2d28c3253201c8963eefd1.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("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("img",{className:"LaTeX SVG",src:"images/latex/2972cd74dab6560ea68189c2e53f247287cbefae.svg",style:{width:"30.45015rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/39b64e07c41ef6d734064f017036f6391321e924.svg",style:{width:"35.17515rem",height:"4.1998500000000005rem"}}),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("code",null,"t = 0")," to ",r.createElement("code",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("code",null,"t = z")," to ",r.createElement("code",null,"t = 1")," requires doing this again. We first observe what what we just did is actually evaluate the general interval [0,",r.createElement("code",null,"z"),"], which we wrote down simplified becuase of that zero, but we actually evaluated this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a51e64df3cb31acf32d0ad5814c8c6cff41ae611.svg",style:{width:"27.45rem",height:"3.97485rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/eca8cfda9b7a3f0819ec38acc53f95af67bb26bb.svg",style:{width:"32.625rem",height:"3.97485rem"}}),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("code",null,"[something · M]")," into ",r.createElement("code",null,"[M · something]"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/5851c9191acb59456e3706a8f6f1a0f85e691eda.svg",style:{width:"30.74985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0333e63f50b3d43067dc299280f70e9eb98711bb.svg",style:{width:"34.875rem",height:"4.1998500000000005rem"}}),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("code",null,"t = z"),", we get two subcurves that are described as Bézier curves with simple-to-derive coordinates."),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("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("img",{className:"LaTeX SVG",src:"images/latex/44db09290062827525a9b23cbaf91e65063d86d7.svg",style:{width:"58.87485rem",height:"5.70015rem"}}),r.createElement("p",null,"and"),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."))}},reordering:{locale:"en-GB",title:"Lowering and elevating curve order",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"reordering",title:"Lowering and elevating curve order",number:"11"}),r.createElement("p",null,"One interesting property of Bézier curves is that an ",r.createElement("em",null,"n",r.createElement("sup",null,"th"))," order curve can always be perfectly represented by an ",r.createElement("em",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("em",null,"n",r.createElement("sup",null,"th"))," order curve to an ",r.createElement("em",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("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("em",null,"n",r.createElement("sup",null,"th"))," order to ",r.createElement("em",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 "+e.getOrder()+" order Bézier curve",setup:e.setup,draw:e.draw,onKeyDown:e.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."))}},derivatives:{locale:"en-GB",title:"Derivatives",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"derivatives",title:"Derivatives",number:"12"}),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("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("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",{id:"-slow-down-why-is-that-true-"},'"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("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("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("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("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("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("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("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("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("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("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("img",{className:"LaTeX SVG",src:"images/latex/b98618f8061e9e58289abccc06a624a14561d40f.svg",style:{width:"23.70015rem",height:"3.90015rem"}}),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("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."))}},pointvectors:{locale:"en-GB",title:"Tangents and normals",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"pointvectors",title:"Tangents and normals",number:"13"}),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("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("img",{className:"LaTeX SVG",src:"images/latex/3cb2c4f5806142e83c66e1312520d0783d15201c.svg",style:{width:"17.62515rem",height:"2.025rem"}}),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("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 these 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("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("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("em",null,"sin")," and ",r.createElement("em",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("em",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:e.setupCubic,draw:e.draw})))}},components:{locale:"en-GB",title:"Component functions",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"components",title:"Component functions",number:"14"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve components",setup:e.setupCubic,draw:e.draw}))}},extremities:{locale:"en-GB",title:"Finding extremities: root finding",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extremities",title:"Finding extremities: root finding",number:"15"}),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",{id:"quadratic-curves-linear-derivatives-"},"Quadratic curves: linear derivatives."),r.createElement("p",null,'Finding the solution for "where is this line 0" should be trivial:'),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",{id:"cubic-curves-the-quadratic-formula-"},"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 formula"),". If you've seen it before, you'll remember it, and if you haven't, it looks like this:"),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("img",{className:"LaTeX SVG",src:"images/latex/1fc5a3c637460213133bb4576b292e206d67b36f.svg",style:{width:"37.20015rem",height:"2.7rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/c638a85a950ffb535fbf2056958bed5f44be5067.svg",style:{width:"21.375rem",height:"7.2rem"}}),r.createElement("p",null,"This gives us thee coefficients ",r.createElement("em",null,"a"),", ",r.createElement("em",null,"b"),", and ",r.createElement("em",null,"c")," that are expressed in terms of ",r.createElement("em",null,"v")," values, where the ",r.createElement("em",null,"v")," values are just convenient expressions of our original ",r.createElement("em",null,"p")," values, so we can do some trivial substitution to get:"),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 can now almost trivially find the roots by plugging those values into the quadratic formula. 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",{id:"quartic-curves-cardano-s-algorithm-"},"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("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",{id:"implementing-cardano-s-algorithm-for-finding-all-real-roots"},"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&lt;=t && t &lt;=1;","\n","}","\n","\n","// A real-cuberoots-only function:","\n","function crt(v) ","{","\n","  if(v&lt;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 &lt; 0) ","{","\n","    var mp3  = -p/3,","\n","    mp33 = mp3*mp3*mp3,","\n","    r    = sqrt( mp33 ),","\n","    t    = -q / (2*r),","\n","    cosphi = t&lt;-1 ? -1 : t&gt;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","  if(discriminant === 0) ","{","\n","    u1 = q2 &lt; 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","  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",{id:"quintic-and-higher-order-curves-finding-numerical-solutions"},"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("em",null,"t")," (any will do), and getting the corresponding value at that ",r.createElement("em",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("em",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("em",null,"t"),", at step ",r.createElement("em",null,"n=1"),", we perform the following calculation until ",r.createElement("em",null,"f",r.createElement("sub",null,"y")),"(",r.createElement("em",null,"t"),") is zero, so that the next ",r.createElement("em",null,"t")," is the same as the one we already have:"),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 unless there are requests for it)"),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("em",null,"t=0")," to ",r.createElement("em",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",{id:"in-conclusion-"},"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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve extremities",setup:e.setupCubic,draw:e.draw}))}},boundingbox:{locale:"en-GB",title:"Bounding boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"boundingbox",title:"Bounding boxes",number:"16"}),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("em",null,"Computing the bounding box for a Bézier curve"),":"),r.createElement("ol",null,r.createElement("li",null,"Find all ",r.createElement("em",null,"t")," value(s) for the curve derivative's x- and y-roots."),r.createElement("li",null,"Discard any ",r.createElement("em",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("em",null,"t=0"),", ",r.createElement("em",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 all curve extremity points shown on the curve):"),r.createElement(i,{preset:"simple",title:"Quadratic Bézier bounding box",setup:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier bounding box",setup:e.setupCubic,draw:e.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."))}},aligning:{locale:"en-GB",title:"Aligning curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"aligning",title:"Aligning curves",number:"17"}),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("em",null,"n")," term polynomial functions into ",r.createElement("em",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("em",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),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("em",null,"x")," coordinates by -120, and all ",r.createElement("em",null,"y")," coordinates by -160, gives us:"),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("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("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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}))}},tightbounds:{locale:"en-GB",title:"Tight boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"tightbounds",title:"Tight boxes",number:"18"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.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."))}},inflections:{locale:"en-GB",title:"Curve inflections",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"inflections",title:"Curve inflections",number:"19"}),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 behaving oddly: we might have to change the radius of the circle as we slide it along, 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("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("em",null,"C(t)"),", we want to know for which values of ",r.createElement("em",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("em",null,"C(t)")," look like? Actually something that seems not too hard:"),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("em",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("em",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",r.createElement("em",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",{id:"let-s-derive-the-full-formula-anyway"},"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("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("em",null,"y"),":"),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("em",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("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("em",null,"C(t)"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/c1e427616a8a2502abf3cf46415971d0df9a273c.svg",style:{width:"34.72515rem",height:"5.54985rem"}}),r.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",r.createElement("em",null,"C(t) = 0"),"; we use the quadratic formula:"),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")," ",r.createElement("em",null,"x")," is not zero, because divisions by zero are rather useless."),r.createElement("p",null,"Taking that into account, we compute ",r.createElement("em",null,"t"),", we disregard any ",r.createElement("em",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",r.createElement("em",null,"t")," value(s) our curve will inflect."),r.createElement(i,{title:"Finding cubic Bézier curve inflections",setup:e.setupCubic,draw:e.draw}))}},canonical:{locale:"en-GB",title:"Canonical form (for cubic curves)",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"canonical",title:"Canonical form (for cubic curves)",number:"20"}),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:e.setup,draw:e.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("ol",null,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("ol",null,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("ol",null,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",{id:"wait-where-do-those-lines-come-from-"},"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("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("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("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("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 ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Scaling_%28geometry%29"},"do some scaling")," 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("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 ",r.createElement("code",null,"y/x")," rather than ",r.createElement("code",null,"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("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("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("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("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",{id:"how-do-you-track-all-that-"},"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:e.setup,draw:e.draw}))}},arclength:{locale:"en-GB",title:"Unknown title (arclength)",getContent:function(e){return r.createElement("section",null)}},arclengthapprox:{locale:"en-GB",title:"Unknown title (arclengthapprox)",getContent:function(e){return r.createElement("section",null)}},tracing:{locale:"en-GB",title:"Unknown title (tracing)",getContent:function(e){return r.createElement("section",null)}},intersections:{locale:"en-GB",title:"Unknown title (intersections)",getContent:function(e){return r.createElement("section",null)}},curveintersection:{locale:"en-GB",title:"Unknown title (curveintersection)",getContent:function(e){return r.createElement("section",null)}},abc:{locale:"en-GB",title:"Unknown title (abc)",getContent:function(e){return r.createElement("section",null)}},moulding:{locale:"en-GB",title:"Unknown title (moulding)",getContent:function(e){return r.createElement("section",null)}},pointcurves:{locale:"en-GB",title:"Unknown title (pointcurves)",getContent:function(e){return r.createElement("section",null)}},catmullconv:{locale:"en-GB",title:"Unknown title (catmullconv)",getContent:function(e){return r.createElement("section",null)}},catmullmoulding:{locale:"en-GB",title:"Unknown title (catmullmoulding)",getContent:function(e){return r.createElement("section",null)}},polybezier:{locale:"en-GB",title:"Unknown title (polybezier)",getContent:function(e){return r.createElement("section",null)}},shapes:{locale:"en-GB",title:"Unknown title (shapes)",getContent:function(e){return r.createElement("section",null)}},projections:{locale:"en-GB",title:"Unknown title (projections)",getContent:function(e){return r.createElement("section",null)}},offsetting:{locale:"en-GB",title:"Unknown title (offsetting)",getContent:function(e){return r.createElement("section",null)}},graduatedoffset:{locale:"en-GB",title:"Unknown title (graduatedoffset)",getContent:function(e){return r.createElement("section",null)}},circles:{locale:"en-GB",title:"Unknown title (circles)",getContent:function(e){return r.createElement("section",null)}},circles_cubic:{locale:"en-GB",title:"Unknown title (circles_cubic)",getContent:function(e){return r.createElement("section",null)}},arcapproximation:{locale:"en-GB",title:"Unknown title (arcapproximation)",getContent:function(e){return r.createElement("section",null)}},bsplines:{locale:"en-GB",title:"Unknown title (bsplines)",getContent:function(e){return r.createElement("section",null)}},comments:{locale:"en-GB",title:"Unknown title (comments)",getContent:function(e){return r.createElement("section",null)}},"locale-switcher":{locale:"en-GB",title:"locale-switcher",getContent:function(e){return r.createElement("section",null,r.createElement("p",null,"Read this in your own language:"),r.createElement("ul",null,r.createElement("li",null,r.createElement("a",{href:"?locale=en-GB"},"English")),r.createElement("li",null,r.createElement("a",{href:"?locale=ja-JP"},"日本語")),r.createElement("li",null,r.createElement("a",{href:"?locale=zh-CN"},"中文"))),r.createElement("p",null,"Don't see your language listed? ",r.createElement("a",{href:"https://github.com/Pomax/BezierInfo-2/wiki/localize"},"Help translate this content!")))}}}},function(e,t,n){e.exports=n(65)},function(e,t,n){!function(){"use strict";var t=n(66),r=function(e){this.curves=[],this._3d=!1,e&&(this.curves=e,this._3d=this.curves[0]._3d)};r.prototype={valueOf:function(){return this.toString()},toString:function(){return t.pointsToString(this.points)},addCurve:function(e){this.curves.push(e),this._3d=this._3d||e._3d},length:function(){return this.curves.map(function(e){return e.length()}).reduce(function(e,t){return e+t})},curve:function(e){return this.curves[e]},bbox:function(){for(var e=this.curves,n=e[0].bbox(),r=1;r<e.length;r++)t.expandbox(n,e[r].bbox());return n},offset:function(e){var t=[];return this.curves.forEach(function(n){t=t.concat(n.offset(e))}),new r(t)}},e.exports=r}()},function(e,t,n){(function(e){var n,r;/**
+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\nlli4 = 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\nlli = 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",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,"Curve/curve intersection, however, is more complicated. Since we have no straight line to align to, we can't simply align one of the curves and be left with a simple procedure. Instead, we'll need to apply two techniques we've not covered yet: de Casteljau's algorithm, and curve splitting."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:"Manipulating a curve"}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,s=o(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=s}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,s=i+a,l=s-1,u=o(l/s),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,'Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the ',r.createElement("em",null,"t"),'-value matching that coordinate, and then letting them drag that point around. With every drag update we\'ll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.'),r.createElement(i,{preset:"moulding",title:"Moulding a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markQB,onMouseDrag:this.dragQB,onMouseUp:this.saveCurve}),r.createElement("p",null,r.createElement("strong",null,"Click-dragging the curve itself")," shows what we're using to compute the new coordinates: while dragging you will see the original points B and its corresponding ",r.createElement("i",null,"t"),"-value, the original point C for that ",r.createElement("i",null,"t"),"-value, as well as the new point B' based on the mouse cursor. Since we know the ",r.createElement("i",null,"t"),"-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/e361e1235c94bbe87e95834c7fcfb6ab96e028b9.svg",style:{width:"15.600150000000001rem",height:"2.3998500000000003rem"}})),r.createElement("p",null,"For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:"),r.createElement(i,{preset:"moulding",title:"Moulding a cubic Bézier curve",setup:this.setupCubic,draw:this.drawMould,onClick:this.placeMouldPoint,onMouseDown:this.markCB,onMouseDrag:this.dragCB,onMouseUp:this.saveCurve}),r.createElement("p",null,"To help understand what's going on, the cubic graphic shows the full de Casteljau construction \"hull\" when repositioning point B. We compute A` in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance ",r.createElement("i",null,"t"),", because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy."),r.createElement("p",null,"First, we construct the one-level-of-de-Casteljau-up points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f813a7d607787329d242bfbfa28570c88c3e30f5.svg",style:{width:"9.975150000000001rem",height:"5.09985rem"}})),r.createElement("p",null,"And then we can compute the new control points:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4ec5f4148752a3d332a922048700d2c71918342f.svg",style:{width:"11.700000000000001rem",height:"4.64985rem"}})),r.createElement("p",null,"And that's cubic curve manipulation."))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",style:{width:"7.275150000000001rem",height:"1.125rem"}})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",style:{width:"10.125rem",height:"1.125rem"}})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/664fba98ea17b358941b579115bf063edf87ae17.svg",style:{width:"9.450000000000001rem",height:"3.15rem"}})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",style:{width:"12.45015rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",style:{width:"15.150150000000002rem",height:"2.6248500000000003rem"}})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.abs,s=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:"Creating a curve from three points"}},setup:function(e){e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}]},onClick:function(e,t){3==t.lpts.length&&(t.lpts=[]),t.lpts.push({x:e.offsetX,y:e.offsetY}),t.redraw()},getQRatio:function(e){var t=2*e,n=t*e-t,r=n+1;return o(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return o(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},y={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},w={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(y.x-r.x),y:r.y+2*(y.y-r.y)},_={x:i.x+2*(w.x-i.x),y:i.y+2*(w.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,y),e.drawLine(l,w),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Given the preceding section on curve manipulation, we can also generate quadratic and cubic curves from any three points. However, unlike circle-fitting, which requires just three points, Bézier curve fitting requires three points, as well as a ",r.createElement("i",null,"t")," value, so we can figure out where point 'C' needs to be."),r.createElement("p",null,"The following graphic lets you place three points, and will use the preceding sections on the ABC ratio and curve construction to form a quadratic curve through them. You can move the points you've placed around by click-dragging, or try a new curve by drawing new points with pure clicks. (There's some freedom here, so for illustrative purposes we clamped ",r.createElement("i",null,"t")," to simply be 0.5, lets us bypass some maths, since a ",r.createElement("i",null,"t")," value of 0.5 always puts C in the middle of the start--end line segment)"),r.createElement(i,{preset:"generate",title:"Fitting a quadratic Bézier curve",setup:this.setup,draw:this.drawQuadratic,onClick:this.onClick}),r.createElement("p",null,'For cubic curves we also need some values to construct the "de Casteljau line through B" with, and that gives us quite a bit of choice. Since we\'ve clamped ',r.createElement("i",null,"t"),' to 0.5, we\'ll set up a line through B parallel to the line start--end, with a length that is proportional to the length of the line B--C: the further away from the baseline B is, the wider its construction line will be, and so the more "bulby" the curve will look. This still gives us some freedom in terms of exactly how to scale the length of the construction line as we move B closer or further away from the baseline, so I simply picked some values that sort-of-kind-of look right in that if a circle through (start,B,end) forms a perfect hemisphere, the cubic curve constructed forms something close to a hemisphere, too, and if the points lie on a line, then the curve constructed has the control points very close to B, while still lying between B and the correct curve end point:'),r.createElement(i,{preset:"generate",title:"Fitting a cubic Bézier curve",setup:this.setup,draw:this.drawCubic,onClick:this.onClick}),r.createElement("p",null,'In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which ',r.createElement("i",null,"t")," value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination of ",r.createElement("i",null,"t"),' and tangent values that lead to a more "æsthetic" curve, but this will be left as an exercise to the reader, since there are many, and æsthetics are often quite personal.'))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);
+e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",style:{width:"8.400150000000002rem",height:"1.27485rem"}})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",style:{width:"21.97485rem",height:"2.7rem"}})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r<a;r++)i=n(e[r],t),i<o&&(s=r,o=i);return s/(a-1)},draw:function(e,t){if(e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.mousePt){e.setColor("red"),e.setFill("red"),e.drawCircle(e.mousePt,3);var n=this.findClosest(e._lut,e.mousePt,e.utils.dist),r=t.get(n);e.drawLine(r,e.mousePt),e.drawCircle(r,3),e.text("t = "+e.utils.round(n,2),r,{x:10,y:3})}},onMouseMove:function(e,t){t.mousePt={x:e.offsetX,y:e.offsetY},t._lut=t.curve.getLUT()},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Say we have a Bézier curve and some point, not on the curve, of which we want to know which ",r.createElement("i",null,"t")," value on the curve gives us an on-curve point closest to our off-curve point. Or: say we want to find the projection of a random point onto a curve. How do we do that?"),r.createElement("p",null,"If the Bézier curve is of low enough order, we might be able to ",r.createElement("a",{href:"http://jazzros.blogspot.ca/2011/03/projecting-point-on-bezier-curve.html"},"work out the maths for how to do this"),", and get a perfect ",r.createElement("i",null,"t")," value back, but in general this is an incredibly hard problem and the easiest solution is, really, a numerical approach again. We'll be finding our ideal ",r.createElement("i",null,"t")," value using a ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"binary search"),". First, we do a coarse distance-check based on ",r.createElement("i",null,"t"),' values associated with the curve\'s "to draw" coordinates (using a lookup table, or LUT). This is pretty fast. Then we run this algorithm:'),r.createElement("ol",null,r.createElement("li",null,"with the ",r.createElement("i",null,"t")," value we found, start with some small interval around ",r.createElement("i",null,"t")," (1/length_of_LUT on either side is a reasonable start),"),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is larger than the distance to ",r.createElement("i",null,"t"),", try again with the interval reduced to half its original length."),r.createElement("li",null,"if the distance to ",r.createElement("i",null,"t ± interval/2")," is smaller than the distance to ",r.createElement("i",null,"t"),", replace ",r.createElement("i",null,"t")," with the smaller-distance value."),r.createElement("li",null,"after reducing the interval, or changing ",r.createElement("i",null,"t"),", go back to step 1.")),r.createElement("p",null,"We keep repeating this process until the interval is small enough to claim the difference in precision found is irrelevant for the purpose we're trying to find ",r.createElement("i",null,"t")," for. In this case, I'm arbitrarily fixing it at 0.0001."),r.createElement("p",null,'The following graphic demonstrates the result of this procedure.Simply move the cursor around, and if it does not lie on top of the curve, you will see a line that projects the cursor onto the curve based on an iteratively found "ideal" ',r.createElement("i",null,"t")," value."),r.createElement(i,{preset:"simple",title:"Projecting a point onto a Bézier curve",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}))}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(15),a=n(4),o=new a,s="reordering",l=r.createClass({displayName:"Reordering",getDefaultProps:function(){return{title:o.getTitle(s)}},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(l.lower(e.curve))}}}},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,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=["unite","intersect","exclude","subtract"],s=r.createClass({displayName:"Shapes",getDefaultProps:function(){return{title:"Boolean shape operations"}},getInitialState:function(){return{mode:o[0]}},setMode:function(e){this.setState({mode:e})},formPath:function(e,t,n,r,i){t=t||0,n=n||0;var a=30,o=a/2;r=r||8*a,i=i||4*a;var s=r/2,l=i/2,u=s/3,c=l/3,h=e.Paper,d=h.Path,f=h.Point,p=new d;return p.moveTo(new f(t-s+2*a,n-l)),p.cubicCurveTo(new f(t-s+o,n-l+o),new f(t-s+o,n+l-o),new f(t-s+2*a,n+l)),p.cubicCurveTo(new f(t-u,n+c),new f(t+u,n+c),new f(t+s-2*a,n+l)),p.cubicCurveTo(new f(t+s-o,n+l-o),new f(t+s-o,n-l+o),new f(t+s-2*a,n-l)),p.cubicCurveTo(new f(t+u,n-c),new f(t-u,n-c),new f(t-s+2*a,n-l)),p.closePath(!0),p.strokeColor="rgb(100,100,255)",p},setup:function(e){var t=e.getPanelWidth(),n=40,r=t/2,i=t/2;e.c1=this.formPath(e,r,i),r+=n,i+=n,e.c2=this.formPath(e,r,i),this.state.mode=o[0]},onMouseMove:function(e,t){var n=e.offsetX,r=e.offsetY;t.c2.position={x:n,y:r}},draw:function(e){e.c3&&e.c3.remove();var t=e.c1,n=e.c2,r=t[this.state.mode].bind(t),i=e.c3=r(n);i.strokeColor="red",i.fillColor="rgba(255,100,100,0.4)",e.Paper.view.draw()},render:function(){var e=this;return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"We can apply the topics covered so far in this primer to effect boolean shape operations: getting the union, intersection, or exclusion, between two or more shapes that involve Bézier curves. For simplicity (well.. sort of, more homogeneity), we'll be looking at Poly-Bézier shapes only, but a shape that consists of a mix of lines and Bézier curves is technically a simplification (although it does mean we need to write a definition for the class of shapes that mix lines and Bézier curves. Since poly-Bézier curves are a superset, we'll be using those in the following examples)"),r.createElement("p",null,"The procedure for performing boolean operations consists, broadly, of four steps:"),r.createElement("ol",null,r.createElement("li",null,"Find the intersection points between both shapes,"),r.createElement("li",null,"cut up the shapes into multiple sections between these intersections,"),r.createElement("li",null,"discard any section that isn't part of the desired operation's resultant shape, and"),r.createElement("li",null,"link up the remaining sections to form the new shape.")),r.createElement("p",null,"Finding all intersections between two poly-Bézier curves, or any poly-line-section shape, is similar to the iterative algorithm discussed in the section on curve/curve intersection. For each segment in the poly-Bézier curve we check whether its bounding box overlaps with any of the segment bounding boxes in the other poly-Bézier curve. If so, we run normal intersection detection."),r.createElement("p",null,"After we found all intersection points, we split up our poly-Bézier curves, making sure to record which of the newly formed poly-Bézier curves might potentially link up at the points we split the originals up at. This will let us quickly glue poly-Bézier curves back together after the next step."),r.createElement("p",null,"Once we have all the new poly-Bézier curves, we run the first step of the desired boolean operation."),r.createElement("ul",null,r.createElement("li",null,'Union: discard all poly-Bézier curves that lie "inside" our union of our shapes. E.g. if we want the union of two overlapping circles, the resulting shape is the outline.'),r.createElement("li",null,'Intersection: discard all poly-Bézier curves that lie "outside" the intersection of the two shapes. E.g. if we want the intersection of two overlapping circles, the resulting shape is the tapered ellipse where they overlap.'),r.createElement("li",null,"Exclusion: none of the sections are discarded, but we will need to link the shapes back up in a special way. Flip any section that would qualify for removal under UNION rules.")),r.createElement("table",{className:"sketch"},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_base.gif",height:"169px"}),r.createElement("p",null,"Two overlapping shapes.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_union.gif",height:"169px"}),r.createElement("p",null,"The unified region.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_intersection.gif",height:"169px"}),r.createElement("p",null,"Their intersection.")),r.createElement("td",{className:"labeled-image"},r.createElement("img",{src:"images/op_exclusion.gif",height:"169px"}),r.createElement("p",null,"Their exclusion regions."))))),r.createElement("p",null,'The main complication in the outlined procedure here is determining how sections qualify in terms of being "inside" and "outside" of our shapes. For this, we need to be able to perform point-in-shape detection, for which we\'ll use a classic algorithm: getting the "crossing number" by using ray casting, and then testing for "insidedness" by applying the ',r.createElement("a",{href:"http://folk.uio.no/bjornw/doc/bifrost-ref/bifrost-ref-12.html"},"even-odd rule"),': For any point and any shape, we can cast a ray from our point, to some point that we know lies outside of the shape (such as a corner of our drawing surface). We then count how many times that line crosses our shape (remember that we can perform line/curve intersection detection quite easily). If the number of times it crosses the shape\'s outline is even, the point did not actually lie inside our shape. If the number of intersections is odd, our point did lie inside out shape. With that knowledge, we can decide whether to treat a section that such a point lies on "needs removal" (under union rules), "needs preserving" (under intersection rules), or "needs flipping" (under exclusion rules).'),r.createElement("p",null,"These operations are expensive, and implementing your own code for this is generally a bad idea if there is already a geometry package available for your language of choice. In this case, for JavaScript the most excellent ",r.createElement("a",{href:"http://paperjs.org"},"Paper.js")," already comes with all the code in place to perform efficient boolean shape operations, so rather that implement an inferior version here, I can strongly recommend the Paper.js library if you intend to do any boolean shape work."),r.createElement("p",null,"The following graphic shows Paper.js doing its thing for two shapes: one static, and one that is linked to your mouse pointer. If you move the mouse around, you'll see how the shape intersections are resolved. The base shapes are outlined in blue, and the boolean result is coloured red."),r.createElement(i,{preset:"simple",title:"Boolean shape operations with Paper.js",paperjs:!0,setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove},r.createElement("br",null),o.map(function(t){var n=e.state.mode===t?"selected":null;return r.createElement("button",{className:n,key:t,onClick:function(){this.setMode(t)}.bind(e)},t)})))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="splitting",s=r.createClass({displayName:"Splitting",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(4),a=new i,o="tightbounds",s=r.createClass({displayName:"TightBounds",getDefaultProps:function(){return{title:a.getTitle(o)}},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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6),o=n(15),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 f=n*u/h;for(r=0;r<c.length;r++)if(c[r].d>f){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 p=0,m=["rgb(240,0,200)","rgb(0,40,200)"];e.setColor(m[p]);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[++p%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(0),i=n(4),a=new i,o="whatis",s=r.createClass({displayName:"Whatis",getDefaultProps:function(){return{title:a.getTitle(o)}},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],f=h[1],p=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*(f.x-d.x),y:d.y+a*(f.y-d.y)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.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(f,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,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(8),a=n(6);e.exports={preface:{locale:"zh-CN",title:"序言",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"序言"}),r.createElement("p",null,"我们通常用线条来绘制2D图形，大致分为两种线条：直线和曲线。不论我们动手还是用电脑，都能很容易地画出第一种线条。只要给电脑起点和终点，砰！直线就画出来了。没什么好疑问的。"),r.createElement("p",null,"然而，绘制曲线却是个大问题。虽然我们可以很容易地徒手画出曲线，但除非给出描述曲线的数学函数，不然计算机无法画出曲线。实际上，画直线时也需要数学函数，但画直线所需的方程式很简单，我们在这里不去考虑。在计算机看来，所有线条都是“函数”，不管它们是直线还是曲线。然而，这就表示我们需要找到能在计算机上表现良好的曲线方程。这样的曲线有很多种，在本文我们主要关注一类特殊的、备受关注的函数，基本上任何画曲线的地方都会用到它：贝塞尔曲线。"),r.createElement("p",null,"它们是以",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier"},"Pierre Bézier"),"命名的，尽管他并不是第一个，或者说唯一“发明”了这种曲线的人，但他让世界知道了这种曲线十分适合设计工作（在1962年为Renault工作并发表了他的研究）。有人也许会说数学家",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),"是第一个发现这类曲线特性的人，在Citroën工作时，他提出了一种很优雅的方法来画这些曲线。然而，de Casteljau没有发表他的工作，这使得“谁先发现”这一问题很难有一个确切的答案。 贝塞尔曲线本质上是伯恩斯坦多项式，这是",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein"},"Sergei Natanovich Bernstein"),"研究的一种数学函数，关于它们的出版物至少可以追溯到1912年。无论如何，这些都只是一些冷知识，你可能更在意的是这些曲线很方便：你可以连接多条贝塞尔曲线，并且连接起来的曲线看起来就像是一条曲线。甚至，在你在Photoshop中画“路径”或使用一些像Flash、Illustrator和Inkscape这样的矢量绘图程序时，所画的曲线都是贝塞尔曲线。"),r.createElement("p",null,"那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧!"),r.createElement("p",null,"—Pomax (推特账号, ",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{className:"note"},r.createElement("h2",{id:"-"},"注意：几乎所有的贝塞尔图形都是可交互的。"),r.createElement("p",null,"这个页面使用了基于",r.createElement("a",{href:"http://pomax.github.io/bezierjs"},"Bezier.js")," 的可交互例子，还有一些用",r.createElement("a",{href:"http://MathJax.org"},"MathJax")," 排版的“真正的”数学（LaTeX形式）。这个页面是用Webpack离线生成的React应用，这便让加入“查看源码”选项更具挑战性了。我仍然试图将它们添加回来，但跟前几年的版本相比，不觉得它能够支撑部署这个更新。"),r.createElement("h2",{id:"-"},"这本书是开源的。"),r.createElement("p",null,"这本书是开源的软件项目，现有两个github仓库。第一个",r.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo"),"，它是你现在在看的这个，纯粹用来展示的版本。另外一个",r.createElement("a",{
+href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),"，是带有所有html, javascript和css的开发版本。你可以fork任意一个，随便做些什么，当然除了把它当作自己的作品来商用。 =)"),r.createElement("h2",{id:"-"},"用到的数学将有多复杂？"),r.createElement("p",null,"这份入门读物用到的大部分数学知识都是高中所学的。如果你理解基本的计算并能看懂英文的话，就能上手这份材料。有时候会用到",r.createElement("em",null,"复杂"),"一点的数学，但如果你不想深究它们，可以选择跳过段落里的“详解”部分，或者直接跳到章节末尾，避开那些看起来很深入的数学。章节的末尾往往会列出一些结论，因此你可以直接利用这些结论。"),r.createElement("h2",{id:"-"},"问题，评论："),r.createElement("p",null,"如果你有对于新章节的一些建议，点击 ",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"Github issue tracker")," （也可以点右上角的repo链接）。如果你有关于材料的一些问题，由于我现在在做改写工作，目前没有评论功能，但你可以用issue跟踪来发表评论。一旦完成重写工作，我会把评论功能加上，或者会有“选择文字段落，点击‘问题’按钮来提问”的系统。到时候我们看看。"),r.createElement("h2",{id:"-"},"给我买杯咖啡？"),r.createElement("p",null,"如果你很喜欢这本书，或发现它对你要做的事很有帮助，或者你想知道怎么表达自己对这本书的感激，你可以 ",r.createElement("a",{href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"给我买杯咖啡")," ，所少钱取决于你。这份工作持续了很多年，从一份小小的简要到70多页关于贝塞尔曲线的读物，在完成它的过程中倾注了很多咖啡。我从未后悔花在这上面的每一分钟，但如果有更多咖啡的话，我可以坚持写下去!")))}},introduction:{locale:"zh-CN",title:"简单介绍",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"简单介绍",number:"1"}),r.createElement("p",null,"让我们有个好的开始：当我们在谈论贝塞尔曲线的时候，所指的就是你在如下图像看到的东西。它们从某些起点开始，到终点结束，并且受到一个或多个的“中间”控制点的影响。本页面上的图形都是可交互的，你可以拖动这些点，看看这些形状在你的操作下会怎么变化。"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"Quadratic Bézier curves",setup:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"Cubic Bézier curves",setup:e.drawCubic,draw:e.drawCurve})),r.createElement("p",null,"这些曲线在计算机辅助设计和计算机辅助制造应用（CAD/CAM）中用的很多。在图形设计软件中也常用到，像Adobe Illustrator, Photoshop, Inkscape, Gimp等等。还可以应用在一些图形技术中，像矢量图形（SVG）和OpenType字体（ttf/otf）。许多东西都用到贝塞尔曲线，如果你想更了解它们...准备好继续往下学吧！"))}},whatis:{locale:"zh-CN",title:"什么构成了贝塞尔曲线？",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"什么构成了贝塞尔曲线？",number:"2"}),r.createElement("p",null,"操作点的移动，看看曲线的变化，可能让你感受到了贝塞尔曲线是如何表现的。但贝塞尔曲线究竟",r.createElement("em",null,"是"),"什么呢？有两种方式来解释贝塞尔曲线，并且可以证明它们完全相等，但是其中一种用到了复杂的数学，另外一种比较简单。所以...我们先从简单的开始吧："),r.createElement("p",null,"贝塞尔曲线是",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Linear_interpolation"},"线性插值"),"的结果。这听起来很复杂，但你在很小的时候就做过线性插值：当你指向两个物体中的另外一个物体时，你就用到了线性插值。它就是很简单的“选出两点之间的一个点”。"),r.createElement("p",null,"如果我们知道两点之间的距离，并想找出离第一个点20%间距的一个新的点(也就是离第二个点80%的间距)，我们可以通过简单的计算来得到："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/75bb049d813d8ee084b076531823f2109cc1660f.svg",style:{width:"36.750150000000005rem",height:"6.37515rem"}}),r.createElement("p",null,"让我们来通过实际操作看一下：下面的图形都是可交互的，因此你可以通过上下键来增加或减少插值距离，来观察图形的变化。我们从三个点构成的两条线段开始。通过对各条线段进行线性插值得到两个点，对点之间的线段再进行线性插值，产生一个新的点。最终这些点——所有的点都可以通过选取不同的距离插值产生——构成了贝塞尔曲线："),r.createElement(i,{title:"Linear Interpolation leading to Bézier curves",setup:e.setup,draw:e.draw,onKeyDown:e.onKeyDown}),r.createElement("p",null,"这为我们引出了复杂的数学：微积分。"),r.createElement("p",null,"虽然我们刚才好像没有用到这个，我们实际上只是逐步地画了一条二次曲线，而不是一次画好。贝塞尔曲线的一个很棒的特性就是它们可以通过多项式方程表示，也可以用很简单的插值形式表示。因此，反过来说，我们可以基于“真正的数学”（检查方程式，导数之类的东西），也可以通过观察曲线的“机械”构成（比如说，可以得知曲线永远不会延伸超过我们用来构造它的点），来看看这些曲线能够做什么。"),r.createElement("p",null,"让我们从更深的层次来观察贝塞尔曲线。看看它们的数学表达式，从这些表达式衍生得到的属性，以及我们可以对贝塞尔曲线做的事。"))}},explanation:{locale:"zh-CN",title:"贝塞尔曲线的数学原理",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"贝塞尔曲线的数学原理",number:"3"}),r.createElement("p",null,"贝塞尔曲线是“参数”方程的一种形式。从数学上讲，参数方程作弊了：“方程”实际上是一个从输入到",r.createElement("strong",null,"唯一"),"输出的、良好定义的映射关系。几个输入进来，一个输出返回。改变输入变量，还是只有一个输出值。参数方程在这里作弊了。它们基本上干了这么件事，“好吧，我们想要更多的输出值，所以我们用了多个方程”。举个例子：假如我们有一个方程，通过一些计算，将假设为",r.createElement("i",null,"x"),"的一些值映射到另外的值:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/785e792c343b71d4e674ac94d8800940b30917ac.svg",style:{width:"6.22485rem",height:"1.125rem"}}),r.createElement("p",null,"记号",r.createElement("i",null,"f(x)"),"是表示函数的标准方式（为了方便起见，如果只有一个的话，我们称函数为",r.createElement("i",null,"f"),"），函数的输出根据一个变量（本例中是",r.createElement("i",null,"x"),"）变化。改变",r.createElement("i",null,"x"),"，",r.createElement("i",null,"f(x)"),"的输出值也会变。"),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,"这俩方程没什么让人印象深刻的，只不过是正弦函数和余弦函数，但正如你所见，输入变量有两个不同的名字。如果我们改变了",r.createElement("i",null,"a"),"的值，",r.createElement("i",null,"f(b)"),"的输出不会有变化，因为这个方程没有用到",r.createElement("i",null,"a"),"。参数方程通过改变这点来作弊。在参数方程中，所有不同的方程共用一个变量，如下所示："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ed6f533530199d1e99b3319ba137c1327b0459c0.svg",style:{width:"7.349849999999999rem",height:"2.6248500000000003rem"}}),r.createElement("p",null,"多个方程，但只有一个变量。如果我们改变了",r.createElement("i",null,"t"),"的值，",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)"),"和",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)"),"的输出都会发生变化。你可能会好奇这有什么用，答案其实很简单：对于参数曲线，如果我们用常用的标记来替代",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)"),"和",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)"),"，看起来就有些明朗了："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ea632ea75d6a2aeb6fe69c07feb6e76f81884746.svg",style:{width:"5.77485rem",height:"2.6248500000000003rem"}}),r.createElement("p",null,"好了，通过一些神秘的",r.createElement("i",null,"t"),"值将",r.createElement("i",null,"x"),"/",r.createElement("i",null,"y"),"坐标系联系起来。"),r.createElement("p",null,"所以，参数曲线不像一般函数那样，通过",r.createElement("i",null,"x"),"坐标来定义",r.createElement("i",null,"y"),"坐标，而是用一个“控制”变量将它们连接起来。如果改变",r.createElement("i",null,"t"),"的值，每次变化时我们都能得到",r.createElement("strong",null,"两个"),"值，这可以作为图形中的(",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),")坐标。比如上面的方程组，生成位于一个圆上的点：我们可以使",r.createElement("i",null,"t"),"在正负极值间变化，得到的输出(",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),")都会位于一个以原点(0,0)为中心且半径为1的圆上。如果我们画出",r.createElement("i",null,"t"),"从0到5时的值，将得到如下图像（你可以用上下键来改变画的点和值）："),r.createElement(i,{preset:"empty",title:"(一部分的)圆: x=sin(t), y=cos(t)",static:!0,setup:e.setup,draw:e.draw,onKeyDown:e.props.onKeyDown}),r.createElement("p",null,"贝塞尔曲线是（一种）参数方程，并在它的多个维度上使用相同的基本方程。在上述的例子中",r.createElement("i",null,"x"),"值和",r.createElement("i",null,"y"),"值使用了不同的方程，与此不同的是，贝塞尔曲线的",r.createElement("i",null,"x"),"和",r.createElement("i",null,"y"),"都用了“二项多项式”。那什么是二项多项式呢？"),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,"如果它的最高次项是",r.createElement("i",null,"x³"),"就称为“三次”多项式，如果最高次项是",r.createElement("i",null,"x²"),"，称为“二次”多项式，如果只含有",r.createElement("i",null,"x"),"的项，它就是一条线（不过不含任何",r.createElement("i",null,"x"),"的项它就不是一个多项式！）"),r.createElement("p",null,"贝塞尔曲线不是x的多项式，它是",r.createElement("i",null,"t"),"的多项式，",r.createElement("i",null,"t"),"的值被限制在0和1之间，并且含有",r.createElement("i",null,"a"),"，",r.createElement("i",null,"b"),"等参数。它采用了二次项的形式，听起来很神奇但实际上就是混合不同值的简单描述："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/24e915ab4c69b85951f1ea9018b0ece9e52a10dd.svg",style:{width:"24.89985rem",height:"4.1998500000000005rem"}}),r.createElement("p",null,"我明白你在想什么：这看起来并不简单，但如果我们拿掉",r.createElement("i",null,"t"),"并让系数乘以1，事情就会立马简单很多，看看这些二次项："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/448d10d21afd49135055cf685fedf6c494984b53.svg",style:{width:"14.475150000000001rem",height:"5.175rem"}}),r.createElement("p",null,"需要注意的是，2与1+1相同，3相当于2+1或1+2，6相当于3+3...如你所见，每次我们增加一个维度，只要简单地将头尾置为1，中间的操作都是“将上面的两个数字相加”。现在就能很容易地记住了。"),r.createElement("p",null,"还有一个简单的办法可以弄清参数项怎么工作的：如果我们将",r.createElement("i",null,"(1-t)"),"重命名为",r.createElement("i",null,"a"),"，将",r.createElement("i",null,"t"),"重命名为",r.createElement("i",null,"b"),"，暂时把权重删掉，可以得到这个："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/87c7f5294b902def4ea56e8f6cf24265a37143b6.svg",style:{width:"20.84985rem",height:"3.825rem"}}),r.createElement("p",null,"基本上它就是“每个",r.createElement("i",null,"a"),"和",r.createElement("i",null,"b"),"结合项”的和，在每个加号后面逐步的将",r.createElement("i",null,"a"),"换成",r.createElement("i",null,"b"),"。因此这也很简单。现在你已经知道了二次多项式，为了叙述的完整性，我将给出一般方程："),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d79bf595a0911c17e2ac86d8806a0a8ab6ba7dfe.svg",style:{width:"20.39985rem",height:"3.90015rem"}}),r.createElement("p",null,"这就是贝塞尔曲线完整的描述。在这个函数中的Σ表示了这是一系列的加法（用Σ下面的变量，从...=<值>开始，直到Σ上面的数字结束）。"),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"-"},"如何实现基本方程"),r.createElement("p",null,"我们可以用之前说过的方程，来简单地实现基本方程作为数学构造，如下："),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\n"),r.createElement("p",null,"我说我们“可以用”是因为我们不会这么去做：因为阶乘函数开销",r.createElement("em",null,"非常大"),"。并且，正如我们在上面所看到的，我们不用阶乘也能够很容易地构造出帕斯卡三角形：一开始是[1]，接着是[1,2,1],然后是[1,3,3,1]等等。下一行都比上一行多一个数，首尾都为1，中间的数字是上一行两边元素的和。"),r.createElement("p",null,"我们可以很快的生成这个列表，并在之后使用这个查找表而不用再计算二次多项式的系数："),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\nbinomial(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<prev; i++):\n      nextRow[i] = lut[prev][i-1] + lut[prev][i]\n    nextRow[s] = 1\n    lut.add(nextRow)\n  return lut[n][k]\n"),r.createElement("p",null,"这里做了些什么？首先，我们声明了一个足够大的查找表。然后，我们声明了一个函数来获取我们想要的值，并且确保当一个请求的n/k对不在LUT查找表中时，先将表扩大。我们的基本函数如下所示："),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\n"),r.createElement("p",null,"完美。当然我们可以进一步优化。为了大部分的计算机图形学目的，我们不需要任意的曲线。我们需要二次曲线和三次曲线（实际上这篇文章没有涉及任意次的曲线，因此你会在其他地方看到与这些类似的代码），这说明我们可以彻底简化代码:"),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\nfunction 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\n"),r.createElement("p",null,"现在我们知道如何代用码实现基本方程了。很好。")),r.createElement("p",null,"既然我们已经知道基本函数的样子，是时候添加一些魔法来使贝塞尔曲线变得特殊了：控制点。"))}},control:{locale:"en-GB",title:"Controlling Bézier curvatures",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"control",title:"Controlling Bézier curvatures",number:"4"}),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:e.drawQuadraticLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"Cubic interpolations",draw:e.drawCubicLerp}),r.createElement(i,{inline:!0,preset:"simple",title:"15th order interpolations",draw:e.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("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("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:e.drawCubic,draw:e.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",{id:"how-to-implement-the-weighted-basis-function"},"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\n"),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\nfunction 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\n"),r.createElement("p",null,"And now we know how to program the weighted basis function.")))}},extended:{locale:"en-GB",title:"The Bézier interval [0,1]",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extended",title:"The Bézier interval [0,1]",number:"5"}),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("code",null,"t=0")," to ",r.createElement("code",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("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("code",null,"a=1, b=0"),", so that the mixed value is 100% value 1, and 0% value 2, and ",r.createElement("code",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("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("code",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("code",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic infinite interval Bézier curve",setup:e.setupCubic,draw:e.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)."))}},matrix:{locale:"en-GB",title:"Bézier curvatures as matrix operations",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrix",title:"Bézier curvatures as matrix operations",number:"6"}),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("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("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("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("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("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("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("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("code",null,"t"),' matrix horizontally, and our big "mixing" matrix upside down:'),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("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("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("code",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."))}},decasteljau:{locale:"en-GB",title:"de Casteljau's algorithm",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"decasteljau",title:"de Casteljau's algorithm",number:"7"}),r.createElement("p",null,"If we want to draw Bézier curves we can run through all values of ",r.createElement("code",null,"t")," from 0 to 1 and then compute the weighted basis function, getting the ",r.createElement("code",null,"x/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("code",null,"x/y")," values for ",r.createElement("code",null,"t"),", let's do this instead:"),r.createElement("ul",null,r.createElement("li",null,"treat ",r.createElement("code",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("code",null,"n")," curve, that's ",r.createElement("code",null,"n")," lines."),r.createElement("li",null,"Place markers along each of these line, at distance ",r.createElement("code",null,"t"),". So if ",r.createElement("code",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("code",null,"those")," points. This gives ",r.createElement("code",null,"n-1")," lines."),r.createElement("li",null,"Place markers along each of these line at distance ",r.createElement("code",null,"t"),"."),r.createElement("li",null,"Form lines between ",r.createElement("code",null,"those")," points. This'll be ",r.createElement("code",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("code",null,"t")," on that line coincides with the original curve point at ",r.createElement("code",null,"t"),".")),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"how-to-implement-de-casteljau-s-algorithm"},"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)\n"),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("code",null,"x")," and ",r.createElement("code",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)\n"),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:e.setup,draw:e.draw}))}},flattening:{locale:"en-GB",title:"Simplified drawing",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"flattening",title:"Simplified drawing",number:"8"}),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:e.setupQuadratic,draw:e.drawFlattened,onKeyDown:e.onKeyDown}),r.createElement(i,{preset:"twopanel",title:"Flattening a cubic curve",setup:e.setupCubic,draw:e.drawFlattened,onKeyDown:e.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",{id:"how-to-implement-curve-flattening"},"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;\n"),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\n"),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.")))}},splitting:{locale:"en-GB",title:"Splitting curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"splitting",title:"Splitting curves",number:"9"}),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("code",null,"t"),", the procedure gives us all the points we need to split a curve at that ",r.createElement("code",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:e.setupCubic,draw:e.drawSplit}),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"implementing-curve-splitting"},"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=[]\nright=[]\nfunction 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)\n"),r.createElement("p",null,"After running this function for some value ",r.createElement("code",null,"t"),", the ",r.createElement("code",null,"left")," and ",r.createElement("code",null,"right"),' arrays will contain all the coordinates for two new curves - one to the "left" of our ',r.createElement("code",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:e.setupCubic,draw:e.drawAnimated,onClick:e.togglePlay}))}},matrixsplit:{locale:"en-GB",title:"Splitting curves using matrices",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"matrixsplit",title:"Splitting curves using matrices",number:"10"}),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("img",{className:"LaTeX SVG",src:"images/latex/e56e78e406d625c2a5ec584216f79a5fee00d8ea.svg",style:{width:"19.65015rem",height:"3.97485rem"}}),r.createElement("p",null,"and"),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("code",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("img",{className:"LaTeX SVG",src:"images/latex/d6fa091a86782480968c232ef86513c578030004.svg",style:{width:"48.07485rem",height:"4.05rem"}}),r.createElement("p",null,"and"),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("code",null,"t = 0")," to ",r.createElement("code",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",{id:"deriving-new-hull-coordinates"},"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("img",{className:"LaTeX SVG",src:"images/latex/d4b8355c3f1f80aacfc2766423a30151c5180a02.svg",style:{width:"26.24985rem",height:"4.05rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe5f623585a9bbb836f54164aecaadd3fc4ec953.svg",style:{width:"17.62515rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1eb9833685c9189c64d9cbdfdbb24a94e70e493f.svg",style:{width:"17.69985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/55f9d31b32a3e8855f2d28c3253201c8963eefd1.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("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("img",{className:"LaTeX SVG",src:"images/latex/2972cd74dab6560ea68189c2e53f247287cbefae.svg",style:{width:"30.45015rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/39b64e07c41ef6d734064f017036f6391321e924.svg",style:{width:"35.17515rem",height:"4.1998500000000005rem"}}),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("code",null,"t = 0")," to ",r.createElement("code",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("code",null,"t = z")," to ",r.createElement("code",null,"t = 1")," requires doing this again. We first observe what what we just did is actually evaluate the general interval [0,",r.createElement("code",null,"z"),"], which we wrote down simplified becuase of that zero, but we actually evaluated this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/a51e64df3cb31acf32d0ad5814c8c6cff41ae611.svg",style:{width:"27.45rem",height:"3.97485rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/eca8cfda9b7a3f0819ec38acc53f95af67bb26bb.svg",style:{width:"32.625rem",height:"3.97485rem"}}),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("code",null,"[something · M]")," into ",r.createElement("code",null,"[M · something]"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/5851c9191acb59456e3706a8f6f1a0f85e691eda.svg",style:{width:"30.74985rem",height:"3.97485rem"}}),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0333e63f50b3d43067dc299280f70e9eb98711bb.svg",style:{width:"34.875rem",height:"4.1998500000000005rem"}}),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("code",null,"t = z"),", we get two subcurves that are described as Bézier curves with simple-to-derive coordinates."),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("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("img",{className:"LaTeX SVG",src:"images/latex/44db09290062827525a9b23cbaf91e65063d86d7.svg",style:{width:"58.87485rem",height:"5.70015rem"}}),r.createElement("p",null,"and"),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."))}},reordering:{locale:"en-GB",title:"Lowering and elevating curve order",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"reordering",title:"Lowering and elevating curve order",number:"11"}),r.createElement("p",null,"One interesting property of Bézier curves is that an ",r.createElement("em",null,"n",r.createElement("sup",null,"th"))," order curve can always be perfectly represented by an ",r.createElement("em",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("em",null,"n",r.createElement("sup",null,"th"))," order curve to an ",r.createElement("em",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("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("em",null,"n",r.createElement("sup",null,"th"))," order to ",r.createElement("em",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 "+e.getOrder()+" order Bézier curve",setup:e.setup,draw:e.draw,onKeyDown:e.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."))}},derivatives:{locale:"en-GB",title:"Derivatives",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"derivatives",title:"Derivatives",number:"12"}),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("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("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",{id:"-slow-down-why-is-that-true-"},'"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("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("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("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("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("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("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("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("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("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("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("img",{className:"LaTeX SVG",src:"images/latex/b98618f8061e9e58289abccc06a624a14561d40f.svg",style:{width:"23.70015rem",height:"3.90015rem"}}),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("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."))}},pointvectors:{locale:"en-GB",title:"Tangents and normals",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"pointvectors",title:"Tangents and normals",number:"13"}),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("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("img",{className:"LaTeX SVG",src:"images/latex/3cb2c4f5806142e83c66e1312520d0783d15201c.svg",style:{width:"17.62515rem",height:"2.025rem"}}),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("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 these 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("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("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("em",null,"sin")," and ",r.createElement("em",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("em",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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier tangents and normals",inline:!0,setup:e.setupCubic,draw:e.draw})))}},components:{locale:"en-GB",title:"Component functions",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"components",title:"Component functions",number:"14"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve components",setup:e.setupCubic,draw:e.draw}))}},extremities:{locale:"en-GB",title:"Finding extremities: root finding",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"extremities",title:"Finding extremities: root finding",number:"15"}),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",{id:"quadratic-curves-linear-derivatives-"},"Quadratic curves: linear derivatives."),r.createElement("p",null,'Finding the solution for "where is this line 0" should be trivial:'),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",{id:"cubic-curves-the-quadratic-formula-"},"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 formula"),". If you've seen it before, you'll remember it, and if you haven't, it looks like this:"),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("img",{className:"LaTeX SVG",src:"images/latex/1fc5a3c637460213133bb4576b292e206d67b36f.svg",style:{width:"37.20015rem",height:"2.7rem"}}),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("img",{className:"LaTeX SVG",src:"images/latex/c638a85a950ffb535fbf2056958bed5f44be5067.svg",style:{width:"21.375rem",height:"7.2rem"}}),r.createElement("p",null,"This gives us thee coefficients ",r.createElement("em",null,"a"),", ",r.createElement("em",null,"b"),", and ",r.createElement("em",null,"c")," that are expressed in terms of ",r.createElement("em",null,"v")," values, where the ",r.createElement("em",null,"v")," values are just convenient expressions of our original ",r.createElement("em",null,"p")," values, so we can do some trivial substitution to get:"),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 can now almost trivially find the roots by plugging those values into the quadratic formula. 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",{id:"quartic-curves-cardano-s-algorithm-"},"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("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",{id:"implementing-cardano-s-algorithm-for-finding-all-real-roots"},"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:\nfunction accept(t) {\n  return 0<=t && t <=1;\n}\n\n// A real-cuberoots-only function:\nfunction 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.\nfunction 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  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  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",{id:"quintic-and-higher-order-curves-finding-numerical-solutions"},"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("em",null,"t")," (any will do), and getting the corresponding value at that ",r.createElement("em",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("em",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("em",null,"t"),", at step ",r.createElement("em",null,"n=1"),", we perform the following calculation until ",r.createElement("em",null,"f",r.createElement("sub",null,"y")),"(",r.createElement("em",null,"t"),") is zero, so that the next ",r.createElement("em",null,"t")," is the same as the one we already have:"),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 unless there are requests for it)"),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("em",null,"t=0")," to ",r.createElement("em",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",{id:"in-conclusion-"},"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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier curve extremities",setup:e.setupCubic,draw:e.draw}))}},boundingbox:{locale:"en-GB",title:"Bounding boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"boundingbox",title:"Bounding boxes",number:"16"}),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("em",null,"Computing the bounding box for a Bézier curve"),":"),r.createElement("ol",null,r.createElement("li",null,"Find all ",r.createElement("em",null,"t")," value(s) for the curve derivative's x- and y-roots."),r.createElement("li",null,"Discard any ",r.createElement("em",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("em",null,"t=0"),", ",r.createElement("em",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 all curve extremity points shown on the curve):"),r.createElement(i,{preset:"simple",title:"Quadratic Bézier bounding box",setup:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"simple",title:"Cubic Bézier bounding box",setup:e.setupCubic,draw:e.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."))}},aligning:{locale:"en-GB",title:"Aligning curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"aligning",title:"Aligning curves",number:"17"}),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("em",null,"n")," term polynomial functions into ",r.createElement("em",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("em",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),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("em",null,"x")," coordinates by -120, and all ",r.createElement("em",null,"y")," coordinates by -160, gives us:"),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("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("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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}))}},tightbounds:{locale:"en-GB",title:"Tight boxes",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"tightbounds",title:"Tight boxes",number:"18"}),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:e.setupQuadratic,draw:e.draw}),r.createElement(i,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.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."))}},inflections:{locale:"en-GB",title:"Curve inflections",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"inflections",title:"Curve inflections",number:"19"}),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 behaving oddly: we might have to change the radius of the circle as we slide it along, 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("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("em",null,"C(t)"),", we want to know for which values of ",r.createElement("em",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("em",null,"C(t)")," look like? Actually something that seems not too hard:"),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("em",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("em",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",r.createElement("em",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",{id:"let-s-derive-the-full-formula-anyway"},"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("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("em",null,"y"),":"),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("em",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("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("em",null,"C(t)"),":"),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("img",{className:"LaTeX SVG",src:"images/latex/c1e427616a8a2502abf3cf46415971d0df9a273c.svg",style:{width:"34.72515rem",height:"5.54985rem"}}),r.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",r.createElement("em",null,"C(t) = 0"),"; we use the quadratic formula:"),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")," ",r.createElement("em",null,"x")," is not zero, because divisions by zero are rather useless."),r.createElement("p",null,"Taking that into account, we compute ",r.createElement("em",null,"t"),", we disregard any ",r.createElement("em",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",r.createElement("em",null,"t")," value(s) our curve will inflect."),r.createElement(i,{title:"Finding cubic Bézier curve inflections",setup:e.setupCubic,draw:e.draw}))}},canonical:{locale:"en-GB",title:"Canonical form (for cubic curves)",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"canonical",title:"Canonical form (for cubic curves)",number:"20"}),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:e.setup,draw:e.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("ol",null,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("ol",null,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("ol",null,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",{id:"wait-where-do-those-lines-come-from-"},"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("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("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("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("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 ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Scaling_%28geometry%29"},"do some scaling")," 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("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 ",r.createElement("code",null,"y/x")," rather than ",r.createElement("code",null,"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("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("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("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("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",{id:"how-do-you-track-all-that-"},"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:e.setup,draw:e.draw}))}},arclength:{locale:"en-GB",title:"Unknown title (arclength)",getContent:function(e){return r.createElement("section",null)}},arclengthapprox:{locale:"en-GB",title:"Unknown title (arclengthapprox)",getContent:function(e){return r.createElement("section",null)}},tracing:{locale:"en-GB",title:"Unknown title (tracing)",getContent:function(e){return r.createElement("section",null)}},intersections:{locale:"en-GB",title:"Unknown title (intersections)",getContent:function(e){return r.createElement("section",null)}},curveintersection:{locale:"en-GB",title:"Unknown title (curveintersection)",getContent:function(e){return r.createElement("section",null)}},abc:{locale:"en-GB",title:"Unknown title (abc)",getContent:function(e){return r.createElement("section",null)}},moulding:{locale:"en-GB",title:"Unknown title (moulding)",getContent:function(e){return r.createElement("section",null)}},pointcurves:{locale:"en-GB",title:"Unknown title (pointcurves)",getContent:function(e){return r.createElement("section",null)}},catmullconv:{locale:"en-GB",title:"Unknown title (catmullconv)",getContent:function(e){return r.createElement("section",null)}},catmullmoulding:{locale:"en-GB",title:"Unknown title (catmullmoulding)",getContent:function(e){return r.createElement("section",null)}},polybezier:{locale:"en-GB",title:"Unknown title (polybezier)",getContent:function(e){return r.createElement("section",null)}},shapes:{locale:"en-GB",title:"Unknown title (shapes)",getContent:function(e){return r.createElement("section",null)}},projections:{locale:"en-GB",title:"Unknown title (projections)",getContent:function(e){return r.createElement("section",null)}},offsetting:{locale:"en-GB",title:"Unknown title (offsetting)",getContent:function(e){return r.createElement("section",null)}},graduatedoffset:{locale:"en-GB",title:"Unknown title (graduatedoffset)",getContent:function(e){return r.createElement("section",null)}},circles:{locale:"en-GB",title:"Unknown title (circles)",getContent:function(e){return r.createElement("section",null)}},circles_cubic:{locale:"en-GB",title:"Unknown title (circles_cubic)",getContent:function(e){return r.createElement("section",null)}},arcapproximation:{locale:"en-GB",title:"Unknown title (arcapproximation)",getContent:function(e){return r.createElement("section",null)}},bsplines:{locale:"en-GB",title:"Unknown title (bsplines)",getContent:function(e){return r.createElement("section",null)}},comments:{locale:"en-GB",title:"Unknown title (comments)",getContent:function(e){return r.createElement("section",null)}},"locale-switcher":{locale:"en-GB",title:"locale-switcher",getContent:function(e){return r.createElement("section",null,r.createElement("p",null,"Read this in your own language:"),r.createElement("ul",null,r.createElement("li",null,r.createElement("a",{href:"?locale=en-GB"},"English")),r.createElement("li",null,r.createElement("a",{href:"?locale=ja-JP"},"日本語")),r.createElement("li",null,r.createElement("a",{href:"?locale=zh-CN"},"中文"))),r.createElement("p",null,"Don't see your language listed? ",r.createElement("a",{href:"https://github.com/Pomax/BezierInfo-2/wiki/localize"},"Help translate this content!")))}}}},function(e,t,n){e.exports=n(65)},function(e,t,n){!function(){"use strict";var t=n(66),r=function(e){this.curves=[],this._3d=!1,e&&(this.curves=e,this._3d=this.curves[0]._3d)};r.prototype={valueOf:function(){return this.toString()},toString:function(){return t.pointsToString(this.points)},addCurve:function(e){this.curves.push(e),this._3d=this._3d||e._3d},length:function(){return this.curves.map(function(e){return e.length()}).reduce(function(e,t){return e+t})},curve:function(e){return this.curves[e]},bbox:function(){for(var e=this.curves,n=e[0].bbox(),r=1;r<e.length;r++)t.expandbox(n,e[r].bbox());return n},offset:function(e){var t=[];return this.curves.forEach(function(n){t=t.concat(n.offset(e))}),new r(t)}},e.exports=r}()},function(e,t,n){(function(e){var n,r;/**
  * @license
  *
  * chroma.js - JavaScript library for color conversions
@@ -63,7 +63,7 @@ className:"LaTeX SVG",src:"images/latex/cc3850bd6d6ab81fa414e81f54d4d4e53bcf69c8
  * EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *
  */
-(function(){var i,a,o,s,l,u,c,h,d,f,p,m,g,v,y,w,b,_,x,E,C,k,S,P,T,N,M,I,L,A,O,B,z,D,R,j,F,q,V,U,W,G,H,X,K,Q,Y,Z,$,J,ee,te,ne,re,ie,ae,oe,se,le,ue,ce,he,de,fe,pe,me,ge,ve,ye,we,be,_e,xe,Ee,Ce,ke,Se,Pe,Te=[].slice;Ee=function(){var e,t,n,r,i;for(e={},i="Boolean Number String Function Array Date RegExp Undefined Null".split(" "),r=0,t=i.length;r<t;r++)n=i[r],e["[object "+n+"]"]=n.toLowerCase();return function(t){var n;return n=Object.prototype.toString.call(t),e[n]||"object"}}(),K=function(e,t,n){return null==t&&(t=0),null==n&&(n=1),e<t&&(e=t),e>n&&(e=n),e},Ce=function(e){return e.length>=3?[].slice.call(e):e[0]},E=function(e){var t;for(t in e)t<3?(e[t]<0&&(e[t]=0),e[t]>255&&(e[t]=255)):3===t&&(e[t]<0&&(e[t]=0),e[t]>1&&(e[t]=1));return e},s=Math.PI,ye=Math.round,S=Math.cos,I=Math.floor,re=Math.pow,Q=Math.log,be=Math.sin,_e=Math.sqrt,g=Math.atan2,$=Math.max,m=Math.abs,c=2*s,l=s/3,a=s/180,u=180/s,x=function(){return arguments[0]instanceof i?arguments[0]:function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,arguments,function(){})},p=[],"undefined"!=typeof e&&null!==e&&null!=e.exports&&(e.exports=x),n=[],r=function(){return x}.apply(t,n),!(void 0!==r&&(e.exports=r)),x.version="1.1.1",f={},h=[],d=!1,i=function(){function e(){var e,t,n,r,i,a,o,s,l;for(a=this,t=[],s=0,r=arguments.length;s<r;s++)e=arguments[s],null!=e&&t.push(e);if(o=t[t.length-1],null!=f[o])a._rgb=E(f[o](Ce(t.slice(0,-1))));else{for(d||(h=h.sort(function(e,t){return t.p-e.p}),d=!0),l=0,i=h.length;l<i&&(n=h[l],!(o=n.test.apply(n,t)));l++);o&&(a._rgb=E(f[o].apply(f,t)))}null==a._rgb&&console.warn("unknown format: "+t),null==a._rgb&&(a._rgb=[0,0,0]),3===a._rgb.length&&a._rgb.push(1)}return e.prototype.alpha=function(e){return arguments.length?(this._rgb[3]=e,this):this._rgb[3]},e.prototype.toString=function(){return this.name()},e}(),x._input=f,/**
+(function(){var i,a,o,s,l,u,c,h,d,f,p,m,g,v,y,w,b,_,x,E,C,k,S,P,T,N,M,L,I,A,O,B,z,D,R,j,F,q,V,U,W,G,H,X,K,Q,Y,Z,$,J,ee,te,ne,re,ie,ae,oe,se,le,ue,ce,he,de,fe,pe,me,ge,ve,ye,we,be,_e,xe,Ee,Ce,ke,Se,Pe,Te=[].slice;Ee=function(){var e,t,n,r,i;for(e={},i="Boolean Number String Function Array Date RegExp Undefined Null".split(" "),r=0,t=i.length;r<t;r++)n=i[r],e["[object "+n+"]"]=n.toLowerCase();return function(t){var n;return n=Object.prototype.toString.call(t),e[n]||"object"}}(),K=function(e,t,n){return null==t&&(t=0),null==n&&(n=1),e<t&&(e=t),e>n&&(e=n),e},Ce=function(e){return e.length>=3?[].slice.call(e):e[0]},E=function(e){var t;for(t in e)t<3?(e[t]<0&&(e[t]=0),e[t]>255&&(e[t]=255)):3===t&&(e[t]<0&&(e[t]=0),e[t]>1&&(e[t]=1));return e},s=Math.PI,ye=Math.round,S=Math.cos,L=Math.floor,re=Math.pow,Q=Math.log,be=Math.sin,_e=Math.sqrt,g=Math.atan2,$=Math.max,m=Math.abs,c=2*s,l=s/3,a=s/180,u=180/s,x=function(){return arguments[0]instanceof i?arguments[0]:function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,arguments,function(){})},p=[],"undefined"!=typeof e&&null!==e&&null!=e.exports&&(e.exports=x),n=[],r=function(){return x}.apply(t,n),!(void 0!==r&&(e.exports=r)),x.version="1.1.1",f={},h=[],d=!1,i=function(){function e(){var e,t,n,r,i,a,o,s,l;for(a=this,t=[],s=0,r=arguments.length;s<r;s++)e=arguments[s],null!=e&&t.push(e);if(o=t[t.length-1],null!=f[o])a._rgb=E(f[o](Ce(t.slice(0,-1))));else{for(d||(h=h.sort(function(e,t){return t.p-e.p}),d=!0),l=0,i=h.length;l<i&&(n=h[l],!(o=n.test.apply(n,t)));l++);o&&(a._rgb=E(f[o].apply(f,t)))}null==a._rgb&&console.warn("unknown format: "+t),null==a._rgb&&(a._rgb=[0,0,0]),3===a._rgb.length&&a._rgb.push(1)}return e.prototype.alpha=function(e){return arguments.length?(this._rgb[3]=e,this):this._rgb[3]},e.prototype.toString=function(){return this.name()},e}(),x._input=f,/**
   	ColorBrewer colors for chroma.js
   
   	Copyright (c) 2002 Cynthia Brewer, Mark Harrower, and The 
@@ -81,8 +81,8 @@ className:"LaTeX SVG",src:"images/latex/cc3850bd6d6ab81fa414e81f54d4d4e53bcf69c8
   
       @preserve
    */
-x.brewer=b={OrRd:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"],PuBu:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"],BuPu:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"],Oranges:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"],BuGn:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"],YlOrBr:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"],YlGn:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"],Reds:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"],RdPu:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"],Greens:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"],YlGnBu:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],Purples:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"],GnBu:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],Greys:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"],YlOrRd:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"],PuRd:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"],Blues:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"],PuBuGn:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"],Spectral:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],RdYlGn:["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],RdBu:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],PiYG:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],PRGn:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],RdYlBu:["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],BrBG:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],RdGy:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],PuOr:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],Set2:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"],Accent:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"],Set1:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"],Set3:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"],Dark2:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"],Paired:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"],Pastel2:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"],Pastel1:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]},ke={indigo:"#4b0082",gold:"#ffd700",hotpink:"#ff69b4",firebrick:"#b22222",indianred:"#cd5c5c",yellow:"#ffff00",mistyrose:"#ffe4e1",darkolivegreen:"#556b2f",olive:"#808000",darkseagreen:"#8fbc8f",pink:"#ffc0cb",tomato:"#ff6347",lightcoral:"#f08080",orangered:"#ff4500",navajowhite:"#ffdead",lime:"#00ff00",palegreen:"#98fb98",darkslategrey:"#2f4f4f",greenyellow:"#adff2f",burlywood:"#deb887",seashell:"#fff5ee",mediumspringgreen:"#00fa9a",fuchsia:"#ff00ff",papayawhip:"#ffefd5",blanchedalmond:"#ffebcd",chartreuse:"#7fff00",dimgray:"#696969",black:"#000000",peachpuff:"#ffdab9",springgreen:"#00ff7f",aquamarine:"#7fffd4",white:"#ffffff",orange:"#ffa500",lightsalmon:"#ffa07a",darkslategray:"#2f4f4f",brown:"#a52a2a",ivory:"#fffff0",dodgerblue:"#1e90ff",peru:"#cd853f",lawngreen:"#7cfc00",chocolate:"#d2691e",crimson:"#dc143c",forestgreen:"#228b22",darkgrey:"#a9a9a9",lightseagreen:"#20b2aa",cyan:"#00ffff",mintcream:"#f5fffa",silver:"#c0c0c0",antiquewhite:"#faebd7",mediumorchid:"#ba55d3",skyblue:"#87ceeb",gray:"#808080",darkturquoise:"#00ced1",goldenrod:"#daa520",darkgreen:"#006400",floralwhite:"#fffaf0",darkviolet:"#9400d3",darkgray:"#a9a9a9",moccasin:"#ffe4b5",saddlebrown:"#8b4513",grey:"#808080",darkslateblue:"#483d8b",lightskyblue:"#87cefa",lightpink:"#ffb6c1",mediumvioletred:"#c71585",slategrey:"#708090",red:"#ff0000",deeppink:"#ff1493",limegreen:"#32cd32",darkmagenta:"#8b008b",palegoldenrod:"#eee8aa",plum:"#dda0dd",turquoise:"#40e0d0",lightgrey:"#d3d3d3",lightgoldenrodyellow:"#fafad2",darkgoldenrod:"#b8860b",lavender:"#e6e6fa",maroon:"#800000",yellowgreen:"#9acd32",sandybrown:"#f4a460",thistle:"#d8bfd8",violet:"#ee82ee",navy:"#000080",magenta:"#ff00ff",dimgrey:"#696969",tan:"#d2b48c",rosybrown:"#bc8f8f",olivedrab:"#6b8e23",blue:"#0000ff",lightblue:"#add8e6",ghostwhite:"#f8f8ff",honeydew:"#f0fff0",cornflowerblue:"#6495ed",slateblue:"#6a5acd",linen:"#faf0e6",darkblue:"#00008b",powderblue:"#b0e0e6",seagreen:"#2e8b57",darkkhaki:"#bdb76b",snow:"#fffafa",sienna:"#a0522d",mediumblue:"#0000cd",royalblue:"#4169e1",lightcyan:"#e0ffff",green:"#008000",mediumpurple:"#9370db",midnightblue:"#191970",cornsilk:"#fff8dc",paleturquoise:"#afeeee",bisque:"#ffe4c4",slategray:"#708090",darkcyan:"#008b8b",khaki:"#f0e68c",wheat:"#f5deb3",teal:"#008080",darkorchid:"#9932cc",deepskyblue:"#00bfff",salmon:"#fa8072",darkred:"#8b0000",steelblue:"#4682b4",palevioletred:"#db7093",lightslategray:"#778899",aliceblue:"#f0f8ff",lightslategrey:"#778899",lightgreen:"#90ee90",orchid:"#da70d6",gainsboro:"#dcdcdc",mediumseagreen:"#3cb371",lightgray:"#d3d3d3",mediumturquoise:"#48d1cc",lemonchiffon:"#fffacd",cadetblue:"#5f9ea0",lightyellow:"#ffffe0",lavenderblush:"#fff0f5",coral:"#ff7f50",purple:"#800080",aqua:"#00ffff",whitesmoke:"#f5f5f5",mediumslateblue:"#7b68ee",darkorange:"#ff8c00",mediumaquamarine:"#66cdaa",darksalmon:"#e9967a",beige:"#f5f5dc",blueviolet:"#8a2be2",azure:"#f0ffff",lightsteelblue:"#b0c4de",oldlace:"#fdf5e6",rebeccapurple:"#663399"},x.colors=k=ke,U=function(){var e,t,n,r,i,a,s,l,u;return t=Ce(arguments),i=t[0],e=t[1],n=t[2],l=(i+16)/116,s=isNaN(e)?l:l+e/500,u=isNaN(n)?l:l-n/200,l=o.Yn*W(l),s=o.Xn*W(s),u=o.Zn*W(u),a=Pe(3.2404542*s-1.5371385*l-.4985314*u),r=Pe(-.969266*s+1.8760108*l+.041556*u),n=Pe(.0556434*s-.2040259*l+1.0572252*u),a=K(a,0,255),r=K(r,0,255),n=K(n,0,255),[a,r,n,t.length>3?t[3]:1]},Pe=function(e){return ye(255*(e<=.00304?12.92*e:1.055*re(e,1/2.4)-.055))},W=function(e){return e>o.t1?e*e*e:o.t2*(e-o.t0)},o={Kn:18,Xn:.95047,Yn:1,Zn:1.08883,t0:.137931034,t1:.206896552,t2:.12841855,t3:.008856452},ce=function(){var e,t,n,r,i,a,o,s;return r=Ce(arguments),n=r[0],t=r[1],e=r[2],i=me(n,t,e),a=i[0],o=i[1],s=i[2],[116*o-16,500*(a-o),200*(o-s)]},ge=function(e){return(e/=255)<=.04045?e/12.92:re((e+.055)/1.055,2.4)},Se=function(e){return e>o.t3?re(e,1/3):e/o.t2+o.t0},me=function(){var e,t,n,r,i,a,s;return r=Ce(arguments),n=r[0],t=r[1],e=r[2],n=ge(n),t=ge(t),e=ge(e),i=Se((.4124564*n+.3575761*t+.1804375*e)/o.Xn),a=Se((.2126729*n+.7151522*t+.072175*e)/o.Yn),s=Se((.0193339*n+.119192*t+.9503041*e)/o.Zn),[i,a,s]},x.lab=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["lab"]),function(){})},f.lab=U,i.prototype.lab=function(){return ce(this._rgb)},v=function(e){var t,n,r,i,a,o,s,l,u,c,h;return e=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(x(i));return r}(),2===e.length?(u=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(i.lab());return r}(),a=u[0],o=u[1],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;n<=2;t=++n)r.push(a[t]+e*(o[t]-a[t]));return r}(),x.lab.apply(x,n)}):3===e.length?(c=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(i.lab());return r}(),a=c[0],o=c[1],s=c[2],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;n<=2;t=++n)r.push((1-e)*(1-e)*a[t]+2*(1-e)*e*o[t]+e*e*s[t]);return r}(),x.lab.apply(x,n)}):4===e.length?(h=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(i.lab());return r}(),a=h[0],o=h[1],s=h[2],l=h[3],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;n<=2;t=++n)r.push((1-e)*(1-e)*(1-e)*a[t]+3*(1-e)*(1-e)*e*o[t]+3*(1-e)*e*e*s[t]+e*e*e*l[t]);return r}(),x.lab.apply(x,n)}):5===e.length&&(n=v(e.slice(0,3)),r=v(e.slice(2,5)),t=function(e){return e<.5?n(2*e):r(2*(e-.5))}),t},x.bezier=function(e){var t;return t=v(e),t.scale=function(){return x.scale(t)},t},x.cubehelix=function(e,t,n,r,i){var a,o,s;return null==e&&(e=300),null==t&&(t=-1.5),null==n&&(n=1),null==r&&(r=1),null==i&&(i=[0,1]),o=i[1]-i[0],a=0,s=function(s){var l,u,h,d,f,p,m,g,v;return l=c*((e+120)/360+t*s),m=re(i[0]+o*s,r),p=0!==a?n[0]+s*a:n,u=p*m*(1-m)/2,d=S(l),v=be(l),g=m+u*(-.14861*d+1.78277*v),f=m+u*(-.29227*d-.90649*v),h=m+u*(1.97294*d),x(E([255*g,255*f,255*h]))},s.start=function(t){return null==t?e:(e=t,s)},s.rotations=function(e){return null==e?t:(t=e,s)},s.gamma=function(e){return null==e?r:(r=e,s)},s.hue=function(e){return null==e?n:(n=e,"array"===Ee(n)?(a=n[1]-n[0],0===a&&(n=n[1])):a=0,s)},s.lightness=function(e){return null==e?i:(i=e,"array"===Ee(i)?(o=i[1]-i[0],0===o&&(i=i[1])):o=0,s)},s.scale=function(){return x.scale(s)},s.hue(n),s},x.random=function(){var e,t,n,r;for(t="0123456789abcdef",e="#",n=r=0;r<6;n=++r)e+=t.charAt(I(16*Math.random()));return new i(e)},x.average=function(e){var t,n,r,a,o,s,l,u,c;for(u=a=n=t=0,o=e.length,l=0,s=e.length;l<s;l++)r=e[l],c=x(r).rgba(),u+=c[0],a+=c[1],n+=c[2],t+=c[3];return new i(u/o,a/o,n/o,t/o)},f.rgb=function(){var e,t,n,r;t=Ce(arguments),n=[];for(e in t)r=t[e],n.push(r);return n},x.rgb=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["rgb"]),function(){})},i.prototype.rgb=function(){return this._rgb.slice(0,3)},i.prototype.rgba=function(){return this._rgb},h.push({p:15,test:function(e){var t;return t=Ce(arguments),"array"===Ee(t)&&3===t.length?"rgb":4===t.length&&"number"===Ee(t[3])&&t[3]>=0&&t[3]<=1?"rgb":void 0}}),L=function(e){var t,n,r,i,a,o;if(e.match(/^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/))return 4!==e.length&&7!==e.length||(e=e.substr(1)),3===e.length&&(e=e.split(""),e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),o=parseInt(e,16),i=o>>16,r=o>>8&255,n=255&o,[i,r,n,1];if(e.match(/^#?([A-Fa-f0-9]{8})$/))return 9===e.length&&(e=e.substr(1)),o=parseInt(e,16),i=o>>24&255,r=o>>16&255,n=o>>8&255,t=ye((255&o)/255*100)/100,[i,r,n,t];if(null!=f.css&&(a=f.css(e)))return a;throw"unknown color: "+e},oe=function(e,t){var n,r,i,a,o,s,l;return null==t&&(t="rgb"),o=e[0],i=e[1],r=e[2],n=e[3],l=o<<16|i<<8|r,s="000000"+l.toString(16),s=s.substr(s.length-6),a="0"+ye(255*n).toString(16),a=a.substr(a.length-2),"#"+function(){switch(t.toLowerCase()){case"rgba":return s+a;case"argb":return a+s;default:return s}}()},f.hex=function(e){return L(e)},x.hex=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hex"]),function(){})},i.prototype.hex=function(e){return null==e&&(e="rgb"),oe(this._rgb,e)},h.push({p:10,test:function(e){if(1===arguments.length&&"string"===Ee(e))return"hex"}}),B=function(){var e,t,n,r,i,a,o,s,l,u,c,h,d,f;if(e=Ce(arguments),i=e[0],c=e[1],o=e[2],0===c)l=r=t=255*o;else{for(f=[0,0,0],n=[0,0,0],d=o<.5?o*(1+c):o+c-o*c,h=2*o-d,i/=360,f[0]=i+1/3,f[1]=i,f[2]=i-1/3,a=s=0;s<=2;a=++s)f[a]<0&&(f[a]+=1),f[a]>1&&(f[a]-=1),6*f[a]<1?n[a]=h+6*(d-h)*f[a]:2*f[a]<1?n[a]=d:3*f[a]<2?n[a]=h+(d-h)*(2/3-f[a])*6:n[a]=h;u=[ye(255*n[0]),ye(255*n[1]),ye(255*n[2])],l=u[0],r=u[1],t=u[2]}return e.length>3?[l,r,t,e[3]]:[l,r,t]},le=function(e,t,n){var r,i,a,o,s;return void 0!==e&&e.length>=3&&(o=e,e=o[0],t=o[1],n=o[2]),e/=255,t/=255,n/=255,a=Math.min(e,t,n),$=Math.max(e,t,n),i=($+a)/2,$===a?(s=0,r=Number.NaN):s=i<.5?($-a)/($+a):($-a)/(2-$-a),e===$?r=(t-n)/($-a):t===$?r=2+(n-e)/($-a):n===$&&(r=4+(e-t)/($-a)),r*=60,r<0&&(r+=360),[r,s,i]},x.hsl=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hsl"]),function(){})},f.hsl=B,i.prototype.hsl=function(){return le(this._rgb)},z=function(){var e,t,n,r,i,a,o,s,l,u,c,h,d,f,p,m,g,v;if(e=Ce(arguments),i=e[0],m=e[1],v=e[2],v*=255,0===m)l=r=t=v;else switch(360===i&&(i=0),i>360&&(i-=360),i<0&&(i+=360),i/=60,a=I(i),n=i-a,o=v*(1-m),s=v*(1-m*n),g=v*(1-m*(1-n)),a){case 0:u=[v,g,o],l=u[0],r=u[1],t=u[2];break;case 1:c=[s,v,o],l=c[0],r=c[1],t=c[2];break;case 2:h=[o,v,g],l=h[0],r=h[1],t=h[2];break;case 3:d=[o,s,v],l=d[0],r=d[1],t=d[2];break;case 4:f=[g,o,v],l=f[0],r=f[1],t=f[2];break;case 5:p=[v,o,s],l=p[0],r=p[1],t=p[2]}return l=ye(l),r=ye(r),t=ye(t),[l,r,t,e.length>3?e[3]:1]},ue=function(){var e,t,n,r,i,a,o,s,l;return o=Ce(arguments),a=o[0],n=o[1],e=o[2],i=Math.min(a,n,e),$=Math.max(a,n,e),t=$-i,l=$/255,0===$?(r=Number.NaN,s=0):(s=t/$,a===$&&(r=(n-e)/t),n===$&&(r=2+(e-a)/t),e===$&&(r=4+(a-n)/t),r*=60,r<0&&(r+=360)),[r,s,l]},x.hsv=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hsv"]),function(){})},f.hsv=z,i.prototype.hsv=function(){return ue(this._rgb)},te=function(e){var t,n,r;return"number"===Ee(e)&&e>=0&&e<=16777215?(r=e>>16,n=e>>8&255,t=255&e,[r,n,t,1]):(console.warn("unknown num color: "+e),[0,0,0,1])},fe=function(){var e,t,n,r;return r=Ce(arguments),n=r[0],t=r[1],e=r[2],(n<<16)+(t<<8)+e},x.num=function(e){return new i(e,"num")},i.prototype.num=function(e){return null==e&&(e="rgb"),fe(this._rgb,e)},f.num=te,h.push({p:10,test:function(e){if(1===arguments.length&&"number"===Ee(e)&&e>=0&&e<=16777215)return"num"}}),P=function(e){var t,n,r,i,a,o,s,l;if(e=e.toLowerCase(),null!=x.colors&&x.colors[e])return L(x.colors[e]);if(a=e.match(/rgb\(\s*(\-?\d+),\s*(\-?\d+)\s*,\s*(\-?\d+)\s*\)/)){for(s=a.slice(1,4),i=o=0;o<=2;i=++o)s[i]=+s[i];s[3]=1}else if(a=e.match(/rgba\(\s*(\-?\d+),\s*(\-?\d+)\s*,\s*(\-?\d+)\s*,\s*([01]|[01]?\.\d+)\)/))for(s=a.slice(1,5),i=l=0;l<=3;i=++l)s[i]=+s[i];else if(a=e.match(/rgb\(\s*(\-?\d+(?:\.\d+)?)%,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*\)/)){for(s=a.slice(1,4),i=t=0;t<=2;i=++t)s[i]=ye(2.55*s[i]);s[3]=1}else if(a=e.match(/rgba\(\s*(\-?\d+(?:\.\d+)?)%,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)/)){for(s=a.slice(1,5),i=n=0;n<=2;i=++n)s[i]=ye(2.55*s[i]);s[3]=+s[3]}else(a=e.match(/hsl\(\s*(\-?\d+(?:\.\d+)?),\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*\)/))?(r=a.slice(1,4),r[1]*=.01,r[2]*=.01,s=B(r),s[3]=1):(a=e.match(/hsla\(\s*(\-?\d+(?:\.\d+)?),\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)/))&&(r=a.slice(1,4),r[1]*=.01,r[2]*=.01,s=B(r),s[3]=+a[4]);return s},ae=function(e){var t;return t=e[3]<1?"rgba":"rgb","rgb"===t?t+"("+e.slice(0,3).map(ye).join(",")+")":"rgba"===t?t+"("+e.slice(0,3).map(ye).join(",")+","+e[3]+")":void 0},ve=function(e){return ye(100*e)/100},O=function(e,t){var n;return n=t<1?"hsla":"hsl",e[0]=ve(e[0]||0),e[1]=ve(100*e[1])+"%",e[2]=ve(100*e[2])+"%","hsla"===n&&(e[3]=t),n+"("+e.join(",")+")"},f.css=function(e){return P(e)},x.css=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["css"]),function(){})},i.prototype.css=function(e){return null==e&&(e="rgb"),"rgb"===e.slice(0,3)?ae(this._rgb):"hsl"===e.slice(0,3)?O(this.hsl(),this.alpha()):void 0},f.named=function(e){return L(ke[e])},h.push({p:20,test:function(e){if(1===arguments.length&&null!=ke[e])return"named"}}),i.prototype.name=function(e){var t,n;arguments.length&&(ke[e]&&(this._rgb=L(ke[e])),this._rgb[3]=1),t=this.hex();for(n in ke)if(t===ke[n])return n;return t},G=function(){var e,t,n,r;return r=Ce(arguments),n=r[0],e=r[1],t=r[2],t*=a,[n,S(t)*e,be(t)*e]},H=function(){var e,t,n,r,i,a,o,s,l,u,c;return n=Ce(arguments),s=n[0],i=n[1],o=n[2],u=G(s,i,o),e=u[0],t=u[1],r=u[2],c=U(e,t,r),l=c[0],a=c[1],r=c[2],[K(l,0,255),K(a,0,255),K(r,0,255),n.length>3?n[3]:1]},V=function(){var e,t,n,r,i,a;return a=Ce(arguments),i=a[0],e=a[1],t=a[2],n=_e(e*e+t*t),r=(g(t,e)*u+360)%360,0===ye(1e4*n)&&(r=Number.NaN),[i,n,r]},he=function(){var e,t,n,r,i,a,o;return a=Ce(arguments),i=a[0],n=a[1],t=a[2],o=ce(i,n,t),r=o[0],e=o[1],t=o[2],V(r,e,t)},x.lch=function(){var e;return e=Ce(arguments),new i(e,"lch")},x.hcl=function(){var e;return e=Ce(arguments),new i(e,"hcl")},f.lch=H,f.hcl=function(){var e,t,n,r;return r=Ce(arguments),t=r[0],e=r[1],n=r[2],H([n,e,t])},i.prototype.lch=function(){return he(this._rgb)},i.prototype.hcl=function(){return he(this._rgb).reverse()},ie=function(e){var t,n,r,i,a,o,s,l,u;return null==e&&(e="rgb"),l=Ce(arguments),s=l[0],i=l[1],t=l[2],s/=255,i/=255,t/=255,a=1-Math.max(s,Math.max(i,t)),r=a<1?1/(1-a):0,n=(1-s-a)*r,o=(1-i-a)*r,u=(1-t-a)*r,[n,o,u,a]},C=function(){var e,t,n,r,i,a,o,s,l;return t=Ce(arguments),r=t[0],o=t[1],l=t[2],a=t[3],e=t.length>4?t[4]:1,1===a?[0,0,0,e]:(s=r>=1?0:ye(255*(1-r)*(1-a)),i=o>=1?0:ye(255*(1-o)*(1-a)),n=l>=1?0:ye(255*(1-l)*(1-a)),[s,i,n,e])},f.cmyk=function(){return C(Ce(arguments))},x.cmyk=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["cmyk"]),function(){})},i.prototype.cmyk=function(){return ie(this._rgb)},f.gl=function(){var e,t,n,r,i;for(r=function(){var e,n;e=Ce(arguments),n=[];for(t in e)i=e[t],n.push(i);return n}.apply(this,arguments),e=n=0;n<=2;e=++n)r[e]*=255;return r},x.gl=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["gl"]),function(){})},i.prototype.gl=function(){var e;return e=this._rgb,[e[0]/255,e[1]/255,e[2]/255,e[3]]},de=function(e,t,n){var r;return r=Ce(arguments),e=r[0],t=r[1],n=r[2],e=Y(e),t=Y(t),n=Y(n),.2126*e+.7152*t+.0722*n},Y=function(e){return e/=255,e<=.03928?e/12.92:re((e+.055)/1.055,2.4)},p=[],D=function(e,t,n,r){var i,a,o,s;for(null==n&&(n=.5),null==r&&(r="rgb"),"object"!==Ee(e)&&(e=x(e)),"object"!==Ee(t)&&(t=x(t)),o=0,a=p.length;o<a;o++)if(i=p[o],r===i[0]){s=i[1](e,t,n,r);break}if(null==s)throw"color mode "+r+" is not supported";return s.alpha(e.alpha()+n*(t.alpha()-e.alpha())),s},x.interpolate=D,i.prototype.interpolate=function(e,t,n){return D(this,e,t,n)},x.mix=D,i.prototype.mix=i.prototype.interpolate,q=function(e,t,n,r){var a,o;return a=e._rgb,o=t._rgb,new i(a[0]+n*(o[0]-a[0]),a[1]+n*(o[1]-a[1]),a[2]+n*(o[2]-a[2]),r)},p.push(["rgb",q]),i.prototype.luminance=function(e,t){var n,r,i,a;return null==t&&(t="rgb"),arguments.length?(0===e?this._rgb=[0,0,0,this._rgb[3]]:1===e?this._rgb=[255,255,255,this._rgb[3]]:(r=1e-7,i=20,a=function(n,o){var s,l;return l=n.interpolate(o,.5,t),s=l.luminance(),Math.abs(e-s)<r||!i--?l:s>e?a(n,l):a(l,o)},n=de(this._rgb),this._rgb=(n>e?a(x("black"),this):a(this,x("white"))).rgba()),this):de(this._rgb)},xe=function(e){var t,n,r,i;return i=e/100,i<66?(r=255,n=-155.25485562709179-.44596950469579133*(n=i-2)+104.49216199393888*Q(n),t=i<20?0:-254.76935184120902+.8274096064007395*(t=i-10)+115.67994401066147*Q(t)):(r=351.97690566805693+.114206453784165*(r=i-55)-40.25366309332127*Q(r),n=325.4494125711974+.07943456536662342*(n=i-50)-28.0852963507957*Q(n),t=255),E([r,n,t])},pe=function(){var e,t,n,r,i,a,o,s,l;for(o=Ce(arguments),a=o[0],n=o[1],e=o[2],i=1e3,r=4e4,t=.4;r-i>t;)l=.5*(r+i),s=xe(l),s[2]/s[0]>=e/a?r=l:i=l;return ye(l)},x.temperature=x.kelvin=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["temperature"]),function(){})},f.temperature=f.kelvin=f.K=xe,i.prototype.temperature=function(){return pe(this._rgb)},i.prototype.kelvin=i.prototype.temperature,x.contrast=function(e,t){var n,r,a,o;return"string"!==(a=Ee(e))&&"number"!==a||(e=new i(e)),"string"!==(o=Ee(t))&&"number"!==o||(t=new i(t)),n=e.luminance(),r=t.luminance(),n>r?(n+.05)/(r+.05):(r+.05)/(n+.05)},i.prototype.get=function(e){var t,n,r,i,a,o;return r=this,a=e.split("."),i=a[0],t=a[1],o=r[i](),t?(n=i.indexOf(t),n>-1?o[n]:console.warn("unknown channel "+t+" in mode "+i)):o},i.prototype.set=function(e,t){var n,r,i,a,o,s;if(i=this,o=e.split("."),a=o[0],n=o[1],n)if(s=i[a](),r=a.indexOf(n),r>-1)if("string"===Ee(t))switch(t.charAt(0)){case"+":s[r]+=+t;break;case"-":s[r]+=+t;break;case"*":s[r]*=+t.substr(1);break;case"/":s[r]/=+t.substr(1);break;default:s[r]=+t}else s[r]=t;else console.warn("unknown channel "+n+" in mode "+a);else s=t;return i._rgb=x(s,a).alpha(i.alpha())._rgb,i},i.prototype.darken=function(e){var t,n;return null==e&&(e=1),n=this,t=n.lab(),t[0]-=o.Kn*e,x.lab(t).alpha(n.alpha())},i.prototype.brighten=function(e){return null==e&&(e=1),this.darken(-e)},i.prototype.darker=i.prototype.darken,i.prototype.brighter=i.prototype.brighten,i.prototype.saturate=function(e){var t,n;return null==e&&(e=1),n=this,t=n.lch(),t[1]+=e*o.Kn,t[1]<0&&(t[1]=0),x.lch(t).alpha(n.alpha())},i.prototype.desaturate=function(e){return null==e&&(e=1),this.saturate(-e)},i.prototype.premultiply=function(){var e,t;return t=this.rgb(),e=this.alpha(),x(t[0]*e,t[1]*e,t[2]*e,e)},y=function(e,t,n){if(!y[n])throw"unknown blend mode "+n;return y[n](e,t)},w=function(e){return function(t,n){var r,i;return r=x(n).rgb(),i=x(t).rgb(),x(e(r,i),"rgb")}},M=function(e){return function(t,n){var r,i,a;for(a=[],r=i=0;i<=3;r=++i)a[r]=e(t[r],n[r]);return a}},ee=function(e,t){return e},J=function(e,t){return e*t/255},T=function(e,t){return e>t?t:e},X=function(e,t){return e>t?e:t},we=function(e,t){return 255*(1-(1-e/255)*(1-t/255))},ne=function(e,t){return t<128?2*e*t/255:255*(1-2*(1-e/255)*(1-t/255))},_=function(e,t){return 255*(1-(1-t/255)/(e/255))},N=function(e,t){return 255===e?255:(e=255*(t/255)/(1-e/255),e>255?255:e)},y.normal=w(M(ee)),y.multiply=w(M(J)),y.screen=w(M(we)),y.overlay=w(M(ne)),y.darken=w(M(T)),y.lighten=w(M(X)),y.dodge=w(M(N)),y.burn=w(M(_)),x.blend=y,x.analyze=function(e){var t,n,r,i;for(r={min:Number.MAX_VALUE,max:Number.MAX_VALUE*-1,sum:0,values:[],count:0},n=0,t=e.length;n<t;n++)i=e[n],null==i||isNaN(i)||(r.values.push(i),r.sum+=i,i<r.min&&(r.min=i),i>r.max&&(r.max=i),r.count+=1);return r.domain=[r.min,r.max],r.limits=function(e,t){return x.limits(r,e,t)},r},x.scale=function(e,t){var n,r,i,a,o,s,l,u,c,h,d,f,p,m,g,v,y,w,b,_,E;return c="rgb",h=x("#ccc"),m=0,s=!1,o=[0,1],p=[],f=[0,0],n=!1,i=[],d=!1,u=0,l=1,a=!1,r={},_=function(e){var t,n,r,a,o,s,l;if(null==e&&(e=["#fff","#000"]),null!=e&&"string"===Ee(e)&&null!=(null!=(a=x.brewer)?a[e]:void 0)&&(e=x.brewer[e]),"array"===Ee(e)){for(e=e.slice(0),t=r=0,o=e.length-1;0<=o?r<=o:r>=o;t=0<=o?++r:--r)n=e[t],"string"===Ee(n)&&(e[t]=x(n));for(p.length=0,t=l=0,s=e.length-1;0<=s?l<=s:l>=s;t=0<=s?++l:--l)p.push(t/(e.length-1))}return b(),i=e},y=function(e){var t,r;if(null!=n){for(r=n.length-1,t=0;t<r&&e>=n[t];)t++;return t-1}return 0},E=function(e){return e},g=function(e){var t,r,i,a,o;return o=e,n.length>2&&(a=n.length-1,t=y(e),i=n[0]+(n[1]-n[0])*(0+.5*m),r=n[a-1]+(n[a]-n[a-1])*(1-.5*m),o=u+(n[t]+.5*(n[t+1]-n[t])-i)/(r-i)*(l-u)),o},w=function(e,t){var a,o,s,d,m,g,v,w;if(null==t&&(t=!1),isNaN(e))return h;if(t?w=e:n&&n.length>2?(a=y(e),w=a/(n.length-2),w=f[0]+w*(1-f[0]-f[1])):l!==u?(w=(e-u)/(l-u),w=f[0]+w*(1-f[0]-f[1]),w=Math.min(1,Math.max(0,w))):w=1,t||(w=E(w)),d=Math.floor(1e4*w),r[d])o=r[d];else{if("array"===Ee(i))for(s=m=0,v=p.length-1;0<=v?m<=v:m>=v;s=0<=v?++m:--m){if(g=p[s],w<=g){o=i[s];break}if(w>=g&&s===p.length-1){o=i[s];break}if(w>g&&w<p[s+1]){w=(w-g)/(p[s+1]-g),o=x.interpolate(i[s],i[s+1],w,c);break}}else"function"===Ee(i)&&(o=i(w));r[d]=o}return o},b=function(){return r={}},_(e),v=function(e){var t;return t=x(w(e)),d&&t[d]?t[d]():t},v.classes=function(e){var t;return null!=e?("array"===Ee(e)?(n=e,o=[e[0],e[e.length-1]]):(t=x.analyze(o),n=0===e?[t.min,t.max]:x.limits(t,"e",e)),v):n},v.domain=function(e){var t,n,r,a,s,c,h;if(!arguments.length)return o;if(u=e[0],l=e[e.length-1],p=[],r=i.length,e.length===r&&u!==l)for(s=0,a=e.length;s<a;s++)n=e[s],p.push((n-u)/(l-u));else for(t=h=0,c=r-1;0<=c?h<=c:h>=c;t=0<=c?++h:--h)p.push(t/(r-1));return o=[u,l],v},v.mode=function(e){return arguments.length?(c=e,b(),v):c},v.range=function(e,t){return _(e,t),v},v.out=function(e){return d=e,v},v.spread=function(e){return arguments.length?(m=e,v):m},v.correctLightness=function(e){return null==e&&(e=!0),a=e,b(),E=a?function(e){var t,n,r,i,a,o,s,l,u;for(t=w(0,!0).lab()[0],n=w(1,!0).lab()[0],s=t>n,r=w(e,!0).lab()[0],a=t+(n-t)*e,i=r-a,l=0,u=1,o=20;Math.abs(i)>.01&&o-- >0;)!function(){return s&&(i*=-1),i<0?(l=e,e+=.5*(u-e)):(u=e,e+=.5*(l-e)),r=w(e,!0).lab()[0],i=r-a}();return e}:function(e){return e},v},v.padding=function(e){return null!=e?("number"===Ee(e)&&(e=[e,e]),f=e,v):f},v.colors=function(){var t,r,i,a,s,l,u,c,h;if(a=0,s="hex",1===arguments.length&&("string"===Ee(arguments[0])?s=arguments[0]:a=arguments[0]),2===arguments.length&&(a=arguments[0],s=arguments[1]),a)return r=o[0],t=o[1]-r,function(){u=[];for(var e=0;0<=a?e<a:e>a;0<=a?e++:e--)u.push(e);return u}.apply(this).map(function(e){return v(r+e/(a-1)*t)[s]()});if(e=[],c=[],n&&n.length>2)for(i=h=1,l=n.length;1<=l?h<l:h>l;i=1<=l?++h:--h)c.push(.5*(n[i-1]+n[i]));else c=o;return c.map(function(e){return v(e)[s]()})},v},null==x.scales&&(x.scales={}),x.scales.cool=function(){return x.scale([x.hsl(180,1,.9),x.hsl(250,.7,.4)])},x.scales.hot=function(){return x.scale(["#000","#f00","#ff0","#fff"],[0,.25,.75,1]).mode("rgb")},x.analyze=function(e,t,n){var r,i,a,o,s,l,u;if(s={min:Number.MAX_VALUE,max:Number.MAX_VALUE*-1,sum:0,values:[],count:0},null==n&&(n=function(){return!0}),r=function(e){null==e||isNaN(e)||(s.values.push(e),s.sum+=e,e<s.min&&(s.min=e),e>s.max&&(s.max=e),s.count+=1)},u=function(e,i){if(n(e,i))return r(null!=t&&"function"===Ee(t)?t(e):null!=t&&"string"===Ee(t)||"number"===Ee(t)?e[t]:e)},"array"===Ee(e))for(o=0,a=e.length;o<a;o++)l=e[o],u(l);else for(i in e)l=e[i],u(l,i);return s.domain=[s.min,s.max],s.limits=function(e,t){return x.limits(s,e,t)},s},x.limits=function(e,t,n){var r,i,a,o,s,l,u,c,h,d,f,p,g,v,y,w,b,_,E,C,k,S,P,T,N,M,L,A,O,B,z,D,R,j,F,q,V,U,W,G,H,X,K,Y,Z,J,ee,te,ne,ie,ae,oe,se,le,ue;if(null==t&&(t="equal"),null==n&&(n=7),"array"===Ee(e)&&(e=x.analyze(e)),N=e.min,$=e.max,ae=e.sum,le=e.values.sort(function(e,t){return e-t}),P=[],"c"===t.substr(0,1)&&(P.push(N),P.push($)),"e"===t.substr(0,1)){for(P.push(N),C=z=1,F=n-1;1<=F?z<=F:z>=F;C=1<=F?++z:--z)P.push(N+C/n*($-N));P.push($)}else if("l"===t.substr(0,1)){if(N<=0)throw"Logarithmic scales are only possible for values > 0";for(M=Math.LOG10E*Q(N),T=Math.LOG10E*Q($),P.push(N),C=ue=1,q=n-1;1<=q?ue<=q:ue>=q;C=1<=q?++ue:--ue)P.push(re(10,M+C/n*(T-M)));P.push($)}else if("q"===t.substr(0,1)){for(P.push(N),C=r=1,X=n-1;1<=X?r<=X:r>=X;C=1<=X?++r:--r)D=le.length*C/n,R=I(D),R===D?P.push(le[R]):(j=D-R,P.push(le[R]*j+le[R+1]*(1-j)));P.push($)}else if("k"===t.substr(0,1)){for(A=le.length,v=new Array(A),_=new Array(n),ie=!0,O=0,w=null,w=[],w.push(N),C=i=1,K=n-1;1<=K?i<=K:i>=K;C=1<=K?++i:--i)w.push(N+C/n*($-N));for(w.push($);ie;){for(k=a=0,Y=n-1;0<=Y?a<=Y:a>=Y;k=0<=Y?++a:--a)_[k]=0;for(C=o=0,Z=A-1;0<=Z?o<=Z:o>=Z;C=0<=Z?++o:--o){for(se=le[C],L=Number.MAX_VALUE,k=s=0,J=n-1;0<=J?s<=J:s>=J;k=0<=J?++s:--s)E=m(w[k]-se),E<L&&(L=E,y=k);_[y]++,v[C]=y}for(B=new Array(n),k=l=0,ee=n-1;0<=ee?l<=ee:l>=ee;k=0<=ee?++l:--l)B[k]=null;for(C=u=0,te=A-1;0<=te?u<=te:u>=te;C=0<=te?++u:--u)b=v[C],null===B[b]?B[b]=le[C]:B[b]+=le[C];for(k=c=0,ne=n-1;0<=ne?c<=ne:c>=ne;k=0<=ne?++c:--c)B[k]*=1/_[k];for(ie=!1,k=h=0,V=n-1;0<=V?h<=V:h>=V;k=0<=V?++h:--h)if(B[k]!==w[C]){ie=!0;break}w=B,O++,O>200&&(ie=!1)}for(S={},k=d=0,U=n-1;0<=U?d<=U:d>=U;k=0<=U?++d:--d)S[k]=[];for(C=f=0,W=A-1;0<=W?f<=W:f>=W;C=0<=W?++f:--f)b=v[C],S[b].push(le[C]);for(oe=[],k=p=0,G=n-1;0<=G?p<=G:p>=G;k=0<=G?++p:--p)oe.push(S[k][0]),oe.push(S[k][S[k].length-1]);for(oe=oe.sort(function(e,t){return e-t}),P.push(oe[0]),C=g=1,H=oe.length-1;g<=H;C=g+=2)isNaN(oe[C])||P.push(oe[C])}return P},A=function(e,t,n){var r,i,a,o;return r=Ce(arguments),e=r[0],t=r[1],n=r[2],e/=360,e<1/3?(i=(1-t)/3,o=(1+t*S(c*e)/S(l-c*e))/3,a=1-(i+o)):e<2/3?(e-=1/3,o=(1-t)/3,a=(1+t*S(c*e)/S(l-c*e))/3,i=1-(o+a)):(e-=2/3,a=(1-t)/3,i=(1+t*S(c*e)/S(l-c*e))/3,o=1-(a+i)),o=K(n*o*3),a=K(n*a*3),i=K(n*i*3),[255*o,255*a,255*i,r.length>3?r[3]:1]},se=function(){var e,t,n,r,i,a,o,s;return o=Ce(arguments),a=o[0],t=o[1],e=o[2],c=2*Math.PI,a/=255,t/=255,e/=255,i=Math.min(a,t,e),r=(a+t+e)/3,s=1-i/r,0===s?n=0:(n=(a-t+(a-e))/2,n/=Math.sqrt((a-t)*(a-t)+(a-e)*(t-e)),n=Math.acos(n),e>t&&(n=c-n),n/=c),[360*n,s,r]},x.hsi=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hsi"]),function(){})},f.hsi=A,i.prototype.hsi=function(){return se(this._rgb)},R=function(e,t,n,r){var i,a,o,s,l,u,c,h,d,f,p,m,g;return"hsl"===r?(m=e.hsl(),g=t.hsl()):"hsv"===r?(m=e.hsv(),g=t.hsv()):"hsi"===r?(m=e.hsi(),g=t.hsi()):"lch"!==r&&"hcl"!==r||(r="hcl",m=e.hcl(),g=t.hcl()),"h"===r.substr(0,1)&&(o=m[0],f=m[1],u=m[2],s=g[0],p=g[1],c=g[2]),isNaN(o)||isNaN(s)?isNaN(o)?isNaN(s)?a=Number.NaN:(a=s,1!==u&&0!==u||"hsv"===r||(d=p)):(a=o,1!==c&&0!==c||"hsv"===r||(d=f)):(i=s>o&&s-o>180?s-(o+360):s<o&&o-s>180?s+360-o:s-o,a=o+n*i),null==d&&(d=f+n*(p-f)),l=u+n*(c-u),h=x[r](a,d,l)},p=p.concat(function(){var e,t,n,r;for(n=["hsv","hsl","hsi","hcl","lch"],r=[],t=0,e=n.length;t<e;t++)Z=n[t],r.push([Z,R]);return r}()),F=function(e,t,n,r){var i,a;return i=e.num(),a=t.num(),x.num(i+(a-i)*n,"num")},p.push(["num",F]),j=function(e,t,n,r){var a,o,s;return o=e.lab(),s=t.lab(),a=new i(o[0]+n*(s[0]-o[0]),o[1]+n*(s[1]-o[1]),o[2]+n*(s[2]-o[2]),r)},p.push(["lab",j])}).call(this)}).call(t,n(286)(e))},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(e){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(172),l=n(171),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){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){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,n){"use strict";function r(e){return e.replace(i,function(e,t){return t.toUpperCase()})}var i=/-(.)/g;e.exports=r},function(e,t,n){"use strict";function r(e){return i(e.replace(a,"ms-"))}var i=n(173),a=/^-ms-/;e.exports=r},function(e,t,n){
-"use strict";function r(e,t){return!(!e||!t)&&(e===t||!i(e)&&(i(t)?r(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}var i=n(183);e.exports=r},function(e,t,n){"use strict";function r(e){var t=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?o(!1):void 0,"number"!=typeof t?o(!1):void 0,0===t||t-1 in e?void 0:o(!1),"function"==typeof e.callee?o(!1):void 0,e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(e){}for(var n=Array(t),r=0;r<t;r++)n[r]=e[r];return n}function i(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 a(e){return i(e)?Array.isArray(e)?e.slice():r(e):[e]}var o=n(1);e.exports=a},function(e,t,n){"use strict";function r(e){var t=e.match(c);return t&&t[1].toLowerCase()}function i(e,t){var n=u;u?void 0:l(!1);var i=r(e),a=i&&s(i);if(a){n.innerHTML=a[1]+e+a[2];for(var c=a[0];c--;)n=n.lastChild}else n.innerHTML=e;var h=n.getElementsByTagName("script");h.length&&(t?void 0:l(!1),o(h).forEach(t));for(var d=Array.from(n.childNodes);n.lastChild;)n.removeChild(n.lastChild);return d}var a=n(9),o=n(176),s=n(178),l=n(1),u=a.canUseDOM?document.createElement("div"):null,c=/^\s*<(\w+)/;e.exports=i},function(e,t,n){"use strict";function r(e){return o?void 0: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(9),a=n(1),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},f=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];f.forEach(function(e){d[e]=h,s[e]=!0}),e.exports=r},function(e,t,n){"use strict";function r(e){return e===window?{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}:{x:e.scrollLeft,y:e.scrollTop}}e.exports=r},function(e,t,n){"use strict";function r(e){return e.replace(i,"-$1").toLowerCase()}var i=/([A-Z])/g;e.exports=r},function(e,t,n){"use strict";function r(e){return i(e).replace(a,"-ms-")}var i=n(180),a=/^ms-/;e.exports=r},function(e,t,n){"use strict";function r(e){return!(!e||!("function"==typeof Node?e instanceof Node:"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName))}e.exports=r},function(e,t,n){"use strict";function r(e){return i(e)&&3==e.nodeType}var i=n(182);e.exports=r},function(e,t,n){"use strict";function r(e){var t={};return function(n){return t.hasOwnProperty(n)||(t[n]=e.call(this,n)),t[n]}}e.exports=r},function(e,t,n){"use strict";function r(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=r},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){return l+e}function a(e,t){try{window.sessionStorage.setItem(i(e),JSON.stringify(t))}catch(e){if(e.name===c)return;if(e.name===u&&0===window.sessionStorage.length)return;throw e}}function o(e){var t=void 0;try{t=window.sessionStorage.getItem(i(e))}catch(e){if(e.name===c)return null}if(t)try{return JSON.parse(t)}catch(e){}return null}t.__esModule=!0,t.saveState=a,t.readState=o;var s=n(10),l=(r(s),"@@History/"),u="QuotaExceededError",c="SecurityError"},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){function t(e){return l.canUseDOM?void 0:s.default(!1),n.listen(e)}var n=h.default(a({getUserConfirmation:u.getUserConfirmation},e,{go:u.go}));return a({},n,{listen:t})}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(12),s=r(o),l=n(42),u=n(70),c=n(71),h=r(c);t.default=i,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){return"string"==typeof e&&"/"===e.charAt(0)}function a(){var e=g.getHashPath();return!!i(e)||(g.replaceHashPath("/"+e),!1)}function o(e,t,n){return e+(e.indexOf("?")===-1?"?":"&")+(t+"="+n)}function s(e,t){return e.replace(new RegExp("[?&]?"+t+"=[a-zA-Z0-9]+"),"")}function l(e,t){var n=e.match(new RegExp("\\?.*?\\b"+t+"=(.+?)\\b"));return n&&n[1]}function u(){function e(){var e=g.getHashPath(),t=void 0,n=void 0;P?(t=l(e,P),e=s(e,P),t?n=v.readState(t):(n=null,t=T.createKey(),g.replaceHashPath(o(e,P,t)))):t=n=null;var r=_.default(e);return T.createLocation(c({},r,{state:n}),void 0,t)}function t(t){function n(){a()&&r(e())}var r=t.transitionTo;return a(),g.addEventListener(window,"hashchange",n),function(){g.removeEventListener(window,"hashchange",n)}}function n(e){var t=e.basename,n=e.pathname,r=e.search,i=e.state,a=e.action,s=e.key;if(a!==p.POP){var l=(t||"")+n+r;P?(l=o(l,P,s),v.saveState(s,i)):e.key=e.state=null;var u=g.getHashPath();a===p.PUSH?u!==l&&(window.location.hash=l):u!==l&&g.replaceHashPath(l)}}function r(e){1===++N&&(M=t(T));var n=T.listenBefore(e);return function(){n(),0===--N&&M()}}function i(e){1===++N&&(M=t(T));var n=T.listen(e);return function(){n(),0===--N&&M()}}function u(e){T.push(e)}function h(e){T.replace(e)}function d(e){T.go(e)}function y(e){return"#"+T.createHref(e)}function b(e){1===++N&&(M=t(T)),T.registerTransitionHook(e)}function E(e){T.unregisterTransitionHook(e),0===--N&&M()}function C(e,t){T.pushState(e,t)}function k(e,t){T.replaceState(e,t)}var S=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];m.canUseDOM?void 0:f.default(!1);var P=S.queryKey;(void 0===P||P)&&(P="string"==typeof P?P:x);var T=w.default(c({},S,{getCurrentLocation:e,finishTransition:n,saveState:v.saveState})),N=0,M=void 0;g.supportsGoWithoutReloadUsingHash();return c({},T,{listenBefore:r,listen:i,push:u,replace:h,go:d,createHref:y,registerTransitionHook:b,unregisterTransitionHook:E,pushState:C,replaceState:k})}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(10),d=(r(h),n(12)),f=r(d),p=n(29),m=n(42),g=n(70),v=n(186),y=n(187),w=r(y),b=n(21),_=r(b),x="_k";t.default=u,e.exports=t.default},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(29),s=n(21),l=r(s);t.default=i,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){return e.filter(function(e){return e.state}).reduce(function(e,t){return e[t.key]=t.state,e},{})}function a(){function e(e,t){v[e]=t}function t(e){return v[e]}function n(){var e=m[g],n=e.key,r=e.basename,i=e.pathname,a=e.search,s=(r||"")+i+(a||""),l=void 0;n?l=t(n):(l=null,n=h.createKey(),e.key=n);var u=p.default(s);return h.createLocation(o({},u,{state:l}),void 0,n)}function r(e){var t=g+e;return t>=0&&t<m.length}function a(e){if(e){if(!r(e))return;g+=e;var t=n();h.transitionTo(o({},t,{action:c.POP}))}}function s(t){switch(t.action){case c.PUSH:g+=1,g<m.length&&m.splice(g),m.push(t),e(t.key,t.state);break;case c.REPLACE:m[g]=t,e(t.key,t.state)}}var l=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];Array.isArray(l)?l={entries:l}:"string"==typeof l&&(l={entries:[l]});var h=d.default(o({},l,{getCurrentLocation:n,finishTransition:s,saveState:e,go:a})),f=l,m=f.entries,g=f.current;"string"==typeof m?m=[m]:Array.isArray(m)||(m=["/"]),m=m.map(function(e){var t=h.createKey();return"string"==typeof e?{pathname:e,key:t}:"object"==typeof e&&e?o({},e,{key:t}):void u.default(!1)}),null==g?g=m.length-1:g>=0&&g<m.length?void 0:u.default(!1);var v=i(m);return h}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(10),l=(r(s),n(12)),u=r(l),c=n(29),h=n(71),d=r(h),f=n(21),p=r(f);t.default=a,e.exports=t.default},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=f.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 p(e){return x.createHref(n(e))}function g(){return t(x.createLocation.apply(x,arguments))}function v(e,t){"string"==typeof t&&(t=f.default(t)),l(o({state:e},t))}function y(e,t){"string"==typeof t&&(t=f.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:p,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(42),l=n(44),u=r(l),c=n(72),h=r(c),d=n(21),f=r(d),p=n(43),m=r(p);t.default=a,e.exports=t.default},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 u.stringify(e).replace(/%20/g,"+")}function o(e){return function(){function t(e){if(null==e.query){var t=e.search;e.query=x(t.substring(1)),e[g]={search:t,searchBase:""}}return e}function n(e,t){var n,r=void 0;if(!t||""===(r=_(t)))return e;"string"==typeof e&&(e=f.default(e));var i=e[g],a=void 0;a=i&&e.search===i.search?i.searchBase:e.search||"";var o=a+(a?"&":"?")+r;return s({},e,(n={search:o},n[g]={search:o,searchBase:a},n))}function r(e){return C.listenBefore(function(n,r){h.default(e,t(n),r)})}function o(e){return C.listen(function(n){e(t(n))})}function l(e){C.push(n(e,e.query))}function u(e){C.replace(n(e,e.query))}function c(e,t){return C.createPath(n(e,t||e.query))}function d(e,t){return C.createHref(n(e,t||e.query))}function p(){return t(C.createLocation.apply(C,arguments))}function y(e,t,n){"string"==typeof t&&(t=f.default(t)),l(s({state:e},t,{query:n}))}function w(e,t,n){"string"==typeof t&&(t=f.default(t)),u(s({state:e},t,{query:n}))}var b=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],_=b.stringifyQuery,x=b.parseQueryString,E=i(b,["stringifyQuery","parseQueryString"]),C=e(E);return"function"!=typeof _&&(_=a),"function"!=typeof x&&(x=v),s({},C,{listenBefore:r,listen:o,push:l,replace:u,createPath:c,createHref:d,createLocation:p,pushState:m.default(y,"pushState is deprecated; use push instead"),replaceState:m.default(w,"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(10),u=(r(l),n(193)),c=n(44),h=r(c),d=n(21),f=r(d),p=n(43),m=r(p),g="$searchBase",v=u.parse;t.default=o,e.exports=t.default},function(e,t,n){"use strict";var r=n(285);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,n){"use strict";e.exports=n(208)},function(e,t,n){"use strict";var r={Properties:{"aria-current":0,"aria-details":0,"aria-disabled":0,"aria-hidden":0,"aria-invalid":0,"aria-keyshortcuts":0,"aria-label":0,"aria-roledescription":0,"aria-autocomplete":0,"aria-checked":0,"aria-expanded":0,"aria-haspopup":0,"aria-level":0,"aria-modal":0,"aria-multiline":0,"aria-multiselectable":0,"aria-orientation":0,"aria-placeholder":0,"aria-pressed":0,"aria-readonly":0,"aria-required":0,"aria-selected":0,"aria-sort":0,"aria-valuemax":0,"aria-valuemin":0,"aria-valuenow":0,"aria-valuetext":0,"aria-atomic":0,"aria-busy":0,"aria-live":0,"aria-relevant":0,"aria-dropeffect":0,"aria-grabbed":0,"aria-activedescendant":0,"aria-colcount":0,"aria-colindex":0,"aria-colspan":0,"aria-controls":0,"aria-describedby":0,"aria-errormessage":0,"aria-flowto":0,"aria-labelledby":0,"aria-owns":0,"aria-posinset":0,"aria-rowcount":0,"aria-rowindex":0,"aria-rowspan":0,"aria-setsize":0},DOMAttributeNames:{},DOMPropertyNames:{}};e.exports=r},function(e,t,n){"use strict";var r=n(7),i=n(68),a={focusDOMComponent:function(){i(r.getNodeFromInstance(this))}};e.exports=a},function(e,t,n){"use strict";function r(){var e=window.opera;return"object"==typeof e&&"function"==typeof e.version&&parseInt(e.version(),10)<=12}function i(e){return(e.ctrlKey||e.altKey||e.metaKey)&&!(e.ctrlKey&&e.altKey)}function a(e){switch(e){case"topCompositionStart":return S.compositionStart;case"topCompositionEnd":return S.compositionEnd;case"topCompositionUpdate":return S.compositionUpdate}}function o(e,t){return"topKeyDown"===e&&t.keyCode===w}function s(e,t){switch(e){case"topKeyUp":return y.indexOf(t.keyCode)!==-1;case"topKeyDown":return t.keyCode!==w;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function l(e){var t=e.detail;return"object"==typeof t&&"data"in t?t.data:null}function u(e,t,n,r){var i,u;if(b?i=a(e):T?s(e,n)&&(i=S.compositionEnd):o(e,n)&&(i=S.compositionStart),!i)return null;E&&(T||i!==S.compositionStart?i===S.compositionEnd&&T&&(u=T.getData()):T=m.getPooled(r));var c=g.getPooled(i,t,n,r);if(u)c.data=u;else{var h=l(n);null!==h&&(c.data=h)}return f.accumulateTwoPhaseDispatches(c),c}function c(e,t){switch(e){case"topCompositionEnd":return l(t);case"topKeyPress":var n=t.which;return n!==C?null:(P=!0,k);case"topTextInput":var r=t.data;return r===k&&P?null:r;default:return null}}function h(e,t){if(T){if("topCompositionEnd"===e||!b&&s(e,t)){var n=T.getData();return m.release(T),T=null,n}return null}switch(e){case"topPaste":return null;case"topKeyPress":return t.which&&!i(t)?String.fromCharCode(t.which):null;case"topCompositionEnd":return E?null:t.data;default:return null}}function d(e,t,n,r){var i;if(i=x?c(e,n):h(e,n),!i)return null;var a=v.getPooled(S.beforeInput,t,n,r);return a.data=i,f.accumulateTwoPhaseDispatches(a),a}var f=n(31),p=n(9),m=n(203),g=n(240),v=n(243),y=[9,13,27,32],w=229,b=p.canUseDOM&&"CompositionEvent"in window,_=null;p.canUseDOM&&"documentMode"in document&&(_=document.documentMode);var x=p.canUseDOM&&"TextEvent"in window&&!_&&!r(),E=p.canUseDOM&&(!b||_&&_>8&&_<=11),C=32,k=String.fromCharCode(C),S={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:["topBlur","topCompositionEnd","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:["topBlur","topCompositionStart","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:["topBlur","topCompositionUpdate","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]}},P=!1,T=null,N={eventTypes:S,extractEvents:function(e,t,n,r){return[u(e,t,n,r),d(e,t,n,r)]}};e.exports=N},function(e,t,n){"use strict";var r=n(74),i=n(9),a=(n(13),n(174),n(249)),o=n(181),s=n(184),l=(n(2),s(function(e){return o(e)})),u=!1,c="cssFloat";if(i.canUseDOM){var h=document.createElement("div").style;try{h.font=""}catch(e){u=!0}void 0===document.documentElement.style.cssFloat&&(c="styleFloat")}var d={createMarkupForStyles:function(e,t){var n="";for(var r in e)if(e.hasOwnProperty(r)){var i=e[r];null!=i&&(n+=l(r)+":",n+=a(r,i,t)+";")}return n||null},setValueForStyles:function(e,t,n){var i=e.style;for(var o in t)if(t.hasOwnProperty(o)){var s=a(o,t[o],n);if("float"!==o&&"cssFloat"!==o||(o=c),s)i[o]=s;else{var l=u&&r.shorthandPropertyExpansions[o];if(l)for(var h in l)i[h]="";else i[o]=""}}}};e.exports=d},function(e,t,n){"use strict";function r(e){var t=e.nodeName&&e.nodeName.toLowerCase();return"select"===t||"input"===t&&"file"===e.type}function i(e){var t=E.getPooled(P.change,N,e,C(e));w.accumulateTwoPhaseDispatches(t),x.batchedUpdates(a,t)}function a(e){y.enqueueEvents(e),y.processEventQueue(!1)}function o(e,t){T=e,N=t,T.attachEvent("onchange",i)}function s(){T&&(T.detachEvent("onchange",i),T=null,N=null)}function l(e,t){if("topChange"===e)return t}function u(e,t,n){"topFocus"===e?(s(),o(t,n)):"topBlur"===e&&s()}function c(e,t){T=e,N=t,M=e.value,I=Object.getOwnPropertyDescriptor(e.constructor.prototype,"value"),Object.defineProperty(T,"value",O),T.attachEvent?T.attachEvent("onpropertychange",d):T.addEventListener("propertychange",d,!1)}function h(){T&&(delete T.value,T.detachEvent?T.detachEvent("onpropertychange",d):T.removeEventListener("propertychange",d,!1),T=null,N=null,M=null,I=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==M&&(M=t,i(e))}}function f(e,t){if("topInput"===e)return t}function p(e,t,n){"topFocus"===e?(h(),c(t,n)):"topBlur"===e&&h()}function m(e,t){if(("topSelectionChange"===e||"topKeyUp"===e||"topKeyDown"===e)&&T&&T.value!==M)return M=T.value,N}function g(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function v(e,t){if("topClick"===e)return t}var y=n(30),w=n(31),b=n(9),_=n(7),x=n(14),E=n(16),C=n(57),k=n(58),S=n(91),P={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:["topBlur","topChange","topClick","topFocus","topInput","topKeyDown","topKeyUp","topSelectionChange"]}},T=null,N=null,M=null,I=null,L=!1;b.canUseDOM&&(L=k("change")&&(!document.documentMode||document.documentMode>8));var A=!1;b.canUseDOM&&(A=k("input")&&(!document.documentMode||document.documentMode>11));var O={get:function(){return I.get.call(this)},set:function(e){M=""+e,I.set.call(this,e)}},B={eventTypes:P,extractEvents:function(e,t,n,i){var a,o,s=t?_.getNodeFromInstance(t):window;if(r(s)?L?a=l:o=u:S(s)?A?a=f:(a=m,o=p):g(s)&&(a=v),a){var c=a(e,t);if(c){var h=E.getPooled(P.change,c,n,i);return h.type="change",w.accumulateTwoPhaseDispatches(h),h}}o&&o(e,s,t)}};e.exports=B},function(e,t,n){"use strict";var r=n(3),i=n(22),a=n(9),o=n(177),s=n(11),l=(n(1),{dangerouslyReplaceNodeWithMarkup:function(e,t){if(a.canUseDOM?void 0:r("56"),t?void 0:r("57"),"HTML"===e.nodeName?r("58"):void 0,"string"==typeof t){var n=o(t,s)[0];e.parentNode.replaceChild(n,e)}else i.replaceChildWithTree(e,t)}});e.exports=l},function(e,t,n){"use strict";var r=["ResponderEventPlugin","SimpleEventPlugin","TapEventPlugin","EnterLeaveEventPlugin","ChangeEventPlugin","SelectEventPlugin","BeforeInputEventPlugin"];e.exports=r},function(e,t,n){"use strict";var r=n(31),i=n(7),a=n(36),o={mouseEnter:{registrationName:"onMouseEnter",dependencies:["topMouseOut","topMouseOver"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["topMouseOut","topMouseOver"]}},s={eventTypes:o,extractEvents:function(e,t,n,s){if("topMouseOver"===e&&(n.relatedTarget||n.fromElement))return null;if("topMouseOut"!==e&&"topMouseOver"!==e)return null;var l;if(s.window===s)l=s;else{var u=s.ownerDocument;l=u?u.defaultView||u.parentWindow:window}var c,h;if("topMouseOut"===e){c=t;var d=n.relatedTarget||n.toElement;h=d?i.getClosestInstanceFromNode(d):null}else c=null,h=t;if(c===h)return null;var f=null==c?l:i.getNodeFromInstance(c),p=null==h?l:i.getNodeFromInstance(h),m=a.getPooled(o.mouseLeave,c,n,s);m.type="mouseleave",m.target=f,m.relatedTarget=p;var g=a.getPooled(o.mouseEnter,h,n,s);return g.type="mouseenter",g.target=p,g.relatedTarget=f,r.accumulateEnterLeaveDispatches(m,g,c,h),[m,g]}};e.exports=s},function(e,t,n){"use strict";function r(e){this._root=e,this._startText=this.getText(),this._fallbackText=null}var i=n(5),a=n(19),o=n(89);i(r.prototype,{destructor:function(){this._root=null,this._startText=null,this._fallbackText=null},getText:function(){return"value"in this._root?this._root.value:this._root[o()]},getData:function(){if(this._fallbackText)return this._fallbackText;var e,t,n=this._startText,r=n.length,i=this.getText(),a=i.length;for(e=0;e<r&&n[e]===i[e];e++);var o=r-e;for(t=1;t<=o&&n[r-t]===i[a-t];t++);var s=t>1?1-t:void 0;return this._fallbackText=i.slice(e,s),this._fallbackText}}),a.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";var r=n(23),i=r.injection.MUST_USE_PROPERTY,a=r.injection.HAS_BOOLEAN_VALUE,o=r.injection.HAS_NUMERIC_VALUE,s=r.injection.HAS_POSITIVE_NUMERIC_VALUE,l=r.injection.HAS_OVERLOADED_BOOLEAN_VALUE,u={isCustomAttribute:RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+r.ATTRIBUTE_NAME_CHAR+"]*$")),Properties:{accept:0,acceptCharset:0,accessKey:0,action:0,allowFullScreen:a,allowTransparency:0,alt:0,as:0,async:a,autoComplete:0,autoPlay:a,capture:a,cellPadding:0,cellSpacing:0,charSet:0,challenge:0,checked:i|a,cite:0,classID:0,className:0,cols:s,colSpan:0,content:0,contentEditable:0,contextMenu:0,controls:a,coords:0,crossOrigin:0,data:0,dateTime:0,default:a,defer:a,dir:0,disabled:a,download:l,draggable:0,encType:0,form:0,formAction:0,formEncType:0,formMethod:0,formNoValidate:a,formTarget:0,frameBorder:0,headers:0,height:0,hidden:a,high:0,href:0,hrefLang:0,htmlFor:0,httpEquiv:0,icon:0,id:0,inputMode:0,integrity:0,is:0,keyParams:0,keyType:0,kind:0,label:0,lang:0,list:0,loop:a,low:0,manifest:0,marginHeight:0,marginWidth:0,max:0,maxLength:0,media:0,mediaGroup:0,method:0,min:0,minLength:0,multiple:i|a,muted:i|a,name:0,nonce:0,noValidate:a,open:a,optimum:0,pattern:0,placeholder:0,playsInline:a,poster:0,preload:0,profile:0,radioGroup:0,readOnly:a,referrerPolicy:0,rel:0,required:a,reversed:a,role:0,rows:s,rowSpan:o,sandbox:0,scope:0,scoped:a,scrolling:0,seamless:a,selected:i|a,shape:0,size:s,sizes:0,span:s,spellCheck:0,src:0,srcDoc:0,srcLang:0,srcSet:0,start:o,step:0,style:0,summary:0,tabIndex:0,target:0,title:0,type:0,useMap:0,value:0,width:0,wmode:0,wrap:0,about:0,datatype:0,inlist:0,prefix:0,property:0,resource:0,typeof:0,vocab:0,autoCapitalize:0,autoCorrect:0,autoSave:0,color:0,itemProp:0,itemScope:a,itemType:0,itemID:0,itemRef:0,results:0,security:0,unselectable:0},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{}};e.exports=u},function(e,t,n){"use strict";(function(t){function r(e,t,n,r){var i=void 0===e[n];null!=t&&i&&(e[n]=a(t,!0))}var i=n(24),a=n(90),o=(n(49),n(59)),s=n(93);n(2);"undefined"!=typeof t&&t.env,1;var l={instantiateChildren:function(e,t,n,i){if(null==e)return null;var a={};return s(e,r,a),a},updateChildren:function(e,t,n,r,s,l,u,c,h){if(t||e){var d,f;for(d in t)if(t.hasOwnProperty(d)){f=e&&e[d];var p=f&&f._currentElement,m=t[d];if(null!=f&&o(p,m))i.receiveComponent(f,m,s,c),t[d]=f;else{f&&(r[d]=i.getHostNode(f),i.unmountComponent(f,!1));var g=a(m,!0);t[d]=g;var v=i.mountComponent(g,s,l,u,c,h);n.push(v)}}for(d in e)!e.hasOwnProperty(d)||t&&t.hasOwnProperty(d)||(f=e[d],r[d]=i.getHostNode(f),i.unmountComponent(f,!1))}},unmountChildren:function(e,t){for(var n in e)if(e.hasOwnProperty(n)){var r=e[n];i.unmountComponent(r,t)}}};e.exports=l}).call(t,n(73))},function(e,t,n){"use strict";var r=n(45),i=n(213),a={processChildrenUpdates:i.dangerouslyProcessChildrenUpdates,replaceNodeWithMarkup:r.dangerouslyReplaceNodeWithMarkup};e.exports=a},function(e,t,n){"use strict";function r(e){}function i(e,t){}function a(e){return!(!e.prototype||!e.prototype.isReactComponent)}function o(e){return!(!e.prototype||!e.prototype.isPureReactComponent)}var s=n(3),l=n(5),u=n(25),c=n(51),h=n(17),d=n(52),f=n(32),p=(n(13),n(84)),m=n(24),g=n(28),v=(n(1),n(41)),y=n(59),w=(n(2),{ImpureClass:0,PureClass:1,StatelessFunctional:2});r.prototype.render=function(){var e=f.get(this)._currentElement.type,t=e(this.props,this.context,this.updater);return i(e,t),t};var b=1,_={construct:function(e){this._currentElement=e,this._rootNodeID=0,this._compositeType=null,this._instance=null,this._hostParent=null,this._hostContainerInfo=null,this._updateBatchNumber=null,this._pendingElement=null,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._renderedNodeType=null,this._renderedComponent=null,this._context=null,this._mountOrder=0,this._topLevelWrapper=null,this._pendingCallbacks=null,this._calledComponentWillUnmount=!1},mountComponent:function(e,t,n,l){this._context=l,this._mountOrder=b++,this._hostParent=t,this._hostContainerInfo=n;var c,h=this._currentElement.props,d=this._processContext(l),p=this._currentElement.type,m=e.getUpdateQueue(),v=a(p),y=this._constructComponent(v,h,d,m);v||null!=y&&null!=y.render?o(p)?this._compositeType=w.PureClass:this._compositeType=w.ImpureClass:(c=y,i(p,c),null===y||y===!1||u.isValidElement(y)?void 0:s("105",p.displayName||p.name||"Component"),y=new r(p),this._compositeType=w.StatelessFunctional);y.props=h,y.context=d,y.refs=g,y.updater=m,this._instance=y,f.set(y,this);var _=y.state;void 0===_&&(y.state=_=null),"object"!=typeof _||Array.isArray(_)?s("106",this.getName()||"ReactCompositeComponent"):void 0,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1;var x;return x=y.unstable_handleError?this.performInitialMountWithErrorHandling(c,t,n,e,l):this.performInitialMount(c,t,n,e,l),y.componentDidMount&&e.getReactMountReady().enqueue(y.componentDidMount,y),x},_constructComponent:function(e,t,n,r){return this._constructComponentWithoutOwner(e,t,n,r)},_constructComponentWithoutOwner:function(e,t,n,r){var i=this._currentElement.type;return e?new i(t,n,r):i(t,n,r)},performInitialMountWithErrorHandling:function(e,t,n,r,i){var a,o=r.checkpoint();try{a=this.performInitialMount(e,t,n,r,i)}catch(s){r.rollback(o),this._instance.unstable_handleError(s),this._pendingStateQueue&&(this._instance.state=this._processPendingState(this._instance.props,this._instance.context)),o=r.checkpoint(),this._renderedComponent.unmountComponent(!0),r.rollback(o),a=this.performInitialMount(e,t,n,r,i)}return a},performInitialMount:function(e,t,n,r,i){var a=this._instance,o=0;a.componentWillMount&&(a.componentWillMount(),this._pendingStateQueue&&(a.state=this._processPendingState(a.props,a.context))),void 0===e&&(e=this._renderValidatedComponent());var s=p.getType(e);this._renderedNodeType=s;var l=this._instantiateReactComponent(e,s!==p.EMPTY);this._renderedComponent=l;var u=m.mountComponent(l,r,t,n,this._processChildContext(i),o);return u},getHostNode:function(){return m.getHostNode(this._renderedComponent)},unmountComponent:function(e){if(this._renderedComponent){var t=this._instance;if(t.componentWillUnmount&&!t._calledComponentWillUnmount)if(t._calledComponentWillUnmount=!0,e){var n=this.getName()+".componentWillUnmount()";d.invokeGuardedCallback(n,t.componentWillUnmount.bind(t))}else t.componentWillUnmount();this._renderedComponent&&(m.unmountComponent(this._renderedComponent,e),this._renderedNodeType=null,this._renderedComponent=null,this._instance=null),this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._pendingCallbacks=null,this._pendingElement=null,this._context=null,this._rootNodeID=0,this._topLevelWrapper=null,f.remove(t)}},_maskContext:function(e){var t=this._currentElement.type,n=t.contextTypes;if(!n)return g;var r={};for(var i in n)r[i]=e[i];return r},_processContext:function(e){var t=this._maskContext(e);return t},_processChildContext:function(e){var t,n=this._currentElement.type,r=this._instance;if(r.getChildContext&&(t=r.getChildContext()),t){"object"!=typeof n.childContextTypes?s("107",this.getName()||"ReactCompositeComponent"):void 0;for(var i in t)i in n.childContextTypes?void 0:s("108",this.getName()||"ReactCompositeComponent",i);return l({},e,t)}return e},_checkContextTypes:function(e,t,n){},receiveComponent:function(e,t,n){var r=this._currentElement,i=this._context;this._pendingElement=null,this.updateComponent(t,r,e,i,n)},performUpdateIfNecessary:function(e){null!=this._pendingElement?m.receiveComponent(this,this._pendingElement,e,this._context):null!==this._pendingStateQueue||this._pendingForceUpdate?this.updateComponent(e,this._currentElement,this._currentElement,this._context,this._context):this._updateBatchNumber=null},updateComponent:function(e,t,n,r,i){var a=this._instance;null==a?s("136",this.getName()||"ReactCompositeComponent"):void 0;var o,l=!1;this._context===i?o=a.context:(o=this._processContext(i),l=!0);var u=t.props,c=n.props;t!==n&&(l=!0),l&&a.componentWillReceiveProps&&a.componentWillReceiveProps(c,o);var h=this._processPendingState(c,o),d=!0;this._pendingForceUpdate||(a.shouldComponentUpdate?d=a.shouldComponentUpdate(c,h,o):this._compositeType===w.PureClass&&(d=!v(u,c)||!v(a.state,h))),this._updateBatchNumber=null,d?(this._pendingForceUpdate=!1,this._performComponentUpdate(n,c,h,o,e,i)):(this._currentElement=n,this._context=i,a.props=c,a.state=h,a.context=o)},_processPendingState:function(e,t){var n=this._instance,r=this._pendingStateQueue,i=this._pendingReplaceState;if(this._pendingReplaceState=!1,this._pendingStateQueue=null,!r)return n.state;if(i&&1===r.length)return r[0];for(var a=l({},i?r[0]:n.state),o=i?1:0;o<r.length;o++){var s=r[o];l(a,"function"==typeof s?s.call(n,a,e,t):s)}return a},_performComponentUpdate:function(e,t,n,r,i,a){var o,s,l,u=this._instance,c=Boolean(u.componentDidUpdate);c&&(o=u.props,s=u.state,l=u.context),u.componentWillUpdate&&u.componentWillUpdate(t,n,r),this._currentElement=e,this._context=a,u.props=t,u.state=n,u.context=r,this._updateRenderedComponent(i,a),c&&i.getReactMountReady().enqueue(u.componentDidUpdate.bind(u,o,s,l),u);
-},_updateRenderedComponent:function(e,t){var n=this._renderedComponent,r=n._currentElement,i=this._renderValidatedComponent(),a=0;if(y(r,i))m.receiveComponent(n,i,e,this._processChildContext(t));else{var o=m.getHostNode(n);m.unmountComponent(n,!1);var s=p.getType(i);this._renderedNodeType=s;var l=this._instantiateReactComponent(i,s!==p.EMPTY);this._renderedComponent=l;var u=m.mountComponent(l,e,this._hostParent,this._hostContainerInfo,this._processChildContext(t),a);this._replaceNodeWithMarkup(o,u,n)}},_replaceNodeWithMarkup:function(e,t,n){c.replaceNodeWithMarkup(e,t,n)},_renderValidatedComponentWithoutOwnerOrContext:function(){var e,t=this._instance;return e=t.render()},_renderValidatedComponent:function(){var e;if(this._compositeType!==w.StatelessFunctional){h.current=this;try{e=this._renderValidatedComponentWithoutOwnerOrContext()}finally{h.current=null}}else e=this._renderValidatedComponentWithoutOwnerOrContext();return null===e||e===!1||u.isValidElement(e)?void 0:s("109",this.getName()||"ReactCompositeComponent"),e},attachRef:function(e,t){var n=this.getPublicInstance();null==n?s("110"):void 0;var r=t.getPublicInstance(),i=n.refs===g?n.refs={}:n.refs;i[e]=r},detachRef:function(e){var t=this.getPublicInstance().refs;delete t[e]},getName:function(){var e=this._currentElement.type,t=this._instance&&this._instance.constructor;return e.displayName||t&&t.displayName||e.name||t&&t.name||null},getPublicInstance:function(){var e=this._instance;return this._compositeType===w.StatelessFunctional?null:e},_instantiateReactComponent:null};e.exports=_},function(e,t,n){"use strict";var r=n(7),i=n(221),a=n(83),o=n(24),s=n(14),l=n(234),u=n(250),c=n(88),h=n(258);n(2);i.inject();var d={findDOMNode:u,render:a.render,unmountComponentAtNode:a.unmountComponentAtNode,version:l,unstable_batchedUpdates:s.batchedUpdates,unstable_renderSubtreeIntoContainer:h};"undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject&&__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({ComponentTree:{getClosestInstanceFromNode:r.getClosestInstanceFromNode,getNodeFromInstance:function(e){return e._renderedComponent&&(e=c(e)),e?r.getNodeFromInstance(e):null}},Mount:a,Reconciler:o});e.exports=d},function(e,t,n){"use strict";function r(e){if(e){var t=e._currentElement._owner||null;if(t){var n=t.getName();if(n)return" This DOM node was rendered by `"+n+"`."}}return""}function i(e,t){t&&(K[e._tag]&&(null!=t.children||null!=t.dangerouslySetInnerHTML?m("137",e._tag,e._currentElement._owner?" Check the render method of "+e._currentElement._owner.getName()+".":""):void 0),null!=t.dangerouslySetInnerHTML&&(null!=t.children?m("60"):void 0,"object"==typeof t.dangerouslySetInnerHTML&&V in t.dangerouslySetInnerHTML?void 0:m("61")),null!=t.style&&"object"!=typeof t.style?m("62",r(e)):void 0)}function a(e,t,n,r){if(!(r instanceof A)){var i=e._hostContainerInfo,a=i._node&&i._node.nodeType===W,s=a?i._node:i._ownerDocument;R(t,s),r.getReactMountReady().enqueue(o,{inst:e,registrationName:t,listener:n})}}function o(){var e=this;E.putListener(e.inst,e.registrationName,e.listener)}function s(){var e=this;T.postMountWrapper(e)}function l(){var e=this;I.postMountWrapper(e)}function u(){var e=this;N.postMountWrapper(e)}function c(){var e=this;e._rootNodeID?void 0:m("63");var t=D(e);switch(t?void 0:m("64"),e._tag){case"iframe":case"object":e._wrapperState.listeners=[k.trapBubbledEvent("topLoad","load",t)];break;case"video":case"audio":e._wrapperState.listeners=[];for(var n in G)G.hasOwnProperty(n)&&e._wrapperState.listeners.push(k.trapBubbledEvent(n,G[n],t));break;case"source":e._wrapperState.listeners=[k.trapBubbledEvent("topError","error",t)];break;case"img":e._wrapperState.listeners=[k.trapBubbledEvent("topError","error",t),k.trapBubbledEvent("topLoad","load",t)];break;case"form":e._wrapperState.listeners=[k.trapBubbledEvent("topReset","reset",t),k.trapBubbledEvent("topSubmit","submit",t)];break;case"input":case"select":case"textarea":e._wrapperState.listeners=[k.trapBubbledEvent("topInvalid","invalid",t)]}}function h(){M.postUpdateWrapper(this)}function d(e){Z.call(Y,e)||(Q.test(e)?void 0:m("65",e),Y[e]=!0)}function f(e,t){return e.indexOf("-")>=0||null!=t.is}function p(e){var t=e.type;d(t),this._currentElement=e,this._tag=t.toLowerCase(),this._namespaceURI=null,this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._hostNode=null,this._hostParent=null,this._rootNodeID=0,this._domID=0,this._hostContainerInfo=null,this._wrapperState=null,this._topLevelWrapper=null,this._flags=0}var m=n(3),g=n(5),v=n(196),y=n(198),w=n(22),b=n(46),_=n(23),x=n(76),E=n(30),C=n(47),k=n(35),S=n(77),P=n(7),T=n(214),N=n(215),M=n(78),I=n(218),L=(n(13),n(227)),A=n(232),O=(n(11),n(38)),B=(n(1),n(58),n(41),n(60),n(2),S),z=E.deleteListener,D=P.getNodeFromInstance,R=k.listenTo,j=C.registrationNameModules,F={string:!0,number:!0},q="style",V="__html",U={children:null,dangerouslySetInnerHTML:null,suppressContentEditableWarning:null},W=11,G={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},H={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},X={listing:!0,pre:!0,textarea:!0},K=g({menuitem:!0},H),Q=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,Y={},Z={}.hasOwnProperty,$=1;p.displayName="ReactDOMComponent",p.Mixin={mountComponent:function(e,t,n,r){this._rootNodeID=$++,this._domID=n._idCounter++,this._hostParent=t,this._hostContainerInfo=n;var a=this._currentElement.props;switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":this._wrapperState={listeners:null},e.getReactMountReady().enqueue(c,this);break;case"input":T.mountWrapper(this,a,t),a=T.getHostProps(this,a),e.getReactMountReady().enqueue(c,this);break;case"option":N.mountWrapper(this,a,t),a=N.getHostProps(this,a);break;case"select":M.mountWrapper(this,a,t),a=M.getHostProps(this,a),e.getReactMountReady().enqueue(c,this);break;case"textarea":I.mountWrapper(this,a,t),a=I.getHostProps(this,a),e.getReactMountReady().enqueue(c,this)}i(this,a);var o,h;null!=t?(o=t._namespaceURI,h=t._tag):n._tag&&(o=n._namespaceURI,h=n._tag),(null==o||o===b.svg&&"foreignobject"===h)&&(o=b.html),o===b.html&&("svg"===this._tag?o=b.svg:"math"===this._tag&&(o=b.mathml)),this._namespaceURI=o;var d;if(e.useCreateElement){var f,p=n._ownerDocument;if(o===b.html)if("script"===this._tag){var m=p.createElement("div"),g=this._currentElement.type;m.innerHTML="<"+g+"></"+g+">",f=m.removeChild(m.firstChild)}else f=a.is?p.createElement(this._currentElement.type,a.is):p.createElement(this._currentElement.type);else f=p.createElementNS(o,this._currentElement.type);P.precacheNode(this,f),this._flags|=B.hasCachedChildNodes,this._hostParent||x.setAttributeForRoot(f),this._updateDOMProperties(null,a,e);var y=w(f);this._createInitialChildren(e,a,r,y),d=y}else{var _=this._createOpenTagMarkupAndPutListeners(e,a),E=this._createContentMarkup(e,a,r);d=!E&&H[this._tag]?_+"/>":_+">"+E+"</"+this._currentElement.type+">"}switch(this._tag){case"input":e.getReactMountReady().enqueue(s,this),a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"textarea":e.getReactMountReady().enqueue(l,this),a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"select":a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"button":a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"option":e.getReactMountReady().enqueue(u,this)}return d},_createOpenTagMarkupAndPutListeners:function(e,t){var n="<"+this._currentElement.type;for(var r in t)if(t.hasOwnProperty(r)){var i=t[r];if(null!=i)if(j.hasOwnProperty(r))i&&a(this,r,i,e);else{r===q&&(i&&(i=this._previousStyleCopy=g({},t.style)),i=y.createMarkupForStyles(i,this));var o=null;null!=this._tag&&f(this._tag,t)?U.hasOwnProperty(r)||(o=x.createMarkupForCustomAttribute(r,i)):o=x.createMarkupForProperty(r,i),o&&(n+=" "+o)}}return e.renderToStaticMarkup?n:(this._hostParent||(n+=" "+x.createMarkupForRoot()),n+=" "+x.createMarkupForID(this._domID))},_createContentMarkup:function(e,t,n){var r="",i=t.dangerouslySetInnerHTML;if(null!=i)null!=i.__html&&(r=i.__html);else{var a=F[typeof t.children]?t.children:null,o=null!=a?null:t.children;if(null!=a)r=O(a);else if(null!=o){var s=this.mountChildren(o,e,n);r=s.join("")}}return X[this._tag]&&"\n"===r.charAt(0)?"\n"+r:r},_createInitialChildren:function(e,t,n,r){var i=t.dangerouslySetInnerHTML;if(null!=i)null!=i.__html&&w.queueHTML(r,i.__html);else{var a=F[typeof t.children]?t.children:null,o=null!=a?null:t.children;if(null!=a)""!==a&&w.queueText(r,a);else if(null!=o)for(var s=this.mountChildren(o,e,n),l=0;l<s.length;l++)w.queueChild(r,s[l])}},receiveComponent:function(e,t,n){var r=this._currentElement;this._currentElement=e,this.updateComponent(t,r,e,n)},updateComponent:function(e,t,n,r){var a=t.props,o=this._currentElement.props;switch(this._tag){case"input":a=T.getHostProps(this,a),o=T.getHostProps(this,o);break;case"option":a=N.getHostProps(this,a),o=N.getHostProps(this,o);break;case"select":a=M.getHostProps(this,a),o=M.getHostProps(this,o);break;case"textarea":a=I.getHostProps(this,a),o=I.getHostProps(this,o)}switch(i(this,o),this._updateDOMProperties(a,o,e),this._updateDOMChildren(a,o,e,r),this._tag){case"input":T.updateWrapper(this);break;case"textarea":I.updateWrapper(this);break;case"select":e.getReactMountReady().enqueue(h,this)}},_updateDOMProperties:function(e,t,n){var r,i,o;for(r in e)if(!t.hasOwnProperty(r)&&e.hasOwnProperty(r)&&null!=e[r])if(r===q){var s=this._previousStyleCopy;for(i in s)s.hasOwnProperty(i)&&(o=o||{},o[i]="");this._previousStyleCopy=null}else j.hasOwnProperty(r)?e[r]&&z(this,r):f(this._tag,e)?U.hasOwnProperty(r)||x.deleteValueForAttribute(D(this),r):(_.properties[r]||_.isCustomAttribute(r))&&x.deleteValueForProperty(D(this),r);for(r in t){var l=t[r],u=r===q?this._previousStyleCopy:null!=e?e[r]:void 0;if(t.hasOwnProperty(r)&&l!==u&&(null!=l||null!=u))if(r===q)if(l?l=this._previousStyleCopy=g({},l):this._previousStyleCopy=null,u){for(i in u)!u.hasOwnProperty(i)||l&&l.hasOwnProperty(i)||(o=o||{},o[i]="");for(i in l)l.hasOwnProperty(i)&&u[i]!==l[i]&&(o=o||{},o[i]=l[i])}else o=l;else if(j.hasOwnProperty(r))l?a(this,r,l,n):u&&z(this,r);else if(f(this._tag,t))U.hasOwnProperty(r)||x.setValueForAttribute(D(this),r,l);else if(_.properties[r]||_.isCustomAttribute(r)){var c=D(this);null!=l?x.setValueForProperty(c,r,l):x.deleteValueForProperty(c,r)}}o&&y.setValueForStyles(D(this),o,this)},_updateDOMChildren:function(e,t,n,r){var i=F[typeof e.children]?e.children:null,a=F[typeof t.children]?t.children:null,o=e.dangerouslySetInnerHTML&&e.dangerouslySetInnerHTML.__html,s=t.dangerouslySetInnerHTML&&t.dangerouslySetInnerHTML.__html,l=null!=i?null:e.children,u=null!=a?null:t.children,c=null!=i||null!=o,h=null!=a||null!=s;null!=l&&null==u?this.updateChildren(null,n,r):c&&!h&&this.updateTextContent(""),null!=a?i!==a&&this.updateTextContent(""+a):null!=s?o!==s&&this.updateMarkup(""+s):null!=u&&this.updateChildren(u,n,r)},getHostNode:function(){return D(this)},unmountComponent:function(e){switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":var t=this._wrapperState.listeners;if(t)for(var n=0;n<t.length;n++)t[n].remove();break;case"html":case"head":case"body":m("66",this._tag)}this.unmountChildren(e),P.uncacheNode(this),E.deleteAllListeners(this),this._rootNodeID=0,this._domID=0,this._wrapperState=null},getPublicInstance:function(){return D(this)}},g(p.prototype,p.Mixin,L.Mixin),e.exports=p},function(e,t,n){"use strict";function r(e,t){var n={_topLevelWrapper:e,_idCounter:1,_ownerDocument:t?t.nodeType===i?t:t.ownerDocument:null,_node:t,_tag:t?t.nodeName.toLowerCase():null,_namespaceURI:t?t.namespaceURI:null};return n}var i=(n(60),9);e.exports=r},function(e,t,n){"use strict";var r=n(5),i=n(22),a=n(7),o=function(e){this._currentElement=null,this._hostNode=null,this._hostParent=null,this._hostContainerInfo=null,this._domID=0};r(o.prototype,{mountComponent:function(e,t,n,r){var o=n._idCounter++;this._domID=o,this._hostParent=t,this._hostContainerInfo=n;var s=" react-empty: "+this._domID+" ";if(e.useCreateElement){var l=n._ownerDocument,u=l.createComment(s);return a.precacheNode(this,u),i(u)}return e.renderToStaticMarkup?"":"<!--"+s+"-->"},receiveComponent:function(){},getHostNode:function(){return a.getNodeFromInstance(this)},unmountComponent:function(){a.uncacheNode(this)}}),e.exports=o},function(e,t,n){"use strict";var r={useCreateElement:!0,useFiber:!1};e.exports=r},function(e,t,n){"use strict";var r=n(45),i=n(7),a={dangerouslyProcessChildrenUpdates:function(e,t){var n=i.getNodeFromInstance(e);r.processUpdates(n,t)}};e.exports=a},function(e,t,n){"use strict";function r(){this._rootNodeID&&h.updateWrapper(this)}function i(e){var t=this._currentElement.props,n=l.executeOnChange(t,e);c.asap(r,this);var i=t.name;if("radio"===t.type&&null!=i){for(var o=u.getNodeFromInstance(this),s=o;s.parentNode;)s=s.parentNode;for(var h=s.querySelectorAll("input[name="+JSON.stringify(""+i)+'][type="radio"]'),d=0;d<h.length;d++){var f=h[d];if(f!==o&&f.form===o.form){var p=u.getInstanceFromNode(f);p?void 0:a("90"),c.asap(r,p)}}}return n}var a=n(3),o=n(5),s=n(76),l=n(50),u=n(7),c=n(14),h=(n(1),n(2),{getHostProps:function(e,t){var n=l.getValue(t),r=l.getChecked(t),i=o({type:void 0,step:void 0,min:void 0,max:void 0},t,{defaultChecked:void 0,defaultValue:void 0,value:null!=n?n:e._wrapperState.initialValue,checked:null!=r?r:e._wrapperState.initialChecked,onChange:e._wrapperState.onChange});return i},mountWrapper:function(e,t){var n=t.defaultValue;e._wrapperState={initialChecked:null!=t.checked?t.checked:t.defaultChecked,initialValue:null!=t.value?t.value:n,listeners:null,onChange:i.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=t.checked;null!=n&&s.setValueForProperty(u.getNodeFromInstance(e),"checked",n||!1);var r=u.getNodeFromInstance(e),i=l.getValue(t);if(null!=i){var a=""+i;a!==r.value&&(r.value=a)}else null==t.value&&null!=t.defaultValue&&r.defaultValue!==""+t.defaultValue&&(r.defaultValue=""+t.defaultValue),null==t.checked&&null!=t.defaultChecked&&(r.defaultChecked=!!t.defaultChecked)},postMountWrapper:function(e){var t=e._currentElement.props,n=u.getNodeFromInstance(e);switch(t.type){case"submit":case"reset":break;case"color":case"date":case"datetime":case"datetime-local":case"month":case"time":case"week":n.value="",n.value=n.defaultValue;break;default:n.value=n.value}var r=n.name;""!==r&&(n.name=""),n.defaultChecked=!n.defaultChecked,n.defaultChecked=!n.defaultChecked,""!==r&&(n.name=r)}});e.exports=h},function(e,t,n){"use strict";function r(e){var t="";return a.Children.forEach(e,function(e){null!=e&&("string"==typeof e||"number"==typeof e?t+=e:l||(l=!0))}),t}var i=n(5),a=n(25),o=n(7),s=n(78),l=(n(2),!1),u={mountWrapper:function(e,t,n){var i=null;if(null!=n){var a=n;"optgroup"===a._tag&&(a=a._hostParent),null!=a&&"select"===a._tag&&(i=s.getSelectValueContext(a))}var o=null;if(null!=i){var l;if(l=null!=t.value?t.value+"":r(t.children),o=!1,Array.isArray(i)){for(var u=0;u<i.length;u++)if(""+i[u]===l){o=!0;break}}else o=""+i===l}e._wrapperState={selected:o}},postMountWrapper:function(e){var t=e._currentElement.props;if(null!=t.value){var n=o.getNodeFromInstance(e);n.setAttribute("value",t.value)}},getHostProps:function(e,t){var n=i({selected:void 0,children:void 0},t);null!=e._wrapperState.selected&&(n.selected=e._wrapperState.selected);var a=r(t.children);return a&&(n.children=a),n}};e.exports=u},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(e){return null}var l=r(t.anchorNode,t.anchorOffset,t.focusNode,t.focusOffset),u=l?0:s.toString().length,c=s.cloneRange();c.selectNodeContents(e),c.setEnd(s.startContainer,s.startOffset);var h=r(c.startContainer,c.startOffset,c.endContainer,c.endOffset),d=h?0:c.toString().length,f=d+u,p=document.createRange();p.setStart(n,i),p.setEnd(a,o);var m=p.collapsed;return{start:m?f:d,end:m?d:f}}function o(e,t){var n,r,i=document.selection.createRange().duplicate();void 0===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=void 0===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(9),u=n(255),c=n(89),h=l.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:h?i:a,setOffsets:h?o:s};e.exports=d},function(e,t,n){"use strict";var r=n(3),i=n(5),a=n(45),o=n(22),s=n(7),l=n(38),u=(n(1),n(60),function(e){this._currentElement=e,this._stringText=""+e,this._hostNode=null,this._hostParent=null,this._domID=0,this._mountIndex=0,this._closingComment=null,this._commentNodes=null});i(u.prototype,{mountComponent:function(e,t,n,r){var i=n._idCounter++,a=" react-text: "+i+" ",u=" /react-text ";if(this._domID=i,this._hostParent=t,e.useCreateElement){var c=n._ownerDocument,h=c.createComment(a),d=c.createComment(u),f=o(c.createDocumentFragment());return o.queueChild(f,o(h)),this._stringText&&o.queueChild(f,o(c.createTextNode(this._stringText))),o.queueChild(f,o(d)),s.precacheNode(this,h),this._closingComment=d,f}var p=l(this._stringText);return e.renderToStaticMarkup?p:"<!--"+a+"-->"+p+"<!--"+u+"-->"},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var r=this.getHostNode();a.replaceDelimitedText(r[0],r[1],n)}}},getHostNode:function(){var e=this._commentNodes;if(e)return e;if(!this._closingComment)for(var t=s.getNodeFromInstance(this),n=t.nextSibling;;){if(null==n?r("67",this._domID):void 0,8===n.nodeType&&" /react-text "===n.nodeValue){this._closingComment=n;break}n=n.nextSibling}return e=[this._hostNode,this._closingComment],this._commentNodes=e,e},unmountComponent:function(){this._closingComment=null,this._commentNodes=null,s.uncacheNode(this)}}),e.exports=u},function(e,t,n){"use strict";function r(){this._rootNodeID&&c.updateWrapper(this)}function i(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);return u.asap(r,this),n}var a=n(3),o=n(5),s=n(50),l=n(7),u=n(14),c=(n(1),n(2),{getHostProps:function(e,t){null!=t.dangerouslySetInnerHTML?a("91"):void 0;var n=o({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue,onChange:e._wrapperState.onChange});return n},mountWrapper:function(e,t){var n=s.getValue(t),r=n;if(null==n){var o=t.defaultValue,l=t.children;null!=l&&(null!=o?a("92"):void 0,Array.isArray(l)&&(l.length<=1?void 0:a("93"),l=l[0]),o=""+l),null==o&&(o=""),r=o}e._wrapperState={initialValue:""+r,listeners:null,onChange:i.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=l.getNodeFromInstance(e),r=s.getValue(t);if(null!=r){var i=""+r;i!==n.value&&(n.value=i),null==t.defaultValue&&(n.defaultValue=i)}null!=t.defaultValue&&(n.defaultValue=t.defaultValue)},postMountWrapper:function(e){var t=l.getNodeFromInstance(e),n=t.textContent;n===e._wrapperState.initialValue&&(t.value=n)}});e.exports=c},function(e,t,n){"use strict";function r(e,t){"_hostNode"in e?void 0:l("33"),"_hostNode"in t?void 0:l("33");for(var n=0,r=e;r;r=r._hostParent)n++;for(var i=0,a=t;a;a=a._hostParent)i++;for(;n-i>0;)e=e._hostParent,n--;for(;i-n>0;)t=t._hostParent,i--;for(var o=n;o--;){if(e===t)return e;e=e._hostParent,t=t._hostParent}return null}function i(e,t){"_hostNode"in e?void 0:l("35"),"_hostNode"in t?void 0:l("35");for(;t;){if(t===e)return!0;t=t._hostParent}return!1}function a(e){return"_hostNode"in e?void 0:l("36"),e._hostParent}function o(e,t,n){for(var r=[];e;)r.push(e),e=e._hostParent;var i;for(i=r.length;i-- >0;)t(r[i],"captured",n);for(i=0;i<r.length;i++)t(r[i],"bubbled",n)}function s(e,t,n,i,a){for(var o=e&&t?r(e,t):null,s=[];e&&e!==o;)s.push(e),e=e._hostParent;for(var l=[];t&&t!==o;)l.push(t),t=t._hostParent;var u;for(u=0;u<s.length;u++)n(s[u],"bubbled",i);for(u=l.length;u-- >0;)n(l[u],"captured",a)}var l=n(3);n(1);e.exports={isAncestor:i,getLowestCommonAncestor:r,getParentInstance:a,traverseTwoPhase:o,traverseEnterLeave:s}},function(e,t,n){"use strict";function r(){this.reinitializeTransaction()}var i=n(5),a=n(14),o=n(37),s=n(11),l={initialize:s,close:function(){d.isBatchingUpdates=!1}},u={initialize:s,close:a.flushBatchedUpdates.bind(a)},c=[u,l];i(r.prototype,o,{getTransactionWrappers:function(){return c}});var h=new r,d={isBatchingUpdates:!1,batchedUpdates:function(e,t,n,r,i,a){var o=d.isBatchingUpdates;return d.isBatchingUpdates=!0,o?e(t,n,r,i,a):h.perform(e,null,t,n,r,i,a)}};e.exports=d},function(e,t,n){"use strict";function r(){E||(E=!0,y.EventEmitter.injectReactEventListener(v),y.EventPluginHub.injectEventPluginOrder(s),y.EventPluginUtils.injectComponentTree(d),y.EventPluginUtils.injectTreeTraversal(p),y.EventPluginHub.injectEventPluginsByName({SimpleEventPlugin:x,EnterLeaveEventPlugin:l,ChangeEventPlugin:o,SelectEventPlugin:_,BeforeInputEventPlugin:a}),y.HostComponent.injectGenericComponentClass(h),y.HostComponent.injectTextComponentClass(m),y.DOMProperty.injectDOMPropertyConfig(i),y.DOMProperty.injectDOMPropertyConfig(u),y.DOMProperty.injectDOMPropertyConfig(b),y.EmptyComponent.injectEmptyComponentFactory(function(e){return new f(e)}),y.Updates.injectReconcileTransaction(w),y.Updates.injectBatchingStrategy(g),y.Component.injectEnvironment(c))}var i=n(195),a=n(197),o=n(199),s=n(201),l=n(202),u=n(204),c=n(206),h=n(209),d=n(7),f=n(211),p=n(219),m=n(217),g=n(220),v=n(224),y=n(225),w=n(230),b=n(235),_=n(236),x=n(237),E=!1;e.exports={inject:r}},function(e,t,n){"use strict";var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;e.exports=r},function(e,t,n){"use strict";function r(e){i.enqueueEvents(e),i.processEventQueue(!1)}var i=n(30),a={handleTopLevel:function(e,t,n,a){var o=i.extractEvents(e,t,n,a);r(o)}};e.exports=a},function(e,t,n){"use strict";function r(e){for(;e._hostParent;)e=e._hostParent;var t=h.getNodeFromInstance(e),n=t.parentNode;return h.getClosestInstanceFromNode(n)}function i(e,t){this.topLevelType=e,this.nativeEvent=t,this.ancestors=[]}function a(e){var t=f(e.nativeEvent),n=h.getClosestInstanceFromNode(t),i=n;do e.ancestors.push(i),i=i&&r(i);while(i);for(var a=0;a<e.ancestors.length;a++)n=e.ancestors[a],m._handleTopLevel(e.topLevelType,n,e.nativeEvent,f(e.nativeEvent))}function o(e){var t=p(window);e(t)}var s=n(5),l=n(67),u=n(9),c=n(19),h=n(7),d=n(14),f=n(57),p=n(179);s(i.prototype,{destructor:function(){this.topLevelType=null,this.nativeEvent=null,this.ancestors.length=0}}),c.addPoolingTo(i,c.twoArgumentPooler);var m={_enabled:!0,_handleTopLevel:null,WINDOW_HANDLE:u.canUseDOM?window:null,setHandleTopLevel:function(e){m._handleTopLevel=e},setEnabled:function(e){m._enabled=!!e},isEnabled:function(){return m._enabled},trapBubbledEvent:function(e,t,n){return n?l.listen(n,t,m.dispatchEvent.bind(null,e)):null},trapCapturedEvent:function(e,t,n){return n?l.capture(n,t,m.dispatchEvent.bind(null,e)):null},monitorScrollValue:function(e){var t=o.bind(null,e);l.listen(window,"scroll",t)},dispatchEvent:function(e,t){if(m._enabled){var n=i.getPooled(e,t);try{d.batchedUpdates(a,n)}finally{i.release(n)}}}};e.exports=m},function(e,t,n){"use strict";var r=n(23),i=n(30),a=n(48),o=n(51),s=n(79),l=n(35),u=n(81),c=n(14),h={Component:o.injection,DOMProperty:r.injection,EmptyComponent:s.injection,EventPluginHub:i.injection,EventPluginUtils:a.injection,EventEmitter:l.injection,HostComponent:u.injection,Updates:c.injection};e.exports=h},function(e,t,n){"use strict";var r=n(248),i=/\/?>/,a=/^<\!\-\-/,o={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return a.test(e)?e:e.replace(i," "+o.CHECKSUM_ATTR_NAME+'="'+t+'"$&')},canReuseMarkup:function(e,t){var n=t.getAttribute(o.CHECKSUM_ATTR_NAME);n=n&&parseInt(n,10);var i=r(e);return i===n}};e.exports=o},function(e,t,n){"use strict";function r(e,t,n){return{type:"INSERT_MARKUP",content:e,fromIndex:null,fromNode:null,toIndex:n,afterNode:t}}function i(e,t,n){return{type:"MOVE_EXISTING",content:null,fromIndex:e._mountIndex,fromNode:d.getHostNode(e),toIndex:n,afterNode:t}}function a(e,t){return{type:"REMOVE_NODE",content:null,fromIndex:e._mountIndex,fromNode:t,toIndex:null,afterNode:null}}function o(e){return{type:"SET_MARKUP",content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function s(e){return{type:"TEXT_CONTENT",content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function l(e,t){return t&&(e=e||[],e.push(t)),e}function u(e,t){h.processChildrenUpdates(e,t)}var c=n(3),h=n(51),d=(n(32),n(13),n(17),n(24)),f=n(205),p=(n(11),n(251)),m=(n(1),{Mixin:{_reconcilerInstantiateChildren:function(e,t,n){return f.instantiateChildren(e,t,n)},_reconcilerUpdateChildren:function(e,t,n,r,i,a){var o,s=0;return o=p(t,s),f.updateChildren(e,o,n,r,i,this,this._hostContainerInfo,a,s),o},mountChildren:function(e,t,n){var r=this._reconcilerInstantiateChildren(e,t,n);this._renderedChildren=r;var i=[],a=0;for(var o in r)if(r.hasOwnProperty(o)){var s=r[o],l=0,u=d.mountComponent(s,t,this,this._hostContainerInfo,n,l);s._mountIndex=a++,i.push(u)}return i},updateTextContent:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[s(e)];u(this,r)},updateMarkup:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[o(e)];u(this,r)},updateChildren:function(e,t,n){this._updateChildren(e,t,n)},_updateChildren:function(e,t,n){var r=this._renderedChildren,i={},a=[],o=this._reconcilerUpdateChildren(r,e,a,i,t,n);if(o||r){var s,c=null,h=0,f=0,p=0,m=null;for(s in o)if(o.hasOwnProperty(s)){var g=r&&r[s],v=o[s];g===v?(c=l(c,this.moveChild(g,m,h,f)),f=Math.max(g._mountIndex,f),g._mountIndex=h):(g&&(f=Math.max(g._mountIndex,f)),c=l(c,this._mountChildAtIndex(v,a[p],m,h,t,n)),p++),h++,m=d.getHostNode(v)}for(s in i)i.hasOwnProperty(s)&&(c=l(c,this._unmountChild(r[s],i[s])));c&&u(this,c),this._renderedChildren=o}},unmountChildren:function(e){var t=this._renderedChildren;f.unmountChildren(t,e),this._renderedChildren=null},moveChild:function(e,t,n,r){if(e._mountIndex<r)return i(e,t,n)},createChild:function(e,t,n){return r(n,t,e._mountIndex)},removeChild:function(e,t){return a(e,t)},_mountChildAtIndex:function(e,t,n,r,i,a){return e._mountIndex=r,this.createChild(e,n,t)},_unmountChild:function(e,t){var n=this.removeChild(e,t);return e._mountIndex=null,n}}});e.exports=m},function(e,t,n){"use strict";function r(e){return!(!e||"function"!=typeof e.attachRef||"function"!=typeof e.detachRef)}var i=n(3),a=(n(1),{addComponentAsRefTo:function(e,t,n){r(n)?void 0:i("119"),n.attachRef(t,e)},removeComponentAsRefFrom:function(e,t,n){r(n)?void 0:i("120");var a=n.getPublicInstance();a&&a.refs[t]===e.getPublicInstance()&&n.detachRef(t)}});e.exports=a},function(e,t,n){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r},function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=!1,this.reactMountReady=a.getPooled(null),this.useCreateElement=e}var i=n(5),a=n(75),o=n(19),s=n(35),l=n(82),u=(n(13),n(37)),c=n(53),h={initialize:l.getSelectionInformation,close:l.restoreSelection},d={initialize:function(){var e=s.isEnabled();return s.setEnabled(!1),e},close:function(e){s.setEnabled(e)}},f={initialize:function(){this.reactMountReady.reset()},close:function(){this.reactMountReady.notifyAll()}},p=[h,d,f],m={getTransactionWrappers:function(){return p},getReactMountReady:function(){return this.reactMountReady},getUpdateQueue:function(){return c},checkpoint:function(){return this.reactMountReady.checkpoint()},rollback:function(e){this.reactMountReady.rollback(e)},destructor:function(){a.release(this.reactMountReady),this.reactMountReady=null}};i(r.prototype,u,m),o.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";function r(e,t,n){"function"==typeof e?e(t.getPublicInstance()):a.addComponentAsRefTo(t,e,n)}function i(e,t,n){"function"==typeof e?e(null):a.removeComponentAsRefFrom(t,e,n)}var a=n(228),o={};o.attachRefs=function(e,t){if(null!==t&&"object"==typeof t){var n=t.ref;null!=n&&r(n,e,t._owner)}},o.shouldUpdateRefs=function(e,t){var n=null,r=null;null!==e&&"object"==typeof e&&(n=e.ref,r=e._owner);var i=null,a=null;return null!==t&&"object"==typeof t&&(i=t.ref,a=t._owner),n!==i||"string"==typeof i&&a!==r},o.detachRefs=function(e,t){if(null!==t&&"object"==typeof t){var n=t.ref;null!=n&&i(n,e,t._owner)}},e.exports=o},function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=e,this.useCreateElement=!1,this.updateQueue=new s(this)}var i=n(5),a=n(19),o=n(37),s=(n(13),n(233)),l=[],u={enqueue:function(){}},c={getTransactionWrappers:function(){return l},getReactMountReady:function(){return u},getUpdateQueue:function(){return this.updateQueue},destructor:function(){},checkpoint:function(){},rollback:function(){}};i(r.prototype,o,c),a.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){}var a=n(53),o=(n(2),function(){function e(t){r(this,e),this.transaction=t}return e.prototype.isMounted=function(e){return!1},e.prototype.enqueueCallback=function(e,t,n){this.transaction.isInTransaction()&&a.enqueueCallback(e,t,n)},e.prototype.enqueueForceUpdate=function(e){this.transaction.isInTransaction()?a.enqueueForceUpdate(e):i(e,"forceUpdate")},e.prototype.enqueueReplaceState=function(e,t){this.transaction.isInTransaction()?a.enqueueReplaceState(e,t):i(e,"replaceState")},e.prototype.enqueueSetState=function(e,t){this.transaction.isInTransaction()?a.enqueueSetState(e,t):i(e,"setState")},e}());e.exports=o},function(e,t,n){"use strict";e.exports="15.4.2"},function(e,t,n){"use strict";var r={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},i={accentHeight:"accent-height",accumulate:0,additive:0,alignmentBaseline:"alignment-baseline",allowReorder:"allowReorder",alphabetic:0,amplitude:0,arabicForm:"arabic-form",ascent:0,attributeName:"attributeName",attributeType:"attributeType",autoReverse:"autoReverse",azimuth:0,baseFrequency:"baseFrequency",baseProfile:"baseProfile",baselineShift:"baseline-shift",bbox:0,begin:0,bias:0,by:0,calcMode:"calcMode",capHeight:"cap-height",clip:0,clipPath:"clip-path",clipRule:"clip-rule",clipPathUnits:"clipPathUnits",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",contentScriptType:"contentScriptType",contentStyleType:"contentStyleType",cursor:0,cx:0,cy:0,d:0,decelerate:0,descent:0,diffuseConstant:"diffuseConstant",
+x.brewer=b={OrRd:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"],PuBu:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"],BuPu:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"],Oranges:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"],BuGn:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"],YlOrBr:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"],YlGn:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"],Reds:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"],RdPu:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"],Greens:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"],YlGnBu:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],Purples:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"],GnBu:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],Greys:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"],YlOrRd:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"],PuRd:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"],Blues:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"],PuBuGn:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"],Spectral:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],RdYlGn:["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],RdBu:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],PiYG:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],PRGn:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],RdYlBu:["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],BrBG:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],RdGy:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],PuOr:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],Set2:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"],Accent:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"],Set1:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"],Set3:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"],Dark2:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"],Paired:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"],Pastel2:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"],Pastel1:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]},ke={indigo:"#4b0082",gold:"#ffd700",hotpink:"#ff69b4",firebrick:"#b22222",indianred:"#cd5c5c",yellow:"#ffff00",mistyrose:"#ffe4e1",darkolivegreen:"#556b2f",olive:"#808000",darkseagreen:"#8fbc8f",pink:"#ffc0cb",tomato:"#ff6347",lightcoral:"#f08080",orangered:"#ff4500",navajowhite:"#ffdead",lime:"#00ff00",palegreen:"#98fb98",darkslategrey:"#2f4f4f",greenyellow:"#adff2f",burlywood:"#deb887",seashell:"#fff5ee",mediumspringgreen:"#00fa9a",fuchsia:"#ff00ff",papayawhip:"#ffefd5",blanchedalmond:"#ffebcd",chartreuse:"#7fff00",dimgray:"#696969",black:"#000000",peachpuff:"#ffdab9",springgreen:"#00ff7f",aquamarine:"#7fffd4",white:"#ffffff",orange:"#ffa500",lightsalmon:"#ffa07a",darkslategray:"#2f4f4f",brown:"#a52a2a",ivory:"#fffff0",dodgerblue:"#1e90ff",peru:"#cd853f",lawngreen:"#7cfc00",chocolate:"#d2691e",crimson:"#dc143c",forestgreen:"#228b22",darkgrey:"#a9a9a9",lightseagreen:"#20b2aa",cyan:"#00ffff",mintcream:"#f5fffa",silver:"#c0c0c0",antiquewhite:"#faebd7",mediumorchid:"#ba55d3",skyblue:"#87ceeb",gray:"#808080",darkturquoise:"#00ced1",goldenrod:"#daa520",darkgreen:"#006400",floralwhite:"#fffaf0",darkviolet:"#9400d3",darkgray:"#a9a9a9",moccasin:"#ffe4b5",saddlebrown:"#8b4513",grey:"#808080",darkslateblue:"#483d8b",lightskyblue:"#87cefa",lightpink:"#ffb6c1",mediumvioletred:"#c71585",slategrey:"#708090",red:"#ff0000",deeppink:"#ff1493",limegreen:"#32cd32",darkmagenta:"#8b008b",palegoldenrod:"#eee8aa",plum:"#dda0dd",turquoise:"#40e0d0",lightgrey:"#d3d3d3",lightgoldenrodyellow:"#fafad2",darkgoldenrod:"#b8860b",lavender:"#e6e6fa",maroon:"#800000",yellowgreen:"#9acd32",sandybrown:"#f4a460",thistle:"#d8bfd8",violet:"#ee82ee",navy:"#000080",magenta:"#ff00ff",dimgrey:"#696969",tan:"#d2b48c",rosybrown:"#bc8f8f",olivedrab:"#6b8e23",blue:"#0000ff",lightblue:"#add8e6",ghostwhite:"#f8f8ff",honeydew:"#f0fff0",cornflowerblue:"#6495ed",slateblue:"#6a5acd",linen:"#faf0e6",darkblue:"#00008b",powderblue:"#b0e0e6",seagreen:"#2e8b57",darkkhaki:"#bdb76b",snow:"#fffafa",sienna:"#a0522d",mediumblue:"#0000cd",royalblue:"#4169e1",lightcyan:"#e0ffff",green:"#008000",mediumpurple:"#9370db",midnightblue:"#191970",cornsilk:"#fff8dc",paleturquoise:"#afeeee",bisque:"#ffe4c4",slategray:"#708090",darkcyan:"#008b8b",khaki:"#f0e68c",wheat:"#f5deb3",teal:"#008080",darkorchid:"#9932cc",deepskyblue:"#00bfff",salmon:"#fa8072",darkred:"#8b0000",steelblue:"#4682b4",palevioletred:"#db7093",lightslategray:"#778899",aliceblue:"#f0f8ff",lightslategrey:"#778899",lightgreen:"#90ee90",orchid:"#da70d6",gainsboro:"#dcdcdc",mediumseagreen:"#3cb371",lightgray:"#d3d3d3",mediumturquoise:"#48d1cc",lemonchiffon:"#fffacd",cadetblue:"#5f9ea0",lightyellow:"#ffffe0",lavenderblush:"#fff0f5",coral:"#ff7f50",purple:"#800080",aqua:"#00ffff",whitesmoke:"#f5f5f5",mediumslateblue:"#7b68ee",darkorange:"#ff8c00",mediumaquamarine:"#66cdaa",darksalmon:"#e9967a",beige:"#f5f5dc",blueviolet:"#8a2be2",azure:"#f0ffff",lightsteelblue:"#b0c4de",oldlace:"#fdf5e6",rebeccapurple:"#663399"},x.colors=k=ke,U=function(){var e,t,n,r,i,a,s,l,u;return t=Ce(arguments),i=t[0],e=t[1],n=t[2],l=(i+16)/116,s=isNaN(e)?l:l+e/500,u=isNaN(n)?l:l-n/200,l=o.Yn*W(l),s=o.Xn*W(s),u=o.Zn*W(u),a=Pe(3.2404542*s-1.5371385*l-.4985314*u),r=Pe(-.969266*s+1.8760108*l+.041556*u),n=Pe(.0556434*s-.2040259*l+1.0572252*u),a=K(a,0,255),r=K(r,0,255),n=K(n,0,255),[a,r,n,t.length>3?t[3]:1]},Pe=function(e){return ye(255*(e<=.00304?12.92*e:1.055*re(e,1/2.4)-.055))},W=function(e){return e>o.t1?e*e*e:o.t2*(e-o.t0)},o={Kn:18,Xn:.95047,Yn:1,Zn:1.08883,t0:.137931034,t1:.206896552,t2:.12841855,t3:.008856452},ce=function(){var e,t,n,r,i,a,o,s;return r=Ce(arguments),n=r[0],t=r[1],e=r[2],i=me(n,t,e),a=i[0],o=i[1],s=i[2],[116*o-16,500*(a-o),200*(o-s)]},ge=function(e){return(e/=255)<=.04045?e/12.92:re((e+.055)/1.055,2.4)},Se=function(e){return e>o.t3?re(e,1/3):e/o.t2+o.t0},me=function(){var e,t,n,r,i,a,s;return r=Ce(arguments),n=r[0],t=r[1],e=r[2],n=ge(n),t=ge(t),e=ge(e),i=Se((.4124564*n+.3575761*t+.1804375*e)/o.Xn),a=Se((.2126729*n+.7151522*t+.072175*e)/o.Yn),s=Se((.0193339*n+.119192*t+.9503041*e)/o.Zn),[i,a,s]},x.lab=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["lab"]),function(){})},f.lab=U,i.prototype.lab=function(){return ce(this._rgb)},v=function(e){var t,n,r,i,a,o,s,l,u,c,h;return e=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(x(i));return r}(),2===e.length?(u=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(i.lab());return r}(),a=u[0],o=u[1],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;n<=2;t=++n)r.push(a[t]+e*(o[t]-a[t]));return r}(),x.lab.apply(x,n)}):3===e.length?(c=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(i.lab());return r}(),a=c[0],o=c[1],s=c[2],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;n<=2;t=++n)r.push((1-e)*(1-e)*a[t]+2*(1-e)*e*o[t]+e*e*s[t]);return r}(),x.lab.apply(x,n)}):4===e.length?(h=function(){var t,n,r;for(r=[],n=0,t=e.length;n<t;n++)i=e[n],r.push(i.lab());return r}(),a=h[0],o=h[1],s=h[2],l=h[3],t=function(e){var t,n;return n=function(){var n,r;for(r=[],t=n=0;n<=2;t=++n)r.push((1-e)*(1-e)*(1-e)*a[t]+3*(1-e)*(1-e)*e*o[t]+3*(1-e)*e*e*s[t]+e*e*e*l[t]);return r}(),x.lab.apply(x,n)}):5===e.length&&(n=v(e.slice(0,3)),r=v(e.slice(2,5)),t=function(e){return e<.5?n(2*e):r(2*(e-.5))}),t},x.bezier=function(e){var t;return t=v(e),t.scale=function(){return x.scale(t)},t},x.cubehelix=function(e,t,n,r,i){var a,o,s;return null==e&&(e=300),null==t&&(t=-1.5),null==n&&(n=1),null==r&&(r=1),null==i&&(i=[0,1]),o=i[1]-i[0],a=0,s=function(s){var l,u,h,d,f,p,m,g,v;return l=c*((e+120)/360+t*s),m=re(i[0]+o*s,r),p=0!==a?n[0]+s*a:n,u=p*m*(1-m)/2,d=S(l),v=be(l),g=m+u*(-.14861*d+1.78277*v),f=m+u*(-.29227*d-.90649*v),h=m+u*(1.97294*d),x(E([255*g,255*f,255*h]))},s.start=function(t){return null==t?e:(e=t,s)},s.rotations=function(e){return null==e?t:(t=e,s)},s.gamma=function(e){return null==e?r:(r=e,s)},s.hue=function(e){return null==e?n:(n=e,"array"===Ee(n)?(a=n[1]-n[0],0===a&&(n=n[1])):a=0,s)},s.lightness=function(e){return null==e?i:(i=e,"array"===Ee(i)?(o=i[1]-i[0],0===o&&(i=i[1])):o=0,s)},s.scale=function(){return x.scale(s)},s.hue(n),s},x.random=function(){var e,t,n,r;for(t="0123456789abcdef",e="#",n=r=0;r<6;n=++r)e+=t.charAt(L(16*Math.random()));return new i(e)},x.average=function(e){var t,n,r,a,o,s,l,u,c;for(u=a=n=t=0,o=e.length,l=0,s=e.length;l<s;l++)r=e[l],c=x(r).rgba(),u+=c[0],a+=c[1],n+=c[2],t+=c[3];return new i(u/o,a/o,n/o,t/o)},f.rgb=function(){var e,t,n,r;t=Ce(arguments),n=[];for(e in t)r=t[e],n.push(r);return n},x.rgb=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["rgb"]),function(){})},i.prototype.rgb=function(){return this._rgb.slice(0,3)},i.prototype.rgba=function(){return this._rgb},h.push({p:15,test:function(e){var t;return t=Ce(arguments),"array"===Ee(t)&&3===t.length?"rgb":4===t.length&&"number"===Ee(t[3])&&t[3]>=0&&t[3]<=1?"rgb":void 0}}),I=function(e){var t,n,r,i,a,o;if(e.match(/^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/))return 4!==e.length&&7!==e.length||(e=e.substr(1)),3===e.length&&(e=e.split(""),e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),o=parseInt(e,16),i=o>>16,r=o>>8&255,n=255&o,[i,r,n,1];if(e.match(/^#?([A-Fa-f0-9]{8})$/))return 9===e.length&&(e=e.substr(1)),o=parseInt(e,16),i=o>>24&255,r=o>>16&255,n=o>>8&255,t=ye((255&o)/255*100)/100,[i,r,n,t];if(null!=f.css&&(a=f.css(e)))return a;throw"unknown color: "+e},oe=function(e,t){var n,r,i,a,o,s,l;return null==t&&(t="rgb"),o=e[0],i=e[1],r=e[2],n=e[3],l=o<<16|i<<8|r,s="000000"+l.toString(16),s=s.substr(s.length-6),a="0"+ye(255*n).toString(16),a=a.substr(a.length-2),"#"+function(){switch(t.toLowerCase()){case"rgba":return s+a;case"argb":return a+s;default:return s}}()},f.hex=function(e){return I(e)},x.hex=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hex"]),function(){})},i.prototype.hex=function(e){return null==e&&(e="rgb"),oe(this._rgb,e)},h.push({p:10,test:function(e){if(1===arguments.length&&"string"===Ee(e))return"hex"}}),B=function(){var e,t,n,r,i,a,o,s,l,u,c,h,d,f;if(e=Ce(arguments),i=e[0],c=e[1],o=e[2],0===c)l=r=t=255*o;else{for(f=[0,0,0],n=[0,0,0],d=o<.5?o*(1+c):o+c-o*c,h=2*o-d,i/=360,f[0]=i+1/3,f[1]=i,f[2]=i-1/3,a=s=0;s<=2;a=++s)f[a]<0&&(f[a]+=1),f[a]>1&&(f[a]-=1),6*f[a]<1?n[a]=h+6*(d-h)*f[a]:2*f[a]<1?n[a]=d:3*f[a]<2?n[a]=h+(d-h)*(2/3-f[a])*6:n[a]=h;u=[ye(255*n[0]),ye(255*n[1]),ye(255*n[2])],l=u[0],r=u[1],t=u[2]}return e.length>3?[l,r,t,e[3]]:[l,r,t]},le=function(e,t,n){var r,i,a,o,s;return void 0!==e&&e.length>=3&&(o=e,e=o[0],t=o[1],n=o[2]),e/=255,t/=255,n/=255,a=Math.min(e,t,n),$=Math.max(e,t,n),i=($+a)/2,$===a?(s=0,r=Number.NaN):s=i<.5?($-a)/($+a):($-a)/(2-$-a),e===$?r=(t-n)/($-a):t===$?r=2+(n-e)/($-a):n===$&&(r=4+(e-t)/($-a)),r*=60,r<0&&(r+=360),[r,s,i]},x.hsl=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hsl"]),function(){})},f.hsl=B,i.prototype.hsl=function(){return le(this._rgb)},z=function(){var e,t,n,r,i,a,o,s,l,u,c,h,d,f,p,m,g,v;if(e=Ce(arguments),i=e[0],m=e[1],v=e[2],v*=255,0===m)l=r=t=v;else switch(360===i&&(i=0),i>360&&(i-=360),i<0&&(i+=360),i/=60,a=L(i),n=i-a,o=v*(1-m),s=v*(1-m*n),g=v*(1-m*(1-n)),a){case 0:u=[v,g,o],l=u[0],r=u[1],t=u[2];break;case 1:c=[s,v,o],l=c[0],r=c[1],t=c[2];break;case 2:h=[o,v,g],l=h[0],r=h[1],t=h[2];break;case 3:d=[o,s,v],l=d[0],r=d[1],t=d[2];break;case 4:f=[g,o,v],l=f[0],r=f[1],t=f[2];break;case 5:p=[v,o,s],l=p[0],r=p[1],t=p[2]}return l=ye(l),r=ye(r),t=ye(t),[l,r,t,e.length>3?e[3]:1]},ue=function(){var e,t,n,r,i,a,o,s,l;return o=Ce(arguments),a=o[0],n=o[1],e=o[2],i=Math.min(a,n,e),$=Math.max(a,n,e),t=$-i,l=$/255,0===$?(r=Number.NaN,s=0):(s=t/$,a===$&&(r=(n-e)/t),n===$&&(r=2+(e-a)/t),e===$&&(r=4+(a-n)/t),r*=60,r<0&&(r+=360)),[r,s,l]},x.hsv=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hsv"]),function(){})},f.hsv=z,i.prototype.hsv=function(){return ue(this._rgb)},te=function(e){var t,n,r;return"number"===Ee(e)&&e>=0&&e<=16777215?(r=e>>16,n=e>>8&255,t=255&e,[r,n,t,1]):(console.warn("unknown num color: "+e),[0,0,0,1])},fe=function(){var e,t,n,r;return r=Ce(arguments),n=r[0],t=r[1],e=r[2],(n<<16)+(t<<8)+e},x.num=function(e){return new i(e,"num")},i.prototype.num=function(e){return null==e&&(e="rgb"),fe(this._rgb,e)},f.num=te,h.push({p:10,test:function(e){if(1===arguments.length&&"number"===Ee(e)&&e>=0&&e<=16777215)return"num"}}),P=function(e){var t,n,r,i,a,o,s,l;if(e=e.toLowerCase(),null!=x.colors&&x.colors[e])return I(x.colors[e]);if(a=e.match(/rgb\(\s*(\-?\d+),\s*(\-?\d+)\s*,\s*(\-?\d+)\s*\)/)){for(s=a.slice(1,4),i=o=0;o<=2;i=++o)s[i]=+s[i];s[3]=1}else if(a=e.match(/rgba\(\s*(\-?\d+),\s*(\-?\d+)\s*,\s*(\-?\d+)\s*,\s*([01]|[01]?\.\d+)\)/))for(s=a.slice(1,5),i=l=0;l<=3;i=++l)s[i]=+s[i];else if(a=e.match(/rgb\(\s*(\-?\d+(?:\.\d+)?)%,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*\)/)){for(s=a.slice(1,4),i=t=0;t<=2;i=++t)s[i]=ye(2.55*s[i]);s[3]=1}else if(a=e.match(/rgba\(\s*(\-?\d+(?:\.\d+)?)%,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)/)){for(s=a.slice(1,5),i=n=0;n<=2;i=++n)s[i]=ye(2.55*s[i]);s[3]=+s[3]}else(a=e.match(/hsl\(\s*(\-?\d+(?:\.\d+)?),\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*\)/))?(r=a.slice(1,4),r[1]*=.01,r[2]*=.01,s=B(r),s[3]=1):(a=e.match(/hsla\(\s*(\-?\d+(?:\.\d+)?),\s*(\-?\d+(?:\.\d+)?)%\s*,\s*(\-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)/))&&(r=a.slice(1,4),r[1]*=.01,r[2]*=.01,s=B(r),s[3]=+a[4]);return s},ae=function(e){var t;return t=e[3]<1?"rgba":"rgb","rgb"===t?t+"("+e.slice(0,3).map(ye).join(",")+")":"rgba"===t?t+"("+e.slice(0,3).map(ye).join(",")+","+e[3]+")":void 0},ve=function(e){return ye(100*e)/100},O=function(e,t){var n;return n=t<1?"hsla":"hsl",e[0]=ve(e[0]||0),e[1]=ve(100*e[1])+"%",e[2]=ve(100*e[2])+"%","hsla"===n&&(e[3]=t),n+"("+e.join(",")+")"},f.css=function(e){return P(e)},x.css=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["css"]),function(){})},i.prototype.css=function(e){return null==e&&(e="rgb"),"rgb"===e.slice(0,3)?ae(this._rgb):"hsl"===e.slice(0,3)?O(this.hsl(),this.alpha()):void 0},f.named=function(e){return I(ke[e])},h.push({p:20,test:function(e){if(1===arguments.length&&null!=ke[e])return"named"}}),i.prototype.name=function(e){var t,n;arguments.length&&(ke[e]&&(this._rgb=I(ke[e])),this._rgb[3]=1),t=this.hex();for(n in ke)if(t===ke[n])return n;return t},G=function(){var e,t,n,r;return r=Ce(arguments),n=r[0],e=r[1],t=r[2],t*=a,[n,S(t)*e,be(t)*e]},H=function(){var e,t,n,r,i,a,o,s,l,u,c;return n=Ce(arguments),s=n[0],i=n[1],o=n[2],u=G(s,i,o),e=u[0],t=u[1],r=u[2],c=U(e,t,r),l=c[0],a=c[1],r=c[2],[K(l,0,255),K(a,0,255),K(r,0,255),n.length>3?n[3]:1]},V=function(){var e,t,n,r,i,a;return a=Ce(arguments),i=a[0],e=a[1],t=a[2],n=_e(e*e+t*t),r=(g(t,e)*u+360)%360,0===ye(1e4*n)&&(r=Number.NaN),[i,n,r]},he=function(){var e,t,n,r,i,a,o;return a=Ce(arguments),i=a[0],n=a[1],t=a[2],o=ce(i,n,t),r=o[0],e=o[1],t=o[2],V(r,e,t)},x.lch=function(){var e;return e=Ce(arguments),new i(e,"lch")},x.hcl=function(){var e;return e=Ce(arguments),new i(e,"hcl")},f.lch=H,f.hcl=function(){var e,t,n,r;return r=Ce(arguments),t=r[0],e=r[1],n=r[2],H([n,e,t])},i.prototype.lch=function(){return he(this._rgb)},i.prototype.hcl=function(){return he(this._rgb).reverse()},ie=function(e){var t,n,r,i,a,o,s,l,u;return null==e&&(e="rgb"),l=Ce(arguments),s=l[0],i=l[1],t=l[2],s/=255,i/=255,t/=255,a=1-Math.max(s,Math.max(i,t)),r=a<1?1/(1-a):0,n=(1-s-a)*r,o=(1-i-a)*r,u=(1-t-a)*r,[n,o,u,a]},C=function(){var e,t,n,r,i,a,o,s,l;return t=Ce(arguments),r=t[0],o=t[1],l=t[2],a=t[3],e=t.length>4?t[4]:1,1===a?[0,0,0,e]:(s=r>=1?0:ye(255*(1-r)*(1-a)),i=o>=1?0:ye(255*(1-o)*(1-a)),n=l>=1?0:ye(255*(1-l)*(1-a)),[s,i,n,e])},f.cmyk=function(){return C(Ce(arguments))},x.cmyk=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["cmyk"]),function(){})},i.prototype.cmyk=function(){return ie(this._rgb)},f.gl=function(){var e,t,n,r,i;for(r=function(){var e,n;e=Ce(arguments),n=[];for(t in e)i=e[t],n.push(i);return n}.apply(this,arguments),e=n=0;n<=2;e=++n)r[e]*=255;return r},x.gl=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["gl"]),function(){})},i.prototype.gl=function(){var e;return e=this._rgb,[e[0]/255,e[1]/255,e[2]/255,e[3]]},de=function(e,t,n){var r;return r=Ce(arguments),e=r[0],t=r[1],n=r[2],e=Y(e),t=Y(t),n=Y(n),.2126*e+.7152*t+.0722*n},Y=function(e){return e/=255,e<=.03928?e/12.92:re((e+.055)/1.055,2.4)},p=[],D=function(e,t,n,r){var i,a,o,s;for(null==n&&(n=.5),null==r&&(r="rgb"),"object"!==Ee(e)&&(e=x(e)),"object"!==Ee(t)&&(t=x(t)),o=0,a=p.length;o<a;o++)if(i=p[o],r===i[0]){s=i[1](e,t,n,r);break}if(null==s)throw"color mode "+r+" is not supported";return s.alpha(e.alpha()+n*(t.alpha()-e.alpha())),s},x.interpolate=D,i.prototype.interpolate=function(e,t,n){return D(this,e,t,n)},x.mix=D,i.prototype.mix=i.prototype.interpolate,q=function(e,t,n,r){var a,o;return a=e._rgb,o=t._rgb,new i(a[0]+n*(o[0]-a[0]),a[1]+n*(o[1]-a[1]),a[2]+n*(o[2]-a[2]),r)},p.push(["rgb",q]),i.prototype.luminance=function(e,t){var n,r,i,a;return null==t&&(t="rgb"),arguments.length?(0===e?this._rgb=[0,0,0,this._rgb[3]]:1===e?this._rgb=[255,255,255,this._rgb[3]]:(r=1e-7,i=20,a=function(n,o){var s,l;return l=n.interpolate(o,.5,t),s=l.luminance(),Math.abs(e-s)<r||!i--?l:s>e?a(n,l):a(l,o)},n=de(this._rgb),this._rgb=(n>e?a(x("black"),this):a(this,x("white"))).rgba()),this):de(this._rgb)},xe=function(e){var t,n,r,i;return i=e/100,i<66?(r=255,n=-155.25485562709179-.44596950469579133*(n=i-2)+104.49216199393888*Q(n),t=i<20?0:-254.76935184120902+.8274096064007395*(t=i-10)+115.67994401066147*Q(t)):(r=351.97690566805693+.114206453784165*(r=i-55)-40.25366309332127*Q(r),n=325.4494125711974+.07943456536662342*(n=i-50)-28.0852963507957*Q(n),t=255),E([r,n,t])},pe=function(){var e,t,n,r,i,a,o,s,l;for(o=Ce(arguments),a=o[0],n=o[1],e=o[2],i=1e3,r=4e4,t=.4;r-i>t;)l=.5*(r+i),s=xe(l),s[2]/s[0]>=e/a?r=l:i=l;return ye(l)},x.temperature=x.kelvin=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["temperature"]),function(){})},f.temperature=f.kelvin=f.K=xe,i.prototype.temperature=function(){return pe(this._rgb)},i.prototype.kelvin=i.prototype.temperature,x.contrast=function(e,t){var n,r,a,o;return"string"!==(a=Ee(e))&&"number"!==a||(e=new i(e)),"string"!==(o=Ee(t))&&"number"!==o||(t=new i(t)),n=e.luminance(),r=t.luminance(),n>r?(n+.05)/(r+.05):(r+.05)/(n+.05)},i.prototype.get=function(e){var t,n,r,i,a,o;return r=this,a=e.split("."),i=a[0],t=a[1],o=r[i](),t?(n=i.indexOf(t),n>-1?o[n]:console.warn("unknown channel "+t+" in mode "+i)):o},i.prototype.set=function(e,t){var n,r,i,a,o,s;if(i=this,o=e.split("."),a=o[0],n=o[1],n)if(s=i[a](),r=a.indexOf(n),r>-1)if("string"===Ee(t))switch(t.charAt(0)){case"+":s[r]+=+t;break;case"-":s[r]+=+t;break;case"*":s[r]*=+t.substr(1);break;case"/":s[r]/=+t.substr(1);break;default:s[r]=+t}else s[r]=t;else console.warn("unknown channel "+n+" in mode "+a);else s=t;return i._rgb=x(s,a).alpha(i.alpha())._rgb,i},i.prototype.darken=function(e){var t,n;return null==e&&(e=1),n=this,t=n.lab(),t[0]-=o.Kn*e,x.lab(t).alpha(n.alpha())},i.prototype.brighten=function(e){return null==e&&(e=1),this.darken(-e)},i.prototype.darker=i.prototype.darken,i.prototype.brighter=i.prototype.brighten,i.prototype.saturate=function(e){var t,n;return null==e&&(e=1),n=this,t=n.lch(),t[1]+=e*o.Kn,t[1]<0&&(t[1]=0),x.lch(t).alpha(n.alpha())},i.prototype.desaturate=function(e){return null==e&&(e=1),this.saturate(-e)},i.prototype.premultiply=function(){var e,t;return t=this.rgb(),e=this.alpha(),x(t[0]*e,t[1]*e,t[2]*e,e)},y=function(e,t,n){if(!y[n])throw"unknown blend mode "+n;return y[n](e,t)},w=function(e){return function(t,n){var r,i;return r=x(n).rgb(),i=x(t).rgb(),x(e(r,i),"rgb")}},M=function(e){return function(t,n){var r,i,a;for(a=[],r=i=0;i<=3;r=++i)a[r]=e(t[r],n[r]);return a}},ee=function(e,t){return e},J=function(e,t){return e*t/255},T=function(e,t){return e>t?t:e},X=function(e,t){return e>t?e:t},we=function(e,t){return 255*(1-(1-e/255)*(1-t/255))},ne=function(e,t){return t<128?2*e*t/255:255*(1-2*(1-e/255)*(1-t/255))},_=function(e,t){return 255*(1-(1-t/255)/(e/255))},N=function(e,t){return 255===e?255:(e=255*(t/255)/(1-e/255),e>255?255:e)},y.normal=w(M(ee)),y.multiply=w(M(J)),y.screen=w(M(we)),y.overlay=w(M(ne)),y.darken=w(M(T)),y.lighten=w(M(X)),y.dodge=w(M(N)),y.burn=w(M(_)),x.blend=y,x.analyze=function(e){var t,n,r,i;for(r={min:Number.MAX_VALUE,max:Number.MAX_VALUE*-1,sum:0,values:[],count:0},n=0,t=e.length;n<t;n++)i=e[n],null==i||isNaN(i)||(r.values.push(i),r.sum+=i,i<r.min&&(r.min=i),i>r.max&&(r.max=i),r.count+=1);return r.domain=[r.min,r.max],r.limits=function(e,t){return x.limits(r,e,t)},r},x.scale=function(e,t){var n,r,i,a,o,s,l,u,c,h,d,f,p,m,g,v,y,w,b,_,E;return c="rgb",h=x("#ccc"),m=0,s=!1,o=[0,1],p=[],f=[0,0],n=!1,i=[],d=!1,u=0,l=1,a=!1,r={},_=function(e){var t,n,r,a,o,s,l;if(null==e&&(e=["#fff","#000"]),null!=e&&"string"===Ee(e)&&null!=(null!=(a=x.brewer)?a[e]:void 0)&&(e=x.brewer[e]),"array"===Ee(e)){for(e=e.slice(0),t=r=0,o=e.length-1;0<=o?r<=o:r>=o;t=0<=o?++r:--r)n=e[t],"string"===Ee(n)&&(e[t]=x(n));for(p.length=0,t=l=0,s=e.length-1;0<=s?l<=s:l>=s;t=0<=s?++l:--l)p.push(t/(e.length-1))}return b(),i=e},y=function(e){var t,r;if(null!=n){for(r=n.length-1,t=0;t<r&&e>=n[t];)t++;return t-1}return 0},E=function(e){return e},g=function(e){var t,r,i,a,o;return o=e,n.length>2&&(a=n.length-1,t=y(e),i=n[0]+(n[1]-n[0])*(0+.5*m),r=n[a-1]+(n[a]-n[a-1])*(1-.5*m),o=u+(n[t]+.5*(n[t+1]-n[t])-i)/(r-i)*(l-u)),o},w=function(e,t){var a,o,s,d,m,g,v,w;if(null==t&&(t=!1),isNaN(e))return h;if(t?w=e:n&&n.length>2?(a=y(e),w=a/(n.length-2),w=f[0]+w*(1-f[0]-f[1])):l!==u?(w=(e-u)/(l-u),w=f[0]+w*(1-f[0]-f[1]),w=Math.min(1,Math.max(0,w))):w=1,t||(w=E(w)),d=Math.floor(1e4*w),r[d])o=r[d];else{if("array"===Ee(i))for(s=m=0,v=p.length-1;0<=v?m<=v:m>=v;s=0<=v?++m:--m){if(g=p[s],w<=g){o=i[s];break}if(w>=g&&s===p.length-1){o=i[s];break}if(w>g&&w<p[s+1]){w=(w-g)/(p[s+1]-g),o=x.interpolate(i[s],i[s+1],w,c);break}}else"function"===Ee(i)&&(o=i(w));r[d]=o}return o},b=function(){return r={}},_(e),v=function(e){var t;return t=x(w(e)),d&&t[d]?t[d]():t},v.classes=function(e){var t;return null!=e?("array"===Ee(e)?(n=e,o=[e[0],e[e.length-1]]):(t=x.analyze(o),n=0===e?[t.min,t.max]:x.limits(t,"e",e)),v):n},v.domain=function(e){var t,n,r,a,s,c,h;if(!arguments.length)return o;if(u=e[0],l=e[e.length-1],p=[],r=i.length,e.length===r&&u!==l)for(s=0,a=e.length;s<a;s++)n=e[s],p.push((n-u)/(l-u));else for(t=h=0,c=r-1;0<=c?h<=c:h>=c;t=0<=c?++h:--h)p.push(t/(r-1));return o=[u,l],v},v.mode=function(e){return arguments.length?(c=e,b(),v):c},v.range=function(e,t){return _(e,t),v},v.out=function(e){return d=e,v},v.spread=function(e){return arguments.length?(m=e,v):m},v.correctLightness=function(e){return null==e&&(e=!0),a=e,b(),E=a?function(e){var t,n,r,i,a,o,s,l,u;for(t=w(0,!0).lab()[0],n=w(1,!0).lab()[0],s=t>n,r=w(e,!0).lab()[0],a=t+(n-t)*e,i=r-a,l=0,u=1,o=20;Math.abs(i)>.01&&o-- >0;)!function(){return s&&(i*=-1),i<0?(l=e,e+=.5*(u-e)):(u=e,e+=.5*(l-e)),r=w(e,!0).lab()[0],i=r-a}();return e}:function(e){return e},v},v.padding=function(e){return null!=e?("number"===Ee(e)&&(e=[e,e]),f=e,v):f},v.colors=function(){var t,r,i,a,s,l,u,c,h;if(a=0,s="hex",1===arguments.length&&("string"===Ee(arguments[0])?s=arguments[0]:a=arguments[0]),2===arguments.length&&(a=arguments[0],s=arguments[1]),a)return r=o[0],t=o[1]-r,function(){u=[];for(var e=0;0<=a?e<a:e>a;0<=a?e++:e--)u.push(e);return u}.apply(this).map(function(e){return v(r+e/(a-1)*t)[s]()});if(e=[],c=[],n&&n.length>2)for(i=h=1,l=n.length;1<=l?h<l:h>l;i=1<=l?++h:--h)c.push(.5*(n[i-1]+n[i]));else c=o;return c.map(function(e){return v(e)[s]()})},v},null==x.scales&&(x.scales={}),x.scales.cool=function(){return x.scale([x.hsl(180,1,.9),x.hsl(250,.7,.4)])},x.scales.hot=function(){return x.scale(["#000","#f00","#ff0","#fff"],[0,.25,.75,1]).mode("rgb")},x.analyze=function(e,t,n){var r,i,a,o,s,l,u;if(s={min:Number.MAX_VALUE,max:Number.MAX_VALUE*-1,sum:0,values:[],count:0},null==n&&(n=function(){return!0}),r=function(e){null==e||isNaN(e)||(s.values.push(e),s.sum+=e,e<s.min&&(s.min=e),e>s.max&&(s.max=e),s.count+=1)},u=function(e,i){if(n(e,i))return r(null!=t&&"function"===Ee(t)?t(e):null!=t&&"string"===Ee(t)||"number"===Ee(t)?e[t]:e)},"array"===Ee(e))for(o=0,a=e.length;o<a;o++)l=e[o],u(l);else for(i in e)l=e[i],u(l,i);return s.domain=[s.min,s.max],s.limits=function(e,t){return x.limits(s,e,t)},s},x.limits=function(e,t,n){var r,i,a,o,s,l,u,c,h,d,f,p,g,v,y,w,b,_,E,C,k,S,P,T,N,M,I,A,O,B,z,D,R,j,F,q,V,U,W,G,H,X,K,Y,Z,J,ee,te,ne,ie,ae,oe,se,le,ue;if(null==t&&(t="equal"),null==n&&(n=7),"array"===Ee(e)&&(e=x.analyze(e)),N=e.min,$=e.max,ae=e.sum,le=e.values.sort(function(e,t){return e-t}),P=[],"c"===t.substr(0,1)&&(P.push(N),P.push($)),"e"===t.substr(0,1)){for(P.push(N),C=z=1,F=n-1;1<=F?z<=F:z>=F;C=1<=F?++z:--z)P.push(N+C/n*($-N));P.push($)}else if("l"===t.substr(0,1)){if(N<=0)throw"Logarithmic scales are only possible for values > 0";for(M=Math.LOG10E*Q(N),T=Math.LOG10E*Q($),P.push(N),C=ue=1,q=n-1;1<=q?ue<=q:ue>=q;C=1<=q?++ue:--ue)P.push(re(10,M+C/n*(T-M)));P.push($)}else if("q"===t.substr(0,1)){for(P.push(N),C=r=1,X=n-1;1<=X?r<=X:r>=X;C=1<=X?++r:--r)D=le.length*C/n,R=L(D),R===D?P.push(le[R]):(j=D-R,P.push(le[R]*j+le[R+1]*(1-j)));P.push($)}else if("k"===t.substr(0,1)){for(A=le.length,v=new Array(A),_=new Array(n),ie=!0,O=0,w=null,w=[],w.push(N),C=i=1,K=n-1;1<=K?i<=K:i>=K;C=1<=K?++i:--i)w.push(N+C/n*($-N));for(w.push($);ie;){for(k=a=0,Y=n-1;0<=Y?a<=Y:a>=Y;k=0<=Y?++a:--a)_[k]=0;for(C=o=0,Z=A-1;0<=Z?o<=Z:o>=Z;C=0<=Z?++o:--o){for(se=le[C],I=Number.MAX_VALUE,k=s=0,J=n-1;0<=J?s<=J:s>=J;k=0<=J?++s:--s)E=m(w[k]-se),E<I&&(I=E,y=k);_[y]++,v[C]=y}for(B=new Array(n),k=l=0,ee=n-1;0<=ee?l<=ee:l>=ee;k=0<=ee?++l:--l)B[k]=null;for(C=u=0,te=A-1;0<=te?u<=te:u>=te;C=0<=te?++u:--u)b=v[C],null===B[b]?B[b]=le[C]:B[b]+=le[C];for(k=c=0,ne=n-1;0<=ne?c<=ne:c>=ne;k=0<=ne?++c:--c)B[k]*=1/_[k];for(ie=!1,k=h=0,V=n-1;0<=V?h<=V:h>=V;k=0<=V?++h:--h)if(B[k]!==w[C]){ie=!0;break}w=B,O++,O>200&&(ie=!1)}for(S={},k=d=0,U=n-1;0<=U?d<=U:d>=U;k=0<=U?++d:--d)S[k]=[];for(C=f=0,W=A-1;0<=W?f<=W:f>=W;C=0<=W?++f:--f)b=v[C],S[b].push(le[C]);for(oe=[],k=p=0,G=n-1;0<=G?p<=G:p>=G;k=0<=G?++p:--p)oe.push(S[k][0]),oe.push(S[k][S[k].length-1]);for(oe=oe.sort(function(e,t){return e-t}),P.push(oe[0]),C=g=1,H=oe.length-1;g<=H;C=g+=2)isNaN(oe[C])||P.push(oe[C])}return P},A=function(e,t,n){var r,i,a,o;return r=Ce(arguments),e=r[0],t=r[1],n=r[2],e/=360,e<1/3?(i=(1-t)/3,o=(1+t*S(c*e)/S(l-c*e))/3,a=1-(i+o)):e<2/3?(e-=1/3,o=(1-t)/3,a=(1+t*S(c*e)/S(l-c*e))/3,i=1-(o+a)):(e-=2/3,a=(1-t)/3,i=(1+t*S(c*e)/S(l-c*e))/3,o=1-(a+i)),o=K(n*o*3),a=K(n*a*3),i=K(n*i*3),[255*o,255*a,255*i,r.length>3?r[3]:1]},se=function(){var e,t,n,r,i,a,o,s;return o=Ce(arguments),a=o[0],t=o[1],e=o[2],c=2*Math.PI,a/=255,t/=255,e/=255,i=Math.min(a,t,e),r=(a+t+e)/3,s=1-i/r,0===s?n=0:(n=(a-t+(a-e))/2,n/=Math.sqrt((a-t)*(a-t)+(a-e)*(t-e)),n=Math.acos(n),e>t&&(n=c-n),n/=c),[360*n,s,r]},x.hsi=function(){return function(e,t,n){n.prototype=e.prototype;var r=new n,i=e.apply(r,t);return Object(i)===i?i:r}(i,Te.call(arguments).concat(["hsi"]),function(){})},f.hsi=A,i.prototype.hsi=function(){return se(this._rgb)},R=function(e,t,n,r){var i,a,o,s,l,u,c,h,d,f,p,m,g;return"hsl"===r?(m=e.hsl(),g=t.hsl()):"hsv"===r?(m=e.hsv(),g=t.hsv()):"hsi"===r?(m=e.hsi(),g=t.hsi()):"lch"!==r&&"hcl"!==r||(r="hcl",m=e.hcl(),g=t.hcl()),"h"===r.substr(0,1)&&(o=m[0],f=m[1],u=m[2],s=g[0],p=g[1],c=g[2]),isNaN(o)||isNaN(s)?isNaN(o)?isNaN(s)?a=Number.NaN:(a=s,1!==u&&0!==u||"hsv"===r||(d=p)):(a=o,1!==c&&0!==c||"hsv"===r||(d=f)):(i=s>o&&s-o>180?s-(o+360):s<o&&o-s>180?s+360-o:s-o,a=o+n*i),null==d&&(d=f+n*(p-f)),l=u+n*(c-u),h=x[r](a,d,l)},p=p.concat(function(){var e,t,n,r;for(n=["hsv","hsl","hsi","hcl","lch"],r=[],t=0,e=n.length;t<e;t++)Z=n[t],r.push([Z,R]);return r}()),F=function(e,t,n,r){var i,a;return i=e.num(),a=t.num(),x.num(i+(a-i)*n,"num")},p.push(["num",F]),j=function(e,t,n,r){var a,o,s;return o=e.lab(),s=t.lab(),a=new i(o[0]+n*(s[0]-o[0]),o[1]+n*(s[1]-o[1]),o[2]+n*(s[2]-o[2]),r)},p.push(["lab",j])}).call(this)}).call(t,n(286)(e))},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(e){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(172),l=n(171),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){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){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,n){"use strict";function r(e){return e.replace(i,function(e,t){return t.toUpperCase()})}var i=/-(.)/g;e.exports=r},function(e,t,n){"use strict";function r(e){return i(e.replace(a,"ms-"))}var i=n(173),a=/^-ms-/;e.exports=r},function(e,t,n){
+"use strict";function r(e,t){return!(!e||!t)&&(e===t||!i(e)&&(i(t)?r(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}var i=n(183);e.exports=r},function(e,t,n){"use strict";function r(e){var t=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?o(!1):void 0,"number"!=typeof t?o(!1):void 0,0===t||t-1 in e?void 0:o(!1),"function"==typeof e.callee?o(!1):void 0,e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(e){}for(var n=Array(t),r=0;r<t;r++)n[r]=e[r];return n}function i(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 a(e){return i(e)?Array.isArray(e)?e.slice():r(e):[e]}var o=n(1);e.exports=a},function(e,t,n){"use strict";function r(e){var t=e.match(c);return t&&t[1].toLowerCase()}function i(e,t){var n=u;u?void 0:l(!1);var i=r(e),a=i&&s(i);if(a){n.innerHTML=a[1]+e+a[2];for(var c=a[0];c--;)n=n.lastChild}else n.innerHTML=e;var h=n.getElementsByTagName("script");h.length&&(t?void 0:l(!1),o(h).forEach(t));for(var d=Array.from(n.childNodes);n.lastChild;)n.removeChild(n.lastChild);return d}var a=n(9),o=n(176),s=n(178),l=n(1),u=a.canUseDOM?document.createElement("div"):null,c=/^\s*<(\w+)/;e.exports=i},function(e,t,n){"use strict";function r(e){return o?void 0: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(9),a=n(1),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},f=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];f.forEach(function(e){d[e]=h,s[e]=!0}),e.exports=r},function(e,t,n){"use strict";function r(e){return e===window?{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}:{x:e.scrollLeft,y:e.scrollTop}}e.exports=r},function(e,t,n){"use strict";function r(e){return e.replace(i,"-$1").toLowerCase()}var i=/([A-Z])/g;e.exports=r},function(e,t,n){"use strict";function r(e){return i(e).replace(a,"-ms-")}var i=n(180),a=/^ms-/;e.exports=r},function(e,t,n){"use strict";function r(e){return!(!e||!("function"==typeof Node?e instanceof Node:"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName))}e.exports=r},function(e,t,n){"use strict";function r(e){return i(e)&&3==e.nodeType}var i=n(182);e.exports=r},function(e,t,n){"use strict";function r(e){var t={};return function(n){return t.hasOwnProperty(n)||(t[n]=e.call(this,n)),t[n]}}e.exports=r},function(e,t,n){"use strict";function r(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=r},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){return l+e}function a(e,t){try{window.sessionStorage.setItem(i(e),JSON.stringify(t))}catch(e){if(e.name===c)return;if(e.name===u&&0===window.sessionStorage.length)return;throw e}}function o(e){var t=void 0;try{t=window.sessionStorage.getItem(i(e))}catch(e){if(e.name===c)return null}if(t)try{return JSON.parse(t)}catch(e){}return null}t.__esModule=!0,t.saveState=a,t.readState=o;var s=n(10),l=(r(s),"@@History/"),u="QuotaExceededError",c="SecurityError"},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){function t(e){return l.canUseDOM?void 0:s.default(!1),n.listen(e)}var n=h.default(a({getUserConfirmation:u.getUserConfirmation},e,{go:u.go}));return a({},n,{listen:t})}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(12),s=r(o),l=n(42),u=n(70),c=n(71),h=r(c);t.default=i,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){return"string"==typeof e&&"/"===e.charAt(0)}function a(){var e=g.getHashPath();return!!i(e)||(g.replaceHashPath("/"+e),!1)}function o(e,t,n){return e+(e.indexOf("?")===-1?"?":"&")+(t+"="+n)}function s(e,t){return e.replace(new RegExp("[?&]?"+t+"=[a-zA-Z0-9]+"),"")}function l(e,t){var n=e.match(new RegExp("\\?.*?\\b"+t+"=(.+?)\\b"));return n&&n[1]}function u(){function e(){var e=g.getHashPath(),t=void 0,n=void 0;P?(t=l(e,P),e=s(e,P),t?n=v.readState(t):(n=null,t=T.createKey(),g.replaceHashPath(o(e,P,t)))):t=n=null;var r=_.default(e);return T.createLocation(c({},r,{state:n}),void 0,t)}function t(t){function n(){a()&&r(e())}var r=t.transitionTo;return a(),g.addEventListener(window,"hashchange",n),function(){g.removeEventListener(window,"hashchange",n)}}function n(e){var t=e.basename,n=e.pathname,r=e.search,i=e.state,a=e.action,s=e.key;if(a!==p.POP){var l=(t||"")+n+r;P?(l=o(l,P,s),v.saveState(s,i)):e.key=e.state=null;var u=g.getHashPath();a===p.PUSH?u!==l&&(window.location.hash=l):u!==l&&g.replaceHashPath(l)}}function r(e){1===++N&&(M=t(T));var n=T.listenBefore(e);return function(){n(),0===--N&&M()}}function i(e){1===++N&&(M=t(T));var n=T.listen(e);return function(){n(),0===--N&&M()}}function u(e){T.push(e)}function h(e){T.replace(e)}function d(e){T.go(e)}function y(e){return"#"+T.createHref(e)}function b(e){1===++N&&(M=t(T)),T.registerTransitionHook(e)}function E(e){T.unregisterTransitionHook(e),0===--N&&M()}function C(e,t){T.pushState(e,t)}function k(e,t){T.replaceState(e,t)}var S=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];m.canUseDOM?void 0:f.default(!1);var P=S.queryKey;(void 0===P||P)&&(P="string"==typeof P?P:x);var T=w.default(c({},S,{getCurrentLocation:e,finishTransition:n,saveState:v.saveState})),N=0,M=void 0;g.supportsGoWithoutReloadUsingHash();return c({},T,{listenBefore:r,listen:i,push:u,replace:h,go:d,createHref:y,registerTransitionHook:b,unregisterTransitionHook:E,pushState:C,replaceState:k})}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(10),d=(r(h),n(12)),f=r(d),p=n(29),m=n(42),g=n(70),v=n(186),y=n(187),w=r(y),b=n(21),_=r(b),x="_k";t.default=u,e.exports=t.default},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(29),s=n(21),l=r(s);t.default=i,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){return e.filter(function(e){return e.state}).reduce(function(e,t){return e[t.key]=t.state,e},{})}function a(){function e(e,t){v[e]=t}function t(e){return v[e]}function n(){var e=m[g],n=e.key,r=e.basename,i=e.pathname,a=e.search,s=(r||"")+i+(a||""),l=void 0;n?l=t(n):(l=null,n=h.createKey(),e.key=n);var u=p.default(s);return h.createLocation(o({},u,{state:l}),void 0,n)}function r(e){var t=g+e;return t>=0&&t<m.length}function a(e){if(e){if(!r(e))return;g+=e;var t=n();h.transitionTo(o({},t,{action:c.POP}))}}function s(t){switch(t.action){case c.PUSH:g+=1,g<m.length&&m.splice(g),m.push(t),e(t.key,t.state);break;case c.REPLACE:m[g]=t,e(t.key,t.state)}}var l=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];Array.isArray(l)?l={entries:l}:"string"==typeof l&&(l={entries:[l]});var h=d.default(o({},l,{getCurrentLocation:n,finishTransition:s,saveState:e,go:a})),f=l,m=f.entries,g=f.current;"string"==typeof m?m=[m]:Array.isArray(m)||(m=["/"]),m=m.map(function(e){var t=h.createKey();return"string"==typeof e?{pathname:e,key:t}:"object"==typeof e&&e?o({},e,{key:t}):void u.default(!1)}),null==g?g=m.length-1:g>=0&&g<m.length?void 0:u.default(!1);var v=i(m);return h}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(10),l=(r(s),n(12)),u=r(l),c=n(29),h=n(71),d=r(h),f=n(21),p=r(f);t.default=a,e.exports=t.default},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=f.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 p(e){return x.createHref(n(e))}function g(){return t(x.createLocation.apply(x,arguments))}function v(e,t){"string"==typeof t&&(t=f.default(t)),l(o({state:e},t))}function y(e,t){"string"==typeof t&&(t=f.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:p,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(42),l=n(44),u=r(l),c=n(72),h=r(c),d=n(21),f=r(d),p=n(43),m=r(p);t.default=a,e.exports=t.default},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 u.stringify(e).replace(/%20/g,"+")}function o(e){return function(){function t(e){if(null==e.query){var t=e.search;e.query=x(t.substring(1)),e[g]={search:t,searchBase:""}}return e}function n(e,t){var n,r=void 0;if(!t||""===(r=_(t)))return e;"string"==typeof e&&(e=f.default(e));var i=e[g],a=void 0;a=i&&e.search===i.search?i.searchBase:e.search||"";var o=a+(a?"&":"?")+r;return s({},e,(n={search:o},n[g]={search:o,searchBase:a},n))}function r(e){return C.listenBefore(function(n,r){h.default(e,t(n),r)})}function o(e){return C.listen(function(n){e(t(n))})}function l(e){C.push(n(e,e.query))}function u(e){C.replace(n(e,e.query))}function c(e,t){return C.createPath(n(e,t||e.query))}function d(e,t){return C.createHref(n(e,t||e.query))}function p(){return t(C.createLocation.apply(C,arguments))}function y(e,t,n){"string"==typeof t&&(t=f.default(t)),l(s({state:e},t,{query:n}))}function w(e,t,n){"string"==typeof t&&(t=f.default(t)),u(s({state:e},t,{query:n}))}var b=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],_=b.stringifyQuery,x=b.parseQueryString,E=i(b,["stringifyQuery","parseQueryString"]),C=e(E);return"function"!=typeof _&&(_=a),"function"!=typeof x&&(x=v),s({},C,{listenBefore:r,listen:o,push:l,replace:u,createPath:c,createHref:d,createLocation:p,pushState:m.default(y,"pushState is deprecated; use push instead"),replaceState:m.default(w,"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(10),u=(r(l),n(193)),c=n(44),h=r(c),d=n(21),f=r(d),p=n(43),m=r(p),g="$searchBase",v=u.parse;t.default=o,e.exports=t.default},function(e,t,n){"use strict";var r=n(285);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,n){"use strict";e.exports=n(208)},function(e,t,n){"use strict";var r={Properties:{"aria-current":0,"aria-details":0,"aria-disabled":0,"aria-hidden":0,"aria-invalid":0,"aria-keyshortcuts":0,"aria-label":0,"aria-roledescription":0,"aria-autocomplete":0,"aria-checked":0,"aria-expanded":0,"aria-haspopup":0,"aria-level":0,"aria-modal":0,"aria-multiline":0,"aria-multiselectable":0,"aria-orientation":0,"aria-placeholder":0,"aria-pressed":0,"aria-readonly":0,"aria-required":0,"aria-selected":0,"aria-sort":0,"aria-valuemax":0,"aria-valuemin":0,"aria-valuenow":0,"aria-valuetext":0,"aria-atomic":0,"aria-busy":0,"aria-live":0,"aria-relevant":0,"aria-dropeffect":0,"aria-grabbed":0,"aria-activedescendant":0,"aria-colcount":0,"aria-colindex":0,"aria-colspan":0,"aria-controls":0,"aria-describedby":0,"aria-errormessage":0,"aria-flowto":0,"aria-labelledby":0,"aria-owns":0,"aria-posinset":0,"aria-rowcount":0,"aria-rowindex":0,"aria-rowspan":0,"aria-setsize":0},DOMAttributeNames:{},DOMPropertyNames:{}};e.exports=r},function(e,t,n){"use strict";var r=n(7),i=n(68),a={focusDOMComponent:function(){i(r.getNodeFromInstance(this))}};e.exports=a},function(e,t,n){"use strict";function r(){var e=window.opera;return"object"==typeof e&&"function"==typeof e.version&&parseInt(e.version(),10)<=12}function i(e){return(e.ctrlKey||e.altKey||e.metaKey)&&!(e.ctrlKey&&e.altKey)}function a(e){switch(e){case"topCompositionStart":return S.compositionStart;case"topCompositionEnd":return S.compositionEnd;case"topCompositionUpdate":return S.compositionUpdate}}function o(e,t){return"topKeyDown"===e&&t.keyCode===w}function s(e,t){switch(e){case"topKeyUp":return y.indexOf(t.keyCode)!==-1;case"topKeyDown":return t.keyCode!==w;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function l(e){var t=e.detail;return"object"==typeof t&&"data"in t?t.data:null}function u(e,t,n,r){var i,u;if(b?i=a(e):T?s(e,n)&&(i=S.compositionEnd):o(e,n)&&(i=S.compositionStart),!i)return null;E&&(T||i!==S.compositionStart?i===S.compositionEnd&&T&&(u=T.getData()):T=m.getPooled(r));var c=g.getPooled(i,t,n,r);if(u)c.data=u;else{var h=l(n);null!==h&&(c.data=h)}return f.accumulateTwoPhaseDispatches(c),c}function c(e,t){switch(e){case"topCompositionEnd":return l(t);case"topKeyPress":var n=t.which;return n!==C?null:(P=!0,k);case"topTextInput":var r=t.data;return r===k&&P?null:r;default:return null}}function h(e,t){if(T){if("topCompositionEnd"===e||!b&&s(e,t)){var n=T.getData();return m.release(T),T=null,n}return null}switch(e){case"topPaste":return null;case"topKeyPress":return t.which&&!i(t)?String.fromCharCode(t.which):null;case"topCompositionEnd":return E?null:t.data;default:return null}}function d(e,t,n,r){var i;if(i=x?c(e,n):h(e,n),!i)return null;var a=v.getPooled(S.beforeInput,t,n,r);return a.data=i,f.accumulateTwoPhaseDispatches(a),a}var f=n(31),p=n(9),m=n(203),g=n(240),v=n(243),y=[9,13,27,32],w=229,b=p.canUseDOM&&"CompositionEvent"in window,_=null;p.canUseDOM&&"documentMode"in document&&(_=document.documentMode);var x=p.canUseDOM&&"TextEvent"in window&&!_&&!r(),E=p.canUseDOM&&(!b||_&&_>8&&_<=11),C=32,k=String.fromCharCode(C),S={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:["topBlur","topCompositionEnd","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:["topBlur","topCompositionStart","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:["topBlur","topCompositionUpdate","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]}},P=!1,T=null,N={eventTypes:S,extractEvents:function(e,t,n,r){return[u(e,t,n,r),d(e,t,n,r)]}};e.exports=N},function(e,t,n){"use strict";var r=n(74),i=n(9),a=(n(13),n(174),n(249)),o=n(181),s=n(184),l=(n(2),s(function(e){return o(e)})),u=!1,c="cssFloat";if(i.canUseDOM){var h=document.createElement("div").style;try{h.font=""}catch(e){u=!0}void 0===document.documentElement.style.cssFloat&&(c="styleFloat")}var d={createMarkupForStyles:function(e,t){var n="";for(var r in e)if(e.hasOwnProperty(r)){var i=e[r];null!=i&&(n+=l(r)+":",n+=a(r,i,t)+";")}return n||null},setValueForStyles:function(e,t,n){var i=e.style;for(var o in t)if(t.hasOwnProperty(o)){var s=a(o,t[o],n);if("float"!==o&&"cssFloat"!==o||(o=c),s)i[o]=s;else{var l=u&&r.shorthandPropertyExpansions[o];if(l)for(var h in l)i[h]="";else i[o]=""}}}};e.exports=d},function(e,t,n){"use strict";function r(e){var t=e.nodeName&&e.nodeName.toLowerCase();return"select"===t||"input"===t&&"file"===e.type}function i(e){var t=E.getPooled(P.change,N,e,C(e));w.accumulateTwoPhaseDispatches(t),x.batchedUpdates(a,t)}function a(e){y.enqueueEvents(e),y.processEventQueue(!1)}function o(e,t){T=e,N=t,T.attachEvent("onchange",i)}function s(){T&&(T.detachEvent("onchange",i),T=null,N=null)}function l(e,t){if("topChange"===e)return t}function u(e,t,n){"topFocus"===e?(s(),o(t,n)):"topBlur"===e&&s()}function c(e,t){T=e,N=t,M=e.value,L=Object.getOwnPropertyDescriptor(e.constructor.prototype,"value"),Object.defineProperty(T,"value",O),T.attachEvent?T.attachEvent("onpropertychange",d):T.addEventListener("propertychange",d,!1)}function h(){T&&(delete T.value,T.detachEvent?T.detachEvent("onpropertychange",d):T.removeEventListener("propertychange",d,!1),T=null,N=null,M=null,L=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==M&&(M=t,i(e))}}function f(e,t){if("topInput"===e)return t}function p(e,t,n){"topFocus"===e?(h(),c(t,n)):"topBlur"===e&&h()}function m(e,t){if(("topSelectionChange"===e||"topKeyUp"===e||"topKeyDown"===e)&&T&&T.value!==M)return M=T.value,N}function g(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function v(e,t){if("topClick"===e)return t}var y=n(30),w=n(31),b=n(9),_=n(7),x=n(14),E=n(16),C=n(57),k=n(58),S=n(91),P={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:["topBlur","topChange","topClick","topFocus","topInput","topKeyDown","topKeyUp","topSelectionChange"]}},T=null,N=null,M=null,L=null,I=!1;b.canUseDOM&&(I=k("change")&&(!document.documentMode||document.documentMode>8));var A=!1;b.canUseDOM&&(A=k("input")&&(!document.documentMode||document.documentMode>11));var O={get:function(){return L.get.call(this)},set:function(e){M=""+e,L.set.call(this,e)}},B={eventTypes:P,extractEvents:function(e,t,n,i){var a,o,s=t?_.getNodeFromInstance(t):window;if(r(s)?I?a=l:o=u:S(s)?A?a=f:(a=m,o=p):g(s)&&(a=v),a){var c=a(e,t);if(c){var h=E.getPooled(P.change,c,n,i);return h.type="change",w.accumulateTwoPhaseDispatches(h),h}}o&&o(e,s,t)}};e.exports=B},function(e,t,n){"use strict";var r=n(3),i=n(22),a=n(9),o=n(177),s=n(11),l=(n(1),{dangerouslyReplaceNodeWithMarkup:function(e,t){if(a.canUseDOM?void 0:r("56"),t?void 0:r("57"),"HTML"===e.nodeName?r("58"):void 0,"string"==typeof t){var n=o(t,s)[0];e.parentNode.replaceChild(n,e)}else i.replaceChildWithTree(e,t)}});e.exports=l},function(e,t,n){"use strict";var r=["ResponderEventPlugin","SimpleEventPlugin","TapEventPlugin","EnterLeaveEventPlugin","ChangeEventPlugin","SelectEventPlugin","BeforeInputEventPlugin"];e.exports=r},function(e,t,n){"use strict";var r=n(31),i=n(7),a=n(36),o={mouseEnter:{registrationName:"onMouseEnter",dependencies:["topMouseOut","topMouseOver"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["topMouseOut","topMouseOver"]}},s={eventTypes:o,extractEvents:function(e,t,n,s){if("topMouseOver"===e&&(n.relatedTarget||n.fromElement))return null;if("topMouseOut"!==e&&"topMouseOver"!==e)return null;var l;if(s.window===s)l=s;else{var u=s.ownerDocument;l=u?u.defaultView||u.parentWindow:window}var c,h;if("topMouseOut"===e){c=t;var d=n.relatedTarget||n.toElement;h=d?i.getClosestInstanceFromNode(d):null}else c=null,h=t;if(c===h)return null;var f=null==c?l:i.getNodeFromInstance(c),p=null==h?l:i.getNodeFromInstance(h),m=a.getPooled(o.mouseLeave,c,n,s);m.type="mouseleave",m.target=f,m.relatedTarget=p;var g=a.getPooled(o.mouseEnter,h,n,s);return g.type="mouseenter",g.target=p,g.relatedTarget=f,r.accumulateEnterLeaveDispatches(m,g,c,h),[m,g]}};e.exports=s},function(e,t,n){"use strict";function r(e){this._root=e,this._startText=this.getText(),this._fallbackText=null}var i=n(5),a=n(19),o=n(89);i(r.prototype,{destructor:function(){this._root=null,this._startText=null,this._fallbackText=null},getText:function(){return"value"in this._root?this._root.value:this._root[o()]},getData:function(){if(this._fallbackText)return this._fallbackText;var e,t,n=this._startText,r=n.length,i=this.getText(),a=i.length;for(e=0;e<r&&n[e]===i[e];e++);var o=r-e;for(t=1;t<=o&&n[r-t]===i[a-t];t++);var s=t>1?1-t:void 0;return this._fallbackText=i.slice(e,s),this._fallbackText}}),a.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";var r=n(23),i=r.injection.MUST_USE_PROPERTY,a=r.injection.HAS_BOOLEAN_VALUE,o=r.injection.HAS_NUMERIC_VALUE,s=r.injection.HAS_POSITIVE_NUMERIC_VALUE,l=r.injection.HAS_OVERLOADED_BOOLEAN_VALUE,u={isCustomAttribute:RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+r.ATTRIBUTE_NAME_CHAR+"]*$")),Properties:{accept:0,acceptCharset:0,accessKey:0,action:0,allowFullScreen:a,allowTransparency:0,alt:0,as:0,async:a,autoComplete:0,autoPlay:a,capture:a,cellPadding:0,cellSpacing:0,charSet:0,challenge:0,checked:i|a,cite:0,classID:0,className:0,cols:s,colSpan:0,content:0,contentEditable:0,contextMenu:0,controls:a,coords:0,crossOrigin:0,data:0,dateTime:0,default:a,defer:a,dir:0,disabled:a,download:l,draggable:0,encType:0,form:0,formAction:0,formEncType:0,formMethod:0,formNoValidate:a,formTarget:0,frameBorder:0,headers:0,height:0,hidden:a,high:0,href:0,hrefLang:0,htmlFor:0,httpEquiv:0,icon:0,id:0,inputMode:0,integrity:0,is:0,keyParams:0,keyType:0,kind:0,label:0,lang:0,list:0,loop:a,low:0,manifest:0,marginHeight:0,marginWidth:0,max:0,maxLength:0,media:0,mediaGroup:0,method:0,min:0,minLength:0,multiple:i|a,muted:i|a,name:0,nonce:0,noValidate:a,open:a,optimum:0,pattern:0,placeholder:0,playsInline:a,poster:0,preload:0,profile:0,radioGroup:0,readOnly:a,referrerPolicy:0,rel:0,required:a,reversed:a,role:0,rows:s,rowSpan:o,sandbox:0,scope:0,scoped:a,scrolling:0,seamless:a,selected:i|a,shape:0,size:s,sizes:0,span:s,spellCheck:0,src:0,srcDoc:0,srcLang:0,srcSet:0,start:o,step:0,style:0,summary:0,tabIndex:0,target:0,title:0,type:0,useMap:0,value:0,width:0,wmode:0,wrap:0,about:0,datatype:0,inlist:0,prefix:0,property:0,resource:0,typeof:0,vocab:0,autoCapitalize:0,autoCorrect:0,autoSave:0,color:0,itemProp:0,itemScope:a,itemType:0,itemID:0,itemRef:0,results:0,security:0,unselectable:0},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{}};e.exports=u},function(e,t,n){"use strict";(function(t){function r(e,t,n,r){var i=void 0===e[n];null!=t&&i&&(e[n]=a(t,!0))}var i=n(24),a=n(90),o=(n(49),n(59)),s=n(93);n(2);"undefined"!=typeof t&&t.env,1;var l={instantiateChildren:function(e,t,n,i){if(null==e)return null;var a={};return s(e,r,a),a},updateChildren:function(e,t,n,r,s,l,u,c,h){if(t||e){var d,f;for(d in t)if(t.hasOwnProperty(d)){f=e&&e[d];var p=f&&f._currentElement,m=t[d];if(null!=f&&o(p,m))i.receiveComponent(f,m,s,c),t[d]=f;else{f&&(r[d]=i.getHostNode(f),i.unmountComponent(f,!1));var g=a(m,!0);t[d]=g;var v=i.mountComponent(g,s,l,u,c,h);n.push(v)}}for(d in e)!e.hasOwnProperty(d)||t&&t.hasOwnProperty(d)||(f=e[d],r[d]=i.getHostNode(f),i.unmountComponent(f,!1))}},unmountChildren:function(e,t){for(var n in e)if(e.hasOwnProperty(n)){var r=e[n];i.unmountComponent(r,t)}}};e.exports=l}).call(t,n(73))},function(e,t,n){"use strict";var r=n(45),i=n(213),a={processChildrenUpdates:i.dangerouslyProcessChildrenUpdates,replaceNodeWithMarkup:r.dangerouslyReplaceNodeWithMarkup};e.exports=a},function(e,t,n){"use strict";function r(e){}function i(e,t){}function a(e){return!(!e.prototype||!e.prototype.isReactComponent)}function o(e){return!(!e.prototype||!e.prototype.isPureReactComponent)}var s=n(3),l=n(5),u=n(25),c=n(51),h=n(17),d=n(52),f=n(32),p=(n(13),n(84)),m=n(24),g=n(28),v=(n(1),n(41)),y=n(59),w=(n(2),{ImpureClass:0,PureClass:1,StatelessFunctional:2});r.prototype.render=function(){var e=f.get(this)._currentElement.type,t=e(this.props,this.context,this.updater);return i(e,t),t};var b=1,_={construct:function(e){this._currentElement=e,this._rootNodeID=0,this._compositeType=null,this._instance=null,this._hostParent=null,this._hostContainerInfo=null,this._updateBatchNumber=null,this._pendingElement=null,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._renderedNodeType=null,this._renderedComponent=null,this._context=null,this._mountOrder=0,this._topLevelWrapper=null,this._pendingCallbacks=null,this._calledComponentWillUnmount=!1},mountComponent:function(e,t,n,l){this._context=l,this._mountOrder=b++,this._hostParent=t,this._hostContainerInfo=n;var c,h=this._currentElement.props,d=this._processContext(l),p=this._currentElement.type,m=e.getUpdateQueue(),v=a(p),y=this._constructComponent(v,h,d,m);v||null!=y&&null!=y.render?o(p)?this._compositeType=w.PureClass:this._compositeType=w.ImpureClass:(c=y,i(p,c),null===y||y===!1||u.isValidElement(y)?void 0:s("105",p.displayName||p.name||"Component"),y=new r(p),this._compositeType=w.StatelessFunctional);y.props=h,y.context=d,y.refs=g,y.updater=m,this._instance=y,f.set(y,this);var _=y.state;void 0===_&&(y.state=_=null),"object"!=typeof _||Array.isArray(_)?s("106",this.getName()||"ReactCompositeComponent"):void 0,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1;var x;return x=y.unstable_handleError?this.performInitialMountWithErrorHandling(c,t,n,e,l):this.performInitialMount(c,t,n,e,l),y.componentDidMount&&e.getReactMountReady().enqueue(y.componentDidMount,y),x},_constructComponent:function(e,t,n,r){return this._constructComponentWithoutOwner(e,t,n,r)},_constructComponentWithoutOwner:function(e,t,n,r){var i=this._currentElement.type;return e?new i(t,n,r):i(t,n,r)},performInitialMountWithErrorHandling:function(e,t,n,r,i){var a,o=r.checkpoint();try{a=this.performInitialMount(e,t,n,r,i)}catch(s){r.rollback(o),this._instance.unstable_handleError(s),this._pendingStateQueue&&(this._instance.state=this._processPendingState(this._instance.props,this._instance.context)),o=r.checkpoint(),this._renderedComponent.unmountComponent(!0),r.rollback(o),a=this.performInitialMount(e,t,n,r,i)}return a},performInitialMount:function(e,t,n,r,i){var a=this._instance,o=0;a.componentWillMount&&(a.componentWillMount(),this._pendingStateQueue&&(a.state=this._processPendingState(a.props,a.context))),void 0===e&&(e=this._renderValidatedComponent());var s=p.getType(e);this._renderedNodeType=s;var l=this._instantiateReactComponent(e,s!==p.EMPTY);this._renderedComponent=l;var u=m.mountComponent(l,r,t,n,this._processChildContext(i),o);return u},getHostNode:function(){return m.getHostNode(this._renderedComponent)},unmountComponent:function(e){if(this._renderedComponent){var t=this._instance;if(t.componentWillUnmount&&!t._calledComponentWillUnmount)if(t._calledComponentWillUnmount=!0,e){var n=this.getName()+".componentWillUnmount()";d.invokeGuardedCallback(n,t.componentWillUnmount.bind(t))}else t.componentWillUnmount();this._renderedComponent&&(m.unmountComponent(this._renderedComponent,e),this._renderedNodeType=null,this._renderedComponent=null,this._instance=null),this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._pendingCallbacks=null,this._pendingElement=null,this._context=null,this._rootNodeID=0,this._topLevelWrapper=null,f.remove(t)}},_maskContext:function(e){var t=this._currentElement.type,n=t.contextTypes;if(!n)return g;var r={};for(var i in n)r[i]=e[i];return r},_processContext:function(e){var t=this._maskContext(e);return t},_processChildContext:function(e){var t,n=this._currentElement.type,r=this._instance;if(r.getChildContext&&(t=r.getChildContext()),t){"object"!=typeof n.childContextTypes?s("107",this.getName()||"ReactCompositeComponent"):void 0;for(var i in t)i in n.childContextTypes?void 0:s("108",this.getName()||"ReactCompositeComponent",i);return l({},e,t)}return e},_checkContextTypes:function(e,t,n){},receiveComponent:function(e,t,n){var r=this._currentElement,i=this._context;this._pendingElement=null,this.updateComponent(t,r,e,i,n)},performUpdateIfNecessary:function(e){null!=this._pendingElement?m.receiveComponent(this,this._pendingElement,e,this._context):null!==this._pendingStateQueue||this._pendingForceUpdate?this.updateComponent(e,this._currentElement,this._currentElement,this._context,this._context):this._updateBatchNumber=null},updateComponent:function(e,t,n,r,i){var a=this._instance;null==a?s("136",this.getName()||"ReactCompositeComponent"):void 0;var o,l=!1;this._context===i?o=a.context:(o=this._processContext(i),l=!0);var u=t.props,c=n.props;t!==n&&(l=!0),l&&a.componentWillReceiveProps&&a.componentWillReceiveProps(c,o);var h=this._processPendingState(c,o),d=!0;this._pendingForceUpdate||(a.shouldComponentUpdate?d=a.shouldComponentUpdate(c,h,o):this._compositeType===w.PureClass&&(d=!v(u,c)||!v(a.state,h))),this._updateBatchNumber=null,d?(this._pendingForceUpdate=!1,this._performComponentUpdate(n,c,h,o,e,i)):(this._currentElement=n,this._context=i,a.props=c,a.state=h,a.context=o)},_processPendingState:function(e,t){var n=this._instance,r=this._pendingStateQueue,i=this._pendingReplaceState;if(this._pendingReplaceState=!1,this._pendingStateQueue=null,!r)return n.state;if(i&&1===r.length)return r[0];for(var a=l({},i?r[0]:n.state),o=i?1:0;o<r.length;o++){var s=r[o];l(a,"function"==typeof s?s.call(n,a,e,t):s)}return a},_performComponentUpdate:function(e,t,n,r,i,a){var o,s,l,u=this._instance,c=Boolean(u.componentDidUpdate);c&&(o=u.props,s=u.state,l=u.context),u.componentWillUpdate&&u.componentWillUpdate(t,n,r),this._currentElement=e,this._context=a,u.props=t,u.state=n,u.context=r,this._updateRenderedComponent(i,a),c&&i.getReactMountReady().enqueue(u.componentDidUpdate.bind(u,o,s,l),u);
+},_updateRenderedComponent:function(e,t){var n=this._renderedComponent,r=n._currentElement,i=this._renderValidatedComponent(),a=0;if(y(r,i))m.receiveComponent(n,i,e,this._processChildContext(t));else{var o=m.getHostNode(n);m.unmountComponent(n,!1);var s=p.getType(i);this._renderedNodeType=s;var l=this._instantiateReactComponent(i,s!==p.EMPTY);this._renderedComponent=l;var u=m.mountComponent(l,e,this._hostParent,this._hostContainerInfo,this._processChildContext(t),a);this._replaceNodeWithMarkup(o,u,n)}},_replaceNodeWithMarkup:function(e,t,n){c.replaceNodeWithMarkup(e,t,n)},_renderValidatedComponentWithoutOwnerOrContext:function(){var e,t=this._instance;return e=t.render()},_renderValidatedComponent:function(){var e;if(this._compositeType!==w.StatelessFunctional){h.current=this;try{e=this._renderValidatedComponentWithoutOwnerOrContext()}finally{h.current=null}}else e=this._renderValidatedComponentWithoutOwnerOrContext();return null===e||e===!1||u.isValidElement(e)?void 0:s("109",this.getName()||"ReactCompositeComponent"),e},attachRef:function(e,t){var n=this.getPublicInstance();null==n?s("110"):void 0;var r=t.getPublicInstance(),i=n.refs===g?n.refs={}:n.refs;i[e]=r},detachRef:function(e){var t=this.getPublicInstance().refs;delete t[e]},getName:function(){var e=this._currentElement.type,t=this._instance&&this._instance.constructor;return e.displayName||t&&t.displayName||e.name||t&&t.name||null},getPublicInstance:function(){var e=this._instance;return this._compositeType===w.StatelessFunctional?null:e},_instantiateReactComponent:null};e.exports=_},function(e,t,n){"use strict";var r=n(7),i=n(221),a=n(83),o=n(24),s=n(14),l=n(234),u=n(250),c=n(88),h=n(258);n(2);i.inject();var d={findDOMNode:u,render:a.render,unmountComponentAtNode:a.unmountComponentAtNode,version:l,unstable_batchedUpdates:s.batchedUpdates,unstable_renderSubtreeIntoContainer:h};"undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject&&__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({ComponentTree:{getClosestInstanceFromNode:r.getClosestInstanceFromNode,getNodeFromInstance:function(e){return e._renderedComponent&&(e=c(e)),e?r.getNodeFromInstance(e):null}},Mount:a,Reconciler:o});e.exports=d},function(e,t,n){"use strict";function r(e){if(e){var t=e._currentElement._owner||null;if(t){var n=t.getName();if(n)return" This DOM node was rendered by `"+n+"`."}}return""}function i(e,t){t&&(K[e._tag]&&(null!=t.children||null!=t.dangerouslySetInnerHTML?m("137",e._tag,e._currentElement._owner?" Check the render method of "+e._currentElement._owner.getName()+".":""):void 0),null!=t.dangerouslySetInnerHTML&&(null!=t.children?m("60"):void 0,"object"==typeof t.dangerouslySetInnerHTML&&V in t.dangerouslySetInnerHTML?void 0:m("61")),null!=t.style&&"object"!=typeof t.style?m("62",r(e)):void 0)}function a(e,t,n,r){if(!(r instanceof A)){var i=e._hostContainerInfo,a=i._node&&i._node.nodeType===W,s=a?i._node:i._ownerDocument;R(t,s),r.getReactMountReady().enqueue(o,{inst:e,registrationName:t,listener:n})}}function o(){var e=this;E.putListener(e.inst,e.registrationName,e.listener)}function s(){var e=this;T.postMountWrapper(e)}function l(){var e=this;L.postMountWrapper(e)}function u(){var e=this;N.postMountWrapper(e)}function c(){var e=this;e._rootNodeID?void 0:m("63");var t=D(e);switch(t?void 0:m("64"),e._tag){case"iframe":case"object":e._wrapperState.listeners=[k.trapBubbledEvent("topLoad","load",t)];break;case"video":case"audio":e._wrapperState.listeners=[];for(var n in G)G.hasOwnProperty(n)&&e._wrapperState.listeners.push(k.trapBubbledEvent(n,G[n],t));break;case"source":e._wrapperState.listeners=[k.trapBubbledEvent("topError","error",t)];break;case"img":e._wrapperState.listeners=[k.trapBubbledEvent("topError","error",t),k.trapBubbledEvent("topLoad","load",t)];break;case"form":e._wrapperState.listeners=[k.trapBubbledEvent("topReset","reset",t),k.trapBubbledEvent("topSubmit","submit",t)];break;case"input":case"select":case"textarea":e._wrapperState.listeners=[k.trapBubbledEvent("topInvalid","invalid",t)]}}function h(){M.postUpdateWrapper(this)}function d(e){Z.call(Y,e)||(Q.test(e)?void 0:m("65",e),Y[e]=!0)}function f(e,t){return e.indexOf("-")>=0||null!=t.is}function p(e){var t=e.type;d(t),this._currentElement=e,this._tag=t.toLowerCase(),this._namespaceURI=null,this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._hostNode=null,this._hostParent=null,this._rootNodeID=0,this._domID=0,this._hostContainerInfo=null,this._wrapperState=null,this._topLevelWrapper=null,this._flags=0}var m=n(3),g=n(5),v=n(196),y=n(198),w=n(22),b=n(46),_=n(23),x=n(76),E=n(30),C=n(47),k=n(35),S=n(77),P=n(7),T=n(214),N=n(215),M=n(78),L=n(218),I=(n(13),n(227)),A=n(232),O=(n(11),n(38)),B=(n(1),n(58),n(41),n(60),n(2),S),z=E.deleteListener,D=P.getNodeFromInstance,R=k.listenTo,j=C.registrationNameModules,F={string:!0,number:!0},q="style",V="__html",U={children:null,dangerouslySetInnerHTML:null,suppressContentEditableWarning:null},W=11,G={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},H={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},X={listing:!0,pre:!0,textarea:!0},K=g({menuitem:!0},H),Q=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,Y={},Z={}.hasOwnProperty,$=1;p.displayName="ReactDOMComponent",p.Mixin={mountComponent:function(e,t,n,r){this._rootNodeID=$++,this._domID=n._idCounter++,this._hostParent=t,this._hostContainerInfo=n;var a=this._currentElement.props;switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":this._wrapperState={listeners:null},e.getReactMountReady().enqueue(c,this);break;case"input":T.mountWrapper(this,a,t),a=T.getHostProps(this,a),e.getReactMountReady().enqueue(c,this);break;case"option":N.mountWrapper(this,a,t),a=N.getHostProps(this,a);break;case"select":M.mountWrapper(this,a,t),a=M.getHostProps(this,a),e.getReactMountReady().enqueue(c,this);break;case"textarea":L.mountWrapper(this,a,t),a=L.getHostProps(this,a),e.getReactMountReady().enqueue(c,this)}i(this,a);var o,h;null!=t?(o=t._namespaceURI,h=t._tag):n._tag&&(o=n._namespaceURI,h=n._tag),(null==o||o===b.svg&&"foreignobject"===h)&&(o=b.html),o===b.html&&("svg"===this._tag?o=b.svg:"math"===this._tag&&(o=b.mathml)),this._namespaceURI=o;var d;if(e.useCreateElement){var f,p=n._ownerDocument;if(o===b.html)if("script"===this._tag){var m=p.createElement("div"),g=this._currentElement.type;m.innerHTML="<"+g+"></"+g+">",f=m.removeChild(m.firstChild)}else f=a.is?p.createElement(this._currentElement.type,a.is):p.createElement(this._currentElement.type);else f=p.createElementNS(o,this._currentElement.type);P.precacheNode(this,f),this._flags|=B.hasCachedChildNodes,this._hostParent||x.setAttributeForRoot(f),this._updateDOMProperties(null,a,e);var y=w(f);this._createInitialChildren(e,a,r,y),d=y}else{var _=this._createOpenTagMarkupAndPutListeners(e,a),E=this._createContentMarkup(e,a,r);d=!E&&H[this._tag]?_+"/>":_+">"+E+"</"+this._currentElement.type+">"}switch(this._tag){case"input":e.getReactMountReady().enqueue(s,this),a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"textarea":e.getReactMountReady().enqueue(l,this),a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"select":a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"button":a.autoFocus&&e.getReactMountReady().enqueue(v.focusDOMComponent,this);break;case"option":e.getReactMountReady().enqueue(u,this)}return d},_createOpenTagMarkupAndPutListeners:function(e,t){var n="<"+this._currentElement.type;for(var r in t)if(t.hasOwnProperty(r)){var i=t[r];if(null!=i)if(j.hasOwnProperty(r))i&&a(this,r,i,e);else{r===q&&(i&&(i=this._previousStyleCopy=g({},t.style)),i=y.createMarkupForStyles(i,this));var o=null;null!=this._tag&&f(this._tag,t)?U.hasOwnProperty(r)||(o=x.createMarkupForCustomAttribute(r,i)):o=x.createMarkupForProperty(r,i),o&&(n+=" "+o)}}return e.renderToStaticMarkup?n:(this._hostParent||(n+=" "+x.createMarkupForRoot()),n+=" "+x.createMarkupForID(this._domID))},_createContentMarkup:function(e,t,n){var r="",i=t.dangerouslySetInnerHTML;if(null!=i)null!=i.__html&&(r=i.__html);else{var a=F[typeof t.children]?t.children:null,o=null!=a?null:t.children;if(null!=a)r=O(a);else if(null!=o){var s=this.mountChildren(o,e,n);r=s.join("")}}return X[this._tag]&&"\n"===r.charAt(0)?"\n"+r:r},_createInitialChildren:function(e,t,n,r){var i=t.dangerouslySetInnerHTML;if(null!=i)null!=i.__html&&w.queueHTML(r,i.__html);else{var a=F[typeof t.children]?t.children:null,o=null!=a?null:t.children;if(null!=a)""!==a&&w.queueText(r,a);else if(null!=o)for(var s=this.mountChildren(o,e,n),l=0;l<s.length;l++)w.queueChild(r,s[l])}},receiveComponent:function(e,t,n){var r=this._currentElement;this._currentElement=e,this.updateComponent(t,r,e,n)},updateComponent:function(e,t,n,r){var a=t.props,o=this._currentElement.props;switch(this._tag){case"input":a=T.getHostProps(this,a),o=T.getHostProps(this,o);break;case"option":a=N.getHostProps(this,a),o=N.getHostProps(this,o);break;case"select":a=M.getHostProps(this,a),o=M.getHostProps(this,o);break;case"textarea":a=L.getHostProps(this,a),o=L.getHostProps(this,o)}switch(i(this,o),this._updateDOMProperties(a,o,e),this._updateDOMChildren(a,o,e,r),this._tag){case"input":T.updateWrapper(this);break;case"textarea":L.updateWrapper(this);break;case"select":e.getReactMountReady().enqueue(h,this)}},_updateDOMProperties:function(e,t,n){var r,i,o;for(r in e)if(!t.hasOwnProperty(r)&&e.hasOwnProperty(r)&&null!=e[r])if(r===q){var s=this._previousStyleCopy;for(i in s)s.hasOwnProperty(i)&&(o=o||{},o[i]="");this._previousStyleCopy=null}else j.hasOwnProperty(r)?e[r]&&z(this,r):f(this._tag,e)?U.hasOwnProperty(r)||x.deleteValueForAttribute(D(this),r):(_.properties[r]||_.isCustomAttribute(r))&&x.deleteValueForProperty(D(this),r);for(r in t){var l=t[r],u=r===q?this._previousStyleCopy:null!=e?e[r]:void 0;if(t.hasOwnProperty(r)&&l!==u&&(null!=l||null!=u))if(r===q)if(l?l=this._previousStyleCopy=g({},l):this._previousStyleCopy=null,u){for(i in u)!u.hasOwnProperty(i)||l&&l.hasOwnProperty(i)||(o=o||{},o[i]="");for(i in l)l.hasOwnProperty(i)&&u[i]!==l[i]&&(o=o||{},o[i]=l[i])}else o=l;else if(j.hasOwnProperty(r))l?a(this,r,l,n):u&&z(this,r);else if(f(this._tag,t))U.hasOwnProperty(r)||x.setValueForAttribute(D(this),r,l);else if(_.properties[r]||_.isCustomAttribute(r)){var c=D(this);null!=l?x.setValueForProperty(c,r,l):x.deleteValueForProperty(c,r)}}o&&y.setValueForStyles(D(this),o,this)},_updateDOMChildren:function(e,t,n,r){var i=F[typeof e.children]?e.children:null,a=F[typeof t.children]?t.children:null,o=e.dangerouslySetInnerHTML&&e.dangerouslySetInnerHTML.__html,s=t.dangerouslySetInnerHTML&&t.dangerouslySetInnerHTML.__html,l=null!=i?null:e.children,u=null!=a?null:t.children,c=null!=i||null!=o,h=null!=a||null!=s;null!=l&&null==u?this.updateChildren(null,n,r):c&&!h&&this.updateTextContent(""),null!=a?i!==a&&this.updateTextContent(""+a):null!=s?o!==s&&this.updateMarkup(""+s):null!=u&&this.updateChildren(u,n,r)},getHostNode:function(){return D(this)},unmountComponent:function(e){switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":var t=this._wrapperState.listeners;if(t)for(var n=0;n<t.length;n++)t[n].remove();break;case"html":case"head":case"body":m("66",this._tag)}this.unmountChildren(e),P.uncacheNode(this),E.deleteAllListeners(this),this._rootNodeID=0,this._domID=0,this._wrapperState=null},getPublicInstance:function(){return D(this)}},g(p.prototype,p.Mixin,I.Mixin),e.exports=p},function(e,t,n){"use strict";function r(e,t){var n={_topLevelWrapper:e,_idCounter:1,_ownerDocument:t?t.nodeType===i?t:t.ownerDocument:null,_node:t,_tag:t?t.nodeName.toLowerCase():null,_namespaceURI:t?t.namespaceURI:null};return n}var i=(n(60),9);e.exports=r},function(e,t,n){"use strict";var r=n(5),i=n(22),a=n(7),o=function(e){this._currentElement=null,this._hostNode=null,this._hostParent=null,this._hostContainerInfo=null,this._domID=0};r(o.prototype,{mountComponent:function(e,t,n,r){var o=n._idCounter++;this._domID=o,this._hostParent=t,this._hostContainerInfo=n;var s=" react-empty: "+this._domID+" ";if(e.useCreateElement){var l=n._ownerDocument,u=l.createComment(s);return a.precacheNode(this,u),i(u)}return e.renderToStaticMarkup?"":"<!--"+s+"-->"},receiveComponent:function(){},getHostNode:function(){return a.getNodeFromInstance(this)},unmountComponent:function(){a.uncacheNode(this)}}),e.exports=o},function(e,t,n){"use strict";var r={useCreateElement:!0,useFiber:!1};e.exports=r},function(e,t,n){"use strict";var r=n(45),i=n(7),a={dangerouslyProcessChildrenUpdates:function(e,t){var n=i.getNodeFromInstance(e);r.processUpdates(n,t)}};e.exports=a},function(e,t,n){"use strict";function r(){this._rootNodeID&&h.updateWrapper(this)}function i(e){var t=this._currentElement.props,n=l.executeOnChange(t,e);c.asap(r,this);var i=t.name;if("radio"===t.type&&null!=i){for(var o=u.getNodeFromInstance(this),s=o;s.parentNode;)s=s.parentNode;for(var h=s.querySelectorAll("input[name="+JSON.stringify(""+i)+'][type="radio"]'),d=0;d<h.length;d++){var f=h[d];if(f!==o&&f.form===o.form){var p=u.getInstanceFromNode(f);p?void 0:a("90"),c.asap(r,p)}}}return n}var a=n(3),o=n(5),s=n(76),l=n(50),u=n(7),c=n(14),h=(n(1),n(2),{getHostProps:function(e,t){var n=l.getValue(t),r=l.getChecked(t),i=o({type:void 0,step:void 0,min:void 0,max:void 0},t,{defaultChecked:void 0,defaultValue:void 0,value:null!=n?n:e._wrapperState.initialValue,checked:null!=r?r:e._wrapperState.initialChecked,onChange:e._wrapperState.onChange});return i},mountWrapper:function(e,t){var n=t.defaultValue;e._wrapperState={initialChecked:null!=t.checked?t.checked:t.defaultChecked,initialValue:null!=t.value?t.value:n,listeners:null,onChange:i.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=t.checked;null!=n&&s.setValueForProperty(u.getNodeFromInstance(e),"checked",n||!1);var r=u.getNodeFromInstance(e),i=l.getValue(t);if(null!=i){var a=""+i;a!==r.value&&(r.value=a)}else null==t.value&&null!=t.defaultValue&&r.defaultValue!==""+t.defaultValue&&(r.defaultValue=""+t.defaultValue),null==t.checked&&null!=t.defaultChecked&&(r.defaultChecked=!!t.defaultChecked)},postMountWrapper:function(e){var t=e._currentElement.props,n=u.getNodeFromInstance(e);switch(t.type){case"submit":case"reset":break;case"color":case"date":case"datetime":case"datetime-local":case"month":case"time":case"week":n.value="",n.value=n.defaultValue;break;default:n.value=n.value}var r=n.name;""!==r&&(n.name=""),n.defaultChecked=!n.defaultChecked,n.defaultChecked=!n.defaultChecked,""!==r&&(n.name=r)}});e.exports=h},function(e,t,n){"use strict";function r(e){var t="";return a.Children.forEach(e,function(e){null!=e&&("string"==typeof e||"number"==typeof e?t+=e:l||(l=!0))}),t}var i=n(5),a=n(25),o=n(7),s=n(78),l=(n(2),!1),u={mountWrapper:function(e,t,n){var i=null;if(null!=n){var a=n;"optgroup"===a._tag&&(a=a._hostParent),null!=a&&"select"===a._tag&&(i=s.getSelectValueContext(a))}var o=null;if(null!=i){var l;if(l=null!=t.value?t.value+"":r(t.children),o=!1,Array.isArray(i)){for(var u=0;u<i.length;u++)if(""+i[u]===l){o=!0;break}}else o=""+i===l}e._wrapperState={selected:o}},postMountWrapper:function(e){var t=e._currentElement.props;if(null!=t.value){var n=o.getNodeFromInstance(e);n.setAttribute("value",t.value)}},getHostProps:function(e,t){var n=i({selected:void 0,children:void 0},t);null!=e._wrapperState.selected&&(n.selected=e._wrapperState.selected);var a=r(t.children);return a&&(n.children=a),n}};e.exports=u},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(e){return null}var l=r(t.anchorNode,t.anchorOffset,t.focusNode,t.focusOffset),u=l?0:s.toString().length,c=s.cloneRange();c.selectNodeContents(e),c.setEnd(s.startContainer,s.startOffset);var h=r(c.startContainer,c.startOffset,c.endContainer,c.endOffset),d=h?0:c.toString().length,f=d+u,p=document.createRange();p.setStart(n,i),p.setEnd(a,o);var m=p.collapsed;return{start:m?f:d,end:m?d:f}}function o(e,t){var n,r,i=document.selection.createRange().duplicate();void 0===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=void 0===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(9),u=n(255),c=n(89),h=l.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:h?i:a,setOffsets:h?o:s};e.exports=d},function(e,t,n){"use strict";var r=n(3),i=n(5),a=n(45),o=n(22),s=n(7),l=n(38),u=(n(1),n(60),function(e){this._currentElement=e,this._stringText=""+e,this._hostNode=null,this._hostParent=null,this._domID=0,this._mountIndex=0,this._closingComment=null,this._commentNodes=null});i(u.prototype,{mountComponent:function(e,t,n,r){var i=n._idCounter++,a=" react-text: "+i+" ",u=" /react-text ";if(this._domID=i,this._hostParent=t,e.useCreateElement){var c=n._ownerDocument,h=c.createComment(a),d=c.createComment(u),f=o(c.createDocumentFragment());return o.queueChild(f,o(h)),this._stringText&&o.queueChild(f,o(c.createTextNode(this._stringText))),o.queueChild(f,o(d)),s.precacheNode(this,h),this._closingComment=d,f}var p=l(this._stringText);return e.renderToStaticMarkup?p:"<!--"+a+"-->"+p+"<!--"+u+"-->"},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var r=this.getHostNode();a.replaceDelimitedText(r[0],r[1],n)}}},getHostNode:function(){var e=this._commentNodes;if(e)return e;if(!this._closingComment)for(var t=s.getNodeFromInstance(this),n=t.nextSibling;;){if(null==n?r("67",this._domID):void 0,8===n.nodeType&&" /react-text "===n.nodeValue){this._closingComment=n;break}n=n.nextSibling}return e=[this._hostNode,this._closingComment],this._commentNodes=e,e},unmountComponent:function(){this._closingComment=null,this._commentNodes=null,s.uncacheNode(this)}}),e.exports=u},function(e,t,n){"use strict";function r(){this._rootNodeID&&c.updateWrapper(this)}function i(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);return u.asap(r,this),n}var a=n(3),o=n(5),s=n(50),l=n(7),u=n(14),c=(n(1),n(2),{getHostProps:function(e,t){null!=t.dangerouslySetInnerHTML?a("91"):void 0;var n=o({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue,onChange:e._wrapperState.onChange});return n},mountWrapper:function(e,t){var n=s.getValue(t),r=n;if(null==n){var o=t.defaultValue,l=t.children;null!=l&&(null!=o?a("92"):void 0,Array.isArray(l)&&(l.length<=1?void 0:a("93"),l=l[0]),o=""+l),null==o&&(o=""),r=o}e._wrapperState={initialValue:""+r,listeners:null,onChange:i.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=l.getNodeFromInstance(e),r=s.getValue(t);if(null!=r){var i=""+r;i!==n.value&&(n.value=i),null==t.defaultValue&&(n.defaultValue=i)}null!=t.defaultValue&&(n.defaultValue=t.defaultValue)},postMountWrapper:function(e){var t=l.getNodeFromInstance(e),n=t.textContent;n===e._wrapperState.initialValue&&(t.value=n)}});e.exports=c},function(e,t,n){"use strict";function r(e,t){"_hostNode"in e?void 0:l("33"),"_hostNode"in t?void 0:l("33");for(var n=0,r=e;r;r=r._hostParent)n++;for(var i=0,a=t;a;a=a._hostParent)i++;for(;n-i>0;)e=e._hostParent,n--;for(;i-n>0;)t=t._hostParent,i--;for(var o=n;o--;){if(e===t)return e;e=e._hostParent,t=t._hostParent}return null}function i(e,t){"_hostNode"in e?void 0:l("35"),"_hostNode"in t?void 0:l("35");for(;t;){if(t===e)return!0;t=t._hostParent}return!1}function a(e){return"_hostNode"in e?void 0:l("36"),e._hostParent}function o(e,t,n){for(var r=[];e;)r.push(e),e=e._hostParent;var i;for(i=r.length;i-- >0;)t(r[i],"captured",n);for(i=0;i<r.length;i++)t(r[i],"bubbled",n)}function s(e,t,n,i,a){for(var o=e&&t?r(e,t):null,s=[];e&&e!==o;)s.push(e),e=e._hostParent;for(var l=[];t&&t!==o;)l.push(t),t=t._hostParent;var u;for(u=0;u<s.length;u++)n(s[u],"bubbled",i);for(u=l.length;u-- >0;)n(l[u],"captured",a)}var l=n(3);n(1);e.exports={isAncestor:i,getLowestCommonAncestor:r,getParentInstance:a,traverseTwoPhase:o,traverseEnterLeave:s}},function(e,t,n){"use strict";function r(){this.reinitializeTransaction()}var i=n(5),a=n(14),o=n(37),s=n(11),l={initialize:s,close:function(){d.isBatchingUpdates=!1}},u={initialize:s,close:a.flushBatchedUpdates.bind(a)},c=[u,l];i(r.prototype,o,{getTransactionWrappers:function(){return c}});var h=new r,d={isBatchingUpdates:!1,batchedUpdates:function(e,t,n,r,i,a){var o=d.isBatchingUpdates;return d.isBatchingUpdates=!0,o?e(t,n,r,i,a):h.perform(e,null,t,n,r,i,a)}};e.exports=d},function(e,t,n){"use strict";function r(){E||(E=!0,y.EventEmitter.injectReactEventListener(v),y.EventPluginHub.injectEventPluginOrder(s),y.EventPluginUtils.injectComponentTree(d),y.EventPluginUtils.injectTreeTraversal(p),y.EventPluginHub.injectEventPluginsByName({SimpleEventPlugin:x,EnterLeaveEventPlugin:l,ChangeEventPlugin:o,SelectEventPlugin:_,BeforeInputEventPlugin:a}),y.HostComponent.injectGenericComponentClass(h),y.HostComponent.injectTextComponentClass(m),y.DOMProperty.injectDOMPropertyConfig(i),y.DOMProperty.injectDOMPropertyConfig(u),y.DOMProperty.injectDOMPropertyConfig(b),y.EmptyComponent.injectEmptyComponentFactory(function(e){return new f(e)}),y.Updates.injectReconcileTransaction(w),y.Updates.injectBatchingStrategy(g),y.Component.injectEnvironment(c))}var i=n(195),a=n(197),o=n(199),s=n(201),l=n(202),u=n(204),c=n(206),h=n(209),d=n(7),f=n(211),p=n(219),m=n(217),g=n(220),v=n(224),y=n(225),w=n(230),b=n(235),_=n(236),x=n(237),E=!1;e.exports={inject:r}},function(e,t,n){"use strict";var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;e.exports=r},function(e,t,n){"use strict";function r(e){i.enqueueEvents(e),i.processEventQueue(!1)}var i=n(30),a={handleTopLevel:function(e,t,n,a){var o=i.extractEvents(e,t,n,a);r(o)}};e.exports=a},function(e,t,n){"use strict";function r(e){for(;e._hostParent;)e=e._hostParent;var t=h.getNodeFromInstance(e),n=t.parentNode;return h.getClosestInstanceFromNode(n)}function i(e,t){this.topLevelType=e,this.nativeEvent=t,this.ancestors=[]}function a(e){var t=f(e.nativeEvent),n=h.getClosestInstanceFromNode(t),i=n;do e.ancestors.push(i),i=i&&r(i);while(i);for(var a=0;a<e.ancestors.length;a++)n=e.ancestors[a],m._handleTopLevel(e.topLevelType,n,e.nativeEvent,f(e.nativeEvent))}function o(e){var t=p(window);e(t)}var s=n(5),l=n(67),u=n(9),c=n(19),h=n(7),d=n(14),f=n(57),p=n(179);s(i.prototype,{destructor:function(){this.topLevelType=null,this.nativeEvent=null,this.ancestors.length=0}}),c.addPoolingTo(i,c.twoArgumentPooler);var m={_enabled:!0,_handleTopLevel:null,WINDOW_HANDLE:u.canUseDOM?window:null,setHandleTopLevel:function(e){m._handleTopLevel=e},setEnabled:function(e){m._enabled=!!e},isEnabled:function(){return m._enabled},trapBubbledEvent:function(e,t,n){return n?l.listen(n,t,m.dispatchEvent.bind(null,e)):null},trapCapturedEvent:function(e,t,n){return n?l.capture(n,t,m.dispatchEvent.bind(null,e)):null},monitorScrollValue:function(e){var t=o.bind(null,e);l.listen(window,"scroll",t)},dispatchEvent:function(e,t){if(m._enabled){var n=i.getPooled(e,t);try{d.batchedUpdates(a,n)}finally{i.release(n)}}}};e.exports=m},function(e,t,n){"use strict";var r=n(23),i=n(30),a=n(48),o=n(51),s=n(79),l=n(35),u=n(81),c=n(14),h={Component:o.injection,DOMProperty:r.injection,EmptyComponent:s.injection,EventPluginHub:i.injection,EventPluginUtils:a.injection,EventEmitter:l.injection,HostComponent:u.injection,Updates:c.injection};e.exports=h},function(e,t,n){"use strict";var r=n(248),i=/\/?>/,a=/^<\!\-\-/,o={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return a.test(e)?e:e.replace(i," "+o.CHECKSUM_ATTR_NAME+'="'+t+'"$&')},canReuseMarkup:function(e,t){var n=t.getAttribute(o.CHECKSUM_ATTR_NAME);n=n&&parseInt(n,10);var i=r(e);return i===n}};e.exports=o},function(e,t,n){"use strict";function r(e,t,n){return{type:"INSERT_MARKUP",content:e,fromIndex:null,fromNode:null,toIndex:n,afterNode:t}}function i(e,t,n){return{type:"MOVE_EXISTING",content:null,fromIndex:e._mountIndex,fromNode:d.getHostNode(e),toIndex:n,afterNode:t}}function a(e,t){return{type:"REMOVE_NODE",content:null,fromIndex:e._mountIndex,fromNode:t,toIndex:null,afterNode:null}}function o(e){return{type:"SET_MARKUP",content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function s(e){return{type:"TEXT_CONTENT",content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function l(e,t){return t&&(e=e||[],e.push(t)),e}function u(e,t){h.processChildrenUpdates(e,t)}var c=n(3),h=n(51),d=(n(32),n(13),n(17),n(24)),f=n(205),p=(n(11),n(251)),m=(n(1),{Mixin:{_reconcilerInstantiateChildren:function(e,t,n){return f.instantiateChildren(e,t,n)},_reconcilerUpdateChildren:function(e,t,n,r,i,a){var o,s=0;return o=p(t,s),f.updateChildren(e,o,n,r,i,this,this._hostContainerInfo,a,s),o},mountChildren:function(e,t,n){var r=this._reconcilerInstantiateChildren(e,t,n);this._renderedChildren=r;var i=[],a=0;for(var o in r)if(r.hasOwnProperty(o)){var s=r[o],l=0,u=d.mountComponent(s,t,this,this._hostContainerInfo,n,l);s._mountIndex=a++,i.push(u)}return i},updateTextContent:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[s(e)];u(this,r)},updateMarkup:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[o(e)];u(this,r)},updateChildren:function(e,t,n){this._updateChildren(e,t,n)},_updateChildren:function(e,t,n){var r=this._renderedChildren,i={},a=[],o=this._reconcilerUpdateChildren(r,e,a,i,t,n);if(o||r){var s,c=null,h=0,f=0,p=0,m=null;for(s in o)if(o.hasOwnProperty(s)){var g=r&&r[s],v=o[s];g===v?(c=l(c,this.moveChild(g,m,h,f)),f=Math.max(g._mountIndex,f),g._mountIndex=h):(g&&(f=Math.max(g._mountIndex,f)),c=l(c,this._mountChildAtIndex(v,a[p],m,h,t,n)),p++),h++,m=d.getHostNode(v)}for(s in i)i.hasOwnProperty(s)&&(c=l(c,this._unmountChild(r[s],i[s])));c&&u(this,c),this._renderedChildren=o}},unmountChildren:function(e){var t=this._renderedChildren;f.unmountChildren(t,e),this._renderedChildren=null},moveChild:function(e,t,n,r){if(e._mountIndex<r)return i(e,t,n)},createChild:function(e,t,n){return r(n,t,e._mountIndex)},removeChild:function(e,t){return a(e,t)},_mountChildAtIndex:function(e,t,n,r,i,a){return e._mountIndex=r,this.createChild(e,n,t)},_unmountChild:function(e,t){var n=this.removeChild(e,t);return e._mountIndex=null,n}}});e.exports=m},function(e,t,n){"use strict";function r(e){return!(!e||"function"!=typeof e.attachRef||"function"!=typeof e.detachRef)}var i=n(3),a=(n(1),{addComponentAsRefTo:function(e,t,n){r(n)?void 0:i("119"),n.attachRef(t,e)},removeComponentAsRefFrom:function(e,t,n){r(n)?void 0:i("120");var a=n.getPublicInstance();a&&a.refs[t]===e.getPublicInstance()&&n.detachRef(t)}});e.exports=a},function(e,t,n){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r},function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=!1,this.reactMountReady=a.getPooled(null),this.useCreateElement=e}var i=n(5),a=n(75),o=n(19),s=n(35),l=n(82),u=(n(13),n(37)),c=n(53),h={initialize:l.getSelectionInformation,close:l.restoreSelection},d={initialize:function(){var e=s.isEnabled();return s.setEnabled(!1),e},close:function(e){s.setEnabled(e)}},f={initialize:function(){this.reactMountReady.reset()},close:function(){this.reactMountReady.notifyAll()}},p=[h,d,f],m={getTransactionWrappers:function(){return p},getReactMountReady:function(){return this.reactMountReady},getUpdateQueue:function(){return c},checkpoint:function(){return this.reactMountReady.checkpoint()},rollback:function(e){this.reactMountReady.rollback(e)},destructor:function(){a.release(this.reactMountReady),this.reactMountReady=null}};i(r.prototype,u,m),o.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";function r(e,t,n){"function"==typeof e?e(t.getPublicInstance()):a.addComponentAsRefTo(t,e,n)}function i(e,t,n){"function"==typeof e?e(null):a.removeComponentAsRefFrom(t,e,n)}var a=n(228),o={};o.attachRefs=function(e,t){if(null!==t&&"object"==typeof t){var n=t.ref;null!=n&&r(n,e,t._owner)}},o.shouldUpdateRefs=function(e,t){var n=null,r=null;null!==e&&"object"==typeof e&&(n=e.ref,r=e._owner);var i=null,a=null;return null!==t&&"object"==typeof t&&(i=t.ref,a=t._owner),n!==i||"string"==typeof i&&a!==r},o.detachRefs=function(e,t){if(null!==t&&"object"==typeof t){var n=t.ref;null!=n&&i(n,e,t._owner)}},e.exports=o},function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=e,this.useCreateElement=!1,this.updateQueue=new s(this)}var i=n(5),a=n(19),o=n(37),s=(n(13),n(233)),l=[],u={enqueue:function(){}},c={getTransactionWrappers:function(){return l},getReactMountReady:function(){return u},getUpdateQueue:function(){return this.updateQueue},destructor:function(){},checkpoint:function(){},rollback:function(){}};i(r.prototype,o,c),a.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){}var a=n(53),o=(n(2),function(){function e(t){r(this,e),this.transaction=t}return e.prototype.isMounted=function(e){return!1},e.prototype.enqueueCallback=function(e,t,n){this.transaction.isInTransaction()&&a.enqueueCallback(e,t,n)},e.prototype.enqueueForceUpdate=function(e){this.transaction.isInTransaction()?a.enqueueForceUpdate(e):i(e,"forceUpdate")},e.prototype.enqueueReplaceState=function(e,t){this.transaction.isInTransaction()?a.enqueueReplaceState(e,t):i(e,"replaceState")},e.prototype.enqueueSetState=function(e,t){this.transaction.isInTransaction()?a.enqueueSetState(e,t):i(e,"setState")},e}());e.exports=o},function(e,t,n){"use strict";e.exports="15.4.2"},function(e,t,n){"use strict";var r={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},i={accentHeight:"accent-height",accumulate:0,additive:0,alignmentBaseline:"alignment-baseline",allowReorder:"allowReorder",alphabetic:0,amplitude:0,arabicForm:"arabic-form",ascent:0,attributeName:"attributeName",attributeType:"attributeType",autoReverse:"autoReverse",azimuth:0,baseFrequency:"baseFrequency",baseProfile:"baseProfile",baselineShift:"baseline-shift",bbox:0,begin:0,bias:0,by:0,calcMode:"calcMode",capHeight:"cap-height",clip:0,clipPath:"clip-path",clipRule:"clip-rule",clipPathUnits:"clipPathUnits",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",contentScriptType:"contentScriptType",contentStyleType:"contentStyleType",cursor:0,cx:0,cy:0,d:0,decelerate:0,descent:0,diffuseConstant:"diffuseConstant",
 direction:0,display:0,divisor:0,dominantBaseline:"dominant-baseline",dur:0,dx:0,dy:0,edgeMode:"edgeMode",elevation:0,enableBackground:"enable-background",end:0,exponent:0,externalResourcesRequired:"externalResourcesRequired",fill:0,fillOpacity:"fill-opacity",fillRule:"fill-rule",filter:0,filterRes:"filterRes",filterUnits:"filterUnits",floodColor:"flood-color",floodOpacity:"flood-opacity",focusable:0,fontFamily:"font-family",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontVariant:"font-variant",fontWeight:"font-weight",format:0,from:0,fx:0,fy:0,g1:0,g2:0,glyphName:"glyph-name",glyphOrientationHorizontal:"glyph-orientation-horizontal",glyphOrientationVertical:"glyph-orientation-vertical",glyphRef:"glyphRef",gradientTransform:"gradientTransform",gradientUnits:"gradientUnits",hanging:0,horizAdvX:"horiz-adv-x",horizOriginX:"horiz-origin-x",ideographic:0,imageRendering:"image-rendering",in:0,in2:0,intercept:0,k:0,k1:0,k2:0,k3:0,k4:0,kernelMatrix:"kernelMatrix",kernelUnitLength:"kernelUnitLength",kerning:0,keyPoints:"keyPoints",keySplines:"keySplines",keyTimes:"keyTimes",lengthAdjust:"lengthAdjust",letterSpacing:"letter-spacing",lightingColor:"lighting-color",limitingConeAngle:"limitingConeAngle",local:0,markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",markerHeight:"markerHeight",markerUnits:"markerUnits",markerWidth:"markerWidth",mask:0,maskContentUnits:"maskContentUnits",maskUnits:"maskUnits",mathematical:0,mode:0,numOctaves:"numOctaves",offset:0,opacity:0,operator:0,order:0,orient:0,orientation:0,origin:0,overflow:0,overlinePosition:"overline-position",overlineThickness:"overline-thickness",paintOrder:"paint-order",panose1:"panose-1",pathLength:"pathLength",patternContentUnits:"patternContentUnits",patternTransform:"patternTransform",patternUnits:"patternUnits",pointerEvents:"pointer-events",points:0,pointsAtX:"pointsAtX",pointsAtY:"pointsAtY",pointsAtZ:"pointsAtZ",preserveAlpha:"preserveAlpha",preserveAspectRatio:"preserveAspectRatio",primitiveUnits:"primitiveUnits",r:0,radius:0,refX:"refX",refY:"refY",renderingIntent:"rendering-intent",repeatCount:"repeatCount",repeatDur:"repeatDur",requiredExtensions:"requiredExtensions",requiredFeatures:"requiredFeatures",restart:0,result:0,rotate:0,rx:0,ry:0,scale:0,seed:0,shapeRendering:"shape-rendering",slope:0,spacing:0,specularConstant:"specularConstant",specularExponent:"specularExponent",speed:0,spreadMethod:"spreadMethod",startOffset:"startOffset",stdDeviation:"stdDeviation",stemh:0,stemv:0,stitchTiles:"stitchTiles",stopColor:"stop-color",stopOpacity:"stop-opacity",strikethroughPosition:"strikethrough-position",strikethroughThickness:"strikethrough-thickness",string:0,stroke:0,strokeDasharray:"stroke-dasharray",strokeDashoffset:"stroke-dashoffset",strokeLinecap:"stroke-linecap",strokeLinejoin:"stroke-linejoin",strokeMiterlimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",surfaceScale:"surfaceScale",systemLanguage:"systemLanguage",tableValues:"tableValues",targetX:"targetX",targetY:"targetY",textAnchor:"text-anchor",textDecoration:"text-decoration",textRendering:"text-rendering",textLength:"textLength",to:0,transform:0,u1:0,u2:0,underlinePosition:"underline-position",underlineThickness:"underline-thickness",unicode:0,unicodeBidi:"unicode-bidi",unicodeRange:"unicode-range",unitsPerEm:"units-per-em",vAlphabetic:"v-alphabetic",vHanging:"v-hanging",vIdeographic:"v-ideographic",vMathematical:"v-mathematical",values:0,vectorEffect:"vector-effect",version:0,vertAdvY:"vert-adv-y",vertOriginX:"vert-origin-x",vertOriginY:"vert-origin-y",viewBox:"viewBox",viewTarget:"viewTarget",visibility:0,widths:0,wordSpacing:"word-spacing",writingMode:"writing-mode",x:0,xHeight:"x-height",x1:0,x2:0,xChannelSelector:"xChannelSelector",xlinkActuate:"xlink:actuate",xlinkArcrole:"xlink:arcrole",xlinkHref:"xlink:href",xlinkRole:"xlink:role",xlinkShow:"xlink:show",xlinkTitle:"xlink:title",xlinkType:"xlink:type",xmlBase:"xml:base",xmlns:0,xmlnsXlink:"xmlns:xlink",xmlLang:"xml:lang",xmlSpace:"xml:space",y:0,y1:0,y2:0,yChannelSelector:"yChannelSelector",z:0,zoomAndPan:"zoomAndPan"},a={Properties:{},DOMAttributeNamespaces:{xlinkActuate:r.xlink,xlinkArcrole:r.xlink,xlinkHref:r.xlink,xlinkRole:r.xlink,xlinkShow:r.xlink,xlinkTitle:r.xlink,xlinkType:r.xlink,xmlBase:r.xml,xmlLang:r.xml,xmlSpace:r.xml},DOMAttributeNames:{}};Object.keys(i).forEach(function(e){a.Properties[e]=0,i[e]&&(a.DOMAttributeNames[e]=i[e])}),e.exports=a},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(y||null==m||m!==c())return null;var n=r(m);if(!v||!d(v,n)){v=n;var i=u.getPooled(p.select,g,e,t);return i.type="select",i.target=m,a.accumulateTwoPhaseDispatches(i),i}return null}var a=n(31),o=n(9),s=n(7),l=n(82),u=n(16),c=n(69),h=n(91),d=n(41),f=o.canUseDOM&&"documentMode"in document&&document.documentMode<=11,p={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:["topBlur","topContextMenu","topFocus","topKeyDown","topKeyUp","topMouseDown","topMouseUp","topSelectionChange"]}},m=null,g=null,v=null,y=!1,w=!1,b={eventTypes:p,extractEvents:function(e,t,n,r){if(!w)return null;var a=t?s.getNodeFromInstance(t):window;switch(e){case"topFocus":(h(a)||"true"===a.contentEditable)&&(m=a,g=t,v=null);break;case"topBlur":m=null,g=null,v=null;break;case"topMouseDown":y=!0;break;case"topContextMenu":case"topMouseUp":return y=!1,i(n,r);case"topSelectionChange":if(f)break;case"topKeyDown":case"topKeyUp":return i(n,r)}return null},didPutListener:function(e,t,n){"onSelect"===t&&(w=!0)}};e.exports=b},function(e,t,n){"use strict";function r(e){return"."+e._rootNodeID}function i(e){return"button"===e||"input"===e||"select"===e||"textarea"===e}var a=n(3),o=n(67),s=n(31),l=n(7),u=n(238),c=n(239),h=n(16),d=n(242),f=n(244),p=n(36),m=n(241),g=n(245),v=n(246),y=n(33),w=n(247),b=n(11),_=n(55),x=(n(1),{}),E={};["abort","animationEnd","animationIteration","animationStart","blur","canPlay","canPlayThrough","click","contextMenu","copy","cut","doubleClick","drag","dragEnd","dragEnter","dragExit","dragLeave","dragOver","dragStart","drop","durationChange","emptied","encrypted","ended","error","focus","input","invalid","keyDown","keyPress","keyUp","load","loadedData","loadedMetadata","loadStart","mouseDown","mouseMove","mouseOut","mouseOver","mouseUp","paste","pause","play","playing","progress","rateChange","reset","scroll","seeked","seeking","stalled","submit","suspend","timeUpdate","touchCancel","touchEnd","touchMove","touchStart","transitionEnd","volumeChange","waiting","wheel"].forEach(function(e){var t=e[0].toUpperCase()+e.slice(1),n="on"+t,r="top"+t,i={phasedRegistrationNames:{bubbled:n,captured:n+"Capture"},dependencies:[r]};x[e]=i,E[r]=i});var C={},k={eventTypes:x,extractEvents:function(e,t,n,r){var i=E[e];if(!i)return null;var o;switch(e){case"topAbort":case"topCanPlay":case"topCanPlayThrough":case"topDurationChange":case"topEmptied":case"topEncrypted":case"topEnded":case"topError":case"topInput":case"topInvalid":case"topLoad":case"topLoadedData":case"topLoadedMetadata":case"topLoadStart":case"topPause":case"topPlay":case"topPlaying":case"topProgress":case"topRateChange":case"topReset":case"topSeeked":case"topSeeking":case"topStalled":case"topSubmit":case"topSuspend":case"topTimeUpdate":case"topVolumeChange":case"topWaiting":o=h;break;case"topKeyPress":if(0===_(n))return null;case"topKeyDown":case"topKeyUp":o=f;break;case"topBlur":case"topFocus":o=d;break;case"topClick":if(2===n.button)return null;case"topDoubleClick":case"topMouseDown":case"topMouseMove":case"topMouseUp":case"topMouseOut":case"topMouseOver":case"topContextMenu":o=p;break;case"topDrag":case"topDragEnd":case"topDragEnter":case"topDragExit":case"topDragLeave":case"topDragOver":case"topDragStart":case"topDrop":o=m;break;case"topTouchCancel":case"topTouchEnd":case"topTouchMove":case"topTouchStart":o=g;break;case"topAnimationEnd":case"topAnimationIteration":case"topAnimationStart":o=u;break;case"topTransitionEnd":o=v;break;case"topScroll":o=y;break;case"topWheel":o=w;break;case"topCopy":case"topCut":case"topPaste":o=c}o?void 0:a("86",e);var l=o.getPooled(i,t,n,r);return s.accumulateTwoPhaseDispatches(l),l},didPutListener:function(e,t,n){if("onClick"===t&&!i(e._tag)){var a=r(e),s=l.getNodeFromInstance(e);C[a]||(C[a]=o.listen(s,"click",b))}},willDeleteListener:function(e,t){if("onClick"===t&&!i(e._tag)){var n=r(e);C[n].remove(),delete C[n]}}};e.exports=k},function(e,t,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(16),a={animationName:null,elapsedTime:null,pseudoElement:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(16),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){return i.call(this,e,t,n,r)}var i=n(16),a={data:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(36),a={dataTransfer:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(33),a={relatedTarget:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(16),a={data:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(33),a=n(55),o=n(252),s=n(56),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,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(33),a=n(56),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){return i.call(this,e,t,n,r)}var i=n(16),a={propertyName:null,elapsedTime:null,pseudoElement:null};i.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){return i.call(this,e,t,n,r)}var i=n(36),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";function r(e){for(var t=1,n=0,r=0,a=e.length,o=a&-4;r<o;){for(var s=Math.min(r+4096,o);r<s;r+=4)n+=(t+=e.charCodeAt(r))+(t+=e.charCodeAt(r+1))+(t+=e.charCodeAt(r+2))+(t+=e.charCodeAt(r+3));t%=i,n%=i}for(;r<a;r++)n+=t+=e.charCodeAt(r);return t%=i,n%=i,t|n<<16}var i=65521;e.exports=r},function(e,t,n){"use strict";function r(e,t,n){var r=null==t||"boolean"==typeof t||""===t;if(r)return"";var i=isNaN(t);if(i||0===t||a.hasOwnProperty(e)&&a[e])return""+t;if("string"==typeof t){t=t.trim()}return t+"px"}var i=n(74),a=(n(2),i.isUnitlessNumber);e.exports=r},function(e,t,n){"use strict";function r(e){if(null==e)return null;if(1===e.nodeType)return e;var t=o.get(e);return t?(t=s(t),t?a.getNodeFromInstance(t):null):void("function"==typeof e.render?i("44"):i("45",Object.keys(e)))}var i=n(3),a=(n(17),n(7)),o=n(32),s=n(88);n(1),n(2);e.exports=r},function(e,t,n){"use strict";(function(t){function r(e,t,n,r){if(e&&"object"==typeof e){var i=e,a=void 0===i[n];a&&null!=t&&(i[n]=t)}}function i(e,t){if(null==e)return e;var n={};return a(e,r,n),n}var a=(n(49),n(93));n(2);"undefined"!=typeof t&&t.env,1,e.exports=i}).call(t,n(73))},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(55),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){var t=e&&(i&&e[i]||e[a]);if("function"==typeof t)return t}var i="function"==typeof Symbol&&Symbol.iterator,a="@@iterator";e.exports=r},function(e,t,n){"use strict";function r(){return i++}var i=1;e.exports=r},function(e,t,n){"use strict";function r(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function i(e){for(;e;){if(e.nextSibling)return e.nextSibling;e=e.parentNode}}function a(e,t){for(var n=r(e),a=0,o=0;n;){if(3===n.nodeType){if(o=a+n.textContent.length,a<=t&&o>=t)return{node:n,offset:t-a};a=o}n=r(i(n))}}e.exports=a},function(e,t,n){"use strict";function r(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function i(e){if(s[e])return s[e];if(!o[e])return e;var t=o[e];for(var n in t)if(t.hasOwnProperty(n)&&n in l)return s[e]=t[n];return""}var a=n(9),o={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},s={},l={};a.canUseDOM&&(l=document.createElement("div").style,"AnimationEvent"in window||(delete o.animationend.animation,delete o.animationiteration.animation,delete o.animationstart.animation),"TransitionEvent"in window||delete o.transitionend.transition),e.exports=i},function(e,t,n){"use strict";function r(e){return'"'+i(e)+'"'}var i=n(38);e.exports=r},function(e,t,n){"use strict";var r=n(83);e.exports=r.renderSubtreeIntoContainer},function(e,t,n){"use strict";t.__esModule=!0;var r=n(20),i={contextTypes:{history:r.history},componentWillMount:function(){this.history=this.context.history}};t.default=i,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(0),l=r(s),u=n(94),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){"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=n(10),s=(r(o),n(12)),l=r(s),u=n(0),c=r(u),h=n(95),d=r(h),f=n(20),p=c.default.PropTypes,m=p.string,g=p.object,v=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(t,e),t.prototype.render=function(){l.default(!1)},t}(u.Component);v.propTypes={to:m.isRequired,query:g,state:g,onEnter:f.falsy,children:f.falsy},v.createRouteFromReactElement=function(e,t){t&&(t.indexRoute=d.default.createRouteFromReactElement(e))},t.default=v,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=n(10),s=(r(o),n(12)),l=r(s),u=n(0),c=r(u),h=n(18),d=n(20),f=c.default.PropTypes.func,p=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(t,e),t.prototype.render=function(){l.default(!1)},t}(u.Component);p.propTypes={path:d.falsy,component:d.component,components:d.components,getComponent:f,getComponents:f},p.createRouteFromReactElement=function(e,t){t&&(t.indexRoute=h.createRouteFromReactElement(e))},t.default=p,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(0),a=r(i),o=n(12),s=r(o),l=a.default.PropTypes.object,u={contextTypes:{history:l.isRequired,route:l},propTypes:{route:l},componentDidMount:function(){this.routerWillLeave?void 0:s.default(!1);var e=this.props.route||this.context.route;e?void 0:s.default(!1),this._unlistenBeforeLeavingRoute=this.context.history.listenBeforeLeavingRoute(e,this.routerWillLeave)},componentWillUnmount:function(){this._unlistenBeforeLeavingRoute&&this._unlistenBeforeLeavingRoute()}};t.default=u,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=n(12),s=r(o),l=n(0),u=r(l),c=n(18),h=n(20),d=u.default.PropTypes,f=d.string,p=d.func,m=function(e){function t(){i(this,t),e.apply(this,arguments)}return a(t,e),t.prototype.render=function(){s.default(!1)},t}(l.Component);m.createRouteFromReactElement=c.createRouteFromReactElement,m.propTypes={path:f,component:h.component,components:h.components,getComponent:p,getComponents:p},t.default=m,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=n(0),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){"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)}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(10),u=(r(l),n(0)),c=r(u),h=n(188),d=r(h),f=n(18),p=n(96),m=r(p),g=n(62),v=r(g),y=n(20),w=c.default.PropTypes,b=w.func,_=w.object,x=function(e){function t(n,r){a(this,t),e.call(this,n,r),this.state={location:null,routes:null,params:null,components:null}}return o(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}:d.default;this.history=v.default(s)({routes:f.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){},t.prototype.componentWillUnmount=function(){this._unlisten&&this._unlisten()},t.prototype.render=function(){var e=this.state,n=e.location,r=e.routes,a=e.params,o=e.components,l=this.props,u=l.RoutingContext,h=l.createElement,d=i(l,["RoutingContext","createElement"]);return null==n?null:(Object.keys(t.propTypes).forEach(function(e){return delete d[e]}),c.default.createElement(u,s({},d,{history:this.history,createElement:h,location:n,routes:r,params:a,components:o})))},t}(u.Component);x.propTypes={history:_,children:y.routes,routes:y.routes,RoutingContext:b.isRequired,createElement:b,onError:b,onUpdate:b,parseQueryString:b,stringifyQuery:b},x.defaultProps={RoutingContext:m.default},t.default=x,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(61)},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(34);t.default=i,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(61);t.default=i,e.exports=t.default},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(34);t.default=r,e.exports=t.default},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(34);t.default=l,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){var n=e.routes,r=e.location,i=e.parseQueryString,o=e.stringifyQuery,l=e.basename;r?void 0:s.default(!1);var u=m({routes:d.createRoutes(n),parseQueryString:i,stringifyQuery:o,basename:l});"string"==typeof r&&(r=u.createLocation(r)),u.match(r,function(e,n,r){t(e,n,r&&a({},r,{history:u}))})}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(12),s=r(o),l=n(190),u=r(l),c=n(191),h=r(c),d=n(18),f=n(62),p=r(f),m=p.default(h.default(u.default));t.default=i,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t,n){e.childRoutes?n(null,e.childRoutes):e.getChildRoutes?e.getChildRoutes(t,function(e,t){n(e,!e&&f.createRoutes(t))}):n()}function a(e,t,n){e.indexRoute?n(null,e.indexRoute):e.getIndexRoute?e.getIndexRoute(t,function(e,t){n(e,!e&&f.createRoutes(t)[0])}):e.childRoutes?!function(){var r=e.childRoutes.filter(function(e){return!e.hasOwnProperty("path")});h.loopAsync(r.length,function(e,n,i){a(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 o(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 s(e,t){return o({},e,t)}function l(e,t,n,r,o,l){var c=e.path||"";if("/"===c.charAt(0)&&(n=t.pathname,r=[],o=[]),null!==n){var h=d.matchPattern(c,n);if(n=h.remainingPathname,r=[].concat(r,h.paramNames),o=[].concat(o,h.paramValues),""===n&&e.path){var f=function(){var n={routes:[e],params:s(r,o)};return a(e,t,function(e,t){if(e)l(e);else{if(Array.isArray(t)){var r;(r=n.routes).push.apply(r,t)}else t&&n.routes.push(t);l(null,n)}}),{v:void 0}}();if("object"==typeof f)return f.v}}null!=n||e.childRoutes?i(e,t,function(i,a){i?l(i):a?u(a,t,function(t,n){t?l(t):n?(n.routes.unshift(e),l(null,n)):l()},n,r,o):l()}):l()}function u(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(){h.loopAsync(e.length,function(n,o,s){l(e[n],t,r,i,a,function(e,t){e||t?s(e,t):o()})},n)}()}t.__esModule=!0;var c=n(10),h=(r(c),n(61)),d=n(34),f=n(18);t.default=u,e.exports=t.default},function(e,t,n){"use strict";function r(e){var t=/[=:]/g,n={"=":"=0",":":"=2"},r=(""+e).replace(t,function(e){return n[e]});return"$"+r}function i(e){var t=/(=0|=2)/g,n={"=0":"=","=2":":"},r="."===e[0]&&"$"===e[1]?e.substring(2):e.substring(1);return(""+r).replace(t,function(e){return n[e]})}var a={escape:r,unescape:i};e.exports=a},function(e,t,n){"use strict";var r=n(27),i=(n(1),function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)}),a=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},o=function(e,t,n){var r=this;if(r.instancePool.length){var i=r.instancePool.pop();return r.call(i,e,t,n),i}return new r(e,t,n)},s=function(e,t,n,r){var i=this;if(i.instancePool.length){var a=i.instancePool.pop();return i.call(a,e,t,n,r),a}return new i(e,t,n,r)},l=function(e){var t=this;e instanceof t?void 0:r("25"),e.destructor(),t.instancePool.length<t.poolSize&&t.instancePool.push(e)},u=10,c=i,h=function(e,t){var n=e;return n.instancePool=[],n.getPooled=t||c,n.poolSize||(n.poolSize=u),n.release=l,n},d={addPoolingTo:h,oneArgumentPooler:i,twoArgumentPooler:a,threeArgumentPooler:o,fourArgumentPooler:s};e.exports=d},function(e,t,n){"use strict";function r(e){return(""+e).replace(b,"$&/")}function i(e,t){this.func=e,this.context=t,this.count=0}function a(e,t,n){var r=e.func,i=e.context;r.call(i,t,e.count++)}function o(e,t,n){if(null==e)return e;var r=i.getPooled(t,n);v(e,a,r),i.release(r)}function s(e,t,n,r){this.result=e,this.keyPrefix=t,this.func=n,this.context=r,this.count=0}function l(e,t,n){var i=e.result,a=e.keyPrefix,o=e.func,s=e.context,l=o.call(s,t,e.count++);Array.isArray(l)?u(l,i,n,g.thatReturnsArgument):null!=l&&(m.isValidElement(l)&&(l=m.cloneAndReplaceKey(l,a+(!l.key||t&&t.key===l.key?"":r(l.key)+"/")+n)),i.push(l))}function u(e,t,n,i,a){var o="";null!=n&&(o=r(n)+"/");var u=s.getPooled(t,o,i,a);v(e,l,u),s.release(u)}function c(e,t,n){if(null==e)return e;var r=[];return u(e,r,null,t,n),r}function h(e,t,n){return null}function d(e,t){return v(e,h,null)}function f(e){var t=[];return u(e,t,null,g.thatReturnsArgument),t}var p=n(275),m=n(26),g=n(11),v=n(284),y=p.twoArgumentPooler,w=p.fourArgumentPooler,b=/\/+/g;i.prototype.destructor=function(){this.func=null,this.context=null,this.count=0},p.addPoolingTo(i,y),s.prototype.destructor=function(){this.result=null,this.keyPrefix=null,this.func=null,this.context=null,this.count=0},p.addPoolingTo(s,w);var _={forEach:o,map:c,mapIntoWithKeyPrefixInternal:u,count:d,toArray:f};e.exports=_},function(e,t,n){"use strict";function r(e){return e}function i(e,t){var n=b.hasOwnProperty(t)?b[t]:null;x.hasOwnProperty(t)&&("OVERRIDE_BASE"!==n?d("73",t):void 0),e&&("DEFINE_MANY"!==n&&"DEFINE_MANY_MERGED"!==n?d("74",t):void 0)}function a(e,t){if(t){"function"==typeof t?d("75"):void 0,m.isValidElement(t)?d("76"):void 0;var n=e.prototype,r=n.__reactAutoBindPairs;t.hasOwnProperty(y)&&_.mixins(e,t.mixins);for(var a in t)if(t.hasOwnProperty(a)&&a!==y){var o=t[a],s=n.hasOwnProperty(a);if(i(s,a),_.hasOwnProperty(a))_[a](e,o);else{var c=b.hasOwnProperty(a),h="function"==typeof o,f=h&&!c&&!s&&t.autobind!==!1;if(f)r.push(a,o),n[a]=o;else if(s){var p=b[a];!c||"DEFINE_MANY_MERGED"!==p&&"DEFINE_MANY"!==p?d("77",p,a):void 0,"DEFINE_MANY_MERGED"===p?n[a]=l(n[a],o):"DEFINE_MANY"===p&&(n[a]=u(n[a],o))}else n[a]=o}}}else;}function o(e,t){if(t)for(var n in t){var r=t[n];if(t.hasOwnProperty(n)){var i=n in _;i?d("78",n):void 0;var a=n in e;a?d("79",n):void 0,e[n]=r}}}function s(e,t){e&&t&&"object"==typeof e&&"object"==typeof t?void 0:d("80");for(var n in t)t.hasOwnProperty(n)&&(void 0!==e[n]?d("81",n):void 0,e[n]=t[n]);return e}function l(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 s(i,n),s(i,r),i}}function u(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}function c(e,t){var n=t.bind(e);return n}function h(e){for(var t=e.__reactAutoBindPairs,n=0;n<t.length;n+=2){var r=t[n],i=t[n+1];e[r]=c(e,i)}}var d=n(27),f=n(5),p=n(63),m=n(26),g=(n(100),n(64)),v=n(28),y=(n(1),n(2),"mixins"),w=[],b={mixins:"DEFINE_MANY",statics:"DEFINE_MANY",propTypes:"DEFINE_MANY",contextTypes:"DEFINE_MANY",childContextTypes:"DEFINE_MANY",getDefaultProps:"DEFINE_MANY_MERGED",getInitialState:"DEFINE_MANY_MERGED",getChildContext:"DEFINE_MANY_MERGED",render:"DEFINE_ONCE",componentWillMount:"DEFINE_MANY",componentDidMount:"DEFINE_MANY",componentWillReceiveProps:"DEFINE_MANY",shouldComponentUpdate:"DEFINE_ONCE",componentWillUpdate:"DEFINE_MANY",componentDidUpdate:"DEFINE_MANY",componentWillUnmount:"DEFINE_MANY",updateComponent:"OVERRIDE_BASE"},_={displayName:function(e,t){e.displayName=t},mixins:function(e,t){if(t)for(var n=0;n<t.length;n++)a(e,t[n])},childContextTypes:function(e,t){e.childContextTypes=f({},e.childContextTypes,t);
 },contextTypes:function(e,t){e.contextTypes=f({},e.contextTypes,t)},getDefaultProps:function(e,t){e.getDefaultProps?e.getDefaultProps=l(e.getDefaultProps,t):e.getDefaultProps=t},propTypes:function(e,t){e.propTypes=f({},e.propTypes,t)},statics:function(e,t){o(e,t)},autobind:function(){}},x={replaceState:function(e,t){this.updater.enqueueReplaceState(this,e),t&&this.updater.enqueueCallback(this,t,"replaceState")},isMounted:function(){return this.updater.isMounted(this)}},E=function(){};f(E.prototype,p.prototype,x);var C={createClass:function(e){var t=r(function(e,n,r){this.__reactAutoBindPairs.length&&h(this),this.props=e,this.context=n,this.refs=v,this.updater=r||g,this.state=null;var i=this.getInitialState?this.getInitialState():null;"object"!=typeof i||Array.isArray(i)?d("82",t.displayName||"ReactCompositeComponent"):void 0,this.state=i});t.prototype=new E,t.prototype.constructor=t,t.prototype.__reactAutoBindPairs=[],w.forEach(a.bind(null,t)),a(t,e),t.getDefaultProps&&(t.defaultProps=t.getDefaultProps()),t.prototype.render?void 0:d("83");for(var n in b)t.prototype[n]||(t.prototype[n]=null);return t},injection:{injectMixin:function(e){w.push(e)}}};e.exports=C},function(e,t,n){"use strict";var r=n(26),i=r.createFactory,a={a:i("a"),abbr:i("abbr"),address:i("address"),area:i("area"),article:i("article"),aside:i("aside"),audio:i("audio"),b:i("b"),base:i("base"),bdi:i("bdi"),bdo:i("bdo"),big:i("big"),blockquote:i("blockquote"),body:i("body"),br:i("br"),button:i("button"),canvas:i("canvas"),caption:i("caption"),cite:i("cite"),code:i("code"),col:i("col"),colgroup:i("colgroup"),data:i("data"),datalist:i("datalist"),dd:i("dd"),del:i("del"),details:i("details"),dfn:i("dfn"),dialog:i("dialog"),div:i("div"),dl:i("dl"),dt:i("dt"),em:i("em"),embed:i("embed"),fieldset:i("fieldset"),figcaption:i("figcaption"),figure:i("figure"),footer:i("footer"),form:i("form"),h1:i("h1"),h2:i("h2"),h3:i("h3"),h4:i("h4"),h5:i("h5"),h6:i("h6"),head:i("head"),header:i("header"),hgroup:i("hgroup"),hr:i("hr"),html:i("html"),i:i("i"),iframe:i("iframe"),img:i("img"),input:i("input"),ins:i("ins"),kbd:i("kbd"),keygen:i("keygen"),label:i("label"),legend:i("legend"),li:i("li"),link:i("link"),main:i("main"),map:i("map"),mark:i("mark"),menu:i("menu"),menuitem:i("menuitem"),meta:i("meta"),meter:i("meter"),nav:i("nav"),noscript:i("noscript"),object:i("object"),ol:i("ol"),optgroup:i("optgroup"),option:i("option"),output:i("output"),p:i("p"),param:i("param"),picture:i("picture"),pre:i("pre"),progress:i("progress"),q:i("q"),rp:i("rp"),rt:i("rt"),ruby:i("ruby"),s:i("s"),samp:i("samp"),script:i("script"),section:i("section"),select:i("select"),small:i("small"),source:i("source"),span:i("span"),strong:i("strong"),style:i("style"),sub:i("sub"),summary:i("summary"),sup:i("sup"),table:i("table"),tbody:i("tbody"),td:i("td"),textarea:i("textarea"),tfoot:i("tfoot"),th:i("th"),thead:i("thead"),time:i("time"),title:i("title"),tr:i("tr"),track:i("track"),u:i("u"),ul:i("ul"),var:i("var"),video:i("video"),wbr:i("wbr"),circle:i("circle"),clipPath:i("clipPath"),defs:i("defs"),ellipse:i("ellipse"),g:i("g"),image:i("image"),line:i("line"),linearGradient:i("linearGradient"),mask:i("mask"),path:i("path"),pattern:i("pattern"),polygon:i("polygon"),polyline:i("polyline"),radialGradient:i("radialGradient"),rect:i("rect"),stop:i("stop"),svg:i("svg"),text:i("text"),tspan:i("tspan")};e.exports=a},function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function i(e){this.message=e,this.stack=""}function a(e){function t(t,n,r,a,o,s,l){a=a||S,s=s||r;if(null==n[r]){var u=x[o];return t?new i(null===n[r]?"The "+u+" `"+s+"` is marked as required "+("in `"+a+"`, but its value is `null`."):"The "+u+" `"+s+"` is marked as required in "+("`"+a+"`, but its value is `undefined`.")):null}return e(n,r,a,o,s)}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function o(e){function t(t,n,r,a,o,s){var l=t[n],u=y(l);if(u!==e){var c=x[a],h=w(l);return new i("Invalid "+c+" `"+o+"` of type "+("`"+h+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return a(t)}function s(){return a(C.thatReturns(null))}function l(e){function t(t,n,r,a,o){if("function"!=typeof e)return new i("Property `"+o+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var s=t[n];if(!Array.isArray(s)){var l=x[a],u=y(s);return new i("Invalid "+l+" `"+o+"` of type "+("`"+u+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<s.length;c++){var h=e(s,c,r,a,o+"["+c+"]",E);if(h instanceof Error)return h}return null}return a(t)}function u(){function e(e,t,n,r,a){var o=e[t];if(!_.isValidElement(o)){var s=x[r],l=y(o);return new i("Invalid "+s+" `"+a+"` of type "+("`"+l+"` supplied to `"+n+"`, expected a single ReactElement."))}return null}return a(e)}function c(e){function t(t,n,r,a,o){if(!(t[n]instanceof e)){var s=x[a],l=e.name||S,u=b(t[n]);return new i("Invalid "+s+" `"+o+"` of type "+("`"+u+"` supplied to `"+r+"`, expected ")+("instance of `"+l+"`."))}return null}return a(t)}function h(e){function t(t,n,a,o,s){for(var l=t[n],u=0;u<e.length;u++)if(r(l,e[u]))return null;var c=x[o],h=JSON.stringify(e);return new i("Invalid "+c+" `"+s+"` of value `"+l+"` "+("supplied to `"+a+"`, expected one of "+h+"."))}return Array.isArray(e)?a(t):C.thatReturnsNull}function d(e){function t(t,n,r,a,o){if("function"!=typeof e)return new i("Property `"+o+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var s=t[n],l=y(s);if("object"!==l){var u=x[a];return new i("Invalid "+u+" `"+o+"` of type "+("`"+l+"` supplied to `"+r+"`, expected an object."))}for(var c in s)if(s.hasOwnProperty(c)){var h=e(s,c,r,a,o+"."+c,E);if(h instanceof Error)return h}return null}return a(t)}function f(e){function t(t,n,r,a,o){for(var s=0;s<e.length;s++){var l=e[s];if(null==l(t,n,r,a,o,E))return null}var u=x[a];return new i("Invalid "+u+" `"+o+"` supplied to "+("`"+r+"`."))}return Array.isArray(e)?a(t):C.thatReturnsNull}function p(){function e(e,t,n,r,a){if(!g(e[t])){var o=x[r];return new i("Invalid "+o+" `"+a+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return null}return a(e)}function m(e){function t(t,n,r,a,o){var s=t[n],l=y(s);if("object"!==l){var u=x[a];return new i("Invalid "+u+" `"+o+"` of type `"+l+"` "+("supplied to `"+r+"`, expected `object`."))}for(var c in e){var h=e[c];if(h){var d=h(s,c,r,a,o+"."+c,E);if(d)return d}}return null}return a(t)}function g(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(g);if(null===e||_.isValidElement(e))return!0;var t=k(e);if(!t)return!1;var n,r=t.call(e);if(t!==e.entries){for(;!(n=r.next()).done;)if(!g(n.value))return!1}else for(;!(n=r.next()).done;){var i=n.value;if(i&&!g(i[1]))return!1}return!0;default:return!1}}function v(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function y(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":v(t,e)?"symbol":t}function w(e){var t=y(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function b(e){return e.constructor&&e.constructor.name?e.constructor.name:S}var _=n(26),x=n(100),E=n(280),C=n(11),k=n(102),S=(n(2),"<<anonymous>>"),P={array:o("array"),bool:o("boolean"),func:o("function"),number:o("number"),object:o("object"),string:o("string"),symbol:o("symbol"),any:s(),arrayOf:l,element:u(),instanceOf:c,node:p(),objectOf:d,oneOf:h,oneOfType:f,shape:m};i.prototype=Error.prototype,e.exports=P},function(e,t,n){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=l,this.updater=n||s}function i(){}var a=n(5),o=n(63),s=n(64),l=n(28);i.prototype=o.prototype,r.prototype=new i,r.prototype.constructor=r,a(r.prototype,o.prototype),r.prototype.isPureReactComponent=!0,e.exports=r},function(e,t,n){"use strict";e.exports="15.4.2"},function(e,t,n){"use strict";function r(e){return a.isValidElement(e)?void 0:i("143"),e}var i=n(27),a=n(26);n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?u.escape(e.key):t.toString(36)}function i(e,t,n,a){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||"object"===d&&e.$$typeof===s)return n(a,e,""===t?c+r(e,0):t),1;var f,p,m=0,g=""===t?c:t+h;if(Array.isArray(e))for(var v=0;v<e.length;v++)f=e[v],p=g+r(f,v),m+=i(f,p,n,a);else{var y=l(e);if(y){var w,b=y.call(e);if(y!==e.entries)for(var _=0;!(w=b.next()).done;)f=w.value,p=g+r(f,_++),m+=i(f,p,n,a);else for(;!(w=b.next()).done;){var x=w.value;x&&(f=x[1],p=g+u.escape(x[0])+h+r(f,0),m+=i(f,p,n,a))}}else if("object"===d){var E="",C=String(e);o("31","[object Object]"===C?"object with keys {"+Object.keys(e).join(", ")+"}":C,E)}}return m}function a(e,t,n){return null==e?0:i(e,"",t,n)}var o=n(27),s=(n(17),n(99)),l=n(102),u=(n(1),n(274)),c=(n(2),"."),h=":";e.exports=a},function(e,t,n){"use strict";e.exports=function(e){return encodeURIComponent(e).replace(/[!'()*]/g,function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})}},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t,n){e.exports=n(103)}]);
\ No newline at end of file
diff --git a/components/sections/explanation/content.en-GB.md b/components/sections/explanation/content.en-GB.md
index b5bce927..54b6a4cd 100644
--- a/components/sections/explanation/content.en-GB.md
+++ b/components/sections/explanation/content.en-GB.md
@@ -127,7 +127,7 @@ binomial(n,k):
     s = lut.length
     nextRow = new array(size=s+1)
     nextRow[0] = 1
-    for(i=1, prev=s-1; i&ltprev; i++):
+    for(i=1, prev=s-1; i<prev; i++):
       nextRow[i] = lut[prev][i-1] + lut[prev][i]
     nextRow[s] = 1
     lut.add(nextRow)
diff --git a/components/sections/explanation/content.zh-CN.md b/components/sections/explanation/content.zh-CN.md
index 562d6162..11962b30 100644
--- a/components/sections/explanation/content.zh-CN.md
+++ b/components/sections/explanation/content.zh-CN.md
@@ -127,7 +127,7 @@ binomial(n,k):
     s = lut.length
     nextRow = new array(size=s+1)
     nextRow[0] = 1
-    for(i=1, prev=s-1; i&ltprev; i++):
+    for(i=1, prev=s-1; i<prev; i++):
       nextRow[i] = lut[prev][i-1] + lut[prev][i]
     nextRow[s] = 1
     lut.add(nextRow)
@@ -163,6 +163,7 @@ function Bezier(3,t):
 ```
 
 现在我们知道如何代用码实现基本方程了。很好。
+
 </div>
 
 既然我们已经知道基本函数的样子，是时候添加一些魔法来使贝塞尔曲线变得特殊了：控制点。
diff --git a/lib/pre-loader.js b/lib/pre-loader.js
index 00505731..53bb2fe0 100644
--- a/lib/pre-loader.js
+++ b/lib/pre-loader.js
@@ -12,12 +12,12 @@ var options = {
     var replaced = pre
     .replace(options.start,'')
     .replace(options.end,'')
-    .replace(/&/g,'&amp;')
-    .replace(/</g,'&lt;')
-    .replace(/>/g,'&gt;')
-    .replace(/([{}])/g,"{'$1'}")
-    .replace(/\n/g,"{'\\n'}");
-    return options.start + replaced + options.end;
+    // ...sigh...
+    .replace(/&amp;/g,'&')
+    .replace(/&lt;/g,'<')
+    .replace(/&gt;/g,'>')
+    // generate a template literal, so JSX doesn't fuck with.
+    return options.start + '{`' + replaced + '`}' + options.end;
   }
 };
 
diff --git a/locales/en-GB/content.js b/locales/en-GB/content.js
index 00969355..e003a9fa 100644
--- a/locales/en-GB/content.js
+++ b/locales/en-GB/content.js
@@ -159,7 +159,7 @@ binomial(n,k):
     s = lut.length
     nextRow = new array(size=s+1)
     nextRow[0] = 1
-    for(i=1, prev=s-1; i&ltprev; i++):
+    for(i=1, prev=s-1; i&lt;prev; i++):
       nextRow[i] = lut[prev][i-1] + lut[prev][i]
     nextRow[s] = 1
     lut.add(nextRow)
diff --git a/locales/ja-JP/content.js b/locales/ja-JP/content.js
index eaccded3..7ce9d729 100644
--- a/locales/ja-JP/content.js
+++ b/locales/ja-JP/content.js
@@ -159,7 +159,7 @@ binomial(n,k):
     s = lut.length
     nextRow = new array(size=s+1)
     nextRow[0] = 1
-    for(i=1, prev=s-1; i&ltprev; i++):
+    for(i=1, prev=s-1; i&lt;prev; i++):
       nextRow[i] = lut[prev][i-1] + lut[prev][i]
     nextRow[s] = 1
     lut.add(nextRow)
diff --git a/locales/zh-CN/content.js b/locales/zh-CN/content.js
index 2d5af423..8b0ecf13 100644
--- a/locales/zh-CN/content.js
+++ b/locales/zh-CN/content.js
@@ -71,48 +71,48 @@ Given \left (
 
   },
   "explanation": {
-    "locale": "en-GB",
-    "title": "The mathematics of Bézier curves",
+    "locale": "zh-CN",
+    "title": "贝塞尔曲线的数学原理",
     "getContent": function(handler) { return <section>
-<SectionHeader name="explanation" title="The mathematics of Bézier curves" number="3"/>
-<p>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 <strong>single</strong> 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 <i>x</i>, to some other value, using some kind of number manipulation:</p>
+<SectionHeader name="explanation" title="贝塞尔曲线的数学原理" number="3"/>
+<p>贝塞尔曲线是“参数”方程的一种形式。从数学上讲，参数方程作弊了：“方程”实际上是一个从输入到<strong>唯一</strong>输出的、良好定义的映射关系。几个输入进来，一个输出返回。改变输入变量，还是只有一个输出值。参数方程在这里作弊了。它们基本上干了这么件事，“好吧，我们想要更多的输出值，所以我们用了多个方程”。举个例子：假如我们有一个方程，通过一些计算，将假设为<i>x</i>的一些值映射到另外的值:</p>
 \[
   f(x) = \cos(x)
-\]<p>The notation <i>f(x)</i> is the standard way to show that it's a function (by convention called <i>f</i> if we're only listing one) and its output changes based on one variable (in this case, <i>x</i>). Change <i>x</i>, and the output for <i>f(x)</i> changes.</p>
-<p>So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:</p>
+\]<p>记号<i>f(x)</i>是表示函数的标准方式（为了方便起见，如果只有一个的话，我们称函数为<i>f</i>），函数的输出根据一个变量（本例中是<i>x</i>）变化。改变<i>x</i>，<i>f(x)</i>的输出值也会变。</p>
+<p>到目前没什么问题。现在，让我们来看一下参数方程，以及它们是怎么作弊的。我们取以下两个方程：</p>
 \[
 \begin{matrix}
   f(a) = \cos(a) \\
   f(b) = \sin(b)
 \end{matrix}
-\]<p>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 <i>a</i>, we're not going to change the output value for <i>f(b)</i>, since <i>a</i> 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:</p>
+\]<p>这俩方程没什么让人印象深刻的，只不过是正弦函数和余弦函数，但正如你所见，输入变量有两个不同的名字。如果我们改变了<i>a</i>的值，<i>f(b)</i>的输出不会有变化，因为这个方程没有用到<i>a</i>。参数方程通过改变这点来作弊。在参数方程中，所有不同的方程共用一个变量，如下所示：</p>
 \[
 \left \{ \begin{matrix}
   f_a(t) = \cos(t) \\
   f_b(t) = \sin(t)
 \end{matrix} \right.
-\]<p>Multiple functions, but only one variable. If we change the value for <i>t</i>, we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>. You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what we usually mean with them for parametric curves, things might be a lot more obvious:</p>
+\]<p>多个方程，但只有一个变量。如果我们改变了<i>t</i>的值，<i>f<sub>a</sub>(t)</i>和<i>f<sub>b</sub>(t)</i>的输出都会发生变化。你可能会好奇这有什么用，答案其实很简单：对于参数曲线，如果我们用常用的标记来替代<i>f<sub>a</sub>(t)</i>和<i>f<sub>b</sub>(t)</i>，看起来就有些明朗了：</p>
 \[
 \left \{ \begin{matrix}
   x = \cos(t) \\
   y = \sin(t)
 \end{matrix} \right.
-\]<p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p>
-<p>So, parametric curves don't define a <i>y</i> coordinate in terms of an <i>x</i> coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of <i>t</i>, then with every change we get <strong>two</strong> values, which we can use as (<i>x</i>,<i>y</i>) coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range <i>t</i> from negative to positive infinity, and the resulting (<i>x</i>,<i>y</i>) coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for <i>t</i> from 0 to 5, we get this (use your up and down arrow keys to change the plot end value):</p>
-<Graphic preset="empty" title="A (partial) circle: x=sin(t), y=cos(t)" static={true} setup={handler.setup} draw={handler.draw} onKeyDown={handler.props.onKeyDown}/>
-<p>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 <i>x</i> and <i>y</i> values use different functions (one uses a sine, the other a cosine), Bézier curves use the "binomial polynomial" for both <i>x</i> and <i>y</i>. So what are binomial polynomials?</p>
-<p>You may remember polynomials from high school, where they're those sums that look like:</p>
+\]<p>好了，通过一些神秘的<i>t</i>值将<i>x</i>/<i>y</i>坐标系联系起来。</p>
+<p>所以，参数曲线不像一般函数那样，通过<i>x</i>坐标来定义<i>y</i>坐标，而是用一个“控制”变量将它们连接起来。如果改变<i>t</i>的值，每次变化时我们都能得到<strong>两个</strong>值，这可以作为图形中的(<i>x</i>,<i>y</i>)坐标。比如上面的方程组，生成位于一个圆上的点：我们可以使<i>t</i>在正负极值间变化，得到的输出(<i>x</i>,<i>y</i>)都会位于一个以原点(0,0)为中心且半径为1的圆上。如果我们画出<i>t</i>从0到5时的值，将得到如下图像（你可以用上下键来改变画的点和值）：</p>
+<Graphic preset="empty" title="(一部分的)圆: x=sin(t), y=cos(t)" static={true} setup={handler.setup} draw={handler.draw} onKeyDown={handler.props.onKeyDown}/>
+<p>贝塞尔曲线是（一种）参数方程，并在它的多个维度上使用相同的基本方程。在上述的例子中<i>x</i>值和<i>y</i>值使用了不同的方程，与此不同的是，贝塞尔曲线的<i>x</i>和<i>y</i>都用了“二项多项式”。那什么是二项多项式呢？</p>
+<p>你可能记得高中所学的多项式，看起来像这样：</p>
 \[
   f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
-\]<p>If they have a highest order term <i>x³</i> they're called "cubic" polynomials, if it's <i>x²</i> it's a "square" polynomial, if it's just <i>x</i> it's a line (and if there aren't even any terms with <i>x</i> it's not a polynomial!)</p>
-<p>Bézier curves are polynomials of <i>t</i>, rather than <i>x</i>, with the value for <i>t</i> fixed being between 0 and 1, with coefficients <i>a</i>, <i>b</i> etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values:</p>
+\]<p>如果它的最高次项是<i>x³</i>就称为“三次”多项式，如果最高次项是<i>x²</i>，称为“二次”多项式，如果只含有<i>x</i>的项，它就是一条线（不过不含任何<i>x</i>的项它就不是一个多项式！）</p>
+<p>贝塞尔曲线不是x的多项式，它是<i>t</i>的多项式，<i>t</i>的值被限制在0和1之间，并且含有<i>a</i>，<i>b</i>等参数。它采用了二次项的形式，听起来很神奇但实际上就是混合不同值的简单描述：</p>
 \[
 \begin{align*}
   linear &= (1-t) + t \\
   square &= (1-t)^2 + 2 \cdot (1-t) \cdot t + t^2 \\
   cubic &= (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
 \end{align*}
-\]<p>I know what you're thinking: that doesn't look too simple, but if we remove <i>t</i> and add in "times one", things suddenly look pretty easy. Check out these binomial terms:</p>
+\]<p>我明白你在想什么：这看起来并不简单，但如果我们拿掉<i>t</i>并让系数乘以1，事情就会立马简单很多，看看这些二次项：</p>
 \[
 \begin{align*}
   linear &= \hskip{2.5em} 1 + 1 \\
@@ -120,33 +120,33 @@ Given \left (
   cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
   hypercubic &= 1 + 4 + 6 + 4 + 1
 \end{align*}
-\]<p>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 <i>that's</i> easy to remember.</p>
-<p>There's an equally simple way to figure out how the polynomial terms work: if we rename <i>(1-t)</i> to <i>a</i> and <i>t</i> to <i>b</i>, and remove the weights for a moment, we get this:</p>
+\]<p>需要注意的是，2与1+1相同，3相当于2+1或1+2，6相当于3+3...如你所见，每次我们增加一个维度，只要简单地将头尾置为1，中间的操作都是“将上面的两个数字相加”。现在就能很容易地记住了。</p>
+<p>还有一个简单的办法可以弄清参数项怎么工作的：如果我们将<i>(1-t)</i>重命名为<i>a</i>，将<i>t</i>重命名为<i>b</i>，暂时把权重删掉，可以得到这个：</p>
 \[
 \begin{align*}
   linear &= BLUE[a] + RED[b] \\
   square &= BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot RED[b] + RED[b] \cdot RED[b] \\
   cubic &= BLUE[a] \cdot BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot BLUE[a] \cdot RED[b] + BLUE[a] \cdot RED[b] \cdot RED[b] + RED[b] \cdot RED[b] \cdot RED[b]\\
 \end{align*}
-\]<p>It's basically just a sum of "every combination of <i>a</i> and <i>b</i>", progressively replacing <i>a</i>'s with <i>b</i>'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:</p>
+\]<p>基本上它就是“每个<i>a</i>和<i>b</i>结合项”的和，在每个加号后面逐步的将<i>a</i>换成<i>b</i>。因此这也很简单。现在你已经知道了二次多项式，为了叙述的完整性，我将给出一般方程：</p>
 \[
   Bézier(n,t) = \sum_{i=0}^{n}
                 \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
                 \cdot\
                 \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
-\]<p>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 ...=&lt;value&gt; and ending at the value listed on top of the Σ).</p>
+\]<p>这就是贝塞尔曲线完整的描述。在这个函数中的Σ表示了这是一系列的加法（用Σ下面的变量，从...=&lt;值&gt;开始，直到Σ上面的数字结束）。</p>
 
 <div className="howtocode">
-<h3 id="how-to-implement-the-basis-function">How to implement the basis function</h3>
-<p>We could naively implement the basis function as a mathematical construct, using the function as our guide, like this:</p>
+<h3 id="-">如何实现基本方程</h3>
+<p>我们可以用之前说过的方程，来简单地实现基本方程作为数学构造，如下：</p>
 <pre>function Bezier(n,t):
   sum = 0
   for(k=0; k&lt;n; k++):
     sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)
   return sum
 </pre>
-<p>I say we could, because we're not going to: the factorial function is <em>incredibly</em> 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.</p>
-<p>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:</p>
+<p>我说我们“可以用”是因为我们不会这么去做：因为阶乘函数开销<em>非常大</em>。并且，正如我们在上面所看到的，我们不用阶乘也能够很容易地构造出帕斯卡三角形：一开始是[1]，接着是[1,2,1],然后是[1,3,3,1]等等。下一行都比上一行多一个数，首尾都为1，中间的数字是上一行两边元素的和。</p>
+<p>我们可以很快的生成这个列表，并在之后使用这个查找表而不用再计算二次多项式的系数：</p>
 <pre>lut = [      [1],           // n=0
             [1,1],          // n=1
            [1,2,1],         // n=2
@@ -160,20 +160,20 @@ binomial(n,k):
     s = lut.length
     nextRow = new array(size=s+1)
     nextRow[0] = 1
-    for(i=1, prev=s-1; i&ltprev; i++):
+    for(i=1, prev=s-1; i&lt;prev; i++):
       nextRow[i] = lut[prev][i-1] + lut[prev][i]
     nextRow[s] = 1
     lut.add(nextRow)
   return lut[n][k]
 </pre>
-<p>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:</p>
+<p>这里做了些什么？首先，我们声明了一个足够大的查找表。然后，我们声明了一个函数来获取我们想要的值，并且确保当一个请求的n/k对不在LUT查找表中时，先将表扩大。我们的基本函数如下所示：</p>
 <pre>function Bezier(n,t):
   sum = 0
   for(k=0; k&lt;=n; k++):
     sum += binomial(n,k) * (1-t)^(n-k) * t^(k)
   return sum
 </pre>
-<p>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:</p>
+<p>完美。当然我们可以进一步优化。为了大部分的计算机图形学目的，我们不需要任意的曲线。我们需要二次曲线和三次曲线（实际上这篇文章没有涉及任意次的曲线，因此你会在其他地方看到与这些类似的代码），这说明我们可以彻底简化代码:</p>
 <pre>function Bezier(2,t):
   t2 = t * t
   mt = 1-t
@@ -188,9 +188,9 @@ function Bezier(3,t):
   mt3 = mt2 * mt
   return mt3 + 3*mt2*t + 3*mt*t2 + t3
 </pre>
-<p>And now we know how to program the basis function. Exellent.</p>
+<p>现在我们知道如何代用码实现基本方程了。很好。</p>
 </div>
-<p>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.</p>
+<p>既然我们已经知道基本函数的样子，是时候添加一些魔法来使贝塞尔曲线变得特殊了：控制点。</p>
 </section>; }
 
   },
diff --git a/make-locales.js b/make-locales.js
index ba93c496..68184cf8 100644
--- a/make-locales.js
+++ b/make-locales.js
@@ -48,6 +48,23 @@ function chunkGraphicJSX(data, chunks, chunkMore) {
   }
 }
 
+/**
+ *
+ */
+function chunkDivEnds(data, chunks, chunkMore) {
+  var next = chunkMore ? chunkMore[0] : false,
+      otherChunkers = chunkMore ? chunkMore.slice(1) : false;
+
+  var splt = data.split('</div>');
+  var dlen = splt.length;
+  splt.forEach( function(segment, pos) {
+    performChunking(segment, chunks, next, otherChunkers);
+    if (pos < dlen-1) {
+      chunks.push({ convert: false, type: '</div>', s:-1, e:-1, data: '</div>' });
+    }
+  });
+}
+
 
 /**
  *
@@ -87,8 +104,8 @@ function chunkDivs(data, chunks, chunkMore) {
       type += ".figure";
     } else {
       eod = data.indexOf(divEnd, div) + divEnd.length;
-    }
 
+    }
     chunks.push({ convert: false, type: type, s:div, e:eod, data: data.substring(div, eod) });
     p = eod;
   }
@@ -146,7 +163,7 @@ function performChunking(data, chunks, chunker, moreChunkers) {
  */
 function chunk(data) {
   var chunks = [];
-  performChunking(data, chunks, chunkLatex, [chunkDivs, chunkGraphicJSX]);
+  performChunking(data, chunks, chunkLatex, [chunkDivs, chunkDivEnds, chunkGraphicJSX]);
   return chunks;
 }