The Bezier Game

September 12, 2014 9:26 AM

The Bezier Game aims to help you understand the art and math behind Bezier curves.
posted by boo_radley (66 comments total)

i have no idea what i'm supposed to be doing.
posted by empath at 9:34 AM on September 12, 2014 [8 favorites]

I have failed the tutorial.
posted by Going To Maine at 9:40 AM on September 12, 2014 [9 favorites]

The tutorial starts with clicks. Don't drag. Just click. No handles. Just right angles.
posted by boo_radley at 9:41 AM on September 12, 2014 [1 favorite]

I feel so dumb right now.
posted by DigDoug at 9:42 AM on September 12, 2014

I understand the math behind Bezier curves, but I think they could have used a few more words in this game if they want to communicate anything.
posted by Wolfdog at 9:44 AM on September 12, 2014 [7 favorites]

I think it's more that they're trying to communicate how to use adobe illustrator.
posted by empath at 9:46 AM on September 12, 2014 [2 favorites]

"how to use adobe illustrator" still falls in the fairly broad category of "anything".
posted by Wolfdog at 9:47 AM on September 12, 2014 [3 favorites]

Could somebody who gets this add some links that explain it? It actually looks like it would be neat if I knew what it was.
posted by If only I had a penguin... at 9:47 AM on September 12, 2014

You guys, I figured it out.
posted by uncleozzy at 9:49 AM on September 12, 2014 [9 favorites]

This "game" reminds me of those Flash games where I am rather pointlessly clicking and dragging on every visible pixel on the screen in an attempt to make something new happen, without any understanding of what is going on or what I ought to accomplish.

There are nodes remaining. Okay. So? And? I can't go back, there's no help menu, just click-click-click on the tutorial pages. Already I'm bored.
posted by adipocere at 9:50 AM on September 12, 2014 [3 favorites]

I got all the bezier game I ever wanted from QIX.
posted by davelog at 9:50 AM on September 12, 2014 [2 favorites]

As someone who has taught Illustrator, this is fantastic and I wish I had it years ago. You might also enjoy: Bézier Clock
posted by oulipian at 9:53 AM on September 12, 2014 [1 favorite]

This is very poorly designed.
posted by dfriedman at 9:57 AM on September 12, 2014

Ugh. I would sooner code my own Catmull-Rom spline library - from scratch, a second time - than actually learn how the Pen tool works. It belongs in that very small category of challenges which, having been overcome, palpably diminish a person's soul.
posted by Ryvar at 10:00 AM on September 12, 2014 [5 favorites]

This is not a good way to teach bezier curves.
posted by Kabanos at 10:00 AM on September 12, 2014 [3 favorites]

Actually, yeah, t was fun at first but I can't figure out how to adjust the anchor points individually, and there is no help, so my Bezier smile quickly dropped into a frown.
posted by oulipian at 10:01 AM on September 12, 2014

As someone who fidgets with inkscape's pen tool as a form of solitaire, I found this "game" both elegant and entertaining.
posted by king walnut at 10:04 AM on September 12, 2014 [1 favorite]

I should probably understand the pen tool better before attempting this again, because playing it was the equivalent of trying to learn track and field by playing QWOP.

I did way better at QWOP
posted by stefanie at 10:07 AM on September 12, 2014 [3 favorites]

I used to draw maps for newspapers and lived in Bezier land for too long, so I think I know what I'm saying when I pronounce: This is freakin' GREAT. I try and try to teach people the pen tool. Apparently it's a hard concept to grasp. But once you get it, it's a wonderful tool to have. I think this, with a little demo from me, will help a few folks.
posted by cccorlew at 10:09 AM on September 12, 2014

Worst. Game. Evar.
posted by Curious Artificer at 10:14 AM on September 12, 2014

Bezier Bezier Bo-ezier
banana fana fo fezier
fee fi mo mezier

BEZIER
posted by GuyZero at 10:17 AM on September 12, 2014 [4 favorites]

