How does the setup() function in p5.js work?

Question

In my HTML code I have

<a href="#..." onclick="my_function()" id="id-ea">Click me!</a>

Once "Click me!" is clicked, my_function() is called and in that program, I also have the setup() function. What is the execution order once my_function() is called?

Would it be my_function() followed by setup()? Or setup() followed by my_function()?

var global_variable;
function setup(){
    // setup using global_variable
}

function my_function(){
    // update global_variable
}

If `my_function()` calls `setup()` then that is the order of execution. What is the issue? — MonkeyZeus, Jul 09 '19 at 19:58
From this answer https://stackoverflow.com/questions/39711941/p5-js-manually-call-setup-and-draw, it's stated that a function should never call `setup()` manually. I'm wondering at what point in execution, `setup()` is executed if it is — Kibae, Jul 09 '19 at 20:00

score 2 · Answer 1 · answered Jul 10 '19 at 10:59

setup() is a Processing function, which is executed just once when the program starts up and should be used for program initialization, e.g. screen size, loading media, etc. There can only be one setup() function for each program and it shouldn't be called again after its initial execution.
my_function() is a function created by you and will only be called when you call it somewhere in your code.
The order will thus go as setup() -> my_function().

score 1 · Answer 2 · answered Jul 09 '19 at 21:51

Why not try it out and see what happens? A couple print statements would give you your answer:

function setup(){
    console.log('setup');
}

function my_function(){
    console.log('my_function');
}

But generally I would say that setup() will be called first, because it's automatically called by P5.js at load time. Your my_function function is only called when the user clicks a link, long after the page has loaded.

But you don't have to take my word for it. Run it and see what happens! :)

score 0 · Answer 3 · answered Aug 19 '20 at 16:20

JavaScript is a single-thread language, which means it will only execute one block(function) of code at a given time. JavaScript uses stacks to execute code.

A stack is kind of like an array. But a stack doesn't have any index. You can only execute the last/recent element or delete the last/recent element. So on a stack, you can only perform two operations push and pop.

Let's look at a piece of code:

function one(){
 two();
}
function two() {
 three();
}
function three() {
 console.trace(“Lets Call The Stack”);
}
one();

So the stack flow will be like this: Stack = [ one, two, three ] Once three() is executed, then the stack will look like this: Stack = [ one, two ]; After two() is executed then it becomes like this: Stack = [ one ] And lastly when one() is executed then the event loop which simply means looping through the stack and executing the last block of code/function is stopped.

Now, in case of p5.js/Processing, the setup() function is called and executed but the draw() function keeps being added to the stack and the event loop keeps looping through the stack and executed the last block/function which is, in this case, draw().

Another thing is you can't declare setup() or draw() inside another function. The have to declared independently and separately. I had to waste a lot of trying to do this, but couldn't find anything.

score 0 · Answer 4 · answered Jan 27 '23 at 00:20

In P5, the setup function is called automatically one time when your program starts. This is a function that you should create so that your program is initialized correctly. Here are some important facts found in the docs:

[setup is] used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution.

Here are the P5 docs and reference for setup

Example:

function setup() {
    console.log('setup is called');
    createCanvas(400, 400);
}

You will probably also want to read the documentation for the draw function.

Here is a list of all the structure functions as found on the main reference index for the docs:

How does the setup() function in p5.js work?

4 Answers4