Processing Project – Testing

Below is a video of myself testing the project in its final stage, In the code below I created a visual guide to allow myself to test my project and view how my interaction is directly changing the tint of the logos, as well as this, for the purposes of the video it was important to demonstrate how the tint of each logo was directly affected by me or anyone’s movements.

processing practise final with oli webcam from Oliver Evans on Vimeo.

By using an 'if' function in processing I could view what the webcam actually saw allowing me to test how the logo board reacted to different movements.
By using an ‘if’ function in processing I could view what the webcam actually saw allowing me to test how the logo board reacted to different movements.
Here, the function 'voidtestDraw' was drawn to the canvas to give a small (160, 120) sized window allowing me to see what the webcam sees.
Here, the function ‘voidtestDraw’ was drawn to the canvas to give a small (160, 120) sized window allowing me to see what the webcam sees.

When testing the project I found it to work as expected, this was pleasant, considering the past experiences I’ve had during this project of random errors. From this I now plan to take the project to Weymouth house to present and test the project on a live audience.

One issue I am aware of which I am unable to resolve at this current point is that when presenting my installation I need to be careful of any thermal throttling which may occur when the CPU (Central Processing Unit) in my laptop is put under intense stress, after extended periods of time of the project being open my laptop has sometimes slowed meaning the application can slow down causing some lag and stuttering in the installation, however given that the brief does not state how long the installation needs to be presented for I am un-phased by this issue as it is functional and can work without fail for over 10 minutes, giving multiple users enough time to engage with the installation.

One more thing I am interested to test when in the foyer of Weymouth house is how the installation looks when picking up people further away from the camera. Although earlier in my blog I have commented on how I wanted to try and achieve a smoother flow of colours in the installation I now feel differently. I feel if the logos were to change colour quickly or flash when they pick up movement it will only draw the user in further before they engage with the installation, I feel this way because the screens are located towards the corner of the Weymouth house foyer meaning I will need to draw in people into interacting with my installation, therefore faster colour changes will only create more contrast and therefore a greater visual appeal in my installation.

Processing Project – Problems with testing

I’ve found the past few days to be incredibly testing, multiple errors followed by seemingly illogical issues I had not foreseen have meant I’ve had to put in more time than expected to making my installation presentable.

In the brief we were given it states ‘create a piece of interactive information design for a shared public space‘, we were told during working on the brief that we would then be presenting our work on ‘one of the public screens … in the foyer of Weymouth house’, this would mean creating our canvas to fit the screens which we would then have access to at this final stage of our projects.

When creating my project I made an error I had not foreseen as being an issue, this error was that I created a canvas to fit the size of my computer screen with an appropriate resolution to do so, when trying to present my work on the screen in the foyer of Weymouth house I found instead of being able to simply ‘mirror’ my laptop screen to present I had to use a different resolution, therefore causing my canvas to not fit the screen and therefore looking unfinished and not acceptable for presentation.

Shown here the logos do not fit the screen and the project therefore does not create the visual impact that I would like to create.
Shown here the logos do not fit the screen and the project therefore does not create the visual impact that I would like to create.

To fix this issue I attempted to try and make the logos fill the screen, this involved altering some width and height values in my code – shown below.

Here, I used 'displayWidth' and 'displayHeight' to try and make the canvas fit the resolution of the Weymouth house screen, although this resulted in the canvas then fitting the screen, the logos, as shown in the image above still did not fit due to their own individual, predetermined height and width values which would have had to be changed manually.
Here, I used ‘displayWidth’ and ‘displayHeight’ to try and make the canvas fit the resolution of the Weymouth house screen, although this resulted in the canvas then fitting the screen, the logos, as shown in the image above still did not fit due to their own individual, predetermined height and width values which would have had to be changed manually.

I felt at this point I had two options – one being to go back through each file containing each logo and change the width and height values to make them fit the new, larger canvas, this would mean going through trial and error stages to work out how large to make each logo, as well as then changing the values of their location on the canvas to ensure they didn’t overlap. The second option was to add more logos, something I felt would if anything make the installation more visually appealing and save time by only having to add in logos using the sizes I had already determined as suitable for the installation.

Later, when adding more logos I found that the code I was using to make the logos tinted by the values received from the webcam were intact not functioning as they should, instead of reacting to the ‘grabPixel’ location values I had declared, they did not respond, creating a black space instead of the logo. Puzzled, I investigated this issue further and was thoroughly perplexed due to what I felt was an illogical problem. Even writing this post I am still not completely understanding why the issue arose as the ‘grabPixel’ values I had used in the function were within the webcam range (160, 120) and therefore should have worked correctly.

To rectify this issue I asked my tutor to meet with me to help me decipher where in my code I had made an error. She gave me the advice to break down which parts of the code worked and which parts didn’t, she also suggested making a copy of the source code and then taking away large parts of the code to single out the few parts that did not. I found this incredibly helpful as due to the number of logos I was using in my project it meant my source code was long and often difficult to navigate through, it also allowed me to make larger changes to my code without the worry of losing any code, though this was a practise I was already aware of and had put to use earlier in the project encountering an unforeseen error like this made it clearer to me how important it is to save progress while the project works to be able to fall back on it in case un-fixable errors occur.

