canvas & canvas - presentation to nyc.js
DESCRIPTION
Slides from the presentation given to the NYC javascript community meeting on October 15th, 2009TRANSCRIPT
CANVAS & CANVASPAINTING 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 ...
<canvas>...</canvas>- HTML 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 RecordCouchDB
SAMMY!
- Javascript framework built on jQuery
- Feels like Sinatra
- Works well with RESTful data stores like CouchDB
Ruby + SinatraJavascript + Sammy
+
= PROCESSING.JS STUDIO
USING THE APP
UNDER THE HOOD
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
LL
LLL
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
www.hpoydar.com
hpoydarIRC, Twitter, GitHub