* headdesk, sobbing *
posted by sandettie light vessel automatic at 10:19 AM on September 12, 2014 [3 favorites]

oulipian: "Actually, yeah, t was fun at first but I can't figure out how to adjust the anchor points individually, and there is no help, so my Bezier smile quickly dropped into a frown."

Alt! Did you not adsorb the glyphens on tutorial?
posted by boo_radley at 10:19 AM on September 12, 2014 [1 favorite]

Worst. Game. Evar.

Now I want to prove you wrong by making a game that's exactly the same thing but with NURBS
posted by aubilenon at 10:20 AM on September 12, 2014 [2 favorites]

The system for setting control points it too confusing for me to get through it to the fun part, but yeah, beziers. So much time spent in Corel Draw.
posted by GuyZero at 10:21 AM on September 12, 2014

Ok, I get it now, but I hate it, I hate it so much.
posted by Shutter at 10:27 AM on September 12, 2014 [2 favorites]

This actually way easier to do in Illustrator than in this game.
posted by monospace at 10:28 AM on September 12, 2014 [5 favorites]

I got to the wrench, undid an action, and the whole thing disappeared. Can't complete, can't reload without losing everything. Just me?

This actually way easier to do in Illustrator than in this game.

Yeah, in Illustrator (or Inkscape) you can go back and adjust things. I never even try to get them right on the first go-around, that's just to get the nodes where they're supposed to be. Beziers get adjusted afterward.
posted by echo target at 10:30 AM on September 12, 2014

Please? some of us want to get this so bad!!
posted by If only I had a penguin... at 10:32 AM on September 12, 2014 [1 favorite]

Why can't it just tell me that the first half of an extended node dictates incoming trajectory and the second half (the part you move with alt) determines outgoing trajectory? Meh. I meh at the entire thing. Now I'm just angry.
posted by Shutter at 10:40 AM on September 12, 2014

As someone who can already muddle through Illustrator's pen tool pretty okay, I liked this. Not being able to go back and edit the points I already put down is forcing me to be more disciplined.

But this is not how I would have wanted to learn in the first place.
posted by Banknote of the year at 10:42 AM on September 12, 2014

I will definitely check this out. I had a similar idea for one of the Ludum Dare game jams: (web version requires unity plugin)

http://www.ludumdare.com/compo/ludum-dare-26/?action=preview&uid=22035
posted by meta87 at 10:49 AM on September 12, 2014 [1 favorite]

Maybe this hits me at just the right point, but I find this very helpful.

I have attempted to get the pen tool in Illustrator a few times and was quite frustrated with multiple frickin' anchors and wacky swirlies driving me nuts.

The simple escalated templates and reduced toolset make this really helpful. I wish the little path intros extended a few stages further, but that may be laziness talking.
posted by zangpo at 10:51 AM on September 12, 2014

The color game is easier.
posted by Lesser Shrew at 11:01 AM on September 12, 2014

Please? some of us want to get this so bad!!

Can you be more specific about which parts you're having trouble with? The pen tool has a lot of subtle complexity, so there's not, like, one or two general tips to make it happen.
posted by Banknote of the year at 11:06 AM on September 12, 2014

i have no idea what i'm supposed to be doing.

Welcome to design school.
posted by hydrophonic at 11:09 AM on September 12, 2014 [1 favorite]

Banknote: It's not that I can't make "IT" happen. It's that I don't understand what "IT" is. Not even the tutorial makes sense.
posted by If only I had a penguin... at 11:22 AM on September 12, 2014 [1 favorite]

aubilenon: "Now I want to prove you wrong by making a game that's exactly the same thing but with NURBS
"

Degree 7 NURBS.
posted by signal at 11:44 AM on September 12, 2014

Penguin: So my first bit of advice is not to stress too much about this game. It is, as others have noted, a rather poorly-done tutorial. Also, it bills itself as a way to master the pen tool – a lot of the skills it draws on are about optimizing how you use the pen tool, such as using as few nodes as possible.