I found eventually the problem was to do with the values I had entered for the ‘grabPixel’ function, by lowering the values from the edge of the limit of the highest and lowest points of the webcam I found this then rectified the issue.

To update I found using exact values of the canvas size allowed me to gain some stability in viewing the project both on my laptop when it was not attached to the screen as well as when I had the laptop connected to the screens. In short - this eliminated random errors occurring in this area of the project.
To update I found using exact values of the canvas size allowed me to gain some stability in viewing the project both on my laptop when it was not attached to the screen as well as when I had the laptop connected to the screens. In short – this eliminated random errors occurring in this area of the project.

In the future I will complete the project adding in logos to create a full ‘board’ of logos and present it on the screen in Weymouth house which I plan to test tomorrow.

Processing Project – Dead End

As shown in my previous blog post I have reached a point where I have successfully created the logo board I was aspiring towards, as well as it being able to react to changes in colours picked up by the webcam. From this I want to extend the project and make it so that the webcam values picked up are not simply just given as a ‘tint’ to the logo for it to appear as a block colour.

Tutor assistance example code
Here shown is the code my tutor created to give me an example of how in a basic form processing can be used to take a colour (the example being the green square on the left) and take only the blue value from the colour when splitting it into ‘RGB’ and present that on the right square where the middle square shows the maximum blue value.

From the code shown here although it did take a step towards my final goal of trying to use the values of colour picked up by the webcam to match the colour value with a logo which would be ‘lit up’ in the installation I will present.

After playing with the code written for me by my tutor in an attempt to use the webcam to give me a colour value rather than manually input RGB values I found the example set up I had created gave me this error –

“processing error ** (processing core video:9140): warning **: colorconverter: size 83200 is not a multiple of unit size 80000”

This error had me dumbfounded for a few hours before I made the decision to not progress with trying to take my project to this level, I felt that currently, though I have not achieved the initial goal I’d set for myself in this project the final sketch still achieves what I wanted it to achieve, this being an installation which creates an awareness in audiences of the staggering amount of brands in this world and their impact on society.

From here I plan to move on to testing my project on the screens in Weymouth house for a live audience, this will allow me to observe their reaction and interview them to gauge whether or not they feel the installation has had the effect I had hoped for.

Processing Workshops – Progression!!

Today I attended both workshops put on to seek help regarding my processing project. In yesterday’s post I commented saying that I would ask for help in getting the webcam to work as intended with my project. Today I was able to do and more, much to my delight!

(To update on the issue i had yesterday and to make it more clear as to why it looks like I’ve jumped ahead the fix to the issue was the result of not calling the ‘grabPixel’ function to the canvas, though I had loaded the function I had not then put it in the ‘void draw’ section of my code, meaning it would not be drawn and therefore would not show anything when the application was run, thanks to this simple fix i was then able to move onto using multiple images along with multiple points in the webcam to interact and directly change the colour value of the image.)

Here is the code i experimented with, this unfortunately did not yield the desired result.
Here is the code i experimented with, this unfortunately did not yield the desired result.

Above is the code I used to attempt to get the webcam in my laptop to pick up the colour value of two points from the webcam result. This was the first attempt without using ‘arrays’ which I would later use. Due to my limited knowledge in Processing i was instructed to carry out my coding in this process due to its simplicity, I have highlighted important sections of the code to show how I have attempted to make two separate points on the webcam take/(grab-a-pixel) and use its colour to ‘tint’ the colour of the logo. The result of the code was that the first logo ‘c1’ was displayed and worked as expected but ‘c2’ did not read a value from he webcam resulting in the logo staying black, after time spent myself attempting to solve the issue my lecturer instructed me to instead consider using an array due to the added complexity which will ensue when I add multiple images, as well as this he instructed me that in an array the amount of coding required is dramatically reduced especially when using multiple images in the application which I plan to do in the future.

Array set up

Here screenshot are the changes I made to the code for it to function as intended. Shown at the top – ‘color’ was made global to enable the array to function in all sections of my code and for it to be recognised when the application was run.

Inside the set up of the code ‘colours = new color[2];’ created an array of two values.

Grab Pixel Array Processing

The ‘grabPixel’ function I wrote about in my previous entry was adapted to use the array, in arrays the number of values in the array begins from ‘0’ so the two entries were ‘0’ and ‘1’, this was followed by co-ordinates to tell the application which pixels in the webcam to use, for the first pixel ’40, 60′ were used to ‘grab’ a pixel towards the left of the camera, for the second pixel ‘120, 60’ were used to ‘grab’ a pixel to the right of the camera so the images would change in tint independently.

Processing Webcam Practise(30fps) (Converted) from Oliver Evans on Vimeo.

When testing the application I found it was often hard to test if the webcam was picking up the correct pixels as I had no indication of this due to the tint of the pixels being my only visual indication that the webcam was picking up a pixel however I did not have a way of actually knowing where the pixels were in relation to the webcam image. To tackle this issue I used the code below –

