Game Development Reference
In-Depth Information
Basic Processing syntax
If you are familiar with Processing or Java, this bit will look familiar to you.
void setup(){
size(400,200);
}
void draw(){
background(0);
fill(255,0,0);
ellipse(mouseX,mouseY,50,50);
}
This is a very basic example of the Processing syntax. This code will create a canvas that is 400
×
200
pixels. It will then repeatedly draw an ellipse at the x and y positions from the mouse's current location for
width and a height of 50 pixels. The color will be red. As mentioned earlier, Processing is basically a
wrapper for Java. With Processing, there is a setup function that is run only once on the start; then the
draw loop runs repeatedly until the program exits. Also, creating any sort of graphic is as simple as
entering the parameters into the function.
Embedding a sketch
Now that we've had a glimpse of what Processing looks like, we will now take a look at how you embed it
into your HTML to get it up and running with the canvas tag. Let's say you have written the program in the
previous section (called a “sketch” in Processing lingo). The sketch will have a file name ending with the
extension .pde. The following shows how to embed our
example.pde
sketch into HTML5.
<html>
<head>
<title>Processing with HTML5 </title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<canvas id="processingCanvas" data-processing-sources="example.pde"/>
</canvas>
</body>
</html>
You only need two things to get your first sketch up and running online: your processing sketch and the
processing.js
file, which can be downloaded at
Processing.js.org/download
. Simply download the latest
stable version of the
processing-x.x.x.js
file, and you are ready to go. All you have to do is define the
canvas, tell it to load your sketch, and voila, you have Processing on the web. In the upcoming release of
Processing (2.0), you can actually click a button to switch into JavaScript mode. This means you don't
even have to download a library because when you export your sketch, it will create the web page and
include the JS library by default.
