Processing.js is already pretty cool. But what if you could combine it with jquery, so that your processing.js sketch could react to different browser events that jquery can easily pick up?
Advanced users may simply want to skip to the working demo: auto resizing demo.
The first thing we’ll have to do is add a reference to jquery in the <head>:
<head> <title>auto resizing processing sketch</title> <script src="processing.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head>
As you can see, I’m using the Google CDN hosted version of jquery, which is better than hosting jquery yourself for a variety of reasons.
Now, what does the rest of our file look like? Assuming it’s a typical processing.js sketch, it probably looks something like this:
<body> <canvas id="mycanvas" data-processing-sources="processing-test.pde"></canvas> </body>
How do we allow jquery to hook into our canvas? Luckily, Processing.js provides a function called getInstanceById() that allows us to get a reference to our sketch. We simply need to create a javascript variable that will hold this reference. See the code below:
<script>
var pjs;
$(document).ready(function() {
getPjsInstance();
});
// obtain a reference to the processing sketch
function getPjsInstance() {
var bound = false;
pjs = Processing.getInstanceById('mycanvas');
if(pjs != null)
bound = true;
if(!bound)
setTimeout(getPjsInstance, 250);
}
</script>
First, we declare a javascript variable pjs to hold the reference to our sketch. We use jquery’s $(document).ready() function to execute the code that will obtain this reference and store it in the pjs variable.
In line 11, we call the Processing.getInstanceById() function with 'mycanvas' as the argument. This is because earlier, we used the id mycanvas for our <canvas> element.
The setTimeout() function on line 15 calls the getPjsInstance() function again after a delay of 250 milliseconds if our pjs variable has not been bound to the processing instance. But why might it not have been bound the first time? Well, the processing.js library that we include in the <head> of our file is a huge file (over 20,000 lines of code!). It is very possible that the processing.js library will not have finished loading by the time that line 11 gets executed. In that case, the browser will have no idea how to execute the line, because the processing.js library that has the code to run it has not yet been loaded! Thus, we simply wait 250 milliseconds and try again.
What can we do with this?
Now that we have a reference to our sketch, how is that useful? Let’s do an example where we have our processing.js sketch resize to take up the full browser window height and width. It will dynamically update the sketch size if the browser window size is changed.
First, we add code that will be called whenever a browser resize event is fired (with the magic of jquery!):
$(window).resize(function() {
pjs.resizeSketch();
});
next, open up your processing.js sketch code and add a new public function by that name. In our processing sketch file called processing-test.pde, we add the function:
public void setup()
{
...
...
}
public void draw()
{
...
...
}
public void resizeSketch()
{
size($(window).width(), $(window).height());
}
When the jquery event for a browser window resize is fired, we can call this function via our reference to the processing sketch! Pretty cool. You may have also noticed that we can freely intermingle jquery and processing.js code, as we’ve done on line 15. Wow!
Now, whenever the browser window is resized, the processing sketch will resize to fit the new window. In the demo below, this simply means that the blue background will grow or shrink based on the window size. You’ll never see the white page background.
Demo time
Putting all the pieces together, check out the demo and view the source yourself: auto resizing demo.
1 comment