From b034ef0145beb55e27eb1baef82da6fd427a881b Mon Sep 17 00:00:00 2001 From: Pomax Date: Fri, 3 Mar 2017 09:40:57 -0800 Subject: [PATCH] japanese LaTeX --- article.ja-JP.js | 6 +++--- images/latex/4df1806ffb320c3897c3c20993d03078cfdf6b77.svg | 1 + images/latex/6ebb09409bd37de7f750f785fae607007d737e25.svg | 1 + images/latex/98885bce8eeabb5a9bdddd12cd6cb4382115ad5c.svg | 1 + images/latex/a62e2a83d7ea05d2a2083f3091ba3597ef84de8e.svg | 1 + images/latex/d88b11ec034be6476b7c4406efc52c2df345c474.svg | 1 + 6 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 images/latex/4df1806ffb320c3897c3c20993d03078cfdf6b77.svg create mode 100644 images/latex/6ebb09409bd37de7f750f785fae607007d737e25.svg create mode 100644 images/latex/98885bce8eeabb5a9bdddd12cd6cb4382115ad5c.svg create mode 100644 images/latex/a62e2a83d7ea05d2a2083f3091ba3597ef84de8e.svg create mode 100644 images/latex/d88b11ec034be6476b7c4406efc52c2df345c474.svg diff --git a/article.ja-JP.js b/article.ja-JP.js index 42b1de05..9940562d 100644 --- a/article.ja-JP.js +++ b/article.ja-JP.js @@ -25,9 +25,9 @@ _class:"PathIterator",initialize:function(e,t,n,r){function i(e,t){var n=A.getVa className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i-10&&(l.push({x:i*u,y:i*c}),e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a)),u=o,c=s;l.push({x:i*u,y:i*c}),e.text("Curve form has cusp →",{x:n/2-2*i,y:r/2+i/2.5}),e.setColor("#FF00FF"),e.setFill(e.getColor());var h=Math.sqrt;for(o=1;o>=0;o-=.005)l.push({x:i*u,y:i*c}),s=.5*(h(3)*h(4*o-o*o)-o),e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a),u=o,c=s;for(l.push({x:i*u,y:i*c}),e.text("← Curve forms a loop at t = 1",{x:n/2+i/4,y:r/2+i/1.5}),e.setColor("#3300FF"),e.setFill(e.getColor()),o=0;o>-n;o-=.01)l.push({x:i*u,y:i*c}),s=(-o*o+3*o)/3,e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a),u=o,c=s;l.push({x:i*u,y:i*c}),e.text("← Curve forms a loop at t = 0",{x:n/2-i+10,y:r/2-1.25*i}),e.setColor("transparent"),e.setFill("rgba(255,120,100,0.2)"),e.drawPath(l,a),l=[{x:-n/2,y:i},{x:n/2,y:i},{x:n/2,y:r},{x:-n/2,y:r}],e.setFill("rgba(0,200,0,0.2)"),e.drawPath(l,a),e.setColor("black"),e.setFill(e.getColor()),e.text("← Curve form has one inflection →",{x:n/2-i,y:r/2+1.75*i}),e.text("← Plain curve ↕",{x:n/2+i/2,y:r/6}),e.text("↕ Double inflection",{x:10,y:r/2-10}),e._map_image=e.toImage(),e._map_loaded=!0},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="catmullconv",s=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="catmullmoulding",s=n(15),l=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:a.getTitle(o)}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s(l)},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",width:"183.39999999999998rem",height:"42rem"})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",width:"298.2rem",height:"42rem"})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",width:"229.6rem",height:"42rem"})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",width:"588rem",height:"18.2rem"})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",width:"106.39999999999999rem",height:"40.599999999999994rem"})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3bd9c2d6740ff530aabcbe60252742032af816e9.svg",width:"242.2rem",height:"204.39999999999998rem"})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",width:"197.39999999999998rem",height:"33.599999999999994rem"})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",width:"264.59999999999997rem",height:"36.4rem"})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7fca7664a3acb855eeaaf412aa2331202f41097.svg",width:"428.4rem",height:"81.19999999999999rem"})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3251cd91a1cffc27a1695ece4c13cc651d7007fb.svg",width:"418.59999999999997rem",height:"161rem"})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",width:"259rem",height:"56rem"})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points. However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{preset:"arcfitting",title:"Cubic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,'We see two curves here; in blue, our "guessed" curve and its control points, and in grey/black, the true curve fit, with proper control points that were shifted in, along line between our guessed control points, such that the derivatives at the start and end points are correct.'),r.createElement("p",null,'We can already seethat cubic curves are a lot better than quadratic curves, and don\'t look all that wrong until we go well past a quarter circle; ⅜th starts to hint at problems, and half a circle has an obvious "gap" between the real circle and the cubic approximation. Anything past that just looks plain ridiculous... but quarter curves actually look pretty okay!'),r.createElement("p",null,'So, maths time again: how okay is "okay"? Let\'s apply some more maths to find out.'),r.createElement("p",null,"Unlike for the quadratic curve, we can't use ",r.createElement("i",null,"t=0.5")," as our reference point because by its very nature it's one of the three points that are actually guaranteed to lie on the circular curve. Instead, we need a different ",r.createElement("i",null,"t")," value. If we run some analysis on the curve we find that the actual ",r.createElement("i",null,"t"),' value at which the curve is furthest from what it should be is 0.211325 (rounded), but we don\'t know "why", since finding this value involves root-finding, and is nearly impossible to do symbolically without pages and pages of math just to express one of the possible solutions.'),r.createElement("p",null,"So instead of walking you through the derivation for that value, let's simply take that ",r.createElement("i",null,"t")," value and see what the error is for circular arcs with an angle ranging from 0 to 2π:"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{ src:"images/arc-c-2pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ 2π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:"))))),r.createElement("p",null,"We see that cubic Bézier curves are much better when it comes to approximating circular arcs, with an error of less than 0.027 at the two \"bulge\" points for a quarter circle (which had an error of 0.06 for quadratic curves at the mid point), and an error near 0.001 for an eighth of a circle, so we're getting less than half the error for a quarter circle, or: at a slightly lower error, we're getting twice the arc. This makes cubic curves quite useful!"),r.createElement("p",null,'In fact, the precision of a cubic curve at a quarter circle is considered "good enough" by so many people that it\'s generally considered "just fine" to use four cubic Bézier curves to fake a full circle when no circle primitives are available; generally, people won\'t notice that it\'s not a real circle unless you also happen to overlay an actual circle, so that the difference becomes obvious.'),r.createElement("p",null,'So with the error analysis out of the way, how do we actually compute the coordinates needed to get that "true fit" cubic curve? The first observation is that we already know the start and end points, because they\'re the same as for the quadratic attempt:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",width:"183.39999999999998rem",height:"42rem"})),r.createElement("p",null,"But we now need to find two control points, rather than one. If we want the derivatives at the start and end point to match the circle, then the first control point can only lie somewhere on the vertical line through S, and the second control point can only lie somewhere on the line tangent to point E, which means:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4df65dae78bc5a0e6c5f23a2faae9a9d7a8b39b3.svg",width:"118.99999999999999rem",height:"42rem"})),r.createElement("p",null,'where "a" is some scaling factor, and:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cb32f8f9c3ae2b264a48003c237a798d02dc8935.svg",width:"170.79999999999998rem",height:"42rem"})),r.createElement("p",null,'where "b" is also some scaling factor.'),r.createElement("p",null,"Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonoetric identities, so if you just want to see the final result just skip past the next section!"),r.createElement("div",{className:"note"},r.createElement("h2",null,"Let's do this thing."),r.createElement("p",null,"Unlike for the quadratic case, we need some more information in order to compute ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),", since they're no longer dependent variables. First, we observe that the curve is symmetrical, so whatever values we end up finding for C",r.createElement("sub",null,"1")," will apply to C",r.createElement("sub",null,"2")," as well (rotated along its tangent), so we'll focus on finding the location of C",r.createElement("sub",null,"1")," only. So here's where we do something that you might not expect: we're going to ignore for a moment, because we're going to have a much easier time if we just solve this problem with geometry first, then move to calculus to solve a much simpler problem."),r.createElement("p",null,"If we look at the triangle that is formed between our starting point, or initial guess C",r.createElement("sub",null,"1"),"and our real C",r.createElement("sub",null,"1"),", there's something funny going on: if we treat the line ","{","start,guess","}"," as our opposite side, the line ","{","guess,real","}"," as our adjacent side, with ","{","start,real","}"," our hypothenuse, then the angle for the corner hypothenuse/adjacent is half that of the arc we're covering. Try it: if you place the end point at a quarter circle (pi/2, or 90 degrees), the angle in our triangle is half a quarter (pi/4, or 45 degrees). With that knowledge, and a knowledge of what the length of any of our lines segments are (as a function), we can determine where our control points are, and thus have everything we need to find the error distance function. Of the three lines, the one we can easiest determine is ","{","start,guess","}",", so let's find out what the guessed control point is. Again geometrically, because we have the benefit of an on-curve ",r.createElement("i",null,"t=0.5")," value."),r.createElement("p",null,"The distance from our guessed point to the start point is exactly the same as the projection distance we looked at earlier. Using ",r.createElement("i",null,"t=0.5"),' as our point "B" in the "A,B,C" projection, then we know the length of the line segment ',"{","C,A","}",", since it's d",r.createElement("sub",null,"1")," = ","{","A,B","}"," + d",r.createElement("sub",null,"2")," = ","{","B,C","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b15a274c1e0a6aeeaf517b5d2c8ee0a7997dd617.svg",width:"417.2rem",height:"42rem"})),r.createElement("p",null,"So that just leaves us to find the distance from ",r.createElement("i",null,"t=0.5")," to the baseline for an arbitrary angle φ, which is the distance from the centre of the circle to our ",r.createElement("i",null,"t=0.5")," point, minus the distance from the centre to the line that runs from start point to end point. The first is the same as the point P we found for the quadratic curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",width:"197.39999999999998rem",height:"33.599999999999994rem"})),r.createElement("p",null,"And the distance from the origin to the line start/end is another application of angles, since the triangle ","{","origin,start,C","}"," has known angles, and two known sides. We can find the length of the line ","{","origin,C","}",", which lets us trivially compute the coordinate for C:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9be55fb38d5d30bbc6c7140afb1c7bc097bc044e.svg",width:"274.4rem",height:"70rem"})),r.createElement("p",null,"With the coordinate C, and knowledge of coordinate B, we can determine coordinate A, and get a vector that is identical to the vector ","{","start,guess","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/262f2eca63105779f30a0a5445cf76f60786039a.svg",width:"417.2rem",height:"50.4rem"})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e83ebbac13a84ef6036bf4be57b3d1b6cb316f8.svg",width:"221.2rem",height:"49rem"})),r.createElement("p",null,"Which means we can now determine the distance ","{","start,guessed","}",", which is the same as the distance","{","C,A","}",", and use that to determine the vertical distance from our start point to our C",r.createElement("sub",null,"1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c87e454fb11ef7f15c7386e83ca1ce41a004d8a7.svg",width:"264.59999999999997rem",height:"58.8rem"})),r.createElement("p",null,"And after this tedious detour to find the coordinate for C",r.createElement("sub",null,"1"),", we can find C",r.createElement("sub",null,"2")," fairly simply, since it's lies at distance -C",r.createElement("sub",null,"1y")," along the end point's tangent:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/25f027074b6af8ca7b640e27636e3bf89c28afdb.svg",width:"550.1999999999999rem",height:"82.6rem"})),r.createElement("p",null,"And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.")),r.createElement("p",null,"So, to recap, given an angle φ, the new control coordinates are:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c4d82e44d1c67dda8ba26aa6da0f406d05eba618.svg",width:"215.6rem",height:"42rem"})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3a4b1ee00eebb7697e5513ef9df673928913252e.svg",width:"337.4rem",height:"42rem"})),r.createElement("p",null,'And, because the "quarter curve" special case comes up so incredibly often, let\'s look at what these new control points mean for the curve coordinates of a quarter curve, by simply filling in φ = π/2:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/63e0936b4849d4cdbb9a2e0909181259be951e4d.svg",width:"432.59999999999997rem",height:"35rem"})),r.createElement("p",null,"Which, in decimal values, rounded to six significant digits, is:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fd12e65204a31319b66355c6ff99e6b3d9603b05.svg",width:"432.59999999999997rem",height:"16.799999999999997rem"})),r.createElement("p",null,"Of course, this is for a circle with radius 1, so if you have a different radius circle, simply multiply the coordinate by the radius you need. And then finally, forming a full curve is now a simple a matter of mirroring these coordinates about the origin:"),r.createElement(i,{preset:"simple",title:"Cubic Bézier circle approximation",draw:this.drawCircle,static:!0}))}});e.exports=u},function(e,t,n){"use strict";var r=n(0),i={width:"calc(960px + 2em)",marginTop:0,borderTop:"1px solid rgba(255, 0, 0, 0.5)",paddingTop:"3em"},a=r.createElement("section",{id:"comments",style:i},r.createElement("h2",null,"Comments and questions"),r.createElement("p",null,"If you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you can always ",r.createElement("a",{className:"link",href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"buy me a coffee"),", however much a coffee is where you live. This work has grown over the years, from a small primer to a 70ish print-page-equivalent reader on the subject of Bézier curves, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing!"),r.createElement("div",{id:"disqus_thread"})),o=r.createClass({displayName:"CommentsAndQuestions",getDefaultProps:function(){return{title:"Comments and Questions"}},componentDidMount:function(){if("undefined"!=typeof document){var e=document.createElement("script");e.setAttribute("async","async"),e.src="lib/site/disqus.js",document.head.appendChild(e)}},render:function(){return a}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="components",s=r.createClass({displayName:"Components",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[2].x=210,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.setPanelCount(3),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.order+1,r=20,i=t.points,a=e.getPanelWidth(),o=e.getPanelHeight(),s={x:a,y:0},l=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.x}});e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"x",0,a,s),s.x+=r,e.drawCurve(new e.Bezier(l),s),s.x+=a-r;var u=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.y}});e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"y",0,a,s),s.x+=r,e.drawCurve(new e.Bezier(u),s)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="control",s=r.createClass({displayName:"Control",getDefaultProps:function(){return{title:a.getTitle(o)}},drawCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t)},drawFunction:function(e,t,n,r){e.setRandomColor(),e.drawFunction(r),e.setFill(e.getColor()),t&&e.text(t,n)},drawLerpBox:function(e,t,n,r){e.noColor(),e.setFill("rgba(0,0,100,0.2)");var i={x:r.x-5,y:n},a={x:r.x+5,y:t};e.drawRect(i,a),e.setColor("black")},drawLerpPoint:function(e,t,n,r,i){i.y=n+t*r,e.drawCircle(i,3),e.setFill("black"),e.text((1e4*t|0)/100+"%",{x:i.x+10,y:i.y+4}),e.noFill()},drawQuadraticLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,2*(1-a)*a,n,r,i),this.drawLerpPoint(e,a*a,n,r,i)}this.drawFunction(e,"first term",{x:2*n,y:r},function(e){return{x:n+e*r,y:n+r*(1-e)*(1-e)}}),this.drawFunction(e,"second term",{x:t/2-1.5*n,y:t/2+n},function(e){return{x:n+e*r,y:n+2*r*(1-e)*e}}),this.drawFunction(e,"third term",{x:r-2.5*n,y:r},function(e){return{x:n+e*r,y:n+r*e*e}})},drawCubicLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,3*(1-a)*(1-a)*a,n,r,i),this.drawLerpPoint(e,3*(1-a)*a*a,n,r,i),this.drawLerpPoint(e,a*a*a,n,r,i)}this.drawFunction(e,"first term",{x:2*n,y:r},function(e){return{x:n+e*r,y:n+r*(1-e)*(1-e)*(1-e)}}),this.drawFunction(e,"second term",{x:t/2-4*n,y:t/2},function(e){return{x:n+e*r,y:n+3*r*(1-e)*(1-e)*e}}),this.drawFunction(e,"third term",{x:t/2+2*n,y:t/2},function(e){return{x:n+e*r,y:n+3*r*(1-e)*e*e}}),this.drawFunction(e,"fourth term",{x:r-2.5*n,y:r},function(e){return{x:n+e*r,y:n+r*e*e*e}})},draw15thLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var i,a=[1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1],o=e.hover;if(o&&o.x>=n&&o.x<=t-n)for(this.drawLerpBox(e,t,n,o),i=0;i<=15;i++){var s=(o.x-n)/r,l=a[i]*Math.pow(1-s,15-i)*Math.pow(s,i);this.drawLerpPoint(e,l,n,r,o)}for(i=0;i<=15;i++){var u=!1,c=!1;0===i&&(u="first term",c={x:n+5,y:r}),15===i&&(u="last term",c={x:t-3.5*n,y:r}),this.drawFunction(e,u,c,function(e){return{x:n+e*r,y:n+r*a[i]*Math.pow(1-e,15-i)*Math.pow(e,i)}})}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="curveintersection",s=Math.abs,l=r.createClass({displayName:"CurveIntersections",getDefaultProps:function(){return{title:a.getTitle(o)}},setup:function(e){this.api=e,e.setPanelCount(3);var t=new e.Bezier(10,100,90,30,40,140,220,220),n=new e.Bezier(5,150,180,20,80,250,210,190);e.setCurve(t,n),this.pairReset()},pairReset:function(){this.prevstep=0,this.step=0},draw:function(e,t){var n=this;e.reset();var r={x:0,y:0};t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var i=e.getPanelWidth(),a=e.getPanelHeight();if(r.x+=i,e.drawLine({x:0,y:0},{x:0,y:a},r),0===this.step&&(this.pairs=[{c1:t[0],c2:t[1]}]),this.step!==this.prevstep){var o=this.pairs;this.pairs=[],this.finals=[],o.forEach(function(t){if(t.c1.length()<.6&&t.c2.length()<.6)return n.finals.push(t);var i=t.c1.split(.5);e.setColor("black"),e.drawCurve(t.c1,r),e.setColor("red"),e.drawbbox(i.left.bbox(),r),e.drawbbox(i.right.bbox(),r);var a=t.c2.split(.5);e.setColor("black"),e.drawCurve(t.c2,r),e.setColor("blue"),e.drawbbox(a.left.bbox(),r),e.drawbbox(a.right.bbox(),r),i.left.overlaps(a.left)&&n.pairs.push({c1:i.left,c2:a.left}),i.left.overlaps(a.right)&&n.pairs.push({c1:i.left,c2:a.right}),i.right.overlaps(a.left)&&n.pairs.push({c1:i.right,c2:a.left}),i.right.overlaps(a.right)&&n.pairs.push({c1:i.right,c2:a.right})}),this.prevstep=this.step}else this.pairs.forEach(function(t){e.setColor("black"),e.drawCurve(t.c1,r),e.drawCurve(t.c2,r),e.setColor("red"),e.drawbbox(t.c1.bbox(),r),e.setColor("blue"),e.drawbbox(t.c2.bbox(),r)});0===this.pairs.length&&(this.pairReset(),this.draw(e,t)),r.x+=i,e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:a},r);var l,u,c=t[0].intersects(t[1]).map(function(e){var t=e.split("/").map(function(e){return parseFloat(e)});return{t1:t[0],t2:t[1]}}),h=c[0],d=function(e,t){return s(e.t1-t.t1)<.01&&s(e.t2-t.t2)<.01};for(u=1;u.95)&&(e.text("t = "+Math.round(h),{x:c.x+1.25*s*Math.cos(h)-10,y:c.y+1.25*l*Math.sin(h)+5}),e.drawCircle(u,2,c))}},render:function(){return r.createElement("section",null,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="extended",s=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=new e.Bezier(70,155,20,110,100,75);e.setCurve(t)},setupCubic:function(e){var t=new e.Bezier(60,105,75,30,215,115,140,160);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("lightgrey");var n,r,i=.05,a=-10,o=t.get(a-i);for(n=a;n<=i;n+=i)r=t.get(n),e.drawLine(o,r),o=r;o=t.get(1);var s=10;for(n=1+i;n<=s;n+=i)r=t.get(n),e.drawLine(o,r),o=r},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="extremities",s=r.createClass({displayName:"Extremities",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[2].x=210,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.setPanelCount(3),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.order+1,r=20,i=t.points,a=e.getPanelWidth(),o=e.getPanelHeight(),s={x:a,y:0},l=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.x}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"x",0,a,s),s.x+=r;var u=new e.Bezier(l);e.drawCurve(u,s),e.setColor("red"),u.extrema().y.forEach(function(t){var n=u.get(t);e.drawCircle(n,3,s)}),s.x+=a-r;var c=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.y}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"y",0,a,s),s.x+=r;var h=new e.Bezier(c);e.drawCurve(h,s),e.setColor("red"),h.extrema().y.forEach(function(t){var n=h.get(t);e.drawCircle(n,3,s)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="flattening",s=n(15),l=r.createClass({displayName:"Flattening",statics:{keyHandlingOptions:{propName:"steps",values:{38:1,40:-1},controller:function(e){e.steps<1&&(e.steps=1)}}},getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t),e.steps=3},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.steps=5},drawFlattened:function(e,t){e.reset(),e.setColor("#DDD"),e.drawSkeleton(t),e.setColor("#DDD"),e.drawCurve(t);for(var n,r=1/e.steps,i=t.points[0],a=r;a<1+r;a+=r)n=t.get(Math.min(a,1)),e.setColor("red"),e.drawLine(i,n),i=n;e.setFill("black"),e.text("Curve approximation using "+e.steps+" segments",{x:10,y:15})},values:{38:1,40:-1},onKeyDown:function(e,t){var n=this.values[e.keyCode];n&&(e.preventDefault(),t.steps+=n,t.steps<1&&(t.steps=1))},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s(l)},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=n(15),s=r.createClass({displayName:"GraduatedOffsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Graduated curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("blue");var n=t.outline(0,0,e.distance,e.distance);n.curves.forEach(function(t){return e.drawCurve(t)})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"What if we want to do graduated offsetting, starting at some distance ",r.createElement("i",null,"s")," but ending at some other distance ",r.createElement("i",null,"e"),'? well, if we can compute the length of a curve (which we can if we use the Legendre-Gauss quadrature approach) then we can also determine how far "along the line" any point on the curve is. With that knowledge, we can offset a curve so that its offset curve is not uniformly wide, but graduated between with two different offset widths at the start and end.'),r.createElement("p",null,'Like normal offsetting we cut up our curve in sub-curves, and then check at which distance along the original curve each sub-curve starts and ends, as well as to which point on the curve each of the control points map. This gives us the distance-along-the-curve for each interesting point in the sub-curve. If we call the total length of all sub-curves seen prior to seeing "the\\ current" sub-curve ',r.createElement("i",null,"S")," (and if the current sub-curve is the first one, ",r.createElement("i",null,"S")," is zero), and we call the full length of our original curve ",r.createElement("i",null,"L"),", then we get the following graduation values:"),r.createElement("ul",null,r.createElement("li",null,"start: map ",r.createElement("i",null,"S")," from interval (",r.createElement("i",null,"0,L"),") to interval ",r.createElement("i",null,"(s,e)")),r.createElement("li",null,"c1: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d1"),", 0,L, s,e)"),", d1 = distance along curve to projection of c1"),r.createElement("li",null,"c2: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d2"),", 0,L, s,e)"),", d2 = distance along curve to projection of c2"),r.createElement("li",null,"..."),r.createElement("li",null,"end: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+length(subcurve)"),", 0,L, s,e)"))),r.createElement("p",null,"At each of the relevant points (start, end, and the projections of the control points onto the curve) we know the curve's normal, so offsetting is simply a matter of taking our original point, and moving it along the normal vector by the offset distance for each point. Doing so will give us the following result (these have with a starting width of 0, and an end width of 40 pixels, but can be controlled with your up and down arrow keys):"),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="inflections",s=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:a.getTitle(o)}},setupCubic:function(e){var t=new e.Bezier(135,25,25,135,215,75,215,240);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("red"),t.inflections().forEach(function(n){e.drawCircle(t.get(n),5)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="intersections",s=Math.min,l=Math.max,u=r.createClass({displayName:"Intersections",getDefaultProps:function(){return{title:"Intersections"}},setupLines:function(e){var t=new e.Bezier([50,50,150,110]),n=new e.Bezier([50,250,170,170]);e.setCurve(t,n)},drawLineIntersection:function(e,t){e.reset();var n=e.utils.lli4,r=n(t[0].points[0],t[0].points[1],t[1].points[0],t[1].points[1]),i=0;t.forEach(function(t){if(e.drawSkeleton(t),e.setColor("black"),r){var n=t.points,a=s(n[0].x,n[1].x),o=s(n[0].y,n[1].y),u=l(n[0].x,n[1].x),c=l(n[0].y,n[1].y);a<=r.x&&o<=r.y&&u>=r.x&&c>=r.y&&(e.setColor("#00FF00"),i++)}e.drawCurve(t)}),r&&(e.setColor(i<2?"red":"#00FF00"),e.drawCircle(r,3))},setupQuadratic:function(e){var t=e.getDefaultQuadratic(),n=new e.Bezier([15,250,220,20]);e.setCurve(t,n)},setupCubic:function(e){var t=new e.Bezier([100,240,30,60,210,230,160,30]),n=new e.Bezier([25,260,230,20]);e.setCurve(t,n)},draw:function(e,t){e.reset(),t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var n=e.utils,r={p1:t[1].points[0],p2:t[1].points[1]},i=n.align(t[0].points,r),a=new e.Bezier(i),o=n.roots(a.points);o.forEach(function(n){var r=t[0].get(n);e.drawCircle(r,3),e.text("t = "+n,{x:r.x+5,y:r.y+10})})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=u},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},drawQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},drawCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="moulding",s=Math.abs,l=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,o=s(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=o}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,o=i+a,l=o-1,u=s(l/o),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]), e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",width:"113.39999999999999rem",height:"16.799999999999997rem"})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",width:"158.2rem",height:"16.799999999999997rem"})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4941ecbff4c50732ba66fec53307456fc605f032.svg",width:"125.99999999999999rem",height:"42rem"})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",width:"177.79999999999998rem",height:"37.8rem"})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",width:"219.79999999999998rem",height:"37.8rem"})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="pointcurves",s=Math.abs,l=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:a.getTitle(o)}},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 s(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return s(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},w={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},y={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(w.x-r.x),y:r.y+2*(w.y-r.y)},_={x:i.x+2*(y.x-i.x),y:i.y+2*(y.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,w),e.drawLine(l,y),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n,r,i,a,o,s,l=20;for(n=0;n<=10;n++)r=n/10,i=t.get(r),a=t.derivative(r),s=Math.sqrt(a.x*a.x+a.y*a.y),a={x:a.x/s,y:a.y/s},o=t.normal(r),e.setColor("blue"),e.drawLine(i,{x:i.x+a.x*l,y:i.y+a.y*l}),e.setColor("red"),e.drawLine(i,{x:i.x+o.x*l,y:i.y+o.y*l}),e.setColor("black"),e.drawCircle(i,3)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",width:"130.2rem",height:"18.2rem"})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",width:"319.2rem",height:"42rem"})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r1;){for(var o=0;of){r--;break}r<0&&(r=0),r===c.length&&(r=c.length-1),d.push(c[r])}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)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.y)},i={x:n.x+a*(r.x-n.x),y:n.y+a*(r.y-n.y)},m={x:0,y:0},e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(d,n,m),e.drawLine(f,r,m),e.setWeight(1),m.x+=c,e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(n,i,m),e.setWeight(1),e.drawCircle(i,3,m),m.x+=c,e.drawCircle(i,3,m),e.text(o+"%, or t = "+e.utils.round(a,2),{x:i.x+10+m.x,y:i.y+10+m.y}))},values:{38:1,40:-1},onKeyDown:function(e,t){var n=this.values[e.keyCode];n&&(e.preventDefault(),t.step+=n,t.step<1&&(t.step=1))},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12);e.exports={preface:{locale:"ja-JP",title:"まえがき",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"まえがき"}),r.createElement("p",null,"2次元上になにかを描くとき、普通は線を使いますが、これは直線と曲線の2つに分類することができます。直線を描くのはとても簡単で、これをコンピュータに描かせるのも容易です。直線の始点と終点をコンピュータに与えてやれば、ポン！直線が描けました。疑問の余地もありません。"),r.createElement("p",null,"しかしながら、曲線の方はもっと大きな問題です。私たちはフリーハンドでいとも簡単に曲線を描くことができますが、コンピュータの方は少し不利です。曲線の描き方を表した数学的な関数が与えられないと、コンピュータは曲線を描くことができないのです。実際には、直線でさえも関数が必要になります。直線の関数はとても簡単なので、わたしたちはよく無視してしまいますが、コンピュータにとっては直線であれ曲線であれ、線はすべて「関数」なのです。しかしこれは、コンピュータで速く計算できて、きれいな曲線が得られるような関数を見つける必要がある、ということになります。そのような関数はたくさんありますが、多くの関心を集め続け、そしてどんな場面でも使われている、ある特定の関数に対してこの記事では焦点を絞ります。この関数は「ベジエ」曲線を描きます。"),r.createElement("p",null,"ベジエ曲線は",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/ピエール・ベジェ"},"Pierre Bézier"),"から名付けられました。この曲線がデザイン作業に適していることを世界に知らしめたのが、彼なのです（ルノーに勤務し、1962年にその研究を発表しました）。ただし、この曲線を「発明」したのは彼が最初で唯一というわけではありません。数学者",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),"はシトロエンで働いていた1959年、この曲線の性質について研究し、ベジエ曲線の非常にエレガントな描き方を発見しました。これが最初だと言う人もいます。しかしながら、de Casteljauは自分の成果を発表しなかったため、「誰が最初か？」という問いに答えるのがとても難しくなっています。またベジエ曲線は、核心的には",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/セルゲイ・ベルンシュテイン"},"Sergei Natanovich Bernstein"),"が研究した「ベルンシュタイン多項式」という数学関数の一種ですが、こちらの公刊に関しては少なくとも1912年まで遡ることができます。いずれにせよ、これらはほとんど瑣末なことです。より注目すべきなのは、ベジエ曲線は取り扱いに便利だいうことです。たとえば複数のベジエ曲線を繋いで、1つの曲線に見えるようにすることができます。もしあなたがPhotoshopで「パス」を描いたり、FlashやIllustrator、Inkscapeのようなベクタードローイングソフトを使ったことがあるのであれば、そこで描いてきた曲線はベジエ曲線です。"),r.createElement("p",null,"では、これを自分でプログラムしなければならないとなったらどうでしょう？ハマりどころは何でしょうか？どうやってベジエ曲線を描くのでしょう？バウンディングボックスとは何で、どうやって交点を求め、どうやったら曲線を押し出せるのでしょうか？つまるところ、ベジエ曲線に対して行いたいあらゆる操作は、どのようにすればいいのでしょう？このページはそれに答えるためにあります。数学にとりかかりましょう！"),r.createElement("p",null,"—Pomax (Twitter上では",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{className:"note"},r.createElement("h2",{id:"-"},"注：ベジエの図はすべてインタラクティブになっています。"),r.createElement("p",null,"このページでは",r.createElement("a",{href:"http://pomax.github.io/bezierjs"},"Bezier.js"),"を活用し、インタラクティブな例示を行っています。また、",r.createElement("a",{href:"http://mathjax.org"},"MathJax"),"というすばらしいライブラリによって、（LaTeX式の）「本物」の数学組版を行っています。このページはWebpackを使い、Reactアプリケーションとしてオフラインで生成されていますが、このために「ソースを表示」オプションを追加することがかなり難しくなってしまいました。これをどうやって追加すべきかは今もまだ考え中ですが、かといって、数年ぶりとなる今回の更新を延期したくはありませんでした。"),r.createElement("h2",{id:"-"},"本書はオープンソースです。"),r.createElement("p",null,"この本はオープンソースソフトウェアのプロジェクトで、2つのGitHubリポジトリ上に存在しています。1つ目の",r.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo"),"は表示のためだけに用意されたバージョンで、あなたが今読んでいるものです。もう一方の",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),"は開発版で、すべてのHTML・JavaScript・CSSが含まれています。どちらのリポジトリもフォークすることができますし、あなたの好きなように使ってかまいません。ただし、これを自分の成果だと騙って売ることはもちろん除きます。=)"),r.createElement("h2",{id:"-"},"数学はどこまで難しくなりますか？"),r.createElement("p",null,"この入門に出てくる数学は、大半が高校初年度程度です。基本的な計算を理解していて、英語の読み方が分かっていれば、こなすことができるはずです。時には",r.createElement("em",null,"ずっと"),"難しい数学も出てきますが、もし理解できないように感じたら、そこは読み飛ばしても大丈夫です。節の中の「詳細欄」を飛ばしてもいいですし、厄介そうな数学があれば節の最後まで読み飛ばしてもかまいません。各節の最後にはたいてい結論を並べてありますので、これを直に利用することもできます。"),r.createElement("h2",{id:"-"},"質問・コメント："),r.createElement("p",null,"新しい節の提案があれば、",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"GitHubのissueトラッカー"),"をクリックしてください（右上にあるリポジトリのリンクからでもたどり着けます）。改訂中のため、現在はこのページにはコメント欄がありませんが、内容に関する質問がある場合にもissueトラッカーを使ってかまいません。改訂が完了したら、総合的なコメント欄を復活させる予定です。あるいは、「質問対象の節を選択して『質問』ボタンをクリック」するような項目別のシステムになるかもしれません。いずれわかります。"),r.createElement("h2",{id:"-"},"コーヒーをおごってくれませんか？"),r.createElement("p",null,"この本が気に入った場合や、取り組んでいたことに役に立つと思った場合、あるいは、この本への感謝をわたしに伝えるにはどうすればいいのかわからない場合。そのような場合には、",r.createElement("a",{href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"わたしにコーヒーをおごってください"),"。あなたが住んでいるところのコーヒー1杯の値段でかまいません。この本は小さな入門からはじまり、印刷で70ページほどに相当するようなベジエ曲線の読み物へと、年々成長してきています。そして、多くのコーヒーが執筆に費やされてきました。わたしは執筆に使った時間が惜しいとは思いませんが、もう少しコーヒーがあれば、ずっと書き続けることができるのです！")))}},introduction:{locale:"ja-JP",title:"バッとした導入",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"バッとした導入",number:"1"}),r.createElement("p",null,"まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。"),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"2次のベジエ曲線",setup:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"3次のベジエ曲線",setup:e.drawCubic,draw:e.drawCurve})),r.createElement("p",null,"ベジエ曲線は、CAD（computer aided designやCAM（computer aided manufacturing）のアプリケーションで多用されています。もちろん、Adobe Illustrator・Photoshop・Inkscape・Gimp などのグラフィックデザインアプリケーションや、SVG（scalable vector graphics）・OpenTypeフォント（otf/ttf）のようなグラフィック技術でも利用されています。ベジエ曲線はたくさんのものに使われていますので、これについてもっと詳しく学びたいのであれば……さあ、準備しましょう！"))}},whatis:{locale:"ja-JP",title:"ではベジエ曲線はどうやってできるのでしょう？",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"ではベジエ曲線はどうやってできるのでしょう？",number:"2"}),r.createElement("p",null,"ベジエ曲線がどのように動くのか、点を触ってみて感覚が摑めたかもしれません。では、実際のところベジエ曲線",r.createElement("em",null,"とは"),"いったい何でしょうか？これを説明する方法は2通りありますが、どちらの説明でも行き着く先はまったく同じです。一方は複雑な数学を使うのに対し、もう一方はとても簡単です。というわけで……簡単な説明の方から始めましょう。"),r.createElement("p",null,"ベジエ曲線は、",r.createElement("a",{href:"https://ja.wikipedia.org/wiki/%E7%B7%9A%E5%BD%A2%E8%A3%9C%E9%96%93"},"線形補間"),"の結果です。というと難しそうに聞こえますが、誰でも幼い頃から線形補間をやってきています。例えば、何か2つのものの間を指し示すときには、いつも線形補間を行っています。線形補間とは、単純に「2点の間から点を得る」ことなのです。"),r.createElement("p",null,"例えば、2点間の距離がわかっているとして、一方の点から距離の20%だけ離れた（すなわち、もう一方の点から80%離れた）新しい点を求めたい場合、次のようにとても簡単に計算できます。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8090904d6448ed0c8e6151aecf62f361d51ead96.svg",width:"526.4rem",height:"107.8rem"}),r.createElement("p",null,"では、実際に見てみましょう。下の図はインタラクティブになっています。上下キーで補間の比率が増減しますので、どうなるか確かめてみましょう。最初に3点があり、それを結んで2本の直線が引かれています。この直線の上でそれぞれ線形補間を行うと、2つの点が得られます。この2点の間でさらに線形補間を行うと、1つの点を得ることができます。そして、あらゆる比率に対して同様に点を求め、それをすべて集めると、このようにベジエ曲線ができるのです。"),r.createElement(i,{title:"線形補間でベジエ曲線を得る",setup:e.setup,draw:e.draw,onKeyDown:e.onKeyDown}),r.createElement("p",null,"また、これが複雑な方の数学につながっていきます。微積分です。"),r.createElement("p",null,"いま上で行ったものとは似つかないように思えますが、実はあれは2次曲線を描いていたのです。ただし一発で描きあげるのではなく、手順を追って描いていきました。ベジエ曲線は多項式関数で表現できますが、その一方で、とても単純な補間の補間の補間の……というふうにも説明できます。これがベジエ曲線のおもしろいところです。これはまた、ベジェ曲線は「本当の数学」で見る（関数を調べたり微分を調べたり、あらゆる方法で）ことも可能ですし、「機械的」な組み立て操作として見る（例えば、ベジエ曲線は組み立てに使う点の間からは決してはみ出ないということがわかります）ことも可能だということを意味しています。"),r.createElement("p",null,"それでは、もう少し詳しくベジエ曲線を見ていきましょう。数学的な表現やそこから導かれる性質、さらには、ベジエ曲線に対して／ベジエ曲線を使ってできるさまざまな内容についてです。"))}},explanation:{locale:"ja-JP",title:"ベジエ曲線の数学",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"ベジエ曲線の数学",number:"3"}),r.createElement("p",null,"ベジエ曲線は「パラメトリック」関数の一種です。数学的に言えば、パラメトリック関数というのはインチキです。というのも、「関数」はきっちり定義された用語であり、いくつかの入力を",r.createElement("strong",null,"1つ"),"の出力に対応させる写像を表すものだからです。いくつかの数値を入れると、1つの数値が出てきます。入れる数値が変わっても、出てくる数値はやはり1つだけです。パラメトリック関数はインチキです。基本的には「じゃあわかった、値を複数個出したいから、関数を複数個使うことにするよ」ということです。例として、ある値",r.createElement("i",null,"x"),"に何らかの操作を行い、別の値へと写す関数があるとします。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/785e792c343b71d4e674ac94d8800940b30917ac.svg",width:"100.8rem",height:"18.2rem"}),r.createElement("p",null,r.createElement("i",null,"f(x)"),"という記法は、これが関数（1つしかない場合は慣習的に",r.createElement("i",null,"f"),"と呼びます）であり、その出力が1つの変数（この場合は",r.createElement("i",null,"x"),"です）に応じて変化する、ということを示す標準的な方法です。",r.createElement("i",null,"x"),"を変化させると、",r.createElement("i",null,"f(x)"),"の出力が変化します。"),r.createElement("p",null,"ここまでは順調です。では、パラメトリック関数について、これがどうインチキなのかを見てみましょう。以下の2つの関数を考えます。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0dfe7562b43441e72201ff4cdd2e8b6e2e3ecb2d.svg",width:"98rem",height:"37.8rem"}),r.createElement("p",null,"注目すべき箇所は特に何もありません。ただの正弦関数と余弦関数です。ただし、入力が別々の名前になっていることに気づくでしょう。仮に",r.createElement("i",null,"a"),"の値を変えたとしても、",r.createElement("i",null,"f(b)"),"の出力の値は変わらないはずです。なぜなら、こちらの関数には",r.createElement("i",null,"a"),"は使われていないからです。パラメトリック関数は、これを変えてしまうのでインチキなのです。パラメトリック関数においては、どの関数も変数を共有しています。例えば、"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ed6f533530199d1e99b3319ba137c1327b0459c0.svg",width:"105rem",height:"42rem"}),r.createElement("p",null,"複数の関数がありますが、変数は1つだけです。",r.createElement("i",null,"t"),"の値を変えた場合、",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)"),"と",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)"),"の両方の出力が変わります。これがどのように役に立つのか、疑問に思うかもしれません。しかし、実際には答えは至ってシンプルです。",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)"),"と",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)"),"のラベルを、パラメトリック曲線の表示によく使われているもので置き換えてやれば、ぐっとはっきりするかと思います。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ea632ea75d6a2aeb6fe69c07feb6e76f81884746.svg",width:"81.19999999999999rem",height:"42rem"}),r.createElement("p",null,"きました。",r.createElement("i",null,"x"),"/",r.createElement("i",null,"y"),"座標です。謎の値",r.createElement("i",null,"t"),"を通して繫がっています。"),r.createElement("p",null,"というわけで、普通の関数では",r.createElement("i",null,"y"),"座標を",r.createElement("i",null,"x"),"座標によって定義しますが、パラメトリック曲線ではそうではなく、座標の値を「制御」変数と結びつけます。",r.createElement("i",null,"t"),"の値を変化させるたびに",r.createElement("strong",null,"2つ"),"の値が変化するので、これをグラフ上の座標 (",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),")として使うことができます。例えば、先ほどの関数の組は円周上の点を生成します。負の無限大から正の無限大へと",r.createElement("i",null,"t"),"を動かすと、得られる座標(",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),")は常に中心(0,0)・半径1の円の上に乗ります。",r.createElement("i",null,"t"),"を0から5まで変化させてプロットした場合は、このようになります（上下キーでプロットの上限を変更できます）。"),r.createElement(i,{preset:"empty",title:"（部分）円 x=sin(t), y=cos(t)",static:!0,setup:e.setup,draw:e.draw,onKeyDown:e.props.onKeyDown}),r.createElement("p",null,"ベジエ曲線はパラメトリック関数の一種であり、どの次元に対しても同じ基底関数を使うという点で特徴づけられます。先ほどの例では、",r.createElement("i",null,"x"),"の値と",r.createElement("i",null,"y"),"の値とで異なる関数（正弦関数と余弦関数）を使っていましたが、ベジエ曲線では",r.createElement("i",null,"x"),"と",r.createElement("i",null,"y"),"の両方で「二項係数多項式」を使います。では、二項係数多項式とは何でしょう？"),r.createElement("p",null,"高校で習った、こんな形の多項式を思い出すかもしれません。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3e8b26cf8833db7089d65e9c6b3953a3140bb19f.svg",width:"224rem",height:"21rem"}),r.createElement("p",null,"最高次の項が",r.createElement("i",null,"x³"),"であれば3次多項式、",r.createElement("i",null,"x²"),"であれば2次多項式と呼び、",r.createElement("i",null,"x"),"だけの場合は1次多項式――ただの直線です。（そして",r.createElement("i",null,"x"),"の入った項が何もなければ、多項式ではありません！）"),r.createElement("p",null,"ベジエ曲線は",r.createElement("i",null,"x"),"の多項式ではなく、",r.createElement("i",null,"t"),"の多項式です。",r.createElement("i",null,"t"),"の値は0から1までの間に制限され、その係数",r.createElement("i",null,"a"),"、",r.createElement("i",null,"b"),"などは「二項係数」の形をとります。というと複雑そうに聞こえますが、実際には値を組み合わせて、とてもシンプルに記述できます。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/565d935cab46bc995f53190102dadfdd1afc08f6.svg",width:"385rem",height:"68.6rem"}),r.createElement("p",null,"「そこまでシンプルには見えないよ」と思っていることでしょう。しかし仮に、",r.createElement("i",null,"t"),"を取り去って係数に1を掛けることにしてしまえば、急激に簡単になります。これが二項係数部分の項です。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8c618738924e53a313a31fa407b3d91155525ee1.svg",width:"219.79999999999998rem",height:"91rem"}),r.createElement("p",null,"2は1+1に等しく、3は2+1や1+2に等しく、6は3+3に等しく、……ということに注目してください。見てわかるように、先頭と末尾は単に1になっていますが、中間はどれも次数が増えるたびに「上の2つの数を足し合わせた」ものになっています。",r.createElement("i",null,"これなら"),"覚えやいですね。"),r.createElement("p",null,"多項式部分の項がどうなっているのか、同じぐらい簡単な方法で考えることができます。仮に、",r.createElement("i",null,"(1-t)"),"を",r.createElement("i",null,"a"),"に、",r.createElement("i",null,"t"),"を",r.createElement("i",null,"b"),"に書き換え、さらに重みを一旦削除してしまえば、このようになります。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c8740a3a9a63b592e1480883a54024ebdaffaf05.svg",width:"316.4rem",height:"62.99999999999999rem"}),r.createElement("p",null,"これは要するに、「",r.createElement("i",null,"a"),"と",r.createElement("i",null,"b"),"のすべての組み合わせ」の単なる和です。プラスが出てくるたびに、",r.createElement("i",null,"a"),"を",r.createElement("i",null,"b"),"へと1つずつ置き換えていけばよいのです。こちらも本当に単純です。さて、これで「二項係数多項式」がわかりました。完璧を期するため、この関数の一般の形を示しておきます。"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/444a01611e5709f702c36f6ca17aa2761c0877a9.svg",width:"315rem",height:"57.4rem"}),r.createElement("p",null,"そして、これがベジエ曲線の完全な表現です。この関数中のΣは、加算の繰り返し（Σの下にある変数を使って、...=<値>から始めてΣの下にある値まで）を表します。"),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"-"},"基底関数の実装方法"),r.createElement("p",null,"上で説明した関数を使えば、数学的な組み立て方で、基底関数をナイーブに実装することもできます。"),r.createElement("pre",null,"function Bezier(n,t):\n sum = 0\n for(k=0; k= lut.length):\n s = lut.length\n nextRow = new array(size=s+1)\n nextRow[0] = 1\n for(i=1, prev=s-1; i