Open main menu

CDOT Wiki β

Changes

FSOSS 2010/processing.js/

2,165 bytes added, 11:26, 26 October 2010
no edit summary
Introduction<b>Goals</b><br /> - What is <ul><li>Develop a simple 2D or 3D game using in Processing? - What is Processing.js? - Reference page</li></ul>
Environment Setup
- Where to download
- How to setup with HTML and JS
Coordinate Systems<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- 2Din</li> - 3D<li> Uses <object> tag</li></ul>
'Hello World' Sketch
Change background Color<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>
Draw loop
- draw callback
- set/get frameRate
Input<b>Setting up Processing.js</b><br /> - Keyboard<ul> - Mouse <li>3 Files Required</li> <li>Processing.js file [http://processingjs.org/download]</li> <li>Sketch file</li? <li>HTML container</li></ul>
Debugging tips
- alert and println
<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 Integrationstuff - alert - update span----------------- JS libs - Box2DJS - Video - Audio Links:Processing.jsHome Page: ProcessingJS.orgBug Tracking: processing-js.lighthouseapp.com/IDE: PJS, Bespin, SketchPad, EtherPad ProcessingHome Page: Processing.orgBug Tracking: code.google.com/p/processing/issues/list Requirements ?Breaks ?GitHubLighthouseGC
Asalga
1
edit
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/wiki/Special:MobileDiff/48680"