I manaje to implement a basic p5 sketch into my react app successfuly but I’m struggling when I have multiple classes and say a third party library like Matterjs.
Here is my current Reactjs setup:
Sketch.js is a functional component, in it I have the usual setup and draw p5js methods with an import to a class and an import for the p5js and matterjs libraries, the problem I have is that whe I start to use classes from the matterjs lib in my class object things start to get messy very quickly as I have to pass a reference to the say Bodies object down to my class plus a reference to the p5js and so on.
Is there a guideline on how to best approach this type of projects? Is there a specific way to import the libraries and classes?
My struggle comes when I need to use other third party libraries and clases in my project, so I wondered if there is an easier way to work with such combination.
So on my project I import the Matterjs library and a Class, passing a p5 reference to the class is not a problem, as you suggested
But when the class needs to use some of the Matterjs objects and methods things start to get complicated. I already try to pass a reference of Matterjs, but I happen to import all sort of objects Bodies, Constrains, World and so on and still cant get it to work. I think I’ll have to keep all my code in the same Component and not border with a class since my skectch is very small.
Say your bouncing ball instance mode code, is a good example of my situation. If you make the ball a class in a separate file that uses Matterjs to bounce around will mirror my situation exaclty.
Again if there is a way to workaround this kind of situations I’ll love to know about it.
Since my project is a Reactjs “app” it does bundles the p5js and matterjs libraries in deed.
I had a look at your code (thank you for the time and effor to work on the examples friking legend you are), I noticed something on the Ball class: constructor(world, p = p5.instance) I’ve never seeing that before, do you mind elaborate?
My take on passing the p5js reference to the Ball class was: