GMU:Processing im Park/Emilio Aguas/Cave and Light: Difference between revisions

From Medien Wiki
No edit summary
No edit summary
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Cave and Light==
==Cave and Light==
'''Whole process of the project step by step, please read the following texts to understand the idea.'''
----
===Stage 1 - Scientific background===


To create this project and develop an idea  I needed to understand what is it brightness exactly, so i did a research and found this explanation:  
To create this project and develop an idea  I needed to understand what is it brightness exactly, so i did a research and found this explanation:  
Line 12: Line 18:
taken from:  '''http://www.workwithcolor.com/color-properties-definitions-0101.htm'''
taken from:  '''http://www.workwithcolor.com/color-properties-definitions-0101.htm'''


----


So with this in mind I took the idea to make visible the idea of "Lightness" that is more comprehensible, BUT what is Lightness, well here is a little explanation.
So with this in mind I took the idea to make visible the idea of "Lightness" that is more comprehensible, but what is Lightness, well here is a little explanation.
 


====Lightness:====  
====Lightness:====  
Line 28: Line 34:


taken from:  '''http://www.workwithcolor.com/color-properties-definitions-0101.htm'''
taken from:  '''http://www.workwithcolor.com/color-properties-definitions-0101.htm'''
----
===Stage 2 - Practical approach===
I went out to the Ilm park to take some footage and also find inspiration about what to do with the  "lightness" idea; I was walking during the late afternoon and started to wondering why this big park has just a few lights in their walking paths, during the night you could not see anything is like if you were in a cavern.
Then I realize, how could be possible to discover an image or a landscape in the night, well you need a flashlight or a lighter to see what are your surroundings in the middle of the night, and so I try to recreate this in a simple way.
====First experiments====
Testing tint and HSB color mode
[[File:Test01.png‎ |thumb| left| 400px  | Changing tint values with the mouse]]
<br> Playing and understanding tint values in Videos
<br> Video test [https://vimeo.com/161185976  -click here.-]
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_test01  -click here-]
<br style="clear:both;">
Testing a matrix displaying videos from 16, 8, 4, 2. with a changing tint according to the mouse position on the X axis
[[File:Test02.png‎ |thumb| left| 400px  | Changing the arrangement of videos to display and test the memory cache of the laptop  ]]
<br> I tried different forms to display a lot of videos to see if my laptop was able to handle it, but mixing this with any kind of image processing code my machine was only capable to display 2 videos at the same time without any drop rate.
<br> Video test - 16 videos at the same time [https://vimeo.com/161185977  -click here.-]
<br> Video test - 8 videos at the same time [https://vimeo.com/161185980  -click here.-]
<br> Video test - 4 videos at the same time [https://vimeo.com/161185982  -click here.-]
<br> Video test - 2 videos at the same time [https://vimeo.com/161185984  -click here.-]
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_test02  -click here-]
<br style="clear:both;">
Playing with the pixels on the display video to find different results
[[File:Test03.png‎ |thumb| left| 400px  | Drawing pixels on top of the videos  ]]
<br> I was trying to understand how to draw and get information of the pixels of an image or a video and how to apply it.
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_test03  -click here-]
<br style="clear:both;">
After experiment with videos I decided that it would be better for a good development of the idea to work with images because my laptop was not able to deal with videos, pixel processing image and movement recognition at the same time.
----
===Stage 3 - Getting closer to the goal===
Now I am dealing with images and my laptop works smoother, so I decided after understanding how to interact with pixels, learn to display it in a proper way, so in this second approach I am actually dealing with the brightness property, which in the following video and images behaves like lightness.
[[File:Test05.png‎ |thumb| left| 400px  | Playing with brightness values that looks like lightness ]]
<br>Changing the brightness in this way gives me the look of light and darkness but it is too simple and boring so move on to the next experiment.
<br> Video test - light and darkness [https://vimeo.com/161201336  -click here.-]
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_test05  -click here-]
<br style="clear:both;">
The next experiment deals with the idea of discover an image through the movement of the mouse like it was a flashlight
[[File:Test06.png‎ |thumb| left| 400px  | lets follow the light ]]
<br>Taking the pixels of an image and displaying the RGB values of each pixel according to the proximity of the mouse cursor.
<br> Video test - light and darkness [https://vimeo.com/161204900  -click here.-]
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_test06  -click here-]
<br style="clear:both;">
I was testing how the pixels behave in three dimensions when a pixel is brighter than other and with the mouse movement.
[[File:Test07.png‎ |thumb| left| 400px  | Pixel explosion in the Z axis ]]
<br> I was trying to get the look of an explosion or fire but doesn't  work very well
<br> Video test - light and darkness [https://vimeo.com/161207387  -click here.-]
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_test07  -click here-]
<br style="clear:both;">
Playing with fire is a good idea.
[[File:Test08.png‎ |thumb| left| 400px  | Pixel chasing ]]
<br> Finally I made a computer vision program in which a small ball fallows the brightest pixels detected through the web camera, so finally I have my analog torch recognized by the program
<br> Video test - The ball fallows the fire [https://vimeo.com/161211249  -click here.-]
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_test08  -click here-]
<br style="clear:both;">
----
===Stage 4 - Finally I made it===
Combining different ideas of the previous experiment I was able to came up with this program.
The Idea, is that you have in this case 8 pictures that you could change clicking the mouse but you can't see the pictures because are hidden in the dark, just like if you were in a cavern, so to  see it you need a light source in this case for me works better with a lighter, also because produce fire so I feel like if i was in a modern age past cave. With the fire the program represents this like a torch that you could move around  and start to discover the pictures.
[[File:Final.png‎ |thumb| left| 400px  | Digital torch with real torch]]
<br>In the video the light moves like crazy because there is no source of light in front of the web camera so when I light the lighter the camera detects the change of brightness an update the brightness in the pixels values, so for now on if i move the lighter the digital torch is going to move, also the program has a code in this case to make the torch with a green filter, but this could be change also.
<br> Test of the final program - digital light fallowing real life lighter [https://vimeo.com/161216134  -click here.-]
<br>Source code [http://www.uni-weimar.de/medien/wiki/GMU:Processing_im_Park/Emilio_Aguas/sample_code_final  -click here-]
<br style="clear:both;">
----
===Conclusions===
- To understand the entire idea, this works better as an installation instead of just the video documentation.
- It was a challenge but really fun to do.
- I want to improve the code with videos instead of pictures, but i need to figure it out how to display videos and use computer vision, without processing crashing.

Latest revision as of 18:16, 1 April 2016

Cave and Light

Whole process of the project step by step, please read the following texts to understand the idea.


Stage 1 - Scientific background

To create this project and develop an idea I needed to understand what is it brightness exactly, so i did a research and found this explanation:

Brightness / (relative) Luminance:

"Brightness is an attribute of our perception which is mainly influenced by a color's lightness. This is probably why brightness and lightness are often mixed up. Brightness is not a color property, if used "correctly".

For one color of specific hue the perception of brightness is also more intense, if we increase saturation. A higher level of saturation makes a color look brighter.

In relation to other colors the brightness intensity of a color is also influenced by its hue. We can then speak of (relative) luminance to refer to brightness."

taken from: http://www.workwithcolor.com/color-properties-definitions-0101.htm


So with this in mind I took the idea to make visible the idea of "Lightness" that is more comprehensible, but what is Lightness, well here is a little explanation.


Lightness:

- "Lightness is a color term commonly used by (digital / analog) imaging experts.

- Lightness is usually one property of three when used to determine a certain color and measured as percentage value.

- Lightness defines a range from dark (0%) to fully illuminated (100%). Any original hue has the average lightness level of 50%.

- A painter might say lightness is the range from fully shaded to fully tinted.

- You can lighten or darken a color by changing its lightness value."

taken from: http://www.workwithcolor.com/color-properties-definitions-0101.htm


Stage 2 - Practical approach

I went out to the Ilm park to take some footage and also find inspiration about what to do with the "lightness" idea; I was walking during the late afternoon and started to wondering why this big park has just a few lights in their walking paths, during the night you could not see anything is like if you were in a cavern.


Then I realize, how could be possible to discover an image or a landscape in the night, well you need a flashlight or a lighter to see what are your surroundings in the middle of the night, and so I try to recreate this in a simple way.

First experiments

Testing tint and HSB color mode

Changing tint values with the mouse


Playing and understanding tint values in Videos


Video test -click here.-


Source code -click here-

Testing a matrix displaying videos from 16, 8, 4, 2. with a changing tint according to the mouse position on the X axis

Changing the arrangement of videos to display and test the memory cache of the laptop


I tried different forms to display a lot of videos to see if my laptop was able to handle it, but mixing this with any kind of image processing code my machine was only capable to display 2 videos at the same time without any drop rate.


Video test - 16 videos at the same time -click here.-
Video test - 8 videos at the same time -click here.-
Video test - 4 videos at the same time -click here.-
Video test - 2 videos at the same time -click here.-


Source code -click here-


Playing with the pixels on the display video to find different results

Drawing pixels on top of the videos


I was trying to understand how to draw and get information of the pixels of an image or a video and how to apply it.


Source code -click here-


After experiment with videos I decided that it would be better for a good development of the idea to work with images because my laptop was not able to deal with videos, pixel processing image and movement recognition at the same time.


Stage 3 - Getting closer to the goal

Now I am dealing with images and my laptop works smoother, so I decided after understanding how to interact with pixels, learn to display it in a proper way, so in this second approach I am actually dealing with the brightness property, which in the following video and images behaves like lightness.

Playing with brightness values that looks like lightness


Changing the brightness in this way gives me the look of light and darkness but it is too simple and boring so move on to the next experiment.


Video test - light and darkness -click here.-


Source code -click here-

The next experiment deals with the idea of discover an image through the movement of the mouse like it was a flashlight

lets follow the light


Taking the pixels of an image and displaying the RGB values of each pixel according to the proximity of the mouse cursor.


Video test - light and darkness -click here.-


Source code -click here-

I was testing how the pixels behave in three dimensions when a pixel is brighter than other and with the mouse movement.

Pixel explosion in the Z axis


I was trying to get the look of an explosion or fire but doesn't work very well


Video test - light and darkness -click here.-


Source code -click here-

Playing with fire is a good idea.

Pixel chasing


Finally I made a computer vision program in which a small ball fallows the brightest pixels detected through the web camera, so finally I have my analog torch recognized by the program


Video test - The ball fallows the fire -click here.-


Source code -click here-


Stage 4 - Finally I made it

Combining different ideas of the previous experiment I was able to came up with this program.

The Idea, is that you have in this case 8 pictures that you could change clicking the mouse but you can't see the pictures because are hidden in the dark, just like if you were in a cavern, so to see it you need a light source in this case for me works better with a lighter, also because produce fire so I feel like if i was in a modern age past cave. With the fire the program represents this like a torch that you could move around and start to discover the pictures.

Digital torch with real torch


In the video the light moves like crazy because there is no source of light in front of the web camera so when I light the lighter the camera detects the change of brightness an update the brightness in the pixels values, so for now on if i move the lighter the digital torch is going to move, also the program has a code in this case to make the torch with a green filter, but this could be change also.



Test of the final program - digital light fallowing real life lighter -click here.-


Source code -click here-


Conclusions

- To understand the entire idea, this works better as an installation instead of just the video documentation.

- It was a challenge but really fun to do.

- I want to improve the code with videos instead of pictures, but i need to figure it out how to display videos and use computer vision, without processing crashing.