# Instance mode : accessing \`p5\` functions in an external class
**URL:** https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875
**Category:** Libraries
**Created:** [March 21, 2022, 12:06pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875 "2022-03-21T12:06:47Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@sylcha](https://discourse.processing.org/u/sylcha)
#### Post date: [March 21, 2022, 12:06pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875/1 "2022-03-21T12:06:47Z")
Hi everyone !
I’m using `p5.js` in a [project](https://yoctomath.com) (code [here](https://gitlab.com/sylcha/coolisse2)). I have to use `p5.js` in instance mode and attach the `p5` object to the canvas which is just working fine so far.
Now I would like to create a class in a separate folder `Chiffre.js` where I would like to use `p5` functionalities, like vectors for example, as in the one below:
```nohighlight
class Chiffre {
constructor(x, y, signe) {
this.signe = signe;
this.position = createVector(x, y);
this.vitesse = createVector(0, 0);
this.acceleration = createVector(0, 0);
}
}
export { Chiffre };
```
Now in the file `zone.js` where the `p5` object is created, I have something like this:
```nohighlight
import { Chiffre } from "./Chiffre.js";
export const sketch = (s) => {
s.chiffre = new Chiffre(20, 20, "2");
};
```
and in the page (actually, it’s a Vue component) where the `p5` object is used, I have something like this:
```nohighlight
import p5 from "p5";
import { sketch } from "../js/zone.js";
let d = new p5(sketch, "p5Canvas");
```
It does not work because the `createdVector` function is not recognized 🤔
```auto
ReferenceError: createVector is not defined
```
I cannot figure out how to access `p5` reference functions inside my class.
Does anybody has any idea how to solve this problem?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 21, 2022, 12:31pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875/2 "2022-03-21T12:31:23Z")
> [@sylcha](#):
>
> … where I would like to use p5 functionalities,
Request a p5 object as 1 of the constructor’s parameters:
> [@sylcha](#):
>
> ```auto
> class Chiffre {
> constructor(x, y, signe, p = p5.instance) {
> this.p = p;
> this.signe = signe;
> this.position = p.createVector(x, y);
> this.vitesse = p.createVector();
> this.acceleration = p.createVector();
> }
> }
>
> ```
And pass it when instantiating the class:
> [@sylcha](#):
>
> ```auto
> import { Chiffre } from "./Chiffre.js";
>
> export const sketch = s => {
> s.chiffre = new Chiffre(20, 20, '2', s);
> };
>
> ```
The code above should work if that parameter _s_ happens to be of datatype p5.
For more examples of classes which also request a p5 object take a look at the sketch below:
> [@Converting coding challenge 'Self-avoiding walk backtracing' from p5.js to Processing (Java)](https://discourse.processing.org/t/converting-coding-challenge-self-avoiding-walk-backtracing-from-p5-js-to-processing-java/35047/19):
>
> I’m back w/ another “Self Avoiding Walk II” conversion. This time I’m using the [CoffeeScript](https://coffeescript.org/) language which directly transpiles to JavaScript. Processing 2 used to have a [CoffeeScript Mode](https://github.com/fjenett/coffeescript-mode-processing) a long time ago and I’ve ended up learning it. When I later decided to learn [Python Mode](https://py.processing.org/reference/) to help folks here I’ve relied on my previous [CoffeeScript](https://coffeescript.org/) knowledge b/c they have similar syntax. The old [CoffeeScript Mode](https://github.com/fjenett/coffeescript-mode-processing) relied on the [Pjs](https://gotoloop.github.io/processing-js.github.io/reference/) library in order to run its transpiled sketch on the web. Which by the way is …
---
### Author:  [@sylcha](https://discourse.processing.org/u/sylcha)
#### Post date: [March 21, 2022, 12:38pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875/3 "2022-03-21T12:38:33Z")
Nice, it’s working but instead of
```nohighlight
this.position = p.createVector(x, y);
```
I replaced it with
```nohighlight
this.position = this.p.createVector(x, y);
```
Am I right or not ?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 21, 2022, 12:40pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875/4 "2022-03-21T12:40:36Z")
> [@sylcha](#):
>
> Am I right or not ?
Actually both yours & mine are correct inside the **constructor()**, b/c the parameter _p_ is the same as property _this.p_ (Chiffre::_p_): 😉
> [@sylcha](#):
>
> ```auto
> class Chiffre {
> constructor(x, y, signe, p = p5.instance) {
> this.p = p;
>
> ```
---
### Author:  [@sylcha](https://discourse.processing.org/u/sylcha)
#### Post date: [March 21, 2022, 12:46pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875/5 "2022-03-21T12:46:51Z")
You’re right. But in a `show()` function **outsite** the constructor: `this` is required though…
```nohighlight
show() {
this.p.text(this.signe, this.position.x, this.position.y);
}
```
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 21, 2022, 12:55pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875/6 "2022-03-21T12:55:10Z")
Yea, b/c it doesn’t make sense to pass a p5 object again for the **show()** method given it’s stored as a Chiffre property named _p_ already.
But in order to avoid repeating the keyword `this` all the time you can use JS object destructuring assignment syntax:
> **[Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring)**
>
> The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
> [@sylcha](#):
>
> ```auto
> show() {
> const { p, signe, position: { x, y } } = this;
> p.text(signe, x, y);
> }
>
> ```
---
### Author:  [@sylcha](https://discourse.processing.org/u/sylcha)
#### Post date: [March 21, 2022, 1:02pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875/7 "2022-03-21T13:02:02Z")
That’s really nice 🤩. Thanks for the tip!