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 Raphaelvar Raphael; Raphael = ; // Create a 400x400 canvas with a 10x10 rectangle in the top left;
// Raphael with Michaelangelovar Michaelangelo Raphael rectangle; Michaelangelo = ;Raphael = ; rectangle = Michaelangelo; ;
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 Michaelangelovar Michaelangelo Raphael rectangle; Michaelangelo = ;Raphael = ; // Creates a 20x20 rectanglerectangle = x: 0 y: 0 width: 10 height: 10 scale: 2 stroke: '#000' ; ;
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 = ; ;
While this is a simple example, it's not entirely intuitive.
var Michaelangelo Raphael path; Michaelangelo = ;Raphael = ; path = x1: 0 y1: 0 x2: 10 y2: 10; ;
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 = ;Raphael = ; // Essentially draws a circle centered at (200, 200) with// a radius of 25circle = cx: 200 cy: 200 height: 50 width: 50; // Similar to above, but this will be an ellipseellipse = 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 = 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
Contributing
Installing
git clone git@github.com:austburn/michaelangelo.git
cd michaelangelo
npm install
Run Tests and Lint
npm test
Feel free to fork and submit pull requests!