Processing Workshop #4

In our fourth workshop we were introduced to the PImage datatype and explored some of the ways we can manipulate images.

Firstly we told processing that we wanted to display images and where the location of those images were. The PImage variable is used when images are the value, sort of like when intergers are the value we use the int datatype and when we are using a boolean value we use the ‘boolean’ datatype.


In the setup we assign a value to the PImage named img1 which we declared globally. We then set te size of the canvas to the width and height of ‘img1’. And Finally we draw the im1 in the draw section which allows the image to be outputted to the screen.


Images are stored in the data directory within the directory of the processing directory, when a PImage is used processing automatically looks in the data directory for the image.


What we did next was learn how to change the sizes of images with processing. We can manipulate the size and the position of the images in the parameters of the image() method. The first part of parameter declares what PImage to find (in this case img2). The 2nd and 3rd parts of the parameters define the position of the image (in this case the image will follow the mouseX and mouseY coordinates). And the 4th and 5th declare the size of the image, in this case 200 by 200 pixels.


What we then did was use the tint() method to manipulate the colour of the image. Here we have randomised the tint colour so that each new image has a different colour between 0 and 255, the 3 parmaters of the tint method are RGB. So if you wanted random green colours you could have tint( random(255), random(255), random(255));


This code results (in this case) a series of multi coloured Gary Numans.

Opacity of Gary Numan

Adding a fourth parameter introduces opacity to the tint.

What we then did was manipulate each pixel of the image. We did this by firstly using the load pixels method. This method allows you to call each individual pixels and stores them in an array. This means that you could manipulate any pixel within the image by using the pixels[] array.

We then created 2 for loops, which we had done previously, for the images width and height, and then assigned the local for loop variables x and y to a global variable called ‘loc’ we then used the fill method and assigned it the value img2.pixels.[loc] which tells processing to take the pixels from img2 and place them in an array with the values assigned to the variable ‘loc’.


a pixel gary

This is the result of the code; a pixelated Gary Numan.


Processing Workshop #3

In this workshop we experimented with loops and rotation some more. We also looked into using functions and using variables with functions.

3.1 Triangles and Functions

Firstly we created a house. We did this by making a series shapes and putting them together to make them form a simple house. There is no house function built in to processing which creates a house for you such as rect() and ellipse() so we had to make the house ourselves. We did the by creating a square for the main body of the house, then we put another smaller rectangle inside that initial square to replicate a door. We then used a function we hadn’t yet used called triangle. The triangle function works like the line() function in that you have to declare two values (one each for the x and y position on the canvas) but unlike lines there are 3 positions for the 3 points of the triangle. An example of the code and the resulting output can be seen below.

Screen Shot 2014-10-29 at 12.03.11

Screen Shot 2014-10-29 at 12.09.49

What we then did was created a function and put the code for the house inside that function. This is useful because if you want to create numerous houses you can just insert the function into the void draw() function and it saves you the time of having to write out the code and also minimises the amount of code which makes the document easier to navigate. Below shows how we created a function using void and then the name we want to use for the function, which is usually based on what it is or what it does. In this case the name of the function is house.

Screen Shot 2014-10-29 at 12.14.20

The output is exactly the same as before except now we can declare the function multiple times, which means we can have multiple houses in different positions on the canvas. However, to make the house be in a different position when we declared the function we had to add some variables in the parameters. We created two variables called x and y which would act as the x and y positions of the three shapes which made up the house. We then changed the parameters of each x and y position in each shape so that they would correspond to the two x and y positions which we declared in the house function. This is shown below.

Screen Shot 2014-10-29 at 17.27.21

3.2 Manipulating Functions

In order to make sure the shapes still formed a house when moved we had to add numbers to the two variables. x + 12 for example, means that the position should be 12 away from wherever the x variable is declared in the void house(), function.

Screen Shot 2014-10-29 at 17.27.53.

Entering different numbers in the void house parameters results in the house being in a different position.

Once you have created a function you can put as many variables into the parameters as you want, you can also change those variables to make the function do different things.

Screen Shot 2014-10-29 at 18.18.29

Here we have created another variable (c) which allows us to change the colour of the house in the variable, we have also changed the x and y variables to mouseX and mouseY which makes the house follow the mouse pointer as we did in a previous workshop.

We then put the house into a nested loop (discussed in workshop 2 blog post ) and made the colour random so that each house flashed a different colour.

Screen Shot 2014-10-29 at 18.43.38        Screen Shot 2014-10-29 at 18.43.47

Above: some nice flashy houses in a nested for loop.

We then looked into rotation as I have already discussed in the workshop 2 blog post . We rotated the first for loop of houses at a 45 degree angle. An example can be seen below.

Screen Shot 2014-10-29 at 19.27.27Screen Shot 2014-10-29 at 19.27.38

We then used translate to make the line of house rotate around the centre of the canvas (as discussed in workshop 2). And then we made the background fade by placing a rect across the entire canvas and making the colour black. The result of this can be seen below.

Screen Shot 2014-10-29 at 19.46.10 Screen Shot 2014-10-29 at 19.45.19

In this example I’ve moved the position of the rect to 400 on the x axis. This is so the difference can be seen between what the output looks like if there is no rect over the canvas. It’s also important that the rect function comes before the rest of the code otherwise it doesn’t work because the rectangle is always ‘behind’ the other shapes and nothing happens.

3.3. Arrays

In this workshop we also explored arrays and how to use them. In this example we created an array which contained different colours, the use of this was that when we wanted to call a colour we could simply use the array to determine which colour a certain shape was. To demonstrate this I created a series of shapes and assigned them a different colour from the array.

Screen Shot 2014-10-29 at 21.14.57

You can see the array at the beginning of the code. It contains each colour that will be used.

Screen Shot 2014-10-29 at 21.15.03

Here we can see that in the fill() section a different number is used for each shape. An arrays works like a list, if you use p[3] the colour of the shape will be what the fourth colour in the list is (arrays count from 0).

In the workshop we used an array to change the colour of the rotating objects.

3.4 saveFrame function

What we did next was use saveFrame() make a video of what we had made in our workshop. This was relatively easy and consisted of using the writing in the function “saveFrame” followed by the name the images would have once they are saved in the folder. Once this had been done we simply had to run the code and wait for as long as we wanted the video to be.

Because each frame is saved separately, we had to put the images together so that they were a video instead of a bunch of frames. We did this by using the Movie Maker tool which come with the processing application.

Screen Shot 2014-10-29 at 22.57.46

Here we can see the saveFrame function and at the top is the array.

Screen Shot 2014-10-29 at 22.58.09

This is the final house function. As can be seen in the video at the bottom the ellipse is controlled by the mouse pointer.

Screen Shot 2014-10-29 at 22.59.14

What the file looks like after the saveFrame function is initiated.

Screen Shot 2014-10-29 at 23.00.40

A screenshot of the moviemaker tool and options.

Final Video

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.