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.

Creating Classes

As object orientated programming is something I am not yet comfortable with I feel as though I only understand some of the concepts partially. In order to further grasp the concept I looked at this explanation of objects by Daniel Shiffman on I then tried to change work that I had previously done to introduce classes. I used the simple square hover, which I had used in the mindmap that I created for the poster project to become more familiar with the interface. I found that using a simpler example than what we were doing in processing to understand the simple concepts of object orientated programming was very useful to me as it meant that I could see the difference between something I had already used and turn it into a class, it meant that I could focus on one particular concept I was struggling with instead of having to cope with a number of them at the same time. This was helpful because it made me learn through doing by myself rather than through following (though the following part was also useful).

The main problem I was having when trying to convert previous things I had created/altered into classes was with scope and syntax (i.e. I didn’t know what the processing syntax does and doesn’t allow you to do). Changing the simple square mouse hover (which I had originally taken from this example on was extremely useful because it made me understand scope better. For example I had a problem in which I wanted to change the position of a rect which was assigned the global variable ‘rectX’, however I wanted to created a local variable which altered the size of the rect but keep the global variable at the same time, I didn’t know how to do this.

Screen Shot 2014-11-26 at 05.52.00

As can be seen above, the global variable, or the class variables int rectX, rectY are assigned.

Screen Shot 2014-11-26 at 06.34.25

In the main setup and draw section i want to create different squares in different positions which when hovered over by the mouse change colour.

Screen Shot 2014-11-26 at 05.53.53

but the problem was that i couldn’t change the rectX and rectY variables to local variables in the display() method because they were being used elsewhere for the mousehover to work.

Screen Shot 2014-11-26 at 05.51.18

I resolved this issue by creating another variable called rectPosX and rectPosY and assigining them variables to the class variables of rectX and rectY.

Screen Shot 2014-11-26 at 06.42.34

This resulted in me being able to create multiple squares in multiple locations which all updated when the mouse ‘hovered’ over each individual position. The use of classes also brings new problems in that I had to make the for loop variables global, which I hadn’t had to do before. You can see a result of the code here.

Working out this small thing helped me understand scope and object orientated programming and now I have understood this I can move forward to understand more complex things. I think in moving forward I need to further investigate arrays, because they are the things that I’m not necessarily struggling with understanding but more with creating and writing the syntax correctly. I also find that although progression is slow moving, I am grasping the fundamental concepts of programming one small step at a time, but as I solve one problem, others arise. I find that the more familiar I become with processing and the more I attempt to create things in processing the more understandable it becomes. I feel as if I carry on coding and trying to work things out the answers will come to me, but I know I am progressing as things that I was trying to work out that seemed impenetrable a year or two ago are now becoming clear. This relates to my iterative process (although not confined to within this unit) and reminds me that although progress sometimes seems to be slow it is made through trying to work things out and persistence, even though at times I generally feel I will never grasp certain things.

Working with Directions in Processing (part 2)

In a previous post I discussed my problem with changing the direction of objects in processing. I have since worked out this problem. The solution was actually quite simple once I found out what to do. To work this out I looked on and used this example to work out what I needed to do to achieve my intended outcome.

Firstly I had to create another variable for the velocity (in this example adirection etc). The reason for this is that the other variables are for the position of the points, so it makes it easier to have two different variables for both the position and the velocity. Secondly when changing directions I had to subtract the amount from the current direction of the shape, so for example if a point is travelling down by 1 pixel, to make it go up it has to be set to the value of -1 (0 makes the object inanimate), but also if one point is travelling down by 1, if you want another point to travel up instead of it being -1, (as I had previously thought) it has to be -2 to compensate for the current velocity of the centre point (adding the value -1 means the point will remain static).

What I discovered through experimenting to try and get the speed of the points right was that the previous movement of the shapes had to be taken into consideration when trying to make the points move at the same speed when changing direction. This is something I hadn’t previously conceived as being a problem and I wouldn’t have worked this out if I hadn’t have asked “How do I get each point to travel in opposite directions from one another at the same speed?” I found that having a clear intention of what I wanted to achieve was useful because in order for me to do it I had to overcome my unfamiliarity with programming and I realised that my speculation on how I would achieve it was different from how processing actually works. This is useful because it’s helping me to become more familiar with computer logic and realise that sometimes programming does not work the way I expect. It has also further cemented the fact that persistence is the key to solving problems.

Screen Shot 2014-11-22 at 22.20.59

See the output of the above code here.

Seminar Example

For a seminar recently we were asked to bring in some work which we had found or created to show what direction we are heading in for our final project or the sort of themes which we would like to explore. I haven’t really thought too much as of yet about my final project because I have been trying to get a better grasp with basic concepts of processing and have been experimenting with ideas that we were shown in the workshops to become more familiar with them.

I decided to bring in something that I had created from scratch using the knowledge which I had picked up from the previous workshops and I created a rotating square which when the mouse is pressed follows the pointer and when released stays in the position on the canvas where it was released by the mouse.

Although this is quite a basic thing for me it was quite an accomplishment because that was what I wanted to achieve and I had to work out quite a lot of things to get to the point I’m at. What I would like to do is work out a way in which you can only ‘pick up’ the shape by clicking on the middle point, which probably isn’t too hard of a thing to achieve.

Looking towards my final project I suppose this could relate to it if you were having the shape track peoples movement when they were walking past the camera, though at the moment I’m not sure how this would be achieved. I have uploaded an image below of my code with some notes on what each section of the code does. Here is a link to a live version of my code.

Screen Shot 2015-01-26 at 03.08.15

Working with directions in processing.

In processing I have recently been experimenting with directions. In this example I created a triangle and assigned 1 coordinate of each point a variable. I then incremented each point so that the left and right points of the triangle move up vertically and the centre point of the triangle moves down.

The problem that I’m having which I am yet to solve is how to change the direction of the triangle so that when it exceeds the height of the page it goes the opposite direction. I have tried a series of different methods to try and solve this problem including assigning a Boolean variable so if the direction is true the point moves one direction and the other when false. However my lack of knowledge of programming is postponing my progression.


Screen Shot 2014-11-13 at 00.46.29Screen Shot 2014-11-12 at 23.24.24

Here is an example of my problem, I have created an if statement assigned to the variable ‘b’. The if statement says that if ‘b’ is greater than height then decrement by 1. The resulting output does nothing however and the triangle doesn’t move.

Screen Shot 2014-11-13 at 00.46.59

If I do b= b-20 the point does move but doesn’t want to go the other direction, instead it just moves the point back twenty pixels and moves down again until it reaches the height of the canvas, and does this indefinitely.

Live example here.


I’m also having a similar problem with some other code I’ve been messing around with. In this example I’ve created 4 squares which grow in size until they reach the height and width of the canvas. What I want to do is make each square grow towards the centre instead of all to the bottom right of the canvas. I have not worked out how to do this yet.

Screen Shot 2014-11-13 at 01.14.21

Live example here

Processing Mind Map

For the work we did on the Independent Dorset poster I created a mind map  in Processing out of the notes I took in the seminar. The reason I did this is because I wanted to become more familiar with simple concepts in processing and programming in general. The mind map contains rectangles, lines and text. For each one I had to define the coordinates where I wanted the shape or text to be placed. It was useful because it made me think about functions and variables and how I could have saved time in defining each line and square. I came to the conclusion that using variables wouldn’t save much time as I would still have to add or subtract numbers to each one. Even if I had created a function I would still have to define the coordinates in the parameters. Maybe there is a way to do this but it is not something I am aware of.

I also explored the mouse hover effect and used this example on In the example it shows how to create a square and a circle, if you hover over the square the background changes colour and the same happens for the circle. I had to mess around with the code to make it suit my usage. I changed the size of the rectangle to fit in with my mind map and I got rid of the circle. Messing around with the code was valuable to me as I found it useful looking at somebody else’s code and changing things to see what happened. It helped me understand functions better and introduced me to the boolean variable which made me think about situations that boolean may be used.

If you hover over the “Dorset Independence” rectangle in the middle of the mind map, every rectangle changes colour. This is because each rectangle is assigned the same variable and the coordinates of the variable are set to the centre of the canvas, the result of this is that the rectangles change colour but only when you hover over the rectangle in the middle. What I wanted to do is make each rectangle change colour separately when hovered over. I’m trying to work out a way to do this where I don’t have to create a function for each rectangle as this is time consuming and would result in a lot of code.

Although this isn’t something which you would generally use processing for (it’s much less time consuming to use Microsoft word or Powerpoint or Photoshop) it wasn’t really the reason why I did it. I knew that it would take longer and I wouldn’t have even bothered to make the mind map had I not wanted to mess around with something on processing. It introduced me to new concepts and made me think “what will happen if I try this?” and that was useful to me.

This is the link to the original code I used –

This is a link to a live version of the mind map –