Lack of robust bézier handling tools

[rell]

This is a proposal for an alternative way of interacting with Béziers that is lacking in the consumer vector design program space, though most of these have existed for years or decades with font design tools. I wrote it up to outline some key problems with vector handling in Affinity Designer and suggest a potential solution.

1. Diagnosis: "robust"

Currently Affinity Designer has a flimsiness problem with its current bezier tools. What I mean is that once a change to curvature must be made, it is difficult to make it consistently and parametrically. A "robust" set of tools is one in which the behaviours are consistent, expectable, and where as many transformations as possible can be done incrementally (i.e. without relying on the mouse motion to drag things into place). It should be possible to access basic transformations (translate, scale, rotate, skew) on any parts of the curvature (segments, anchors, BCPs, whole objects) in any combination, independantly of one another, with no unnecessary steps.

We can move anchor points and their BCPs ('handles', Bezier Control Points) with the mouse pointer, and we can snap them, but we can only use the anchors themselves to apply transformations or shift them with arrow keys. We also have no good way of applying transformations to even the anchors themselves if the group we wish to transform belongs to more than 1 vector layer. What this inevitably means is that for relatively simple transformations of curvature, if one does not settle for changing handle positions individually, they are required to set up elaborate grids, relying on the snapping mechanics of anchors and BCPs, which does work to achieve a final goal, but is not good for exploring a range of possibilities. If the same transformation has to be made to another part of the curvature (let alone one at an angle relative to the original), that necessitates extensive re-positioning. There are also many lacking aspects of managing curvature, such as no good ways of adding BCPs to straight line segments, inconsistent results in converting between smooth and sharp anchors, and no way to move an anchor point between its BCPs.

2. Applicability

Though I will propose many features found in e.g. font design software, this is not an attempt to turn Affinity Designer into a makeshift font editor or anything of the like. Since the software is relatively specialised and I imagine not many users of the Affinity suite have experience with it, I am bringing the lack of its features to light because I think anyone who uses Béziers would find them useful in their process, but it is impossible to desire what one doesn't know to exist. More robust Bézier tools touch on every aspect of vector work and make significantly easier the processes of, for example, editing expanded typography, designing ornaments, designing frames, creating precise logos or icons, digitising raster drawings, ensuring consistency in curvature (+ removing 'sharp points'), fine-tuning masks, creating consistent shapes not covered by the shape tools, working on anything technical where things like G-continuity and/or consistency of curvature make a significant impact, or even reliably editing meshes, which at the moment is extremely labourious. Currently Illustrator has the same problem; often editing a mesh for a specific purpose is more trouble than it's worth, given that the end result is not even guaranteed to be good and may need to be adjusted later.

3. Examples of robust vector tools

Most good examples of good vector handling are common within font tools, which is not very suprising given that their premise is precise vector output. For that reason I think Designer could pick up a few things common in font tools. The absence of these features in regular vector design programs could be partly because they create a lot of visual complexity with even a small number of elements. However, as I will propose later down the line, Designer already has a solution to allowing different types of editing and hiding their visual clutter which would make it possible to isolate selected objects and allow editing them comprehensively. Below are some examples of what I outlined before and a brief summary.

In Glyphs, BCPs can be selected independantly from their anchors and are given their own bounding box. They may be nudged by arrows or transformed by scaling or rotating by dragging or with precise parameters. Option-clicking on a straight line segment places both missing BCPs on the line segment. Double-clicking on an anchor point or pressing 'return' with any number of anchors selected turns them from a corner points (blue) to a smooth points (orange) — meaning the BCPs on their sides are always aligned. Being able to toggle between these two options is extremely useful, especially if it is possible to ensure only one BCP realigns (currently affinity designer displays smooth anchors as round but with the same colour which should be editable separately, and when converting from sharp to smooth, both BCPs change position. I think there should be an option to have a more predictable behaviour in that place) Also notice how despite being two separate objects, all the BCPs and anchors can be selected and transformed together.

There was already a post that suggested the option to view curvature combs. I will not reiterate their usefulness, only specify that the option to display them is in my view a useful tool to model Béziers with precision.
On the right of the image is a use case of having clearly defined corner and smooth points in curvature; the BCP on the right of the orange point always aligns with the line that leads into the point, thus moving it around always generates a straight line that curves downwards without performing any additional steps. This is not a call for 'that specific feature.' Rather I am attempting to demonstrate that some simple shifts in how the curves are handled can be very powerful for editing and exploring within the program. I believe many font tools are at the current 'apex' of the power the user has by virtue of nothing other than just their handling of Bézier curves.    

