Instance mode : accessing `p5` functions in an external class

[sylcha]

Hi everyone !

I’m using p5.js in a project (code here). 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:

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:

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:

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

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?

[GoToLoop]

@sylcha

… where I would like to use p5 functionalities,

Request a p5 object as 1 of the constructor’s parameters:

@sylcha

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

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)

I’m back w/ another “Self Avoiding Walk II” conversion. This time I’m using the CoffeeScript language which directly transpiles to JavaScript. Processing 2 used to have a CoffeeScript Mode a long time ago and I’ve ended up learning it. When I later decided to learn Python Mode to help folks here I’ve relied on my previous CoffeeScript knowledge b/c they have similar syntax. The old CoffeeScript Mode relied on the Pjs library in order to run its transpiled sketch on the web. Which by the way is …

[sylcha]

Nice, it’s working but instead of

this.position = p.createVector(x, y);

I replaced it with

this.position = this.p.createVector(x, y);

Am I right or not ?

[GoToLoop]

@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

class Chiffre {
  constructor(x, y, signe, p = p5.instance) {
    this.p = p;

[sylcha]

You’re right. But in a show() function outsite the constructor: this is required though…

show() {
    this.p.text(this.signe, this.position.x, this.position.y);
  }

[GoToLoop]

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

@sylcha

show() {
  const { p, signe, position: { x, y } } = this;
  p.text(signe, x, y);
}

[sylcha]

That’s really nice . Thanks for the tip!