# Saving variables to global environment

**URL:** https://discourse.processing.org/t/saving-variables-to-global-environment/16054
**Category:** Libraries
**Created:** [December 2, 2019, 7:25pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054 "2019-12-02T19:25:39Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 2, 2019, 7:25pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/1 "2019-12-02T19:25:39Z")

</div>

Hi!  
I’m programming a psychological experiment using labjs and I want to add p5 functionalities to some of the screens. My understanding is that in order for things not to break, I need to use p5’s instance mode to make sure that my canvas is created within the right component.  
My question is: how do I save variables to the experiment global environment from within the “sketch” function I define?

Many thanks,  
-tanzor

---

<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: [December 2, 2019, 10:01pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/2 "2019-12-02T22:01:01Z")

</div>

> [@tanzor](#):
>
> , I need to use p5’s instance mode to make sure that my canvas is created within the right component.

That’s not true! Just call **parent()** over the canvas, passing the target component’s reference:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/parent)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

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

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 2, 2019, 10:31pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/3 "2019-12-02T22:31:17Z")

</div>

Thanks GoToLoop! That’s very helpful. For some reason I can’t get it to work this way but this may well have more to do with the specific interaction with labjs. E.g. I’m not sure that the argument that I’m providing to parent is indeed an html element or the right html element, and I’m not sure how to check that.

---

<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: [December 2, 2019, 10:37pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/4 "2019-12-02T22:37:32Z")

</div>

You need the element’s _id_. In the link’s example, the element `<p>`'s _id_ is _between_.

> **[id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)**
>
> The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 2, 2019, 10:51pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/5 "2019-12-02T22:51:06Z")

</div>

This makes sense.

The problem is that the in Labjs I’m not directly creating the html file, I’m writing a json file instead that is then interpreted by the library core to create an html file. So it’s not clear what is the component’s id. I tried to inspect the resulting html file and I think the component has no id?

But potentially there’s an even more profound problem: I included an alert within the setup function but I’m not seeing any alert coming up. I imagine that I should?

Thanks again!  
-Matan

---

<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: [December 2, 2019, 10:59pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/6 "2019-12-02T22:59:50Z")

</div>

> [@tanzor](#):
>
> I imagine that I should?

Absolutely! When p5js is loaded, it checks for the existence of functions **setup()** or **draw()** in the global context.

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 2, 2019, 11:09pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/7 "2019-12-02T23:09:06Z")

</div>

Okay so this is weird, because in the instance mode version things worked, so I imagine setup() got called. But when using it in global mode it’s not even called. What would prevent it from being called in global mode?

---

<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: [December 2, 2019, 11:18pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/8 "2019-12-02T23:18:44Z")

</div>

> [@tanzor](#):
>
> What would prevent it from being called in global mode?

In order for the p5js library to recognize a global mode sketch, the moment the lib is loaded, it needs to find either **setup()** or **draw()** as properties of the _window{}_ object.

If it can’t find any, it re-checks for them again when the page is fully loaded.

Under normal circumstances, it doesn’t matter whether the p5js lib is run before or after a global mode sketch.

However, if that LABjs happens to mess up how a web page loads, you’re better off executing the p5js lib after your global mode sketch.

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 2, 2019, 11:23pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/9 "2019-12-02T23:23:38Z")

</div>

Okay thanks! What exactly does “executing the p5js lib” mean? Do you mean including the command?

---

<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: [December 2, 2019, 11:26pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/10 "2019-12-02T23:26:26Z")

</div>

> [@tanzor](#):
>
> What exactly does “executing the p5js lib” mean?

The order a `<script>` is loaded and then run.

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 2, 2019, 11:30pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/11 "2019-12-02T23:30:06Z")

</div>

I mean, I don’t understand what you mean by “Under normal circumstances it doesn’t matter whether the p5js lib is run before or after a global mode sketch.”  
What exactly can be run before or after the sketch? Do you mean the \< src \> line in which I load the library?

---

<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: [December 2, 2019, 11:34pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/12 "2019-12-02T23:34:30Z")

</div>

> [@tanzor](#):
>
> I don’t understand what you mean by “Under normal circumstances…

The sketch from the link I’ve posted is a normal circumstance:  
Scripts are executed in the order their `<script>` tags are defined inside their “.html” file.

[Developer.Mozilla.org/en-US/docs/Web/HTML/Element/script](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/script)

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 2, 2019, 11:50pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/13 "2019-12-02T23:50:13Z")

</div>

This all thing is kind of hidden from me with the labjs interface. with labjs I control when scripts are executed with labjs’ own tailored tags, which I assume are then translated to generic ones. I inspected the resulting html file and I have “defer=“True””, which as far as I understand means that the script is run when the page is loaded.

I think the order things currently run is:

1. `<src things, including p5js>`
2. global sketch

---

<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: [December 2, 2019, 11:54pm UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/14 "2019-12-02T23:54:13Z")

</div>

As I had already advised:

> [@GoToLoop](#):
>
> However, if that LABjs happens to mess up how a web page loads, you’re better off executing the p5js lib after your global mode sketch.

Experiment loading your global mode “.js” sketch file before the “p5.min.js” library file.

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 3, 2019, 12:01am UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/15 "2019-12-03T00:01:12Z")

</div>

By “p5.min.js” do you mean the source line? e.g. `<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>`?

I’m sorry if this is a stupid thing to ask, I really don’t understand what you mean here.

---

<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: [December 3, 2019, 12:05am UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/16 "2019-12-03T00:05:40Z")

</div>

Preferably like this:

```auto
<script defer src=sketch.js></script>
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

```

Rather than this:

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

### Author: ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)
#### Post date: [December 3, 2019, 12:22am UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/17 "2019-12-03T00:22:43Z")

</div>

Thanks GoToLoop!  
So this is definitely working outside labjs, but I couldn’t get it to work inside it. Must be something about the very specific details of details of how labjs is implemented.  
Again, many thanks!

---

<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: [December 3, 2019, 12:28am UTC](https://discourse.processing.org/t/saving-variables-to-global-environment/16054/18 "2019-12-03T00:28:03Z")

</div>

> [@tanzor](#):
>
> So this is definitely working outside labjs,

As I stated before, both orders work for global mode sketches under vanilla “.html” files.

> [@tanzor](#):
>
> , but I couldn’t get it to work inside it.

You should read LABjs’ docs in order to find out how to control the order loaded scripts are executed.
