# Re-initilizing instance of p5.js

**URL:** <https://discourse.processing.org/t/re-initilizing-instance-of-p5-js/6384>\
**Category:** p5.js\
**Created:** [December 6, 2018, 10:47pm UTC](https://discourse.processing.org/t/re-initilizing-instance-of-p5-js/6384 "2018-12-06T22:47:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [December 6, 2018, 10:47pm UTC](https://discourse.processing.org/t/re-initilizing-instance-of-p5-js/6384/1 "2018-12-06T22:47:20Z")

</div>

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](https://github.com/processing/p5.js/wiki/Global-and-instance-mode), 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.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [December 6, 2018, 11:06pm UTC](https://discourse.processing.org/t/re-initilizing-instance-of-p5-js/6384/2 "2018-12-06T23:06:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [December 6, 2018, 11:22pm UTC](https://discourse.processing.org/t/re-initilizing-instance-of-p5-js/6384/3 "2018-12-06T23:22:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2018, 11:42pm UTC](https://discourse.processing.org/t/re-initilizing-instance-of-p5-js/6384/4 "2018-12-06T23:42:42Z")

</div>

Once upon a time, there was this “Random p5.js Loader” sketch: 🧙  
https://codepen.io/GoSubRoutine/embed/preview/ZBPjdP?height=300&slug-hash=ZBPjdP&default-tabs=js,result&host=https://codepen.io

However, since when URL [CodiceInutile.GitHub.io/website-dev/homepage.json](http://CodiceInutile.GitHub.io/website-dev/homepage.json) ceased to exist, that sketch is no more. 😢

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

```json
[
  {
    "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"
     ]
   }
]

```

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [December 7, 2018, 12:31am UTC](https://discourse.processing.org/t/re-initilizing-instance-of-p5-js/6384/5 "2018-12-07T00:31:05Z")

</div>

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

```auto
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();
    }
}

```