
I’ve had a few questions on this, so I figured I’d write a quick tutorial. Loading a java applet through AJAX doesn’t tend to work too well. Processing.js, however, makes this fairly easy, especially when coupled with jQuery. In order to load a sketch through AJAX, you need to include of course, jQuery and processing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="{site_url}js/processing-1.3.6.min.js"></script>
Then, it’s a simple matter of creating a canvas element on which to attach your sketch, and loading that sketch into the canvas element:
var $projDiv = $('#project_holder');
var canvasRef = $('<canvas id="project_canvas"/>');
var p = Processing.loadSketchFromSources('project_canvas', [projFile]);
$projDiv.append(canvasRef);
Where your markup would just be:
<div id="project_holder"></div>
and [projFile] would just be the .pde file you’re trying to load.