Processing.js/Presentation

Background

• Matthew
• What is Processing.js?
  • a JS port of the visual media programming language P5
  • PJS outputs the picture/animation/etc. to the new HTML5 canvas element
  • cadre of Seneca students, joined by others through the Internet, have been working to complete the port since Fall 2009
• Where did it come from?
  • Processing
    • An open source Java-based visual media programming language
    • Developed by Ben Fry and Casey Reas at MIT as an educational tool
    • Don't need to know Java, or be a programmer, do create sketches
    • Has since gone on to be used in industry and spread over the Internet
    • http://www.openprocessing.org/
    • http://www.openprocessing.org/visuals/?visualID=4207
    • Continues to spread: Fry employed by Google to bring P5 to the Android OS for mobile devices
    • P5 comes with its own development environment which can export "sketches" as a Java applet
    • Applets can be embedded in websites asd usual
    • A short demonstration of the PDE
    • http://www.openprocessing.org/visuals/?visualID=8640
  • Canvas
    • A new element in HTML5
    • Used to draw images/animations/etc. directly on a webpage
    • Comes with its own functions, which are accessed by JavaScript
    • Smiley face example
    • Canvas supported, to one degree or another, in most browsers. Coming to IE9?
    • People already using it
    • GitHub network chart for a more substantial example
      • Anna will talk more about GitHub
• Why Processing.js?
  • Makes Processing more accessible, both for developers/artists and their clients/audiences; no need for Java, no need to download and install the PDE; browsers are ubiquitous, when the online Pjs development environment is complete, it'll be possible to develop on the web for the web
    • Anna will talk about work toward the online development environment
  • enhances the usefulness, and encourages adoption, of open technologies like canvas
  • just as P5 makes it easier to create graphics in Java, so too does Pjs make it easier to make graphics in canvas
  • create new ways of creating content
    • Michael will show how Pjs, by leveraging the webs ability to mesh different technologies together, is helping to enhance or create new and wonderful content
  • Pjs can help provide feedback to assess and improve browser JavaScript and canvas implementations
  • Reduce the need for plugins and the pitfalls they entail
• History
  • John Resig, notable JS developer better known for the jQuery library
  • discovered P5 and was impressed, realized a JS library could interpret P5 code and output to canvas
  • created Pjs, ported just enougn to get a gaggle of P5 examples, but had no time to pursue it
  • heading up development passed to Al MacDonald (aka f1lt3r); also took an interested in Processing while looking for ways to enhance web pages
    • Michael will show you some of the cool things f1lt3r's done with Pjs
  • Pjs became one of Mozilla's projects they use to get students involved
  • Professor David Humphrey brought the project into the open source development course, DPS909, last semester
  • Work on Pjs continued into this semester with the followup course, DPS911.
  • Lost a few, gained a few people
  • Notable gain this year: Corban Brook. Professional web developer who's become one of our core devsand project managers
• Fruits of our labour
  • in eight months, we've brought the library to an almost-release-worthy state
  • still have issues with performance, and puzzling over how to port features in Java not easily replicated in JavaScript
  • in the next little while we'll be showing you some of the results of that work
  • Daniel will give you a taste of what's been done in the 2D realm; we've enhanced implementation started by Resig
  • Andor will show you Pjs gone 3D, something that was added right here at Seneca
  • Anna will show you the the nascent online Pjs development environment built upon Mozilla's Bespin project
  • As one of the project leaders, she'll also give an overview of how the project has been organized
  • Finally, Michael will show how Pjs is spreading across the web by sampling some of the ways its being used today

PImage

• Daniel
• talk about experience with PImage, having multiple opinions and ways of doing stuff
• getting to talk to originators of the processing language and meet and talk to people from mozilla and community
• demos/examples, color picker, thumbnail viewer, Andor's crayon sketch ?
• difficulties. performance issues
• how seneca open source courses helped me realize the power of community

3D

• Andor
• Intro
  • C3DL
• Problem
  • Processing requires 3D support
• Approach
  • Use WebGL, a working standard to draw 3D objects
• Problems
  • Lack of a roadmap
  • WebGL is still a working standard, many bugs still exist
  • WebGL isn't implemented in all browsers yet
  • Some discrepencies exist between browsers
  • Performance issues
• Discovery
  • Most 3D functionality working
• Results
  • Pjs Web IDE
  • Pjs:Chem

Bespin

• What is Bespin
• Why use Bespin

-http://sketch.processing.org/

• The Future

Managing Process

• GitHub http://github.com/annasob/processing-js
• Previous method
• Problem

• Revisions

- lighthouse - https://processing-js.lighthouseapp.com/projects/41284/tickets/566-code-colortohsb-colorint

- work-flow

• Testing

- http://processing-js.buildingsky.net/user_session/new

-http://weare.buildingsky.net/processing-js/test/ref/index.html

• difficulties

Working with the Community

• Community
  • PJS Community
  • Processing JS test suite
  • PJS on Twitter
• Art and Visualizations
  • Bloom
  • F1LT3R's Video-Audio Stream to 3D Visualization
  • F1LT3R's multitouch demo
• Projects spawned from PJS
  • Has Canvas
  • Ask Ken
• Games spawned from PJS
  • Processing Tower Defense
  • MatchThemColors
  • Corban's Choplifter
• Future of PJS
  • iProcessing
  • Estimated 1.0 release: mid - end Summer