How can I calculate the angles for each point of a letter ?
Hello !
I'm having a hard time solving this problem.
How can i calculate the angle of the red arc (exactly like in the picture).
I need to calculate it for each point of the letter (black dots on the image), I would like the principle to be applicable to any letter.
I tried to calculate the angle with the "Arc Measure" node from John Cartan's library, but I can't implement it in my case :(
Sorry for my English, this message has been translated from French, I hope my question was clear
Thanks in advance,
0zera
Capture_d’écran_2022-10-05_à_01.05.48.png
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by john on 05 Oct, 2022 02:22 AM
Ozera,
Let's start with the capital H, since it's (relatively) easy.
If you draw an H using the textpath node with a big font size and colorize it with a stroke width > 0 and a transparent interior (fill with alpha of 0), then turn on the points and point numbers checkboxes, you can easily see the points you need and the order in which they are drawn. (My apologies if you already know this; I wasn't sure if your image was given to you or if you drew it yourself using Nodebox).
The capital H consists of a single closed path with 12 points at each corner. In Verdana the H is drawn in clockwise order; this varies from font to font but we can ignore that for this case. To get a list of these points, simply feed your textpath node into a points node.
For each corner you need the difference between two angles: the angle between that point and the previous point in the path, and the angle between that point and the next point in the path. The angle node gives you each of these two angles, but how to you get the previous point and the next point?
Use the shift node! Just feed your point node into two shift nodes, one with amount set to -1, the other set to 1. You now have three lists: your points, the previous points, and the next points. Feed points and previous points into one angle node, and points and next points into the another angle node. Then all you have to do is subtract them!
A subtract node gets the magnitude of the angle you need, but will sometimes be positive, sometimes negative, and may sometimes return the interior angle instead of the exterior angle. You can resolve this on your own with a little arithmetic, or simply use my handy arc_measure node (which you have already found).
Problem solved!
If you want to generalize this to any letter you will have to deal with three additional complications: direction, contours and curves.
DIRECTION
I mentioned above that we could ignore whether the letter path was drawn clockwise or counterclockwise in the case of a Verdana H. But if you start dealing with other letters rendered in other fonts you will soon encounter counterclockwise paths. The above method still works, but for counterclockwise paths my arc_measure will return interior angles instead of exterior angles.
This problem can be easily solved using nodes from my node library (which you have already found). To correct for this you can first determine which direction a given letter path is drawn in using my handy clockwise node. If the path is counterclockwise and you want exterior angles, just reverse the path using my rev_dir node.
CONTOURS
Letters with holes (like an A) or with dots (like an i) consist of multiple subpaths called contours. Nodebox treats each letter as a single path, so if you feed a capital A into your H network the path will include a false connection between the outer and inner contours - which will throw off your calculations.
Nodebox does not provide a node to separate a letter into multiple contours, but I do! Since you are already dipping in to my node library, just grab my contour node. If you turn your calculations into a subnetwork then, instead of feeding it a capital A, you can instead just first feed your letter into the contours node, then feed THAT into your subnetwork. Everything will come out just fine.
CURVES
The final problem is trickier. Of course many letters consist of splines which mix straight segments with curved segments. Each curve segment is quadratic curve with two end points and two control points. A curve does not have a single angle but instead has a tangent which continuously varies from start to end.
There are two basic ways of handling this. One way would be to simply eliminate the curves by feeding your letter into a resample node. This converts your curvy letter into a bumpy polygon with only straight line segments. But because it does not distinguish between line segments and curves, the results will not be pretty.
The other approach would be to ignore the curves and only show angles for corners bounded by line segments on either side. To do this you need some way of detecting which segments in your letter spline are lines and which are curves.
Nodebox does have a (poorly documented) way of doing this. It turns out that each point in a path has a type. Points bounding a line segment, and points at the start of a curve, are type 0. End points of curves are type 1. Control points are type 2. Once you have a list of points, you can identify these types using a lookup node set to "type".
Using this trick you can disassemble your spline and either remove all the curves or do something else with them. This can become a bit involved. Fortunately, I have another node in my library which does this for you: explode. Explode takes any path and returns all the individual segments that comprise it. By testing the type of the points in each segment you can easily determine whether each is a line or a curve and act accordingly. Be aware that fonts often string multiple curve segments together to form larger curves.
That should be enough to get you unstuck. Thanks for asking for help and please feel free to ask more questions as they occur to you.
John
P.S. If you are curious how the nodes in my node library work, just open them up and look inside! Each of the "nodes" referenced above is actually a subnetwork. "Edit Children" to peer inside and see how I did each one.