Part I - Color Detector

Explanation

For this requirement, two threshold values are used to determine each pixel’s color values. Using Color Threshold’s knowledge of accessing and altering RGB components, each pixel’s component is compared against two respective threshold values. If the value is lower than the lower boundary or higher than the upper boundary, that component’s value is set to black. If the value is between the lower and upper boundary, the value is set to 255 which increases that pixel’s component color.

Above is an image where the red threshold values are altered. Other colors are not present because their threshold values have no middle region (128, 128). The expected results depend on threshold values and the image itself (RGB in each pixel).

Question

1.       Describe how you could use this for face detection.

By using two different suitable thresholds, we can control the pixels to be displayed if they are within the threshold boundary. The pixels outside the boundary can then be altered to be ‘edited’ out, such as setting them to black. This way, we can get the image of the face alone, assuming correct thresholds were used.

2.       Would this method be light-dependent? In other words, will it work on the beach on a sunny day as well as indoors, or do you have to change settings?

I think it is light-dependent. Since this method relies on color detection, it is likely to mistake some other parts of the picture to be the face especially when the person’s face and the background are similar in color. Additionally, if a source of colored light is shone upon the part or most of person’s face, it will be even more difficult to detect the skin tone, hence not resulting in accurate face detection.

Reflection

An unexpected difficulty I faced while doing this is using the .value to compare between each slider’s values. There are parts where I can definitely tell that A.value is bigger than B.value, but JavaScript took it the other way around. (I confirmed this by using ‘alert’ to display out the values). I figured it might be because of some string-related issues, so I fixed it using Number(X.value) which put my half-an-hour-of-stressful-troubleshooting to an end.

After doing the histograms and things like that, I feel like I am getting better at using histograms. Forgive me for being happy here; it's a very small step but it feels really good to know I've improved!