One more project inspired by Sebastian Lague: a Bézier Editor. Simon used Sebastian Lague’s algorithms to recreate the editor in p5.JS.
Editor: https://editor.p5js.org/simontiger/present/r4gW2mgIo
Code: https://editor.p5js.org/simontiger/sketches/r4gW2mgIo
I added the export button! It’s under the “export” folder. Clicking it will show you a serialized version of your path. It’s just in JSON format, so you can read/use it quite easily.
The Bézier curve is made out of multiple “segments”, also called “cubic curves”. It turns out that if you write down the equation for such cubic curve, you actually get a cubic polynomial. I derived these equations:
I started with the equation of a linear curve, worked up to a quadratic curve and the to a cubic curve. Maybe there’s a mistake in these, because there’re a lot of steps and I was a bit inconsistent. If you watch my previous video about Bézier curves, you’ll see how a cubic curve is derived.
Yes, Simon had already made another video about Bézier curves, see our earlier blog post. It’s funny how back then I had no idea what Bézier curves were, and by now, after I have started studying motion design, béziers have become my daily thing. And I’m learning so much from Simon! This is the power of the homeschooling lifestyle!
Geeks out of the box 