[M4A] Late-Night Boyfriend: Academic Book Reading

Transcript

I'm a little bit sleepy. How about you? Well, I need to get through this book.

I just want to read it, and then I've done that, and then tomorrow I can just relax. Yeah. What I'm reading about? You're sure you want to know? It's math.

Well, it's computational geometry again, meaning it's geometry that usually is kind of useless without a computer. So stuff like curves, it's not useless without a computer, but well, in this case, it's very useful with a computer, that's for sure. And yeah, I just want to get through this chapter, at least like the intro.

Oh, you're getting sleepy too? I could read you to sleep with this. You'd like that? Are you sure? It's gonna be boring, probably, if you don't like this kind of stuff.

Maybe that's the point. It's better than counting sheep, I think. Okay, I'll read it for you, baby.

Yeah, yeah, I'd like to. I think it's gonna be helpful for me, too. Okay, I'll just start then.

You just get comfy and prepare to sleep. Preface. Oh, I'll read the title of the book or article.

A Primer on Bezier Curves. By Pomax. This is a free resource, and it's usable for anything.

So let's just get started. Preface. In order to draw things in 2D, we usually rely on lines, which typically get classified into two categories, straight lines and curves.

The first of these are as easy to draw as they are to make a computer draw. Give a computer the first and last point in the line, and bam, straight line. No questions asked.

Curves, however, are a much bigger problem. While we can draw curves with ridiculous ease freehand, computers are a bit handicapped in that they can't draw curves unless they're as a mathematical function that describes how it should be drawn. In fact, they even need this for straight lines, but the function is ridiculously easy, so we just tend to ignore that as far as computers are concerned.

All lines are functions, regardless of whether they are straights or curves. However, that does mean that we need to come up with faster compute functions that lead to nice looking curves on a computer. There are a number of these, and in this article we'll focus on a particular function that has received quite a bit of attention and is used in pretty much anything that can draw curves, Bézier curves.

They're named after Pierre Bézier, who is principally responsible for making them known to the world as a curve well suited for design work, publishing his investigations in 1962 while working for Renault, the car company. Although he was not the first or only one to invent these types of curves, one might be tempted to say that the mathematician Paul de Casteljau, that he was first as he began investigating the nature of these curves in 1959 while working for Citroën and came up with a really elegant way of figuring out how to draw them. However, de Casteljau did not know or did not publish his work, making the question who was first hard to answer in any absolute sense.

Or is it? Bézier curves are at their core Bernstein polynomials, a family of mathematical functions investigated by Sergei Natanovich Bernstein, whose publications on them date back at least as far as 1912. Anyway, that's mostly trivia.

What you're most likely to care about is that these curves are handy. You can link up multiple Bézier curves so that the combination looks like a single curve. If you've ever drawn Photoshop paths or worked with vector drawing programs like Flash, Illustrator or Inkscape, those curves you've been drawing are Bézier curves.

What if you need to program them yourself though? What are the pitfalls? How do you draw them? What are the bounding boxes? How do you determine intersections? How can you extrude a curve? In short, how do you do everything that you might want to do with these curves? That's what this page is for.

Prepare to be mathed. And then there's some page-specific stuff. Don't care about that.

Paragraph one of how many are there? Oh my god, 45. Let's get started.

Number one, a lightning introduction. Let's start with all the good stuff. When we're talking about Bézier curves, we're talking about the things that you can see in the following graphics.

And the graphics are just points and lines between those points. And within those lines, there are curves following these control points. Just to make a visual.

They run from some start point to some end point with a curvature influenced by one or more intermediate control points. Now, because all of the graphics in the page are interactive, go manipulate those curves a bit. Blah, blah, blah, blah, blah.

You can't do that. These curves are used a lot in computer-aided design and computer-aided manufacturing, CAD slash CAM applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape, GIMP, et cetera. And yes, it is called GIMP.

And in graphic technologies like scalable vector graphics, SVG files, and open type fonts, TTF or OTF type fonts. And then there's a lot of type fonts. A lot of things use Bézier curves.

