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:

You create some initial data as key-value pairs with numeric values. For example:
```
var initialData = {
    foo: 10
}
```
initialData in the docs
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
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 }.
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?

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

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 = {
    l1_start_x: -100,
    l1_start_y: -50,
    l1_end_x: 100,
    l1_end_y: -50,

l2_start_x: -100,
    l2_start_y: 0,
    l2_end_x: 100,
    l2_end_y: 0,

l3_start_x: -100,
    l3_start_y: 50,
    l3_end_x: 100,
    l3_end_y: 50,
}

var render = function(data, ctx){
    ctx.line(data.l1_start_x, data.l1_start_y,
             data.l1_end_x,   data.l1_end_y,
             {'stroke-width': 10})

// if we provide an `affects` option, this
    // line will only change the parameters we name.
    ctx.line(data.l2_start_x, data.l2_start_y,
             data.l2_end_x,   data.l2_end_y, {
        affects: ['l2_start_x', 'l2_start_y'],
        stroke: 'red',
        'stroke-width': 10
    })

ctx.line(data.l3_start_x, data.l3_start_y,
             data.l3_end_x,   data.l3_end_y, {
        affects: ['l3_start_x', 'l3_end_y'],
        'stroke':'blue',
        'stroke-width': 10
    })
}

g9(initialData, render)
    .align('center', 'center')
    .insertInto('#demo-lines')

Bézier Curve

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

Run

var initialData = {
    endx: 189.99999999995265,
    endy: 76.99999999995309,
    middlex: 9.000000002109623,
    middley: -223.99999999996237,
    startx: -139.9999999999726,
    starty: 81.99999999698782,
    t: 0.5066666666666662,
}

function render(data, ctx){

var endx = data.endx,
        endy = data.endy,
        middlex = data.middlex,
        middley = data.middley,
        startx = data.startx,
        starty = data.starty,
        width = ctx.width,
        height = ctx.height,
        t = data.t;

var tlabel = 'tween='+t.toString().slice(0,4)
    ctx.text(tlabel, (t- .5)*300, height/2 - 30, {alignmentBaseline: "middle"})

var steps = 30
    var smooth = []

for (var i = 0; i < steps; i++) {
        var r = t*i/steps

function tween(a,b){
            return a + r*(b-a)
        }

var ax = tween(startx, middlex),
            ay = tween(starty, middley),
            bx = tween(middlex, endx),
            by = tween(middley, endy);

ctx.line(ax, ay, bx, by, {affects: ['t'], stroke:'rgba(0,0,0,.1)'})
        smooth.push([tween(ax,bx), tween(ay,by)])
    }

var p = smooth[0]
    for (var i = 1; i < smooth.length; i++) {
        ctx.line(p[0], p[1], smooth[i][0], smooth[i][1], {affects: ['t'], 'stroke-width': 5})
        p = smooth[i]
    }

ctx.line(startx,starty, middlex,middley)
    ctx.line(middlex,middley, endx,endy)

ctx.point(startx,starty)
    ctx.point(middlex,middley)
    ctx.point(endx,endy)

}

g9(initialData, render) 
    .align('center', 'center')
    .insertInto('#demo-bezier')

Three points define a circle

Run

var data = {
    x1: 100,
    y1: 100,
    x2: -100,
    y2: 100,
    x3: 0,
    y3: -50,
}

function invert(m){
    var [[a,b], [c,d]] = m
    var det = a*d - b*c
    return [[d/det, -b/det], [-c/det, a/det]]
}

function multiply(A, x){
    var [[a,b], [c,d]] = A
    var [x, y] = x
    return [a*x + b*y, c*x+d*y]
}

function render(data, ctx){
    
    var mx1 = (data.x1 + data.x2)/2
    var my1 = (data.y1 + data.y2)/2
    var dy1 = data.y1 - data.y2
    var dx1 = -(data.x1 - data.x2)

var mx2 = (data.x3 + data.x2)/2
    var my2 = (data.y3 + data.y2)/2
    var dy2 = data.y2 - data.y3
    var dx2 = -(data.x2 - data.x3)

var I = invert([[dy1, -dy2], 
                    [dx1, -dx2]])
    var [a,b] = multiply(I, [mx2-mx1, my2-my1])

ctx.line(
        data.x1,
        data.y1,
        data.x2,
        data.y2,
        {stroke: 'red'})

ctx.line(
        data.x3,
        data.y3,
        data.x2,
        data.y2,
        {stroke: 'blue'})

ctx.line(
        mx1,
        my1,
        mx1 + 2 * a * dy1,
        my1 + 2 * a * dx1,
        {stroke: 'red'})

ctx.line(
        mx2,
        my2,
        mx2 + 2 * b * dy2,
        my2 + 2 * b * dx2,
        {stroke: 'blue'})

var cx = mx1 + a*dy1
    var cy = my1 + a*dx1

var dx = cx - data.x1
    var dy = cy - data.y1

ctx.point(cx, cy)

ctx.circle(cx, cy, Math.sqrt(dx*dx + dy*dy), {
        fill: 'none',
        stroke: 'green',
        'stroke-width': 3
    })
    ctx.point(data.x1, data.y1)
    ctx.point(data.x2, data.y2)

ctx.point(data.x3, data.y3)
}

var demo = g9(data, render) 
  .align('center', 'center')
    .insertInto('#demo-point')

Run

'use strict';

var initial = {
    az: 0,
    ax: 0,
    ay: 0,
    ez: 1,
    ex: 100,
    ey: 100
};

var sin = Math.sin,
    cos = Math.cos;

