Shuffle layout of a Poster

Hey guys,

Is it possible to make a program that "shuffles" between different layout possibilities of text/images blocks on a poster? The text/images themselves would be fixed, only positions would change.

Has anyone done something like this so I could have a look on code and learn how to do it?

thanks!

Alexandre,

Yes, you can use NodeBox to shuffle among different layouts, up to a point, but it may drive you crazy.

NodeBox is missing two things that a real layout engine needs: images and text!

You may not have noticed yet, but NodeBox does not have a bitmap image node. It is vector-only. Another NodeBoxer created a custom image node, but to use it inside of NodeBox you have to output vector paths (lines or dots), which is not practical for rendering most images. So if you want to layout PNGs or JPGs inside (desktop) NodeBox, you're out of luck.

At first glance, NodeBox seems to have text. But in fact, it only has text paths. In order to render text you have to convert strings into vector paths. You don't have a lot of control over how the text converts (e.g. no way to specify leading), and once it turns into paths there is no way to recover the actual text.

If you output your NodeBox rendering as an SVG, that SVG will have nothing but vector paths - no text objects. And because each letter turns into an elaborate set of paths, even a small amount of text will turn into thousands of paths - which eventually slows NodeBox to a crawl. In practice it can only handle a few thousand words.

I gather that NodeBox Live does or will have actual text objects, and because it lives in an html page you should be able to mix PNGs or JPGs in with your display (though this may be tricky). Frederik can tell you more about that. People have asked for both images and text objects in desktop NodeBox; Frederik says he is thinking about it.

Nevertheless, some simple layout shuffling is possible in desktop NodeBox. I whipped up a quick example which reads in a text file and renders it in a 1, 2, or 3-column layout. Just change the "columns" value at the top of the network.

The zip file contains the code and a short sample text by Mark Twain. The basic approach is to read the text file and produce a single column of rendered text. I then overlay 1-3 properly sized rectangles and take an intersection of the text shapes under each rectangle. I am then free to position the rectangles anywhere I want to form various layouts.

There are several pesky problems. Because the text is not arranged in a fixed leading, slight variations arise between paragraphs (depending on whether the final line of the paragraph has descenders, what font you are using, etc.) This makes it tricky to divide the text column precisely. For this simple example I just adjusted the column heights by hand so that no words got cut in half. Unfortunately, you would have to adjust this height fudge factor with each new text or font change.

(I did once create a way of controlling leading in NodeBox text, but it's kind of a hack. I posted it so you can hunt for it in the forum.)

Another problem is that doing intersections on thousands of text shapes is slow. Even for this short (200 word) example, it takes about 10 seconds to calculate a new layout. I did a three column layout of a 1200 word story and it took well over a minute.

For one-off projects, NodeBox gives you a lot of control over the layout. I wouldn't advise trying to build a robust, precise general-purpose layout engine in NodeBox though. But please feel free to examine my example code. I think it will give you a feel for how to approach problems like this in NodeBox.

Please let me know if this helps.

Thanks!

John

Hi Jonh, thanks so much for the detailed infos and code! Saved me a ton of time into trial and error.

Your example looks cool, but as you mentioned it's very slow for a simple layout change. Also, without images it doesn't fit my use case.

You are right, I didn't know about the limitation of not being able to use images and proper text manipulation , That itself kills this project ! : /

I also investigated P5.js but it looks like it doesn't support vector files (SVG), and I really need that.

My last hope is Nodebox.live, which I did a quick test, but as far as I understand it's not finished, SVG importing for example is not working. Have you tested, how stable is it?

On Frederik's personal page I found that he worked on something similar to what I am trying to do, but I don't know if it's available yet nor if he will release as open source:
http://www.enigmeta.com/projects/logic-layout/

thanks!

Jonh, I just found out about this beautiful JS node editor:

http://idflood.github.io/ThreeNodes.js/index_optimized.html

Have you used it? Looks amazing! I'm investigating to see i it handles SVG.

Hi Alexandre,

I hadn't seen that one before. Looks interesting, but I've seen similar tools before and have ultimately found them lacking.

Most visual tools, like this one, try to display all the properties of each node in the main display, which results in differently sized and sometimes very large node boxes. They also allow connections any which way. This is flexible, but quickly results in a big tangled mess which is hard to read or modify. They basically just take text-based coding and do a simplistic one-to-one replacement of property to node, without trying to redesign the experience of coding from the ground up.

NodeBox, in contrast, has compact nodes, all the same size, and a continuous top to bottom flow with no loops. The result is a much cleaner overall structure. I have created NodeBox networks with thousands of nodes and links and have been able to put them aside and make sense of them months later. It definitely does have its limitations, and requires you to think in a different non-procedural way, but I have found it surprisingly powerful.

The tool you found is also still under development. It's export options appear to be limited or non-existent. Sometimes these tools continue to grow and flourish, sometimes the get off to a promising start and just sit there, half finished. Time will tell.

Nodebox 3 has also been mostly static for the last year or so while Frederik focuses most of his limited time on NodeBox Live; he says he will continue to enhance NodeBox 3 but if and when that happens he will find a long wish list waiting for him. This is the way of all open source projects.

If you do find this new tool useful and make something cool with it, let us know!

John

P.S. Did you find my previous example code useful? Are you going to try shuffling layouts in NodeBox?

Hey John, thanks so much for helping me again!

I had replied giving some feedback on your code, but it didn't reach the forum. Apologies for that!

Yep, your code is exactly what I was looking for! The problem is that not being able to import images and text is a totally deal breaker for me.

I asked Frederik for beta access to Nodebox.live which does import images. Text I am not sure, just sent an email asking him about it.

My goal is to make an online interactive SVG designer tool similar to the one I currently have, but with procedural powers:
https://gyazo.com/0a4ff1468b0505c9fb1216bfc37ccafe

Currently investigating if Nodebox Live can do it! I am not sure if I can build UI interactive stuff with it (rotate with mouse, change colors, etc).

Have you tried Nodebox.live? Think it's possible to build such a tool with it?

again, thanks for your help!

P.S.:About the tool I sent, it looks like the project had been abandoned, so I don't think makes sense to take the time to learn it. But the UI looks very cool! : )