question re: Javascript mode clickable menus for interactive visualizations
in
Processing with Other Languages
•
11 months ago
Hi there - as a quick time-saver, I've already tried the ControlP5 library. But I'm finding it will not help as it doesn't seem that Processing 2.0 Javascript mode supports this library. Let me know if wrong.
SO - with that assumption in place, here's the question:
I'd like to set up a radio button menu in Javascript mode that helps the user select subsets of data for an interactive visualization. Where can I find the 'how to?' This is both a dynamic mouse click/position and an OOP task.
The particulars: I have a screen in Javascript mode that has a menu on the left, and a visualization of data on the right. The data visualization is intended to be interactive, ie driven by what is clicked/selected in the menu on the left. Imagine for example, that the visualization is a simple regression graph that replots the best-fit line each time you click (and therefore add or subtract) a data point from the left-hand menu.
I believe I have four kinds of operations to contend with here:
1) setting up a radio-button Menu that uses a "Menu" array of the data points that could be used in the visualization
2) setting up a mouse location / clicked operator that allows me to click on the Menu and therefore create a triggering event that either adds a data point to a "Visualization" array from the "Menu" array, or subtracts a data point.
3) setting up the Visualization array that inherits the data points from the Menu array for those Menu data points that are clicked
4) the visualization that runs off of the Visualization array.
#1 and #4 are completed.
#2 and #3 are turning into headaches for this noob.
I have a general sense of where to go for #3 to follow step-by-step on setting up non-interactive events that create an inheritance of data points between arrays, but I've been unsuccessful at finding a reading/chapter/example on creating the interactive trigger event in #2 that informs the inheritance based on the matching of mouse coordinates and clicks with radio-button menu coordinates.
Is there any reading or a link that someone can point me to that basically walks, step-by-step, through the construction of an inheritance of data points from a "Menu" array to a "Viz" array that is triggered by clicking on a radio-button menu? Would greatly appreciate some direction. I'd rather not set up a forest of if...else statements. OR, better yet, if there is a library out there that works in Javascript. Again, ControlP5 doesn't seem to work in Javascript mode. I need it for Javascript mode.
Any help?
Mike
1