Processing webcam pixel locator

The code shown here activates if the mouse is pressed, when pressed a box containing the full webcam image will appear on the screen with two lines that essentially point to the pixels the webcam is using to give the images on the screen their ‘tint’.

Webcam Processing 'grabPixe'l' line indication

The screenshot above shows the code in action, the bottom of the right line shows the pixel location of the tint of the top logo with the left line showing the tint appropriate for the pixel at the bottom of that line.

To proceed I plan to simply increase the number (and style) of the logo’s I use to build up an interactive ‘board’ of logos which will independently react according to the colour of pixels picked up by different points in the webcam image.

References: https://www.processing.org/reference/Array.html (Accessed: 11/1/15)

Processing Project Update – Could be better… Could be worse!

So far I am comfortable with the progress I have made towards completing my processing project, I have a plan in place to guide me through my work using ‘pseudo-code’ to map out the steps towards completing the project. i have found this to be an incredibly useful step to take as it has allowed me (as a visual learner) to visually take apart the steps of the project and view my progress. Furthermore by doing so I am hoping to ensure I do not miss out any key or necessary steps in the project which may hinder me later on in the project and result in me not using my time efficiently.

At present I am struggling to take the next step with the project where I transition into using the webcam on my laptop (which will later be a dedicated webcam in the final presentation of the project in Weymouth house) as it involves using various tutorials online as well as a few steps of me working more independently with Processing which I still do not feel entirely comfortable with. To try and resolve this issue I plan to put forward my problems to my lecturer in the workshop tomorrow (Friday 9:30am) and ask for his help to guide me through this process (if you’ll pardon the awful but necessary pun).

I should also be aware that documenting my work is of upmost importance, I attended a lecturer today which concentrated on the importance of not only blogging about my work but also creating and updating regularly a log which I can informally add to along the process of this project which will allow me to see exactly how i have worked through the project including how I was able to fix any problems I had, a useful habit to get into regarding working in a professional environment.

Below is an example of how i have used Processing to successfully illuminate the ‘Skype’ logo using the MouseX and MouseY co-ordinates to directly change the colour values of the logo from 0, 0, 0 (rgb) to 0, 170, 240 which gives the colour of the ‘Skype’ logo.

Here shown is the code I have used to create the first stages of my project, below this will be a video showing the result of this code. At present i am using the mouse to change the values of colour, in the next stages I will instead use the webcam to do so.
Here shown is the code I have used to create the first stages of my project, below this will be a video showing the result of this code. At present i am using the mouse to change the values of colour, in the next stages I will instead use the webcam to do so.

Skype practise from Oliver Evans on Vimeo.

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.

Processing Project – Major Update

Over the past few days I have been working to extend upon my knowledge of processing further to create my final project. Following on from my previous blog I explained how my plan was to build up an interactive board of logos which would respond to pixel values captured by a webcam, I have now added logos to the canvas and the working result can be seen below:

Processing Webcam Logo Board from Oliver Evans on Vimeo.

By using arrays (as shown in the previous blog) I found that the process of building the logo board to be surprisingly efficient, ultimately I felt a more random process was required to achieve the desired effect in the logo board and the way it reacts to changes in the image seen by the webcam. In short, I tried by best to think of random, unconnected logos to put on the board as the idea behind my project is to show how branding has taken over the world and is now a much larger feature in society than ever before, therefore it would be fitting to try and include logos from as further a field as possible to show how branding is everywhere, sending a message about the worrying permeation it has had on our subconscious as people.

I found I had to try multiple times to ensure I achieved a good balance between the number of logos shown on the screen as well as the size of the logos to ensure it would be easy for the audience to recognise the logo without it necessarily being shown in the correct colours, as well as this as the installation will be based in Weymouth House. I plan to go and test my installation in the next few days to observe how it works when transferred onto the dedicated systems we’ve been given to present our work on. I will also take this opportunity to test the installation with multiple people and observe how well the webcam can react to faster changes in the image seen by the webcam, I have found (and it can be observed in the video) that the logo’s can flash when the colours captured by the webcam change rapidly, I feel this effect can make the installation difficult to view and understand as it is naturally harder to read text that flashes.

Here shown is a panorama of the ground floor of Weymouth house. The floor area is sizeable and for the logo board to work as intended for people to be able to interact with my installation on the screens it is important I get the sizing of the logo's correct.
Here shown is a panorama of the ground floor of Weymouth house. The floor area is sizeable and for the logo board to work as intended for people to be able to interact with my installation on the screens it is important I get the sizing of the logo’s correct.

In the future I plan to try and adapt my processing project further as my goal at the beginning of the project was to was to make a logo wall which takes a colour value from a pixel captured by the webcam and relates the colour to a logo of a similar colour (inside a pre-determined range) and will light up the logo, to achieve this I will need to seek assistance from my tutor in tomorrow’s workshop as well as attempting to adapt my current code in the necessary ways to ensure the code functions as intended.