
The Bézier Game - uptown
http://bezier.method.ac/
======
egypturnash
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](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.)

------
Balgair
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.

~~~
saywut
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..

------
Stormcaller
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.

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

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

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

[http://knowyourmeme.com/memes/i-accidentally](http://knowyourmeme.com/memes/i-accidentally)

------
ertdfgcb
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.

~~~
duopixel
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).

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

~~~
ryanwhitney
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.

------
baddox
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.

~~~
baddox
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.

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

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

~~~
spb
CTRL + X will re-display the tutorial animation.

------
kremlin
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.

~~~
duopixel
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.

~~~
hamburglar
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.

------
ozh
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.

------
roblev
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...)

------
jastanton
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!

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

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

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

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

------
jarsj
One word. Thank you.

~~~
uptown
Umm... that's two words.

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

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

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

