Slides from the presentation given to the NYC javascript community meeting on October 15th, 2009

1. CANVAS & CANVAS
PAINTING WITH THE HELP OF JAVASCRIPT

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

3. Favorite Periodical:
MAKE Magazine

4. THIS IS ABOUT ...
+

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

6. BACKGROUND...

10. ?

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

12. REPEATED VARIANCE

14. 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

15. 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

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

19. 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

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

21. 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]);
}

22. SVG
Processing.js

23. 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

24. Active Record
CouchDB

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

26. Ruby + Sinatra
Javascript + Sammy

27. +
= PROCESSING.JS STUDIO

28. USING THE APP

29. UNDER THE HOOD

30. 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

31. 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

32. 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

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