Re-initilizing instance of p5.js

p5.js
1

I’m working on a special use of p5.js, for hot-swapping sketches – this involves dynamically embedding a script with a new setup()/draw() which overrides the initial one. It’s working quite well, however I run into two main issues:

  • some settings are blending from one sketch to another, ie. rectMode() + WEBGL
  • if there’s a bug, p5 fails on render and have to refresh page.

Of course I should be using the instance mode of p5.js, then could probably destroy and re-create it… however I’m set on the friendliness and ease of coding in global mode so one doesn’t need a p.function() throughout code.

Does anyone know if/how one can re-initialize the global instance of p5.js??
Tried things like var p5 = new p5(); – but no luck.

2

This is exactly the kind of thing instance mode was meant for. Anything else is going to be pretty hacky.

3

Sure, totally get that the instance mode solves this – but what speaks for hacky, is not requiring the scope prefix… there’s gotta be a way. Essentially, should also be fine removing the global instance of p5.js and reloading it with the updated setup() + draw() in place. How might one go about doing that?? Was surprised I couldn’t find an init() function to the global kick things off on demand.

4

Once upon a time, there was this “Random p5.js Loader” sketch: :mage:

However, since when URL CodiceInutile.GitHub.io/website-dev/homepage.json ceased to exist, that sketch is no more. :cry:

Here’s a sample of what that “homepage.json” file used to be: :scream_cat:

[
  {
    "title": "Should display squares",
    "author": "Name of author",
    "description": "Lorem Ipsum",
    "kind": "javascript",
    "href": "https://codiceinutile.github.io/website-dev/js/hero/federico.js",
    "includes": [
      "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.dom.min.js"
    ]
  },
  {
    "title": "Should display circles",
    "author": "Name of author",
    "description": "Lorem ipsum",
    "kind": "javascript",
    "includes": [
      "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.dom.min.js"
    ],
   "href": "https://codiceinutile.github.io/website-dev/js/hero/alka.js"
  },
  {
    "title": "PixelDawn",
    "author": "Matteo Testa",
    "description": "Processing",
    "kind": "javascript",
    "includes": [
      "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"
    ],
   "href": "https://codiceinutile.github.io/website-dev/js/hero/matteo.js"
  },
   {
     "title"        : "Hypnotic lines",
     "author"       : "Federico Pepe",
     "description"  : "Un progetto di Federico Pepe",
     "url"         : "/project/2016/12/30/esempio_project.html",
     "href"         : "https://codiceinutile.github.io/website-dev//js/projects/test_1.js",
     "includes"     : [
       "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js",
       "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.dom.min.js"
     ]
   },
   {
     "title"        : "Retini",
     "author"       : "cybermarinella",
     "description"  : "p5",
     "url"         : "/project/2016/01/01/esempio_project_mari.html",
     "href"         : "https://codiceinutile.github.io/website-dev//js/projects/retini.js",
     "includes"     : [
       "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js",
       "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.dom.min.js"
     ]
   }
]
2 Likes
5

@GoToLoop thankyouverymuch!

That properly named p5RemoveHack() did the trick to remove all traces of the P5 instance and seeing your technique for re-loading the files, specifically re-linking p5.min + p5.dom = what I was missing (as I was only replacing the actual sketch script).

Here’s my hacky snippet which is working perfect for live-switching between a sketch with WEBGL and one without (testing by using text(), which unfortunately still doesn’t work in WEBGL mode):

function updateP5(){
    if(validCode){
        p5RemoveHack();
        document.getElementById("holdscript").innerHTML = "";

        var ps = document.createElement("script");
        ps.type = "text/javascript";
        ps.src = "includes/p5/p5.min.js";
        document.getElementById("holdscript").appendChild(ps);

        var ps2 = document.createElement("script");
        ps.type = "text/javascript";
        ps.src = "includes/p5/addons/p5.dom.min.js";
        document.getElementById("holdscript").appendChild(ps2);

        var s = document.createElement("script");
        s.type = "text/javascript";
        s.innerHTML = editor.getValue();
        document.getElementById("holdscript").appendChild(s);
        }
    }

// GoToLoop » https://codepen.io/GoSubRoutine/pen/ZBPjdP
function p5RemoveHack() {
    if (window.p5 && p5.instance) {
        p5.instance.remove();
        p5.instance = window.setup = window.draw = null;
    } else {
        const canv = document.querySelector('canvas');
        canv && canv.remove();
    }
}