But, the basics: The points you're putting down are called nodes. There are two types of nodes: straight and curved. If you just click, you'll have a straight line – like what you'd do in a connect-the-dots puzzle.

If you click and drag, you make a node with a curved line. When you drag, you'll see two straight lines coming out of your node; those are the handles. Long handles will give you a big swoopy curve, short handles give you a tighter curve. If you get an unwanted loop or curly-cue by your node, switch the direction you're dragging in (e.g., go left instead of right).

Your nodes have a line coming in, and a line going out (these are lines in your art, not the handles). By default, they'll both have the same amount of curviness and be a mirror of one another. This is good for things like the circle tutorial: when you place the node at the top of the circle, you want the top-left and top-right of the circle to be symmetrical. But sometimes you don't want that. Either you want a sharp corner (like the top and bottom of the heart) or you need an asymmetrical amount of curviness (this happens in the car: the hood is very curvy but the dashboard isn't). This is when you use the alt/option key. Click and drag to make the incoming line look OK. Then hold down alt/option and set up the handle for the outgoing line. This is one of the trickiest parts: It's hard to know what to do with the outgoing handle before you've seen the line it will create. You just have to try something, undo, and try again. (This is why some of us were grousing about not being able to adjust handles after putting them down; in Illustrator, we'd get it in the ballpark and go back and finesse it later.)

Hope that helps.
posted by Banknote of the year at 11:53 AM on September 12, 2014 [7 favorites]

A couple years ago, I wrote a Cubic Bezier->polyline reducer and the math is beautiful unless you want a reducer to be good (use a minimum of segments instead of the naive divide and conquer approach).

