How to access p5js functions when using ES6 modules

p5.js Coding Questions
5

Thanks for your replies @GoToLoop and sorry for taking so long to get back on this… life intervened!

Your tips sent me in the correct direction, which put very simply was to set a setup and draw method on the global window object. I’m not sure quite where I got my previous approach from, but I copied it from somewhere, where instead the setup and draw methods were instantiated in something like the following way:

const sketch = processing => {
  processing.setup = () => {
    ...
  }

  processing.draw = () => {
    ...
  }
}

const myP5 = new p5(sketch);

I then had to iron out a few race conditions which I had been experiencing mainly as a result of my initial approach, but once I’d done that then it worked even better than before, plus I managed to clean the code of hundreds of ugly instances of (for example) this.processing.circle(... and replace them with a far more straightforward circle(...

Coincidentally, changing my approach to the one you recommended also solved the other mystery problem I’d been seeing, detailed in this post: Setup method runs twice - #3 by dansumption

BTW if you’re interested to see what I ended up making with all this new knowledge (and I’m very proud of it), here’s the music video I made entirely using p5js: https://youtu.be/rdbgckSmlAo

Thanks again!

1 Like