Using Processing.js across multiple pages

Question

I have a problem using processing.js across multiple pages.

I have a master page (test.html) which loads, via jquery, all pages into a div named "contentarea". This is just an exerpt of "test.html", just so you get the idea:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script src="js/processing.js"></script>
<script> 
$(document).ready(function(){$("#contentarea").load("page1.html");
etc...
</script>
<div id="contentarea">...</div>

As you can see the Test.html contains the processing reference "src="js/processing.js"" and will intercept any static "canvas data-processing-sources" on its own page ("test.html" - only).

When page1.html is loaded into test.html, processing.js does not initialise the canvas. But when viewing the page (page1.html) on its own, processing.js intercepts "canvas data-processing-sources" and loads fine.

Here is a working example of the problem:

EXAMPLE

http://78revelationscom.ipage.com/site/test/test.html

QUESTION:

How can I get processing.js to initialise (or re-initialise, or refresh, or load) a canvas that is dynamically loaded?

Thank you in advance!

Answer 1

This might still be a problem since it won't be solved in the library until the next version: For now, the solution is to not rely on Processing auto-loading, since that only happens on DOMContentLoaded events. Instead, when you change page content you can grab the canvas's data-processing-sources attribute and create a new Processing instance from the indicated source code:

function loadSketchOnContentSwap() {
    var canvas = /* get the relevant canvas however you want */
    var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
    Processing.loadSketchFromSources(canvas, sources);
}