Stack 2D

john's Avatar

john

10 Mar, 2025 12:30 AM

Stack2D is a dirt simple node I should have made YEARS ago. I think I will be using it constantly from now on.

In Nodebox you are frequently making things and coloring them and resampling them and futzing with them. Placing these things usually comes later, so at first they all pile on top of each other. And you just need to SEE them.

Nodebox provides the handy stack node to arrange things in a single row or column. But if you have a hundred things this doesn't work very well; you want to see them all at once without scrolling.

So what I usually do - multiple times a day, every day - is create a grid and a translate node. But if the number of things does not form a perfect rectangle, I need to count the things and then either slice the output of a grid node or copy/paste my grid_plus node. Then there is some math and futzing involved in choosing the right widths and heights. Not TOO hard, but doing it again and again makes me think there must be an easier way.

Hence stack2D. Just give it your list of things, choose how many columns you want, and poof - an instant grid. Stack2D takes the following parameters:

  • Shapes. Your list of things.
  • Columns. How many columns you want. Minimum is 1; it will not allow more columns than there are things.
  • Horizonal Margin. A margin between columns is provided automatically; this lets you adjust that up or down.
  • Vertical Margin. A margin between rows is provided automatically; this lets you adjust that up or down.
  • Position. The grid of points is centered by default; this lets you change that.

Those of you who know my library inside and out may object: "Isn't there already an arrange node that does this?"

Good question. Arrange does something similar but is a little more powerful and requires a little more thought to use. Stack2D arranges things in a rigid grid. Arrange arranges things in stacks that can move in all four directions. A south-pointing stack is like a column except that each stack is independent of the stacks in neighboring lanes. You have to define your lane size and your margin within each stack. You also have an option to align within each stack or not.

This is all very cool and is great for arranging things which vary widely in size as compactly as possible with a lot of flexibility. But it is based on the align node instead of the translate node, which makes the layout less rigid but also a little harder to scan. Translate will place text paths on their baselines while align will treat them as ordinary shapes and center each letter separately.

So stack2D is more rigid but also simpler and easier to use. You can just slap it in and go without having to think about it. Although it's intended mostly for just seeing your things more clearly as you work with them, it can also work just fine as a final polished layout.

The attached demo shows the 26 letters of the alphabet arranged in 7 columns. Quick and easy. Try changing the columns or adjusting the margins. I also include an adjust node so you can see the difference.

So, whenever you feel the need to stack but you have more than a few things, just copy/paste stack2D instead.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • stack2D_screenshot.png 413 KB
  • stack2D_demo.ndbx.zip 6.78 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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

Recent Discussions

24 Mar, 2025 09:21 PM
20 Mar, 2025 06:07 AM
20 Mar, 2025 02:39 AM
18 Mar, 2025 05:24 AM
14 Mar, 2025 08:32 AM

 

10 Mar, 2025 06:36 PM
10 Mar, 2025 06:36 PM
10 Mar, 2025 06:36 PM
10 Mar, 2025 12:30 AM
02 Mar, 2025 12:34 AM
01 Mar, 2025 12:27 AM