Difference between revisions of "FSOSS 2010/processing.js/"
| Line 18: | Line 18: | ||
<li>Open source data visualization language</li> | <li>Open source data visualization language</li> | ||
<li>Developed in Java</li> | <li>Developed in Java</li> | ||
| − | <li>"Sketches" written using Java syntax in [http://www.processing.org/download/ PDE]</li> | + | <li>"Sketches" written using Java syntax in the [http://www.processing.org/download/ PDE]</li> |
<li>Requires a JVM plug-in</li> | <li>Requires a JVM plug-in</li> | ||
<li>Uses the <object> tag</li> | <li>Uses the <object> tag</li> | ||
| Line 30: | Line 30: | ||
<li>Started by John Resig</li> | <li>Started by John Resig</li> | ||
<li>Many contributions by Seneca</li> | <li>Many contributions by Seneca</li> | ||
| − | <li>[ | + | <li>[http://processing-js.lighthouseapp.com/ Bug Tracking]</li> |
<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> | ||
| Line 94: | Line 94: | ||
X - Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example] | X - Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example] | ||
| + | |||
| + | |||
| + | <b>Debugging</b> | ||
| + | |||
| + | using println, checking in P5, error console | ||
<b>DOM Manipulation/Library Integration</b> | <b>DOM Manipulation/Library Integration</b> | ||
| Line 111: | Line 116: | ||
[http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns | [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://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 | ||
Revision as of 12:05, 27 October 2010
Game Development Using Processing.js
Intro (me)
- Seneca college BSD student
- Research assistant in CDOT
- Related projects: C3DL and XB PointStream
- Wordpress, Twitter
Goals
- Develop a simple 2D or 3D game using in Processing
Processing (aka P5) Processing.org
- Open source data visualization language
- Developed in Java
- "Sketches" written using Java syntax in the PDE
- Requires a JVM plug-in
- Uses the <object> tag
- Bug tracking
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
Setting up Processing.js
- 3 Files Required
- Processing.js file
- Sketch file
- HTML file
Coordinate system
- size() sets canvas dimensions
- top-left corner [0, 0]
- X increases right
- Y increases downwards
Basiscs
1 - size, background, rect Example
2 - setup Example
3 - draw, noStroke, ellipse, fill, mousePressed Example
4 - line, stroke, strokeWeight Example
5 - ArrayList Example
Input
6 - mousePressed, mouseReleased, println (+error console)Example
X - keyPressed, keyCode, keyReleased Example
Transfomations
7 - transforms, triangle, rect, (point)
8 - more transforms
9 - 2D Vectors (dot, mult, etc.)
10 - class (?)
11 - type demo (text, textWidth)
12 - PImage, timing, random
13 - Particle System
3D
X - box Example
X - sphere, sphereDetail Example
X - Vertex
X - Texture Example
Debugging
using println, 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!)
Games 3D Pong by bmidgley Tower Defense by Will Larson and Peter Burns Core by Andor Salga Light Cycles by Al MacDonald
