Automatically Scaling a Processing.js Sketch to Fit the Browser Window

As promised in my previous post, here’s how I made my portfolio background scale to fit the window.

First, make sure you have JQuery loaded somewhere. Then add the following code to your sketch, replacing ‘PortfolioBackground’ with the id of the canvas tag containing the sketch:

function doResize()
{
var setupHeight = Math.max($(document).height(), $(window).height());
$('#PortfolioBackground').width($(window).width());
$('#PortfolioBackground').height(setupHeight);
size($(window).width(), setupHeight);
}
$(window).resize(doResize);

Then in void setup(), you replace size(800, 800) or whatever with doResize(). Now your sketch should be scaling automatically.

If you want, you can just take a look at my portfolio site’s background’s source code.