Beziers are easy-to-define curves. Since one of their applications is in computer graphics, they were covered at GDC 09 by Squirrel Eiserloh. Squirrel, by the way, gives a great presentation, and I’m cribbing a lot from the approach his presentation used. (Here‘s a presentation on interpolating position, but it’s not the one Squirrel used at GDC).

This article covers the just the beginning of Squirrel’s talk. I will probably cover more of it later. (In this article, I don’t even tell you what a Spline is!)

Linear Beziers

All Bezier curves can be thought of as ways of describing the motion of a virtual pen as it travels from one point to another. In its simplest form, the path from the start point to the endpoint is a straight line. To describe a point moving along a line, you take a weighted average of the two endpoints.

In the beginning, time 0, the pen is at the start point, [x 1 , y 1 ] . At time 1, it’s at the end, or [x 2 , y 2 ] . At time 0.5, at the midpoint: [(0.5)x 1 + (0.5)x 2 , (0.5)y 1 + (0.5)y 2 ] . To find where you are at any other time t between 0 and 1:

[(1-t)x 1 + (t)x 2 , (1-t)y 1 + (t)y 2 ]

As t moves from 0 to 1, the pen’s position moves from the starting point to the endpoint. This sliding weighted averaging is yet another example of linear interpolation, which was almost the title of this article.

Quadratic Beziers

This step contains the critical idea, which lets you build higher-order Beziers out of smaller ones. The technique for drawing quadratic Beziers is to is linearly interpolate between a starting point and an endpoint, just as above, except that this time the start point and the endpoint are moving. They have their own start points and endpoints, and use linear interpolation as above.

As you can see here, the start point ends at the same place the end point begins.

Let’s call the start point [x a , y a ] and the end point [x b , y b ] . Then the path the pen follows is this:

[(1-t)x a + (t)x b , (1-t)y a + (t)y b ]

Since the start point and the end point are moving themselves, x a (and the rest of those) are variable, not constant. Their movement is described in terms of their start points and endpoints, [x 1 , y 1 ] , [x 2 , y 2 ] , and [x 3 , y 3 ] .



[x a , y a ] = [(1-t)x 1 + (t)x 2 , (1-t)y 1 + (t)y 2 ]

[x b , y b ] = [(1-t)x 2 + (t)x 3 , (1-t)y 2 + (t)y 3 ]

The the position of the pen at time t comes from substituting these:

[(1-t)((1-t)x 1 + (t)x 2 ) + (t)((1-t)x 2 + (t)x 3 ),

(1-t)((1-t)y 1 + (t)y 2 ) + (t)((1-t)y 2 + (t)y 3 )]

= [(1-t)2x 1 + 2(t)(1-t)x 2 + t2x 3 ,

(1-t)2y 1 + 2(t)(1-t)y 2 + t2y 3 ]





Cubic Beziers and beyond

The key idea was taking two Beziers, in this case linear, and interpolating between them to create a meta-Bezier, in this case a quadratic Bezier. You can use this idea to make a Bezier out of four points instead of three, by making a quadratic Bezier out of the first three points, then another quadratic out of the last three, and interpolating between those two to get a cubic Bezier. This is the most common kind of Bezier in computer graphics. Here’s the math, sans motivation:

[(1-t)3x 1 + 3(t)(1-t)2x 2 + 3(t)2(1-t)x 3 + t3x 4 ,

(1-t)3y 1 + 3(t)(1-t)2y 2 + 3(t)2(1-t)y 3 + t3y 4 ]

Every GDC article I write has the goal of helping us do a better job at IMVU. Since I want my articles to be relevant to a wider audience, I’m separating out the IMVU tie-ins. What follows is the IMVU-centric section of this post, which won’t be relevant to everyone. For the rest of you, please enjoy the fuzzy kitten.

How can we use this at IMVU? Since most of our art is user-generated, it’s the content creators, not us, who would want to learn about splines if they wanted to incorporate moving parts. I expect that they already have tools that handle this kind of math for them. But there’s another use – the particle system. Beziers – and later, splines – provide a simple, intuitive way to let users define curves. Just place and drag around the control points, and the particles know how to curve from the beginning to the end. There might be a good way to expose Bezier controls to content creators to help them define particles in their furniture or clothes.

Share this: Twitter

Facebook

Like this: Like Loading... Related