function mul(m, v) {
    return m.map(function (row) {
        return row.reduce(function (a, b, i) {
            return a + b * v[i];
        }, 0);
    });
}

function rx(v, theta) {
    return mul([[1, 0, 0], [0, cos(theta), -sin(theta)], [0, sin(theta), cos(theta)]], v);
}

function ry(v, theta) {
    return mul([[cos(theta), 0, sin(theta)], [0, 1, 0], [-sin(theta), 0, cos(theta)]], v);
}

function rz(v, theta) {
    return mul([[cos(theta), -sin(theta), 0], [sin(theta), cos(theta), 0], [0, 0, 1]], v);
}

function rotate(v, ax, ay, az) {
    return rx(ry(rz(v, az), ay), ax);
}

function translate(p, dx, dy, dz) {
    return [p[0] + dx, p[1] + dy, p[2] + dz];
}

function project(p) {
    return [300 * p[0] / p[2], 300 * p[1] / p[2]];
}

console.log(project);

// mul([[1,0,0],[1,2,0],[0,0,1]], [1,2,3])

// function rotate(x,y,z, ){
//     return [Math.cos(a)*x - Math.sin(a)*y, Math.sin(a)*x + Math.cos(a)*y]
// }

var points = [];
for (var x = 0; x < 2; x++) {
    for (var y = 0; y < 2; y++) {
        for (var z = 0; z < 2; z++) {
            points.push([x - .5, y - .5, z - .5]);
        }
    }
}

console.log(points);

var edges = [];

for (var i = 0; i < points.length; i++) {
    var pi = points[i];
    for (var j = i + 1; j < points.length; j++) {
        var pj = points[j];
        if (pi.reduce(function (a, c, k) {
            return a + (c != pj[k]);
        }, 0) === 1) {
            edges.push([pi, pj]);
        }
    }
}

function render(data, ctx) {
    var ax = data.ax,
        ay = data.ay,
        az = data.az;

var drawedge = ctx.pure(function (ps) {
        var p1 = project(translate(rotate(ps[0], ax, ay, 0), 0, 0, 2));
        var p2 = project(translate(rotate(ps[1], ax, ay, 0), 0, 0, 2));
        ctx.line(p1[0], p1[1], p2[0], p2[1], {
            affects: ['ax', 'ay'],
            "stroke-width": 10,
            "stroke-linecap": "round"
        });
    });

edges.forEach(drawedge);
}

function log(x) {
    console.log(x);
}

var demo = g9(initial, render, log).align('center', 'center').insertInto('#demo-cube');

Run

var demo = g9({
    deltaAngle:33,
    attenuation:0.7,
    startLength:189
}, function({deltaAngle,attenuation,startLength}, ctx){
    
    var drawTree = ctx.pure(function (x1, y1, length, angle, n){
        var x2 = x1 + length * Math.cos(angle*Math.PI/180);
        var y2 = y1 + length * Math.sin(angle*Math.PI/180);
     
        ctx.point(x2, y2, {affects:['deltaAngle', 'attenuation'],
                          fill: 'green'})
        ctx.line(x1,y1,x2,y2, {'stroke-width': 5, 
                               stroke: n>3?'brown':'green',
                               affects:['deltaAngle', 'attenuation']})

if(n > 0) {
            drawTree(x2, y2, length*attenuation, angle+deltaAngle, n-1);
            drawTree(x2, y2, length*attenuation, angle-deltaAngle, n-1);
        }

})

ctx.point(0, ctx.height/2 - 30)

drawTree(0, ctx.height/2 - 30, startLength, -90, 8)

}, function(newdata, renderees){

console.log('changed data to', newdata)

}).align('center', 'center')
    .insertInto('#demo-tree')

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

Kevin Clock

Try dragging the hands!

Run

LOGO Turtle simulator

Run

Crank and Piston

Try uncommenting the animation block for extra fun!

Run

var initial = {
    "time": 72
}

function render(data, ctx){
    var crank = 40;
    var shaft = 120
    
    // housing
    var fill = 'hsl('+ (Math.cos(data.time) * 60 + 300) +', 100%, 90%)'
    ctx.rect(-40, 0, 80, -235, { fill: fill, stroke: 'black' })
    ctx.circle(0, 0, { r: 70, fill: 'white', stroke: 'black' })
    
    
    var CrankAngle = Math.asin(crank * Math.cos(data.time) / shaft)
    var OppositeAngle = Math.PI - (CrankAngle + data.time);
    var Y = shaft * Math.cos(OppositeAngle) / Math.cos(data.time)
    
    // shaft
    ctx.line(Math.cos(data.time) * crank, Math.sin(data.time) * crank, 0, Y, {
        'stroke-width': 10,
        'stroke': 'gray',
        'stroke-linecap': 'round'
    })
    
    
    // crank
    ctx.line(0, 0, Math.cos(data.time) * crank, Math.sin(data.time) * crank, {
        'stroke-width': 40,
        'stroke': 'black',
        'stroke-linecap': 'round'
    })
    
    
    // piston
    ctx.line(0, Y, 0, Y - 70, {
        'stroke-width': 70,
        'stroke': 'gray',
    })   
}

var graphics = g9(initial, render)
    .insertInto('#demo-crank')

/*setInterval(function(){
    if(!graphics.isManipulating){
        var data = graphics.getData()
        data.time += 0.05
        graphics.setData(data)    
    }
}, 10)*/

How It Works

Basic

Rings

The affects option

Bézier Curve

Three points define a circle

cube

dragon

image

tongs

tree

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

Kevin Clock

LOGO Turtle simulator

Grid Warp

Crank and Piston