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
That’s not true! Just call parent() over the canvas, passing the target component’s reference:
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.
You need the element’s id. In the link’s example, the element <p>'s id is between.
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
Absolutely! When p5js is loaded, it checks for the existence of functions setup() or draw() in the global context.
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?
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.
Okay thanks! What exactly does “executing the p5js lib” mean? Do you mean including the command?
The order a <script> is loaded and then run.
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?
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.
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:
<src things, including p5js>As I had already advised:
Experiment loading your global mode “.js” sketch file before the “p5.min.js” library file.
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.
Preferably like this:
<script defer src=sketch.js></script>
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
Rather than this:
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>
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!
As I stated before, both orders work for global mode sketches under vanilla “.html” files.
You should read LABjs’ docs in order to find out how to control the order loaded scripts are executed.