Part 2 of this revision of what we have already learned in the first semester concerns the fact that the code in Processing is placed in two different sections. Moreover, some more basic functions are explained that are needed in order to create the base for a visual outcome.
There exist two sections in Processing that are called setup and draw. The difference between the two of them is that setup only executes the code once and draw executes it over and over again. The outcome of an algorithm therefore depends on the placement of the code.
For example: If the code of the following shape (ellipse(x = x+1, 20, 15, 15);) was to be placed in setup, Processing would draw the circle once. By giving the program previously in the code a clue about what x is, setup is going to add 1 to this number and place the circle at this x position. However, if the same exact code was to be placed in draw, Processing would draw the circle over and over again. And because with every repetition x is increased by 1, the circle starts to move to the right.
EXAMPLE:
void setup() {
…
}
void draw() {
…
}
In order to create the base for a visual output, one should define the size of the canvas. This can be done according to the example below and has to be inserted two arguments, the width and the height of the canvas. The size function is typically going into the setup section. Another aspect, that one might define, is the background colour. The arguments of this function are the same as for the fill function, explained in the previous blog post. This line of code can be put either into setup or into draw. According to where it is placed, it has a different outcome. If there was an animation going on (like in the example with the moving circle), all the different frames of that animation will be visible, if the background is defined in setup. If it is placed in draw, however, only the current frame is visible because the background, too is drawn anew with every frame which then hides the previous frame of the animation.
EXAMPLE:
void setup() {
size(800, 600);
}
void draw() {
background(0);
}
https://processing.org/reference/
https://www.youtube.com/playlist?list=PLzJbM9-DyOZyMZzVda3HaWviHqfPiYN7e
