Skip to content
0:00 / 0:00

#splines#beziercurves#b-splines

The Continuity of Splines

Freya Holmér

291K subscribers • 6 videos on Hallway

YouTube
  • Recommended by 11 people: 10 on Hacker News and 1 in engineering communities.
  • Presented by Freya Holmér, technical artist
  • Linked in the descriptionFreyaHolmer/Mathfs

Intermediate. Assumes working knowledge.

1.8M views3 years ago11 recommendations

Graphics and audioComputer scienceRenderingCreative codingMath for programmers

Freya Holmér explains the mathematics, geometry, and continuity of Bézier curves and splines using custom interactive animations.

why are splines? well my god I have good news for you, here's why splines! if you like my work, please consider supporting me 💖 patreon.com/acegikmo This project grew much larger in scope than I had originally intended, and burnout made it impossible for me to do more with it. It was already getting incredibly unwieldy, so I apologize in advance for not covering non-uniform splines, and the general jankiness of some parts. There are also quite a lot of places where I just talk about something without *showing* it, but since I couldn't animate it all, I opted to keep that information in rather than remove it altogether • Lots of love to 💛 Jazz "queenjazz" Mickle for music & sounds ❱ queenjazz.bandcamp.com/ 🐈 our children, Thor, Salad & Toast, for helping me out during recording • How was this video made? 🔨 I made it in Unity, the game engine ⭕ Using Shapes, my vector graphics plugin ❱ u3d.as/1W37 📈 Using Mathfs, my math library ❱ github.com/FreyaHolmer/Mathfs ...along with a bunch of hacky, partially broken, procedural animation tools I made specifically for this video 💡 Striped studio skybox by ProAssets: assetstore.unity.com/packages/2d/textures-materials/sky/stud… 🎥 Final editing in DaVinci Resolve • Links 🐦 Twitter ❱ twitter.com/FreyaHolmer 📺 Twitch ❱ twitch.tv/acegikmo 💬 Discord ❱ discord.gg/v5VWuga 🌸 Instagram ❱ instagram.com/freya_holmer Timestamps: Intro Examples of Paths CHAPTER 1 - Bézier Curves Lerp Quadratic Bézier Cubic Bézier n-Degree Bézier CHAPTER 2 - Bézier Splines Cubic Bézier Spline Spline Parameterization The Anatomy of a Spline Knot Values & Knot Intervals Local Control The flexibility of the Cubic Bézier Tangent Points CHAPTER 3 - Continuity C⁰ (Positional Continuity) Spline Derivatives C¹ (Velocity Continuity) C² (Acceleration Continuity) Cascading Loss of Local Control C³ (Jolt Continuity) C∞ Continuity Parametric Continuity Summary CHAPTER 4 - Geometric Continuity G¹ (Tangent Continuity) G² (Curvature Continuity) The Reflection Test Seams in Circular Arcs Angle Analysis Curvature & The Osculating Circle Curvature Combs G¹ (Algebraically) G² (Algebraically) Geometric Continuity Summary Continuity Summarized Cusps CHAPTER 5: The Extended Universe Hermite Spline Hermite ⇔ Bézier Conversion Linear Spline Cardinal Spline Catmull-Rom Spline Investigating Basis Functions Basis Function Continuity Analysis In Search of a C² Spline B-Spline Quiz Time! Cubic Trajectory 00:5

Why it's here

11 people recommend this

What people say. Widely praised as one of the best educational videos on graphics programming and spline mathematics.

u/EdhelDilin r/GraphicsProgramming • Recommends

The Continuity of Splines - YouTube - incredibly informative and clear video by Freya!

AceJohnny2on Hacker News • Recommends

On “Apple's Unique Device Curvature”

Another upvote for Freya Holmér's amazing video "The Continuity of Splines". She covers the insightful "reflection test" around the 28:05 mark: link to this video and actual "curvature combs" at 32:26. Finally, she covers the continuity of curvature combs that B-Splines exhibit around the 54:00 mark: link to this video

zxexzon Hacker News • Recommends

On “Why can't you multiply vectors? [video]”

Oh lovely, can't wait to give this a watch. Freya dives deep, and gives wonderful talks. Her video "The Continuity of Splines"0 is my favorite watch of the past year. 0 link to this video

viggityon Hacker News • Recommends

On “Interpolation Methods”

