# Combining classes and instance mode in p5js?

**URL:** <https://discourse.processing.org/t/combining-classes-and-instance-mode-in-p5js/38006>\
**Category:** Coding Questions\
**Created:** [July 17, 2022, 6:18pm UTC](https://discourse.processing.org/t/combining-classes-and-instance-mode-in-p5js/38006 "2022-07-17T18:18:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![basicvisual](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Post date:** [July 17, 2022, 6:18pm UTC](https://discourse.processing.org/t/combining-classes-and-instance-mode-in-p5js/38006/1 "2022-07-17T18:18:41Z")

</div>

Hi recently I came across the topic of running sketches in p5js in an instance mode. I had been able to draw shapes and do basic visualization using the instance mode. However I am quite confused when it comes in dealing with classes and instance mode. For example I am trying to simulate particles , using instance mode. How is the syntax usually with classes when dealing with the instance mode? For example the particle system is defined in `particle.js` as follows.

```auto
class Particle {
  constructor() {
    this.pos = p5.createVector(0,0,0);
    this.vel = p5.Vector.random3D().normalize().mult(random(4,6));
  }
  
  update() {
    this.p.pos.add(this.vel);
  }
  draw(){
    push();
    noStroke();
    fill(255);
    translate(this.pos.x,this.pos.y,this.pos.z);
    box(10,10,10);
    pop()
  }
}
```

---

<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:** [July 17, 2022, 6:37pm UTC](https://discourse.processing.org/t/combining-classes-and-instance-mode-in-p5js/38006/2 "2022-07-17T18:37:30Z")

</div>

> [@basicvisual](#):
>
> How is the syntax usually with classes when dealing with the instance mode?

> [@Make class get all functions of p5.js](https://discourse.processing.org/t/make-class-get-all-functions-of-p5-js/12558/2):
>
> It doesn’t seem you’re trying to expand p5js’ API, but rather you wanna access its API from inside your class, right? If you’re using the instance mode style approach: [Global and instance mode · processing/p5.js Wiki · GitHub](http://Github.com/processing/p5.js/wiki/Global-and-instance-mode) Your classes are gonna need to request the current sketch’s p5 reference in their constructor, something like this: class Snake { constructor(p) { this.p = p || p5.instance; } display() { const { p } = this; p.fill(0xff).circle(p.width - 50 \>\> 1, p…