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

CSS has transition-timing-function: cubic-bezier(w, x, y, z). SVG supports bezier curves (and they render really fast).

I've seen pictures like this:

But I've never understood how to read a bezier curve function or how to write one by hand (does anyone write these by hand?)

To make this a little more useful, let's say I'm a five-year-old that has a fair understanding of algebra and plane geometry.

Comments

[Justin Lam]

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)³ * P1 + 3 * (1–t)² * t * P2 + 3 * (1–t) * t² * P3 + t³ * 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. : )

[Andy Zhao (he/him)]

Hey Isaac, you can embed images with the following syntax:

![alt text for image](https://link.to.image.com)

And here's your link for reference:

![bezier graph example](https://thepracticaldev.s3.amazonaws.com/i/x1kvb2quxwy1d85ofbaj.jpg)

I have no idea what bezier curves are, and will also be interested in responses. :)

[Isaac Lyman]

Thanks!

[Frederik 👨‍💻➡️🌐 Creemers]

There's a great interactive tutorial on Bezier curves. It's not explained like you're 5, but the explanation really builds up your intuition for them step by step.