Difference between revisions of "FSOSS 2010/processing.js/"
(→Setting up Minefield) |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 10: | Line 10: | ||
| − | ==Goals== | + | ==Goals & Schedule== |
| − | <ul><li>Develop a simple 2D or 3D game using in Processing</li></ul> | + | <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> | ||
| Line 46: | Line 50: | ||
<li>Does not require a plug-in</li> | <li>Does not require a plug-in</li> | ||
<li>Uses the <canvas> tag</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> | </ul> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 63: | Line 62: | ||
<li>Instructions to enabled WebGL [http://www.c3dl.org/index.php/tutorials/tutorial-1-browsers/ here]</li> | <li>Instructions to enabled WebGL [http://www.c3dl.org/index.php/tutorials/tutorial-1-browsers/ here]</li> | ||
</ul> | </ul> | ||
| + | |||
==Setting up Processing.js== | ==Setting up Processing.js== | ||
| Line 71: | Line 71: | ||
<li>[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/setupHTMLFile HTML file]</li> | <li>[http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/setupHTMLFile HTML file]</li> | ||
</ul> | </ul> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 110: | Line 101: | ||
| − | <b>Vectors & | + | <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/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] | Particle System [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/psys1 Example] | ||
| Line 117: | Line 110: | ||
<b>Exercise!</b> Modify the Particle System | <b>Exercise!</b> Modify the Particle System | ||
| − | [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms | + | [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] | ||
| Line 164: | Line 159: | ||
Flying side-scroller<br /> | Flying side-scroller<br /> | ||
[http://en.wikipedia.org/wiki/Sokoban Sokoban]<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> | ||
Latest revision as of 07:29, 28 October 2010
Welcome to the Game Development Using Processing.js Workshop!
Contents
Intro (me)
- Seneca college BSD student
- Research assistant in CDOT
- Related projects: C3DL and XB PointStream
- Wordpress, Twitter
Goals & Schedule
- Develop a simple 2D or 3D game using in Processing
- 9-11 Examples and exercises
- 11-12 Work, experiment, collaborate
Processing (aka P5)
- Processing.org
- Open source data visualization language
- Developed in Java
- "Sketches" written using Java syntax
- Requires a JVM plug-in
- Uses the <object> tag
- Reference
- Bug tracking
Setting up Processing
- Download it here
- Save the .DMG file to the Desktop
- Double-click to extract file
- Drag the Processing icon to the desktop
- Double-click the icon to start
Processing.js (aka PJS)
- ProcessingJS.org
- Open source JavaScript port of Processing
- Started by John Resig
- Many contributions by Seneca
- Bug Tracking
- Does not require a plug-in
- Uses the <canvas> tag
- Lots of IDEs Processing.js IDE, HasCanvas, SketchPad, Sketch.Processing.org, My IDE
Setting up Minefield
- Why use it?
- Much faster than Firefox
- Has WebGL
- Download a working version of Minefield here
- Instructions to enabled WebGL here
Setting up Processing.js
- 3 Files Required
- Processing.js file
- Sketch file
- HTML file
Examples & Exercises
Basics
size, background, rect Example
setup Example
draw, noStroke, ellipse, fill, mousePressed Example
line, stroke, strokeWeight Example
ArrayList Example
Input
mousePressed, mouseReleased, println, debugging with P5 Example
keyPressed, keyCode, keyReleased Example
Text & Random
text, random Example
Exercise
Animation Timing
Timing Example
Vectors & Transformations
Vectors
Vector Exercise
Particle System Example
Exercise! Modify the Particle System
Transformations
Transform Exercise
3D
box Example
sphere, sphereDetail Example
Vertex, Texture Example
Debugging
println Example
Checking in P5
Error console
DOM Manipulation/Library Integration
DOM Interaction Example
Integration with jQueryUI - Example
Audio Example, Audio Data API Demos
Physics using Box2DJS - Al MacDonald's Demo, 0.1 PJS Crayon Physics
More demos! My PJS Web IDE (Visualizations, Spatial hierarchies, Image manipulation, Particle Systems!)
Sample Games
Here are some Processing.js games and prototypes to give you an idea what is possible
3D Pong by bmidgley
Tower Defense by Will Larson and Peter Burns
Core by Andor Salga
Light Cycles by Al MacDonald
Game of Life by Al MacDonald
JS Ninja by Al MacDonald
Zelda by Scott Downe
Challenges
Create an empty sketch and try to code a simple game:
Pong!
Concentration
Flying side-scroller
Sokoban
Gotchas
- Integer/Integer division println(5/2) v.s. println(5/2.0)
- NPOT (Non Power of Two) textures will not load in 3D
- color does not use new
