Draw NDBX

john's Avatar

john

25 Dec, 2022 01:48 PM

NOTE: Version 2 now available for download - see below.

Draw NDBX is a Nodebox network that can draw other Nodebox networks. It can even draw itself (see screenshot)!

To use it, simply point to any .ndbx file in the net_table node at the top.

WARNING - it can take a MINUTE or more to generate a net table for a large NodeBox network. So render the net_table node, get a cup of coffee, and then, when the data table displays, EXPORT it as a CSV. Then reset the import_csv3 node to point at this new CSV file and make sure the imported CSV is connected to the null2 node below it. Once this is done the stats and draw_net nodes will run (reasonably) fast.

Render (double-click) the draw_net node to see the root level of your network. The draw_net node has several settings:

  • Check "Include frame" to include a background and parent marker for each network. If you don't check this, only the actual network will be drawn and subsequent settings will be ignored.
  • Bg color allows you to define a colored background for your network.
  • Check "Classic grid" to ignore Bg color and instead draw a dark gray grid just like the actual Nodebox app does.
  • Check "Mark subnets" to draw red ovals around any subnetwork nodes in your drawing; this makes those nodes easier to spot

You will notice the drawn network looks slightly different than the original. Icons are not drawn inside each node. The connection lines are drawn as dotted lines if they are feeding data one item at a time (range = value), and as solid lines if they are feeding data all at once (range = list). This vital distinction, hidden in the Nodebox app, can now be seen at a glance. The port nubs at the top of each node are drawn rounded for value ports and rectangular for list ports; this allows you to see the setting even if a line is not currently connected to it.

If you have one or more subnetworks, those can also be drawn. Just advance to the next frame using the frame control in the lower left corner. Each time you advance the frame, another subnetwork will be drawn. Be patient: draw_net can sometimes take 10 or 20 seconds to draw complex networks or subnetworks.

If you wish, you can save ALL the drawings at once by exporting a movie or exporting a range of individual SVGs, PNGs, or PDFs. The stats table displays the total number of subnetworks or distinct subnetworks. You will probably want to check the "Drop duplicates" checkbox in the subnets node to avoid drawing multiple copies of the same subnetwork (which can happen, for example, if you use the same node from the Cartan Node Library in multiple places). Check the stats node to see how many distinct subnetworks you have, then export the movie from frame 0 (the root) to this number of subnetworks. It may take quite a while to render a movie for a large network with many subnetworks, but once this is done you can step through each frame of the movie instantly.

You can also display stats for your network by rendering the draw_table node below the stats node. This will show you the following stats:

  • File name
  • Canvas width and height
  • Code Libraries (normally 0 unless your network requires one or more linked code libraries)
  • Total number of nodes (including nodes inside subnetworks)
  • Total number of connections
  • Depth (the number of sub levels). A simple network with no subnetworks will have a depth of 0. A subnetwork with a sub-subnetwork inside it will give your network a total depth of 2.
  • Changed ports. This is the number of ports across all nodes with a value set to something other than the default value. If you hook standard nodes together without ever changing a single parameter, you will have 0 changed ports. The higher this number, the more specific changes you made to the behavior of your original nodes.
  • The number of different node types used in your network
  • The total number of subnetworks (including sub-subnetworks, etc.)
  • The total number of distinct subnetworks (once duplicate subnetworks have been removed)

Please give this contraption a try on your networks and report back on how well it worked and what other features you would like to see.

I highly encourage advanced users to change the draw_net subnetwork and experiment with different ways of representing Nodebox networks. A network drawing is simply a data visualization, in this case the data is the structure of the network as listed in the net table. There are an infinite number of possible ways to represent this data depending on what you want to emphasize.

For example, you could simplify the drawing by reducing each node to a single dot and producing a standard network graph. It is possible (though difficult) to alter the layout to make subnetworks big enough to display its innards on the parent level. In theory you could draw root level nodes as big dots, subnetwork nodes as smaller dots, sub-subnetwork nodes as even tinier dots, etc.

You could also visualize the full depth of a network by drawing a tree with a row of root nodes at the top, a row of subnetwork nodes below that, etc. Or you could simply draw a bar chart showing the number of nodes at each level. You could use my treemap node to create a treemap showing the variety of node types used and the relative occurrence of each type.

OR you could use different aspects of the net table to create generative art. Here the goal would be not to understand the details of a network but instead to use it as a kind of random number generator to create complex and interesting patterns. The sky is the limit here.

If you do create some new visualizations or art pieces using this tool, please consider sharing them with us.

Go forth and create!

John

  1. Support Staff 1 Posted by john on 28 Dec, 2022 11:19 PM

    john's Avatar

    Draw NDBX v2

    Version 2 improvements:

    • Dashboard layout with network, stats, and treemap
    • Draw_net node adds a scale option
    • Adjustable title now appears at top of display
    • Treemap shows node type usage arranged by category
    • Only subnetwork diagram shows in subsequent frame, each sized to fit
    • Layout node adapts to current canvas size and allows margin adjustments

    With v2 you can now make a nice looking poster dashboard display. The four elements - title, network diagram, stat panel, and treemap - are all size adjustable. Network diagrams vary widely; some are tall and skinny, others fat and wide, some tiny, some huge. As a result you may want to adjust element scaling, margins, and canvas size to get the most pleasing presentation for each network.

    Please give it a try and let me know what other improvements you'd like to see!

    John

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Draw_NDBX_Screenshot.png 492 KB
  • Draw_NDBX.zip 113 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

31 Jan, 2023 11:29 PM
28 Jan, 2023 10:39 AM
26 Jan, 2023 01:30 AM
26 Jan, 2023 01:24 AM
26 Jan, 2023 12:48 AM

 

20 Jan, 2023 02:32 PM
13 Jan, 2023 09:54 PM
11 Jan, 2023 10:32 AM
09 Jan, 2023 11:45 AM
28 Dec, 2022 11:19 PM
27 Dec, 2022 06:57 AM