michaelangelo

A lightweight wrapper for RaphaelJS.

Michaelangelo

Michaelangelo enables you to easily build out cross-browser vector graphics via Raphael that was inspired by the Python module matplotlib.

Using

Currently, Michaelangelo provides abstractions some of the elements you can create in Raphael. The abstraction isn't much currently, but it provides namespacing and the ability to easily scale your graphics.

For the following code samples, I will demonstrate how you might fulfill the same task in Raphael vs. Michaelangelo.

// Vanilla Raphael 
var Raphael;
 
Raphael = require('raphael');
 
// Create a 400x400 canvas with a 10x10 rectangle in the top left 
Raphael(['canvas', 400, 400, {
  type: 'rect',
  x: 0,
  y: 0,
  width: 10,
  height: 10,
  stroke: '#000'
}]);

// Raphael with Michaelangelo 
var Michaelangelo, Raphael, rectangle;
 
Michaelangelo = require('michaelangelo');
Raphael = require('raphael');
 
rectangle = Michaelangelo.Rectangle({
  x: 0,
  y: 0,
  width: 10,
  height: 10,
  {
    stroke: '#000'
  }
});
 
Raphael('canvas'. 400, 400, rectangle.toRaphaelObject());

Ok... I know what you're thinking. More lines of code... Wat?

You're right, but what if we want to scale our rectangle?

// Raphael with Michaelangelo 
var Michaelangelo, Raphael, rectangle;
 
Michaelangelo = require('michaelangelo');
Raphael = require('raphael');
 
// Creates a 20x20 rectangle 
rectangle = new Michaelangelo.Rectangle({
  x: 0,
  y: 0,
  width: 10,
  height: 10,
  {
    scale: 2,
    stroke: '#000'
  }
});
 
Raphael('canvas'. 400, 400, rectangle.toRaphaelObject());

The problem I had is that I wanted to use real measurements, then scale as needed.

Raphael provides means to scale, but you must do so after placing it on the canvas. Prior to placing it on the canvas, I didn't want to have to deal with the mental load of keeping track of the scale or litter '... * 2' everywhere.

While these may be syntactic improvements at best, I think some of the real powers of Michaelangelo reside in path building.

var Raphael;
 
Raphael = require('raphael');
 
Raphael(['canvas', 400, 400, {
  type: 'path',
  path: 'M0,0L10,10Z';
}]);

While this is a simple example, it's not entirely intuitive.

var Michaelangelo, Raphael, path;
 
Michaelangelo = require('michaelangelo');
Raphael = require('raphael');
 
path = new Michaelangelo.Path({
  x1: 0,
  y1: 0,
  x2: 10,
  y2: 10
});
 
Raphael('canvas'. 400, 400, path.toRaphaelObject());

To me, this example is much more clear of what we're doing. We have a line with two points, Michaelangelo handles the rest.

Another handy service that Michaelangelo provides is building arcs.

var Michaelangelo, Raphael, circle, ellipse, arc;
 
Michaelangelo = require('michaelangelo');
Raphael = require('raphael');
 
// Essentially draws a circle centered at (200, 200) with 
// a radius of 25 
circle = new Michaelangelo.Arc({
  cx: 200,
  cy: 200,
  height: 50,
  width: 50
});
 
// Similar to above, but this will be an ellipse 
ellipse = new Michaelangelo.Arc({
  cx: 200,
  cy: 200,
  height: 100,
  width: 50
});
 
// Ok, now we're actually drawing an arc. This one will draw 
// the right half of the ellipse above. 
arc = new Michaelangelo.Arc({
  cx: 200,
  cy: 200,
  height: 100,
  width: 50,
  theta1: 90,
  theta2: 270
});

Future Development

Make Michaelangelo a module that can stand on it's own - currently still have to use Raphael in conjunction
Make scale an option that you configure once for the entire canvas
Expand the path helper functions
Make the canvas rotate easily