6 ms·
G9.js: Automatically Interactive Graphics
- MrLeap 3y agoFirst thought was cool, clean simple API. I like it better than d3 to do the equivalent. -- Then I read this: "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.
- nine_k 3y agoBecause it's not for charts. It's for interactive demos; have you tried playing with them on the rest of the page?
- MrLeap 3y agoYeah I did. They're fun.
- sainez 3y agoAs far applications go, there are a lot of STEM concepts that can be communicated effectively by allowing interactivity.
- MrLeap 3y agoThis is a good point.
- noduerme 3y agoI wouldn't call that high science. Average the velocity and vector of a drag event over the first few frames, keep averaging with more frames, and start moving everything to the predicted end-point with a nice ease-in-out, you're most of the way to "optimizing over the space of possible values".
- WhitneyLand 3y agoI don’t think so. It looks like it’s using gradient descent optimization which does not require quotation marks around it and requires college level stem math for most people at least to really understand.
- noduerme 3y agoYou're right, it turns out to be a gradient descent function adapted from numeric.js. Seems like a long way to go to interpolate mouse events into a range of values. Still suffers from gimbal lock in the cube demo. I guess since it doesn't allow you to manage the draw routine, you couldn't use quaternion to Euler conversion. I'm not sure I see the purpose of it. But what do I know, I don't have a stem degree.
- arihantparsoya 3y agoHow is this different than p5.js?
- nine_k 3y agoI'm not familiar with p5. Can you pick an arbitrary rendered point of a p5 picture, and manipulate it?
- qbasic_forever 3y agoYes, it has full interactivity support: https://p5js.org/learn/interactivity.html https://p5js.org/learn/interactivity.html 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.
- sph 3y agoHave you tried dragging one of points?
- qbasic_forever 3y agoYes, I understand what is happening here with interactivity. Like I said I don't follow why I want some implicit generation of an interactivity scene graph (i.e. what points are connected or move relative to other points) when I can just be explicit about the scene graph interactivity with other similar libraries.
- joeld42 3y agothis is pure magic. Amazing stuff.
- nine_k 3y agoThe fact that you can pick a node which is rendered as a fifth or a sixth level of a recursive tree, move it around, and the rest of the tree would react, looks highly magical to me. It works without a function that explicitly infers the initial parameters of the tree from an arbitrary leaf node position. I wonder how is it achieved, and how well does it work when positions of points are not connected by reasonably smooth functions.
- Chabsff 3y agoIf I had to guess: 1. Get partial derivatives of each parameter's influence on the moved object by sampling the function twice. 2. Perform a bog standard gradient descent. 3. go back to 1 until convergence is achieved. Or you could be lazy and just throw an off-the-shelf optimizer at it.
- HammadB 3y agohttps://github.com/bijection/g9/blob/master/src/minimize.js https://github.com/bijection/g9/blob/master/src/minimize.js
- deleted 3y ago[deleted]
- throwaway4good 3y agoRequires the relationship from the screen coordinates to the variables in the program to be differentiable. It is a very nice idea though.
- jaen 3y agoIt requires the final function to have a numerically reasonable finite difference gradient, which is somewhat different from what is commonly referred to as "differentiable" - eg. the insides of that function could still use non-differentiable/non-analytic functions. It seems to be based on numeric.js, which is based on the classic Fortran UNCMIN [1] optimizer. [1]: https://perception.lab.uiowa.edu/UNCMIN https://perception.lab.uiowa.edu/UNCMIN
- jsunderland323 3y agoThis is lovely
- devmor 3y agoThis feels like witchcraft. I'm incredibly impressed.
- aboodman 3y agoNot sure what I would use this for, but it's crazy clever.
- aboodman 3y agoI guess it could potentially be used for any drag and drop interface? It's such a different way to think of the problem, I'm going to have to try it for something just to wrap my head around it.
- jrmiii 3y agoWell, that was 8 hours ago - you get anywhere noodling over this? 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.
- aboodman 3y agoNo :). 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.
- sph 3y agoI would love an explanation on how it works because this feels like black magic to me. 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
- fouronnes3 3y agoDefine a function that measures the error between the position of the drawn element and the new position required by the drag action. Compute partial derivatives of this function with respect to the data variables. Minimize this function to find the new data values. Re-render everything with the new optimal data values. 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.
- pohl 3y agoAny sufficiently advanced mathematics is indistinguishable from magic, where "sufficently advanced" turns out to be a low bar.
- indigoabstract 3y agoLooks pretty cool! 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?
- jamessb 3y agoThere were some interesting comments when this was last discussed on HN (7 years ago): https://news.ycombinator.com/item?id=12572412 https://news.ycombinator.com/item?id=12572412
- injidup 3y agoIt seems to have things in common with 2D CAD constraint based sketching tools?
- deleted 3y ago[deleted]
- ronyfadel 3y agoThis is simply stunning!
- Kalabasa 3y agoReminds me of the game Euclidea, where you manipulate geometric relationships (exactly like the circle example)
- anagri 3y agovery impressive, the last demo of a working crank-shaft-engine shows you can use it to make complicated models as well. great start, best wishes with the project, looking forward to more amazing demos.
- c0brac0bra 3y agoThe animations don't seem to run on mobile
- srush 3y agoI got excited about this a couple years ago and ported it to Pyodide in to run in the browser with a pytorch like library: https://srush.github.io/g9py/ https://srush.github.io/g9py/ It's a little choppier than javascript, but crazy to me that it works at all.
- awirick 3y agoThis could be extremely helpful for conveying trig or other math concepts in an education setting. I know a lot of visual learners that struggle with mapping the math to the visual space. Sprinkling in interactivity is a great way to help cement understanding.
- skyde 3y agothis is crazy. I wish they explained better how they solve the constraint to find the new point position. 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. [1] https://www.c82.net/euclid/#books https://www.c82.net/euclid/#books