Overlapping points
Hi, I am developing a infographic for a university research where some words are connected with others words. I want a random arrangement of those words. To do that I use a scatter node to give a list of random points.
The problem is has some points much closer of others resulting in a overlapped words!
Any suggestion to control the distance betwen the random points?
In attachment have a image of I have trying to do.
And sorry for my bad english :)
-
rede.png
463 KB
rede.png
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
Support Staff 1 Posted by lucasnijs on 31 Mar, 2014 07:25 AM
Hi,is this infographic "live", or is it a static vue that you want to use in a presentation or poster? If it is static you can
1. try obtaining the right solution by changing the seed number in the scatter node. Depending on the number of points in the network this may take a while and there will always be overlapping points.
2. If the solution of 1 is close (only three to four close points): just export and move these points manually in InkScape, Illustrator...
3. If you do not like any of the above you will have to write a specific node that ensures that the random points are not that random anymore.
2 Posted by Guilherme Vieir... on 01 Apr, 2014 12:17 PM
Hi,
I have tried the solution 1 and 2, but the first are very manual, and for more complex number of words it's hard! The second, my problem is to move the point and the word together without select another close word.
I have tried more two solutions:
I get a little more controled results using a grid node, a wiggle node and a pickup node! The grid give me control of the minimum space between the words, the pickup and the wiggle give a more random sense of compostion.
I a made a SVG with the points and import the coordinates from that and control the position with Illustrator.
The first solution works well, but the final results have a look of a rectangle. The second, is more easy than edit the pdf after, but with more words its be more complex too!
I want to try your third sugestion in the future, it's not sounds complex but for now I can get a fine result using the SVG.
Thanks for the reply!
Support Staff 3 Posted by john on 23 Jul, 2020 07:32 PM
Hi Guilhermesv,
When I read your very nice comment on why you value NodeBox, I looked you up and found this ancient thread. This is a problem that I still run into from time to time.
My poisson node might be a solution to this problem. It works somewhat like scatter, but allows you to specify the minimum distance between random points, producing a more even, natural-looking random spread of points.
Here is my post about it:
http://support.nodebox.net/discussions/show-your-work/352-poisson-n...
If you are still there and still care, have a look and see if you could use poisson in situations like this.
Thanks for keeping NodeBox alive,
John
4 Posted by Guilherme Vieir... on 03 Aug, 2020 11:15 AM
Hello John,
This node would be perfect for that visualization!
I loved the spatial distribution of the points, as it has less proximity and no overlap seems to be a more natural distribution.
I did a little experiment with it:
https://www.instagram.com/p/CDZ7SBjgboB/
In addition to your node in this little animation I also used a library of easing functions found on GitHub:
https://gist.github.com/th0ma5w/9883420
Support Staff 5 Posted by john on 10 Aug, 2020 07:48 AM
Hi Guilhermesv,
Thanks for your reply and sorry mine is so late.
I really like your little experiment and commented on it in Instagram (as you know).
Thanks for the link to that library of easing functions. I've been meaning to make a node (or two) to handle easing for years now. I am still mulling over the best way to do it. Your link is helpful. I'll let you know if I come up with something.
John
6 Posted by Guilherme Vieir... on 10 Aug, 2020 04:13 PM
Hello John,
I really like the way we manipulate the node wave, I believe that a node for easing could work in a similar way.
In the test I did I connect it with a list of numbers generated by the node range and using a combination of nodes I animate the list.
I believe that the coolest way would be to implement an Offset similar to the node wave, so we could connect the node frame directly.
I attached it to you if you want to take a look, how it works now.
Support Staff 7 Posted by john on 10 Aug, 2020 09:42 PM
Hi Guilhermesv,
Thanks much for sharing your network. I figured that was how you were doing it; it's similar to what I would have done.
I think you are probably right that the most flexible, NodeBox-like approach is to make a node, as you have done, to convert a frame node into a range of modified time values that you can then use to drive movement, rotation, etc.
I have a "rearrange" node I was about to publish that moves a list of objects to a list of destinations. It was tempting to add easing as an optional parameter into that node. But after seeing your example I think it's better to keep these things separate.
There are a number of things I could do to make an easing node more standard and easier to use.
One issue is the number of easing options. You have 19. Other languages and frameworks offer even more; here is a particularly nice page with 30 of them:
https://easings.net
Beyond the decision to ease in, out, or both, and whether or not to bounce, many of these variations are rather subtle. I'm not sure we need 30, or even 19. (Another option would be to supply the easing curve as a separate parameter. This would allow infinite variations and complete control but would make the node a little harder to use.)
Another issue is whether it is best to implement this in Python or do it all in NodeBox so that people would not have to fuss with adding external code. The functions you found are all quite simple so each function could be implemented easily in NodeBox.
I would also make the port labels more explanatory than just T, B, C, and D. If we do want to provide 19 or more options, this could be done using a menu widget instead of making people recode the Settings Function in the Metadata dialog.
One other issue is whether to normalize the timing so that it always falls between 0 and 100 as a number of standard NodeBox nodes do. My rearrange node currently works that way.
These are the things I am mulling over. Your example has been very helpful in working my way through all the various pros and cons. Thanks again and feel free to add additional comments or suggestions.
John
Support Staff 8 Posted by john on 20 Aug, 2020 08:16 PM
UPDATE
I just published an easing node:
http://support.nodebox.net/discussions/show-your-work/388-easing-node
It's built entirely in NodeBox, so no external code required, and provides ten different methods. I've been meaning to do this for years, but this discussion finally spurred me into action.
Enjoy!
John