Difference between revisions of "FSOSS 2010/processing.js/"
| Line 81: | Line 81: | ||
<b>Basics</b> | <b>Basics</b> | ||
| − | + | size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example] | |
| − | + | setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Example] | |
| − | + | 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] | |
<b>Input</b> | <b>Input</b> | ||
| − | + | 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] | |
<b>Text & Random</b> | <b>Text & Random</b> | ||
| − | + | 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> | <b>Animation Timing</b> | ||
| Line 107: | Line 107: | ||
<b>Vectors & Transfomations</b> | <b>Vectors & Transfomations</b> | ||
| − | + | [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/vectors Vectors] | |
| − | + | Particle System [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/psys1 Example] | |
| − | + | <b>Exercise!</b> Modify the Particle System | |
| − | + | [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/transforms transforms] | |
<b>3D</b> | <b>3D</b> | ||
| − | + | box [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/box1 Example] | |
| − | + | sphere, sphereDetail [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/sphere1 Example] | |
| − | + | Vertex, Texture [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/texture1 Example] | |
<b>Debugging</b> | <b>Debugging</b> | ||
Revision as of 22:30, 27 October 2010
Welcome to the Game Development Using Processing.js Workshop
Intro (me)
- Seneca college BSD student
- Research assistant in CDOT
- Related projects: C3DL and XB PointStream
- Wordpress, Twitter
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
- 3 Files Required
- Processing.js file
- Sketch file
- HTML file
Coordinate system
- size() sets canvas dimensions
- top-left corner [0, 0]
- X increases right
- Y increases downwards
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!)
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
