1 / 13

p rocessing.js

p rocessing.js. http:// jmartinho.net /digitalArt-html5/ index.php?art = tr -lines. What is it?. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.

leo-huffman
Download Presentation

p rocessing.js

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. processing.js

  2. http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines

  3. What is it? Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Basically, it is how we put our Processing sketches onto the web.

  4. What is it? Processing.js is built with Javascript and HTML5 It automatically converts your Processing code into Javascript so that it can appear with all its functionality on a web browser.

  5. How does it work? 1. Download the latest version from processingjs.org

  6. How does it work? 2. Make your Processing sketch and save your files as you usually would: *.pde Ex: sketch_aug08.pde

  7. How does it work? 3. Make a web page that includes Processing.js and a <canvas>, which is an HTML5 element. Once processing.js is in a web page, the browser will know what to do with it! You need to include a src attribute inside a script tag with the processing.js file name (and the path to get to it from your web page location)

  8. How does it work? 3. Continued… Now, add your <canvas> tag. It should have an attribute as well that calls your .pde file (and the path to get to it from your page). Save your webpage HTML with your .js and .pde files

  9. How does it work? 4. Open your page! Javascript is telling the web browser how to obtain and show your Processing sketch on the website. You should see your images come to life!

  10. How does it work? **Note: Processing.js does not work with ‘data’ folders like you use in Processing. Make sure you save anything that’s called in your sketch (such as images) in your web page directory the same way you would anywhere else in your HTML code.

  11. Why Use processing.js? No need for plug-ins Uses web standards.

  12. … For more information, help, and examples, visit: www.processingjs.org

More Related