CANVAS & CANVAS
 PAINTING WITH THE HELP OF JAVASCRIPT
HENRY POYDAR...
-   Mechanical Engineer
    (Fluid Dynamics)
-   Sometimes drummer /
    electronic music
    producer
-  ...
Favorite Periodical:
 MAKE Magazine
THIS IS ABOUT ...


         +
THIS IS ABOUT ...
-   HTML Canvas      <canvas>...</canvas>
-   Javascript
-   Processing /
    Processing.js
-   jQuery, ...
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 sho...
THE FIRST PASS
-   SVG generator
-   First Rails, then Merb app
-   REXML to build and parse SVG
-   AR models to represen...
I NEED A NEW TOOL
-   REXML slowwww
-   My code was slowwww
-   New tools available:
    -   Nokogiri
    -   Sinatra
-   ...
ALONG COMES ...
-   Processing.js
    -   A port of Processing to Javascript,
        renders Processing to the HTML5
    ...
PROCESSING
-   Open source programming language
    for programming images, animation
    and interaction
-   Java based
-...
size(200, 200);
background(100);
smooth();
noStroke();

int diameter = 150;
int[] angs = {30, 10, 45, 35, 60, 38, 75,
67};...
SVG
Processing.js
COUCH DB & COUHAPPS
-   CouchDB is key/value based
    persistent storage
-   CouchDB is essentially a
    web server - a ...
Active Record
  CouchDB
SAMMY!

-   Javascript framework built
    on jQuery
-   Feels like Sinatra
-   Works well with RESTful
    data stores li...
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 sho...
AND AT NO CHARGE...
-   One stop application server + storage
    service
-   Offline / online working possibilities
    t...
NEXT STEPS
-   Refactor to better contain logic
    (application.js, controller.js)
-   Timing, progress kinks
-   Miscell...
HENRY POYDAR

henry@poydar.com
 www.hpoydar.com
    hpoydar
  IRC, Twitter, GitHub
Canvas & Canvas - Presentation to NYC.js
Canvas & Canvas - Presentation to NYC.js
Canvas & Canvas - Presentation to NYC.js
Canvas & Canvas - Presentation to NYC.js
Canvas & Canvas - Presentation to NYC.js
Canvas & Canvas - Presentation to NYC.js
Upcoming SlideShare
Loading in …5
×

Canvas & Canvas - Presentation to NYC.js

1,697 views
1,590 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,697
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Canvas & Canvas - Presentation to NYC.js

  1. 1. CANVAS & CANVAS PAINTING WITH THE HELP OF JAVASCRIPT
  2. 2. HENRY POYDAR... - Mechanical Engineer (Fluid Dynamics) - Sometimes drummer / electronic music producer - Photography dabbler - Software developer - Generalist
  3. 3. Favorite Periodical: MAKE Magazine
  4. 4. THIS IS ABOUT ... +
  5. 5. THIS IS ABOUT ... - HTML Canvas <canvas>...</canvas> - Javascript - Processing / Processing.js - jQuery, Sammy - CouchDB - (Ruby, Python)
  6. 6. BACKGROUND...
  7. 7. ?
  8. 8. I LIKE - Abstraction - Scale - Contrast/color - Simple forms - Elegance
  9. 9. REPEATED VARIANCE
  10. 10. 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
  11. 11. 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
  12. 12. I NEED A NEW TOOL - REXML slowwww - My code was slowwww - New tools available: - Nokogiri - Sinatra - So I started to spec ...
  13. 13. 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
  14. 14. PROCESSING - Open source programming language for programming images, animation and interaction - Java based - Developed at the MIT Media Lab - Widely used in generative art
  15. 15. 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]); }
  16. 16. SVG Processing.js
  17. 17. 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
  18. 18. Active Record CouchDB
  19. 19. SAMMY! - Javascript framework built on jQuery - Feels like Sinatra - Works well with RESTful data stores like CouchDB
  20. 20. Ruby + Sinatra Javascript + Sammy
  21. 21. + = PROCESSING.JS STUDIO
  22. 22. USING THE APP
  23. 23. UNDER THE HOOD
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. HENRY POYDAR henry@poydar.com www.hpoydar.com hpoydar IRC, Twitter, GitHub

×