Friday, September 10th, 2010
The heart of his tutorial is using getImageData() and looping through the red, green, blue, and alpha values of each pixel to change it’s luminance:
So, what can we use to make an image black and white? The luminance. The luminance is how much a color is luminous to the human eye and it’s used to measure the clipping white in video editing systems, for example. In video editing system a white color that “break” the screen is a white that is too white to be represented on a common TV.
This is important because by calculating the average number between red, green and blue values we could obtain a value for every pixel that represent a static mathematical representation of the color luminance.
But there’s a problem, an human eye see colors dynamically. For example, if we take similar shades of blue and green, our eyes will detect the green color more luminous than the blue. In our algorithm we could use the static average formula, but our image will be too flat, and we’ll lose a lot of color depth.
So, let’s introduce the luminance formula: red x 0.3 + green x 0.59 + blue x 0.11.
Resulting in code that looks as follows:
var imgd = context.getImageData(0, 0, 500, 300);
var pix = imgd.data;
Posted by Brad Neuberg at 5:30 am