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

twitter logo github logo ・1 min read

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:

bezier graph example

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.

twitter logo DISCUSS (4)
markdown guide
 

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. :)

 
 

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. : )

 

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.

Classic DEV Post from Apr 7

Native Lazy Loading for <img> and <iframe> is Coming to the Web

I'm really excited about the upcoming loading attribute in HTML. &lt;img src...

Isaac Lyman profile image
Author of Your First Year in Code (leanpub.com/firstyearincode). Find more of my writing at isaaclyman.com/blog.

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️