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

From CDOT Wiki
Jump to: navigation, search
 
(47 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<h3>Game Development Using Processing.js</h3>
+
<b>Welcome to the Game Development Using Processing.js Workshop!</b>
  
−
<b>Intro</b><br />
+
==Intro (me)==
 
<ul>
 
<ul>
 
   <li>Seneca college BSD student</li>
 
   <li>Seneca college BSD student</li>
 
   <li>Research assistant in CDOT</li>
 
   <li>Research assistant in CDOT</li>
 
   <li>Related projects: [http://www.c3dl.org C3DL] and [http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream XB PointStream]</li>
 
   <li>Related projects: [http://www.c3dl.org C3DL] and [http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream XB PointStream]</li>
 +
  <li>[http://asalga.wordpress.com Wordpress], [http://twitter.com/asalga Twitter]</li>
 
</ul>
 
</ul>
  
  
−
<b>Goals</b><br />
+
==Goals & Schedule==
−
<ul><li>Develop a simple 2D or 3D game using in Processing</li></ul>
+
<ul>
 +
<li>Develop a simple 2D or 3D game using in Processing</li>
 +
<li>9-11 Examples and exercises</li>
 +
<li>11-12 Work, experiment, collaborate</li>
 +
</ul>
  
  
−
<b>Processing (aka P5)</b> [http://www.Processing.org Processing.org]<br />
+
==Processing (aka P5)==
 
<ul>
 
<ul>
 +
<li>[http://www.Processing.org Processing.org]</li>
 
  <li>Open source data visualization language</li>
 
  <li>Open source data visualization language</li>
 
  <li>Developed in Java</li>
 
  <li>Developed in Java</li>
Line 20: Line 26:
 
  <li>Requires a JVM plug-in</li>
 
  <li>Requires a JVM plug-in</li>
 
  <li>Uses the <object> tag</li>
 
  <li>Uses the <object> tag</li>
−
  <li>[code.google.com/p/processing/issues/list Bug tracking]</li>
+
  <li>[http://www.processing.org/reference/ Reference]</li>
 +
<li>[http://code.google.com/p/processing/issues/list Bug tracking]</li>
 +
</ul>
 +
 
 +
 
 +
===Setting up Processing===
 +
<ul>
 +
<li>Download it [http://www.processing.org/download/ here]</li>
 +
<li>Save the .DMG file to the Desktop</li>
 +
<li>Double-click to extract file</li>
 +
<li>Drag the Processing icon to the desktop</li>
 +
<li>Double-click the icon to start</li>
 
</ul>
 
</ul>
  
  
−
<b>Processing.js (aka PJS)</b> [http://www.ProcessingJS.org ProcessingJS.org]<br />
+
==Processing.js (aka PJS)==
 
  <ul>
 
  <ul>
 +
  <li>[http://www.ProcessingJS.org ProcessingJS.org]</li>
 
   <li>Open source JavaScript port of Processing</li>
 
   <li>Open source JavaScript port of Processing</li>
 
   <li>Started by John Resig</li>
 
   <li>Started by John Resig</li>
 
   <li>Many contributions by Seneca</li>
 
   <li>Many contributions by Seneca</li>
−
   <li>[https://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>
 +
  <li>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]</li>
 
</ul>
 
</ul>
  
  
−
<b>Setting up Processing.js</b><br />
+
==Setting up Minefield==
 +
  <ul>
 +
    <li>Why use it?</li>
 +
    <li>Much faster than Firefox</li>
 +
    <li>Has WebGL</li>
 +
    <li>Download a working version of Minefield [http://zenit.senecac.on.ca/wiki/index.php/Level_Up:_An_OpenWeb_Game_Jam#Resources here]</li>
 +
    <li>Instructions to enabled WebGL [http://www.c3dl.org/index.php/tutorials/tutorial-1-browsers/ here]</li>
 +
  </ul>
 +
 
 +
 
 +
==Setting up Processing.js==
 
  <ul>
 
  <ul>
 
   <li>3 Files Required</li>
 
   <li>3 Files Required</li>
Line 44: Line 73:
  
  
−
<b>Coordinate system</b><br />
+
==Examples & Exercises==
−
<ul>
+
 
−
  <li>size() sets canvas dimensions</li>
+
===Basics===
−
  <li> top-left corner [0, 0]</li>
+
size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example]
−
  <li> X increases right</li>
+
 
−
  <li> Y increases downwards</li>
+
setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Example]
−
  </ul>
+
 
 +
draw, noStroke, ellipse, fill, mousePressed [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example3 Example]
 +
 
 +
line, stroke, strokeWeight [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example4 Example]
 +
 
 +
  ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example]
 +
 
 +
===Input===
 +
mousePressed, mouseReleased, println, debugging with P5 [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example]
 +
 
 +
keyPressed, keyCode, keyReleased [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example9 Example]
 +
 
 +
 
 +
===Text & Random===
 +
  text, random [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomText Example]
 +
 
 +
  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/randomShapes Exercise]
 +
 
 +
<b>Animation Timing</b>
 +
  Timing [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/timing Example]
  
  
−
<b>Basiscs</b>
+
<b>Vectors & Transformations</b>
−
  1 - size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example]
+
  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vectors Vectors]
  
−
  2 - setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Example]
+
  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vector_ex Vector Exercise]
  
−
  3 - draw, noStroke, ellipse, fill, mousePressed [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example3 Example]
+
  Particle System [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/psys1 Example]
  
−
  4 - line, stroke, strokeWeight [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example4 Example]
+
  <b>Exercise!</b> Modify the Particle System
  
−
  5 - ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example]
+
  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms Transformations]
  
−
<b>Input</b>
+
  [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms_ex Transform Exercise]
−
  6 - mousePressed, mouseReleased, println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example]
 
  
−
X  - keyPressed, keyCode, keyReleased [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example9 Example]
 
  
−
<b>Transfomations</b>
+
===3D===
−
7 - transforms, triangle, rect, (point)
 
  
−
  8 - more transforms
+
  box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]
  
−
  9 - 2D Vectors (dot, mult, etc.)
+
  sphere, sphereDetail [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/sphere1 Example]
  
−
  10 - class (?)
+
  Vertex, Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example]
  
