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.


Science Museum Visit

Recently we went on a field trip to the Science Museum in London. There were a lot of interactive installations and the idea was for us to find some examples and get some ideas for our own projects.

There was a lot to explore and I found the experience very interesting. The things I found most interesting were the things that I interacted with by just walking around (not having to push any buttons or make noises etc).

This installation reflected peoples images, composed of smaller shapes when they walked closer to the screen (you can’t see it from the image because I am too far way for my shape to be picked up), I don’t really know how this works but I guess it uses a camera or a sensor to find peoples shapes and then projects them onto the white space, I thought it was very clever and I liked it because it was easy to interact with and quite fun. Unfortunately I didn’t get a video of me interacting with it.


This installation asked the audience a question and then afterwards a yes or no appeared on both sides. I didn’t quite know how this worked because it seemed that you should go to the left side (yes) if you were afraid of snakes and the right side (no) if you weren’t, but it didn’t seem to work and it made me question if it was interactive at all, and maybe I was just walking over to each side for no reason. Though there weren’t many people around at the time so maybe it didn’t work, but this shows that the audience can sometimes be confused about what their role is when they are interacting (or thinking they should interact) with installations, which is something I would like to avoid in my project.


This was my favourite thing because when you walked over the black sign on the floor an alarm sound played (it must have been activated by a pressure sensor or something). But when people walked over that part of the floor they looked around to see what was making the sound, then they looked at the floor which says “Do Not Touch” which automatically makes you want to do the opposite, if you touched the pole in the centre of the sign on the floor you got a small electric shock. I found this quite a fun way to make people interact, and it also uses reverse psychology to make people interact, and people found it really funny and were laughing.

Here is a video of something which wasn’t interactive but I found very interesting because it replicated gravity but in a 3 dimensional shape, as opposed to a 2 dimensional computer screen. I also like the way that when the lights hit one another they “bounce” sort of like how a pendulum works.


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.

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.

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 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.