There area also more specific vector tools that make mundane tasks much easier. The I-disconnector, for instance, is similar to the knife tool, except it also allows a specified amount of overlap to be generated. The disconnectors in general are useful for breaking down more complicated shapes with minimal effort. I could understand such things never making their way to the program. I put them into this post only to demonstrate how many core vector features are possible (but largely unexplored) within software like Designer or Ai for simplifying mundane daily tasks that consume a long time when they must be done.

Brief list of integral features for precise editing of vector paths:

1. Independently selectable anchor points and BCPs (independent of one another and the selected object in the layers window)
2. A convenient way to rotate and scale from an anchor point. The current behaviour of having to manually drag the anchor point from the centre of selection each time is too slow. This feature is good for layers because they remember where their anchor point is, but for more temporary selections another solution should exist.
3. More consistent conversion between smooth and corner anchors and possibility to display the distinction clearer
4. Curvature combs
5. On hold of [whatever key modifier] and arrow keys, the selected BCP moves along side an extension of its original 'line' from its anchor point (this already happens with shift-dragging) and on hold of [the same modifier] the smooth anchor point is moved between its BCPs and the corner point is moved independently of its BCPs, such that in both cases only the anchor is moved and the BCPs stay in place (both with arrows and with mouse dragging).

Below are some of the sources of features and potential sources of additional features that would benefit Affinity Designer in my view. The reason I list them is to show the breadth of how much can be done with Bézier curves alone, and why all those features could be placed into a Persona of its own (however radical or far-fetched it may feel). I would however suggest improving the basics of curve handling before an application of any of these is considered. 

• Most of the proposed features come directly from Glyphs 3. There is of course much more to Glyphs. I could only wish for its segment component functionality to make its way to Designer's Symbols window. 
• The disconnectors come from DTL FM2. They are available in DTL LetterModeller. It can be a bit tricky to get into the font editor in LeMo. It has a lot of other really useful features that I didn't mention because I intend this post to primarily propose features that would be 'unlocked' to the user with only a difference in the handling of existing functionality within the software. However one 'separatable' feature I particularly like is the Shift Smooth, which is a way of moving an anchor point and recalculates all 4 BCPs of its adjecent line segments to maintain the smoothness of curvature.
• The curvature combs I showed come from Yanone's Speedpunk, which is a FOSS extension to RoboFont and Glyphs. Including this feature is part of why I am intent on proposing all these together as one Persona rather than individually — displaying this information in particular can be computationally intense if done by accident in an e.g. illustration process, so I think it should not be possible to accidentally enable it within a process that wouldn't make use of them.
• A lot of other useful functionality exists in the spaces of plug-ins for RoboFont and Glyphs. 

4. Why the proposal? Is it even suitable?

There are many things that Affinity Designer aims to be, and I know certain features, e.g. auto trace, are very often requested by people who wish to get as far away from Adobe's pricing model as they can. I notice that recently it also aims to be a bit of precision tool, allowing import and editing of CAD files which can also be locked behind an oppressive subscription. I believe that this is a strong point for both, providing features that most people would use and find indispensible after having tried them, and ones that people who need precision would be very happy about. They strenghten the core of what a vector design program is. The people who need precision are not just the few who cannot live without CAD support within Affinity Designer, but also anyone who e.g. designs a precise icon or logo, customises type for a large poster or mural, or just isn't sure where the object they want lies on the scale from squircle to circle to diamond, and doesn't have 4 hours to set up an elaborate grid and move the BCPS one by one, through one iteration by another.

The reason I think Affinity Designer is uniquely suited for these features is because though they make life much easier, they can introduce a lot of visual clutter, which Designer already has a way of dealing with; the Personas. Dedicating one entirely to much stronger vector functionality seems to me like a good place for features that are sorely missing from the entire space, one only this particular program could provide effectively as it stands (which is why I elected to put this proposal here rather than e.g. sending it to Adobe, whatever that could have accomplished.) I am also admittedly a bit sick of creating a new font file whenever I want to edit an SVG with a modicum of speed and accuracy, despite having access to both Designer and Adobe Illustrator.

To end my million-word bézier novella, I want to clarify that it doesn't matter to me how the issues I brought up are addressed if only they are. The methods used by font software are of course tried and working well; everyone I know with experience using font tools tends to edit paths within them, even if that means having to paste them from and back into other software, not to mention reposition them. If nothing changes about Affinity Designer, then that is just what I will keep on doing, but I think it would be neat if this functionality was more accessible. To anyone yet unconvinced, I urge you to download a free trial of FontLab (mac/win) or Glyphs (mac only) and spend a few hours editing paths within them, then see how you feel after returning to Designer. A testimony on the Glyphs website says: "After using Glyphs, the pen tool in Illustrator feels like carving a chicken with a chainsaw." That it does, and I'm afraid Designer currently feels quite the same, but it has the potential to make Illustrator feel like that in comparison.

[Rudantu]

Well thought out - this would strengthen the vector offering of Affinity tools significantly. Bump.

