Simon’s Bézier Editor in p5.js

One more project inspired by Sebastian Lague: a Bézier Editor. Simon used Sebastian Lague’s algorithms to recreate the editor in p5.JS.



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!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s