Programming Basics: A website for teaching people how to program
 
Do your programming with [jsbin] or [Orion]

Computer Graphics with HTML5 Canvas and JavaScript: Bonus Topic: Bezier Curves

I'm now going to talk about the optional advanced topic of Bezier curves. Previously, I showed you how to draw simple curves.

If you have two lines and you want to connect them with the curve, you give three points.

The computer then draws a curve there.

But what happens if this isn't the curve you want? What happens if you want something more interesting?

Maybe you want something more curvy, or one that's less curvy, or one that sticks up a bit or one that makes a little twist. How do you tell the computer to make these more complicated curves?

You can do this with something called a Bezier curve. The Bezier curve was invented by French mathematicians and engineers around 1960 to help make curvy cars. I always find things like this to be really neat. Usually, when you think of math and geometry, you assume that it was all invented hundreds of years ago. But a lot of math, even basic things like this Bezier curve, were actually discovered quite recently. Now what's special about the Bezier curve is that instead of using three points to describe a curve, you use four points.

Once you give the computer these four points, this is how the computer figures out which curve to draw. First, it draws lines between these points.

It'll then divide up each of these lines into equal-sized sections. In this case, we'll divide things up into four parts.

Then it will connect up first parts of each of these lines.

With these two new lines that it has drawn, it will then divide those up into four parts as well.

And then it will connect the first parts of each of these new lines.

After that, it will go back to the original lines, and do the same with the second parts of those lines.

First it will connect up the second parts of each of the lines.

These two new lines will be divided into four parts.

And the second parts of these two new lines will be joined together.

Finally, we will do the same with the third parts of each of the original lines.

Now if you look at the resulting area underneath,

you'll see that it makes it a curve. This is a 4 point Bezier curve.

Here's the code that you have to type in order to get a four-point Bezier curve.

First you use the moveTo() command to say where you want the curve to start.

Then you use c.bezierCurve() to tell the computer that you want to actually draw a Bezier curve. Then you tell the computer six numbers. The first two numbers gives the position of the second point.

The second set of two numbers gives the position of the third point.

And the last set of two numbers gives the position of the fourth point.

Then when you call c.stroke() the computer will go through the process of drawing this Bezier curve.

The Bezier curve makes it easier to draw much more complicated curves than the previous quadratic curve. Go ahead and try using the curve to make some interesting pictures.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy