Processing Workshop #2

In the second workshop we explored a range of different programming concepts such as variables, if statements and for loops. This is my attempt to explain the processes that were undertaken in the workshop and some justification as to why the particular types of syntax used are useful in those situations.

2.1 If Statements and Modulo

An if statement is a conditional statement. In short this means that under a certain condition a program will execute the code written within the statement. An if statement is useful when you want the program to perform one action under a certain set of requirements and another if it doesn’t meet those requirements.

To become familiar with if statements we continued to explore the system variables mouseX and mouseY. We wrote a number of if statements which outputted different shapes to the gui depending on which mouse button was pressed.

Screen Shot 2014-10-11 at 00.39.26

Here we can see that the value of LEFT is set to the system variable called mouseButton. We have also added a rectangle under the coordinates of mouseX and mouseY, which we explored in the first workshop and then set the size of the rectangle to 100 by 100 pixels which actually makes it a square. Also we randomised the fill colours to make them change randomly each time the left mouse button is clicked, you can see an image of this below.

Screen Shot 2014-10-11 at 00.47.09

We experimented with these if statements to make different shapes appear depending on what mouse button was clicked. Next we used the ellipse tag to make a circle appear when the right mouse button is clicked. This time however we used modulo to make the ellipse larger by a 1 pixel circumference each time the mouse button was clicked and then reset back to it’s original size after it had reached 400 pixels in circumference.

Screen Shot 2014-10-26 at 18.11.42

In this screenshot I am dragging the mouse from left to right and the circumference of the circle is growing as I hold down the right button of the mouse, the code can be seen below.

Screen Shot 2014-10-26 at 18.17.13

2.2 Nested for loops

A nested for loop is a loop within a loop. A nested loop is useful when you want to add more variation to an existing loop. You can also have as many loops as possible which allows you to keep on adding different parameters on to the same loop.

In the workshop we experimented with for loops by firstly making a 10 by 10 pixel square to extend until it reached the full width of the canvas. We did this by doing a single for loop and defining a variable, in this instance called ‘i’. Firstly we had to tell processing where we wanted the loop to begin, which we set to 0, which by default is in the top left corner of the canvas. Then we had to tell the loop when to stop, we did this by i < width which in short means “until i is less that width”. The next stage was to state what we actually want to happen when the loop runs, in the case we wanted the 10 by 10 pixel square to move horizontally by ten pixels each time until it reached the width of the canvas.

line repeat

This is just a single for loop which makes the squares duplicate until they reach the width of the canvas. The next thing we did was create a nested for loop, we did this by creating another for loop, for the height, and did the same thing as the original loop except changed < width with < height. We then put the original loop inside the new loop so it covered the whole canvas.

In order to demonstrate the usefulness of variables we then set a variable called ‘s’ and gave it the value of a number (in this case 10) and then changed all the dimensions with the number 10 to the variable ‘s’. This is useful because it means if we wanted to change the size of the squares later on we could simply change the variable which would save us from having to change each individual value in the code.

Screen Shot 2014-10-10 at 22.34.44

above: example of a basic nested for loop. The x and y variables within the rect function are defines within the for loops.

Screen Shot 2014-10-10 at 22.35.24

This shows the variable called ‘s’ is assigned the value of 10. This means that every part of the code which includes the variable ‘s’ adds the value of 10 pixels.

Screen Shot 2014-10-10 at 23.06.07

and this is the resulting output of the code. The colours randomise at whatever frameRate is defined in the void setup() section.

What we then did next was experiment with randomising the size of each of the squares. We did this by changing the variable ‘s’ to random(10,100); this made the size of the squares change size anywhere in between 10 pixels squared to 100 pixels squared.

Screen Shot 2014-10-26 at 19.45.48

2.3 Rotate and Translate

What we then did was learn how to make shapes rotate. We started from a new document and created a rectangle as we had done before. This time however, we assigned it the variable of ‘rot’ and then used the rotate function to make the rectangle spin.

Screen Shot 2014-10-26 at 21.08.13

Here is the code for the rotation. In the variable named ‘rot’ we have assigned it the number 1 which means ‘add one degree of rotation’.

Screen Shot 2014-10-26 at 21.36.19

Above we can see the result of this code.

As can be seen above, as the rect value has been assigned the x and y coordinates 0,0 it makes the object move off the screen when we rotate it. Changing the x and y coordinates to width/2 and height/2 for the rotated rectangle does not position the shape in the middle of the canvas like it does when we do the same with a standard rectangle. This is because the centre point in which the rotation occurs around remains at 0,0. If we were to do rect(100,100,50,50) it would make a 50 by 50 pixel square which is a 100 pixels away from the centre (which remains at 0,0) at a 100 degree angle. The use of rotate makes the values entered in the parameters output different results. It is easier to show this at work if we make the rectangle move by 1 pixel each frame.

Screen Shot 2014-10-26 at 22.09.20

Moving the rectangle along the x and y coordinates merely pushes it further away from its centre (0,0). This is basically what happens with any other shapes (by adding pixels to x and y axis your just moving a shape away from its ‘centre point’) but it doesn’t matter with a square or a circle because it’s easier to move it to the centre of the canvas.

With rotation we have to use the translate() function if we wish to make the shape rotate around the centre of the canvas. The translate function allows you to ‘reposition’ the (0,0) coordinates anywhere you want on the page. You can see the translate function at work below.

Screen Shot 2014-10-26 at 22.28.52 Screen Shot 2014-10-26 at 22.29.11

Now the rectangles are rotating around the centre instead of the top left corner. This is because of the addition of the translate function as seen above.

2.4 Modulo In Depth

In this workshop we also used modulo. What modulo does is return the remainder of a divided number. So for example if you were to do put 15 % 5 the output would be 0 as 15 divided by 5 is 3 with a remainder of 0. However if you were to 16 % 5 you would get an output of 1 as 16 divided by 5 is 3 with a remainder of 1. The important thing to remember with modulo is that you receive the remainder as opposed to the division.

We experimented with modulo in the workshop to make some groovy shapes, here are some examples of what we did.

Screen Shot 2014-10-26 at 23.15.54

These are a series of variations of what is essentially the same thing. There are differences with each one and I will talk about some of the different techniques that were used below.

Screen Shot 2014-10-26 at 23.52.52

In this example we assigned one of the colours a variable (h) and changed that variable using modulo, as well as the shape you can see that the colour uses modulo also.

One of the things I discovered with using modulo in these particular examples is that there were other ways in which you could do exactly the same thing, here are some examples.

modulo1 modulo2

Here I used modulo to do one thing and in the second example I commented out the modulo and just assigned a number to the float variable called ‘sq’. They basically do the same thing except the colour and size is slightly different.


This is another example where I used an if statement instead of using modulo which produces the same effect.

I am yet to understand the significance of modulo in programming but I’m sure there is a reason why you would use modulo instead of just assigning a variable a number or using an if statement etc. Possibly you could use modulo to discover if a number is even or odd and depending on which you could use an if statement or something to make a program do one thing if a number is even and another if a number is odd, but I’m just speculating with that. I wish to understand how modulo works properly in the future as at the moment I am struggling to understand how modulo changes values particularly with the colour of the variable named ‘h’ which I used as an example above.


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