Bezier point looks and behavior

[Matthias]

I suggest different shapes for different types of bezier anchor points: Rectangles for edge points (which can have curve handles as well, just not tangential) and circles for curve points. Also, you may take a look at how the whole bezier enchilada works in FreeHand. To my knowledge it is by far the most intuitive and quickest way to draw and manipulate curves.

 

I have attached a PDF from the FreeFreeHand guys which compares FreeHand to Illustrator and proves in how many areas FreeHand’s approach and UI is by far more intuitive and requires way less clicks. Maybe you can use some ideas from there.

 

Thanks, Matthias

AI_FH_UI_and_Features.pdf

[MattP]

Hi Matthias,

 

I definitely agree that curve node type indicators may be helpful (we're investigating this at the moment - we used to have them, but they looked ugly and distracting so we removed them, but are currently trying to find something more subtle). Have you tried Affinity Designer's Pen tool yet - I'd argue that it's very full-featured and extremely productive already, and we're currently adding additional functionality as we speak - hopefully available in the next beta :)

 

Cheers,

Matt

[Matthias]

Yeah Matt, that was the first tool I checked. Now, of course I am biased towards FreeHand but I found a few quirks that kept me guessing. One example: Is it possible to switch from a curve node to an edge node – while keeping the handles which would have the option to more angles than just 180°? Or, is it possible to bend a straight path with a sub select pointer? This would be a great thing. Also, I think being able to fill non-closed paths is not a good idea …

 

Looking forward to the next beta – and whatever you will refine, Designer looks to me already like a winner! Now, if Publisher will have the guts to challenge InDesign (and Photo to challenge Photoshop) I will be more than happy.

[Ben]

A very interesting doc.

 

Just been reading up on Freehand (not having ever used it).  We are curious as to what the different point types are.  The doc you gave lists Curve points, Corner points and Connector points on page 9.  From the diagram it's not entirely clear why the difference is important (before you come to edit them).

 

Could you give us a bit of an explanation of the three types from a Freehand user point of view?  I think I can guess at the first two, but Connector points we are not sure about?

 

Our Node and Pen tool currently show the off-curve control points for selected curve nodes. Dragging the off curve points will let you see if they are currently smoothed.  We are currently experimenting with ways of better indicating smoothed points (whether the control points are locked collinear, and if they have equal length).

[Ben]

You can already bend a straight edge with the Node tool (or drag an already existing curve).  With the cursor over a line, drag and it should become a curve section.  Clicking on a line inserts a new point at the cursor position.

[TonyO]

Something to add to a topic about node view.

 

Running on a 27" iMac, i would like to see an option to increase or decrease the size of on-screen nodes and drag points. When you get into the larger screens, it would be nice to make the nodes a bit bigger onscreen for easier grabbing.  Oddly enough on the lower rez of my 24" iMac at home, i would like to make them a bit smaller. 

 

Illustrator has an option like this, though not very diverse in it's options. See screenshot.

[Matthias]

Hey Ben,

I try to explain the three point types. Page 9 in the document is a bit misleading in that it shows all of the tree types doing the same thing: drawing straight lines. Any type may have handles or not but without handles the behave all the same.

 

The circular curve point allows only handles being tangential so that the path stays smooth.

 

The square corner point produces by default no handles thus the resulting path is edgy and straight. You can however use the alt key to pull a handle out on either side and those handles may have any length and angle, always resulting in an edgy corner (except they are angled at 180°).

 

The third point type comes in handy sometimes but is a bit redundant: The triangles connector point makes sure that if you go from a straight line into a curve it will be a smooth transition. Think of a straight street that goes into a curve. This is done by allowing only handles coming out from the opposing side of the straight part – and forcing them to the 180° angle of the straight part.

 

Any point can be changed into all of the others via a tool or a control panel where you can check the exact properties of every point.

 

Hope this helps.

[rui_mac]

Yes, the option of being able to transform the point type without having to touch/adjust the handles is tremendous and I miss it a lot, in Illustrator.
It is amazing that an application made by the guys who invented the postscript language and should be the ones that mastered the use of Bezier curves is still much less powerful and intuitive than an old application that is "dead" for 10 years.

[MattP]

Well, I think we might go with the following change...

 

 

Cusp nodes will be displayed with a triangle because they are making sharp corners, smooth nodes are displayed with squares as they are the default type and look obviously different to the round off-curve handles.

 

I've played with this before (I even added it to DrawPlus a long time ago) but was never very happy with how it looked, so always removed it. I think I like this though (for the moment!) so we'll see how you feel about it in the next beta :)

 

Cheers,

Matt

[rui_mac]

It looks sweet :-)

I like it.

[rui_mac]

By the way, will there be implemented a way to change the point mode (cusp/smooth) of selected point(s)?

[MattP]

Hi,

 

I'm still not absolutely certain it's necessary at the moment? I'll explain my logic: If you have a smooth node selected and hold down the Alt key and try to move either of its off-curve handles it will automatically become a cusp node type - so I didn't need to click a button to convert it to the cusp type first. Alternatively, a cusp node which just appears to be smooth is not very useful until you use it as a cusp - at which time you would've just held down Alt to make it into a cusp automatically if it was a smooth to start with...

 

