Draw Points

Attached is a new node for my library: draw_points. UPDATE - I made an update to this update; see below for the latest version.

When you start mucking with paths in Nodebox, the Points and Point Numbers checkboxes above the render pane become very useful. The blue and red dots for each point allow you to distinguish between end points and control points. The numbers allow you to see where a path begins and which direction it goes.

But for complex paths, like text paths, the dots can completely overwhelm the drawing, even when zooming in. Adding numbers makes it even worse - many designs turn into a blue-red sludge when you turn on these features.

Draw_points provides a much cleaner and more powerful alternative. Just feed a path into it, and it will show the points as slightly translucent dots that can be independently resized to provide the clearest view at any magnification. It can show numbers inside the dots instead of to one side, which greatly improves readability. And it can distinguish between the two types of end points: type 1 for line segments, and type 2 for the beginning and end of curves.

Draw_points take four parameters:

• Point size. The diameter of the dots. Readable down to .25 for 9-point text paths.
• Discern blues. If checked, will show end points as dark blue (type 1) or light blue (type 2).
• Include path. If checked, outputs the path with the dots on top; otherwise only shows the dots.
• Point numbers. If checked, shows sequential point numbers inside each dot. Zoom in to see them.

Screenshot 1 shows an ampersand with draw_dots added. Even from a distance you can easily discern the three types of points and see where curves begin and end.

Screenshot 2 shows a zoomed in view of the first and last points in the inner contour at the top of the ampersand. Notice that the number labels are drawn in colors complementary to the dot color. This allows you to understand the path structure even when points overlap, as they do here with point 0 (in yellow) and point 24 (in red). The yellow color (complementary to dark blue) tells us that point 0 is type 1 and point 24 is type 2. The stroke around each dot makes overlaps easier to see and helps you see the dots even against blue or red backgrounds.

Draw_points is primarily intended as a debugging tool. You can attach it when working on a design, then remove it when you no longer need to understand the path structures. It is, however, also useful in diagrams used to show people details about a design or font.

Enjoy!

UPDATE

After much use of this node over the last few days, I have made a few minor stylistic changes:

• I now outline the dots in white instead of dark gray. This makes chains of overlapping dots a bit easier to discern.
• Various fine adjustments to the translucency, labeling, stroke widths, etc.
• The first point now shows in yellow with a path direction indicator.

That third improvement is the most striking. I often find myself looking at fairly dense, complicated paths with many points and need to figure out where the path starts and what direction it's going in (clockwise or counterclockwise). Even with my draw_points node this required some tedious zooming and hunting and looking at overlapping point numbers.

The new yellow starting point makes this MUCH easier. I can now instantly see where a path starts and what direction it's going in.

Note: If you uncheck the Discern blues checkbox, the first point will be drawn as a simple blue dot. Turning off discern mode results is a simpler, less illuminating display, but can be useful if you just want to show points the way Nodebox normally does for a diagram or tutorial.

One subtle point: The yellow starting point is outlined in its type color. Normally the first point in any path is type 1 (dark blue), so the first point will almost always appear as yellow with a dark blue outline. But in certain strange situations, when you are manipulating paths and make a mistake, you may wind up with a path that starts with a control point. In this case the yellow starting point would be outlined in red.

I show an example of this rare situation in the demo.

On top is an ordinary circle. Using draw_points you can immediately see that a Nodebox circle starts at the 3 o'clock position and moves clockwise by joining four quarter arcs. Point 0 is type 1 (dark blue outline), then 2 red control points, a light blue curve endpoint, and three more of the same. If you zoom in you can just make out the final curve endpoint, point 12, hiding underneath the start point.

On the bottom is a monstrosity which I made by simply shifting the 13 points of the circle by one and reconnecting them. The resulting path has a bulge in its southeast quadrant. If you ever saw such a path you might be bewildered as to where this bulge came from.

Using draw_points you can see what's going on. Point 0 is now a control point with a red outline. It is followed by only one normal control point and then some normal quadrant arcs. The final point 12, however, is now a dark blue point instead of a light blue curve endpoint. Once you get used to this system you can immediately understand what happened and why there's a bulge in the southwest quadrant.

Incidentally, bizarre manufactured paths like this are bound to cause trouble. You can connect it and see it, and my draw_points2 node would have happily drawn in for me if I had let it, but if you then tried to resample it or stack it or work with it in any way, a baffling error message would appear. SO, in order to make this screenshot, I had to draw the bulging path separately using a special subnetwork, fix_path, to edit it so that it could be stacked without exploding. If you're curious how I did that, look inside.

This concludes today's arcane updates to arcane updates.

Hello John,
I was dwindling around this problem on and off. Thank you once again.

Do you think is it possible to connect the Bézier control points (red ones) to on curve points (blue ones) like handles? I'll add examples below.

↑ until then I only come thus far ↓

Abdu,

What a great idea!

It never occurred to me to do this because the handles in drawing programs are interactive, while Nodebox is not. But even as static markers they can sometime convey the effect of control points more clearly.

One question: why did you ask for this? Do you have a particular reason for wanting to see those handles?