So if you want to learn more about them, prepare to get your learn on. Number two, what makes a Bézier curve? Playing with the points for curves may have given you a feel for how Bézier curves behave.

And for you, my dear, that means if you've played around in those programs that he mentioned, this is, you'll just have to remember back to using a pen tool somewhere. Anyway, but what are Bézier curves really? There are two ways to explain what a Bézier curve is, and they turn out to be entirely equivalent.

But one of them uses complicated maths, and the other uses really simple maths. So let's start with a simple explanation. Bézier curves are the result of linear interpolations.

That sounds complicated, but you've been doing linear interpolation since you've been very young. Anytime you've had to point at something between two other things, you've been applying linear interpolation. It's simply picking a point between two points.

If we know the distance between those two points, and if we want to create a new point that is, say, 20% the distance away from the first point, and thus 80% the distance away from the second point, then we can compute what that is really easily. So given that P1 is some point, P2 is some other point, the distance is P2 minus P1, and the ratio is the percentage divided by 100. Our new point is described by the following equation, P1 plus distance time ratio.

So let's look at that in action. The following graphic, blah, blah, blah. That's not interesting for you.

What it doesn't look like, what we've just done, is we've actually just drew a quadratic curve in steps rather than in a single go. One fascinating part about Bezier curves is that they can both be described in terms of polynomial functions, as well as in terms of very simple interpolations of interpolations, of interpolations of interpolations, however far you want to go. That in turn means we can look at these curves and do math based on both real maths, in quotation marks, by examining their functions, their derivatives, and all that stuff, as well as by looking at the mechanical, quotation mark, composition, which tells us, for instance, that a curve will never extend beyond the points we used to construct it.

So let's look at Bezier, so let's start looking at Bezier curves a bit more in depth. Their mathematical expressions, the properties that we can derive from them, and the various things we can do to and with Bezier curves. Number three, the mathematics of Bezier curves.

Bezier curves are a form of parametric function. Mathematically speaking, parametric functions are cheats. A function is actually a well-defined term representing a mapping from any number of inputs to a single output.

Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number. Parametric functions cheat.

They basically say, all right, well, we want multiple values coming out, and we'll just use more than one function. An illustration, let's say we have a function that maps some value, let's call it x, to some other value using some kind of number manipulation. f of x is equal to cosine of x.

The notation f of x is a standard way to show that it's a function by convention called f, if we're only listing one, and its output changes based on one variable, in this case x. Change x, and the output for f changes. So far, so good.

Now let's look at parametric functions and how they cheat. Let's take the following two functions. f of a is equal to cosine of a, and f of b is equal to sine of b.

There's nothing really remarkable about them. They're just sine and cosine functions. But you'll notice the inputs have different names.

If we change the value for a, we're not going to change the value for b, the output value for b, or f of b, since a isn't used in that function. Parametric functions cheat by changing that. In a parametric function, all the different functions share a variable like this.

f a of t is equal to cosine of t, f b of t is equal to sine of t. Multiple functions, but only one variable. If we change the value for t, we change the outcome for both f a of t and f b of t.

You might wonder how that's useful, and the answer is actually really simple. If we change the labels, f a of t and f b of t, with what we usually mean with them for parametric curves, things might be a little bit more obvious. So we could say x is equal to cosine of t, and y is equal to sine of t.

And there we go. x and y coordinates link through some mysterious value t. So parametric curves don't define a y coordinate in terms of an x coordinate like normal functions do, but instead they link the values to a control variable.

If we vary the value of t, then with every change we get two values, which we can use as an xy coordinate in a graph. The above set of functions, for instance, generates points in a circle. We can range t from negative to positive infinity, and the resulting xy coordinates will always lie on the circle with a radius of 1 around the origin 0, 0.

If we plot it from t, if we plot from t from 0 to 5, we get this, and then there's a circle, well, almost a circle. You would need approximately 6.28 to do the full circle. Anyway, if you just keep going upwards, then it'll just go around, around, around.

