Difference between revisions of "FSOSS 2010/processing.js/"
| Line 96: | Line 96: | ||
<b>DOM Manipulation/Library Integration</b> | <b>DOM Manipulation/Library Integration</b> | ||
| − | + | DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example] | |
| − | + | Integration with [http://jqueryui.com/demos/sortable/ jQueryUI] - [http://matrix.senecac.on.ca/~asalga/FSOSS2010/jQueryUI/jquery-test.html 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] | |
| − | + | 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] | |
| − | + | 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!], [http://matrix.senecac.on.ca/~asalga/pjswebide/index.php?sketchID=32 Games!]) | |
| − | + | 3D Games - [http://pointmarker.com/webgl/test1b.html 3D Pong] (by bmidgley) | |
Revision as of 08:07, 27 October 2010
Game Development Using Processing.js
Intro
- Seneca college BSD student
- Research assistant in CDOT
- Related projects: C3DL and XB PointStream
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
- [code.google.com/p/processing/issues/list 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 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
Basiscs
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 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
3D
X - box Example
X - sphere, sphereDetail Example
X - Vertex
X - Texture Example
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 Games - 3D Pong (by bmidgley)
