Difference between revisions of "Processing.js/Presentation"
(→Working with the Community) |
(→Managing Process) |
||
(39 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
− | == | + | ==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, [http://matrix.senecac.on.ca/~dhhodgin/dps911/examples/seneca/pimage/pimageset.htm color picker], [http://matrix.senecac.on.ca/~dhhodgin/dps911/examples/seneca/pimage/thumbnail.htm thumbnail viewer], Andor's crayon sketch ? | ||
+ | *difficulties. performance issues | ||
+ | *how seneca open source courses helped me realize the power of community | ||
− | + | ==3D== | |
− | = | + | *'''Andor''' |
+ | * Intro | ||
+ | ** [http://www.c3dl.org/ C3DL] | ||
+ | * Problem | ||
+ | ** [http://Processing.org/ Processing] requires 3D support | ||
+ | * Approach | ||
+ | ** Use [http://www.khronos.org/webgl/ 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 | ||
+ | **[http://matrix.senecac.on.ca/~asalga/pjswebide/ Pjs Web IDE] | ||
+ | **[http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=17 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 | * difficulties | ||
− | + | ==Working with the Community== | |
− | + | *'''Community''' | |
− | + | **[http://processingjs.org/community PJS Community] | |
− | * | + | **[http://processing-js.buildingsky.net/ Processing JS test suite] |
− | * | + | **[http://twitter.com/#search?q=%23processingjs PJS on Twitter] |
− | * | + | *'''Art and Visualizations''' |
− | + | **[http://code.bocoup.com/processing-js/video/bloom-01.html Bloom] | |
− | * | + | **[http://www.youtube.com/watch?v=WSoALhMIJho F1LT3R's Video-Audio Stream to 3D Visualization] |
− | + | **[http://hyper-metrix.com/processing-js/docs/?page=Multi-Touch%20Screen%20Input F1LT3R's multitouch demo] | |
− | * | + | *'''Projects spawned from PJS''' |
+ | **[http://hascanvas.com/ Has Canvas] | ||
+ | **[http://askken.heroku.com/ Ask Ken] | ||
+ | *'''Games spawned from PJS''' | ||
+ | **[http://ptdef.com/ Processing Tower Defense] | ||
+ | **[http://www.youtube.com/watch?v=xHF-5tnIJL4 MatchThemColors] | ||
+ | **[http://weare.buildingsky.net/processing-js/choplifter.html Corban's Choplifter] | ||
+ | *'''Future of PJS''' | ||
+ | **[http://luckybite.com/iprocessing/ iProcessing] | ||
+ | **Estimated 1.0 release: mid - end Summer |
Latest revision as of 13:51, 23 April 2010
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
- Processing
- 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
- 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
- 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
- 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
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
- Art and Visualizations
- Projects spawned from PJS
- Games spawned from PJS
- Future of PJS
- iProcessing
- Estimated 1.0 release: mid - end Summer