[Processing 3.5.3] #3 Processing Setup & Draw

"Get ready, go!"

A better material than a piece of paper for drawing, is several sheets of paper. This note covers the difference between setup and draw functions and how to use them.

---

△When you create a work with Processing, you basically use setup and draw functions. setup is a function that only works once when code is executed. On the other hand, draw works repeatedly after setup until the program finishes.

△Well, I'll draw a circle in the setup function first.

△Nice circle.

△One more? this one will be smaller.

△Nice circle too.

△This time, try to write the same code in the draw function.

△There is no difference in appearance. But its quite different. Let's check it out.

△Let's move a small circle to see exactly what the difference is between the two functions. Set the initial valuses of the variables x and y at the top for all functions and draw a circle into the setup. At the beginning of the note, we mentioned that the setup function only works once during code execution. So you can guess what the picture will look like, right?

△Very well. You can see that circles are drawn only once at the specified location when they first run. How about a draw?

△Try to run the same code by moving it to the draw function. The draw is repeated continuously until the end of the program. Then what kind of picture will we have?

△It's like drawing a thick line, right? As the function is repeatedly executed, the x and y values are continuously increased, so even the position of the small circle is continuously drawn with the movement.

△Why don't you put a new piece of paper on it every time the function starts? Let's add a background.

△Each time, a code was made to draw a large circle and a small circle on a new piece of paper. Technically, not 'new paper', but 'limewash'is a more accurate expression.

---

The setup function mainly sets the properties that are defined at the beginning of the program. It is not a difficult concept, so I'm sure you understood it very easily. if you're confused, try testing different codes by remembering the characteristics of setup and draw.

△Lastly, I will finish this note by drawing a small restless circle using the random function.

random(x, y);
//Returns a random (real number)value between x and y.

△Cute.

[Processing 3.5.3] #3 Setup & Draw fin.