# Sketch with classes implementation in a Reactjs project

**URL:** <https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358>\
**Category:** Project Guidance\
**Created:** [January 26, 2020, 8:47pm UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358 "2020-01-26T20:47:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nardove](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nardove/32/7936_2.png) [@nardove](https://discourse.processing.org/u/nardove)\
**Post date:** [January 26, 2020, 8:47pm UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/1 "2020-01-26T20:47:38Z")

</div>

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?

Any help will be much appreciated.

// END OF LINE

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 26, 2020, 10:11pm UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/2 "2020-01-26T22:11:05Z")

</div>

> [@nardove](#):
>
> … and an `import` for the p5js and matterjs libraries,

Given p5js isn’t a JS module, but instead it is distributed as a normal JS file, I don’t think we can use the JS keyword [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) for it. 😕

> [@nardove](#):
>
> … plus a reference to the p5js and so on.

If you make a `class` that needs to request a specific object reference many times, it’s much simpler to request that from its constructor and store it as 1 of its properties. 💡

In the sketch link below, the `class` Ball asks for a p5 object as its constructor’s parameter; then stores it as property _p_: 🤓

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22>
>
> There are more than three files. show original

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22#file-ball-js-L1-L7>
>
> There are more than three files. show original

---

<div class="post-metadata">

**Author:** ![nardove](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nardove/32/7936_2.png) [@nardove](https://discourse.processing.org/u/nardove)\
**Post date:** [February 2, 2020, 10:39am UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/3 "2020-02-02T10:39:44Z")

</div>

Hi @GoToLoop thank you for your reply 👍

I feel I didn’t explain my problem very well. I’m not an expert in Javascript so some of its quirks are still a mistery to me hence my post. p5js can be imported, here is an example of a bare-bones component.

```auto
import p5 from 'p5';

export default function P5Component() {
	const sketch = (p) => {
		p.setup = () => {
			p.createCanvas(window.innerWidth, window.innerHeight);
			p.background('#fcfcfc');
		};

		p.draw = () => {
			p.background('#fcfcfc');
			p.fill(20, 20);
			p.ellipse(p.mouseX, p.mouseY, 50, 50);
		};
	};
	new p5(sketch, window.document.getElementById('canvasContainer'));
	return null;
}

```

You must [install the package](https://www.npmjs.com/package/p5) on to your React project.

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](https://brm.io/matter-js/) 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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 5, 2020, 4:10am UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/4 "2020-02-05T04:10:08Z")

</div>

> [@nardove](#):
>
> p5js can be imported, here is an example of a bare-bones component.

The statement `import p5 from 'p5';` won’t work in a browser environment, b/c it lacks the extension name for the imported file.

That is, it needs to be ‘p5.js’ instead of just ‘p5’.

In the future, browsers may be able to accept extension-less filenames.

Also, even using the full filename, we’d still need to add its path to its name.

That is, special folders like ‘node\_modules/’ are meaningless to a browser.

So instead of just ‘p5.js’, we’re gonna need something like:  
`import p5 from '/node_modules/p5/lib/p5.js';`.

And lastly, both ‘p5.js’ & ‘matter-js.js’ are plain JS library files, not actual ES6 modules; b/c they lack the keyword statements `export` or `import` inside them.

Therefore we can’t use the keyword `import` on neither of them b/c they don’t expose anything using actual ES6 syntax!

Just assume both p5 & Matter are already available in the global context once they’re loaded like this:

```auto
<script defer src=https://Unpkg.com/p5></script>
<script defer src=https://Unpkg.com/matter-js></script>

```

> [@nardove](#):
>
> You must [install the package](https://www.npmjs.com/package/p5) on to your React project.

My guess your project got bundled utilities which are able to convert your bare-bones component into an actual browser-runnable code; which makes them a challenge for me to debug.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 5, 2020, 4:33am UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/5 "2020-02-05T04:33:38Z")

</div>

> [@nardove](#):
>
> If you make the Ball a class in a separate file that uses Matter.js to bounce around will mirror my situation exactly.

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:

> **[Matter Js Bouncing Colorful Balls](https://glitch.com/~matter-js-bouncing-colorful-balls)**
>
> Your very own basic web page, ready for you to customize.

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

- [https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/two.html](https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/two.html)
- [https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/four.html](https://Matter-js-Bouncing-Colorful-Balls.Glitch.me/four.html)

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.

---

<div class="post-metadata">

**Author:** ![nardove](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nardove/32/7936_2.png) [@nardove](https://discourse.processing.org/u/nardove)\
**Post date:** [February 5, 2020, 8:01am UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/6 "2020-02-05T08:01:54Z")

</div>

@GoToLoop LEGEND!

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:

```auto
constructor(world, p) {
    this.world = world;
    this.p = p;
}

```

and then **this.p.[method]** every time I need a p5js function like: `this.p.ellipse(this.p.mouseX, this.p.mouseY);`

But your implementation is cleaner with `p5.instance`. I take is a feature of p5js only right?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 5, 2020, 8:42am UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/7 "2020-02-05T08:42:15Z")

</div>

> [@nardove](#):
>
> `constructor(world, p = p5.instance)` I’ve never seen that before, do you mind elaborate?

Those are parameters w/ a default value, which takes place when the parameter is `undefined`.

That is, if we pass an argument to the parameter _world_ only, the parameter _p_ is gonna be initialized w/ the value p5._instance_ instead.

> [@nardove](#):
>
> But your implementation is cleaner with p5._instance_. I take it is a feature of p5js only, right?

Actually p5._instance_ is irrelevant for this sketch b/c it holds the p5 reference of a global mode sketch.

Since this Matter.js sketch version is coded in instance mode only, p5._instance_ is always `undefined`.

Therefore we’ve always gotta pass the sketch’s p5 reference as the 2nd argument.

The original non-Matter.js had both global & instance mode versions.

So the global mode sketch could opt out to pass the 2nd argument if it chooses so.

> [@nardove](#):
>
> Since my project is a Reactjs “app” it does bundles the p5js and matterjs libraries indeed.

BtW, p5js got a 3rd-party library called p5-matter which bundles Matter.js:  
[PalmerPaul.com/p5-matter](http://PalmerPaul.com/p5-matter)