Dynamically loading ProcessingJS sketches

blindfish

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.

Instructions:

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

TODO:

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

blindfish

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 :)