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.)
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.
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;’ created an array of two values.
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.
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 –
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’.
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)