http://omrelli.ug/g9/gallery/

Spoon me on GitHub
 
g9.js
automatically interactive graphics
Get Started Examples Docs

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):

How It Works

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.

Basic

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?

Run
[var initialData = { ]

Rings

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!

Run
[var initialData = { ]

The affects option

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.

Run
[var initialData = { ]

Bezier Curve

Here's an interactive version of the quadratic bezier curve animation
on the bezier curve wikipedia page.

Run
[ var initialData = {]

Three points define a circle

Run
[ var data = {     x1]

cube

Run
['use strict';  var i]

dragon

Run
[ var data = {     "s]

image

Run
[var initial = {     ]

tongs

Run
[var initial = {     ]

tree

Run
[  var demo = g9({   ]

Using Max and Min to limit a point's range of motion.

Run
[ var initial = {    ]

Kevin Clock

Try dragging the hands!

Run
[var initial = {     ]

LOGO Turtle simulator

Run
[var initial = {     ]

Grid Warp

Run
[var initial = {     ]

Crank and Piston

Try uncommenting the animation block for extra fun!

Run
[var initial = {     ]