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