Sketch with classes implementation in a Reactjs project

p5.js Project Guidance
5

Well, it took a couple of days for me to learn enough Matter.js in order to change my “Bouncing Colorful Balls” sketch to rely on it instead for all movement & bouncing.

The file “sketch.mjs” can pass around both the World & p5 instance references to the files “ball.mjs” & “addCanvasWalls.mjs”!

Maybe you can find out a way to adapt the “technique” to your own React.js components.

Here’s the complete browser-runnable code:

And some extras which run 2 & 4 instances of it in the same page:

Notice that I use the extension “.mjs” instead of “.js” just to make it clear they’re true ES6 module files rather than plain vanilla script 1s.

1 Like