[fde101]

On 7/6/2023 at 3:40 PM, rell said:

Independently selectable anchor points and BCPs (independent of one another

I like this idea.

 

On 7/6/2023 at 3:40 PM, rell said:

and the selected object in the layers window

In a font editor that would be fine as the number of shapes you are dealing with is relatively tiny, but in a vector drawing in a tool like Designer, you could have a lot more individual layers on the page which could contribute handles and points, and managing all of those points on the screen to enable editing can take a performance toll on the application.  I don't believe this would scale well enough to be practical in complex documents.

Displaying for manipulation all the points of the selected layers, sure, and Designer allows that now for the anchor points - but all objects across the entire image, I suspect would lead to problems.  A user could always do a select all in order to accomplish the same effect if they felt the need.

 

On 7/6/2023 at 3:40 PM, rell said:

sources of additional features

The main issue with this post (other than being a bit long) is that it violates one of the basic principles of posting feature requests here: ONE REQUEST PER THREAD.  Pulling multiple requests into one thread could lead to scattered discussions and complicate the ability to follow them.  The requests should really be broken out into separate threads so that their merits can be discussed individually.

[Meliora spero]

On 11/1/2024 at 9:47 AM, fde101 said:

The main issue with this post (other than being a bit long) is that it violates one of the basic principles of posting feature requests here: ONE REQUEST PER THREAD.  Pulling multiple requests into one thread could lead to scattered discussions and complicate the ability to follow them.  The requests should really be broken out into separate threads so that their merits can be discussed individually.

The big issue with this post (if you look at it from the opposite perspective) is that if he had asked for a different icon for the pen tool or the desktop icon, or had discussed Pepsi vs Coca Cola, the thread would have been 18 pages long. But this type of qualified feedback, whether the post is split up or not, just ends up receiving responses like this from the sleepwalking patrols in the forum, whose apparent calling is to respond to everything.

I had hoped that ambitious users who use these tools in a different way than I do would chime in.

[bezster]

The OP penned a fantastic Bézier article! 

Please note that the following questions are totally off topic, but they relate to FontLab:

I'm about a millimeter away from upgrading from FontLab 5 to FontLab 8. Does anyone know if we can copy from Designer and paste into FontLab 8? Is it a two-way street? Would that type of copy-paste go smoothly … or are there any relevant issues I should be aware of. 

Thanks! 

[ohmantics]

I came in the forums to suggest pretty much the same things as the OP. I've spent the last several days trying to use Designer 2 to build a handful of custom SF Symbols for use with an iOS app. It's been miserable.

A requirement for producing different weights of symbols is that you produce three sets of curves that are identical in number of nodes and their connections so they can be trivially interpolated.

• I have struggled to have precision control over control points in terms of their coordinates, angle, length. I can't resort to editing these numerically.
• I have struggled to align or match control points across nodes. I have struggled with the inability to mirror control points for two nodes around arbitrary axes.
• I have struggled to compute node locations, having to transcribe node locations into Notes, then using Calculator to work out new coordinates.
• I have struggled with shape operations (union/intersection/xor) producing sub-optimal curves with extra nodes.
• I have struggled with removing nodes (Fit to Curve Delete Node) not fitting the curve.
• I have struggled with changing which node in a curve is the start of the curve. Breaking and closing often makes a mess.
• I have struggled with SVG output consistency. Sometimes I find that what show as different curves in Layers are being output without a Z command between them. While this is an optimization in the SVG output, it is not consistent and I've resorted to using an open source SVG path editor to inspect the path commands and then manually edit them in the SVG text that I'm feeding into the SF Symbols app. If I didn't have a programming background, I'd probably be completely stuck at this step.
• I have struggled with SVG output having different transforms, either using a matrix transform or all the points in the paths being adjusted, often getting both result types in the same SVG export.
• I have looked for existing plugin scripting solutions, but there are none. Note that most professional tools have Python integration. JavaScript's handling of numbers is wholly inadequate.

I think a good exercise here is for the team to export a template from SF Symbols and then try to produce their own symbol by editing it. The feature requirements will become very obvious very quickly. Note the precision of Apple's SF Symbols -- the curves pretty much all have their starting point at the bottom of curves along a middle axis if one is present. Either their designers are remarkably consistent in how they build their curves or they have some scripting to clean things up.

Edited January 21 by ohmantics

[JET_Affinity]

The pity is that the vast majority of even longtime highly skilled and successful vector illustrators have never touched a font design program, and frankly—no offense intended—therefore don't know what they are missing. I get that. I understand being busy. But anyone serious in this business would do well to download a demo trial copy of FontLab, if available, and spend some time exploring the  Bezier drawing interface. I am so thankful that my first exposure to Bezier-based drawing was in Altsys Fontographer {the progenitor of Aldus FreeHand).

JET