FSOSS 2010/processing.js/

Game Development Using Processing.js

Goals

• Develop a simple 2D or 3D game using in Processing

Processing (aka P5) [www.Processing.org]

• Open source data visualization language
• Developed in Java
• "Sketches" written using Java syntax
• Requires a JVM plug-in
• Uses the <object> tag

Processing.js (aka PJS) [www.ProcessingJS.org]

• Open source JavaScript port of Processing
• Started by John Resig
• Many contributions by Seneca
• Bug Tracking: https://processing-js.lighthouseapp.com/
• 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

Requirements ? Breaks ? GitHub Lighthouse GC

Links: Processing.js Home Page: ProcessingJS.org Bug Tracking: processing-js.lighthouseapp.com/ IDE: PJS, Bespin, SketchPad, EtherPad

Processing Home Page: Processing.org Bug Tracking: code.google.com/p/processing/issues/list