Introduction - What is Processing? - What is <b>Welcome to the Game Development Using Processing.js? - Reference pageWorkshop!</b>

Environment Setup==Intro (me)== - Where to download<ul> - How to setup with HTML <li>Seneca college BSD student</li> <li>Research assistant in CDOT</li> <li>Related projects: [http://www.c3dl.org C3DL] and JS[http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream XB PointStream]</li> <li>[http://asalga.wordpress.com Wordpress], [http://twitter.com/asalga Twitter]</li></ul>

Draw loop==Processing (aka P5)==<ul> <li>[http://www.Processing.org Processing.org]</li> <li>Open source data visualization language</li> <li>Developed in Java</li> <li>"Sketches" written using Java syntax</li> <li>Requires a JVM plug- draw callbackin</li> - set<li>Uses the <object> tag</li> <li>[http://www.processing.org/reference/ Reference]</li> <li>[http://code.google.com/p/processing/issues/list Bug tracking]</li></get frameRateul>

Debugging tips===Setting up Processing===<ul> <li>Download it [http://www.processing.org/download/ here]</li> <li>Save the .DMG file to the Desktop</li> <li>Double- alert and printlnclick to extract file</li> <li>Drag the Processing icon to the desktop</li> <li>Double-click the icon to start</li></ul>

 ==Processing.js (aka PJS)== <ul> <li>[http://www.ProcessingJS.org ProcessingJS.org]</li> <li>Open source JavaScript port of Processing</li> <li>Started by John Resig</li> <li>Many contributions by Seneca</li> <li>[http://processing-js.lighthouseapp.com/ Bug Tracking]</li> <li>Does not require a plug-in</li> <li>Uses the <canvas> tag</li> <li>Lots of IDEs [http://processingjs.org/learning/ide Processing.js IDE], [http://hascanvas.com/ HasCanvas], [http://sketchpad.cc/ SketchPad], [http://sketch.processing.org/ Sketch.Processing.org], [http://matrix.senecac.on.ca/~asalga/pjswebide/ My IDE]</li></ul>  ==Setting up Minefield== <ul> <li>Why use it?</li> <li>Much faster than Firefox</li> <li>Has WebGL</li> <li>Download a working version of Minefield [http://zenit.senecac.on.ca/wiki/index.php/Level_Up:_An_OpenWeb_Game_Jam#Resources here]</li> <li>Instructions to enabled WebGL [http://www.c3dl.org/index.php/tutorials/tutorial-1-browsers/ here]</li> </ul>  ==Setting up Processing.js== <ul> <li>3 Files Required</li> <li>[http://processingjs.org/content/download/processing-js-0.9.7/processing-0.9.7.js Processing.js file]</li> <li>[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/setupSketchFile Sketch file]</li> <li>[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/setupHTMLFile HTML file]</li></ul>  ==Examples & Exercises== ===Basics=== size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example]  setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Example]  draw, noStroke, ellipse, fill, mousePressed [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example3 Example]  line, stroke, strokeWeight [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example4 Example]  ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example] ===Input=== mousePressed, mouseReleased, println, debugging with P5 [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example]  keyPressed, keyCode, keyReleased [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example9 Example]  ===Text & Random=== text, random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomText Example]  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomShapes Exercise] <b>Animation Timing</b> Timing [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/timing Example]  <b>Vectors & Transformations</b> [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vectors Vectors]  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vector_ex Vector Exercise]  Particle System [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/psys1 Example]  <b>Exercise!</b> Modify the Particle System  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms Transformations]  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms_ex Transform Exercise]  ===3D===  box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]  sphere, sphereDetail [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/sphere1 Example]  Vertex, Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example] ===Debugging===  println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/debugging1 Example]  Checking in P5  Error console ===DOM Manipulation/Library Integration===  DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example]  Integration with [http://jqueryui.com/demos/sortable/ jQueryUI] - [http://matrix.senecac.on.ca/~asalga/FSOSS2010/jQueryUI/jquery-test.html Example]  Audio [http://matrix.senecac.on.ca/~asalga/FSOSS2010/audio/ Example], [http://wiki.mozilla.org/Audio_Data_API#Working_Audio_Data_Demos Audio Data API Demos]  Physics using [http://box2d-js.sourceforge.net/ Box2DJS] - [http://processingjs.org/source/box2d/box2d.html Al MacDonald's Demo], [http://matrix.senecac.on.ca/~asalga/DPS909/release0.2/work/demos/ 0.1 PJS Crayon Physics]  More demos! [http://matrix.senecac.on.ca/~asalga/pjswebide/ My PJS Web IDE] ([http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=31 Visualizations], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=20 Spatial hierarchies], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=30 Image manipulation], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=33 Particle Systems!]) ==Sample Games==Here are some Processing.js games and prototypes to give you an idea what is possible<br />[http://pointmarker.com/webgl/test1b.html 3D Pong] by bmidgley<br />[http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns<br />[http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=32 Core] by Andor Salga<br />[http://bocoup.com/processing-js/docs/index.php?page=Game%20-%20Light%20Cycles Light Cycles] by Al MacDonald<br />[http://processingjs.org/learning/topic/conway Game of Life] by Al MacDonald<br />[http://code.bocoup.com/js-ninja/ JS Ninja] by Al MacDonald<br />[http://matrix.senecac.on.ca/~asalga/FSOSS2010/zelda/zelda-js.html Zelda] by Scott Downe<br /> ==Challenges==Create an empty sketch and try to code a simple game:<br />Pong!<br />[http://www.concntr8.com/ Concentration]<br />Flying side-scroller<br />[http://en.wikipedia.org/wiki/Sokoban Sokoban]<br /> ==Gotchas==<ul><li>Integer/Integer division println(5/2) v.s. println(5/2.0)</li><li>NPOT (Non Power of Two) textures will not load in 3D</li><li>color does not use <b>new</b></li></ul>