{title}


Code RSS Feed

Code

Load processing.js sketch with ajax on user click

TOPICS:
  • Processing

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 
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.