Open main menu

CDOT Wiki β

FSOSS 2010/processing.js/

Revision as of 11:12, 26 October 2010 by Asalga (talk | contribs)

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]


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


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
7 - transforms, triangle, rect, (point) Example
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
X - sphere, sphereDetail
X - Vertex
X - Texture

DOM Manipulation/Library Integration

X - DOM Interaction Example
X - Audio
X - Video
X - Physics
+ 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