( Zipped Code Example available below )
Before you read the document below: be aware that Resig's init.js has been updated to work with Internet Explorer. The fix can be found here. The Original Document remains valuable in understanding how to call a new instance of Processing using minimal JavaScript code.
There is a initial hurdle to overcome when trying to use Processing.js with exCanvas.js in Explorer. All the examples for Processing.js use a JavaScript command called textContent(). This function has been part of the DOM specification for microchip-millennia, but Microsoft have still not included it in their JavaScript command set.
John Resig, the man responsible for porting Processing to JavaScript (among other things: like jQuery), has probably got better things to do than check everything in working in Internet Explorer. John probably uses a real browser, like FireFox. So the init.js code that he has created, uses the correct DOM command, which it should. Unfortunately Internet Explorer thinks this is nasty upchuck.
In fact... it is Internet Explorer that is nasty upchuck: and the only way to get the text content of a DOM node is to use the ancient .text property. Fortunately, sane groups such as Mozilla are kind enough to include backwards compatibility; allowing us to use .text to pass the script to both modern and ancient browsers.
I Personally like to initiate my Processing scripts where I want, when I want. And if you're going to combine Ajax with Processing.js, you are going to need to think about this. Rather than wading into that now, I wanted to demonstrate a quick solution that should help coders with sparse JavaScript knowledge understand how to initiate their own scripts in any browser.
Firstly you will need to include the conditional statement in the head of your HTML document so that only IE will load exCanvas. It should look something like this:
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
Secondly you need to add a 'load event' to your JavaScript. This stops your code from trying to initialize your Processing script before Processing.js or the canvas element have finished loading. There are many ways to do this, I use jQuery; but for this demo we are just going to use the inline JavaScript onLoad statement like so:
<body onload="init();">
Great: now the init() function has been called after your document has been loaded. Next we pass your Processing script into Processing.js's parsing engine to be lovingly painted onto the canvas. Again, there are several ways to approach this, but we are going use the least amount of code that I can think of:
<script type="text/javascript">
function init(){
canvas = document.getElementById("canvas1");
script = document.getElementById("script1").text;
Processing(canvas, script);
}
</script>
So if you really want to use faulty browser architecture, or you're forced to by demanding clients, you can. But beware of the trade-offs. ExCanvas.js does not support every function that Processing.js can throw at it. Such as stroke(). Give it time. And if you get the opportunity to offer expert advice - suggesting companies switch over to modern browsers like FireFox to stay up-to-date... be very vocal!
Feel free to download the Zipped Source Example and gut it for your own purposes.