Difference between revisions of "FSOSS 2010/processing.js/"
(Created page with 'Introduction - What is Processing? - What is Processing.js? - Reference page Environment Setup - Where to download - How to setup with HTML and JS Coordinate Systems - 2D…') |
|||
| Line 1: | Line 1: | ||
| − | + | <b>Goals</b><br /> | |
| − | + | <ul><li>Develop a simple 2D or 3D game using in Processing</li></ul> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <b>Processing (aka P5)</b> [www.Processing.org]<br /> | |
| − | - | + | <ul> |
| − | + | <li>Open source data visualization language</li> | |
| + | <li>Developed in Java</li> | ||
| + | <li>"Sketches" written using Java syntax</li> | ||
| + | <li> Requires a JVM plug-in</li> | ||
| + | <li> Uses <object> tag</li> | ||
| + | </ul> | ||
| − | |||
| − | + | <b>Processing.js (aka PJS)</b> [www.ProcessingJS.org]<br /> | |
| + | <ul> | ||
| + | <li>Open source JavaScript port of Processing</li> | ||
| + | <li>Started by John Resig</li> | ||
| + | <li>Many contributions by Seneca</li> | ||
| + | <li>Bug Tracking: https://processing-js.lighthouseapp.com/</li> | ||
| + | <li>Does not require a plug-in</li> | ||
| + | <li>Uses canvas </li> | ||
| + | </ul> | ||
| − | |||
| − | |||
| − | |||
| − | + | <b>Setting up Processing.js</b><br /> | |
| − | + | <ul> | |
| − | + | <li>3 Files Required</li> | |
| + | <li>Processing.js file [http://processingjs.org/download]</li> | ||
| + | <li>Sketch file</li? | ||
| + | <li>HTML container</li> | ||
| + | </ul> | ||
| − | |||
| − | |||
| − | DOM | + | <b>Coordinate system</b><br /> |
| + | <ul> | ||
| + | <li>size() sets canvas dimensions</li> | ||
| + | <li> top-left corner [0, 0]</li> | ||
| + | <li> X increases right</li> | ||
| + | <li> Y increases downwards</li> | ||
| + | </ul> | ||
| + | |||
| + | |||
| + | 1 - size, background, rect [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example1 Example] | ||
| + | |||
| + | 2 - setup [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example2 Example] | ||
| + | |||
| + | 3 - draw, noStroke, ellipse, fill, mousePressed [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example3 Example] | ||
| + | |||
| + | 4 - line, stroke, strokeWeight [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example4 Example] | ||
| + | |||
| + | 5 - ArrayList [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example5 Example] | ||
| + | |||
| + | 6 - mousePressed, mouseReleased, println [http://zenit.senecac.on.ca/wiki/index.php/FSOSS_2010/processing.js/example6 Example] | ||
| + | |||
| + | 7 - triangle, rect, point, (neighborhood) | ||
| + | |||
| + | 8 - transformed neighborhood | ||
| + | |||
| + | 8 - more transforms | ||
| + | |||
| + | 9 - 2D Vectors (dot, mult, etc.) | ||
| + | |||
| + | 10 - class | ||
| + | |||
| + | 11 - type demo (text, textWidth) | ||
| + | |||
| + | 12 - PImage, timing, random | ||
| + | |||
| + | 13 - Particle System (random) | ||
| + | |||
| + | ? - keyPressed, keyCode, keyReleased [done] | ||
| + | |||
| + | point? | ||
| + | collision detection | ||
| + | |||
| + | |||
| + | |||
| + | ---------------- | ||
| + | 3D | ||
| + | - box | ||
| + | |||
| + | - sphere, sphereDetail | ||
| + | |||
| + | - Texture | ||
| + | |||
| + | - | ||
| + | ----------------- | ||
| + | DOM stuff | ||
| + | - alert | ||
| + | - update span | ||
| + | ----------------- | ||
| + | |||
| + | JS libs | ||
| + | - Box2DJS | ||
| + | - Video | ||
| + | - Audio | ||
| + | |||
| + | 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 | ||
| + | |||
| + | Requirements ? | ||
| + | Breaks ? | ||
| + | GitHub | ||
| + | Lighthouse | ||
| + | GC | ||
Revision as of 11:26, 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 <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 canvas
Setting up Processing.js
- 3 Files Required
- Processing.js file [1]
- Sketch file</li?
- HTML container
Coordinate system
- size() sets canvas dimensions
- top-left corner [0, 0]
- X increases right
- Y increases downwards
1 - size, background, rect Example
2 - setup Example
3 - draw, noStroke, ellipse, fill, mousePressed Example
4 - line, stroke, strokeWeight Example
5 - ArrayList Example
6 - mousePressed, mouseReleased, println Example
7 - triangle, rect, point, (neighborhood)
8 - transformed neighborhood
8 - more transforms
9 - 2D Vectors (dot, mult, etc.)
10 - class
11 - type demo (text, textWidth)
12 - PImage, timing, random
13 - Particle System (random)
? - keyPressed, keyCode, keyReleased [done] point? collision detection
3D
- box
- sphere, sphereDetail
- Texture
-
DOM stuff
- alert - update span
JS libs
- Box2DJS - Video - Audio
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
Requirements ? Breaks ? GitHub Lighthouse GC
