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

From CDOT Wiki
Jump to: navigation, search
Line 81: Line 81:
  
  
−
<b>Basics</b>
+
==Examples & Exercises==
 +
 
 +
===Basics===
 
  size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example]
 
  size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example]
  
Line 92: Line 94:
 
  ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example]
 
  ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example]
  
−
<b>Input</b>
+
===Input===
 
  mousePressed, mouseReleased, println, debugging with P5 [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example]
 
  mousePressed, mouseReleased, println, debugging with P5 [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example]
  
Line 98: Line 100:
  
  
−
<b>Text & Random</b>
+
===Text & Random===
 
  text, random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomText Example]
 
  text, random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomText Example]
  
Line 117: Line 119:
  
  
−
<b>3D</b>
+
===3D===
  
 
  box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]
 
  box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]
Line 125: Line 127:
 
  Vertex, Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example]
 
  Vertex, Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example]
  
−
<b>Debugging</b>
+
===Debugging===
  
 
  println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/debugging1 Example]
 
  println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/debugging1 Example]
Line 133: Line 135:
 
  Error console
 
  Error console
  
−
<b>DOM Manipulation/Library Integration</b>
+
===DOM Manipulation/Library Integration===
  
 
  DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example]
 
  DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example]
Line 145: Line 147:
 
  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!])
  
−
<b>Games</b>
+
==Sample Games==
−
[http://pointmarker.com/webgl/test1b.html 3D Pong] by bmidgley
+
Here are some Processing.js games and prototypes to give you an idea what is possible<br />
−
[http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns
+
[http://pointmarker.com/webgl/test1b.html 3D Pong] by bmidgley<br />
−
[http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=32 Core] by Andor Salga
+
[http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns<br />
−
[http://bocoup.com/processing-js/docs/index.php?page=Game%20-%20Light%20Cycles Light Cycles] by Al MacDonald
+
[http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=32 Core] by Andor Salga<br />
−
[http://processingjs.org/learning/topic/conway Game of Life] by Al MacDonald
+
[http://bocoup.com/processing-js/docs/index.php?page=Game%20-%20Light%20Cycles Light Cycles] by Al MacDonald<br />
−
[http://code.bocoup.com/js-ninja/ JS Ninja] by Al MacDonald
+
[http://processingjs.org/learning/topic/conway Game of Life] by Al MacDonald<br />
−
[http://matrix.senecac.on.ca/~asalga/FSOSS2010/zelda/zelda-js.html Zelda] by Scott Downe
+
[http://code.bocoup.com/js-ninja/ JS Ninja] by Al MacDonald<br />
 +
[http://matrix.senecac.on.ca/~asalga/FSOSS2010/zelda/zelda-js.html Zelda] by Scott Downe<br />
  
−
<b>Challenges</b>
+
==Challenges==
−
Create an empty sketch and try to code a simple game:
+
Create an empty sketch and try to code a simple game:<br />
−
Pong!
+
Pong!<br />
−
[http://www.concntr8.com/ Concentration]
+
[http://www.concntr8.com/ Concentration]<br />
−
Flying side-scroller
+
Flying side-scroller<br />
−
[http://en.wikipedia.org/wiki/Sokoban Sokoban]
+
[http://en.wikipedia.org/wiki/Sokoban Sokoban]<br />

Revision as of 07:35, 28 October 2010

Welcome to the Game Development Using Processing.js Workshop!

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


Examples & Exercises

Basics

size, background, rect Example

setup Example

draw, noStroke, ellipse, fill, mousePressed Example

line, stroke, strokeWeight Example

ArrayList Example

Input

mousePressed, mouseReleased, println, debugging with P5 Example

keyPressed, keyCode, keyReleased Example


Text & Random

text, random Example

Exercise

Animation Timing 

Timing Example


Vectors & Transfomations 

Vectors

Particle System Example

Exercise! Modify the Particle System

transforms


3D

box Example

sphere, sphereDetail Example

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!)

Sample Games

Here are some Processing.js games and prototypes to give you an idea what is possible
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

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=FSOSS_2010/processing.js/&oldid=48842"