Generating different positions

Sorry if the subject has already been treated, I didn't see it on the forum

It's been a while that I haven't used Nodebox (try to get my knowledge back but not easy) : I would like to generate different positions of 5 elements (3 texts and 2 lines) within a determined frame (meaning that the lines or the texts should stay inside a specific zone that I would determine). Sending you photos of different compositions that I'm trying to reach automatically with Nodebox.

Working on it, but any help would be so welcomed :)

Thanks !

DRun,

What an interesting problem! Definitely doable and perfect for NodeBox.

Let me see if I understand what you want:

• For the two line segments would you specify the lengths and then see them rotated at random angles? Or would you prefer to specify the rotations ahead of time?
• Would the elements ever be allowed to overlap or would you want to guarantee that they would not?
• Is it acceptable to define your "specific zone" as a standard rectangular bound?
• Given an adequately large zone, there could be zillions of possible arrangements. Are there any other constraints you might want to apply?
• How would you like to organize the output? Maybe hook a frame node and see a different random arrangement in each frame so you could use the play button to step through them (or export them all to view as a movie)?

The intersect node in my node library can help avoid collisions. If you can answer the above questions I'd be happy to create a node (subnetwork) to do this.

John

P.S. This problem of aesthetically pleasing arrangements has long interested me. I am fascinated by zen rock gardens for example. The best ones look random but are exquisitely balanced in a way that is difficult to describe.

DRun,

I couldn't stand it anymore so I made a NodeBox network for you (attached).

Each time the candidate node fires it either produces a random arrangement of your five element within the designated bounding zone or, if there are any collisions, it returns nothing. With the bounding I provided collisions seem to happen about 75% of the time so I had to fire the node 192 times to generate 48 valid arrangements.

The elements are defined inside the candidate node. Drill into that to change the font of your words and the length of your two lines. The two lines are actually very thin rectangles (required in order to do the collision test).

The collision test is inefficient. I use the compound node to do an intersect on every possible pair. For 5 elements that's 5 choose 2 = 5! / ( 2 * (5 - 2)! ) = 10. But that number rises exponentially with the number of elements, so this method will start to bog down as you add more elements into the mix.

If you need more candidates, change the range at the top. Try 200 to 400, then 400 to 600, etc. (You could also just increase the total range, e.g. 0 to 1000, but NodeBox will start to bog down if you make the range too big.) You could also just attach a frame node to the candidate node's seed port, render the candidate node, and hit play to see a flash-feed movie of arrangements (warning - may induce seizures).

Please let me know if this solves your problem.

Thanks,

John

No response? Well, I find this solution useful, so thank you for creating this. Can the frame node animate the permutations?

Also, I'm interested in how you solved collision, perhaps an expanded tutorial on this subject. How may this apply to your library?

I think this is useful in generative designs, like the old MIT generative logo or the Cooper Union logo.

Thank you in advance

Hello!

I don't understand, I'm trying to respond since your first message John but my answers don't appear here!! I'm trying again, so here my previous responses:

Of your 1st message:

Hello john,

Many thanks for your answer! Your questions are perfect, I was not sure to be intelligible :)

• Yep, exactly: specify the lengths and then see them rotated at random angles. But for the texts, the better would be to specify small angles (in order to read them correctly, whatever the composition)
• Maybe yes if it's possible to guarantee that elements would no overlap?
• Yes exactly, an invisible rectangular bound :)
• Apart from the fact that texts should be read correctly (so, small angles of rotation), the lengths of the line segments should be always the same and the rectangular bound, I don't see others constraints (zillion is perfect :)
• Yep, I was thinking about a frame node and export a range of SVG frames.

PS reaction: oh yes definitely! It reminds me of the Japanese Tokonoma which is a space within the house in which items are displayed in a certain manner for artistic appreciation (a house function that we don't have here in Europe!). Nodebox is perfect to reproduce, sometimes, this unintentional concinnity of things :)

Of your 2nd message:

Thank you so much John, that's amazing and it was exactly what I was trying to do!

I will go deeply in your file to understand how it was done. It seems that you didn't received my previous mail with my answers?

Hope you will see this message this time!

Best

Hello!

I don't understand, I'm trying to respond since your first message John but my answers don't appear here!! So I created an account, I hope it work now.. So here my previous responses:

Of your 1st message:

Hello john,

Many thanks for your answer! Your questions are perfect, I was not sure to be intelligible :)

• Yep, exactly: specify the lengths and then see them rotated at random angles. But for the texts, the better would be to specify small angles (in order to read them correctly, whatever the composition)
• Maybe yes if it's possible to guarantee that elements would no overlap?
• Yes exactly, an invisible rectangular bound :)
• Apart from the fact that texts should be read correctly (so, small angles of rotation), the lengths of the line segments should be always the same and the rectangular bound, I don't see others constraints (zillion is perfect :)
• Yep, I was thinking about a frame node and export a range of SVG frames.

