tag:support.nodebox.net,2012-11-01:/discussions/nodebox-2-3/3562-overlapping-pointsNodeBox: Discussion 2020-08-20T20:16:36Ztag:support.nodebox.net,2012-11-01:Comment/323114632014-03-28T17:17:13Z2014-03-28T17:17:15ZOverlapping points<div><p>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.</p>
<p>The problem is has some points much closer of others resulting
in a overlapped words!</p>
<p>Any suggestion to control the distance betwen the random
points?</p>
<p>In attachment have a image of I have trying to do.</p>
<p>And sorry for my bad english :)</p></div>Guilherme Vieiratag:support.nodebox.net,2012-11-01:Comment/323114632014-03-31T07:25:17Z2014-03-31T07:25:17ZOverlapping points<div><p>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<br>
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.<br>
2. If the solution of 1 is close (only three to four close points):
just export and move these points manually in InkScape,
Illustrator...<br>
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.</p></div>lucasnijstag:support.nodebox.net,2012-11-01:Comment/323114632014-04-01T12:17:55Z2014-04-01T12:17:55ZOverlapping points<div><p>Hi,</p>
<p>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.</p>
<p>I have tried more two solutions:</p>
<ol>
<li>
<p>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.</p>
</li>
<li>
<p>I a made a SVG with the points and import the coordinates from
that and control the position with Illustrator.</p>
</li>
</ol>
<p>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!</p>
<p>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.</p>
<p>Thanks for the reply!</p></div>Guilherme Vieiratag:support.nodebox.net,2012-11-01:Comment/323114632020-07-23T19:32:49Z2020-07-23T19:32:49ZOverlapping points<div><p>Hi Guilhermesv,</p>
<p>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.</p>
<p>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.</p>
<p>Here is my post about it:</p>
<p><a href="http://support.nodebox.net/discussions/show-your-work/352-poisson-node-perpetual-motion">http://support.nodebox.net/discussions/show-your-work/352-poisson-n...</a></p>
<p>If you are still there and still care, have a look and see if you could use poisson in situations like this.</p>
<p>Thanks for keeping NodeBox alive,</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/323114632020-08-03T11:15:44Z2020-08-03T11:15:44ZOverlapping points<div><p>Hello John,</p>
<p>This node would be perfect for that visualization!</p>
<p>I loved the spatial distribution of the points, as it has less proximity and no overlap seems to be a more natural distribution.</p>
<p>I did a little experiment with it:<br>
<a href="https://www.instagram.com/p/CDZ7SBjgboB/">https://www.instagram.com/p/CDZ7SBjgboB/</a></p>
<p>In addition to your node in this little animation I also used a library of easing functions found on GitHub:<br>
<a href="https://gist.github.com/th0ma5w/9883420">https://gist.github.com/th0ma5w/9883420</a></p></div>Guilherme Vieiratag:support.nodebox.net,2012-11-01:Comment/323114632020-08-10T07:48:23Z2020-08-10T07:48:23ZOverlapping points<div><p>Hi Guilhermesv,</p>
<p>Thanks for your reply and sorry mine is so late.</p>
<p>I really like your little experiment and commented on it in Instagram (as you know).</p>
<p>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.</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/323114632020-08-10T16:13:58Z2020-08-10T16:13:58ZOverlapping points<div><p>Hello John,</p>
<p>I really like the way we manipulate the node wave, I believe that a node for easing could work in a similar way.</p>
<p>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.</p>
<p>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.</p>
<p>I attached it to you if you want to take a look, how it works now.</p></div>Guilherme Vieiratag:support.nodebox.net,2012-11-01:Comment/323114632020-08-10T21:42:35Z2020-08-10T21:42:35ZOverlapping points<div><p>Hi Guilhermesv,</p>
<p>Thanks much for sharing your network. I figured that was how you were doing it; it's similar to what I would have done.</p>
<p>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.</p>
<p>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.</p>
<p>There are a number of things I could do to make an easing node more standard and easier to use.</p>
<p>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:</p>
<p><a href="https://easings.net">https://easings.net</a></p>
<p>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.)</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/323114632020-08-20T20:16:35Z2020-08-20T20:16:35ZOverlapping points<div><p>UPDATE</p>
<p>I just published an easing node:</p>
<p><a href="http://support.nodebox.net/discussions/show-your-work/388-easing-node">http://support.nodebox.net/discussions/show-your-work/388-easing-node</a></p>
<p>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.</p>
<p>Enjoy!</p>
<p>John</p></div>john