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