canvas & canvas - presentation to nyc.js

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

henry@poydar.com

www.hpoydar.com

hpoydarIRC, Twitter, GitHub