# What's going on under the hood with p5js?

**URL:** <https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703>\
**Category:** p5.js\
**Created:** [November 19, 2018, 8:01am UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703 "2018-11-19T08:01:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidj](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davidj/32/1920_2.png) [@davidj](https://discourse.processing.org/u/davidj)\
**Post date:** [November 19, 2018, 8:01am UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/1 "2018-11-19T08:01:13Z")

</div>

I’m new to processing/p5.js, but not new to javascript/web development. If you’re interested, [here’s a generative art project I created with a library I created from scratch - based on HTML5 canvas](https://geoplanets.io).

Something that seems a bit magic to me - is looking at[their codepen](https://codepen.io/p5js/pen/wreBKy) example - all you seem to do is declare some functions - (setup, draw), etc and then it seems like p5.js will be aware of those functions, at which point it will - somehow? declare the functions that are being used inside of them? (‘rect’ etc).

What’s going on here? As far as I can see in their example codepen - all the functions aren’t global objects.

So is p5.js grabbing the setup methods etc and then calling them in its own context?

Is there some documentation around the p5 lifecycle?

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [November 19, 2018, 8:28am UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/2 "2018-11-19T08:28:51Z")

</div>

p5.js is an open project, and you can see the code and documentation on the code here:

> **[processing/p5.js](https://github.com/processing/p5.js?files=1)**
>
> 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...

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [November 19, 2018, 8:37am UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/3 "2018-11-19T08:37:10Z")

</div>

I’m not exactly sure what you don’t understand about the functions. In the p5.dom library functions like setup and draw are defined. When you use them, you are calling those functions from the dom. But the dom mostly controls how and how often the function should run. For example if you use setup() it will run once only at the very start of your sketch. If you use draw() it will run continuosly unless told otherwise. If you use mousePressed() it runs once when a mousebutton is pressen. But you have to write what should happen at each event.

---

<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 19, 2018, 8:56am UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/4 "2018-11-19T08:56:34Z")

</div>

> [@davidj](#):
>
> … all you seem to do is declare some functions - (setup, draw), etc and then it seems like p5.js will be aware of those functions, …

- When the “p5.js” file is loaded & run, it checks out whether **setup()** or **draw()** exist in the global scope.
- If at least 1 of them does, the whole p5 class’ properties are dumped into the global scope _window_ as well, and 1 instance of p5 is automatically created.
- If not, another recheck is postponed until the page is fully loaded.

---

<div class="post-metadata">

**Author:** ![davidj](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davidj/32/1920_2.png) [@davidj](https://discourse.processing.org/u/davidj)\
**Post date:** [November 19, 2018, 11:33pm UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/5 "2018-11-19T23:33:01Z")

</div>

Ah - of course one thing that confused me is that codepen uses an iframe - and manually writing  
`console.log(window)` in the console is going to show a different result to a console.log in the JS editor.

---

<div class="post-metadata">

**Author:** ![davidj](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davidj/32/1920_2.png) [@davidj](https://discourse.processing.org/u/davidj)\
**Post date:** [November 19, 2018, 11:46pm UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/6 "2018-11-19T23:46:01Z")

</div>

I think what is concerning me most - is the use of global variables - what if I’m also using another library that makes some use of globals? Have people run into issues around global conflicts?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [November 20, 2018, 12:05am UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/7 "2018-11-20T00:05:56Z")

</div>

If global scope is a concern, then you can always use [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).

---

<div class="post-metadata">

**Author:** ![davidj](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davidj/32/1920_2.png) [@davidj](https://discourse.processing.org/u/davidj)\
**Post date:** [November 20, 2018, 12:20am UTC](https://discourse.processing.org/t/whats-going-on-under-the-hood-with-p5js/5703/8 "2018-11-20T00:20:10Z")

</div>

Fantastic. Thanks - that’s just what I’m looking for.