Open main menu

CDOT Wiki β

FSOSS 2010/processing.js/

Revision as of 14:09, 27 October 2010 by Asalga (talk | contribs)

Game Development Using Processing.js

Intro (me)


Goals

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


Processing (aka P5) Processing.org

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


Processing.js (aka PJS) ProcessingJS.org

  • Open source JavaScript port of Processing
  • Started by John Resig
  • Many contributions by Seneca
  • Bug Tracking
  • Does not require a plug-in
  • Uses the <canvas> tag


Setting up Minefield

  • Minefield is much faster than Firefox
  • Download a working version of Minefield here
  • Instructions to enabled WebGL here


Setting up Processing.js


Coordinate system

  • size() sets canvas dimensions
  • top-left corner [0, 0]
  • X increases right
  • Y increases downwards


Basics

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, debugging with P5 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 Example

3D

X - box Example
X - sphere, sphereDetail Example
X - Vertex, Texture Example

Debugging

println Example
Checking in P5
Error console

DOM Manipulation/Library Integration

DOM Interaction Example
Integration with jQueryUI - Example
Audio Example, Audio Data API Demos
Physics using Box2DJS - Al MacDonald's Demo, 0.1 PJS Crayon Physics
More demos! My PJS Web IDE (Visualizations, Spatial hierarchies, Image manipulation, Particle Systems!)
Games
3D Pong by bmidgley
Tower Defense by Will Larson and Peter Burns
Core by Andor Salga
Light Cycles by Al MacDonald
Game of Life by Al MacDonald
JS Ninja by Al MacDonald
PJS IDEs
Processing.js IDE
HasCanvas
SketchPad
Sketch.Processing.org
My IDE