Download as PDF, PPTX
![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]);
}](https://image.slidesharecdn.com/canvasandcanvas-091016170604-phpapp02/85/Canvas-Canvas-Presentation-to-NYC-js-21-320.jpg)
![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]);
}](https://image.slidesharecdn.com/canvasandcanvas-091016170604-phpapp02/75/Canvas-Canvas-Presentation-to-NYC-js-21-2048.jpg)
Uploaded byHenry Poydar
Canvas & Canvas - Presentation to NYC.js
This document discusses using Processing.js to create art on HTML5 canvases programmatically with JavaScript. It describes how the author initially used Ruby and Rails to generate SVG images but found it too slow. Processing.js allows using the Processing language in JavaScript, opening opportunities to render directly to <canvas> and store templates and images in CouchDB for an interactive browser-based art studio. The author outlines objectives for the tool and next steps like refactoring code and adding more features.
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Canvas & Canvas - Presentation to NYC.js
- 1. CANVAS & CANVAS PAINTING WITH THE HELP OF JAVASCRIPT
- 2. HENRY POYDAR... - Mechanical Engineer (Fluid Dynamics) - Sometimes drummer / electronic music producer - Photography dabbler - Software developer - Generalist
- 3. Favorite Periodical: MAKEMagazine
- 4. THIS IS ABOUT... +
- 5. THIS IS ABOUT... - HTML Canvas <canvas>...</canvas> - Javascript - Processing / Processing.js - jQuery, Sammy - CouchDB - (Ruby, Python)
- 6.
- 10.
- 11. I LIKE - Abstraction - Scale - Contrast/color - Simple forms - Elegance
- 12.
- 14. 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
- 15. 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
- 18. I NEED ANEW TOOL - REXML slowwww - My code was slowwww - New tools available: - Nokogiri - Sinatra - So I started to spec ...
- 19. 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
- 20. PROCESSING - Open source programming language for programming images, animation and interaction - Java based - Developed at the MIT Media Lab - Widely used in generative art
- 21. 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]); }
- 22.
- 23. 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
- 24. Active Record CouchDB
- 25. SAMMY! - Javascript framework built on jQuery - Feels like Sinatra - Works well with RESTful data stores like CouchDB
- 26. Ruby + Sinatra Javascript+ Sammy
- 27. + = PROCESSING.JS STUDIO
- 28.
- 29.
- 30. 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
- 31. AND AT NOCHARGE... - One stop application server + storage service - Offline / online working possibilities through replication - Templates de-coupled from renderings - Both are simply documents - Animation / interaction
- 32. 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
- 33. HENRY POYDAR henry@poydar.com www.hpoydar.com hpoydar IRC, Twitter, GitHub