Difference between revisions of "FSOSS 2010/processing.js/"
| Line 9: | Line 9: | ||
<li>"Sketches" written using Java syntax</li> | <li>"Sketches" written using Java syntax</li> | ||
<li> Requires a JVM plug-in</li> | <li> Requires a JVM plug-in</li> | ||
| − | <li> Uses <object> tag</li> | + | <li> Uses the <object> tag</li> |
</ul> | </ul> | ||
| Line 20: | Line 20: | ||
<li>Bug Tracking: https://processing-js.lighthouseapp.com/</li> | <li>Bug Tracking: https://processing-js.lighthouseapp.com/</li> | ||
<li>Does not require a plug-in</li> | <li>Does not require a plug-in</li> | ||
| − | <li>Uses canvas </li> | + | <li>Uses the <canvas> tag</li> |
</ul> | </ul> | ||
| Line 42: | Line 42: | ||
| + | <b>Basiscs</b> | ||
1 - size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example] | 1 - size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example] | ||
| Line 52: | Line 53: | ||
5 - ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example] | 5 - ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example] | ||
| + | <b>Input</b> | ||
6 - mousePressed, mouseReleased, println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example] | 6 - mousePressed, mouseReleased, println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example] | ||
| + | |||
| + | X - keyPressed, keyCode, keyReleased | ||
7 - transforms, triangle, rect, (point) [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example7 Example] | 7 - transforms, triangle, rect, (point) [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example7 Example] | ||
| Line 66: | Line 70: | ||
12 - PImage, timing, random | 12 - PImage, timing, random | ||
| − | 13 - Particle System | + | 13 - Particle System |
| − | + | <b>3D</b> | |
| − | |||
| − | |||
| − | |||
| − | + | X - box | |
| − | + | X - sphere, sphereDetail | |
| − | |||
| − | - | ||
| − | - | + | X - Vertex |
| − | - Texture | + | X - Texture |
| − | + | <b>DOM Manipulation/Library Integration</b> | |
| − | |||
| − | DOM | ||
| − | |||
| − | |||
| − | |||
| − | + | X - DOM Interaction [http://studio.sketchpad.cc/Qbm0fYDiTE Example] | |
| − | - | + | |
| − | - Video | + | X - Audio |
| − | - | + | |
| + | X - Video | ||
| + | |||
| + | X - Physics | ||
| + | |||
| + | + collision detection | ||
| + | |||
| + | Requirements ? | ||
| + | Breaks ? | ||
| + | GitHub | ||
| + | Lighthouse | ||
| + | GC | ||
Links: | Links: | ||
| Line 104: | Line 109: | ||
Home Page: Processing.org | Home Page: Processing.org | ||
Bug Tracking: code.google.com/p/processing/issues/list | Bug Tracking: code.google.com/p/processing/issues/list | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 12:12, 26 October 2010
Goals
- Develop a simple 2D or 3D game using in Processing
Processing (aka P5) [www.Processing.org]
- Open source data visualization language
- Developed in Java
- "Sketches" written using Java syntax
- Requires a JVM plug-in
- Uses the <object> tag
Processing.js (aka PJS) [www.ProcessingJS.org]
- Open source JavaScript port of Processing
- Started by John Resig
- Many contributions by Seneca
- Bug Tracking: https://processing-js.lighthouseapp.com/
- Does not require a plug-in
- Uses the <canvas> tag
Setting up Processing.js
- 3 Files Required
- Processing.js file [1]
- Sketch file
- HTML container
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
7 - transforms, triangle, rect, (point) Example
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
X - sphere, sphereDetail
X - Vertex
X - Texture
DOM Manipulation/Library Integration
X - DOM Interaction Example
X - Audio
X - Video
X - Physics
+ collision detection
Requirements ? Breaks ? GitHub Lighthouse GC
Links: Processing.js Home Page: ProcessingJS.org Bug Tracking: processing-js.lighthouseapp.com/ IDE: PJS, Bespin, SketchPad, EtherPad
Processing Home Page: Processing.org Bug Tracking: code.google.com/p/processing/issues/list
