DEV Community

Discussion on: Explain how to read/write bezier curves like I'm five

Collapse
 
justinctlam profile image
Justin Lam • Edited

Don't be intimidated by the name bezier, just think of this as an equation to generate a curve.
The image you have shown is what is called a cubic bezier curve, which has 4 P's.
You can have a quadratic bezier curve with 3 P's, or even a simple bezier curve with 2 P's.

Let's take a cubic bezier curve equation which describes the picture you posted:
(x,y)=(1–t)3 * P1 + 3 * (1–t)2 * t * P2 + 3 * (1–t) * t2 * P3 + t3 * P4

This is a parametric equation of a curve, where you generate points based on one variable, in our case "t". A simple example of another parametric equation is a straight line: (x,y) = P1 + (P2-P1)*t.

What does this mean?
P1, P2, P4, and P4 are the points you see in your image. They represent a (x,y) coordinate in 2D space or (x,y,z) in 3D. These are the points YOU control and will affect the shape of the curve. That's why they are called "control points".

If you input some value into "t", you compute the equation to get an output (x,y) which would lie right on the curve. "t" usually ranges from 0 to 1 to indicate the start and end of the curve.

For example, if you input t = 0, you get P1 and if you input t = 1, you get P4.

Do you need to "read" this equation? It's a bit hard to visualize the shape of the curve just by looking at the function. What you usually have is some sort of visualization tool that allows you to drag and move the control points and see how the curve changes.

Does anyone write these by hand? Usually not too often unless you happen to be writing a graphics engine (game or tool). High level graphics APIs should provide some helper method that allows you to input the control points and some value "t" and output the point on the curve for you. If the method doesn't have an input "t", it's probably just drawing the curve for you!

Also note, the incremental values of "t" is up to you. You can go from 0 to 1 in small or large increments. This will affect how "smooth" your curve looks. Larger increments will generate a courser looking curve, while smaller increments will generate a smoother curve.

There are many types of curves you may want to look into, like catmull (by Ed Catmull, president of Pixar), B-splines, hermites, etc... Different types of curves have their pros and cons in terms of "curviness" and "controllability".

I hope this helps. A five year old probably might not understand this but hopefully someone with an understanding of algebra does. : )