The most Progressed Iteration cycle


Analysis And Design


It was now time to re design from what I had previously evaluated. I have determined that neither brightness tracking or colour tracking were going to be the best option for tracking the people. As the environment doesn’t have enough consistency in either of the factors of brightness or colours. If i was to use colours an environment with white walls would be ideal, but we have to work with what we have. For this instance I will be using the library for Face detection. Building on from this as is the same with the previous iteration cycles I will use this tracking to interact with my piece of art.

I have decided to change my approach of defining the boundary point at which i want it to trigger the changes in transparency. I decided to create and three floating values as opposed to using pixel measurements. these floats would would represent left right and central.

For the purpose of development I have used colours instead of images to start with. This is to make it easier to understand the logics.


Implementation


  • float aL, aM, aR; the three floating values for left right and central (middle)
  • float uW; (ultimate width)
  • uW = width / 3;   (ultimate width = width/3) this gives the exact correct width for each individual section as a third.
  • aL = width – tx; the left width
  • aR = tx; the right 
  • aM = (height * 0.5) – abs(tx – width*0.5); 

 “abs Calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive”. This was used because I needed this to always remain a positive value.

  • fill(255,0,0, aL); filling the shape with red
  • rect(0, 0, uW, height);
  • fill(0,255,0, aM); filling the shape with green
  • rect(uW, 0, uW, height);
  • fill(0,0,255, aR); filling the shape with blue
  • rect(uW*2, 0, uW, height);

the reason behind colouring the rectangles in the high contrast colours is because aesthetically they are not that pleasing they are very clear and make it easy to calculate the logics of the actions.


Testing  & Evaluation


Screen Shot 2015-01-21 at 15.37.57

This shows that the right movement was in direct correlation with the opacity of the two thirds leaving only the desired third visible

Screen Shot 2015-01-21 at 15.38.11

This is another example of my testing which shows that the opposite side also had the correct correlation.


Analysis And Design


In order to view the exact point at which the face is detected on the x axis I needed to implement some code this was only for use during the development stage. Below you can see the code I used.


Implementation


float tx = faces[i].x+(faces[i].width/2); this gives you the centre point of the boxes which are created around the faces this makes it more precise.

I put this in because beforehand the tracking wasn’t precise enough so I used this code and combined it with this code

line(tx,0,tx,height);

This meant that I had a line showing me the exact point on the x axis that it was tracking. This made it easier to determine how well the interaction between the user and the computer was working.


Analysis and Design


 I reached a point where the functionality of my code was good enough. From this point it was time to take my work to the next stage. This meant I would have to change the colours and instead I would replace them with three images. Each image is a third of the size of the canvas. So I now had to create the art piece.


Implementation


img = loadImage(“left.jpg”);
tint(255,map(aM, width , 0, 0,255));
image(img,0, 0, uW, height);

img = loadImage(“central.jpg”);
tint(255,map(aM, width , 0, 0,255));
image(img,uW, 0, uW, height);

img = loadImage(“right.jpg”);
tint(255,map(aR, width , 0, 0,255));
image(img,uW*2, 0,uW,height);


Testing


http://youtu.be/BtPfAMJtQuQ


Evaluating


As you can see from the video the functionality wasn’t working as well as i wanted. So after this I continued working on my code.

img = loadImage(“left.jpg”);
tint(255,map(aM, uW ,0, 0,255));
image(img,0, 0, uW, height);

img = loadImage(“central.jpg”);
tint(255,map(aM, uW*2,uW , 0,255));
image(img,uW, 0,uW, height);

img = loadImage(“right.jpg”);
tint(255,map(aR, width , 0, 0,255));
image(img,uW*2, 0,uW,height);


Analysis and design


callumsulshartinprogresss5

This is what it should have looked like if you were standing in front of the camera and central.

ifright

This is what it should have looked like if you stood in front of the camera but to the right.

ifleft

This is what it should have looked like if you stood in front of the camera but to the left.

Advertisements

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 )

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