View source for FSOSS 2010/processing.js/

<h3>Game Development Using Processing.js</h3>

<b>Intro (me)</b><br />
<ul>
  <li>Seneca college BSD student</li>
  <li>Research assistant in CDOT</li>
  <li>Related projects: [http://www.c3dl.org C3DL] and [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>


<b>Goals</b><br />
<ul><li>Develop a simple 2D or 3D game using in Processing</li></ul>


<b>Processing (aka P5)</b> [http://www.Processing.org Processing.org]<br />
<ul>
 <li>Open source data visualization language</li>
 <li>Developed in Java</li>
 <li>"Sketches" written using Java syntax</li>
 <li>Requires a JVM plug-in</li>
 <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>
</ul>


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


<b>Processing.js (aka PJS)</b> [http://www.ProcessingJS.org ProcessingJS.org]<br />
 <ul>
  <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>
</ul>


<b>Setting up Minefield</b>
  <ul>
    <li>Minefield is much faster than Firefox</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>


<b>Setting up Processing.js</b><br />
 <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>


<b>Coordinate system</b><br />
<ul>
 <li>size() sets canvas dimensions</li>
 <li> top-left corner [0, 0]</li>
 <li> X increases right</li>
 <li> Y increases downwards</li>
 </ul>


<b>Basics</b>
 1 - size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example]

 2 - setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Example]

 3 - draw, noStroke, ellipse, fill, mousePressed [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example3 Example]

 4 - line, stroke, strokeWeight [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example4 Example]

 5 - ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example]

<b>Input</b>
 6 - mousePressed, mouseReleased, println, debugging with P5 [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example]

 X  - keyPressed, keyCode, keyReleased [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example9 Example]


<b>Text & Random</b>
 X - text, random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomText Example]

 X - [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>Transfomations</b>
 X - [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vectors Vectors]

 X - Particle System [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/psys1 Example]

 X - <b>Exercise!</b> Modify the Particle System

 7 - transforms, triangle, rect, (point)

 8 - more transforms

 9 - 2D Vectors (dot, mult, etc.)


<b>3D</b>

 X - box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]

 X - sphere, sphereDetail [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/sphere1 Example]

 X - Vertex, Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example]

<b>Debugging</b>

 println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/debugging1 Example]

 Checking in P5

 Error console

<b>DOM Manipulation/Library Integration</b>

 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!])

 Games
 [http://pointmarker.com/webgl/test1b.html 3D Pong] by bmidgley
 [http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns
 [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=32 Core] by Andor Salga
 [http://bocoup.com/processing-js/docs/index.php?page=Game%20-%20Light%20Cycles Light Cycles] by Al MacDonald
 [http://processingjs.org/learning/topic/conway Game of Life] by Al MacDonald
 [http://code.bocoup.com/js-ninja/ JS Ninja] by Al MacDonald
 [http://matrix.senecac.on.ca/~asalga/FSOSS2010/zelda/zelda-js.html Zelda] by Scott Downe

 PJS 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]