FSOSS 2010/processing.js/

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