mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-02-24 17:42:43 +01:00
13 lines
5.8 KiB
HTML
13 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>
|
|
Creating a Catmull-Rom curve from three points
|
|
</title>
|
|
<base href='..'>
|
|
</head>
|
|
<body>
|
|
<div data-reactid=".2dkkfs17pxc" data-react-checksum="-888037834"><div class="ribbon" data-reactid=".2dkkfs17pxc.0"><img src="images/ribbon.png" alt="This page on GitHub" usemap="#githubmap" width="200px" height="149px" data-reactid=".2dkkfs17pxc.0.0"/><map name="githubmap" data-reactid=".2dkkfs17pxc.0.1"><area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" data-reactid=".2dkkfs17pxc.0.1.0"/></map></div><header data-reactid=".2dkkfs17pxc.1"><h1 data-reactid=".2dkkfs17pxc.1.0">A Primer on Bézier Curves</h1><h2 data-reactid=".2dkkfs17pxc.1.1">A free, online book for when you really need to know how to do Bézier things.</h2></header><div data-reactid=".2dkkfs17pxc.2"><table class="relatives before" data-reactid=".2dkkfs17pxc.2.0"><tbody data-reactid=".2dkkfs17pxc.2.0.0"><tr data-reactid=".2dkkfs17pxc.2.0.0.0"><td data-reactid=".2dkkfs17pxc.2.0.0.0.0"><a class="prev" href="catmullconv" data-reactid=".2dkkfs17pxc.2.0.0.0.0.0">27. Bézier curves and Catmull-Rom curves</a></td><td class="toc" data-reactid=".2dkkfs17pxc.2.0.0.0.1"><a class="" href="/" data-reactid=".2dkkfs17pxc.2.0.0.0.1.0">ToC</a></td><td data-reactid=".2dkkfs17pxc.2.0.0.0.2"><a class="next" href="polybezier" data-reactid=".2dkkfs17pxc.2.0.0.0.2.0">29. Forming poly-Bézier curves</a></td></tr></tbody></table><section data-reactid=".2dkkfs17pxc.2.$catmullmoulding"><h2 data-num="28" data-reactid=".2dkkfs17pxc.2.$catmullmoulding.0"><a href="#catmullmoulding" data-reactid=".2dkkfs17pxc.2.$catmullmoulding.0.0">Creating a Catmull-Rom curve from three points</a></h2><p data-reactid=".2dkkfs17pxc.2.$catmullmoulding.1">Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?</p><p data-reactid=".2dkkfs17pxc.2.$catmullmoulding.2">As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve.</p><p data-reactid=".2dkkfs17pxc.2.$catmullmoulding.3"><span data-reactid=".2dkkfs17pxc.2.$catmullmoulding.3.0">Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of </span><i data-reactid=".2dkkfs17pxc.2.$catmullmoulding.3.1">n</i><span data-reactid=".2dkkfs17pxc.2.$catmullmoulding.3.2"> points, in order to draw the equivalent curve using cubic Bézier curves we need a massive </span><i data-reactid=".2dkkfs17pxc.2.$catmullmoulding.3.3">3n-1</i><span data-reactid=".2dkkfs17pxc.2.$catmullmoulding.3.4"> points (and that's without double-counting points that are shared by consecutive cubic curves).</span></p><p data-reactid=".2dkkfs17pxc.2.$catmullmoulding.4">In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there's the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:</p><figure class="false" data-reactid=".2dkkfs17pxc.2.$catmullmoulding.5"><canvas tabindex="0" data-reactid=".2dkkfs17pxc.2.$catmullmoulding.5.0"></canvas><figcaption data-reactid=".2dkkfs17pxc.2.$catmullmoulding.5.1"><span data-reactid=".2dkkfs17pxc.2.$catmullmoulding.5.1.0">Catmull-Rom curve fitting</span><span data-reactid=".2dkkfs17pxc.2.$catmullmoulding.5.1.1"> </span></figcaption></figure><p data-reactid=".2dkkfs17pxc.2.$catmullmoulding.6">As should be obvious by now, Catmull-Rom curves are great for "fitting a curvature to some points", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you.</p></section><table class="relatives after" data-reactid=".2dkkfs17pxc.2.2"><tbody data-reactid=".2dkkfs17pxc.2.2.0"><tr data-reactid=".2dkkfs17pxc.2.2.0.0"><td data-reactid=".2dkkfs17pxc.2.2.0.0.0"><a class="prev" href="catmullconv" data-reactid=".2dkkfs17pxc.2.2.0.0.0.0">27. Bézier curves and Catmull-Rom curves</a></td><td class="toc" data-reactid=".2dkkfs17pxc.2.2.0.0.1"><a class="" href="/" data-reactid=".2dkkfs17pxc.2.2.0.0.1.0">ToC</a></td><td data-reactid=".2dkkfs17pxc.2.2.0.0.2"><a class="next" href="polybezier" data-reactid=".2dkkfs17pxc.2.2.0.0.2.0">29. Forming poly-Bézier curves</a></td></tr></tbody></table></div><footer class="copyright" data-reactid=".2dkkfs17pxc.3"><span data-reactid=".2dkkfs17pxc.3.0">This article is © 2011-2016 to me, Mike "Pomax" Kamermans, but the text, code, and images are </span><a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md" data-reactid=".2dkkfs17pxc.3.1">almost no rights reserved</a><span data-reactid=".2dkkfs17pxc.3.2">. Go do something cool with it!</span></footer></div>
|
|
</body>
|
|
</html> |