Trying to include vanilla .js class

[vennsoh]

Hi, first of all I'd like to say this is the best p5 react wrapper so far! @and-who
I'm new to all these, so do give me some guidance here.

I'm trying to create create a simple particle system here.

My particle class
`
import p5 from "p5";

export default class Particle {
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = random(10, 30);
this.speed = 1;
}

move() {
this.x += random(-this.speed, this.speed);
this.y += random(-this.speed, this.speed);
}

display() {
ellipse(this.x, this.y, this.diameter, this.diameter);
}
}
`

My p5 sketch
`
import p5 from "p5";
import Particle from "./Particle";
global.p5 = p5;

export default function sketch(p) {
let bug1;
let bug2;

p.setup = () => {
p.createCanvas(710, 400);
bug1 = new Particle();
bug2 = new Particle();
};

p.draw = () => {
p.background(50, 89, 100);
bug1.move();
bug1.display();
bug2.move();
bug2.display();
};
}
`

But I can't seem to get it working...

[and-who]

Can you provide a bit more Information about what is not working?
Do you get any Errors? Can you see the Canvas?

[vennsoh]

Hi @and-who I've uploaded my code to https://github.com/vennsoh/react-p5
I'm getting...
Uncaught ReferenceError: random is not defined at new Particle (particle.js:20) at p5.p.setup (sketch3.js:14) at p5.eval (p5.js:49814) at p5.eval (p5.js:49751)

I suspect my Particle.js class doesn't know how to read the methods/functions from p5 lib. But I'm not sure how to make it work.

[shtrih]

@vennsoh Provide p5 context from sketch as an argument of Particle constructor. Next use functions from this context like p5context.ellipse(...).

Particle {
constructor(p5context) {
  this.p5context = p5context;
  ...
}

display() {
  this.p5context.ellipse(this.x, this.y, this.diameter, this.diameter);
}

bug1 = new Particle(p);

And you no need use import p5 from "p5"; global.p5 = p5; in your sketch.

[vennsoh]

@shtrih Thanks so much! It helps and it works!

[vennsoh]

@shtrih However when I try
export default class Particle { constructor(p5) { this.p5 = p5 this.x = this.p5.random(width) <-- The random method doesn't work?
I tried this.p5.random(), p5.random() both don't work?

[vennsoh]

Ah sorry ignore this, obviously it doesn't work, the "width" isn't a number.