If this paper is interesting to you, you may also be interested in this amazingly well done video on the continuation of splines. It isn't exactly the same thing, and delves into some deeper concepts, but I've watched it like 3 times over the last year. link to this video

aaronblohowiakon Hacker News • Recommends

On “Look, ma, no matrices”

the splines yt video ( link to this video ) is (IMHO) one of the best educational videos on a programming topic, full stop.

ixwton Hacker News • Recommends

On “Hobby's algorithm for aesthetic Bézier splines (2020)”

I didn't really understand Bézier splines until I watched this excellent video 0 from Freya Holmér. It talks about various kinds of splines, and the various equations behind them. Explains the importance of the derivatives of splines (as other comments here have pointed out). 0: link to this video

viggityon Hacker News • Recommends

On “Jacksonpollock.org (2003)”

If splines/beziers are of any interest to you, I could not recommend these videos from Freya Holmer enough. link to this video link

WillAdamson Hacker News • Recommends

On “Ask HN: What cool skill or project interests you, but feels out of reach?”

For me, it's Bézier curves --- Freya Holmér has a wonderful video on them: link to this video and I've been trying to read through _METAFONT: The Program_ and link and I keep wondering if I shouldn't just try scripting Inkscape.... I want to do a couple of different things, and not sure if they all fit in one project or no: - implement a single line font in my current project: link - implement a way to convert arbitrary curves into smooth arcs (for DXFs or G2/G3 arcs for G-code) - work up an interactive version of METAFONT/METAPOST which allows both programming and drawing

viggityon Hacker News • Recommends

On “Bezier-rs – algorithms for Bézier segments and shapes”

Anytime béziers are mentioned on HN, I feel compelled to share these absolutely incredible videos from Freya Holmér link to this video (73 minutes) link (24 minutes)

fuzzythinkeron Hacker News • Recommends

On “Bézier Curves and the logic behind them”

Also from her - The Continuity of Splines 0. More from her site 1. Long interactive read from Bartosz Ciechanowski 2 0 link to this video 1 link 2 link

nick-of-timeon Hacker News • Recommends

On “Circles Do Not Exist”

I recommend anyone who finds this topic interesting watch the video The Continuity of Splines . It's a detailed discussion of how you derive Bèzier and higher-order curves to serve your purposes. link to this video

weswilsonon Hacker News • Recommends

On “Show HN: Apple-like smooth corners for Tailwind CSS”

Obligatory video on splines: link to this video From what I've read, Apple rounded corners are using G^2 or G^3 geometric continuity to generate smoother curves. It's hard to tell which smoothing function this library uses since it looks like it's based on PNG masking.

WillAdamson Hacker News • Recommends

On “Desmos Animated Graphing Calculator”

A wonderful example of this is: The Continuity of Splines link to this video and The Beauty of Bézier Curves link by Freya Holmér link While not animated, I find: _Euclid's Elements_ (Joyce's Java Version) very helpful link Since my current project has pretty much devolved to putting a UI on various trigonometric functions and allowing the user to program them, I'd be very glad of other resources in this space (currently working through Hilbert's _Geometry and the Imagination_ and the book which matches link and just finished the _Make:Geometry/Trigonometry/Calculus_ series, and have had recommended Curves and Surfaces for CAGD: A Practical Guide by Gerald Farin)

WillAdamson Hacker News • Recommends

On “History of CAD”

I've been reading through a PDF on my Kindle Scribe which I downloaded from the original site --- it's a great overview, and most importantly, includes citations and references to the various papers where folks shared their research/progress. These days of course, one would just get _The Essentials of CAGD_ and similar texts, or read: link or watch: link to this video Highly recommended for anyone who wants an understanding of how modern CAD software came about. For my part, I have found it invaluable in working on my current project as described at: link

skydhashon Hacker News • Recommends

On “Dijkstra On the foolishness of "natural language programming"”

> I just need to find the perfect GUI toolkit which allows Bézier Curve representations in a way which clicks and makes sense to me, and suits my next project. Not a proper answer, but here is a very good video on splines: link to this video

u/Sharlinatorin r/GraphicsProgramming • Mentions

Spline rendering with my software renderer Retrofire Last week I implemented Catmull–Rom and B-splines, as well as extrusion and camera pathing along splines, for my software rendering library retrofire. Big shoutout to Freya Holmér for her awesome video on splines!