G9.js: Automatically Interactive Graphics
omrelli.ug
omrelli.ug
I wonder how is it achieved, and how well does it work when positions of points are not connected by reasonably smooth functions.
Or you could be lazy and just throw an off-the-shelf optimizer at it.
It is a very nice idea though.
It seems to be based on numeric.js, which is based on the classic Fortran UNCMIN [1] optimizer.
It feels to me like there's also quite a bit of temporal coherence that could be leveraged in order to accelerate the process.
There are many methods of modelling and solving inverse kinematics problems. The most flexible of these methods typically rely on iterative optimization to seek out an approximate solution, due to the difficulty of inverting the forward kinematics equation and the possibility of an empty solution space. The core idea behind several of these methods is to model the forward kinematics equation using a Taylor series expansion, which can be simpler to invert and solve than the original system.
"When someone interacts with the graphics, for example by trying to drag an element to a new position, g9 optimizes over the space of possible values for your data to find a set of values that comes closest to creating the change. "
That is some highly magical DOM jimmying. High science weirdness. The applications I can think of where you'd need to manipulate a chart to modify data are all pretty niche (except for fun, which is universal). When the use case does come around this is going to be a delight.
If you know you have two points, one at (0, 10) and (10, 0) and drag the latter to (20, 0), how does the system tell that the first needs to be mirrored by the same distance?
Again, this is magic, so very well done to the author. Great stuff
It's a bit confusing, because typically what's called 'data' here would be called "parameters" in mathematical optimization, or "weights" in statistics / machine learning. Also ML would call "data" what's fixed, so here the position of the dragged element.
One nitpick is, there are no markers/selection, so it's not very obvious that you can drag the objects, unless you stopped to read the description first.
I'm also bit puzzled on how readjusting the object's position works. Usually, you'd define a pointer handler and transform based on the input, but if I understand correctly, the engine tries its best guess to automate this for you?
It's a little choppier than javascript, but crazy to me that it works at all.
I'm trying to go through the same thought process - this is neat, how do i translate into more practical applications. It seems like such a powerful paradigm if one can figure out that mapping.
The interesting thing is that drag and drop interfaces are not typically purely directly mapping the drag operation to moving the object selected. There's a lot more going on -- there's hover and activation effects, limits, often animation.
This approach gets rid of the annoying leg work of mapping pointer movement to changes, but I'm not sure how to fit the rest of drag drop UI into it (I do see examples of limits in the doc).
I think it's going to have to be something in the back of my head for awhile, and when I see interesting dragdrop experiences I'll think about how it could be achieved with this approach.
P5 has an imperative/immediate mode style of graphics API so you have to code the result of your interactivity (moving a point, etc.) yourself. Something like three.js, which has a full scene graph for rendering and interactivity, might be a better choice if you want a lot of interactivity out of the box.
I'm kinda scratching my head at g9 as it seems to be a mish mash of scene graph that's implicitly generated and imperative rendering APIs. It's not exactly clear to me why you'd want this mix except for very specific scenarios the author created support for with their implicit scene graph generation for interactivity.
In my mind you either want something that's like three.js with a full scene graph style of rendering and interactivity, or a p5 style imperative API for both. This seems to be some in-between thing to scratch some itches.
A good example are modern math videos on youtube, like this one (not saying that they're using G9.js in particular): https://www.youtube.com/watch?v=spUNpyF58BY
It's 20 minutes of changing graphics. You could code all of that with P5, and it would be an excruciatingly long process. G9.js would get you there in a fraction of the time.
This clearly isn't trying to be Processing. Obviously it's not revolutionary in terms of being productive, but it's a super cool concept and seems unique to me! The dragon example is particularly telling. You can grab any node and it tries to fit the fractal to wherever you move it.
"the original domain of [P]rocessing was proce55ing.net, so people used to sometimes refer to processing as proce55ing or P5 or p5 for short. they still do sometimes. p5.js is a reference to that."
Regardless this would be an awesome tool for Math Visualization. The book "THE ELEMENTS OF EUCLID" [1] had a website with java applet but this is now dead since browser have dropped.
great start, best wishes with the project, looking forward to more amazing demos.