Mouse Hover Interactions

[anshul1516]

Hi! I'm trying to solve the following on the nodebox live platform:

Creating curves when the mouse position is on one of the starting points of the curve. I'm trying to compare values of the mouse position to a list of points I get from a ZipMap.

For some reason I can't compare those 2 entities. Has anyone tried interactive visualizations with Nodebox live?

I can use a slider to change the index and size to get the curves I need but I want to make this user-facing which means I might need a way for the user to either hover over one of the colored circles or buttons that allows a left-right movement between the colored circles.

[lucasnijs]

Hello,

here is a possible solution. It calculates the distance from a point (your ellipses e.g.) to the mouse position. Then it compares that value to your desired distance to trigger whatever you want to trigger by using this boolean value(s) to cull the whole list of all the points or to use the switch node to choose between nothing or your curves. Hope this helps, good luck,

Lucas

On Jan 20, 2019, at 9:01 PM, Anshul Malhan notifications@github.com wrote:

Hi! I'm trying to solve the following on the nodebox live platform:

Creating curves when the mouse position is on one of the starting points of the curve. I'm trying to compare values of the mouse position to a list of points I get from a ZipMap.

For some reason I can't compare those 2 entities. Has anyone tried interactive visualizations with Nodebox live?

https://user-images.githubusercontent.com/29643100/51444336-1fcc9f80-1cab-11e9-9c4d-de637a17a36c.png — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/nodebox/live/issues/41, or mute the thread https://github.com/notifications/unsubscribe-auth/ABK8SPVtwg-BYkFtfO91wFhnQlOYEKWAks5vFMsfgaJpZM4aJ0jU.

[anshul1516]

Hi Lucas, thank you for the help on this!

So I've got the mouse hover/filter aspect to work!!

But now when I try to cull my list, I lose my (zipmap-lookup) method to make curves between 2 data points(which are basically entries in the same row in 2 columns.)

You can see the live implementation here: http://xpoint.mobi/activity/

Is there any way to maintain that curve relationship after I get a result from the cull? Similar to my first screenshot:

https://user-images.githubusercontent.com/29643100/51444336-1fcc9f80-1cab-11e9-9c4d-de637a17a36c.png

[lucasnijs]

Hello Ansul,

without your file it is kind of difficult to judge how you set this all up. I do not see any other function in your function list, it only contains the main function. That is why i mentioned that eventually you do a switch node that decides for every point if curves are shown. My guess however it would be conceptionally better to work with a subroutine (i.e. a new function you create from a network (group function button). This routine does the job for every list of points you send to it. If you send that subroutine the total lists of points it does what you had before basically. When you send it only 1 point (a list of one) it will do it only for that point. Basically your visualisation contains all the points and information that is there all the time. The subroutine takes care of the curves for every point and gets the right point(s) from the culled list of total points. This way you can even send several points,. For instance to be able to also visualise the second and third closest and … points and make those curves more transparant or whatever.

If you are not familiar with subroutines yet: look at the tutorial, the "space invaders" example for instance uses a subroutine. It does require some knowledge of the metadata (button next to network) to set this up correctly once you created a new function though since the input ports you create there (it will behave exact;y like standard nodes) need the exact input parameters (like point, float, string or whatever comes in) and whether it outputs and accepts lists for every parameter. I realise it is kind of hard to explain in an email, we did not have the time yet to explain in a video tutorial. If you study the space invader example you might be able to figure it out yourself. What is your username on Nodebox live? I might take a look at it if you want.

Best,

Lucas

On 22 Jan 2019, at 00:33, Anshul Malhan notifications@github.com wrote:

Hi Lucas, thank you for the help on this!

So I've got the mouse hover/filter aspect to work!!

But now when I try to cull my list, I lose my (zipmap-lookup) method to make curves between 2 data points(which are basically entries in the same row in 2 columns.)

You can see the live implementation here: http://xpoint.mobi/activity/ http://xpoint.mobi/activity/ https://user-images.githubusercontent.com/29643100/51503736-993ebd80-1d91-11e9-8dd5-cf94d0e557d2.png — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nodebox/live/issues/41#issuecomment-456224651, or mute the thread https://github.com/notifications/unsubscribe-auth/ABK8SH0pQpOROZPkR4FuR4RRXqSl9N1fks5vFk40gaJpZM4aJ0jU.

[anshul1516]

Hi Lucas, Thank you again for your response. My Nodebox live account is nblive_artcenter. Any suggestions/best practices on how I implemented this would be also super interesting to learn.

I will check out the Space Invaders example and try learning from it.

I know Nodebox is developed by people who are working on it in their spare time so I really appreciate the platform and the help you guys provide.

Thanks again!

[anshul1516]

Hi Lucas, I tried out the method of making a subroutine for the filtering and curve creation. I still get similar errors.

I tried out another really dumb idea of just filtering the "lookup" nodes that I used to make curves. Somehow, it worked. Not sure if this is best practice though. Any points of view on this?

[lucasnijs]

Hello Anshul,

any idea that works is good practice! Seems fine to me, didn’t have the time to look at your stuff yet,

Grtz,

Lucas

On 28 Jan 2019, at 02:57, Anshul Malhan notifications@github.com wrote:

Hi Lucas, I tried out the method of making a subroutine for the filtering and curve creation. I still get similar errors.

I tried out another really dumb idea of just filtering the "lookup" nodes that I used to make curves. Somehow, it worked. Not sure if this is best practice though. Any points of view on this?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nodebox/live/issues/41#issuecomment-457976992, or mute the thread https://github.com/notifications/unsubscribe-auth/ABK8SOBTkjI2LewF6G8-2XBtUmAuKws8ks5vHlkigaJpZM4aJ0jU.