Workshop Task

In a recent workshop we were assigned the task of getting a single pixel colour value from an image. Below I will discuss how I achieved this.

Screen Shot 2015-01-26 at 04.21.56Screen Shot 2015-01-26 at 04.21.32

As you can see above my image of a fish has an orange square in the top left corner. I have done this by creating a pImage variable and assigning the name ‘img’. I have then loaded the image in the setup section by using the loadImage function. I have also created a color variable called ‘c’ and then assigned it to my PImage (img) and used the get function to grab a the pixel which is 200 pixels accross and 200 pixels down. I have then created a rect which has a fill of the color variable c, which is using get to find the pixel colour in the image, resulting in the square being the colour of that pixel.

Screen Shot 2015-01-26 at 04.25.15Screen Shot 2015-01-26 at 04.25.55

Here I have done the same thing but changed the get parameters (highlighted) to 27k,120, which is the fishes eye. As you can see above the rectangle has now changed colour to black.

What I didn’t do in the workshop was work out how to get the colour value of a pixel that is being captured by the camera, though I intend to work this when I next get time.

Workshop Challenge Outcome

In our previous workshop we were assigned the task of trying to figure out how to split an image into individual pixels and get those pixels to ‘fall’ to the bottom of the canvas. From our previous workshops where we learned how to replicate gravity and also how to affect single pixels. We were given some help in that we were told that the solutions lie in each of the workshops where we had followed along with Paul to learn some more challenging tasks. I didn’t quite manage to complete the task but I gave it my best shot and below I will show how far I got.

Above shows how I was attempting to split the pixels up and make them fall down, instead I found out how to split the pixels apart and make them grow apart from each other when the mouse is pressed.Below is my code with a few comments to explain what each section does.

Screen Shot 2015-01-26 at 05.44.11

The other thing I managed to to was get squares to “fall down” after a mouse click. There is a video and a screenshot below.

Screen Shot 2015-01-26 at 05.57.12

I think if I had more time I would have been able to work this problem out, but I’ll just have to say close but no cigar (I’ll probably kick myself when I look at the code from the workshops folder on mybu). However this process has helped me with becoming more familiar with more advanced concepts of programming.

Processing Workshop #5

In our latest workshop we began to look at classes and arrays and agents.

During the workshop we created squares which could move randomly about on the canvas and we could create new additions each time the mouse was clicked. Firstly we were introduced to creating classes, which we hadn’t done before. This is done by using the word “class” and then putting all the data inside square brackets. The class then has to be called at the start of the document.

Screen Shot 2015-01-26 at 06.25.32

Above you can see that we created a class called “Agent”, then we put in some data (float x, y; and color c;) then in our “constructor are we create a function called “Agent” with three parameters named x, y and c. Inside the function agent we used “this” which tells processing that we want to use the global variable x, and then we assigned that to the local variable x (inside the parameters). In the methods section we created a method called void update which contained the information that we wanted to use for our squares when they are called. Then in the draw section of the class we created a the squares using the rect function and assigned them the variables x and y, which are equal to random(-10, 10); and random(-50, 50);

Screen Shot 2015-01-26 at 06.36.25

Then in the main section of the code we created an Arraylist called agents at the top of the document. In the setup section we used “new” to assign the arraylist agents to a new arraylist, which means that when we click the mouse we create a new addition to the arrayList, which means that each one is unique and move to different pixels to one another (as we used random to determine where the squares appear on the canvas). In the draw section we created a for loop with the variable i which states that while i is less than agents.size() then iterate i. Inside the for loop we called the Class Agent and named it agent (which was really confusing) and then assigned agent to get i. We then also assigned agent to the methods update and draw, which we had created in the class beforehand. Finally we created another function called mousePressed and made a new Agent class called “tmpAgent” which created a new Agent each time the mouseX and mouseY were used and also made the colour random.

I found this quite confusing (as my explanation probably suggests) and I think that I will have to practice quite a lot to fully understand how this code works (and it will probably take me a long time to be able to write code like this off the top of my head). But this has been a good introduction to really interesting concepts in programming.To take a look at a live version of the code click here.

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.

Processing Workshop #1

In our first processing workshop we explored how to setup a basic workspace, how to make different shapes, how to randomise different effects, and how to use get shapes to follow the mouse pointer.

void setup, void draw, and shapes

The first thing we had to do is set up the page. This is important because it allows you to create a custom working space. An example of this is defining the size of the canvas (the space) with which we were working in. We did this by using the size() attribute and then entering the width and height of the canvas with the parenthesis. Processing works in pixels so each number represents a pixel, so “size(500,500);” will create a space with a width and height of 500 pixels.

What we did next was create a shape. We did this in the void draw() section as this is where any code that is to do with content within the canvas will be outputted to the screen. We created a rectangle by using the rect tag. The rect tag had 4 parameters which we had to define to get the shape to be outputted onto the screen. The 4 parameters were position-x, position-y, width and length. Below is a screenshot of the code and the output of that code to the screen.

Screen Shot 2014-10-12 at 18.08.27

Screen Shot 2014-10-12 at 18.07.55


We used the random attribute to make a circle change position around the canvas. This was done by using the random function. We created a shape exactly the same way we had done before only this time we set the x axis to random(0,width). this mens that the ellipse can appear anywhere between 0 on the x axis and the entire width of the canvas. The height on the y axis was set to height divided by 2 which meant that the ellipse would appear in the centre of the y axis because the canvas is 500 pixels high and 500 divided by 2 is 250.

Screen Shot 2014-10-12 at 17.50.26

Screen Shot 2014-10-12 at 17.49.22

Lines and mouseX, mouseY

The nest thing we did was experiment with the line attribute. In order to make lines you must define 4 parameters. The first two define the position of the first point of the line and the second two define the position of the second point of the line. So if the size of the workspace is 500 by 500 pixels, and you wanted to draw a diagonal line accross the whole workspace, you would enter the parameters (0,0,500,500). An example of this is shown below.

Screen Shot 2014-10-12 at 19.26.07

The Result of the code.

Screen Shot 2014-10-12 at 19.26.17

What we then did was use the mouse to change the position of the line. This was done by setting the coordinates to mouseX and mouseY. What this did was tell the program to set the first point of the line to the x axis and y axis of the mouse pointer. This resulted in the line tracking the mouse pointer wherever it moves on the page. We then set the second two parameters to random(0,500) which made the second point of the line able to appear anywhere on the 500 by 500 pixel canvas. An example of this is shown below.

Screen Shot 2014-10-12 at 19.18.10

Below is the result of the code. Although it can’t be seen in the screenshot the mouse pointer is in the middle.