TLDR: Is it better to have lots of instances of p5.js or keep switching the code in the global mode? Is there a way to treat a JS file as a single instance of p5.js without modifying the code inside the file?
I have several JS files, each as a self-contained p5.js sketch in global mode. My goal is to have a webpage with a parent object for each, say, a div. I would only like one sketch to run at a time, however.
There are two methods I can see that seem optimal for this situation. 1. Use global mode and dynamically change which code is being run and which div is the parent of the canvas. 2. Use instance mode and call noLoop() on the canvases that are not running.
Problems with option 1:
The best method I can find to do this would be to create a new script and add it to the DOM each time I want to switch the canvas, which seems like a bad solution. It also seems like using global mode may cause errors because remnants of the last program may still be in the global namespace. This method also means that the canvas will be reset if control is switched away from a file, then back.
Problems with option 2:
All the files are written assuming they use the global instance. I do not want to edit any of the files for two reasons: first, I will display the code later and I don’t want to store 2 versions, one for storing and one for displaying, and second, this could require changing tens of thousands of lines of code in separate files. This also seems like it might become very memory intensive if several sketches are loaded and kept in memory, even if they are not looping.
I also would prefer not to use iFrames if at all possible.
It seems like there is no good solution to this problem. Optimally, I would find a way to treat a js file as a single instance sketch, or find a way to dynamically switch which file a sketch is running from and reset that sketch.
It seems like this would be a fairly common use case, but I have spent the past few days searching and I can’t find a single good solution. Maybe I’m just bad at looking.
If anyone has an answer or some input, I would much appreciate it.
Notes:
Only one canvas must be running at once.
Several of the sketches are reasonably intensive.
The sketches must appear in separate divs.
Which canvas is displayed will be controlled by a separate controller js file based on a numerical index assigned to each div.