Step 1: Graphic involving 3 different shapes
I kept this first task simple with three different shapes sitting on top a blue background:
void setup() {
size(600, 600);
background(673);
}
void draw() {
ellipse(100, 522, 72, 72);
fill(255);
triangle(18, 18, 18, 360, 81, 360);
fill(204);
rect(81, 81, 63, 63);
fill(102);
}
Step 2: The for loop
After implementing a “for loop” on the code to display the same code 100 times and in different colors and positions, this outcome seemed fairly predictable until comparing this response to the one derived from the draw() loop section. Running the code under the draw section caused images to continuously generate on the screen, whereas running the code under the for loop only performed the task once. This is made even more apparent after looking back at a description on Processing.org, which says “the loop continues until the test evaluates to false,” which would then stop the generation of images in my example rather than continue the process without such a command in play.
Step 3: Arrays
Introducing arrays to a code like this one and other more advanced codes is a drastic improvement in that it helped mitigate the more tedious aspects of the process by eliminating the need to manually enter a collection of previously written values. While the end result is the same when applying arrays to the same original code, it quickly became clear how much time and effort could be saved by beginning a project with an organized data set to return to later.
Step 4:
After adding an “if” statement to control the speed at which the different shapes traveled and randomizing some of their sizes I began to recognize how valuable arrays can be in effectively managing larger collections of data where manually altering the behavior of each asset would be overly cumbersome.
Documentation:
The main difference between setup() and draw() comes down to the commands they each give to the respective code. draw() operates similarly to a .gif, in that it plays and displays the code given to it almost like how a moview reel quickly flashes image after image to create something that appears to be moving. The setup() function is called only once per sketch and is used for general structuring of the code like size, frame rate, etc. With that distinction in mind, pasting the loop code in draw() as opposed to setup() will cause the loop function the keep restarting until the program itself is stopped. If written under setup(), the loop function will only play once, as it has not been prompted by the continuous recycling found from draw().
As stated earlier, arrays can have a similarly convenient effect as writing something down in shorthand, but to a higher degree because of the amount of information they can transmit into a few numbers. I bet people who make CGI for movies use a similar strategy when rendering big crowds of people, or maybe anything that requires a lot of moving parts, but not in a way that necessitates they all be independently and/or singularly dynamic from one another.