alt Hacker NewsA Primer on Bézier Curves – So What Makes a Bézier Curve?
Comments
"This site (obviously) works best with JS enabled But it's not required.
If you're reading this text block, then you have scripts disabled: thankfully, that's perfectly fine, and this site is not going to punish you for making smart choices around privacy and security in your browser. All the content will show just fine, you can still read the text, navigate to sections, and see the graphics that are used to illustrate the concepts that individual sections talk about."
That is how I'd like to the rest of the internet to work as well.
I'm under the impression, maybe wrongly so, that every other week we saw a primer on some basic CG stuff: Bézier curves, Fourier transforms, Dithering, Tonemapping, ..etc, of themes being fetched from a pool of maybe 10 items that cycle every once in a while but get upvoted because CG stuffs are inherently cool (and they're often well written like this one).
I think I'm gonna make `primersprimer.graphics` to list them or something.
I learned a lot about Bezier curves when I was playing a lot of No Limits, a roller coaster designer/simulator. It used beziers for defining the track, and it was always difficult to get a smooth track because you needed the radius of the curve to be the same on both sides of every control point. Otherwise, there'd be a noticeable "bump" as the change in change of direction (not a typo) was sudden.
Also, the math of quadratic beziers made it so even if you did get the handles of each control point the right length to avoid a bump, you could get a "pumping" effect as the radius of curvature changed from wide to narrow and back to wide, though you could avoid this by avoiding trying to create circles in your track design.
No Limits 2 eventually came out which uses a different type of curve which was far easier to make smooth. It also included a way to define the track by graphing out the ride's G-forces and banking changes, and it would plot the control points for you. It was an absolute game changer for making smooth track.
I've had this bookmarked for a while. Fantastic resource. It's been on HN dozens of times since 2017.
I used Bézier Curves to draw SVG curves for my weather dashboard EPD https://github.com/mt-empty/pi-inky-weather-epd
have been a graphic designer for the last 15 years, never know how complex a simple bezier curve is. solid resource.
And slow motion was never the same hereafter
A very simple explanation of Bézier curves is this:
- You have one polynomial describing the x-coordinate and one describing the y-coordinate, and both polynomials have the same degree (two for quadratic, three for cubic Bézier curves)
- The two polynomials share the same parameter t, which runs from 0 to 1.
That's all.
[flagged]
I haven't thought about Bézier Curves since my undergrad a long time ago. I distinctly remember wondering at the time why so many lecturers added extra hurdles (i.e. the need to understand the intricacies of Bézier Curves) in their assignments rather than letting students focus on the computer science/programming concepts they were meant to be learning.
Related, I think Freya Holmér's "The Beauty of Bézier Curves" is in the running for one of the best educational videos on YouTube.
https://youtu.be/aVwxzDHniEw?si=K7QYf4luKhgv2mgd