# Make class get all functions of p5.js

**URL:** https://discourse.processing.org/t/make-class-get-all-functions-of-p5-js/12558
**Category:** Coding Questions
**Created:** [July 7, 2019, 5:12am UTC](https://discourse.processing.org/t/make-class-get-all-functions-of-p5-js/12558 "2019-07-07T05:12:13Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Choky](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@Choky](https://discourse.processing.org/u/Choky)
#### Post date: [July 7, 2019, 5:12am UTC](https://discourse.processing.org/t/make-class-get-all-functions-of-p5-js/12558/1 "2019-07-07T05:12:13Z")

</div>

When creating a class I cannot make it so the class gets all the functions of p5.js library.  
Can anyone help me?  
it says fill is not defined  
code :

var game = function(g) {

```
g.setup = function() {
    g.createCanvas(400,400);
    g.background(0);
    g.snake = new Snake();
    g.snake.test();
}

```

}  
class Snake {

```
test() {
    fill(255); //this line throws error (Uncaught ReferenceError: fill is not defined) 
    ellipse(0,0,100); }

```

}  
var mySnake = new p5(game);

---

<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 9, 2019, 7:10am UTC](https://discourse.processing.org/t/make-class-get-all-functions-of-p5-js/12558/2 "2019-07-09T07:10:23Z")

</div>

> [@Choky](#):
>
> When creating a class I cannot make it so the class gets all the functions of p5.js library.

> [@Choky](#):
>
> It says _fill_ is not defined.

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:

```auto
class Snake {
  constructor(p) {
    this.p = p || p5.instance;
  }

  display() {
    const { p } = this;
    p.fill(0xff).circle(p.width - 50 >> 1, p.height - 50 >> 1, 100);
    return this;
  }
}

new p5(p => {
  let snake;

  p.setup = () => {
    p.createCanvas(400, 400);
    snake = new Snake(p);
  };

  p.draw = () => {
    p.background(0);
    snake.display();
  };
});

```

Here’s a more complete online sketch to show you better how it works:

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

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