Processing Workshop Friday 28th November – A new beginning!

I’ve found the last few processing workshops very difficult over the weeks, I understand the concept of what is happening however when its over to me to try and produce something following on from what we’ve been shown I’ve found often, frustratingly that I was unable to do so, this meant I fell behind, despite trying to seek guidance and looking through some internet tutorials.

I am happy to say that I was not the only student in this sort of trouble, it was intact a view shared by a fair amount of other students on the course and we were able to communicate this to our lecturers who were able to restructure how we would receive teaching in Processing which would allow us to gain a better understanding of a lot of the basic principals and elements of the language worked in order to build more solid foundations than the ones we already had.

The workshop today took a different course, it involved us watching our lecturer explain what we would be trying to achieve and how the final result worked before going and trying to replicate the same thing by ourselves, I felt more comfortable with this approach as I felt I had a better understanding of what we would achieve before we went out to do it ourselves, as well as this our lecturer reminded us of some helpful tips and ways of finding answers online via the processing website, I feel this will be incredibly helpful in the future as all of the examples are well worded and clear enough that I feel I can now begin to work independently and not worry or find myself as quickly confused and likely to stop experimenting with Processing.

The task in the lecture was to use code to experiment with loading an image into a file, put simply, we began by coding a application which would find an image which we’d found and saved into the appropriate folder and load it into the space, this would not show the image as it wasn’t ‘drawn’ onto the canvas, but it was present in the space. Following from this we then were tasked to find a way of getting a rectangle to ‘get’ a single colour from the image and show it inside of it. This again involved finding out how to use the ‘get’ function in conjunction with drawing a rectangle (rect), to achieve this we used the code shown below –

Code for Processing Workshop

As shown the PImage function was used to store the image with the image then being loaded onto an appropriately sized canvas (the same dimensions as the image) and then loaded into the space using the line ‘img = loadImage(“Earth.PNG”);’. Using ‘void draw’ allowed me to show the full image onto the canvas, covering the entire canvas as I had stated ‘0,0’ meaning it would be displayed at the top left of the canvas. To use Processing to look at the image and find a colour the ‘get’ command was used, to make it find the colour of the pixel at the location ‘350, 300’ the ‘color c’ command was used. Colour ‘C’ would now be used to fill the rectangle, this was achieved by changing the fill to ‘fill(c)’. noStroke was used purely for aesthetic purposes, this would remove the black background encapsulating the rectangle and the rectangle was drawn at point ‘350, 300’ with a size of 30 x 30 pixels so it would be coloured similarly to the image behind it and be of a size large enough to be noticed so I would know if it had worked. The final result is shown below.

The finished working application
As shown here, the code worked and a small grey box can be seen slightly right and to the centre of the image.

After this as an extension to this we were tasked to take this one step further which would make the application interactive, this was to make the box show the colour of the pixel the mouse was hovering over. This would involve adding ‘MouseX’ and ‘MouseY’ which would replace the pixel reference ‘350, 300’ given previously, this would allow the application to use the X and Y axis of the position of the mouse cursor and generate the colour of the pixel it was hovering over.


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