Difference between revisions of "Processing.js/Presentation"

From CDOT Wiki
Jump to: navigation, search
(→‎Managing Process)
 
(20 intermediate revisions by 4 users not shown)
Line 9: Line 9:
 
***An open source Java-based visual media programming language
 
***An open source Java-based visual media programming language
 
***Developed by Ben Fry and Casey Reas at MIT as an educational tool
 
***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
 
***Has since gone on to be used in industry and spread over the Internet
 
***http://www.openprocessing.org/
 
***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
 
***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
 
***P5 comes with its own development environment which can export "sketches" as a Java applet
 
***Applets can be embedded in websites asd usual
 
***Applets can be embedded in websites asd usual
 
***A short demonstration of the PDE
 
***A short demonstration of the PDE
−
*PJS - what are we trying to accomplish
+
***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==
 
==PImage==
Line 25: Line 65:
 
*how seneca open source courses helped me realize the power of community
 
*how seneca open source courses helped me realize the power of community
  
−
==3D Stuff==
+
==3D==
  
 
*'''Andor'''
 
*'''Andor'''
−
* Roadmap
+
* Intro
−
* Challenges (Performance, Browser-compatibility, Working Specification)
+
** [http://www.c3dl.org/ C3DL]
−
* Demos (Sol,?)
+
* 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==
 
==Bespin==
  
−
*'''Anna'''
+
*What is Bespin
−
*show off bespin examples
+
*Why use Bespin
 +
 
 +
-http://sketch.processing.org/
 +
 
 +
*The Future
  
 
==Managing Process==
 
==Managing Process==
−
*'''Anna'''
+
*GitHub http://github.com/annasob/processing-js
 +
*Previous method
 +
*Problem
 +
 
 +
*Revisions
  
−
* Git Hub
+
- lighthouse
 +
- https://processing-js.lighthouseapp.com/projects/41284/tickets/566-code-colortohsb-colorint
  
−
* work-flow decisions
+
- work-flow
  
−
* decision making process
+
*Testing
−
* managing an Open-Source project
+
- http://processing-js.buildingsky.net/user_session/new
  
 +
-http://weare.buildingsky.net/processing-js/test/ref/index.html
 
* difficulties
 
* difficulties
  
 
==Working with the Community==
 
==Working with the Community==
−
*Demos
+
*'''Community'''
 
**[http://processingjs.org/community PJS Community]
 
**[http://processingjs.org/community PJS Community]
−
**[http://luckybite.com/iprocessing/ iProcessing]
+
**[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]
 
**[http://hyper-metrix.com/processing-js/docs/?page=Multi-Touch%20Screen%20Input F1LT3R's multitouch demo]
−
**[http://www.youtube.com/watch?v=WSoALhMIJho F1LT3R's Video-Audio Stream to 3D Visualization]
+
*'''Projects spawned from PJS'''
−
**[http://code.bocoup.com/processing-js/video/bloom-01.html Bloom]
 
 
**[http://hascanvas.com/ Has Canvas]
 
**[http://hascanvas.com/ Has Canvas]
 
**[http://askken.heroku.com/ Ask Ken]
 
**[http://askken.heroku.com/ Ask Ken]
−
**[http://www.openprocessing.org/visuals/?visualID=9013 Comments Visualizer]
+
*'''Games spawned from PJS'''
−
**[http://processing-js.buildingsky.net/ Processing JS test suite]
 
 
**[http://ptdef.com/ Processing Tower Defense]
 
**[http://ptdef.com/ Processing Tower Defense]
 
**[http://www.youtube.com/watch?v=xHF-5tnIJL4 MatchThemColors]
 
**[http://www.youtube.com/watch?v=xHF-5tnIJL4 MatchThemColors]
 
**[http://weare.buildingsky.net/processing-js/choplifter.html Corban's Choplifter]
 
**[http://weare.buildingsky.net/processing-js/choplifter.html Corban's Choplifter]
−
* Usage around the web and world, askken, iPhone/iPad, teaching
+
*'''Future of PJS'''
−
* how big the community is: who uses processing, how many people in channel
+
**[http://luckybite.com/iprocessing/ iProcessing]
−
* irc/twitter talking to people from around the world watching the news spread
+
**Estimated 1.0 release:  mid - end Summer
−
* working with professionals
 
−
* working with people from all around the world
 

Latest revision as of 12: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
    • 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
  • Problem
  • 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

  • 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

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=Processing.js/Presentation&oldid=38903"