Anyway, yes, it certainly is possible. When I saw your note my first reaction was to make a new handles node to draw the points this way. But then I liked it so much, I decided to incorporate it into the draw_points node as a style option. And then I added more options to give even more control over the appearance.

So, attached is the new improved node. I removed the Include Path option because I think you will always want to include the path. I changed the way the markers are sized, replaced Discern Blues with a Style menu, and added several new parameters:

• Point size is now relative to the size of the path. The default value of 100 is guess at optimal size based on the path's width and height; if the markers are too big or small, just adjust this value. Then, if you scale the path or change the font size, the markers will automatically resize with the path.
• Style is a menu with four options:
• Detailed discerns between the two types of end points and shows the starting point in yellow.
• Simple mimics the basic Nodebox display from the render pane.
• Handles draws handles in the style you suggested. Big circle markers are type 2 endpoints with handles connecting the previous and next control points. Type 1 endpoints and type 2 endpoints with only one adjacent control point are both drawn as boxes but unlike your example the color of the box will vary depending on which type they are. I add a large yellow arrow for the starting point.
• Hide points hides all the markers in case you want to see the underlying path without obstruction.
• Point numbers add point numbers inside the markers in both Detailed and Simple styles; point numbers are not displayed in the Handles style
• Mute colors uses a more subtle color scheme than the classic blue and red scheme; works with all three styles.
• Stroke color allows you to change the stroke color of the marker dots in the Detailed style; the other two styles are not affected by this setting.

The attached sample shows a capital S in two styles: Details Bright and Handles Muted. For the screenshot I found a font similar to one you used in your example (LavaDevangari); for the NDBX file I changed this to Verdana so it will work on all systems. Just out of curiosity, what font did you use in your examples?

I may have gotten a little carried away with the color options. The muted colors were based on the colors in your example, but bumped up to be a little easier to see against various possible backgrounds and path colorings. If you or anyone would like to change either the bright or muted palettes, they are exposed just inside the subnetwork right at the top and would be very easy to change.

These changes make draw_points even more delightful and useful. In fact I used it quite a bit when debugging the handles option (using draw_points on itself) and it was very helpful. This is becoming my new favorite node!

Thanks for your wonderful suggestion. Please give it a try and let me know what you think.

P.S. Just saw your second note. I like your color choices. I didn't try to draw point numbers above the markers in handles mode because for many paths with crowded points, the handles just added too much noise leaving little room for the numbers. I thought that if you needed the numbers you could switch to Detailed mode, but I could try adding them to Handles mode anyway if you think it would be worthwhile.

Oops! The forum software dropped the attachments to my last comment. Here they are: the screenshot and the demo file.

Note: in the demo you can easily change the example path to any other font or text, or change the path to two other examples: a simple open curve or a bunch of balloons. The balloons are especially fun.

Oh là làà!

John,
You are one of my favorite person on this beautiful dot made out of dirt and you don't even know how long! ¦)

Thank you, thank you and I'll thank you once more when I find the chance out of excitement to actually open the file and tweak things around.

To answer your question about the usage of this node, I do graphic design by trade and I do type design, for umm, for, let's say, recreational purposes and I'm trying to learn to make my own tools to design statis and kinesis, new letterforms, kinetic type specimens etc. for the sake of learning this beautiful lil' blue box that you and this community kept it alive this long.

I'll check it out and share what I did so far when I can.

♡

Ps. The references that I shared were from the Glyhps app's letter drawing interface.

OK, one more update. Maybe this will finally do it.

I decided that the handles style should allow numbers after all. You can always turn it off if the display is too dense, and with some careful work it turns out you probably won't have to. The numbers size along with the point size, so you can just make them both smaller and zoom in a bit to handle most situations.

Demo and screenshot attached. I show question marks in Detailed Muted and Handles Bright, both with point numbering enabled.

Oh yeah, I was trying to connect the same gut nodes right there.

In attached you'll see some examples from stylistically tweaked version of your beautiful "draw points" node. First one is colored version of lowercase "a", second one is: "?" MUTED aaalll the way and the third one is an .mp4 file, an experiment on maybe animating variable fonts by morphing their point nodes from A to B. I didn't use mr. F's or your morph code. Just playing with good ol' make table and convert range trick. Somehow couldn't find my way around it last night while I was trying to do the same thing with your "draw points" node. Too much complexity for me, I suppose. Gonna continue to reverse-engineer it though. That's how I'll learn.

Anyway sir, THIS, WAS, FUN.

Thank you so much.

Ps. Yes, yes, after having this much fun, of course my next project is going to be drawing a typeface using just only nodes, bézier handles and maybe point numbers. If one day I manage to near it, I'll share an .ttf or .otf here ¦) Umm, maybe a var.ttf, who knows. ¦) 'tlll then.

Abdu,

Your animation is fun; thanks for sharing it.

Your goal of drawing a type face using only nodes is certainly possible, but quite ambitious. I just added a new node that might make it a little easer, adjust_point:

https://forum.nodebox.net/t/5372995512/adjust-point-node

Give it a spin and tell me what you think!

John