canvas & canvas - presentation to nyc.js

33
CANVAS & CANVAS PAINTING WITH THE HELP OF JAVASCRIPT

Upload: henry-poydar

Post on 15-May-2015

1.559 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Canvas & Canvas - Presentation to NYC.js

CANVAS & CANVASPAINTING WITH THE HELP OF JAVASCRIPT

Page 2: Canvas & Canvas - Presentation to NYC.js

HENRY POYDAR...

- Mechanical Engineer (Fluid Dynamics)

- Sometimes drummer / electronic music producer

- Photography dabbler

- Software developer

- Generalist

Page 3: Canvas & Canvas - Presentation to NYC.js

Favorite Periodical: MAKE Magazine

Page 4: Canvas & Canvas - Presentation to NYC.js

THIS IS ABOUT ...

+

Page 5: Canvas & Canvas - Presentation to NYC.js

THIS IS ABOUT ...

<canvas>...</canvas>- HTML Canvas

- Javascript

- Processing / Processing.js

- jQuery, Sammy

- CouchDB

- (Ruby, Python)

Page 6: Canvas & Canvas - Presentation to NYC.js

BACKGROUND...

Page 7: Canvas & Canvas - Presentation to NYC.js
Page 8: Canvas & Canvas - Presentation to NYC.js
Page 9: Canvas & Canvas - Presentation to NYC.js
Page 10: Canvas & Canvas - Presentation to NYC.js

?

Page 11: Canvas & Canvas - Presentation to NYC.js

I LIKE

- Abstraction

- Scale

- Contrast/color

- Simple forms

- Elegance

Page 12: Canvas & Canvas - Presentation to NYC.js

REPEATED VARIANCE

Page 13: Canvas & Canvas - Presentation to NYC.js
Page 14: Canvas & Canvas - Presentation to NYC.js

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

Page 15: Canvas & Canvas - Presentation to NYC.js

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

Page 16: Canvas & Canvas - Presentation to NYC.js
Page 17: Canvas & Canvas - Presentation to NYC.js
Page 18: Canvas & Canvas - Presentation to NYC.js

I NEED A NEW TOOL

- REXML slowwww

- My code was slowwww

- New tools available:

- Nokogiri

- Sinatra

- So I started to spec ...

Page 19: Canvas & Canvas - Presentation to NYC.js

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

Page 20: Canvas & Canvas - Presentation to NYC.js

PROCESSING

- Open source programming language for programming images, animation and interaction

- Java based

- Developed at the MIT Media Lab

- Widely used in generative art

Page 21: Canvas & Canvas - Presentation to NYC.js

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

Page 22: Canvas & Canvas - Presentation to NYC.js

SVG Processing.js

Page 23: Canvas & Canvas - Presentation to NYC.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

Page 24: Canvas & Canvas - Presentation to NYC.js

Active RecordCouchDB

Page 25: Canvas & Canvas - Presentation to NYC.js

SAMMY!

- Javascript framework built on jQuery

- Feels like Sinatra

- Works well with RESTful data stores like CouchDB

Page 26: Canvas & Canvas - Presentation to NYC.js

Ruby + SinatraJavascript + Sammy

Page 27: Canvas & Canvas - Presentation to NYC.js

+

= PROCESSING.JS STUDIO

Page 28: Canvas & Canvas - Presentation to NYC.js

USING THE APP

Page 29: Canvas & Canvas - Presentation to NYC.js

UNDER THE HOOD

Page 30: Canvas & Canvas - Presentation to NYC.js

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

Page 31: Canvas & Canvas - Presentation to NYC.js

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

Page 32: Canvas & Canvas - Presentation to NYC.js

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