# How i extends class in p5.js?

**URL:** <https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894>\
**Category:** Coding Questions\
**Created:** [June 12, 2018, 11:56am UTC](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894 "2018-06-12T11:56:22Z")\
**Posts on this page:** 1\
**Showing post:** 13

<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:** [June 16, 2018, 6:52pm UTC](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894/13 "2018-06-16T18:52:48Z")

</div>

> [@kfrajer](#):
>
> This concept of global vs. instance modes is common in JS?

This is a Processing concept thingy! Our “Global Mode” approach is strange to JS world! 😱

Basically, it auto instantiates, then dumps & binds the whole p5 class to the global scope, which allows us to access them all w/o using the dot `.` operator. 🤡

> [@kfrajer](#):
>
> With instance mode, you create your own scope, right?

Yup! And that’s the standard way most apps do in the JS world! 😏

> [@kfrajer](#):
>
> That is what allows us to work with several instances.

Correct. However, we still can have multiple p5 “global mode” instances by placing them all inside separate `<iframe>` tags, like I did below: 🤑

- [https://GoSubRoutine.GitHub.io/Ball-in-the-Chamber](https://GoSubRoutine.GitHub.io/Ball-in-the-Chamber)
- [GitHub - GoSubRoutine/Ball-in-the-Chamber: JS Native Modules coded in TS & CS](https://GitHub.com/GoSubRoutine/Ball-in-the-Chamber)

> [@kfrajer](#):
>
> … it is enough to define a class to be able to have this `instance mode` feature?

Do you mean my “Class p5 Extended” hack example? 🤔

B/c we have to pass our function sketch as its argument: `new p5Plus(mySketch);`  
That sketch needs to be using the “instance mode” approach. 😶

---

_[View the full topic](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894)._