Open main menu

CDOT Wiki β

Changes

FSOSS 2010/processing.js/

533 bytes added, 08:29, 28 October 2010
no edit summary
==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>
<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>
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]
==Setting up Minefield==
<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>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>==Examples & Exercises==
<b>===Basics</b>===
size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example]
ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example]
<b>===Input</b>===
mousePressed, mouseReleased, println, debugging with P5 [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example]
<b>===Text & Random</b>===
text, random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomText Example]
<b>Vectors & TransfomationsTransformations</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 transformsTransformations]  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms_ex Transform Exercise]
<b>===3D</b>===
box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]
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!])
<b>==Sample Games==Here are some Processing.js games and prototypes to give you an idea what is possible<br /b> [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==<bul>Challenges</bli> Create an empty sketch and try to code a simple game: Pong! [http:Integer/Integer division println(5/www2) v.s.concntr8println(5/2.com0)</ Concentration]li> Flying side-scroller<li>NPOT (Non Power of Two) textures will not load in 3D</li> [http:<li>color does not use <b>new</b></en.wikipedia.orgli></wiki/Sokoban Sokoban]ul>
Asalga
1
edit
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/wiki/Special:MobileDiff/48841...48865"