<b>GoalsWelcome to the Game Development Using Processing.js Workshop!</b> ==Intro (me)==<ul> <li>Seneca college BSD student<br /li> <li>Research assistant in CDOT<ul/li> <li>Related projects: [http://www.c3dl.org C3DL] and [http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream XB PointStream]</li> <li>Develop a simple 2D or 3D game using in Processing[http://asalga.wordpress.com Wordpress], [http://twitter.com/asalga Twitter]</li></ul>
<b>Processing (aka P5)</b> [www.Processing.org]<br />==Goals & 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>
==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-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>
===Setting up Processing===<bul>Processing.js (aka PJS) </bli> Download it [http://www.ProcessingJSprocessing.org/download/ here]<br /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> ==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>Bug Tracking: https[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]<b/li>Setting up Processing <li>Instructions to enabled WebGL [http://www.c3dl.org/index.jsphp/tutorials/tutorial-1-browsers/ here]</bli> <br /ul> ==Setting up Processing.js==
<ul>
<li>3 Files Required</li>
<li>Processing.js file [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 containerfile]</li>
</ul>
<b>Coordinate system<==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/b><br processing.js/>example3 Example]<ul> <li>size() sets canvas dimensions< line, stroke, strokeWeight [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/li>example4 Example] <li> top-left corner ArrayList [0http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example] ===Input=== mousePressed, 0mouseReleased, 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/li>example9 Example] ===Text & Random=== <li> X increases right<text, random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/li>randomText Example] [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomShapes Exercise] <lib> Y increases downwardsAnimation Timing</lib> <Timing [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/ul>timing Example]
<b>Vectors & Transformations</b> 1 - size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Examplevectors Vectors]
2 - setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Examplevector_ex Vector Exercise]
3 - draw, noStroke, ellipse, fill, mousePressed Particle System [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example3 psys1 Example]
4 - line, stroke, strokeWeight [http:<b>Exercise!<//zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example4 Example]b> Modify the Particle System
5 - ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Exampletransforms Transformations]
6 - mousePressed, mouseReleased, println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Exampletransforms_ex Transform Exercise]
7 - triangle, rect, point, (neighborhood)
8 - transformed neighborhood===3D===
8 - more transformsbox [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]
9 - 2D Vectors (dotsphere, mult, etcsphereDetail [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.)js/sphere1 Example]
10 - classVertex, Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example]
11 - type demo (text, textWidth)===Debugging===
12 - PImage, timing, randomprintln [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/debugging1 Example]
13 - Particle System (random)Checking in P5
? - keyPressed, keyCode, keyReleased [done] point? collision detectionError console
===DOM Manipulation/Library Integration===
----------------3D - boxDOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example]
Integration with [http://jqueryui.com/demos/sortable/ jQueryUI] - sphere, sphereDetail[http://matrix.senecac.on.ca/~asalga/FSOSS2010/jQueryUI/jquery-test.html Example]
- TextureAudio [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------------------DOM stuff - alert - update span----------------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]
JS libs - Box2DJS - Video - AudioMore 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!])
Links:==Sample Games==Here are some Processing.jsgames 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 />Home Page[http: ProcessingJS//matrix.senecac.on.ca/~asalga/pjswebide/index.orgphp?sketchID=32 Core] by Andor Salga<br />Bug Tracking[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.lighthouseappbocoup.com/js-ninja/ JS Ninja] by Al MacDonald<br />IDE[http: PJS, Bespin, SketchPad, EtherPad//matrix.senecac.on.ca/~asalga/FSOSS2010/zelda/zelda-js.html Zelda] by Scott Downe<br />
Processing==Challenges==Home PageCreate an empty sketch and try to code a simple game: Processing.org<br />Pong!<br />Bug Tracking[http: code//www.googleconcntr8.com/pConcentration]<br />Flying side-scroller<br />[http://en.wikipedia.org/processingwiki/issuesSokoban Sokoban]<br /list>
Requirements ?==Gotchas==Breaks ?<ul><li>Integer/Integer division println(5/2) v.s. println(5/2.0)</li>GitHub<li>NPOT (Non Power of Two) textures will not load in 3D</li>Lighthouse<li>color does not use <b>new</b></li>GC</ul>