Difference between revisions of "FSOSS 2010/processing.js/"

From CDOT Wiki
Jump to: navigation, search
Line 42: Line 42:
 
   <li>Many contributions by Seneca</li>
 
   <li>Many contributions by Seneca</li>
 
   <li>[http://processing-js.lighthouseapp.com/ Bug Tracking]</li>
 
   <li>[http://processing-js.lighthouseapp.com/ Bug Tracking]</li>
  <li>Does not require a plug-in</li>
+
  <li>Does not require a plug-in</li>
 
   <li>Uses the <canvas> tag</li>
 
   <li>Uses the <canvas> tag</li>
 
</ul>
 
</ul>
 +
Lots of IDEs
 +
[http://processingjs.org/learning/ide Processing.js IDE]
 +
[http://hascanvas.com/ HasCanvas]
 +
[http://sketchpad.cc/ SketchPad]
 +
[http://sketch.processing.org/ Sketch.Processing.org]
 +
[http://matrix.senecac.on.ca/~asalga/pjswebide/ My IDE]
  
  
Line 137: Line 143:
 
  More demos! [http://matrix.senecac.on.ca/~asalga/pjswebide/ My PJS Web IDE] ([http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=31 Visualizations], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=20 Spatial hierarchies], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=30 Image manipulation], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=33 Particle Systems!])
 
  More demos! [http://matrix.senecac.on.ca/~asalga/pjswebide/ My PJS Web IDE] ([http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=31 Visualizations], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=20 Spatial hierarchies], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=30 Image manipulation], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=33 Particle Systems!])
  
Games
+
<b>Games</b>
 
  [http://pointmarker.com/webgl/test1b.html 3D Pong] by bmidgley
 
  [http://pointmarker.com/webgl/test1b.html 3D Pong] by bmidgley
 
  [http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns
 
  [http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns
Line 146: Line 152:
 
  [http://matrix.senecac.on.ca/~asalga/FSOSS2010/zelda/zelda-js.html Zelda] by Scott Downe
 
  [http://matrix.senecac.on.ca/~asalga/FSOSS2010/zelda/zelda-js.html Zelda] by Scott Downe
  
  PJS IDEs
+
<b>Challenges</b>
  [http://processingjs.org/learning/ide Processing.js IDE]
+
  Create an empty sketch and try to code a simple game:
  [http://hascanvas.com/ HasCanvas]
+
  Pong!
  [http://sketchpad.cc/ SketchPad]
+
  [http://www.concntr8.com/ Concentration]
  [http://sketch.processing.org/ Sketch.Processing.org]
+
  Flying side-scroller
[http://matrix.senecac.on.ca/~asalga/pjswebide/ My IDE]
+
  [http://en.wikipedia.org/wiki/Sokoban Sokoban]

Revision as of 21:51, 27 October 2010

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
  • Requires a JVM plug-in
  • Uses the <object> tag
  • Reference
  • Bug tracking


Setting up Processing

  • Download it here
  • Save the .DMG file to the Desktop
  • Double-click to extract file
  • Drag the Processing icon to the desktop
  • Double-click the icon to start


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
Lots of IDEs
Processing.js IDE
HasCanvas
SketchPad
Sketch.Processing.org
My IDE


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


Text & Random

X - text, random Example
X - Exercise

Animation Timing

Timing Example


Vectors & Transfomations

X - Vectors
X - Particle System Example
X - Exercise! Modify the Particle System
7 - transforms, triangle, rect, (point)


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
Zelda by Scott Downe

Challenges

Create an empty sketch and try to code a simple game:
Pong!
Concentration
Flying side-scroller
Sokoban