The Bézier Game | Hacker News Reader

The Bézier Game

bezier.method.ac

117 pointsuptown37 comments

When you pull out the first point of a curve, it's oriented backwards. Here's what I see when I click on the left point of the circle, drag the curve handle upwards, release, and move the cursor to the second point: http://imgur.com/zw20Ig4

I get the same behavior on the next exercise (the heart), as well.

Also I feel that you are giving exactly enough points to do a nicely editable shape, and then asking them to do it in less by having the score mechanic. I'm at the face now, and every preceding image has been done with exactly the amount of points allocated when I follow my usual rules of point placement. I feel like you're teaching people to make hard-to-edit images by asking them to use less points.

(Said rules: 1. Pull curve handles out to about 1/3 of the length of the line they control. 2. Never turn more than 90º between two control points. 3. Avoid S-curves between two points.)

OSX 10.9.4, Safari. And fourteen years using Illustrator as my main artistic medium.

Edit. I stopped at the swooshy S when you asked me to try and make it with about 3/4 as many points as I would consider to be the minimum for a nice, controllable path. I feel you are teaching people bad form.

(To make a programming analogy: think of the difference between ultra-compact, hyper-idiomatic Perl code with single-letter variables and nicely-commented code with informative variable names - the Perl may be smaller, but it takes a lot more effort to go back and read when you need to change something.)

I could not even get through the first tutorial stage. What did any of the cursor things mean? I kept clicking , but the colors turned from peach to green to purple only, nothing else happened. What is this supposed to teach again? A better tutorial is needed for sure. This was 'clever' but too clever for me to use.

same here. I had no idea what to do.

Same here! So frustrating. Edit: ok got it.. just follow the animation exactly but just click once at each point, don't drag a line out..

Not sure if considered bug or "feature" but after first level, on levels that require you to go to your starting point, i.e.: draw a heart or circle, you can click on your starting point again, winning the level with all your nodes remaining. This can be used to skip levels.

This is a bug indeed, thanks for the notice. (changed the way this was detected and I accidentally the whole thing, sigh).

"I accidentally the whole thing" ... best typo ever, given the bug. :D Is there such a thing as a typo pun?

Yup! This one's been around for a while:

http://knowyourmeme.com/memes/i-accidentally

Solid game, I got 11. I just wish there was a way to edit nodes - it's really annoying to try to guess what the curve will look like when moving an unlinked node (like in the heart example). I can see that being part of the game though, I definitely got better at it by the end.

That was my complaint when this was submitted a few days ago.

You can always open some file with curves in Photoshop and practice.

Key in getting adept at bézier curves is guessing the form of the curve in advance, this is why curves can't be modified (otherwise it's just better to practice tracing in your favorite design tool).

To be honest I found the way nodes were restricted in the UI an odd choice, coming from both how Photoshop and Illustrator handle node editing. The game's goal appears to be a friendly way of teaching such concepts yet it limits the user's interaction/experimentation with them.

Being able to manipulate the control points after adding them, at least in angle and creating cusp points would make understanding them easier I feel. At least some initial interactive demo node for the user to play around with.

All these years of tinkering in fireworks and I never learned about using the alt key to break control points. Thank you!

Yep, that's something that's always frustrated me using the pen tool and I had no idea about the Alt thing either.

Great stuff. I've taught and watched people struggle to learn how to use the pen tool… it seems to be very unintuitive at first. A walkthrough using something like this would be a great tool for learning.

Also, I wouldn't have known to try that Alt trick had it not been for this parent comment. I'd recommend words instead of symbols for Alt and Shift at the top, and probably written instructions for the tutorial levels.

Having never used a "pen tool" and having no idea how it works, I have no idea how to get past the bottom point of the heart.

Upon reflection, I think the issue is that I can't hit the OS X "alt" key on my traditional keyboard. I can't risk changing the mapping in software though, because then some other shortcut in another program will break.

Is there ay way to jump to levels or replay the demo on the tutorial pages?

Yes, this would be nice since I couldn't figure out the heart in the demo.

CTRL + X will re-display the tutorial animation.

Great game!

For me, the issue is this: the direction that you drag when you're doing your first anchor point is the opposite of the direction that it should be. You're dragging away from the direction you want it to curve, rather than towards it. But for every anchor point other than the first one, you're dragging towards it.

Author here. That's the way Adobe Illustrator thinks Bézier curves should work, unfortunately. I have no idea why,I chose to follow their lead because the purpose is learning how to use a tool. Still on the fence on this one, I even had to go out of my way to implement it.

Historical reasons perhaps? The icon hasn't changed in what, 27 years? ;-) http://blogs.adobe.com/jnack/2008/02/meet_adobe_illustrator_...

No, for the first point, you are doing it exactly the opposite of the way Illustrator does it. In Illustrator, you click for your starting point, and you drag in the direction you want the curve to go. In yours, you click for your starting point, and drag in the opposite direction.

If your copy of Illustrator does that with its curves then something is direly wrong with it. I've used it since 2000 and it's never done that.

Omnigraffle's pen tool does the right thing - and it is way way easier to use.

Awesome idea, but unfortunately unplayable. The first point is oriented backwards, as many pointed out here. Pressing Alt is constantly popping/hiding Firefox's main menu, shifting the display up and down.

Seems on the loop levels that clicking once or twice on the start position clears the level, or I don't understand what is happening (which is possible...)

Wow for some reason I let that tool dominate my subconscious, now I feel like I have skills to do basic lines & shapes! Thank you!

This is great. I've always wanted to learn Bezier curve drawing. Now I know how. Thanks!

Never used the "Pen Tool" before. Got 28 nodes to spare on first try :)

34 spare nodes. I tried to be true to the shape and not cut any corners.

Took me a while to get a hang of things... nice work !!

One word. Thank you.

Umm... that's two words.

This game was awesome. I had 24 points to spare :)

If it is a closed figure ... Just double click :)

very helpful, finally an excuse to start using my copy of Sketch ;)

Reply on news.ycombinator.com