# Help understanding Instance mode vs "normal mode"

**URL:** <https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262>\
**Category:** Beginners\
**Created:** [April 10, 2021, 4:02pm UTC](https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262 "2021-04-10T16:02:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [April 10, 2021, 4:02pm UTC](https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262/1 "2021-04-10T16:02:12Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

So i dont understand why to use instance mode. First i thought that putting “myContainer” i could add class and css position and integrate in a html page with other divs.  
But recently i read about cnv.class, cnv.elt and i dont see why to use instance mode.

```auto
let cnv = createCanvas(600,400);
cnv.class("small");

```

then in css file:

```auto
#small {
left: 40px;
border: solid;

```

thanks in advance

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 10, 2021, 4:58pm UTC](https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262/2 "2021-04-10T16:58:13Z")

</div>

first of all please use `</>` button to format your code. Also I suggest changing the category as Processing is for Java library 🙂

What you are trying to do can be, indeed, done without instance mode. [Here](https://p5js.org/reference/#/p5.Element) you can find some functions - for example, `parent` can set the parent `div` of the element (canvas) and `style` can directly set CSS style.

The reason why there is instance mode is that the default mode is not flexible enough to accommodate several sketches in one code. You cannot simply write two `setup` functions to create two sketches because the second one simply overwrites the first one. With instance mode, you can separate them in two different scopes and run as two independent sketches.

> **[Global and instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

Also the default mode has a problem that it “contaminates” the global scope. You can use functions like `createCanvas`, `background`, and hundreds of them without specifying the _scope_ at the cost of exposing everything to the global scope. This is ok as long as you use p5.js alone, but if you combine with other libraries, they may want to use the same name. Imagine, for example, another library X wants to define a function called `background`. Then it will be confusing if `background` belongs to p5.js or X. In fact, if you try to do so, p5.js will warn you like this:

> p5 had problems creating the global function “background”, possibly because your code is already using that name as a variable. You may want to rename your variable to something else.

By the way, the normal or default mode is called “global mode”.

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [April 11, 2021, 8:40am UTC](https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262/3 "2021-04-11T08:40:44Z")

</div>

I have edit the initial post with your suggestions.  
I thought as i wrote only two or three lines of code wasnt necessary to format it.

So the usual and normal mode is global mode.  
Then if i can get confussions with other libraries or i need more than one sketch in same html page then you should use instance mode. Am i right ?

Thanks for your help

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 11, 2021, 9:05am UTC](https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262/4 "2021-04-11T09:05:03Z")

</div>

Yes exactly!

(I would format the code even if it’s just one line because it won’t take you more than a few seconds to format and it makes so much easier for the readers 🙂 )