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 <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 canvas
Setting up Processing.js
- 3 Files Required
- Processing.js file [1]
- Sketch file</li?
- HTML container
Coordinate system
- size() sets canvas dimensions
- top-left corner [0, 0]
- X increases right
- Y increases downwards
1 - size, background, rect Example
2 - setup Example
3 - draw, noStroke, ellipse, fill, mousePressed Example
4 - line, stroke, strokeWeight Example
5 - ArrayList Example
6 - mousePressed, mouseReleased, println Example
7 - triangle, rect, point, (neighborhood)
8 - transformed neighborhood
8 - more transforms
9 - 2D Vectors (dot, mult, etc.)
10 - class
11 - type demo (text, textWidth)
12 - PImage, timing, random
13 - Particle System (random)
? - keyPressed, keyCode, keyReleased [done] point? collision detection
3D
- box
- sphere, sphereDetail
- Texture
-
DOM stuff
- alert - update span
JS libs
- Box2DJS - Video - Audio
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
Requirements ? Breaks ? GitHub Lighthouse GC