CANVAS & CANVAS
PAINTING WITH THE HELP OF JAVASCRIPT

HENRY POYDAR...
- Mechanical Engineer
(Fluid Dynamics)
- Sometimes drummer /
electronic music
producer
- Photography dabbler
- Software developer
- Generalist

Favorite Periodical:
MAKE Magazine

THIS IS ABOUT ...
+

THIS IS ABOUT ...
- HTML Canvas <canvas>...</canvas>
- Javascript
- Processing /
Processing.js
- jQuery, Sammy
- CouchDB
- (Ruby, Python)

BACKGROUND...

?

I LIKE
- Abstraction
- Scale
- Contrast/color
- Simple forms
- Elegance

REPEATED VARIANCE

TOOL OBJECTIVES...
- Provide a way to create and store
pattern templates of form and color
- Pattern templates should produce
somewhat unique renderings
- Provide a way to generate and store
renderings
- Provide basic tools to help translate
from screen to canvas
- Access it all in a browser

THE FIRST PASS
- SVG generator
- First Rails, then Merb app
- REXML to build and parse SVG
- AR models to represent templates
- Routine to generate would be in model
- A database row would represent a
rendering
- Used inheritance + rand() to vary the
template output
- svg2png to persist selected renderings

I NEED A NEW TOOL
- REXML slowwww
- My code was slowwww
- New tools available:
- Nokogiri
- Sinatra
- So I started to spec ...

ALONG COMES ...
- Processing.js
- A port of Processing to Javascript,
renders Processing to the HTML5
canvas element
- Ported by John Resig while he was
juggling plates and balancing a ball
on his nose

PROCESSING
- Open source programming language
for programming images, animation
and interaction
- Java based
- Developed at the MIT Media Lab
- Widely used in generative art

size(200, 200);
background(100);
smooth();
noStroke();
int diameter = 150;
int[] angs = {30, 10, 45, 35, 60, 38, 75,
67};
float lastAng = 0;
for (int i = 0; i < angs.length; i++){
fill(angs[i] * 3.0);
arc(width/2, height/2, diameter,
diameter, lastAng, lastAng
+radians(angs[i]));
lastAng += radians(angs[i]);
}

SVG
Processing.js

COUCH DB & COUHAPPS
- CouchDB is key/value based
persistent storage
- CouchDB is essentially a
web server - a “RESTful
data store”
- CouchApp is a Python app
for deploying a Javascript-
based application to
CouchDB

Active Record
CouchDB

SAMMY!
- Javascript framework built
on jQuery
- Feels like Sinatra
- Works well with RESTful
data stores like CouchDB

Ruby + Sinatra
Javascript + Sammy

+
= PROCESSING.JS STUDIO

USING THE APP

UNDER THE HOOD

TOOL OBJECTIVES...
L Provide a way to create and store
pattern templates of form and color
L Pattern templates should produce
somewhat unique renderings
L Provide a way to generate and store
renderings
L Provide basic tools to help translate
from screen to canvas
L Access it all in a browser

AND AT NO CHARGE...
- One stop application server + storage
service
- Offline / online working possibilities
through replication
- Templates de-coupled from renderings
- Both are simply documents
- Animation / interaction

NEXT STEPS
- Refactor to better contain logic
(application.js, controller.js)
- Timing, progress kinks
- Miscellaneous interface enhancements
- Fork for IDE use?
- Actually paint something
- Hook it up to a hand-fabricated
plotting machine

HENRY POYDAR
henry@poydar.com
www.hpoydar.com
hpoydar
IRC, Twitter, GitHub