PS reaction: oh yes definitely! It reminds me of the Japanese Tokonoma which is a space within the house in which items are displayed in a certain manner for artistic appreciation (a house function that we don't have here in Europe!). Nodebox is perfect to reproduce, sometimes, this unintentional concinnity of things :)

Of your 2nd message:

Thank you so much John, that's amazing and it was exactly what I was trying to do!

I will go deeply in your file to understand how it was done. It seems that you didn't received my previous mail with my answers?

Hope you will see this message this time!

Best

Thanks, D. I'm glad someone finds it useful!

Yes, you can use the frame node to animate permutations. Just hook it to the Candidates node (instead of Range), render the Candidates node, and hit play.

The Candidates node only returns a pattern if there are no collisions - which varies depending on the seed provided. So you may have to advance through dozens of frames before you find a viable one. By hitting play you do this automatically, but each pattern flashes by pretty quickly.

(You could fix this by generating a bunch of candidates ahead of time and then filter out the nulls so that you could advance one viable pattern per frame.)

Detecting collisions among an arbitrary number of objects is a pain because you have to examine every possible pair. That's what I do here. I generate every possible pairing; with only five shapes there are 10 possible pairs [ n * (n-1) / 2 ].

To detect a collision I use the compound node to do an intersection and measure the resulting area (using the handy area node from my node library). If the objects do not overlap the area will be zero. I then sum these areas for all possible pairs. If that sum is zero there are no collisions.

This works but is not very efficient. Actually generating each intersection is wasteful. Professional collision detectors do things like ending loops on the first collision (hard to do in NodeBox since we have no loops) and reducing the number of pairs to test by doing a pre-analysis of objects based on rough locations (which gets complicated and is hard to generalize).

I agree that some kind of random placement and/or collision node(s) would be useful additions to my library. I hesitate to use the nodes I made for this demo, though, because they are so inefficient. I could make a faster one in Python but then you'd have to add code each time you used it.

It's also awkward that the place node returns null if there is a collision. It would be nice to guarantee a viable placement each time, but to do that you'd have to keep iterating until you found one, and if the bounding is tight this could require an unpredictably large number of iterations (if the bounding is too tight collisions cannot be avoided, but this is hard to predict ahead of time).

An alternative would be to always try 10 (or some other number) of candidates and return the one with the fewest collisions - but that would slow the node by a factor of 10 and not guarantee a collision-free placement.

I'll think about it some more. If you have any use cases or things you would want to see in such a node that would help.

Finally I completely agree that this technique is very useful in generative designs. That's why I thought this was such an interesting use case - and one worth solving.

Thanks again for commenting!

John

Hello!

I don't understand, I'm trying to respond since your first message John but my answers don't appear here!! I created an account but it didn't work too, so I'm using another e-mail address, I hope it will work. Here my previous responses:

Of your 1st message:

Hello john,

Many thanks for your answer! Your questions are perfect, I was not sure to be intelligible :)

• Yep, exactly: specify the lengths and then see them rotated at random angles. But for the texts, the better would be to specify small angles (in order to read them correctly, whatever the composition)
• Maybe yes if it's possible to guarantee that elements would no overlap?
• Yes exactly, an invisible rectangular bound :)
• Apart from the fact that texts should be read correctly (so, small angles of rotation), the lengths of the line segments should be always the same and the rectangular bound, I don't see others constraints (zillion is perfect :)
• Yep, I was thinking about a frame node and export a range of SVG frames.

PS reaction: oh yes definitely! It reminds me of the Japanese Tokonoma which is a space within the house in which items are displayed in a certain manner for artistic appreciation (a house function that we don't have here in Europe!). Nodebox is perfect to reproduce, sometimes, this unintentional concinnity of things :)

Of your 2nd message:

Thank you so much John, that's amazing and it was exactly what I was trying to do!

I will go deeply in your file to understand how it was done. It seems that you didn't received my previous mail with my answers?

--
I just see your new message! I really don't understand why nobody can't see my answers...Hope you will see these messages this time!

Best and thank you again!

One other comment...

DRun's example patterns all showed variations on the words "Design and Research" - in that order. But because my placement algorithm is totally random, many of my candidates read as "Research and Design" or "And Design Research" or "Research Design and".

I thought about filtering out candidates with words in the wrong order based on Y positions (top to bottom) - but it turns out this would have been misguided.

When you look at the random patterns sometimes the title reads correctly even though the words are not in the correct left-to-right top-to-bottom order. This is our human perceptual system at work. The order we perceive the words is not strictly tied to their X or Y locations - at least not in any obvious way. This perception seems to be not just a function of location, but also the words themselves. The word "and", for example, normally appears between two other words, so if it's not too far out of place our brains read it in the middle even if it's not.

Fascinating!

John

Hi DRun,

My apologies! We can see your comments now.

For some reason the system marked your earlier comments as spam. I have no idea why this happened. This has happened to other people in the past, but only rarely.

Thanks for your comments. Glad my solution was useful.

John

Ohh I was feeling so lonely ahah, now I understand :) Thank you for resolving this issue!

The level of your skills is so hiiigh, I barely understand the collision solving system! But the result is, as you said, fascinating in so many ways :

• Yeah even if words are not in the original order we are able, for some frame, to construct the same order, just by the power of our brain (and I think our affordances have something to do with it!)
• The anti-collision system is very useful, do you think we could use it other generative projects (e.g: if we want to create a visual where some colors are able to collide and some are not)
• In terms of graphic design, it questions me about how far a logo can evolved (or changed) without losing its "identity" and stay recognizable?

Best,