Archive for the 'svg' Category

PaperJS vs TwoJS

Thursday, August 14th, 2014

Inspired by a morning discussion with Tom White aka dribnet about javascript and 2D vector graphics, I came home tonight determined to find out how far could I get in ten minutes using PaperJS on the one hand, and TwoJS on the other hand, with the sole constraint that somewhere along the way I had to make use of SVG.

For those who don’t know, PaperJS is the web-based heir of Scriptographer, a Javascript plugin for Adobe Illustrator that lived up until CS5. As far as I know, PaperJS is far more powerful than it’s predecesor, and has been designed keeping in mind the interactive, object-oriented nature of the contemporary web browser.

Similarly, TwoJS is a relatively new web-based 2D drawing library inspired by the WebGL javascript library Threejs.

After ten minutes of PaperJS I produced a simple particle raster script that uses an image to draw a collection of SVG shapes over a grid, and I added some color manipulation and particle scattering functionality to produce images like the ones featured below, using pixel data from grayscale photographs of Brigitte Bardot and William Burroughs.

TwoJS took me in a completely different direction. All I did was write a script that pulled SVG code from the loaded page source, and created animations from it. Here are two examples: I<3VR and rolling W.

bardot-2

burroughs-2