ernstnext's Avatar


11 Nov, 2019 07:20 PM

There’s something about grids in Nodebox that I’m not quite understanding. I have set up a Nodebox file where I am plotting 150x150 squares onto a grid. I have set up my grid with 10 columns and 10 rows, with the width and height set to 1500 each. I thought this would be the correct width and height to use to accommodate 10 squares of 150x150, but the squares have big spaces in between them. I changed the width and height of the grid to 1350 each, and now my squares look like they sit flush next to each other.

It’s strange though, because when I change my columns and rows to 5 each, I have to change the width and height to 1200 each, where I thought that the width and height should’ve been 750 (150x5) each. How does one go about calculating the correct width and height for the squares to sit flush next to each other in this scenario?

  1. Support Staff 1 Posted by john on 11 Nov, 2019 11:28 PM

    john's Avatar

    Hello Ernstnext,

    This is a problem we've all struggled with.

    Everything in Nodebox is positioned from the center. So when you use a grid node to create 100 (10 x 10) rectangle positions, each of those points is in the center of its rectangle. The width of a grid is the distance from the leftmost centerpoint to the rightmost centerpoint - not the distance between the left and right edges.

    The difference is half a rectangle width on the left and another half a rectangle width on the right. So you have to subtract 1 from the number of columns and 1 from the number of rows. Here is the formula:

     gridWidth = rectWidth * (cols - 1)
     gridHeight = rectHeight * (rows - 1)

    In your initial case, both gridWidth and gridHeight = 150 * 9 = 1350.

    If you have only 5 columns and 5 rows, grid width and height is 150 * 4 = 600. I don't understand why you said it has to be 1200, unless you also changed the width and height of your rectangles (to 300 x 300).

    If you want to avoid the math, you can use my grid_plus node instead of the standard grid node. Grid_plus is one of 57 nodes available for free here:

    Just download the library, open it, and copy-paste the grid_plus node into your project.

    Grid_plus lets you enter the desired cell width and cell height - in your case 150 x 150. Then change your rows and columns as you wish and grid_plus will do the math for you. It allows you to limit the total number of points (for cases where you need partial rows) and lets you order the points from right to left or bottom to top. I've found it very useful over the years.

    Please let me know if that answered your question. And please keep asking questions - it helps all of us learn.


  2. 2 Posted by ernstnext on 12 Nov, 2019 06:05 AM

    ernstnext's Avatar

    John, thank you so much for your wonderful, in-depth answer to my question! And thank you for the additional node library, I didn't know this existed (I'm fairly new to using Nodebox), and can't wait to get stuck into the additional nodes!

Reply to this discussion

Internal reply

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

Attaching KB article:


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


? 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

04 Dec, 2023 10:18 PM
04 Dec, 2023 10:14 PM
04 Dec, 2023 11:38 AM
29 Nov, 2023 05:30 AM
28 Nov, 2023 12:38 AM


27 Nov, 2023 04:40 AM
26 Nov, 2023 10:02 AM
22 Nov, 2023 09:33 AM
20 Nov, 2023 08:54 PM
17 Nov, 2023 01:43 AM
15 Nov, 2023 06:58 AM