Canvas & Canvas - Presentation to NYC.js
Upcoming SlideShare
Loading in...5
×
 

Canvas & Canvas - Presentation to NYC.js

on

  • 2,329 views

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

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

Statistics

Views

Total Views
2,329
Views on SlideShare
2,322
Embed Views
7

Actions

Likes
4
Downloads
29
Comments
0

1 Embed 7

http://www.slideshare.net 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Canvas & Canvas - Presentation to NYC.js Canvas & Canvas - Presentation to NYC.js Presentation Transcript

  • CANVAS & CANVAS PAINTING 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 ... - HTML Canvas <canvas>...</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 Record CouchDB
  • SAMMY! - Javascript framework built on jQuery - Feels like Sinatra - Works well with RESTful data stores like CouchDB
  • 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 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
  • 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 hpoydar IRC, Twitter, GitHub