Something that seems a bit magic to me - is looking attheir codepen 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?
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.
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.
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.
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?