Show HN: G9.js – Automatically Interactive Differentiable Graphics

Welcome to the g9 gallery! Drag all the graphics!

I've tried to organize stuff from basic to advanced, so you can scroll from the top to get an intuitive feel for g9. It's worth mentioning, of course, that intuitive feeling is no match for reading the docs.

Before you dive in, here's a brief explanation of how g9 works (scroll down to skip):

g9.js exposes a single function, g9(initialData, render[, onChange]). This represents the following flow:

1. You create some initial data as key-value pairs with numeric values. For example:

   var initialData = {
       foo: 10
   }

   initialData in the docs
2. This data and a drawing context are fed into a function that uses the data to decide what to draw.

   function render(data, ctx){
       ctx.point(data.foo, 17)
   }

   render in the docs
3. 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. If you tried to drag the circle to the left, g9 might come up with the new data {foo: 8 }.
4. g9 rerenders the entire scene with the new data, so that everything is consistent. If you've provided one, g9 calls your onChange callback with the new data, so you can update other parts of your page.

For a complete treatment of the g9 API, head to the Docs.

A minimal example with only two points. Our render function always draws one point at (x, y), and the other point at (y, x), so when you drag one of the points, the other kind of mirrors it. Try adding a minus sign before the first argument of the first point. What happens?

Lets add a few more points and use a bit or trigonometry to arrange them into two circles. Just for fun, we make the inner points red. Try dragging the points!

All of the default shapes in g9 accept an affects option, which tells them what parts of the data they can change. Here are three lines with different values of affects.

Here's an interactive version of the quadratic bézier curve animation on the bézier curve wikipedia page.

Try uncommenting the animation block for extra fun!