# P5js instance mode - how to manage functions?

**URL:** <https://discourse.processing.org/t/p5js-instance-mode-how-to-manage-functions/25369>\
**Category:** Coding Questions\
**Created:** [November 12, 2020, 1:26pm UTC](https://discourse.processing.org/t/p5js-instance-mode-how-to-manage-functions/25369 "2020-11-12T13:26:21Z")\
**Posts on this page:** 1\
**Showing post:** 4

<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:** [November 12, 2020, 9:18pm UTC](https://discourse.processing.org/t/p5js-instance-mode-how-to-manage-functions/25369/4 "2020-11-12T21:18:17Z")

</div>

> [@amygoodchild](#):
>
> `p.sendMyPoints = function() {`

B/c **sendMyPoints()** isn’t a p5 callback, like **setup()** or **draw()**, you don’t need to attach it to the p5 parameter _p_.

You can simply define it as an ordinary function: `function sendMyPoints() {`

> [@amygoodchild](#):
>
> I would like to move the functions and classes I am defining after **setup()** and **draw()** to separate JS files to keep them organised.

That’s very doable & highly recommended!

But if those code happen to access p5 members (such as **background()**, **ellipse()**, _width_, etc.) they’re gonna need to request a p5 argument from its caller.

Let’s say your **drawSomeStuffExample()** is defined outside your **rotateSketch()** callback.

Then you’re gonna need to add some p5 parameter to it:

```auto
function drawSomeStuffExample(p = p5.instance) {
  p.fill(100).square(50, 50, 100);
}

```

Then inside your _p_.**draw()** callback you can invoke function **drawSomeStuffExample()** like this:

```auto
  p.draw = function () {
    // stuff

    drawSomeStuffExample(p);

    // more stuff
  }

```

If you don’t pass any parameter to **drawSomeStuffExample()** it’s gonna assume you’re in global mode and gonna use the default value p5._instance_.

You can also take a look at my online sketch “Bouncing Colorful Balls” below:

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

In its file “ball.js” the class Ball’s **constructor()** requests a p5 instance:

```auto
class Ball {
  constructor(p = p5.instance) {
    this.p = p;
    this.pos = p.createVector();
    this.vel = p.createVector();
    this.reset();
  }

```

And inside its file “instance.js” a couple of Ball objects are instantiated like this:

```auto
for (let i = 0; i < NUM; balls[i++] = new Ball(p));

```

Obviously the passed argument _p_ is an instance of class p5 of our sketch “instance.js”:

```auto
new p5(p => {
  const NUM = 15, balls = Array(NUM).fill();
  let bg;

  p.setup = () => {

```

Notice on the file “global.js” we don’t need to pass anything to class Ball’s **constructor()**:

```auto
  for (let i = 0; i < NUM; balls[i++] = new Ball);

```

That’s b/c its **constructor()** defaults to p5._instance_ value for its parameter _p_ when it’s `undefined`.

Alternatively we can pass `this` when on global mode:

```auto
  for (let i = 0; i < NUM; balls[i++] = new Ball(this));

```

---

_[View the full topic](https://discourse.processing.org/t/p5js-instance-mode-how-to-manage-functions/25369)._