Difference between revisions of "FSOSS 2010/processing.js/"
| Line 1: | Line 1: | ||
<h3>Game Development Using Processing.js</h3> | <h3>Game Development Using Processing.js</h3> | ||
| + | |||
| + | <b>Intro</b><br /> | ||
| + | <ul> | ||
| + | <li>Seneca college BSD student</li> | ||
| + | <li>Research assistant in CDOT</li> | ||
| + | <li>Related projects: [http://www.c3dl.org C3DL] and [http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream XB PointStream]</li> | ||
| + | </ul> | ||
| + | |||
<b>Goals</b><br /> | <b>Goals</b><br /> | ||
| Line 10: | Line 18: | ||
<li>Developed in Java</li> | <li>Developed in Java</li> | ||
<li>"Sketches" written using Java syntax</li> | <li>"Sketches" written using Java syntax</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> |
| + | <li>[code.google.com/p/processing/issues/list Bug tracking]</li> | ||
</ul> | </ul> | ||
| Line 20: | Line 29: | ||
<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>[https://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 102: | Line 111: | ||
+ collision detection | + collision detection | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 08:08, 27 October 2010
Game Development Using Processing.js
Intro
- Seneca college BSD student
- Research assistant in CDOT
- Related projects: C3DL and XB PointStream
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
- Requires a JVM plug-in
- Uses the <object> tag
- [code.google.com/p/processing/issues/list 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 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
DOM Manipulation/Library Integration
X - DOM Interaction Example
X - jQueryUI
X - CSS
X - Audio
X - Video
X - Physics
X - SVG effects
+ collision detection
