Coding a Bezier curve from scratch!

This topic has been much requested, so I finally decided to make a video about it. Bezier curves are used throughout computer graphics and in engineering in general. Most software packages implement curves like these out of the box, but if you want to really get the most out of them then it is good to know how they work, and how you can create them yourself.

In this video we make a segmented quadratic Bezier curve that could be useful in all kinds of scenarios. The topic of Bezier curves is much larger than just this video, so in the future we'll probably visit this topic some more.

========== Timetable ==========

0:00 - Intro
0:32 - Setup
10:04 - Bezier Interpolation
16:56 - Drawing the Curve
24:40 - Outro

========== Social Media Links ==========

Twitter: @The_ArtOfCode

========== If you want to follow along ==========

========== Other videos to watch ==========

Other interesting topics related to this:

[omg_look_behind_you]

I can't say thank you enough for these videos. Well math has never been a problem for me, deciphering how people on shader derive the solutions for their projects can be frustrating as hell. You and IQ are some of the few that are willing to show the insights that others seem to covetously hide.

[karlramberg]

Cool. I just watched Freya Holmér's awesome video on Splines today. This is a nice introduction to how to code it.

[PLUkraine]

Thank you for this video, super useful! Looking forward for the analytical solution!

[trelligan]

Building it up from the simplest components; excellent presentation. Now I wanna go play with Shadertoy. #FeedTheAlgorithm

[dreamdrunk]

Yess, this is exactly what i am working on right now. And one of my favorite channels uploads :D

[shfunky]

Very useful! Thank you for doing this as always! :)

[zy]

In the for loop you could precalculate an increment value 1/float(NUM_SEGS), use a float instead of int i, and increment by that instead of i++. Then t will be i

[derjansan]

A different way to see a bezier curve is by two functions x(t) and y(t), where t runs from 0 to 1. For a quadratic curve, the functions are quadratic functions f(t) = at^2 + bt^+ c, for cubic bezier curves they are cubic, and so on. Best source is the website by Pomax, and I think it would be great if you can visualize all the knowledge written there in videos. But it gets more and more complicated...

[chuckocheret]

I’ll upvote you doing a video on the analytic version of the bezier. Especially if you can generalize for higher order curves. ;-)

[HammerTomahawk]

Do you have a video that explains in detail the Line function you use here? I don’t really have a good intuition for dot product and fwidth in that function.

[realcygnus]

Really cool as always ! 👍 If anyone is interested Freya Holmér has some really great content on the topic too. & a newer quite comprehensive one on splines but, neither in the context of shaders really.

[mohammadhomsee]

It's a great content bro,
I find out that the most challanging is to derive sdf equation for cubic bezier curve. I hope you can do it in some video.

[GrinyaPLAY]

Why not Hermite Spline?. Bezier is very slow on mass calculation.

[xamogxusx]

Nice, are you gonna do an sdf bezier?

[theman]

I love your work, but would appreciate if you used a dark UI both on the editor and the preview panel.
Too much white strains the eye. Thanks :)

[CyricRO]

Are you looking at the keyboard while you type, or notes?

[alexfrozen]

Huge mistake in choosing paradigm. Shaders require functional paradigm. The result is huge overload of GPU. More than 50 times. Yes, this shader language allows to use "for" loop, but in very specific cases. The bezier curve has its function without interpolation by steps and should be used in this case. Interpolation by steps can be used in pixel map programming to save costly 'multiply' operations and win speed. In shaders, this way looses to much in calculations.

[byteCode]

I needed this I'm making a game engine thanks my guy...

[docme]

Whoever is reading this, I wish you a Merry Christmas.

[PumpiPie]

Thanks 👍
Can you do a video where you do the same in 3d?