diff --git a/ja-JP/article.js b/ja-JP/article.js index 22f76a24..0aea794b 100644 --- a/ja-JP/article.js +++ b/ja-JP/article.js @@ -23,8 +23,8 @@ var t,n=this._components,i=n[0],r=i._stops,a=n[1],o=n[2];if(i._radial){var s=o.g if(_){i="svg"===e.nodeName.toLowerCase()&&e;for(var a in _.svgs)r||(i||(i=t("svg"),i.appendChild(e)),r=i.insertBefore(t("defs"),i.firstChild)),r.appendChild(_.svgs[a]);_=null}return n.asString?(new XMLSerializer).serializeToString(i):i}function w(e,t,n){var i=E[e._class],r=i&&i(e,t);if(r){var a=t.onExport;a&&(r=a(e,r,t)||r);var o=JSON.stringify(e._data);o&&"{}"!==o&&"null"!==o&&r.setAttribute("data-paper-data",o)}return r&&p(e,r,n)}function y(e){return e||(e={}),b=new h(e.precision),e}var b,_,E={Group:i,Layer:i,Raster:r,Path:a,Shape:o,CompoundPath:l,PlacedSymbol:c,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 i=this.layers,r=this.getView(),a=r.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=r._matrix;l.isIdentity()||(s=o.appendChild(t("g",n(l))));for(var c=0,u=i.length;c1||/z\S+/i.test(t)?new D(n):new O(n)}function u(n,i){var r,a=(e(n,"href",!0)||"").substring(1),o="radialgradient"===i;if(a)r=N[a].getGradient();else{for(var s=n.childNodes,l=[],c=0,u=s.length;c0&&this.weights;t.beginPath();var i=r(0,this.degree,e,this.knots,n);t.moveTo(i[0],i[1]);for(var a=.01;a<1;a+=.01)i=r(a,this.degree,e,this.knots,n),t.lineTo(i[0],i[1]);i=r(1,this.degree,e,this.knots,n),t.lineTo(i[0],i[1]),t.stroke(),t.closePath()},drawKnots:function(e){var t=this,n=this.knots,i=this.weights.length>0&&this.weights;n.forEach(function(a,o){if(!(on.length-1-t.degree)){var s=r(a,t.degree,e,n,i,!1,!0);t.circle(s[0],s[1],3)}})},drawNodes:function(e){var t,n=this;this.stroke(150),this.nodes.forEach(function(i,a){try{t=r(i,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,i=e.length,r=[],a=i-this.degree;for(n=1;n=0;n--)t.push(n);return t.reverse()},formNodes:function(e,t){var n,i,r,a=[this.degree,e.length-1-this.degree],o=[];for(i=0;ie[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 i=e.x-t,r=e.y-n,a=Math.sqrt(i*i+r*r);return a1&&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=s)return null;var u={type:t,min:n,max:r,step:a,value:l,onChange:function(t){var n=e.state.weights;n[c]=t.target.value,o&&c-1){n.update();break}}else this.curve&&this.curve.update&&this.curve.update()}this.props.onMouseMove&&this.props.onMouseMove(e,this),this.dragging&&this.props.onMouseDrag&&this.props.onMouseDrag(e,this),this.props.static||this.playing||!this.props.draw||this.props.draw(this,this.curve)},mouseUp:function(e){return this.down=!1,this.movingPoint?(this.movingPoint=!1,this.mp=!1,void(this.props.onMouseUp&&this.props.onMouseUp(e,this))):void(this.props.onMouseUp&&this.props.onMouseUp(e,this))},onClick:function(e){this.mx=e.offsetX,this.my=e.offsetY,!this.dragging&&this.props.onClick&&this.props.onClick(e,this)},onKeyUp:function(e){this.props.onKeyUp&&(this.props.onKeyUp(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyDown:function(e){this.props.onKeyDown&&(this.props.onKeyDown(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyPress:function(e){this.props.onKeyPress&&(this.props.onKeyPress(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},reset:function(){this.refs.canvas.width=this.refs.canvas.width,this.ctx.strokeStyle="black",this.ctx.lineWidth=1,this.ctx.fillStyle="none";var e=this.getPixelRatio();this.ctx.scale(e,e),this.offset={x:0,y:0},this.colorSeed=0},setSize:function(e,t){this.defaultWidth=e,this.defaultHeight=t;var n=this.refs.canvas;n.style.width=this.panelCount*e+"px",n.style.height=t+"px";var i=this.getPixelRatio();n.width=this.panelCount*e*i,n.height=t*i,this.ctx.scale(i,i)},setCurves:function(e){this.setCurve(e)},setCurve:function(e){var t=[];e=e instanceof Array?e:Array.from(arguments),e.forEach(function(e){t=t.concat(e.points)}),this.curve=1===e.length?e[0]:e,this.lpts=t},getPanelWidth:function(){return this.defaultWidth},getPanelHeight:function(){return this.defaultHeight},getDefaultQuadratic:function(){return new this.Bezier(70,250,20,110,250,60)},getDefaultCubic:function(){return new this.Bezier(120,160,35,200,220,260,220,40)},getDefault3DCubic:function(){return new this.Bezier(120,0,0,120,120,30,0,120,100,0,0,200)},getPixelRatio:function(){return window.devicePixelRatio||1},toImage:function(){var e=this.refs.canvas.toDataURL(),t=new Image;return t.src=e,t.devicePixelRatio=this.getPixelRatio(),t},setPanelCount:function(e){this.panelCount=e;var t=this.refs.canvas;t.width=e*this.defaultWidth*this.getPixelRatio(),t.style.width=e*this.defaultWidth+"px"},setOffset:function(e){this.offset=e},setColor:function(e){this.ctx.strokeStyle=e},getColor:function(){return this.ctx.strokeStyle||"black"},setWeight:function(e){this.ctx.lineWidth=e},noColor:function(e){this.ctx.strokeStyle="transparent"},setRandomColor:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,i=.34;this.colorSeed+=87,this.ctx.strokeStyle=r.hsl(t,n,i).alpha(e).css()},setRandomFill:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,i=.34;this.colorSeed+=87,this.ctx.fillStyle=r.hsl(t,n,i).alpha(e).css()},setFill:function(e){this.ctx.fillStyle=e},getFill:function(){return this.ctx.fillStyle||"transparent"},noFill:function(){this.ctx.fillStyle="transparent"},project:function(e,t,n){t=t||{x:0,y:0},n=n||-l/6;var i=e.y,r=-e.z,a=-e.x;return{x:t.x+i+a/2*s(n),y:t.y+r+a/2*o(n)}},projectXY:function(e,t,n){return c.project({x:e.x,y:e.y,z:0},t,n)},projectXZ:function(e,t,n){return c.project({x:e.x,y:0,z:e.z},t,n)},projectYZ:function(e,t,n){return c.project({x:0,y:e.y,z:e.z},t,n)},drawSkeleton:function(e,t,n){t=t||{x:0,y:0};var i=e.points;if(i.length>2){this.ctx.strokeStyle="lightgrey",this.drawLine(i[0],i[1],t);for(var r=i.length-2,a=1;a.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 i,r,a,o=e.drawHull(t,e.t),s=e.utils;6===o.length?(i=t.points[1],r=o[5],a=s.lli4(i,r,t.points[0],t.points[2]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[2])):10===o.length&&(i=o[5],r=o[9],a=s.lli4(i,r,t.points[0],t.points[3]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[3])),e.setColor("#00FF00"),e.drawLine(i,r),e.setColor("red"),e.drawLine(r,a),e.setColor("black"),e.drawCircle(a,3),e.setFill("black"),e.text("A",{x:10+i.x,y:i.y}),e.text("B (t = "+e.utils.round(e.t,2)+")",{x:10+r.x,y:r.y}),e.text("C",{x:10+a.x,y:a.y});var l=s.dist(i,r),c=s.dist(r,a),u=l/c;e.text("d1 (A-B): "+s.round(l,2)+", d2 (B-C): "+s.round(c,2)+", ratio (d1/d2): "+s.round(u,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,i=t-2*n;e.drawAxes(n,"t",0,1,"u",0,1),e.setColor("blue");var r=function(t){var r=e.u(t),a={x:n+t*i,y:n+r*i};return a};if(e.drawFunction(r),e.t){var a=e.u(e.t),o=e.utils.round(a,3),s=e.utils.round(1-a,3),l=r(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+i})}},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)}}},function(e,t,n){"use strict";var i=n(101),r=n(0);e.exports=r("abc",i)},function(e,t,n){"use strict";e.exports={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,i=t.p1.y,r=-Math.atan2(t.p2.y-i,t.p2.x-n),a=Math.cos,o=Math.sin,s=function(e){return{x:(e.x-n)*a(r)-(e.y-i)*o(r),y:(e.x-n)*o(r)+(e.y-i)*a(r)}};return e.map(s); },draw:function(e,t){e.setPanelCount(2),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.points,i={p1:n[0],p2:n[n.length-1]},r=this.align(n,i),a=new e.Bezier(r),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)}}},function(e,t,n){"use strict";var i=n(103),r=n(0);e.exports=r("aligning",i)},function(e,t,n){"use strict";var i=Math.atan2,r=Math.PI,a=2*r,o=Math.cos,s=Math.sin;e.exports={statics:{keyHandlingOptions:{propName:"error",values:{38:.1,40:-.1},controller:function(e){e.error<.1&&(e.error=.1)}}},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,l){var c,u=n.x-t.x,h=n.y-t.y,d=l.x-n.x,f=l.y-n.y,p=u*o(r/2)-h*s(r/2),m=u*s(r/2)+h*o(r/2),g=d*o(r/2)-f*s(r/2),v=d*s(r/2)+f*o(r/2),w=(t.x+n.x)/2,y=(t.y+n.y)/2,b=(n.x+l.x)/2,_=(n.y+l.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=i(t.y-S.y,t.x-S.x),N=i(n.y-S.y,n.x-S.x),M=i(l.y-S.y,l.x-S.x);return TN||N>M)&&(T+=a),T>M&&(c=M,M=T,T=c)):M-10&&(l.push({x:r*c,y:r*u}),e.drawLine({x:r*c,y:r*u},{x:r*o,y:r*s},a)),c=o,u=s;l.push({x:r*c,y:r*u}),e.text("Curve form has cusp →",{x:n/2-2*r,y:i/2+r/2.5}),e.setColor("#FF00FF"),e.setFill(e.getColor());var h=Math.sqrt;for(o=1;o>=0;o-=.005)l.push({x:r*c,y:r*u}),s=.5*(h(3)*h(4*o-o*o)-o),e.drawLine({x:r*c,y:r*u},{x:r*o,y:r*s},a),c=o,u=s;for(l.push({x:r*c,y:r*u}),e.text("← Curve forms a loop at t = 1",{x:n/2+r/4,y:i/2+r/1.5}),e.setColor("#3300FF"),e.setFill(e.getColor()),o=0;o>-n;o-=.01)l.push({x:r*c,y:r*u}),s=(-o*o+3*o)/3,e.drawLine({x:r*c,y:r*u},{x:r*o,y:r*s},a),c=o,u=s;l.push({x:r*c,y:r*u}),e.text("← Curve forms a loop at t = 0",{x:n/2-r+10,y:i/2-1.25*r}),e.setColor("transparent"),e.setFill("rgba(255,120,100,0.2)"),e.drawPath(l,a),l=[{x:-n/2,y:r},{x:n/2,y:r},{x:n/2,y:i},{x:-n/2,y:i}],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-r,y:i/2+1.75*r}),e.text("← Plain curve ↕",{x:n/2+r/2,y:i/6}),e.text("↕ Double inflection",{x:10,y:i/2-10}),e._map_image=e.toImage(),e._map_loaded=!0}}},function(e,t,n){"use strict";var i=n(121),r=n(0);e.exports=r("canonical",i)},function(e,t,n){"use strict";var i=n(0);e.exports=i("catmullconv")},function(e,t,n){"use strict";e.exports={statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},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,i){var r=.5;return[t,{x:t.x+(n.x-e.x)/(6*r),y:t.y+(n.y-e.y)/(6*r)},{x:n.x-(i.x-t.x)/(6*r),y:n.y-(i.y-t.y)/(6*r)},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(),i=e.getPanelHeight(),r={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,r),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:i},r),t.forEach(function(t,n){e.drawCircle(t,3,r)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,c=s.y-a.y,u=Math.sqrt(l*l+c*c);l/=u,c/=u,e.drawLine(a,s,r);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*c},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*c},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,r),e.drawLine(t[1],f,r),e.setColor("#666"),e.drawLine(f,h,r),e.drawLine(f,d,r),e.setFill("blue"),e.text("p0",h,{x:-20+r.x,y:r.y+2}),e.text("p4",d,{x:10+r.x,y:r.y+2}),e.setColor("red"),e.drawCircle(h,3,r),e.drawLine(o,h,r),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},r),e.setColor("#00FF00"),e.drawCircle(d,3,r),e.drawLine(o,d,r),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},r);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,r),e.drawCurve(m,r),r.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,r),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:i},r),e.drawCurve(p,r),e.drawCurve(m,r),e.drawPoints(p.points,r),e.drawPoints(m.points,r),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],r),e.drawLine(p.points[2],m.points[1],r),e.drawLine(m.points[2],m.points[3],r)}}},function(e,t,n){"use strict";var i=n(124),r=n(0),a=n(11);e.exports=a(r("catmullmoulding",i))},function(e,t,n){"use strict";var i=Math.sin,r=Math.cos;e.exports={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,a=e.offsetY-t.h/2,o=Math.atan2(a,n),s=t.curve.points,l=t.r,c=(r(o)-1)/i(o);s[1]={x:t.w/2+l*(r(o)-c*i(o)),y:t.w/2+l*(i(o)+c*r(o))},s[2]={x:t.w/2+t.r*r(o),y:t.w/2+t.r*i(o)},t.setCurve(new t.Bezier(s)),t.angle=o}}},function(e,t,n){"use strict";var i=n(126),r=n(0);e.exports=r("circles",i)},function(e,t,n){"use strict";var i=Math.sin,r=Math.cos,a=Math.tan;e.exports={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 i={x:(e.x+n.x)/2,y:(e.y+n.y)/2},r={x:t.x+(t.x-i.x)/3,y:t.y+(t.y-i.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},c={x:r.x+2*(s.x-r.x),y:r.y+2*(s.y-r.y)},u={x:r.x+2*(l.x-r.x),y:r.y+2*(l.y-r.y)},h={x:e.x+2*(c.x-e.x),y:e.y+2*(c.y-e.y)},d={x:n.x+2*(u.x-n.x),y:n.y+2*(u.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 a={x:e.w/2+e.r*r(e.angle/2),y:e.w/2+e.r*i(e.angle/2)},o=t.points[0],s=t.points[3],l=this.guessCurve(o,a,s),c=new e.Bezier([o,l[0],l[1],s]);e.setColor("rgb(140,140,255)"),e.drawLine(c.points[0],c.points[1]),e.drawLine(c.points[1],c.points[2]),e.drawLine(c.points[2],c.points[3]),e.setColor("blue"),e.drawCurve(c),e.drawCircle(c.points[1],3),e.drawCircle(c.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,o=e.offsetY-t.h/2;if(!(n>t.w/2)){var s=Math.atan2(o,n);s<0&&(s=2*Math.PI+s);var l=t.curve.points,c=t.r,u=4*a(s/4)/3;l[1]={x:t.w/2+c,y:t.w/2+c*u},l[2]={x:t.w/2+t.r*(r(s)+u*i(s)),y:t.w/2+t.r*(i(s)-u*r(s))},l[3]={x:t.w/2+t.r*r(s),y:t.w/2+t.r*i(s)},t.setCurve(new t.Bezier(l)),t.angle=s}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),i=60,r=t/2-i,a=.55228,o={x:-i/2,y:-i/4},s=new e.Bezier([{x:t/2+r,y:n/2},{x:t/2+r,y:n/2+a*r},{x:t/2+a*r,y:n/2+r},{x:t/2,y:n/2+r}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+i,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+i},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-i/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+r-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+r-2},o),e.text("r = "+r,{x:t/2+r/3,y:n/2+10},o)}}},function(e,t,n){"use strict";var i=n(128),r=n(0);e.exports=r("circles_cubic",i)},function(e,t,n){"use strict";e.exports={componentDidMount:function(){if("undefined"!=typeof document){var e=document.createElement("script");e.src="lib/site/disqus.js",e.async=!0,document.head.appendChild(e)}}}},function(e,t,n){"use strict";var i=n(130),r=n(0);e.exports=r("comments",i)},function(e,t,n){"use strict";e.exports={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,i=20,r=t.points,a=e.getPanelWidth(),o=a-2*i,s=e.getPanelHeight(),l={x:a,y:0},c=JSON.parse(JSON.stringify(r)).map(function(e,t){return{x:o*t/n,y:e.x}});e.drawLine({x:0,y:0},{x:0,y:s},l),e.drawAxes(i,"t",0,1,"x",0,a,l),l.x+=i,e.drawCurve(new e.Bezier(c),l),l.x+=a-i;var u=JSON.parse(JSON.stringify(r)).map(function(e,t){return{x:o*t/n,y:e.y}});e.drawLine({x:0,y:0},{x:0,y:s},l),e.drawAxes(i,"t",0,1,"y",0,a,l),l.x+=i,e.drawCurve(new e.Bezier(u),l)}}},function(e,t,n){"use strict";var i=n(132),r=n(0);e.exports=r("components",i)},function(e,t,n){"use strict";e.exports={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,i){e.setRandomColor(),e.drawFunction(i),e.setFill(e.getColor()),t&&e.text(t,n)},drawLerpBox:function(e,t,n,i){e.noColor(),e.setFill("rgba(0,0,100,0.2)");var r={x:i.x-5,y:n},a={x:i.x+5,y:t};e.drawRect(r,a),e.setColor("black")},drawLerpPoint:function(e,t,n,i,r){r.y=n+t*i,e.drawCircle(r,3),e.setFill("black"),e.text((1e4*t|0)/100+"%",{x:r.x+10,y:r.y+4}),e.noFill()},drawQuadraticLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,i=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var r=e.hover;if(r&&r.x>=n&&r.x<=t-n){this.drawLerpBox(e,t,n,r);var a=(r.x-n)/i;this.drawLerpPoint(e,(1-a)*(1-a),n,i,r),this.drawLerpPoint(e,2*(1-a)*a,n,i,r),this.drawLerpPoint(e,a*a,n,i,r)}this.drawFunction(e,"first term",{x:2*n,y:i},function(e){return{x:n+e*i,y:n+i*(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*i,y:n+2*i*(1-e)*e}}),this.drawFunction(e,"third term",{x:i-2.5*n,y:i},function(e){return{x:n+e*i,y:n+i*e*e}})},drawCubicLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,i=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var r=e.hover;if(r&&r.x>=n&&r.x<=t-n){this.drawLerpBox(e,t,n,r);var a=(r.x-n)/i;this.drawLerpPoint(e,(1-a)*(1-a)*(1-a),n,i,r),this.drawLerpPoint(e,3*(1-a)*(1-a)*a,n,i,r),this.drawLerpPoint(e,3*(1-a)*a*a,n,i,r),this.drawLerpPoint(e,a*a*a,n,i,r)}this.drawFunction(e,"first term",{x:2*n,y:i},function(e){return{x:n+e*i,y:n+i*(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*i,y:n+3*i*(1-e)*(1-e)*e}}),this.drawFunction(e,"third term",{x:t/2+2*n,y:t/2},function(e){return{x:n+e*i,y:n+3*i*(1-e)*e*e}}),this.drawFunction(e,"fourth term",{x:i-2.5*n,y:i},function(e){return{x:n+e*i,y:n+i*e*e*e}})},draw15thLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,i=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var r,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),r=0;r<=15;r++){var s=(o.x-n)/i,l=a[r]*Math.pow(1-s,15-r)*Math.pow(s,r);this.drawLerpPoint(e,l,n,i,o)}for(r=0;r<=15;r++){var c=!1,u=!1;0===r&&(c="first term",u={x:n+5,y:i}),15===r&&(c="last term",u={x:t-3.5*n,y:i}),this.drawFunction(e,c,u,function(e){return{x:n+e*i,y:n+i*a[r]*Math.pow(1-e,15-r)*Math.pow(e,r)}})}}}},function(e,t,n){"use strict";var i=n(134),r=n(0);e.exports=r("control",i)},function(e,t,n){"use strict";var i=Math.abs;e.exports={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 a=e.getPanelWidth(),o=e.getPanelHeight();if(r.x+=a,e.drawLine({x:0,y:0},{x:0,y:o},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+=a,e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:o},r);var l,c,u=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=u[0],d=function(e,t){return i(e.t1-t.t1)<.01&&i(e.t2-t.t2)<.01};for(c=1;c.95)&&(e.text("t = "+Math.round(h),{x:u.x+1.25*s*Math.cos(h)-10,y:u.y+1.25*l*Math.sin(h)+5}),e.drawCircle(c,2,u))}}}},function(e,t,n){"use strict";var i=n(141),r=n(0),a=n(11);e.exports=a(r("explanation",i))},function(e,t,n){"use strict";e.exports={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,i,r=.05,a=-10,o=t.get(a-r);for(n=a;n<=r;n+=r)i=t.get(n),e.drawLine(o,i),o=i;o=t.get(1);var s=10;for(n=1+r;n<=s;n+=r)i=t.get(n),e.drawLine(o,i),o=i}}},function(e,t,n){"use strict";var i=n(143),r=n(0);e.exports=r("extended",i)},function(e,t,n){"use strict";e.exports={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,i=20,r=t.points,a=e.getPanelWidth(),o=e.getPanelHeight(),s={x:a,y:0},l=JSON.parse(JSON.stringify(r)).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(i,"t",0,1,"x",0,a,s),s.x+=i;var c=new e.Bezier(l);e.drawCurve(c,s),e.setColor("red"),c.extrema().y.forEach(function(t){var n=c.get(t);e.drawCircle(n,3,s)}),s.x+=a-i;var u=JSON.parse(JSON.stringify(r)).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(i,"t",0,1,"y",0,a,s),s.x+=i;var h=new e.Bezier(u);e.drawCurve(h,s),e.setColor("red"),h.extrema().y.forEach(function(t){var n=h.get(t);e.drawCircle(n,3,s)})}}},function(e,t,n){"use strict";var i=n(145),r=n(0);e.exports=r("extremities",i)},function(e,t,n){"use strict";e.exports={statics:{keyHandlingOptions:{propName:"steps",values:{38:1,40:-1},controller:function(e){e.steps<1&&(e.steps=1)}}},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,i=1/e.steps,r=t.points[0],a=i;a<1+i;a+=i)n=t.get(Math.min(a,1)),e.setColor("red"),e.drawLine(r,n),r=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))}}},function(e,t,n){"use strict";var i=n(147),r=n(0),a=n(11);e.exports=a(r("flattening",i))},function(e,t,n){"use strict";e.exports={statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},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)})}}},function(e,t,n){"use strict";var i=n(149),r=n(0),a=n(11);e.exports=a(r("graduatedoffset",i))},function(e,t,n){"use strict";e.exports={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)})}}},function(e,t,n){"use strict";var i=n(151),r=n(0);e.exports=r("inflections",i)},function(e,t,n){"use strict";var i=Math.min,r=Math.max;e.exports={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,a=n(t[0].points[0],t[0].points[1],t[1].points[0],t[1].points[1]),o=0;t.forEach(function(t){if(e.drawSkeleton(t),e.setColor("black"),a){var n=t.points,s=i(n[0].x,n[1].x),l=i(n[0].y,n[1].y),c=r(n[0].x,n[1].x),u=r(n[0].y,n[1].y);s<=a.x&&l<=a.y&&c>=a.x&&u>=a.y&&(e.setColor("#00FF00"),o++)}e.drawCurve(t)}),a&&(e.setColor(o<2?"red":"#00FF00"),e.drawCircle(a,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,i={p1:t[1].points[0],p2:t[1].points[1]},r=n.align(t[0].points,i),a=new e.Bezier(r),o=n.roots(a.points);o.forEach(function(n){var i=t[0].get(n);e.drawCircle(i,3),e.text("t = "+n,{x:i.x+5,y:i.y+10})})}}},function(e,t,n){"use strict";var i=n(153),r=n(0);e.exports=r("intersections",i)},function(e,t,n){"use strict";e.exports={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)}}},function(e,t,n){"use strict";var i=n(155),r=n(0);e.exports=r("introduction",i)},function(e,t,n){"use strict";var i=n(0);e.exports=i("matrix")},function(e,t,n){"use strict";var i=n(0);e.exports=i("matrixsplit")},function(e,t,n){"use strict";var i=Math.abs;e.exports={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,a=r*n-r,o=a+1,s=i(a/o),l=t.curve,c=t.A=l.points[1],u=t.B=l.get(n);t.C=t.utils.lli4(c,u,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,a=n*n*n,o=r*r*r,s=a+o,l=s-1,c=i(l/s),u=t.curve,h=u.hull(n),d=t.A=h[5],f=t.B=u.get(n);t.db=u.derivative(n),t.C=t.utils.lli4(d,f,u.points[0],u.points[3]),t.ratio=c}},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,i=n.hull(t.t),r=t.B,a=i[7],o=i[8],s={x:a.x-r.x,y:a.y-r.y},l={x:o.x-r.x,y:o.y-r.y},c=n.points,u={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-u.x)/(1-t.t),y:t.newA.y-(t.newA.y-u.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:c[0].x+(h.x-c[0].x)/t.t,y:c[0].y+(h.y-c[0].y)/t.t},m={x:c[3].x-(c[3].x-f.x)/(1-t.t),y:c[3].y-(c[3].y-f.y)/(1-t.t)};t.p1=u,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(),i=e.getPanelHeight(),r={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:i},r),e.drawLine({x:n,y:0},{x:n,y:i},r),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,r);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],r),e.drawLine(e.newA,e.newB,r),e.setColor("grey"),e.drawCircle(e.newA,3,r),e.setColor("blue"),e.drawCircle(e.B,3,r),e.drawCircle(e.C,3,r),e.drawCircle(e.newB,3,r),e.drawLine(e.B,e.C,r),e.drawLine(e.newB,e.C,r),e.setFill("black"),e.text("A'",e.newA,{x:r.x+7,y:r.y+1}),e.text("start",t.get(0),{x:r.x+7,y:r.y+1}),e.text("end",t.get(1),{x:r.x+7,y:r.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:r.x+7,y:r.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:r.x+7,y:r.y+1}),e.text("C",e.C,{x:r.x+7,y:r.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],r),e.drawLine(o[7],o[8],r),e.drawCircle(o[7],3,r),e.drawCircle(o[8],3,r),e.text("e1",o[7],{x:r.x+7,y:r.y+1}),e.text("e2",o[8],{x:r.x+7,y:r.y+1})}r.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,r),e.setColor("black"),e.drawCurve(e.newcurve,r)}else r.x+=n,e.drawCurve(t,r)}}},function(e,t,n){"use strict";var i=n(159),r=n(0);e.exports=r("moulding",i)},function(e,t,n){"use strict";e.exports={statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},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 i=n.slice(-1)[0];e.drawPoint(i.points[3]||i.points[2]),e.setColor("red");var r=t.offset(e.distance);r.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),i=r.slice(-1)[0],e.drawPoint(i.points[3]||i.points[2]),e.setColor("blue"),r=t.offset(-e.distance),r.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),i=r.slice(-1)[0],e.drawPoint(i.points[3]||i.points[2])}}},function(e,t,n){"use strict";var i=n(161),r=n(0),a=n(11);e.exports=a(r("offsetting",i))},function(e,t,n){"use strict";var i=Math.abs;e.exports={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 i(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,a=n+r,o=a-1;return i(o/a)},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,i){e.drawCircle(t,3),e.text(n[i],t,{x:5,y:2})}),3===e.lpts.length){var i=e.lpts[0],r=e.lpts[2],a=e.lpts[1],o={x:(i.x+r.x)/2,y:(i.y+r.y)/2};e.setColor("blue"),e.drawLine(i,r),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([i,l,r]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,i),e.drawLine(l,r),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,i){e.drawCircle(t,3),e.text(n[i],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var i=e.lpts[0],r=e.lpts[2],a=e.lpts[1],o={x:(i.x+r.x)/2,y:(i.y+r.y)/2};e.setColor("blue"),e.drawLine(i,r),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},c=e.utils.dist(i,r),u=c/8,h=e.utils.dist(a,o),d=4,f=u+h/d,p=f*(r.x-i.x)/c,m=f*(r.y-i.y)/c,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:i.x+2*(w.x-i.x),y:i.y+2*(w.y-i.y)},_={x:r.x+2*(y.x-r.x),y:r.y+2*(y.y-r.y)};t=new e.Bezier([i,b,_,r]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,w),e.drawLine(l,y),e.drawLine(i,b),e.drawLine(r,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}}}},function(e,t,n){"use strict";var i=n(163),r=n(0);e.exports=r("pointcurves",i)},function(e,t,n){"use strict";function i(e){var t=Math.sqrt(e.x*e.x+e.y*e.y+e.z*e.z);return{x:e.x/t,y:e.y/t,z:e.z/t}}var r,a,o=.2,s=!0;e.exports={drawCube:function(e){var t=function(t){return e.project(t,r)},n=[{x:0,y:0,z:0},{x:200,y:0,z:0},{x:200,y:200,z:0},{x:0,y:200,z:0},{x:0,y:0,z:200},{x:200,y:0,z:200},{x:200,y:200,z:200},{x:0,y:200,z:200}].map(function(e){return t(e)});e.setColor("grey"),e.drawLine(n[1],n[2]),e.drawLine(n[2],n[3]),e.drawLine(n[1],n[5]),e.drawLine(n[2],n[6]),e.drawLine(n[3],n[7]),e.drawLine(n[4],n[5]),e.drawLine(n[5],n[6]),e.drawLine(n[6],n[7]),e.drawLine(n[7],n[4]),e.setColor("blue"),e.drawLine(n[0],n[1]),e.setColor("red"),e.drawLine(n[3],n[0]),e.setColor("green"),e.drawLine(n[0],n[4])},drawCurve:function(e,t,n){var i=function(t){return e.project(t,r)},a=t.map(function(e){return i(e)});n&&(e.setColor("rgba(0,0,0,"+o+")"),e.drawCurve({points:t.map(function(t){return e.projectXY(t,r)})}),e.drawCurve({points:t.map(function(t){return e.projectYZ(t,r)})}),e.drawCurve({points:t.map(function(t){return e.projectXZ(t,r)})})),e.setColor("#333"),e.drawLine(a[0],a[1]),e.drawCircle(a[1],3),e.drawCircle(a[2],3),e.drawLine(a[2],a[3]),e.setColor("black"),e.drawCircle(a[0],3),e.drawCircle(a[3],3);new e.Bezier(a);e.drawCurve({points:a})},getVectors:function(e,t){var n,i,r,a,o,s,l;return n=e.get(t),i=e.derivative(t),r={x:n.x+i.x,y:n.y+i.y,z:n.z+i.z},o={x:r.y*n.z-r.z*n.y,y:r.z*n.x-r.x*n.z,z:r.x*n.y-r.y*n.x},a=Math.sqrt(o.x*o.x+o.y*o.y+o.z*o.z),o={x:o.x/a,y:o.y/a,z:o.z/a},s=[o.x*o.x,o.x*o.y-o.z,o.x*o.z+o.y,o.x*o.y+o.z,o.y*o.y,o.y*o.z-o.x,o.x*o.z-o.y,o.y*o.z+o.x,o.z*o.z],l={x:n.x*s[0]+n.y*s[1]+n.z*s[2],y:n.x*s[3]+n.y*s[4]+n.z*s[5],z:n.x*s[6]+n.y*s[7]+n.z*s[8]},{dt:n,a:i,ddt:r,r:o,R:s,n:l}},drawVector:function(e,t,n,a,s,l,c,u){var h=function(t){return e.project(t,r)};n=i(n),n={x:t.x+a*n.x,y:t.y+a*n.y,z:t.z+a*n.z},e.setColor("rgba("+s+","+l+","+c+",1)"),e.drawLine(h(t),h(n)),u&&(e.setColor("rgba("+s+","+l+","+c+","+o+")"),e.drawLine(e.projectXY(t,r),e.projectXY(n,r)),e.drawLine(e.projectXZ(t,r),e.projectXZ(n,r)),e.drawLine(e.projectYZ(t,r),e.projectYZ(n,r)))},setup:function(e){r={x:2*e.getPanelWidth()/5,y:4*e.getPanelHeight()/5},e.setSize(1.25*e.getPanelWidth(),e.getPanelHeight())},drawVectors:function(e){e.reset();var t=function(t){return e.project(t,r)};this.drawCube(e);var n=[{x:120,y:0,z:0},{x:120,y:220,z:0},{x:30,y:0,z:30},{x:0,y:0,z:200}];this.drawCurve(e,n);var i=new e.Bezier(n),a=new e.Bezier(i.dpoints[0]),o=Math.max(e.hover.x?e.hover.x/e.getPanelWidth():0,0),s=i.get(o);e.drawCircle(t(s),3);var l=this.getVectors(a,o);this.drawVector(e,s,l.dt,40,0,200,0),this.drawVector(e,s,l.r,40,0,0,200),this.drawVector(e,s,l.n,40,200,0,0)},setupNormals:function(e){a={x:2*e.getPanelWidth()/5,y:4*e.getPanelHeight()/5},e.setSize(1.25*e.getPanelWidth(),e.getPanelHeight())},drawNormals:function(e){e.reset();var t=function(t){return e.project(t,r)};this.drawCube(e);var n=[{x:120,y:0,z:0},{x:120,y:220,z:0},{x:30,y:0,z:30},{x:0,y:0,z:200}];this.drawCurve(e,n,s);var i=new e.Bezier(n),a=new e.Bezier(i.dpoints[0]),o=Math.max(e.hover.x?e.hover.x/e.getPanelWidth():0,0),l=i.get(o);e.drawCircle(t(l),3);var c=this.getVectors(a,o);this.drawVector(e,l,c.dt,40,0,200,0,s),this.drawVector(e,l,c.r,40,0,0,200,s),this.drawVector(e,l,c.n,40,200,0,0,s)}}},function(e,t,n){"use strict";var i=n(165),r=n(0);e.exports=r("pointvectors3d",i)},function(e,t,n){"use strict";e.exports={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,i,r,a,o,s,l=20;for(n=0;n<=10;n++)i=n/10,r=t.get(i),a=t.derivative(i),s=Math.sqrt(a.x*a.x+a.y*a.y),a={x:a.x/s,y:a.y/s},o=t.normal(i),e.setColor("blue"),e.drawLine(r,{x:r.x+a.x*l,y:r.y+a.y*l}),e.setColor("red"),e.drawLine(r,{x:r.x+o.x*l,y:r.y+o.y*l}),e.setColor("black"),e.drawCircle(r,3)}}},function(e,t,n){"use strict";var i=n(167),r=n(0);e.exports=r("pointvectors",i)},function(e,t,n){"use strict";var i=Math.atan2,r=Math.sqrt,a=Math.sin,o=Math.cos;e.exports={setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),i=t/2,r=n/2,a=40,o=[{x:i,y:a},{x:t-a,y:a},{x:t-a,y:r},{x:t-a,y:n-a},{x:i,y:n-a},{x:a,y:n-a},{x:a,y:r},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),i=t/2,r=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,c=[{x:i,y:a},{x:i+l,y:a},{x:t-a,y:r-l},{x:t-a,y:r},{x:t-a,y:r+l},{x:i+l,y:n-a},{x:i,y:n-a},{x:i-l,y:n-a},{x:a,y:r+l},{x:a,y:r},{x:a,y:r-l},{x:i-l,y:a}];e.lpts=c},movePointsQuadraticLD:function(e,t){for(var n,i,r,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],i=t+(2*a-1),i=e.lpts[i%e.lpts.length],r=t+2*a,r=e.lpts[r%e.lpts.length],r.x=i.x+(i.x-n.x),r.y=i.y+(i.y-n.y);r=t+6,r=e.lpts[r%e.lpts.length],e.problem=r},movePointsCubicLD:function(e,t){var n,i;t%3===1?(i=t-1,i+=i<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(i=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),i=e.lpts[i],n=e.lpts[n],n.x=i.x+(i.x-e.mp.x),n.y=i.y+(i.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,i=t.mp_idx;n?i%2!==0&&this.movePointsQuadraticLD(t,i):i%3!==0&&this.movePointsCubicLD(t,i)}},movePointsQuadraticDirOnly:function(e,t){var n,s,l;[-1,1].forEach(function(c){n=e.mp,s=t+c+e.lpts.length,s=e.lpts[s%e.lpts.length],l=t+2*c+e.lpts.length,l=e.lpts[l%e.lpts.length];var u=i(s.y-n.y,s.x-n.x),h=l.x-s.x,d=l.y-s.y,f=r(h*h+d*d);l.x=s.x+f*o(u),l.y=s.y+f*a(u)}),l=t+4,l=e.lpts[l%e.lpts.length],e.problem=l},movePointsCubicDirOnly:function(e,t){var n,s;t%3===1?(s=t-1,s+=s<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(s=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),s=e.lpts[s],n=e.lpts[n];var l=i(s.y-e.mp.y,s.x-e.mp.x),c=n.x-s.x,u=n.y-s.y,h=r(c*c+u*u);n.x=s.x+h*o(l),n.y=s.y+h*a(l)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,i=t.mp_idx;n?i%2!==0&&this.movePointsQuadraticDirOnly(t,i):i%3!==0&&this.movePointsCubicDirOnly(t,i)}},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 s=t-n+e.lpts.length;s=e.lpts[s%e.lpts.length];var l=t-2*n+e.lpts.length;l=e.lpts[l%e.lpts.length];var c=t-3*n+e.lpts.length;c=e.lpts[c%e.lpts.length];var u=i(l.y-s.y,l.x-s.x),h=c.x-l.x,d=c.y-l.y,f=r(h*h+d*d);c.x=l.x+f*o(u),c.y=l.y+f*a(u)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],i=e.lpts[t],r=i.x-n.x,a=i.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,c=e.bpts[s%o],u=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=c.x+r,h.y=c.y+a,d.x=u.x+r,d.y=u.y+a,{x:r,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,i=t.mp_idx;n?i%2!==0?this.movePointsQuadraticDirOnly(t,i):this.moveQuadraticPoint(t,i):i%3!==0?this.movePointsCubicDirOnly(t,i):this.moveCubicPoint(t,i)}},draw:function(e,t){e.reset();var n=e.lpts,i=8===n.length,r=i?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);e.drawSkeleton(r,!1,!0),e.drawCurve(r);var a=i?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=i?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=i?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))}}},function(e,t,n){"use strict";var i=n(169),r=n(0);e.exports=r("polybezier",i)},function(e,t,n){"use strict";var i=n(0);e.exports=i("preface")},function(e,t,n){"use strict";e.exports={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 i,r,a=e.length,o=n(e[0],t),s=0;for(i=1;i1;){for(var o=0;of){i--;break}i<0&&(i=0),i===u.length&&(i=u.length-1),d.push(u[i])}for(n=0;n0;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)},i={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.y)},r={x:n.x+a*(i.x-n.x),y:n.y+a*(i.y-n.y)},m={x:0,y:0},e.drawCircle(n,3,m),e.drawCircle(i,3,m),e.setWeight(.5),e.drawLine(n,i,m),e.setWeight(1.5),e.drawLine(d,n,m),e.drawLine(f,i,m),e.setWeight(1),m.x+=u,e.drawCircle(n,3,m),e.drawCircle(i,3,m),e.setWeight(.5),e.drawLine(n,i,m),e.setWeight(1.5),e.drawLine(n,r,m),e.setWeight(1),e.drawCircle(r,3,m),m.x+=u,e.drawCircle(r,3,m),e.text(o+"%, or t = "+e.utils.round(a,2),{x:r.x+10+m.x,y:r.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))}}},function(e,t,n){"use strict";var i=n(184),r=n(0);e.exports=r("whatis",i)},function(e,t,n){"use strict";var i=n(6),r=n(91),a=n(51),o=n(88),s=n(93),l=n(97);a.locale="ja-JP",e.exports={locale:"ja-JP",preface:{locale:"ja-JP",title:"まえがき",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"preface",title:"まえがき"}),i.createElement("p",null,"2次元上になにかを描くとき、普通は線を使いますが、これは直線と曲線の2つに分類することができます。直線を描くのはとても簡単で、これをコンピュータに描かせるのも容易です。直線の始点と終点をコンピュータに与えてやれば、ポン！直線が描けました。疑問の余地もありません。"),i.createElement("p",null,"しかしながら、曲線の方はもっと大きな問題です。私たちはフリーハンドでいとも簡単に曲線を描くことができますが、コンピュータの方は少し不利です。曲線の描き方を表した数学的な関数が与えられないと、コンピュータは曲線を描くことができないのです。実際には、直線でさえも関数が必要になります。直線の関数はとても簡単なので、わたしたちはよく無視してしまいますが、コンピュータにとっては直線であれ曲線であれ、線はすべて「関数」なのです。しかしこれは、コンピュータで速く計算できて、きれいな曲線が得られるような関数を見つける必要がある、ということになります。そのような関数はたくさんありますが、多くの関心を集め続け、そしてどんな場面でも使われている、ある特定の関数に対してこの記事では焦点を絞ります。この関数は「ベジエ」曲線を描きます。"),i.createElement("p",null,"ベジエ曲線は",i.createElement("a",{href:"https://ja.wikipedia.org/wiki/ピエール・ベジェ"},"Pierre Bézier"),"から名付けられました。この曲線がデザイン作業に適していることを世界に知らしめたのが、彼なのです（ルノーに勤務し、1962年にその研究を発表しました）。ただし、この曲線を「発明」したのは彼が最初で唯一というわけではありません。数学者",i.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),"はシトロエンで働いていた1959年、この曲線の性質について研究し、ベジエ曲線の非常にエレガントな描き方を発見しました。これが最初だと言う人もいます。しかしながら、de Casteljauは自分の成果を発表しなかったため、「誰が最初か？」という問いに答えるのがとても難しくなっています。またベジエ曲線は、核心的には",i.createElement("a",{href:"https://ja.wikipedia.org/wiki/セルゲイ・ベルンシュテイン"},"Sergei Natanovich Bernstein"),"が研究した「ベルンシュタイン多項式」という数学関数の一種ですが、こちらの公刊に関しては少なくとも1912年まで遡ることができます。いずれにせよ、これらはほとんど瑣末なことです。より注目すべきなのは、ベジエ曲線は取り扱いに便利だいうことです。たとえば複数のベジエ曲線を繋いで、1つの曲線に見えるようにすることができます。もしあなたがPhotoshopで「パス」を描いたり、FlashやIllustrator、Inkscapeのようなベクタードローイングソフトを使ったことがあるのであれば、そこで描いてきた曲線はベジエ曲線です。"),i.createElement("p",null,"では、これを自分でプログラムしなければならないとなったらどうでしょう？ハマりどころは何でしょうか？どうやってベジエ曲線を描くのでしょう？バウンディングボックスとは何で、どうやって交点を求め、どうやったら曲線を押し出せるのでしょうか？つまるところ、ベジエ曲線に対して行いたいあらゆる操作は、どのようにすればいいのでしょう？このページはそれに答えるためにあります。数学にとりかかりましょう！"),i.createElement("p",null,"—Pomax (Twitter上では",i.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),i.createElement("div",{className:"note"},i.createElement("h2",{id:"-"},"注：ベジエの図はすべてインタラクティブになっています。"),i.createElement("p",null,"このページでは",i.createElement("a",{href:"http://pomax.github.io/bezierjs"},"Bezier.js"),"を活用し、インタラクティブな例示を行っています。また、",i.createElement("a",{href:"http://mathjax.org"},"MathJax"),"というすばらしいライブラリによって、（LaTeX式の）「本物」の数学組版を行っています。このページはWebpackを使い、Reactアプリケーションとしてオフラインで生成されていますが、このために「ソースを表示」オプションを追加することがかなり難しくなってしまいました。これをどうやって追加すべきかは今もまだ考え中ですが、かといって、数年ぶりとなる今回の更新を延期したくはありませんでした。"),i.createElement("h2",{id:"-"},"本書はオープンソースです。"),i.createElement("p",null,"この本はオープンソースソフトウェアのプロジェクトで、2つのGitHubリポジトリ上に存在しています。1つ目の",i.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo"),"は表示のためだけに用意されたバージョンで、あなたが今読んでいるものです。もう一方の",i.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),"は開発版で、すべてのHTML・JavaScript・CSSが含まれています。どちらのリポジトリもフォークすることができますし、あなたの好きなように使ってかまいません。ただし、これを自分の成果だと騙って売ることはもちろん除きます。=)"),i.createElement("h2",{id:"-"},"数学はどこまで難しくなりますか？"),i.createElement("p",null,"この入門に出てくる数学は、大半が高校初年度程度です。基本的な計算を理解していて、英語の読み方が分かっていれば、こなすことができるはずです。時には",i.createElement("em",null,"ずっと"),"難しい数学も出てきますが、もし理解できないように感じたら、そこは読み飛ばしても大丈夫です。節の中の「詳細欄」を飛ばしてもいいですし、厄介そうな数学があれば節の最後まで読み飛ばしてもかまいません。各節の最後にはたいてい結論を並べてありますので、これを直に利用することもできます。"),i.createElement("h2",{id:"-"},"質問・コメント："),i.createElement("p",null,"新しい節の提案があれば、",i.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"GitHubのissueトラッカー"),"をクリックしてください（右上にあるリポジトリのリンクからでもたどり着けます）。改訂中のため、現在はこのページにはコメント欄がありませんが、内容に関する質問がある場合にもissueトラッカーを使ってかまいません。改訂が完了したら、総合的なコメント欄を復活させる予定です。あるいは、「質問対象の節を選択して『質問』ボタンをクリック」するような項目別のシステムになるかもしれません。いずれわかります。"),i.createElement("h2",{id:"-"},"コーヒーをおごってくれませんか？"),i.createElement("p",null,"この本が気に入った場合や、取り組んでいたことに役に立つと思った場合、あるいは、この本への感謝をわたしに伝えるにはどうすればいいのかわからない場合。そのような場合には、",i.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 i.createElement("section",null,i.createElement(a,{name:"introduction",title:"バッとした導入",number:"1"}),i.createElement("p",null,"まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。"),i.createElement("div",{className:"figure"},i.createElement(r,{inline:!0,title:"2次のベジエ曲線",setup:e.drawQuadratic,draw:e.drawCurve}),i.createElement(r,{inline:!0,title:"3次のベジエ曲線",setup:e.drawCubic,draw:e.drawCurve})),i.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 i.createElement("section",null,i.createElement(a,{name:"whatis",title:"ではベジエ曲線はどうやってできるのでしょう？",number:"2"}),i.createElement("p",null,"ベジエ曲線がどのように動くのか、点を触ってみて感覚が摑めたかもしれません。では、実際のところベジエ曲線",i.createElement("em",null,"とは"),"いったい何でしょうか？これを説明する方法は2通りありますが、どちらの説明でも行き着く先はまったく同じです。一方は複雑な数学を使うのに対し、もう一方はとても簡単です。というわけで……簡単な説明の方から始めましょう。"),i.createElement("p",null,"ベジエ曲線は、",i.createElement("a",{href:"https://ja.wikipedia.org/wiki/%E7%B7%9A%E5%BD%A2%E8%A3%9C%E9%96%93"},"線形補間"),"の結果です。というと難しそうに聞こえますが、誰でも幼い頃から線形補間をやってきています。例えば、何か2つのものの間を指し示すときには、いつも線形補間を行っています。線形補間とは、単純に「2点の間から点を得る」ことなのです。"),i.createElement("p",null,"例えば、2点間の距離がわかっているとして、一方の点から距離の20%だけ離れた（すなわち、もう一方の点から80%離れた）新しい点を求めたい場合、次のようにとても簡単に計算できます。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/98885bce8eeabb5a9bdddd12cd6cb4382115ad5c.svg",width:"450.79999999999995",height:"113.39999999999999"}),i.createElement("p",null,"では、実際に見てみましょう。下の図はインタラクティブになっています。上下キーで補間の比率が増減しますので、どうなるか確かめてみましょう。最初に3点があり、それを結んで2本の直線が引かれています。この直線の上でそれぞれ線形補間を行うと、2つの点が得られます。この2点の間でさらに線形補間を行うと、1つの点を得ることができます。そして、あらゆる比率に対して同様に点を求め、それをすべて集めると、このようにベジエ曲線ができるのです。"),i.createElement(r,{title:"線形補間でベジエ曲線を得る",setup:e.setup,draw:e.draw,onKeyDown:e.onKeyDown}),i.createElement("p",null,"また、これが複雑な方の数学につながっていきます。微積分です。"),i.createElement("p",null,"いま上で行ったものとは似つかないように思えますが、実はあれは2次曲線を描いていたのです。ただし一発で描きあげるのではなく、手順を追って描いていきました。ベジエ曲線は多項式関数で表現できますが、その一方で、とても単純な補間の補間の補間の……というふうにも説明できます。これがベジエ曲線のおもしろいところです。これはまた、ベジェ曲線は「本当の数学」で見る（関数を調べたり微分を調べたり、あらゆる方法で）ことも可能ですし、「機械的」な組み立て操作として見る（例えば、ベジエ曲線は組み立てに使う点の間からは決してはみ出ないということがわかります）ことも可能だということを意味しています。"),i.createElement("p",null,"それでは、もう少し詳しくベジエ曲線を見ていきましょう。数学的な表現やそこから導かれる性質、さらには、ベジエ曲線に対して／ベジエ曲線を使ってできるさまざまな内容についてです。"))}},explanation:{locale:"ja-JP",title:"ベジエ曲線の数学",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"explanation",title:"ベジエ曲線の数学",number:"3"}),i.createElement("p",null,"ベジエ曲線は「パラメトリック」関数の一種です。数学的に言えば、パラメトリック関数というのはインチキです。というのも、「関数」はきっちり定義された用語であり、いくつかの入力を",i.createElement("strong",null,"1つ"),"の出力に対応させる写像を表すものだからです。いくつかの数値を入れると、1つの数値が出てきます。入れる数値が変わっても、出てくる数値はやはり1つだけです。パラメトリック関数はインチキです。基本的には「じゃあわかった、値を複数個出したいから、関数を複数個使うことにするよ」ということです。例として、ある値",i.createElement("i",null,"x"),"に何らかの操作を行い、別の値へと写す関数があるとします。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/785e792c343b71d4e674ac94d8800940b30917ac.svg",width:"100.8",height:"18.2"}),i.createElement("p",null,i.createElement("i",null,"f(x)"),"という記法は、これが関数（1つしかない場合は慣習的に",i.createElement("i",null,"f"),"と呼びます）であり、その出力が1つの変数（この場合は",i.createElement("i",null,"x"),"です）に応じて変化する、ということを示す標準的な方法です。",i.createElement("i",null,"x"),"を変化させると、",i.createElement("i",null,"f(x)"),"の出力が変化します。"),i.createElement("p",null,"ここまでは順調です。では、パラメトリック関数について、これがどうインチキなのかを見てみましょう。以下の2つの関数を考えます。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/0dfe7562b43441e72201ff4cdd2e8b6e2e3ecb2d.svg",width:"98",height:"37.8"}),i.createElement("p",null,"注目すべき箇所は特に何もありません。ただの正弦関数と余弦関数です。ただし、入力が別々の名前になっていることに気づくでしょう。仮に",i.createElement("i",null,"a"),"の値を変えたとしても、",i.createElement("i",null,"f(b)"),"の出力の値は変わらないはずです。なぜなら、こちらの関数には",i.createElement("i",null,"a"),"は使われていないからです。パラメトリック関数は、これを変えてしまうのでインチキなのです。パラメトリック関数においては、どの関数も変数を共有しています。例えば、"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/ed6f533530199d1e99b3319ba137c1327b0459c0.svg",width:"105",height:"42"}),i.createElement("p",null,"複数の関数がありますが、変数は1つだけです。",i.createElement("i",null,"t"),"の値を変えた場合、",i.createElement("i",null,"f",i.createElement("sub",null,"a"),"(t)"),"と",i.createElement("i",null,"f",i.createElement("sub",null,"b"),"(t)"),"の両方の出力が変わります。これがどのように役に立つのか、疑問に思うかもしれません。しかし、実際には答えは至ってシンプルです。",i.createElement("i",null,"f",i.createElement("sub",null,"a"),"(t)"),"と",i.createElement("i",null,"f",i.createElement("sub",null,"b"),"(t)"),"のラベルを、パラメトリック曲線の表示によく使われているもので置き換えてやれば、ぐっとはっきりするかと思います。"),i.createElement("img",{ -className:"LaTeX SVG",src:"images/latex/ea632ea75d6a2aeb6fe69c07feb6e76f81884746.svg",width:"81.19999999999999",height:"42"}),i.createElement("p",null,"きました。",i.createElement("i",null,"x"),"/",i.createElement("i",null,"y"),"座標です。謎の値",i.createElement("i",null,"t"),"を通して繫がっています。"),i.createElement("p",null,"というわけで、普通の関数では",i.createElement("i",null,"y"),"座標を",i.createElement("i",null,"x"),"座標によって定義しますが、パラメトリック曲線ではそうではなく、座標の値を「制御」変数と結びつけます。",i.createElement("i",null,"t"),"の値を変化させるたびに",i.createElement("strong",null,"2つ"),"の値が変化するので、これをグラフ上の座標 (",i.createElement("i",null,"x"),",",i.createElement("i",null,"y"),")として使うことができます。例えば、先ほどの関数の組は円周上の点を生成します。負の無限大から正の無限大へと",i.createElement("i",null,"t"),"を動かすと、得られる座標(",i.createElement("i",null,"x"),",",i.createElement("i",null,"y"),")は常に中心(0,0)・半径1の円の上に乗ります。",i.createElement("i",null,"t"),"を0から5まで変化させてプロットした場合は、このようになります（上下キーでプロットの上限を変更できます）。"),i.createElement(r,{preset:"empty",title:"（部分）円 x=sin(t), y=cos(t)",static:!0,setup:e.setup,draw:e.draw,onKeyDown:e.props.onKeyDown}),i.createElement("p",null,"ベジエ曲線はパラメトリック関数の一種であり、どの次元に対しても同じ基底関数を使うという点で特徴づけられます。先ほどの例では、",i.createElement("i",null,"x"),"の値と",i.createElement("i",null,"y"),"の値とで異なる関数（正弦関数と余弦関数）を使っていましたが、ベジエ曲線では",i.createElement("i",null,"x"),"と",i.createElement("i",null,"y"),"の両方で「二項係数多項式」を使います。では、二項係数多項式とは何でしょう？"),i.createElement("p",null,"高校で習った、こんな形の多項式を思い出すかもしれません。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/3e8b26cf8833db7089d65e9c6b3953a3140bb19f.svg",width:"224",height:"21"}),i.createElement("p",null,"最高次の項が",i.createElement("i",null,"x³"),"であれば3次多項式、",i.createElement("i",null,"x²"),"であれば2次多項式と呼び、",i.createElement("i",null,"x"),"だけの場合は1次多項式――ただの直線です。（そして",i.createElement("i",null,"x"),"の入った項が何もなければ、多項式ではありません！）"),i.createElement("p",null,"ベジエ曲線は",i.createElement("i",null,"x"),"の多項式ではなく、",i.createElement("i",null,"t"),"の多項式です。",i.createElement("i",null,"t"),"の値は0から1までの間に制限され、その係数",i.createElement("i",null,"a"),"、",i.createElement("i",null,"b"),"などは「二項係数」の形をとります。というと複雑そうに聞こえますが、実際には値を組み合わせて、とてもシンプルに記述できます。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/a62e2a83d7ea05d2a2083f3091ba3597ef84de8e.svg",width:"365.4",height:"70"}),i.createElement("p",null,"「そこまでシンプルには見えないよ」と思っていることでしょう。しかし仮に、",i.createElement("i",null,"t"),"を取り去って係数に1を掛けることにしてしまえば、急激に簡単になります。これが二項係数部分の項です。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/4df1806ffb320c3897c3c20993d03078cfdf6b77.svg",width:"169.39999999999998",height:"88.19999999999999"}),i.createElement("p",null,"2は1+1に等しく、3は2+1や1+2に等しく、6は3+3に等しく、……ということに注目してください。見てわかるように、先頭と末尾は単に1になっていますが、中間はどれも次数が増えるたびに「上の2つの数を足し合わせた」ものになっています。",i.createElement("i",null,"これなら"),"覚えやいですね。"),i.createElement("p",null,"多項式部分の項がどうなっているのか、同じぐらい簡単な方法で考えることができます。仮に、",i.createElement("i",null,"(1-t)"),"を",i.createElement("i",null,"a"),"に、",i.createElement("i",null,"t"),"を",i.createElement("i",null,"b"),"に書き換え、さらに重みを一旦削除してしまえば、このようになります。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/6ebb09409bd37de7f750f785fae607007d737e25.svg",width:"296.79999999999995",height:"64.39999999999999"}),i.createElement("p",null,"これは要するに、「",i.createElement("i",null,"a"),"と",i.createElement("i",null,"b"),"のすべての組み合わせ」の単なる和です。プラスが出てくるたびに、",i.createElement("i",null,"a"),"を",i.createElement("i",null,"b"),"へと1つずつ置き換えていけばよいのです。こちらも本当に単純です。さて、これで「二項係数多項式」がわかりました。完璧を期するため、この関数の一般の形を示しておきます。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d88b11ec034be6476b7c4406efc52c2df345c474.svg",width:"333.2",height:"60.199999999999996"}),i.createElement("p",null,"そして、これがベジエ曲線の完全な表現です。この関数中のΣは、加算の繰り返し（Σの下にある変数を使って、...=<値>から始めてΣの下にある値まで）を表します。"),i.createElement("div",{className:"howtocode"},i.createElement("h3",{id:"-"},"基底関数の実装方法"),i.createElement("p",null,"上で説明した関数を使えば、数学的な組み立て方で、基底関数をナイーブに実装することもできます。"),i.createElement("pre",null,"function Bezier(n,t):\n sum = 0\n for(k=0; k= lut.length):\n s = lut.length\n nextRow = new array(size=s+1)\n nextRow[0] = 1\n for(i=1, prev=s-1; i1 ? 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")),i.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.'),i.createElement("h3",{ +className:"LaTeX SVG",src:"images/latex/ea632ea75d6a2aeb6fe69c07feb6e76f81884746.svg",width:"81.19999999999999",height:"42"}),i.createElement("p",null,"きました。",i.createElement("i",null,"x"),"/",i.createElement("i",null,"y"),"座標です。謎の値",i.createElement("i",null,"t"),"を通して繫がっています。"),i.createElement("p",null,"というわけで、普通の関数では",i.createElement("i",null,"y"),"座標を",i.createElement("i",null,"x"),"座標によって定義しますが、パラメトリック曲線ではそうではなく、座標の値を「制御」変数と結びつけます。",i.createElement("i",null,"t"),"の値を変化させるたびに",i.createElement("strong",null,"2つ"),"の値が変化するので、これをグラフ上の座標 (",i.createElement("i",null,"x"),",",i.createElement("i",null,"y"),")として使うことができます。例えば、先ほどの関数の組は円周上の点を生成します。負の無限大から正の無限大へと",i.createElement("i",null,"t"),"を動かすと、得られる座標(",i.createElement("i",null,"x"),",",i.createElement("i",null,"y"),")は常に中心(0,0)・半径1の円の上に乗ります。",i.createElement("i",null,"t"),"を0から5まで変化させてプロットした場合は、このようになります（上下キーでプロットの上限を変更できます）。"),i.createElement(r,{preset:"empty",title:"（部分）円 x=sin(t), y=cos(t)",static:!0,setup:e.setup,draw:e.draw,onKeyDown:e.props.onKeyDown}),i.createElement("p",null,"ベジエ曲線はパラメトリック関数の一種であり、どの次元に対しても同じ基底関数を使うという点で特徴づけられます。先ほどの例では、",i.createElement("i",null,"x"),"の値と",i.createElement("i",null,"y"),"の値とで異なる関数（正弦関数と余弦関数）を使っていましたが、ベジエ曲線では",i.createElement("i",null,"x"),"と",i.createElement("i",null,"y"),"の両方で「二項係数多項式」を使います。では、二項係数多項式とは何でしょう？"),i.createElement("p",null,"高校で習った、こんな形の多項式を思い出すかもしれません。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/3e8b26cf8833db7089d65e9c6b3953a3140bb19f.svg",width:"224",height:"21"}),i.createElement("p",null,"最高次の項が",i.createElement("i",null,"x³"),"であれば3次多項式、",i.createElement("i",null,"x²"),"であれば2次多項式と呼び、",i.createElement("i",null,"x"),"だけの場合は1次多項式――ただの直線です。（そして",i.createElement("i",null,"x"),"の入った項が何もなければ、多項式ではありません！）"),i.createElement("p",null,"ベジエ曲線は",i.createElement("i",null,"x"),"の多項式ではなく、",i.createElement("i",null,"t"),"の多項式です。",i.createElement("i",null,"t"),"の値は0から1までの間に制限され、その係数",i.createElement("i",null,"a"),"、",i.createElement("i",null,"b"),"などは「二項係数」の形をとります。というと複雑そうに聞こえますが、実際には値を組み合わせて、とてもシンプルに記述できます。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/a62e2a83d7ea05d2a2083f3091ba3597ef84de8e.svg",width:"365.4",height:"70"}),i.createElement("p",null,"「そこまでシンプルには見えないよ」と思っていることでしょう。しかし仮に、",i.createElement("i",null,"t"),"を取り去って係数に1を掛けることにしてしまえば、急激に簡単になります。これが二項係数部分の項です。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/4df1806ffb320c3897c3c20993d03078cfdf6b77.svg",width:"169.39999999999998",height:"88.19999999999999"}),i.createElement("p",null,"2は1+1に等しく、3は2+1や1+2に等しく、6は3+3に等しく、……ということに注目してください。見てわかるように、先頭と末尾は単に1になっていますが、中間はどれも次数が増えるたびに「上の2つの数を足し合わせた」ものになっています。",i.createElement("i",null,"これなら"),"覚えやいですね。"),i.createElement("p",null,"多項式部分の項がどうなっているのか、同じぐらい簡単な方法で考えることができます。仮に、",i.createElement("i",null,"(1-t)"),"を",i.createElement("i",null,"a"),"に、",i.createElement("i",null,"t"),"を",i.createElement("i",null,"b"),"に書き換え、さらに重みを一旦削除してしまえば、このようになります。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/6ebb09409bd37de7f750f785fae607007d737e25.svg",width:"296.79999999999995",height:"64.39999999999999"}),i.createElement("p",null,"これは要するに、「",i.createElement("i",null,"a"),"と",i.createElement("i",null,"b"),"のすべての組み合わせ」の単なる和です。プラスが出てくるたびに、",i.createElement("i",null,"a"),"を",i.createElement("i",null,"b"),"へと1つずつ置き換えていけばよいのです。こちらも本当に単純です。さて、これで「二項係数多項式」がわかりました。完璧を期するため、この関数の一般の形を示しておきます。"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d88b11ec034be6476b7c4406efc52c2df345c474.svg",width:"333.2",height:"60.199999999999996"}),i.createElement("p",null,"そして、これがベジエ曲線の完全な表現です。この関数中のΣは、加算の繰り返し（Σの下にある変数を使って、...=<値>から始めてΣの下にある値まで）を表します。"),i.createElement("div",{className:"howtocode"},i.createElement("h3",{id:"-"},"基底関数の実装方法"),i.createElement("p",null,"上で説明した関数を使えば、数学的な組み立て方で、基底関数をナイーブに実装することもできます。"),i.createElement("pre",null,"function Bezier(n,t):\n sum = 0\n for(k=0; k= lut.length):\n s = lut.length\n nextRow = new array(size=s+1)\n nextRow[0] = 1\n for(i=1, prev=s-1; i1 ? 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")),i.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.'),i.createElement("h3",{ id:"quintic-and-higher-order-curves-finding-numerical-solutions"},"Quintic and higher order curves: finding numerical solutions"),i.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."),i.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 ',i.createElement("a",{href:"http://en.wikipedia.org/wiki/Newton-Raphson"},"Newton-Raphson")," root finding method (yes, after ",i.createElement("em",null,i.createElement("a",{href:"https://en.wikipedia.org/wiki/Isaac_Newton"},"that"))," Newton), which we can make use of."),i.createElement("p",null,"The Newton-Raphson approach consists of picking a value ",i.createElement("em",null,"t")," (any will do), and getting the corresponding value at that ",i.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 ",i.createElement("em",null,"t"),". We then repeat the procedure with this new value, and we keep doing this until we find our root."),i.createElement("p",null,"Mathematically, this means that for some ",i.createElement("em",null,"t"),", at step ",i.createElement("em",null,"n=1"),", we perform the following calculation until ",i.createElement("em",null,"f",i.createElement("sub",null,"y")),"(",i.createElement("em",null,"t"),") is zero, so that the next ",i.createElement("em",null,"t")," is the same as the one we already have:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/b563256be7016370365935944308cf878cdbc29c.svg",width:"130.2",height:"47.599999999999994"}),i.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)"),i.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?"),i.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 ",i.createElement("em",null,"t=0")," to ",i.createElement("em",null,"t=1")," at small steps (say, 1/200",i.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",i.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."),i.createElement("h3",{id:"in-conclusion-"},"In conclusion:"),i.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:"),i.createElement(r,{title:"Quadratic Bézier curve extremities",setup:e.setupQuadratic,draw:e.draw}),i.createElement(r,{title:"Cubic Bézier curve extremities",setup:e.setupCubic,draw:e.draw}))}},boundingbox:{locale:"en-GB",title:"Bounding boxes",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"boundingbox",title:"Bounding boxes",number:"17"}),i.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:"),i.createElement("p",null,i.createElement("em",null,"Computing the bounding box for a Bézier curve"),":"),i.createElement("ol",null,i.createElement("li",null,"Find all ",i.createElement("em",null,"t")," value(s) for the curve derivative's x- and y-roots."),i.createElement("li",null,"Discard any ",i.createElement("em",null,"t")," value that's lower than 0 or higher than 1, because Bézier curves only use the interval [0,1]."),i.createElement("li",null,"Determine the lowest and highest value when plugging the values ",i.createElement("em",null,"t=0"),", ",i.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.")),i.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):"),i.createElement(r,{title:"Quadratic Bézier bounding box",setup:e.setupQuadratic,draw:e.draw}),i.createElement(r,{title:"Cubic Bézier bounding box",setup:e.setupCubic,draw:e.draw}),i.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 i.createElement("section",null,i.createElement(a,{name:"aligning",title:"Aligning curves",number:"18"}),i.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.'),i.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 ",i.createElement("em",null,"n")," term polynomial functions into ",i.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 ",i.createElement("em",null,"n-2")," term function. For instance, if we have a cubic curve such as this:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d253dc7ff011a8ae46f3351975f1d4beedd7a794.svg",width:"499.79999999999995",height:"42"}),i.createElement("p",null,"Then translating it so that the first coordinate lies on (0,0), moving all ",i.createElement("em",null,"x")," coordinates by -120, and all ",i.createElement("em",null,"y")," coordinates by -160, gives us:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/b3ec747086a146c1b2c682afea6b1eae016c9a7a.svg",width:"482.99999999999994",height:"42"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/fd82fad845da25b074dff33bbc4aa563d5f367a7.svg",width:"474.59999999999997",height:"42"}),i.createElement("p",null,"If we drop all the zero-terms, this gives us:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/b4d6e220358b2d00f0cf516f433fbe5ecb58f25d.svg",width:"386.4",height:"42"}),i.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:"),i.createElement(r,{preset:"twopanel",title:"Aligning a quadratic curve",setup:e.setupQuadratic,draw:e.draw}),i.createElement(r,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}))}},tightbounds:{locale:"en-GB",title:"Tight boxes",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"tightbounds",title:"Tight boxes",number:"19"}),i.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:'),i.createElement(r,{preset:"twopanel",title:"Aligning a quadratic curve",setup:e.setupQuadratic,draw:e.draw}),i.createElement(r,{preset:"twopanel",title:"Aligning a cubic curve",setup:e.setupCubic,draw:e.draw}),i.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 i.createElement("section",null,i.createElement(a,{name:"inflections",title:"Curve inflections",number:"20"}),i.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."),i.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.'),i.createElement("p",null,"What we need to do is solve a simple equation:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/b039194e01b6081628efaf4aa169a4c50fa4aae4.svg",width:"61.599999999999994",height:"16.799999999999997"}),i.createElement("p",null,"What we're saying here is that given the curvature function ",i.createElement("em",null,"C(t)"),", we want to know for which values of ",i.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 ',i.createElement("em",null,"C(t)")," look like? Actually something that seems not too hard:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/297d1e13000b19d351e5884a40909652a2ee83e2.svg",width:"404.59999999999997",height:"22.4"}),i.createElement("p",null,"So the function ",i.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."),i.createElement("p",null,"However as we've seen in the section on aligning, aligning lets us simplify things ",i.createElement("em",null,"a lot"),", by completely removing the contributions of the first coordinate from most mathematical evaluations, and removing the last ",i.createElement("em",null,"y")," coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate ",i.createElement("em",null,"C(t) = 0")," for our curve, it'll be much easier to first axis-align the curve and ",i.createElement("em",null,"then")," evalutating the curvature function."),i.createElement("div",{className:"note"},i.createElement("h3",{id:"let-s-derive-the-full-formula-anyway"},"Let's derive the full formula anyway"),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/e522d174844a5a31f585cc04cab944a3c4593781.svg",width:"631.4",height:"74.19999999999999"}),i.createElement("p",null,"And of course the same functions for ",i.createElement("em",null,"y"),":"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/57d857282b8c91da5caf94dcfbe85145dbd760a8.svg",width:"418.59999999999997",height:"72.8"}),i.createElement("p",null,"Asking a computer to now compose the ",i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e69d797dc67f0bd2d826fcf8c48c22ff5decf23.svg",width:"579.5999999999999",height:"102.19999999999999"}),i.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.")),i.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 ",i.createElement("em",null,"C(t)"),":"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/f61c01094f0de8ca4c7f26a229f0206d54b13930.svg",width:"589.4",height:"22.4"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/c1e427616a8a2502abf3cf46415971d0df9a273c.svg",width:"534.8",height:"77"}),i.createElement("p",null,"This is a plain quadratic curve, and we know how to solve ",i.createElement("em",null,"C(t) = 0"),"; we use the quadratic formula:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/368099657b735b0d17becbbe7be915e88e8c04c5.svg",width:"456.4",height:"57.4"}),i.createElement("p",null,"We can easily compute this value ",i.createElement("em",null,"if")," the descriminator isn't a negative number (because we only want real roots, not complex roots), and ",i.createElement("em",null,"if")," ",i.createElement("em",null,"x")," is not zero, because divisions by zero are rather useless."),i.createElement("p",null,"Taking that into account, we compute ",i.createElement("em",null,"t"),", we disregard any ",i.createElement("em",null,"t")," value that isn't in the Bézier interval [0,1], and we now know at which ",i.createElement("em",null,"t")," value(s) our curve will inflect."),i.createElement(r,{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 i.createElement("section",null,i.createElement(a,{name:"canonical",title:"Canonical form (for cubic curves)",number:"21"}),i.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?"),i.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 ",i.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?'),i.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:'),i.createElement(r,{static:!0,title:"The canonical curve map",setup:e.setup,draw:e.drawBase}),i.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..."),i.createElement("ol",null,i.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 ",i.createElement("i",null,"where")," that loop is (in terms of ",i.createElement("i",null,"t")," values), but we are guaranteed that there is one."),i.createElement("li",null,"on the left (red) edge, the curve will have a cusp. We again don't know ",i.createElement("em",null,"where"),", just that it has one. This edge is described by the function:")),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/ae5a63e86bb367e6266a394962387344d0a92b10.svg",width:"189",height:"39.199999999999996"}),i.createElement("ol",null,i.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 ",i.createElement("em",null,"on")," the curve. This edge is described by the function:")),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d389fcde05a773be99f84db5fc9ed7ef043bf406.svg",width:"242.2",height:"40.599999999999994"}),i.createElement("ol",null,i.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 ",i.createElement("em",null,"on")," the curve. This edge is described by the function:")),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d97181a9d0ada19862a0ff2cebb08bdee00868d7.svg",width:"161",height:"39.199999999999996"}),i.createElement("ol",null,i.createElement("li",null,"inside the green zone, the curve will have a single inflection, switching concave/convex once."),i.createElement("li",null,"between the red and green zones, the curve has two inflections, meaning its curvature switches between concave/convex form twice."),i.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.")),i.createElement("p",null,"Of course, this map is fairly small, but the regions extend to infinity, with well defined boundaries."),i.createElement("div",{className:"note"},i.createElement("h3",{id:"wait-where-do-those-lines-come-from-"},"Wait, where do those lines come from?"),i.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.'),i.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.'),i.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".')),i.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."),i.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)."),i.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 ",i.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 ",i.createElement("i",null,"z")," coordinate that is always 1, then we can suddenly add arbitrary values. For example:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/00ca2970fccea8f0883af6db4fbc3a60efd2539d.svg",width:"495.59999999999997",height:"57.4"}),i.createElement("p",null,"Sweet! ",i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/1a48a27661f19f066ddd591fb4fc0d553b34c944.svg",width:"477.4",height:"60.199999999999996"}),i.createElement("p",null,"Running all our coordinates through this transformation gives a new set of coordinates, let's call those ",i.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 ",i.createElement("i",null,"x=0")," line, so what we want is a transformation matrix that, when we run it, subtracts ",i.createElement("i",null,"x")," from whatever ",i.createElement("i",null,"x")," we currently have. This is called ",i.createElement("a",{href:"https://en.wikipedia.org/wiki/Shear_matrix"},"shearing"),", and the typical x-shear matrix and its transformation looks like this:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/8e98c870c9d5b60bccf196d29e290f9de6657ce7.svg",width:"204.39999999999998",height:"56"}),i.createElement("p",null,"So we want some shearing value that, when multiplied by ",i.createElement("i",null,"y"),", yields ",i.createElement("i",null,"-x"),", so our x coordinate becomes zero. That value is simpy ",i.createElement("i",null,"-x/y"),", because ",i.createElement("i",null,"-x/y * y = -x"),". Done:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/585fa88864a98008c15225bdbeb0eb26a4653dab.svg",width:"140",height:"70"}),i.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 ",i.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",i.createElement("sub",null,"x"),", and y-scaling by point2",i.createElement("sub",null,"y"),". This is really easy:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/bf9c60b59e6247de3fece63638a8333bdcd068a4.svg",width:"144.2",height:"74.19999999999999"}),i.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 ",i.createElement("code",null,"y/x")," rather than ",i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/af412fd7df7faf35973314095ec6bf1cb28a8e34.svg",width:"147",height:"68.6"}),i.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:'),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/66e084e9ee396b8cc40de3d0df9c4658dcd10e14.svg",width:"477.4",height:"95.19999999999999"}),i.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!"),i.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?"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d2dc58a4a6951ff27e5b83fb9be239e2fbe0f7ce.svg",width:"371",height:"61.599999999999994"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/ebaea590e50dfce555e8ad2c63682fe9e6285f06.svg",width:"428.4",height:"42"}),i.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!"),i.createElement("div",{className:"note"},i.createElement("h3",{id:"how-do-you-track-all-that-"},"How do you track all that?"),i.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 ",i.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, ",i.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."),i.createElement("p",null,"Now, I know, you're thinking \"but Mathematica is super expensive!\" and that's true, it's ",i.createElement("a",{href:"http://www.wolfram.com/mathematica-home-edition"},"$295 for home use"),", but it's ",i.createElement("strong",null,"also")," ",i.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 ",i.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.")),i.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:"),i.createElement(r,{title:"A cubic curve mapped to canonical form",setup:e.setup,draw:e.draw}))}},arclength:{locale:"en-GB",title:"Arc length",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"arclength",title:"Arc length",number:"22"}),i.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 ",i.createElement("em",null,"f",i.createElement("sub",null,"x"),"(t)")," and ",i.createElement("em",null,"f",i.createElement("sub",null,"y"),"(t)"),", then the length of the curve, measured from start point to some point ",i.createElement("em",null,"t = z"),", is computed using the following seemingly straight forward (if a bit overwhelming) formula:"),i.createElement("img",{className:"LaTeX SVG", src:"images/latex/16e3f81dfc12c526ca53b477b2aa67ef7b56bfe2.svg",width:"147",height:"35"}),i.createElement("p",null,"or, more commonly written using Leibnitz notation as:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/8e2857c32b23969bca67b0ead318493a3e61dc4a.svg",width:"257.59999999999997",height:"36.4"}),i.createElement("p",null,"This formula says that the length of a parametric curve is in fact equal to the ",i.createElement("strong",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 ",i.createElement("a",{href:"http://www.wolframalpha.com/input/?i=antiderivative+for+sqrt%28%282*%281-t%29*t*B+%2B+t%5E2*C%29%27%5E2+%2B+%282*%281-t%29*t*E%29%27%5E2%29&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: ",i.createElement("strong",null,i.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"')),"."),i.createElement("p",null,"Seriously: ",i.createElement("a",{href:"https://en.wikipedia.org/wiki/Abel%E2%80%93Ruffini_theorem"},"It cannot be done"),"."),i.createElement("p",null,"So we turn to numerical approaches again. The method we'll look at here is the ",i.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 ",i.createElement("em",null,"n",i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/e6a8d7d5f1742bb926c0c992d2b89c71090edbf4.svg",width:"576.8",height:"74.19999999999999"}),i.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:'),i.createElement("div",{className:"figure"},i.createElement(r,{inline:!0,static:!0,preset:"empty",title:"A function's approximated integral",setup:e.setup,draw:e.drawCoarseIntegral}),i.createElement(r,{inline:!0,static:!0,preset:"empty",title:"A better approximation",setup:e.setup,draw:e.drawFineIntegral}),i.createElement(r,{inline:!0,static:!0,preset:"empty",title:"An even better approximation",setup:e.setup,draw:e.drawSuperFineIntegral})),i.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.'),i.createElement("p",null,"So, the trick is to come up with useful rectangular strips. A naive way is to simply create ",i.createElement("em",null,"n")," strips, all with the same width, but there is a far better way using special values for ",i.createElement("em",null,"C")," and ",i.createElement("em",null,"f(t)")," depending on the value of ",i.createElement("em",null,"n"),", which indicates how many strips we'll use, and it's called the Legendre-Gauss quadrature."),i.createElement("p",null,"This approach uses strips that are ",i.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."),i.createElement("div",{className:"note"},i.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 ",i.createElement("em",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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/631e6396082d9621472546b87c2e27065990d568.svg",width:"358.4",height:"75.6"}),i.createElement("p",null,"That may look a bit more complicated, but the fraction involving ",i.createElement("em",null,"z")," is a fixed number, so the summation, and the evaluation of the ",i.createElement("em",null,"f(t)")," values are still pretty simple."),i.createElement("p",null,"So, what do we need to perform this calculation? For one, we'll need an explicit formula for ",i.createElement("em",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 ",i.createElement("em",null,"C",i.createElement("sub",null,"i"))," and ",i.createElement("em",null,"t",i.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 ",i.createElement("em",null,"n"),", so if we want to approximate our integral with only two terms (which is a bit low, really) then ",i.createElement("a",{href:"legendre-gauss.html"},"these tables")," would tell us that for ",i.createElement("em",null,"n=2")," we must use the following values:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/6dc4299695f03c27c362e7faf47ae4474794809e.svg",width:"65.8",height:"98"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/fe54606651e308caf83a65e53bc4d6104f8a4ee1.svg",width:"499.79999999999995",height:"46.199999999999996"}),i.createElement("p",null,"We can program that pretty easily, provided we have that ",i.createElement("em",null,"f(t)")," available, which we do, as we know the full description for the Bézier curve functions B",i.createElement("sub",null,"x"),"(t) and B",i.createElement("sub",null,"y"),"(t).")),i.createElement("p",null,"If we use the Legendre-Gauss values for our ",i.createElement("em",null,"C")," values (thickness for each strip) and ",i.createElement("em",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?"),i.createElement(r,{title:"Arc length for a Bézier curve",setup:e.setupCurve,draw:e.drawCurve}))}},arclengthapprox:{locale:"en-GB",title:"Approximated arc length",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"arclengthapprox",title:"Approximated arc length",number:"23"}),i.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."),i.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:"),i.createElement(r,{preset:"twopanel",title:"Approximate quadratic curve arc length",setup:e.setupQuadratic,draw:e.draw,onKeyDown:e.props.onKeyDown}),i.createElement(r,{preset:"twopanel",title:"Approximate cubic curve arc length",setup:e.setupCubic,draw:e.draw,onKeyDown:e.props.onKeyDown}),i.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."))}},tracing:{locale:"en-GB",title:"Tracing a curve at fixed distance intervals",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"tracing",title:"Tracing a curve at fixed distance intervals",number:"24"}),i.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."),i.createElement("p",null,"Now you have a problem."),i.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 ",i.createElement("em",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 "',i.createElement("em",null,"t"),' value", by plotting them against one another.'),i.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-",i.createElement("em",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)."),i.createElement(r,{preset:"twopanel",title:"The t-for-distance function",setup:e.setup,draw:e.plotOnly}),i.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 ",i.createElement("em",null,"t"),", which means we also can't compute the true inverted function that gives ",i.createElement("em",null,"t")," as an expression of length. So how do we fix this?"),i.createElement("p",null,"One way is to do what the graphic does: simply run through the curve, determine its ",i.createElement("em",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 ",i.createElement("em",null,"t")," value, given a distance along the curve. This works quite well, actually, and is fairly fast."),i.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 ",i.createElement("em",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:"),i.createElement(r,{preset:"threepanel",title:"Fixed-interval coloring a curve",setup:e.setup,draw:e.drawColoured,onKeyDown:e.props.onKeyDown}),i.createElement("p",null,"Use your up and down arrow keys to increase or decrease the number of equidistant segments used to colour the curve."),i.createElement("p",null,'However, are there better ways? One such way is discussed in "',i.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)."))}},intersections:{locale:"en-GB",title:"Intersections",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"intersections",title:"Intersections",number:"25"}),i.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 ",i.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."),i.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."),i.createElement("h3",{id:"line-line-intersections"},"Line-line intersections"),i.createElement("p",null,"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 ",i.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."),i.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)."),i.createElement(r,{title:"Line/line intersections",setup:e.setupLines,draw:e.drawLineIntersection}),i.createElement("div",{className:"howtocode"},i.createElement("h3",{id:"implementing-line-line-intersections"},"Implementing line-line intersections"),i.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:"),i.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)\n")),i.createElement("h3",{id:"what-about-curve-line-intersections-"},"What about curve-line intersections?"),i.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."),i.createElement(r,{title:"Quadratic curve/line intersections",setup:e.setupQuadratic,draw:e.draw}),i.createElement(r,{title:"Cubic curve/line intersections",setup:e.setupCubic,draw:e.draw}),i.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."))}},curveintersection:{locale:"en-GB",title:"Curve/curve intersection",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"curveintersection",title:"Curve/curve intersection",number:"26"}),i.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:'),i.createElement("ul",null,i.createElement("li",null,"Take two curves ",i.createElement("em",null,"C",i.createElement("sub",null,"1"))," and ",i.createElement("em",null,"C",i.createElement("sub",null,"2")),", and treat them as a pair."),i.createElement("li",null,"If their bounding boxes overlap, split up each curve into two sub-curves"),i.createElement("li",null,"With ",i.createElement("em",null,"C",i.createElement("sub",null,"1.1")),", ",i.createElement("em",null,"C",i.createElement("sub",null,"1.2")),", ",i.createElement("em",null,"C",i.createElement("sub",null,"2.1"))," and ",i.createElement("em",null,"C",i.createElement("sub",null,"2.2")),", form four new pairs (",i.createElement("em",null,"C",i.createElement("sub",null,"1.1")),",",i.createElement("em",null,"C",i.createElement("sub",null,"2.1")),"), (",i.createElement("em",null,"C",i.createElement("sub",null,"1.1")),", ",i.createElement("em",null,"C",i.createElement("sub",null,"2.2")),"), (",i.createElement("em",null,"C",i.createElement("sub",null,"1.2")),",",i.createElement("em",null,"C",i.createElement("sub",null,"2.1")),"), and (",i.createElement("em",null,"C",i.createElement("sub",null,"1.2")),",",i.createElement("em",null,"C",i.createElement("sub",null,"2.2")),")."),i.createElement("li",null,"For each pair, check whether their bounding boxes overlap.",i.createElement("ul",null,i.createElement("li",null,"If their bounding boxes do not overlap, discard the pair, as there is no intersection between this pair of curves."),i.createElement("li",null,"If there ",i.createElement("em",null,"is")," overlap, rerun all steps for this pair."))),i.createElement("li",null,"Once the sub-curves we form are so small that they effectively occupy sub-pixel areas, we consider an intersection found.")),i.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.'),i.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!)"),i.createElement(r,{preset:"clipping",title:"Curve/curve intersections",setup:e.setup,draw:e.draw},"\\t",i.createElement("button",{onClick:e.stepUp},"advance one step")),i.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."))}},abc:{locale:"en-GB",title:"The projection identity",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"abc",title:"The projection identity",number:"27"}),i.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."),i.createElement("p",null,"How does that work? Succinctly: we run de Casteljau's algorithm in reverse!"),i.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 ",i.createElement("em",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.'),i.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?):'),i.createElement("div",{className:"figure"},i.createElement(r,{inline:!0,preset:"abc",title:"Projections in a quadratic Bézier curve",setup:e.setupQuadratic,draw:e.draw,onClick:e.onClick}),i.createElement(r,{inline:!0,preset:"abc",title:"Projections in a cubic Bézier curve",setup:e.setupCubic,draw:e.draw,onClick:e.onClick})),i.createElement("p",null,"Clicking anywhere on the curves shows us three things:"),i.createElement("ol",null,i.createElement("li",null,"our on-curve point; let's call that ",i.createElement("b",null,"B"),","),i.createElement("li",null,"a point at the tip of B's \"hat\", on de Casteljau step up; let's call that ",i.createElement("b",null,"A"),", and"),i.createElement("li",null,"a point that we get by projecting B onto the start--end baseline; let's call that ",i.createElement("b",null,"C"),".")),i.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 ",i.createElement("em",null,"t")," value, the ratio distance of C along baseline is fixed: if some ",i.createElement("em",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 ",i.createElement("em",null,"t")," value, C will ",i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/f48f095d9c37c079ff6a5f71b3047397aa7dfc6b.svg",width:"207.2",height:"16.799999999999997"}),i.createElement("p",null,"So that just leaves finding A."),i.createElement("div",{className:"note"},i.createElement("p",null,"While that relation is fixed, the function ",i.createElement("em",null,"u(t)")," differs depending on whether we're working with quadratic or cubic curves:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/cb35e42bf53bfc2b96f959e78256da01f8b91dbc.svg",width:"207.2",height:"91"}),i.createElement("p",null,"So, if we know the start and end coordinates, and we know the ",i.createElement("em",null,"t")," value, we know C:"),i.createElement("div",{className:"figure"},i.createElement(r,{inline:!0,preset:"abc",title:"Quadratic value of C for t",draw:e.drawQCT,onMouseMove:e.setCT}),i.createElement(r,{inline:!0,preset:"abc",title:"Cubic value of C for t",draw:e.drawCCT,onMouseMove:e.setCT})),i.createElement("p",null,"Mouse-over the graphs to see the expression for C, given the ",i.createElement("em",null,"t")," value at the mouse pointer.")),i.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 ",i.createElement("em",null,"ratio")," between the two distances is stable: given some ",i.createElement("em",null,"t")," value, the following always holds:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/6cb3e94fe9164128a25570a32abed15baa726f17.svg",width:"263.2",height:"40.599999999999994"}),i.createElement("p",null,"This leads to a pretty powerful bit of knowledge: merely by knowing the ",i.createElement("em",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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/1dffb79b42799c95c899e689b074361f662ec807.svg",width:"228.2",height:"39.199999999999996"}),i.createElement("p",null,"And that's it, all values found."),i.createElement("div",{className:"note"},i.createElement("p",null,"Much like the ",i.createElement("em",null,"u(t)")," function in the above note, the ",i.createElement("em",null,"ratio(t)")," function depends on whether we're looking at quadratic or cubic curves. Their form is intrinsically related to the ",i.createElement("em",null,"u(t)")," function in that they both come rolling out of the same function evalution, explained over on ",i.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.'),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/7ef64890f95db9e48258edb46a3d52d5ed143155.svg",width:"257.59999999999997",height:"43.4"}),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/5f2bb71795c615637d632da70b722938cb103b03.svg",width:"233.79999999999998",height:"43.4"}),i.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 ',i.createElement("em",null,"C"),'" is no longer fixed, moving around as we move the control points, and projections of ',i.createElement("em",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.")),i.createElement("p",null,"So: if we know B and its corresponding ",i.createElement("em",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.'))}},moulding:{locale:"en-GB",title:"Manipulating a curve",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"moulding",title:"Manipulating a curve",number:"28"}),i.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 ',i.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.'),i.createElement(r,{preset:"moulding",title:"Moulding a quadratic Bézier curve",setup:e.setupQuadratic,draw:e.drawMould,onClick:e.placeMouldPoint,onMouseDown:e.markQB,onMouseDrag:e.dragQB,onMouseUp:e.saveCurve}),i.createElement("p",null,i.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 ",i.createElement("i",null,"t"),"-value, the original point C for that ",i.createElement("i",null,"t"),"-value, as well as the new point B' based on the mouse cursor. Since we know the ",i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/e361e1235c94bbe87e95834c7fcfb6ab96e028b9.svg",width:"226.79999999999998",height:"37.8"}),i.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:"),i.createElement(r,{preset:"moulding",title:"Moulding a cubic Bézier curve",setup:e.setupCubic,draw:e.drawMould,onClick:e.placeMouldPoint, onMouseDown:e.markCB,onMouseDrag:e.dragCB,onMouseUp:e.saveCurve}),i.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 ",i.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."),i.createElement("p",null,"First, we construct the one-level-of-de-Casteljau-up points:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/1833383a4800c495451abcacc2ada34e5601995d.svg",width:"140",height:"78.39999999999999"}),i.createElement("p",null,"And then we can compute the new control points:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d53cad094fddaacbb047c9d7c465a5011e3bfbfd.svg",width:"163.79999999999998",height:"78.39999999999999"}),i.createElement("p",null,"And that's cubic curve manipulation."))}},pointcurves:{locale:"en-GB",title:"Creating a curve from three points",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"pointcurves",title:"Creating a curve from three points",number:"29"}),i.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 ",i.createElement("em",null,"t")," value, so we can figure out where point 'C' needs to be."),i.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 ",i.createElement("em",null,"t")," to simply be 0.5, lets us bypass some maths, since a ",i.createElement("em",null,"t")," value of 0.5 always puts C in the middle of the start--end line segment)"),i.createElement(r,{preset:"generate",title:"Fitting a quadratic Bézier curve",setup:e.setup,draw:e.drawQuadratic,onClick:e.onClick}),i.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 ',i.createElement("em",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:'),i.createElement(r,{preset:"generate",title:"Fitting a cubic Bézier curve",setup:e.setup,draw:e.drawCubic,onClick:e.onClick}),i.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 ',i.createElement("em",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 ",i.createElement("em",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.'))}},catmullconv:{locale:"en-GB",title:"Bézier curves and Catmull-Rom curves",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"catmullconv",title:"Bézier curves and Catmull-Rom curves",number:"30"}),i.createElement("p",null,"Taking an excursion to different splines, the other common design curve is the ",i.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?"),i.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" descriptionfor how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point P',i.createElement("sub",null,"x"),", has a tangent along the line P",i.createElement("sub",null,"x-1")," to P",i.createElement("sub",null,"x+1"),". The curve runs from points P",i.createElement("sub",null,"2")," to P",i.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.'),i.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."),i.createElement("p",null,"We start with showing the Catmull-Rom matrix form:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/5fc1c44e623f2a9fbeefdaa204557479e3debf5a.svg",width:"429.79999999999995",height:"78.39999999999999"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/40b9ca9b5755a4be49517ddfa630fef7b8e23067.svg",width:"406",height:"86.8"}),i.createElement("div",{className:"note"},i.createElement("h2",{id:"where-did-that-2-come-from-"},"Where did that 2 come from?"),i.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."),i.createElement("p",null,'However, the "real" matrix is this:'),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/7bf9b5e971866babedd991ccdde5c4ab104297e5.svg",width:"351.4",height:"88.19999999999999"}),i.createElement("p",null,"This bakes in the tension factor τ explicitly.")),i.createElement("p",null,'Plugging this into the "two coordinates and two tangent vectors" matrix form, we get:'),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/4818f8797c35f23c2b9883aa986b1129b2fa151a.svg",width:"299.59999999999997",height:"78.39999999999999"}),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/08f77989369f664cbc0fb7526791efd4c5299d70.svg",width:"499.79999999999995",height:"77"}),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7ae769c5370469b16523bab6f34abf0dd6749be.svg",width:"414.4",height:"77"}),i.createElement("p",null,"So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/7250f1c57e2bd66ec4349e4e88db4d5d74401a06.svg",width:"730.8",height:"77"}),i.createElement("p",null,"The difference is somewhere in the actual hermite matrix, since the ",i.createElement("em",null,"t")," and coordinate values are identical, so let's solve that matrix equasion:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/8a42b24fca3aaf6b8ec08e84b7e91c43e26e8acf.svg",width:"418.59999999999997",height:"75.6"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e111d6e846f4d7204dec484005f74993e66c6c9.svg",width:"841.4",height:"84"}),i.createElement("p",null,"Which gives us:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/f94b80113772d90a4fbc93d4495cb5767e5c8123.svg",width:"183.39999999999998",height:"75.6"}),i.createElement("p",null,"Multiplying this ",i.createElement("strong",null,i.createElement("em",null,"A"))," with our coordinates will give us a proper Bézier matrix expression again:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/d088274e440ceeac2916a0f32176682d776c1c57.svg",width:"448",height:"77"}),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/9e68f80b270d3445d9f9cb28ff2c5aed219aa9d2.svg",width:"365.4",height:"85.39999999999999"}),i.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):"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/92a34d777899da97f1907e6b093db28872f02c3a.svg",width:"261.8",height:"89.6"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/ee3d3d219a18596dc403c0392d44bc585d738e6c.svg",width:"309.4",height:"81.19999999999999"}),i.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."))}},catmullmoulding:{locale:"en-GB",title:"Creating a Catmull-Rom curve from three points",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"catmullmoulding",title:"Creating a Catmull-Rom curve from three points",number:"31"}),i.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?"),i.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."),i.createElement("p",null,"Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of ",i.createElement("i",null,"n")," points, in order to draw the equivalent curve using cubic Bézier curves we need a massive ",i.createElement("i",null,"3n-2")," points (and that's without double-counting points that are shared by consecutive cubic curves)."),i.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:'),i.createElement(r,{preset:"threepanel",title:"Catmull-Rom curve fitting",setup:e.setup,draw:e.draw,onKeyDown:e.props.onKeyDown}),i.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."))}},polybezier:{locale:"en-GB",title:"Forming poly-Bézier curves",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"polybezier",title:"Forming poly-Bézier curves",number:"32"}),i.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:"),i.createElement("ol",null,i.createElement("li",null,"the end point of each section is the starting point of the following section, and"),i.createElement("li",null,"the derivatives across that dual point line up.")),i.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),i.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:"),i.createElement(r,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:e.setupQuadratic,draw:e.draw}),i.createElement(r,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:e.setupCubic,draw:e.draw}),i.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:'),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",width:"130.2",height:"18.2"}),i.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:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",width:"319.2",height:"42"}),i.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..."),i.createElement(r,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:e.setupQuadratic,draw:e.draw,onMouseMove:e.linkDerivatives}),i.createElement(r,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:e.setupCubic,draw:e.draw,onMouseMove:e.linkDerivatives}),i.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."),i.createElement("p",null,"So: let's relax the requirement a little."),i.createElement("p",null,"We can change the constraint so that we still preserve the ",i.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 ",i.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),i.createElement(r,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:e.setupQuadratic,draw:e.draw,onMouseMove:e.linkDirection}),i.createElement(r,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:e.setupCubic,draw:e.draw,onMouseMove:e.linkDirection}),i.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..."),i.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."),i.createElement(r,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:e.setupQuadratic,draw:e.draw,onMouseDown:e.bufferPoints,onMouseMove:e.modelCurve}),i.createElement(r,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:e.setupCubic,draw:e.draw,onMouseDown:e.bufferPoints,onMouseMove:e.modelCurve}),i.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...'),i.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.'))}},shapes:{locale:"en-GB",title:"Boolean shape operations",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"shapes",title:"Boolean shape operations",number:"33"}),i.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)"),i.createElement("p",null,"The procedure for performing boolean operations consists, broadly, of four steps:"),i.createElement("ol",null,i.createElement("li",null,"Find the intersection points between both shapes,"),i.createElement("li",null,"cut up the shapes into multiple sections between these intersections,"),i.createElement("li",null,"discard any section that isn't part of the desired operation's resultant shape, and"),i.createElement("li",null,"link up the remaining sections to form the new shape.")),i.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."),i.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."),i.createElement("p",null,"Once we have all the new poly-Bézier curves, we run the first step of the desired boolean operation."),i.createElement("ul",null,i.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.'),i.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.'),i.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.")),i.createElement("table",{className:"sketch"},i.createElement("tbody",null,i.createElement("tr",null,i.createElement("td",{className:"labeled-image"},i.createElement("img",{src:"images/op_base.gif",height:"169"}),"Two overlapping shapes."),i.createElement("td",{className:"labeled-image"},i.createElement("img",{src:"images/op_union.gif",height:"169"}),"The unified region."),i.createElement("td",{className:"labeled-image"},i.createElement("img",{src:"images/op_intersection.gif",height:"169"}),"Their intersection."),i.createElement("td",{className:"labeled-image"},i.createElement("img",{src:"images/op_exclusion.gif",height:"169"}),"Their exclusion regions.")))),i.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 ',i.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).'),i.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 ",i.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."),i.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."),i.createElement(r,{title:"Boolean shape operations with Paper.js",paperjs:!0,setup:e.setup,draw:e.draw,onMouseMove:e.onMouseMove},i.createElement("br",null),e.modes.map(function(t){var n=e.state.mode===t?"selected":null;return i.createElement("button",{className:n,key:t,onClick:function(){return e.setMode(t)}},t)})))}},projections:{locale:"en-GB",title:"Projecting a point onto a Bézier curve",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"projections",title:"Projecting a point onto a Bézier curve",number:"34"}),i.createElement("p",null,"Say we have a Bézier curve and some point, not on the curve, of which we want to know which ",i.createElement("code",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?"),i.createElement("p",null,"If the Bézier curve is of low enough order, we might be able to ",i.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 ",i.createElement("code",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 ",i.createElement("code",null,"t")," value using a ",i.createElement("a",{href:"https://en.wikipedia.org/wiki/Binary_search_algorithm"},"binary search"),". First, we do a coarse distance-check based on ",i.createElement("code",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:'),i.createElement("ol",null,i.createElement("li",null,"with the ",i.createElement("code",null,"t")," value we found, start with some small interval around ",i.createElement("code",null,"t")," (1/length_of_LUT on either side is a reasonable start),"),i.createElement("li",null,"if the distance to ",i.createElement("code",null,"t ± interval/2")," is larger than the distance to ",i.createElement("code",null,"t"),", try again with the interval reduced to half its original length."),i.createElement("li",null,"if the distance to ",i.createElement("code",null,"t ± interval/2")," is smaller than the distance to ",i.createElement("code",null,"t"),", replace ",i.createElement("code",null,"t")," with the smaller-distance value."),i.createElement("li",null,"after reducing the interval, or changing ",i.createElement("code",null,"t"),", go back to step 1.")),i.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 ",i.createElement("code",null,"t")," for. In this case, I'm arbitrarily fixing it at 0.0001."),i.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" ',i.createElement("code",null,"t")," value."),i.createElement(r,{title:"Projecting a point onto a Bézier curve",setup:e.setup,draw:e.draw,onMouseMove:e.onMouseMove}))}},offsetting:{locale:"en-GB",title:"Curve offsetting",getContent:function(e){return i.createElement("section",null,i.createElement(a,{name:"offsetting",title:"Curve offsetting",number:"35"}),i.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."),i.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?"),i.createElement("p",null,"Bottom line: ",i.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."),i.createElement("div",{className:"note"},i.createElement("h3",{id:"-what-do-you-mean-you-can-t-prove-it-"},'"What do you mean, you can\'t. Prove it."'),i.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 ',i.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),i.createElement("p",null,"From a mathematical point of view, an offset curve ",i.createElement("code",null,"O(t)")," is a curve such that, given our original curve ",i.createElement("code",null,"B(t)"),", any point on ",i.createElement("code",null,"O(t)")," is a fixed distance ",i.createElement("code",null,"d")," away from coordinate ",i.createElement("code",null,"B(t)"),". So let's math that:"),i.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",width:"113.39999999999999",height:"16.799999999999997"}),i.createElement("p",null,"However, we're working in 2D, and ",i.createElement("code",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",i.createElement("code",null,"d"),' "away" from the curve ',i.createElement("code",null,"B(t)")," then what we really mean is that we want a point at ",i.createElement("code",null,"d"),' times the "normal vector" from point ',i.createElement("code",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',i.createElement("code",null,"B(t)"),". Easy enough:"),i.createElement("img",{