Testing moving shapes via pixel color values.

Today I worked out how to affect the movement of an object depending on the value of a single pixel. This is useful for me because it is what I’m going to need to do with the skyscrapers so that they all move up depending on if a predefined pixel value is changing, what I now have to work out is how to get a number of rectangles moving at random speeds and assign them to each pixel of the canvas. I think that I need to create some for loops but assign them different values to different objects, but this is something I’m going to have to find out through trial and error and (most definitely) endless amounts of debugging. I also have to work out how to make the pixel values automatically adjust to the background upon capturing frames so that the towers don’t rise to the colours in the background, and also make sure that small changes in the background don’t affect the movement either. Fortunately I feel that this isn’t beyond my ability to solve.

To achieve this I firstly used the ‘basiccam.pde’ file which I downloaded from the processing workshops page on mybu. This showed me how to import the video library and setup the camera so that it would use my on board camera and assign it to the document, I also used the video library page on the processing.org website, which showed me another variation of using the video library. Below is a short summary of the steps I took to get to where I am.

Screen Shot 2015-01-13 at 03.23.50

This syntax imports the video library to the processing document, and uses the ‘Capture’ variable which is native to the video library and works much in the same way as a PImage variable etc. Here the capture variable has been assigned the name ‘cam’.

Screen Shot 2015-01-13 at 03.24.25

In the setup section we need to tell processing that we’re going to be wanting to use the camera to capture, here I setup a ‘new’ capture which is going to use the capture data type on ‘this’ document and is going to span the entire width and height of the canvas. This is assigned to the variable cam which was defined at the top of the document.

Screen Shot 2015-01-13 at 03.24.42

Here there is an if statement with uses the ‘available’ method to determine if the camera is working or not, if the camera is ‘available’ then processing performs the function called ‘grabPixel’.

Screen Shot 2015-01-14 at 08.12.31

The basic cam example also used the ‘get’ method which I have discussed in a previous post to get the pixel value of the centre pixel on the screen, it then created a float variable called ‘v’ which used the map method to compare the pixel value to the brightness method and then finally an if statement which stated that if the brightness of the variable ‘v’ was greater than a certain value then it would perform a function, otherwise it would perform another function.

Because I wanted the pixel value to react to changes in colour instead of brightness I needed to work out a way to do this. I did this by creating a number of variables which would hold the values of the colours which I wished to make a rectangle change direction depending on if the pixel value was lower or higher than the value captured by the camera. Because the background of my room appears green on my camera I needed to take this into account, what I did was take a screenshot of the backround of my room from the video, and used this website (http://html-color-codes.info/colors-from-image/) to convert the colour of the image to a hex code, I then used a hex converter to convert the code to rgb. I used the rgb value to define the value of the color variable which would decide if the rectangle moved up or down.

Screen Shot 2015-01-14 at 08.16.35

Variables defined at the top of my document.

Screen Shot 2015-01-14 at 08.17.58

This shows my altered ‘grabPixel’ function, the colour c is defined as whatever the 25 by 25 pixel on the canvas is. The if statement decided whether or not the rect with the variable ‘move’ should add or take away height depending on if the colour value of ‘c’ is greater than the colour value of ‘d’.

The problem with this however is that the rectangle is responding to a single colour value where as I need it to respond to a change in colour values from a change in the background because I need a shape to move when the colour is different to the background and not if it is just a brighter or darker colour, I think my answer to solve this problem lies in the map method but I need to figure out how to make it work, I may have to also mess around with colour values to get the correct response. Though I think this is a good start and happy with the progress I have made so far.

Below is a video of me testing my code.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s