TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

A Primer on Bézier Curves (2013)

243 点作者 acdanger将近 6 年前

10 条评论

tobmlt将近 6 年前
Wow, every time I see this site I am blown away by how well it is done.<p>I am going to put a couple of book titles out there in case somebody doesn&#x27;t know about them and could benefit:<p>1.) &quot;The NURBS book&quot; -- Anybody got this one on their bookshelf? (authors Les Piegl and Wayne Tiller) I can&#x27;t recommend it enough, if you are into rolling your own traditional B-spline lib with expert help!<p>2.) Then, for a gentle intro to multiresolution (especially because it makes for a good jumping off point from traditional B-splines) there is &quot;Wavelet&#x27;s for Computer Graphics&quot; by Eric Stollnitz, Tony DeRose, and David Salesin. Very good for a &quot;matrix transform &#x2F; projection-prolongation picture of splines, and related entities.<p>Anyway, these helped me on my (continuing) Spline&#x2F;CAD journey. Cheers.
TheRealPomax将近 6 年前
This really shouldn&#x27;t need the (2013) suffix - it&#x27;s constantly getting updated, and the most recent update was from only a few days ago. (it&#x27;s probably about 50 pages longer than it was back in 2013, if not more)
评论 #20753939 未加载
bezieio将近 6 年前
I open sourced Bezie (<a href="https:&#x2F;&#x2F;github.com&#x2F;jperler&#x2F;bezie" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jperler&#x2F;bezie</a>), a library I wrote three years ago for MIDI automation curves. It includes some good examples of how to interpolate cubic and quadratic bezier curves given drag points on the curves. I used Pomax&#x27;s bezier write ups as a starting point, which really helped out a lot (thanks Pomax!). If anyone is interested, take a look in `bezie&#x2F;app&#x2F;utils`, specifically the `getControl` methods that allow you to derive control points.
评论 #20757828 未加载
petersonh将近 6 年前
The bezier.js library associated with this is great
评论 #20753843 未加载
jihadjihad将近 6 年前
Previous discussion (2017): <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=14191577" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=14191577</a>
评论 #20752850 未加载
评论 #20753859 未加载
评论 #20751780 未加载
romwell将近 6 年前
I enjoyed reading it, but I wouldn&#x27;t call it a &quot;primer&quot;, since I can hardly think of what else there is to know about Bezier curves! It&#x27;s a rather comprehensive exposition.<p>Here&#x27;s a primer on Bezier curves if you had to program them in 30 minutes. You won&#x27;t need more than this:<p>1. Bezier curves are just taking weighted averages, repeatedly. A weighted average of two points, A and B, is a linear combination <i>P(t) = (1-t)A + tB</i>. As <i>t</i> goes from 0 to 1 with constant speed, <i>P(t)</i> goes from A to B with constant speed.<p>A weighted average like this gives you <i>one</i> point out of <i>two</i>. Now, say you have <i>four</i> points, in order: A1, A2, A3, A4. For a number <i>t</i> between 0 and 1, take weighted averages of consecutive points: A1 and A2, A2 and A3, A3 and A4. That gives you a sequence <i>three</i> points. Repeat this procedure until you have only one point left. That&#x27;s your Bezier curve defined by A1..A4 at time t. This is called a 3rd degree curve, and generalizes to sequences of any length (you can figure out how!).<p>2. The above tells you how to draw this with a computer. Just pick, say, 100 values of <i>t</i> between 0 and 1, and connect the dots with straight lines. That is, you converted a curve into a poly-line, consisting of straight segments. This can be used to compute intersections (just see if any one segment intersects any other), compute tangents (extend any segment to get a tangent at that point), normals (in 2D: rotate a segment by 90 degrees clockwise).<p>3. Most importantly, <i>why</i> you would want to do something like this: Bezier curves are easy for machines to trace, and for humans to understand. Here are some properties of a (cubic) Bezier curve given by points A1, A2, A3, A4:<p>-it starts at A1, and ends at A4<p>-it is tangent to segments A1A2 and A3A4 at endpoints<p>-by moving A2 and A3, it is easy to make a C- and S- shaped curve.<p>Beyond that, things aren&#x27;t as intuitive. This is why <i>all</i> graphics software gives you 3rd degree Bezier curves as a tool: it&#x27;s flexible enough while easy enough.<p>In practice, Bezier curves came to replace the French Curve[1]. The irony is that there is little French about the French curve (nobody even knows why they&#x27;re called that!), but Bezier curves are French through and trough: the two key people behind them, Paul de Casteljau and Pierre Bezier, have spent their entire lives in France, and came up with the curves for manufacturing at Citroen and Renault. Arguably, Bezier curves are the true French curves.<p>4. Bonus. In Photoshop&#x2F;Illustrator&#x2F;etc: the UI for Bezier curves is this: click and drag to define A1 and A2 (A1 is is where you click, A2 is where you release). Consecutive click-drag-releases define three points: e.g. A3 on mouse down, A4 on mouse up, and A5 such that A4 is the midpoint of A3 and A5. The curve you get is a union of cubic Beziers defined by A1..A4, A4..A7, A7..A10, etc.<p>The curve is smooth because the UI forces the tangents to be aligned (unless you do a single click without dragging: this makes 2 tangents of length 0, i.e. a vertex).<p>When drawing curves using this UI, you really are drawing <i>tangents</i> to the curve you want to get: draw _— to get an S, roughly.<p>That&#x27;s it folks! For way, way more - read the article :) (Which is an interactive book, at this point).<p>[1]<a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;French_curve" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;French_curve</a>
评论 #20755937 未加载
评论 #20757984 未加载
jpz将近 6 年前
What a great contribution.
baroffoos将近 6 年前
Back in highschool I wrote a script using sagemath that could draw bezier curves when given the points and handles. It was really cool how simple the math behind it was.
Yajirobe将近 6 年前
The expression of a Bezier curve involves t^i (in the summation). Both t and i acquire values of 0 at some point, so you get a 0^0 in the summation, which is undefined.
评论 #20757865 未加载
trilinearnz将近 6 年前
Very readable. A fantastic contribution.
评论 #20753441 未加载