Graph.js

Basic Usage

Graph.js is a tool for creating editable graphs on the HTML canvas element. Vertices and edges are created by clicking on the canvas. Initializing a graph is simple:

Graph.js supports JSON serialization, meaning that the vertex and edge information of a graph can be saved and loaded.

Graphs may also be saved and loaded from Local Storage.

Graph.js supports graphs that are editable: that is, vertices can be added and moved, as in the example below (try clicking and dragging a vertex).

Making a graph editable is also very easy:

Configuration Options

Graph.js is designed to be customizeable. The setOption command provides several configurable settings, including vertexDrawFunction, edgeDrawFunction, and physics. The following code snippet gives a usage example:

The vertex and edge draw functions shown above give the following result:

As well, the underlying graph structure can be manipulated programmatically by accessing and modifying the graph member object of the Graph.js Graph class. This writeup won't go into detail about this process.

Server-side storage

The JSON serialization lends itself naturally to server-side storage of graphs. This allows a graph to be constructed using a graph creation application such as the one I created here, and then displayed later in a different format (for example, as a static illustration, such as the ones on this page.

The following code snippet illustrates how a script might fetch a graph, indexed by an id, from a server.

Canvas Logos

The logos on this site are done in javascript using the HTML canvas element.

I've linked large versions of the canvas logos that are used in the top left of the site on one page here.

Original post date June 2010

C++ Surface Subdivision

This is an old graphics project I did back in 2009. It does a lot of things, but none of them well, and it's not really clear what the point of it is. It's done in C++ using OpenGL, with GLSL shaders.

This will do some of the following:
  • A quaternion camera and movement system
  • A GLSL Phong shader, as well as some other vertex and fragment shaders.
  • A half-baked graphics framework for managing scenes, and loading resources
  • A half-edge data structure implementation for graphics objects
  • An implementation of Kobbelt's sqrt(3) surface subdivision algorithm for smoothing triangular meshes
  • Probably some other stuff, which I have forgotten.


C++ Graphics