preload() Called directly before setup(), the preload() function is used to handle asynchronous loading of external files. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls should be inside preload (loadImage, loadJSON, loadFont, loadStrings, etc). By default the text “loading…” will be displayed. To make your own loading page, include an HTML element with id “p5_loading” in your page.
setup() The setup() function is called once when the program starts.
It’s 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.
Note: Variables declared within setup() are not accessible within other functions, including draw().
draw() Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called.
Note if noLoop() is called in setup(), draw() will still be executed once before stopping. draw() is called automatically and should never be called explicitly.
It should always be controlled with noLoop(), redraw() and loop().
After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once, and loop() will cause the code inside draw() to resume executing continuously.
The number of times draw() executes in each second may be controlled with the frameRate() function.
There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed().
Sometimes, you might have an empty call to draw() in your program, as shown in the above example.
It is important to note that the drawing coordinate system will be reset at the beginning of each draw() call.
If any transformations are performed within draw() (ex: scale, rotate, translate, their effects will be undone at the beginning of draw(), so transformations will not accumulate over time.
On the other hand, styling applied (ex: fill, stroke, etc) will remain in effect.
remove() Removes the entire p5 sketch.
This will remove the canvas and any elements created by p5.js.
It will also stop the draw loop and unbind any properties or methods from the window global scope.
It will leave a variable p5 in case you wanted to create a new p5 sketch.
If you like, you can set p5 = null to erase it.
While all functions and variables and objects created by the p5 library will be removed, any other global variables created by your code will remain.
noLoop() Stops p5.js from continuously executing the code within draw().
If loop() is called, the code in draw() begins to run continuously again.
If using noLoop() in setup(), it should be the last line inside the block.
When noLoop() is used, it’s not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed().
Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly.
This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.
Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified.
Otherwise, the sketch would enter an odd state until loop() was called.
loop() By default, p5.js loops through draw() continuously, executing the code within it.
However, the draw() loop may be stopped by calling noLoop().
In that case, the draw() loop can be resumed with loop().
pop()
push() The push() function saves the current drawing style settings and transformations, while pop() restores these settings.
Note that these functions are always used together.
They allow you to change the style and transformation settings and later return to what you had.
When a new state is started with push(), it builds on the current style and transform information.
The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)
push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().
redraw() Executes the code within draw() one time.
This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.
In structuring a program, it only makes sense to call redraw() within events such as mousePressed().
This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).
The redraw() function does not work properly when called inside draw().
To enable/disable animations, use loop() and noLoop().
In addition you can set the number of redraws per method call.
Just add an integer as single parameter for the number of redraws.
