FSOSS 2010/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 <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
• 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