Processing – Grid/For Loops Animation


In this blog, I am going to write about what I learnt in this weeks Processing workshop, which was about grids and for loops animation.

Processing describes the ‘for’ statement as:

“Controls a sequence of repetitions. A basic for structure has three parts: init, test, and update. Each part must be separated by a semicolon (;). The loop continues until the test evaluates to false. When a for structure is executed, the following sequence of events occurs: 

1. The init statement is run.
2. The test is evaluated to be true or false.
3. If the test is true, jump to step 4. If the test is false, jump to step 6.
4. Run the statements within the block.
5. Run the update statement and jump to step 2.
6. Exit the loop.” – ( 2015)

What we take from this is how nested floops and conditional statements runs every frame, this can be used and developed further to create more intricate designs you it gives you the ability to not have to code every individual square, below is a basic example of how this statement works, by using creating a grid:

and this is the code that I used to create it:



Toward the end of the workshop, we changed the code to give the squares the ability to rotate and grow larger, giving it this spirograph style which looks very interesting:

Using the int variable for the squares, it has been programmed to increase in size (while rotating) during every frame hence the ” r=r+500; s=(s+10)%200; c=(c+1)%100;”  and the code I wrote is below:


This code however is more relevant to the forthcoming blog post, which is about functions and arrays.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s