Well, here is a very basic way of doing it (colour-coded as well!)...
Anything in italics must be replaced by the thing described.
<!--The usual HTML tags-->
<!DOCTYPE html>
<html>
<head>
<script src="processing-1.4.1.js"></script>
<!--This "imports" the functions in the processing-1.4.1.js file. THIS FILE MUST BE SAVED IN THE SAME FOLDER AS THIS HTML FILE!-->
</head>
<body>
<script type="application/processing" data-processing-target="id-of-the-canvas">
void setup() {
// "set up" code (e.g. canvas size, canvas background...) here
// e.g.:
// size(400, 400)
// background(0, 0, 0);
}
void draw() {
// include the draw() function if you want an animation. Put all the animation code here
// e.g.:
// fill(random(0, 255), random(0, 255), random(0, 255));
// ellipse(200, 200, 200, 200);
}
</script>
<canvas id="id-of-the-canvas"></canvas>
</body>
</html>
You can download the processing-1.4.1.js file from this webpage - click "processing-1.4.1.js". Remember to save it in the same folder as the HTML file.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My awesome colour-changing circle!</title>
<style type="text/css">
h1, h2 { font-family:"Comic Sans MS"; font-weight:bold; text-decoration:underline; text-align:center; }
h1 { color:red; }
h2 { color:blue; }
</style>
<script src="processing-1.4.1.js"></script>
</head>
<body>
<h1>Hey, guys - check out my awesome colour-changing circle!!</h1>
<h2>Try mousing over the canvas!</h2>
<script type="application/processing" processing-data-target="canvas">
void setup() {
size(400, 400);
}
void draw() {
background(50, 50, 75);
fill(random(0, 255), random(0, 255), random(0, 255));
ellipse(200, mouseY, 200, 200);
}
</script>
<canvas id="canvas"></canvas>
</body>
</html>
And here's what the webpage looks like:
Just in case you were wondering, yes, I did write all that code myself, and yes, I DID do it all from scratch. :)
Update 09/01/2013: data-processing-type works as well, but it should be data-processing-target, according to the official Processing.js website.
No comments:
Post a Comment