Hope that makes sense? I'm still open to suggestions, but I'm fairly happy with the way it is now, so I'll take a little more convincing this time ;)

Matt

[rui_mac]

Ok, I will explain why changing mode is so useful, mainly, changing cusp to smooth.

Sometimes, I create polygonal paths (just cusps) with strategically placed points, because I know how Beziers work and I know where to place the control points. This way, I can create a very simple shape with the minimum required points.

Then, selecting all the control points and changing them to smooth (with de handles automatically sticking out) will create the smooth path I require and usually I don't need much adjustment after that.

Anyone else uses this method or am I the only mega-geek here? ;-)

[MattP]

In which case, I think we already do what you want! :)  Just select the node(s) you're interested in and on the context toolbar for the Node tool choose the 'Smooth' option from the 'Convert' button group. Is that what you're looking for? :)

[rui_mac]

Right on :-D

[TonyO]

There doesn't seem to be an easy way to do the opposite though, changing a group of smooth back to cusp. Currently need to hold option and do each one individually if I'm not mistaken. You can click the corner convert, but then all your curves become straight.

[MattP]

Hi Tony,

 

This is what I was trying to describe - that I didn't see the point in converting them to cusp and them staying with the same geometry (i.e. appearing to be smooth still). It's less useful than it still actually being a smooth type, and if you actually wanted to make them disjointed you just need to hold down Alt while you move the off-curve handles and it will automatically become Cusp as you do the operation... So I just don't see why it's a good thing?

 

Genuinely confused, not trying to be awkward or unreceptive :)

Matt

[Matthias]

I still think it would be a good thing to have a visual reference for both types of nodes (the smart node is referenced by color).

 

When I do precision drawing it is always good to know whether a node is smooth or cusp one without having to zoom in. To avoid redundancy and guesswork you could automatically change the rectangle (?) of a cusp node into the circle (?) of a smooth node as soon as the cusp node’s handles happen to be tangential (180°).

[TonyO]

Hey Matt,

Probably just for the ease of not having to use an extra key command is all.

 

Quick select of a large group of nodes, hit the cusp convert button, then no extra keys to hold while editing to break smooth apart since all of them were done at once.

 

Corel converts would be used to this action.

 

Though to your point, this function would be way less useful in affinity than it was in corel, since in corel all straight lines and corner points were also locked as is along with smooth, and the only way to get a shape of cusps was to do what i described above... in affinity, straight lines are not locked into being straight and can be curved with a simple drag of the segment, making all corner points kind of cusped by default, which is awesome. So far it's not interrupting workflow, maybe once in a great while, so now that you mention it, its probably not even important, haha.

[MattP]

:)

 

Like I said, I'm always open to a sensible suggestion, so if it bothers you again in time then we'll revisit it! :)

[Petar Petrenko]

Why not use, lets say:

 

CONTROL for Cusp nodes

OPTION for Smooth nodes

COMMAND for Symmetrical nodes?

[Matthias]

Cusp nodes will be displayed with a triangle because they are making sharp corners, smooth nodes are displayed with squares as they are the default type and look obviously different to the round off-curve handles.

 

I've played with this before (I even added it to DrawPlus a long time ago) but was never very happy with how it looked, so always removed it.

 

 

 

Hey Matt,

maybe this is pedantic, but as much as I cherish the different looks of the node types I think there could be more obviousness in it. Why not make the smooth nodes round, the cusp nodes square and the handle ends a small diagonal cross?

 

I also think the node indicators are a tad too big drawn which looks a bit toylike. Just my 2 cents.

 

More little UI suggestions:

1) Pulling a (yet nonexistent) handle out of a node via node tool -> alt key.

2) An alt-click on a cusp node could constrain existing handles to 180° while maintaining their length, thus converting the node to a smooth one.

3) An alt-click on a smooth node and on a smart node could get rid of the handles thus converting the node to a cusp one.

 

At least suggestion no. 3) can already be done in the context sensitive panel but that means a lot of mouse traveling.

[MattP]

Hi matthias :)

 

Thanks for your input!

 

I think suggestion 3 should work already. Suggestion 2 is definitely interesting - I'll give it some thought! Suggestion 1 is quite tricky because you've got the question of whether you meant to drag the off-curve handle out from before the current node, or after the current node - that's the only reason we haven't done it (although we've obviously talked about it!)

 

The size of nodes is always a sore point - I like them a little smaller, then other people can't see them properly so complain and I make them a little bigger again. We can definitely look at putting size options in if enough people are unhappy with them :)

 

See how you feel about the new look of the tool when you get the new beta (which will probably be on Tuesday again, as seems to be our schedule at the moment!) Incidentally, I changed it so that Smart nodes now just draw as slightly larger circles instead of drawing in orange and as squares. Again, see what you think when you try it!

 

Many thanks,

Matt

[Matthias]

Great Matt,

 

looking forward to the next Beta.

Meanwhile I will suggest a few more things to keep you guys busy :-)

[MattP]

Sounds good to me! :)