Graphics libraries, otherwise known as Front End Vector Graphics Frameworks, offer an abstracted layer over JavaScript's and the browser's ability to manipulate graphics. In general, they present graphics concepts in a more intuitive fashion (as well as hiding the matrix algebra involved!). In class we will be looking at:

Paper.js by Jürg Lehni and Jonathan Puckey, quite possibly my two favorite designers, is beautifully documented and intuitive for those familiar with Illustrator.

three.js by Mr.doob (a pseudonym, of course) is a fascinating environment that supports 3D graphics rendering. It uses WebGL and the canvas to programmatically control 3d models, lighting, and the camera. These examples are a great place to start.

p5.js by Lauren McCarthy is only a year old but already a hit. It's a web interpretation of the Processing environment by Casey Reas, Ben Fry, and much contribution from Dan Schiffman. It also acts as an open source platform allowing developers to expand it with plugins — most interesting and modular.

two.js is much more compact and perhaps more approachable than the others thanks to its narrow focus on vectors and its multiple rendering options (SVG, Canvas).

There is no shortage of wonderful visual frameworks in JS. D3 by Mike Bostock for interactive infographics and Raphael.js another graphics library both enjoy wide use.


Explore the many JS libraries available. Choose one to work with. You can select from the ones demonstrated in class (Paper.js, two.js, or three.js) or pick something completely different.

Submit a single page web poster/billboard that uses a graphics frameworks (or any other kind of library you discover on your own and would prefer using). If you would prefer, instead of a complete page, you may focus on a specific part: a background or a logo for example. It might be fun to develop a subtly animated, interactive, or dynamic lettering project using nothing but primitive shapes.

Consider your work as a visual language: the rules that you impose on yourself and ask your reader to follow form the syntax of that communication. Visual communication can also be multidimensional and non-linear. You may speak multiple languages at the same time to your reader and still be understood. Try and develop multiple visual vocabularies that coexist on the screen (either side by side or overlaid).


Read up on the SVG format.