Dynamically loading ProcessingJS sketches

edited July 2015 in Share Your Work

This preliminary demo was prompted by @aparry's post: processing sketch inside lightbox.

This is pure Javascript code; but since it's intended to dynamically load ProcessingJS sketches I figured it's still relevant here :)
Note that most of the HTML/CSS is hacked from the default web-export from ProcessingJS and I've used demo sketches from the ProcessingJS site (credit where credit's due!).
All the action is currently embedded in the index.html file external script file.


  • Add <div class="clickme"> elements inside <div id="previews"> for each sketch you want to add to the page; including data- attributes for src files, sketch width and height. The div could contain an image preview ;)
  • Add source files to appropriate location in file structure (a folder path can be passed to src)

That's it: the script checks for clicks on the previews; unloads any previously running sketch; sets the canvas width/height and loads in the appropriate sketch. As per my answer to aparry's question: the tricky bit was loading/unloading the sketch; and the key piece to that puzzle was this post on stackoverflow.


  • proper cross-browser testing!
  • test with sketches with multi source files or data dependencies
  • implement dynamic loading of p5js sketches
  • code/CSS optimisation
  • externalise script
  • documentation...


  • edited July 2015

    Updated: externalised script file (this needs to be loaded after the 'previews' div) and basic css. The script now adds the overlay and canvas elements automatically; so all you need to add to your html is the previews div and elements that contain appropriate data-src attributes. There's currently no error checking - e.g. to ensure a valid filename is included - but that can wait :)

Sign In or Register to comment.