Confirmed users
656
edits
Processing.js for Processing Devs: Difference between revisions
Jump to navigation
Jump to search
Processing.js for Processing Devs (view source)
Revision as of 03:16, 15 September 2010
, 15 September 2010→3. Creating a Processing.js Web Page
Notmasteryet (talk | contribs) |
|||
| Line 87: | Line 87: | ||
</pre> | </pre> | ||
That's it! No <html> or <body> tags, no title, no CSS, just the processing.js script, and a canvas. While there isn't much here, it's important to understand what is. First, the script tag has a src attribute, which is the file to load. This could be a full url or a relative path. In this case the browser is going to look for a file named '''processing-0.9.7.min.js''' in the same directory as your web page. | That's it! No <html> or <body> tags, no title, no CSS, just the processing.js script, and a canvas. While there isn't much here, it's important to understand what is. First, the script tag has a '''src''' attribute, which is the file to load. This could be a full url or a relative path. In this case the browser is going to look for a file named '''processing-0.9.7.min.js''' in the same directory as your web page. | ||
The second thing in this web page is a canvas tag. Notice that it too has an attribute, '''data-processing-sources'''. This is a list of filenames (or just one filename if you only have 1 file) separated by spaces (filenames and URLs on the web can't include spaces, so space is a safe choice for separating lists). In this case, the browser is going to look for a file named '''hello-web.pde''' located in the same directory as your page page. | The second thing in this web page is a <canvas> tag. Notice that it too has an attribute, '''data-processing-sources'''. This is a list of filenames (or just one filename if you only have 1 file) separated by spaces (filenames and URLs on the web can't include spaces, so space is a safe choice for separating lists). In this case, the browser is going to look for a file named '''hello-web.pde''' located in the same directory as your page page. | ||
How does the browser know how to load a Processing *.pde file? Processing.js takes care of this, and will download, parse (i.e., translate to JavaScript), then run it automatically when the page is loaded. | How does the browser know how to load a Processing *.pde file? Processing.js takes care of this, and will download, parse (i.e., translate to JavaScript), then run it automatically when the page is loaded. | ||