<h3b>Welcome to the Game Development Using Processing.jsWorkshop!</h3b>
<b>==Intro (me)</b><br />==
<ul>
<li>Seneca college BSD student</li>
<b>==Goals
</b><br />& Schedule==<ul>
<li>Develop a simple 2D or 3D game using in Processing</li>
<li>9-11 Examples and exercises</li> <li>11-12 Work, experiment, collaborate</li></ul>
<b>==Processing (aka P5)</b> [http://www.Processing.org Processing.org]<br />==
<ul>
<li>[http://www.Processing.org Processing.org]</li>
<li>Open source data visualization language</li>
<li>Developed in Java</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>
<b>==Processing.js (aka PJS)</b> [http://www.ProcessingJS.org ProcessingJS.org]<br />==
<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>
<b>==Setting up Minefield</b>==
<ul>
<li>Minefield is much 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>
<b>==Setting up Processing.js</b><br />==
<ul>
<li>3 Files Required</li>
<b>Coordinate system</b><br />==Examples & Exercises== <ul>===Basics=== <li>size() sets canvas dimensions<, background, rect [http:/li> <li> top-left corner [0, 0]</li> <li> X increases right<zenit.senecac.on.ca/wiki/index.php/li> <li> Y increases downwards<FSOSS_2010/li> <processing.js/ul>example1 Example]
setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Example]
<b>Basics</b> 1 - sizedraw, noStroke, ellipse, backgroundfill, rect mousePressed [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 example3 Example]
2 - setup line, stroke, strokeWeight [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 example4 Example]
3 - draw, noStroke, ellipse, fill, mousePressed ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example3 example5 Example]
===Input=== 4 - linemousePressed, strokemouseReleased, strokeWeight println, debugging with P5 [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example4 example6 Example]
5 - ArrayList keyPressed, keyCode, keyReleased [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 example9 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]
===Text & Random=== X - keyPressed, keyCodetext, keyReleased random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example9 randomText Example]
[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomShapes Exercise]
<b>Animation Timing</b>
<b>TransfomationsVectors & Transformations</b> 7 - transforms, triangle, rect, (point)[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vectors Vectors]
8 - more transforms[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vector_ex Vector Exercise]
9 - 2D Vectors (dot, mult, etcParticle System [http://zenit.)senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/psys1 Example]
10 - class (?)<b>Exercise!</b> Modify the Particle System
11 - type demo (text, textWidth)[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms Transformations]
12 - PImage, timing, random[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms_ex Transform Exercise]
13 - Particle System [http://studio.sketchpad.cc/MAMxiAxlxH Example]
<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]
Error console
<b>===DOM Manipulation/Library Integration</b>===
DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example]
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 />
PJS IDEs==Challenges== [httpCreate an empty sketch and try to code a simple game:<br />Pong!<br /processingjs.org/learning/ide Processing.js IDE]> [http://hascanvaswww.concntr8.com/ HasCanvasConcentration]<br /> [http:Flying side-scroller<br //sketchpad.cc/ SketchPad]> [http://sketchen.processingwikipedia.org/ Sketch.Processing.orgwiki/Sokoban Sokoban]<br /> ==Gotchas== [http:<ul><li>Integer/Integer division println(5/matrix2) v.senecacs.onprintln(5/2.ca0)</~asalgali><li>NPOT (Non Power of Two) textures will not load in 3D</pjswebideli><li>color does not use <b>new</ My IDE]b></li></ul>
