Game Development Reference
In-Depth Information
In-line processing
For people like me, you may want more access to the code than this. Processing.js allows you to write
your Processing code directly in the script tag. The
processing.js
file will automatically convert what you
write into Processing. The following is what the same sketch would look like using this method.
<html>
<head>
<title>Processing in HTML5</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<script type="application/processing" >
void setup() {
size(400,200);
}
void draw() {
background(0);
fill(255,0,0);
ellipse(mouseX,mouseY,50,50);
}
</script>
<canvas id="processingCanvas"></canvas>
</body>
</html>
Notice that instead of the standard
type="text/javascript"
we have replaced that with
"application/processing"
. This lets the compiler know that we are including Processing in here, not just
JavaScript.
Integrating JavaScript
So why do this over the embed version? Because now you are able to combine JavaScript and Processing
code in the same space. The compiler will be able to differentiate between the two. This means you can
use a hybrid style of coding that gives you access to functions of Processing and traditional JavaScript.
Let's say we have a simple ellipse that is growing in size. If we want to alert the user once it has hit a
certain size, we can tap into the JavaScript functionality right inside the Processing code.
<html>
<head>
<title>Processing in HTML5</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<script type="application/processing" >
int ellipseSize = 5;
void setup() {
