# Accessing \`p5.js\` instance from Vue file

**URL:** <https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537>\
**Category:** Libraries\
**Created:** [March 3, 2022, 11:13am UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537 "2022-03-03T11:13:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sylcha](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@sylcha](https://discourse.processing.org/u/sylcha)\
**Post date:** [March 3, 2022, 11:13am UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537/1 "2022-03-03T11:13:45Z")

</div>

Hi everyone,

I’m currently working on an app involving [Quasar](https://quasar.dev/) framework (which works in top of Vue) and **p5.js**. I have a vue where I want to insert a sketch (please, have a look to the code below). Following [these recommendations](https://github.com/processing/p5.js/wiki/Global-and-instance-mode), I use **p5.js** in _instance mode_ and created a `d` object for my sketch. It works fine and I have my sketch on screen.

But, when I tried to modified something in the instance `d` (as mentioned in the article, for example `d.background(0)`), it does not work. I have an error message in the console of my navigator.

Is anybody has an idea about the good way to access my sketch ?

Thanks in advance,  
Sylvain

* * *

**Error message**

```auto
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'background')
    at _.s.default.background (p5.min.js?b591:3:1)
    at Proxy.mounted (Nombres.vue?480d:90:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?9e79:164:1)
    at Array.hook. __weh.hook.__ weh (runtime-core.esm-bundler.js?9e79:2667:1)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?9e79:356:1)
    at flushJobs (runtime-core.esm-bundler.js?9e79:401:1)
s.default.background	@	p5.min.js?b591:3
mounted	@	Nombres.vue?480d:89
...

```

* * *

**Code of the project :**

```nohighlight
<template>
  <q-page padding class="bg-primary">
    <div class="column justify-center" style="min-height: inherit">
      <div class="row justify-center">
        <div id="canvasPlace" class="col">
          <div id="p5Canvas"></div>
        </div>
      </div>
      <div class="row justify-center text-white">
        <div class="col-1">
          <q-btn flat dense round icon="ti-arrow-left" aria-label="Gauche" />
        </div>
        <div class="col-1">
          <q-btn flat dense round icon="ti-reload" aria-label="Retour" />
        </div>
        <div class="col-1">
          <q-btn flat dense round icon="ti-arrow-right" aria-label="Droite" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
const P5 = require("p5");
import { Nombre } from "../js/Nombre.js";

// let p5;
let nb = new Nombre();
const sketch = (s) => {
  // p5 = _p5;
  let container;
  let fontFixed,
    tailleFonte = 160,
    couleurFond = [25, 118, 210],
    xText = 0,
    canvasHeight = 200;
  s.preload = () => {
    fontFixed = s.loadFont("/fonts/manti_fixed.otf");
  };
  s.setup = () => {
    container = document.getElementById("canvasPlace");
    s.createCanvas(container.clientWidth, canvasHeight);
    // Set text characteristics
    s.textFont(fontFixed);
    s.textSize(tailleFonte);
    s.textAlign(s.CENTER, s.CENTER);
    xText = container.clientWidth / 2;
    s.noLoop();
    nb.valeur = "12,7";
  };
  s.draw = () => {
    s.background(couleurFond);
    s.fill(250);
    s.text(nb.toString(), container.clientWidth / 2, canvasHeight / 2);
  };
  s.windowResized = () => {
    s.resizeCanvas(100, canvasHeight);
    s.resizeCanvas(container.clientWidth, canvasHeight);
  };
  s.keyPressed = () => {
    console.log("keyCode" + s.keyCode);
    // p5.clear();
    switch (s.keyCode) {
      case 37: // left arrow
        xText += -10;
        break;
      case 39: // right arrow
        xText += 10;
        break;
      case 84: // 't'
        console.log(nb.valeur);
        console.log(nb.toString());
        break;
    }
    s.text(nb.toString(), xText, 250);
    s.redraw();
  };
};
let d;
export default {
  name: "Nombres",
  mounted() {
    // NOTE: Use p5 as an instance mode
    d = new P5(sketch, "p5Canvas");
    // d.background(0);
  },
};
</script>

```

---

<div class="post-metadata">

**Author:** ![Metamoar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/metamoar/32/15778_2.png) [@Metamoar](https://discourse.processing.org/u/Metamoar)\
**Post date:** [March 3, 2022, 11:14pm UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537/2 "2022-03-03T23:14:55Z")

</div>

I haven’t used Vue/Quasar in some time so I don’t know of a proper solution, but fundamentally the problem is that you’re trying to use `d` before p5 has initiated. It takes a few “paint cycles” for the canvas to get created, the preload method to finish, and for all the methods like `background` to get added to the instance

For example, this is a bad solution but it demonstrates the point:

```auto
mounted() {
    d = new P5(sketch, "p5Canvas");
    setTimeout(() => {
      d.background(0);
    }, 1000);
  }

```

Maybe if you instantiate p5 in an earlier life cycle stage like `beforeMount` and then do your `d.background()` in `mounted` it might work.

I wish I had a better solution but hopefully this helps you get going in the right direction

* * *

**Edit:** Oh! Actually I’m assuming that you are doing `d.background(0)` inside `mounted` just to test if it works? Because otherwise I would think that you would just do it in the sketch callback if it needed to be done immediately

For example, if you used `d.background(0)` in any of the reactive methods (updated, observable change, etc) then it would totally work as `d` would have been instantiated by then

---

<div class="post-metadata">

**Author:** ![sylcha](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@sylcha](https://discourse.processing.org/u/sylcha)\
**Post date:** [March 4, 2022, 9:00am UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537/3 "2022-03-04T09:00:03Z")

</div>

OK. So I need to accord `p5` instance life cycle to the Vue life cycle… as a newbie in Vue, it’ll be tricky for me… 🤔

Is there a way to know when the `p5` instance is complete and ready to go? I could use `async` and `await` is so, don’t you think ?

---

<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:** [March 4, 2022, 1:45pm UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537/4 "2022-03-04T13:45:50Z")

</div>

> **[r/p5js - How to access p5 instance within an HTML page?](https://www.reddit.com/r/p5js/comments/t5neto/how_to_access_p5_instance_within_an_html_page/)**
>
> 3 votes and 1 comment so far on Reddit

---

<div class="post-metadata">

**Author:** ![Metamoar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/metamoar/32/15778_2.png) [@Metamoar](https://discourse.processing.org/u/Metamoar)\
**Post date:** [March 4, 2022, 5:36pm UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537/5 "2022-03-04T17:36:51Z")

</div>

Here’s a minimal example:

> **[minimal-vue-p5 - CodeSandbox](https://codesandbox.io/s/minimal-vue-p5-3y4q4w?file=%2Fsrc%2FApp.vue)**
>
> minimal-vue-p5 by Metamoar using @vue/cli-plugin-babel, p5, vue

```auto
<template>
  <div id="app">
    <div id="p5Canvas"></div>
  </div>
</template>

<script>
import p5 from "p5";

const sketch = (s) => {
  s.setup = () => {
    s.createCanvas(400, 400);
    s.background(0);
  };
};

let d;
export default {
  name: "App",

  beforeMount() {
    d = new p5(sketch, "p5Canvas");
  },

  mounted() {
    d.background("red");
  },
};
</script>

```

---

<div class="post-metadata">

**Author:** ![sylcha](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@sylcha](https://discourse.processing.org/u/sylcha)\
**Post date:** [March 5, 2022, 10:00am UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537/6 "2022-03-05T10:00:24Z")

</div>

Does not work for me. Black backround is successfully displayed but the red rise an error

```auto
TypeError: Cannot read properties of undefined (reading 'background')
    at _.s.default.background (p5.min.js?b591:3:1)
    at Proxy.mounted (Nombres.vue?480d:55:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?9e79:164:1)
    at Array.hook. __weh.hook.__ weh (runtime-core.esm-bundler.js?9e79:2667:1)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?9e79:356:1)
    at flushJobs (runtime-core.esm-bundler.js?9e79:401:1)

```

However, if I put the `d.background("red")` in a `setTimeout` function, it’s working:

```nohighlight
setTimeout(() => {
      d.background("red");
    }, 1000);

```