How to precompile processingjs sketch to speed loa

Question

The loading times of my processingjs webpage are getting pretty hairy. How can I precache the compilation of processing to javascript?

It would be acceptable for my application to compile on first entering the webpage (maybe keeping the result in the local store?) and then reuse the compilation on subsequent loads.

Answer 1

There's two ways to drive down load time as experienced by the user. The first is using precompiled sketches, which is relatively easy: github repo, or even just download the master branch using github's download button (https://github.com/processing-js/processing-js), and then look for the "./tools/processing-helper.html" file. This is a helper page that lets you run or compile sketches to the JavaScript source that Processing.js uses. You will still need to run this alongside Processing, since it ties into the API provided, but you can use the "API only" version for that. Take the code it generates, prepend "var mySketch = ", and then do this on your page:

<script src="processing.api.js"></script>
<script>
function whenImGoodAndReady() {
  var mySketch = (function.....) // generated by Processing.js helper
  var myCanvas = document.getElementById('mycanvas');
  new Processing(myCanvas, mySketch);
}
</script>

Just make sure to call the load function when, as the name implies, you're ready to do so =)

The other is to do late-loading, if you have any sketches that are initially off-screen.

There's a "lazy loading" extension in the full download for Processing.js - you can include that on your page, and it will make sketches load only once they're in view. That way you don't bog down the entire page load.

Alternatively, you can write a background loader that does the same thing as the lazy loading extension: turn off Processing.init, and instead gather all the script/canvas elements that represent Processing sketches, then loading them on a timeout using something like

var sketchList = [];

function findSketches() {
  /* find all script/canvas elements */
  for(every of these elements) {
    sketchList.append({
      canvas: <a canvas element>,
      sourceCode: <the sketch code>
    });
  }
  // kickstart slowloading
  slowLoad();
}

function slowLoad() {
  if(sketchList.length>0) {
    var sketchData = sketchList.splice(0,1);
    try {
      new Processing(sketchData.canvas, sketchData.sourceCode);
      setTimeout(slowLoad, 15000); // load next sketch in 15 seconds
    } catch (e) { console.log(e); }
  }
}

This will keep slow-loading your sketches until it's run out.