Bézier curves are just one of the many classes of parametric functions and are characterized by using the same base function for all of the output values. In the example we saw before, the x and y values were generated by different functions. One uses a sine, the other uses a cosine.

But Bézier curves use the binomial polynomial for both the x and y outputs. So what are binomial polynomials? That's a mouthful.

You may remember polynomials from high school. They are those sums that look like this. f of x is equal to a times x to the third power plus b times x to the second power plus c times x plus d.

If the highest order term, say they have x cubed or to the third power, they're called cubic polynomials. If it's x squared, then it's a square polynomial. If it's just x, it's a line.

And if there aren't any terms with x, it's not even a polynomial. Well, Bézier curves are polynomials of t rather than x, with the value of t being fixed between 0 and 1, with coefficients a and b, etc. , taking the binomial form, which sounds fancy, but it's really just a pretty simple description of mixing values.

So for linear, that is parentheses 1 minus t and parentheses plus t. For squares, it is parentheses 1 minus t and parentheses squared plus 2 times parentheses 1 minus t and parentheses times t plus t squared. And for cubic, it is parentheses 1 minus t and parentheses cubed plus 3 times parentheses 1 minus t and parentheses squared times t plus 3 times parentheses 1 minus t and parentheses times t squared plus t cubed.

And this goes on according to Pascal's triangle. If you want to look that up, or if you remember how they look, next would be, or if you want to remember the pattern, you can say that the 1 minus t term goes on the left, and then just the t term goes on the right. And so you'll have 1 plus 1 for the linear case.

For the square case, you have 1 plus 2 plus 1. This is just me re-listing Pascal's triangle. Cubic is 1 plus 3 plus 3 plus 1.

And quadratic, 1 plus 4 plus 6 plus 4 plus 1, et cetera, et cetera. Next would be quintic, I guess that's the name. 1 plus 5 plus 10 plus 10 plus 5 plus 1, and on and on.

And notice that 2 is the same as 1 plus 1, and 3 is the same as 2 plus 1 and 1 plus 2. And 6 is 3 plus 3. As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just the two numbers above added together, giving us a simple number sequence known as Pascal's triangle.

Now that's easy to remember. There's a really simple way to figure out how to get polynomial terms to work. If we rename 1 minus t to a and t to b, and remove the weights for a moment, we get this.

Linear is a plus b. Square is a times a plus a times b plus b times b. Cubic is a times a times a plus a times a times b plus a times b times b plus b times b times b.

It's basically just a sum of every combination of a and b, progressively replacing a's with b's after every plus sign. So that's also actually pretty simple too. So now you know about binomial polynomials.

And just for completeness, I'm going to show you the generic function for this. Well, this is difficult to explain the formula visually if you don't see it. So I'm just going to skip that.

And that's the full description for Bezier curves. The sum in this function indicates that, or the sigma in this function indicates that this is a series of additions using the variable listed below the e or the, sorry, not e, sigma, starting at the equals value and ending at the value listed on top of the sigma. Then there is some programming that I'm going to skip.

So now we know what the basis function looks like. Time to add the magic that makes Bezier curves so special, control points. So this is chapter four.

I'll do five chapters. Bezier curves are like all splines, in quotation marks, interpolation functions. This means that they take a set of points and generate values somewhere between those points.

One of the consequences of this is that you'll never be able to generate a point that lies outside the outline of the control points, commonly called the hull for the curve. Useful information. In fact, we can visualize how each point contributes to the value generated by the function so that we can see which points are important where in the curve.

The following graph shows the interpolation functions for quadratic and cubic functions, with s being the strength of a point's contribution to the total sum. Blah, blah, blah. This is just some interactivity.

And also shown as the interpolation function for a 15th order Bezier function. Wow, that's kind of crazy. As you can see, the start and end point contribute considerably more to the curve shape than any other point in the control point set.

If we want to change the curve, we'd need to change the weights of each point, effectively changing the interpolations. The way we do this is about as straightforward as possible. Just multiply each point with a value that changes its strength.

These values are conventionally called the weights.