−
11 - type demo (text, textWidth)
+
===Debugging===
  
−
  12 - PImage, timing, random
+
  println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/debugging1 Example]
  
−
  13 - Particle System
+
  Checking in P5
  
−
<b>3D</b>
+
Error console
  
−
X - box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example]
+
===DOM Manipulation/Library Integration===
  
−
  X - sphere, sphereDetail [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/sphere1 Example]
+
  DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example]
  
−
  X - Vertex
+
  Integration with [http://jqueryui.com/demos/sortable/ jQueryUI] - [http://matrix.senecac.on.ca/~asalga/FSOSS2010/jQueryUI/jquery-test.html Example]
  
−
  X - Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example]
+
  Audio [http://matrix.senecac.on.ca/~asalga/FSOSS2010/audio/ Example], [http://wiki.mozilla.org/Audio_Data_API#Working_Audio_Data_Demos Audio Data API Demos]
  
−
<b>DOM Manipulation/Library Integration</b>
+
Physics using [http://box2d-js.sourceforge.net/ Box2DJS] - [http://processingjs.org/source/box2d/box2d.html Al MacDonald's Demo], [http://matrix.senecac.on.ca/~asalga/DPS909/release0.2/work/demos/ 0.1 PJS Crayon Physics]
  
−
  X - DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example]
+
  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!])
  
−
X - jQueryUI [http://matrix.senecac.on.ca/~asalga/FSOSS2010/jQueryUI/jquery-test.html Example]
+
==Sample Games==
 +
Here are some Processing.js games and prototypes to give you an idea what is possible<br />
 +
[http://pointmarker.com/webgl/test1b.html 3D Pong] by bmidgley<br />
 +
[http://ptdef.com/ Tower Defense] by Will Larson and Peter Burns<br />
 +
[http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=32 Core] by Andor Salga<br />
 +
[http://bocoup.com/processing-js/docs/index.php?page=Game%20-%20Light%20Cycles Light Cycles] by Al MacDonald<br />
 +
[http://processingjs.org/learning/topic/conway Game of Life] by Al MacDonald<br />
 +
[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 />
  
−
X - Audio [http://matrix.senecac.on.ca/~asalga/FSOSS2010/audio/ Example], [http://wiki.mozilla.org/Audio_Data_API#Working_Audio_Data_Demos Audio Data API Demos]
+
==Challenges==
 +
Create an empty sketch and try to code a simple game:<br />
 +
Pong!<br />
 +
[http://www.concntr8.com/ Concentration]<br />
 +
Flying side-scroller<br />
 +
[http://en.wikipedia.org/wiki/Sokoban Sokoban]<br />
  
−
X - Physics [http://processingjs.org/source/box2d/box2d.html Al MacDonald's Demo], [http://matrix.senecac.on.ca/~asalga/DPS909/release0.2/work/demos/ 0.1 PJS Crayon Physics]
+
==Gotchas==
 +
<ul><li>Integer/Integer division println(5/2) v.s. println(5/2.0)</li>
 +
<li>NPOT (Non Power of Two) textures will not load in 3D</li>
 +
<li>color does not use <b>new</b></li>
 +
</ul>

Latest revision as of 07:29, 28 October 2010

Welcome to the Game Development Using Processing.js Workshop!

Intro (me)


Goals & Schedule

  • Develop a simple 2D or 3D game using in Processing
  • 9-11 Examples and exercises
  • 11-12 Work, experiment, collaborate


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)


Setting up Minefield

  • Why use it?
  • Much faster than Firefox
  • Has WebGL
  • Download a working version of Minefield here
  • Instructions to enabled WebGL here


Setting up Processing.js


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 & Transformations 

Vectors

Vector Exercise

Particle System Example

Exercise! Modify the Particle System

Transformations

Transform Exercise


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

Gotchas

  • Integer/Integer division println(5/2) v.s. println(5/2.0)
  • NPOT (Non Power of Two) textures will not load in 3D
  • color does not use new
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=FSOSS_2010/processing.js/&oldid=48865"