FSOSS 2010/processing.js/

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