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 18:26, 13 September 2010
, 13 September 2010→3. Creating a Processing.js Web Page
| Line 68: | Line 68: | ||
<pre> | <pre> | ||
<script src="processing-0.9.7.min.js"></script> | <script src="processing-0.9.7.min.js"></script> | ||
<canvas data- | <canvas data-processing-sources="hello-web.pde"></canvas> | ||
</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. | |||
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. | |||
And that's it! Save this file to the same directory as '''hello-web.pde''' and '''processing-0.9.7.min.js''' and call it '''hello-web.html'''. | |||
If you're the kind of person who doesn't like taking shortcuts, here's what a more complete web page might look like: | |||
<pre> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<title>Hello Web - Processing.js Test</title> | |||
<script src="processing-0.9.7.min.js"></script> | |||
</head> | |||
<body> | |||
<h1>Processing.js Test</h1> | |||
<p>This is my first Processing.js web-based sketch:</p> | |||
<canvas data-processing-sources="hello-web.pde"></canvas> | |||
</body> | |||
</html> | |||
</pre> | |||
Both ways work, and you shouldn't let yourself get burdened by HTML and other web syntax until you feel you want to do other things with your web pages. | |||