FSOSS 2010/processing.js/

From CDOT Wiki
Revision as of 10:26, 26 October 2010 by Asalga (talk | contribs)
Jump to: navigation, search

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]


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