Open main menu

CDOT Wiki β

Changes

Processing.js/Presentation

5,191 bytes added, 13:51, 23 April 2010
Managing Process
==Processing Final PresentationBackground==*'''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==Background===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==*P5 - what is it'''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, why it was developed[http://matrix.senecac.on.ca/~dhhodgin/dps911/examples/seneca/pimage/pimageset.htm color picker], who developed it[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
*PJS - what are we trying to accomplish==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===PImage===17 Pjs:Chem]
*Daniel: talk about experience with PImage, having multiple opinions and ways of doing stuff==Bespin==
*demos/examplesWhat is Bespin*Why use Bespin
*difficulties===3D Stuff===-http://sketch.processing.org/
*Andor<br />** Roadmap<br />** Challenges (Performance, Browser-compatibility, Working Specification)<br />** Demos (Sol,?)<br />The Future
===Bespin=Managing Process==*GitHub http://github.com/annasob/processing-js*Previous method*Problem
*Anna: show of bespin examplesRevisions
===Managing Process===- lighthouse- https://processing-js.lighthouseapp.com/projects/41284/tickets/566-code-colortohsb-colorint
(Anna)- work-flow
* Git HubTesting * work-flow decisions * decision making process* managing an Openhttp://processing-Source projectjs.buildingsky.net/user_session/new
-http://weare.buildingsky.net/processing-js/test/ref/index.html
* difficulties
===Working with the Community===*'''Community'''**[http://processingjs.org/community PJS Community]**[http://processing-js.buildingsky.net/ Processing JS test suite]**[http://luckybitetwitter.com/#search?q=%23processingjs PJS on Twitter]*'''Art and Visualizations'''**[http://code.bocoup.com/iprocessingprocessing-js/video/ iProcessingbloom-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://jamiedubshascanvas.com/canvasplayer/?id=148 hello world GML Playback using PJSHas Canvas**[http://askken.heroku.com/ Ask Ken]*'''Games spawned from PJS'''**[http://wwwptdef.openprocessing.orgcom/visuals/?visualID=9013 Comments VisualizerProcessing Tower Defense**[http://processing-js.buildingskywww.net/ Processing JS test suite] [http://ptdefyoutube.com/ Processing Tower Defensewatch?v=xHF-5tnIJL4 MatchThemColors**[http://codeweare.bocoupbuildingsky.comnet/processing-js/video/bloom-01choplifter.html BloomCorban's Choplifter]*'''Future of PJS'''* Usage around the web and world, askken, iPhone/iPad, teaching* how big the community is[http: who uses processing, how many people in channel* irc/twitter talking to people from around the world watching the news spread/luckybite.com/iprocessing/ iProcessing]* working with professionals * working with people from all around the worldEstimated 1.0 release: mid - end Summer