What falls out of having that reducer is this - Beziers are usually represented as a pair of parametric equations over time (t), which ranges from 0 to 1 (I've lost you all, right? Just look at these animations, OK). Given a time t, it's easy to get the X and Y coordinates of a cubic bezier with 4 control points (x0, y0) ... (x3-y3):

double x = ((((_A * t) + _B) * t) + _C) * t + _D;
double y = ((((_E * t) + _F) * t) + _G) * t + _H;

Where A-H are the coefficients:
A = x3 - (3 * x2) + (3 * x1) - x0;
B = (3 * x2) - (6 * x1) + (3 * x0);
C = (3 * x1) - (3 * x0);
D = x0;

E = y3 - (3 * y2) + (3 * y1) - y0;
F = (3 * y2) - (6 * y1) + (3 * y0);
G = (3 * y1) - (3 * y0);
H = y0;

Blah, blah, blah plinth. What's the point?

The point is that you think you can just loop from 0 to 1 by, say, .01 and get a set of points that are a good approximation and you're wrong. The problem is that if you imagine the walk from the start to the end, the distance you walk between points will not be even and tight curves might get skipped entirely (oops).

But once you can walk the Bezier so that long nearly straight sections are represented by longer walks and tight sections are represented by shorter walks, then you can approximate the length of the Bezier curve by summing the length of the segments.

And once you do that, then it's really easy to solve the problem: given a point, what is the closest (set) of points on the Bezier to that. This is an issue in UI when you want to find out where on a Bezier a user has clicked so you could (for example) split the Bezier near to where it was clicked.

So it comes down to picking the right set of t's to use and then solving the Bezier at each of those t's you can now find the t at which to split a Bezier with this code:

            DPoint bestPt = _ptlist[0];
            int bestindex = 0;
            double bestdistsq = p.LengthToSquared(bestPt);
            for (int i = 1; i < _ptlist.Count; i++)
            {
                DPoint a = _ptlist[i - 1];
                DPoint b = _ptlist[i];
                double newdist;
                 // nearest point on a line segment, returns also the dist^2
                DPoint closestPt = p.LengthTo(a, b, out newdist);
                if (newdist <= bestdistsq)
                {
                    bestPt = closestPt;
                    bestdistsq = newdist;
                    bestindex = i;
                }
            }

            if (bestindex == 0)
                return 0.0;

            if (bestPt == _ptlist[_ptlist.Count - 1])
                return 1.0;

            // linear interpolate between the two best points then lerp to the right t
            DPoint prevPoint = _ptlist[bestindex - 1];
            DPoint nextPoint = _ptlist[bestindex];
            double ratio = bestPt.LengthTo(prevPoint) / nextPoint.LengthTo(prevPoint);
            double tprev = _tlist[bestindex - 1];
            double tnext = _tlist[bestindex];
            return tprev + ((tnext - tprev) * ratio);

Which turns out to be really fast and accurate enough for UI work.

Now, compare that to the implementation in Graphics Gems Vol I, p. 787-796, you'll see a solution to the same problem that requires nearly 10 pages of code including solving for all the roots of a Bezier curve. Bravo for doing the math, but yikes you're working way too hard. It's hard to estimate the computational complexity in general because it's dependent on the number of subdivisions which depends on the curve, but in all but the worst cases, this comes out to be a number << 100.

Did I mention I love Beziers?
posted by plinth at 12:21 PM on September 12, 2014 [14 favorites]

My only defense for my performance so far is, this is not like the bezier tool I use almost every day in Inkscape.

posted by mmrtnt at 12:26 PM on September 12, 2014 [1 favorite]

Man this infuriatingly bad compared to Inkscape:

- The initial path direction is opposite the direction I set the slope with
- there's no guides to snap to for when you want symmetry ie car wheels from two points
- keyboard shortcuts dont work
- the only adjustment you can make is undo
- alt seems to be captured by my window manager and thus is captured before Firefox / Chromium can read it
posted by pwnguin at 12:37 PM on September 12, 2014 [1 favorite]

I've written a trivial bit of bezier curve generation, gave up trying to get the gaps in the line to smooth out.

plinth, your code looks pretty straightforward but would the GG logarithm have neeoded fewer cycles? Computers were rather slower in the time of GG1.

I'd sure love a bezier surface game... hmm
posted by sammyo at 12:41 PM on September 12, 2014

arrg too much like work. will not be doing roto in my spare time thanks.
posted by 5_13_23_42_69_666 at 12:57 PM on September 12, 2014

plinth: "Did I mention I love Beziers?"

Thank god all the casuals are gone by now. I'm trying to figure out how closely your approach mimics bernstein polynomials here. Interesting stuff and indeed good enough for ui work.
posted by boo_radley at 1:03 PM on September 12, 2014

I've been using Illustrator for 10+ years, I play and make educational games, so this should be a cakewalk for me. This implementation of the pen tool sucks, and going from a heart to a freaking car? That's terrible scaffolding.
posted by buriednexttoyou at 2:29 PM on September 12, 2014

LOL I love it. But then, I loved Illustrator 88. It was the program I had been waiting for since 1975. Back then, if you wanted Bezier curves, you wrote code.

The most important thing you need to know about Bezier curves in Illustrator is that when you pull a line out with the little handle, you are creating a tangent line. If you don't know what a tangent is, you have no hope of ever mastering Adobe Illustrator.
posted by charlie don't surf at 2:32 PM on September 12, 2014

Ok, I realize obviously this game is not meant for me, but I've become bizarrely obsessed with at least getting through the tutorial. Can someone explain when you're supposed to be clicking and when dragging to make the circle? I know dragging to create teh handle, but then do I let go and re-click the handle end and drag to the next node? Just let go and click the next node? I tried a bunch of stuff and when it works it seems only be accident and I don't know what I did.

Tangent line thing super helpful Charlie. I mean I saw the circle lines were tangents, but didn't catch that that's the point.
posted by If only I had a penguin... at 2:42 PM on September 12, 2014

Yeah, I could not get the circle to work at first, it seems to have some errors with precision. I did it several times and I could not get it to work, even when I put everything exactly in place with their template. And then somehow I accidentally scrolled the gadget offscreen and I could not get it back on screen.

What is not obvious there is that you can constrain the handles (the tangent line) to vertical and horizontal with the shift key. If you had four tangent lines that formed a square, and the handles were all symmetric and the same length, you get a perfect circle. But that is tricky to do by eye, so Illustrator has a Circle Tool.
posted by charlie don't surf at 2:51 PM on September 12, 2014

This gif was probably the one thing that most helped me grok the actual mechanics of bezier curves. The presentation here is quite nice to look at, though the lessons do mostly seem to be building up the understanding of some particular pen tool. The starting control point direction felt off to me for example, but then I've never managed to find a "perfect" pen tool.

Speaking of perfect, I don't think you can actually make a perfect circle with bezier curves, can you?
posted by lucidium at 3:51 PM on September 12, 2014 [2 favorites]

Speaking of perfect, I don't think you can actually make a perfect circle with bezier curves, can you?

Sure you can, in the early 2000s an act of congress redefined the trigonometric functions to be a couple of low degree polynomials.
posted by Wolfdog at 4:01 PM on September 12, 2014 [3 favorites]

Speaking of perfect, I don't think you can actually make a perfect circle with bezier curves, can you?

Well, assuming reasonably high values of perfection. Bezier curves are used as an approximation that is quick to calculate, and you can get close enough, to within the accuracy of the display device. In Illustrator, that is referred to as Flatness.

If you want a perfect circle, use sin and cos, which are computationally expensive.
posted by charlie don't surf at 4:13 PM on September 12, 2014

I'm good with beziers, having used Illustrator for some 20 years now, but they really do suck. Once you play with something like Raph Levien's Spiro, you'll never look at drawing shapes with curves in the same way again, and you'll realize how much better things could be than beziers.
posted by Joakim Ziegler at 4:40 PM on September 12, 2014 [1 favorite]

If you want a perfect circle, use sin and cos, which are computationally expensive.

If your circle has an integer pixel origin and radius, Bresenham's circle algorithm doesn't use anything but addition and multiplication.
posted by aubilenon at 4:53 PM on September 12, 2014

Your link seems to be borked but I get the point. That is interesting, I remember doing hacks like that but I didn't know it was a thing. I was thinking about a short Taylor series, but all that really does is calculate sin and cos to an arbitrary precision.
posted by charlie don't surf at 5:14 PM on September 12, 2014

Tangent line thing super helpful Charlie. I mean I saw the circle lines were tangents, but didn't catch that that's the point.

Oh.. and while I was thinking about it.. one helpful way to visualize the purpose of the tangent line is that the curve, at the control point, is exactly parallel to the tangent. If the handle on one side of the control point makes a continuous line with the handle on the other side, you have a smooth curve. If they are not in a straight line, you have a sharp corner that is defined by the angle between the handles.

Yes, I know, math guys. Let us not get into infinitesimals, derivatives, etc. We are just trying to visualize it.
posted by charlie don't surf at 5:24 PM on September 12, 2014

No you can't make a perfect circle out of Beziers, but you can approximate it to a tunable degree and Don Lancaster explains it very nicely.
posted by plinth at 5:53 PM on September 12, 2014 [2 favorites]

Or more precisely, yes you can make a perfect circle out of Beziers with an infinite number of point-sizes Beziers.
posted by plinth at 5:54 PM on September 12, 2014

Ok, I made a car. now I can go back to my life.
posted by If only I had a penguin... at 7:23 PM on September 12, 2014

> Sure you can, in the early 2000s an act of congress redefined the trigonometric functions to be a couple of low degree polynomials.

Ah yes, the Taylor Act. I believe it took several terms of Congress to pass, as a series of alternative versions passed between the two Houses. Still, you have to admire the imagination of the early exponents of the idea.
posted by benito.strauss at 7:23 PM on September 12, 2014 [1 favorite]

Joakim Ziegler: "Once you play with something like Raph Levien's Spiro, you'll never look at drawing shapes with curves in the same way again, and you'll realize how much better things could be than beziers."

Spiro curves shipped in Inkscape 0.47. Upgrade today!

Seriously though, I tried playing with Spiro, but I really am not sure what's going on behind the curtain. I have what looks like a red Bezier spline, and the handles don't seem to affect anything, only the nodes themselves. One of the nice features of low order Bezier splines is that they're localized; you can adjust a single curve without affecting the others. In contrast, edits to Spiro curves seem to have full curve affects from my experiments just now, which can be infuriating in the right circumstances.
posted by pwnguin at 10:14 PM on September 12, 2014

Raph's thesis explains what's going on, but basically, they're spiral curves, that act a lot more like the elastic pieces of wood that were originally used to draw curves physically (for stuff like boat building or typography).
posted by Joakim Ziegler at 1:14 AM on September 13, 2014 [1 favorite]

(That PhD thesis is surprisingly readable and interesting even if you don't get the math, by the way.)
posted by Joakim Ziegler at 1:16 AM on September 13, 2014

Wow that thesis is one of the more interesting and useful things I have read in a long time. Chapter 9 gets to the core of some of the issues we have talked about here, like the imprecision of beziers in constructing circles, and how to convert complex curves into Beziers. And just before that, he goes into the computational expense of using different order polynomials to calculate curves. As far as I know, Postscript only uses Beziers and that is why we are stuck with them in our current design tools, they are basically visual ways to issue Postscript commands. And the original Postscript design wanted to avoid CPU-intensive calculations, since it had a slow 68000 CPU running at 12MHz. I recall back in those days, I did a simple Postscript command that took over two days to compute (I accidentally left it running over the weekend). But nowadays, we could do all that work on the front end, and do higher order curves and break them down into Beziers, to within sufficient accuracy beyond what is necessary for output (which in my design work has often been 4000ppi).

But my favorite bit so far is page 14, and the illustration that follows. It's one of the core premises of his thesis, even though he goes far beyond. And this is good basic info for designers, who need to know how images are perceived and interpreted visually.

Evidence that the visual system is sensitive to minima and maxima of curvature goes all the way back to Attneave’s seminal experiments in the mid 1950’s [5]. Attneave presented test subjects with somewhat random, blobby drawings and asked them to annotate which points along the outline were the most salient. An example is shown in Figure 2.9. The “porcupine quills” emanating from the shape represent the relative frequency that subjects identified the points. These strongly tend to coincide with curvature extrema. As such, in interactive curve design it is reasonable to expect designers to place these points first, then refine the curves with more control points only as needed. A good spline should accommodate such a designer by preserving the curvature extrema as marked.

Anyway he goes on and I am following the math, although I may have to sit down with Mathematica and play with this stuff for a while. This thesis is going to prove professionally valuable, and it will be personally satisfying to toss some Euler and Bernoulli at some of my Math associates, who I have been needling because they do not know the difference between a parabola and a catenary.

I am grateful to you for showing me this paper.
posted by charlie don't surf at 11:43 PM on September 13, 2014 [3 favorites]

Hey, you're welcome. I know Raph (not too well) from back in the day when we were both involved with GNOME, and although he's mostly doing stuff at Google now (fonts, I think), I try to keep up with his work. He's also one of the nicest people you'll ever meet.
posted by Joakim Ziegler at 1:09 AM on September 15, 2014

Back when this was first posted, I wanted to point people to the pen tool tutorial that was a huge help for me. But I couldn't find it anymore. Well, today I happened to come across it again.

So here's Illustrator Pen tool exercises by Veerle Pieters. Many of Veerle's other tutorials are also quite well done.
posted by Banknote of the year at 2:05 PM on September 22, 2014 [1 favorite]