HTML5's ImageData splits pixels into RGBA channels, consisting of four corresponding integers between 0 and 255 stored in an array. When only prime indicies are displayed, the image appears in all shades of green. That's because green corresponds to indicies 1, 5, 9, 13, 17... in the ImageData Array. Pretty cool, huh?
Each pixel's brightness is adjusted based on it's location on the canvas. The general offset is calculated in radians, and the sine of the offset divided by the canvas width is used to recreate the pixel color with a new luminosity. (Math.sin(offset/600))This results in a linear brightness effect oriented diagonally.
The pixel randomizer iterates over the ImageData Array, selecting random pixels for insertion. This results in a dotting effect to fill in the image.
In Image Processing luminosity is the value given to represemt RGB on the gray scale. It is used for much more than converting images to Black and White, but to achieve grayscale you can calculate a pixel's luminosity using some variation of the formula: (0.3 * Red) + (0.6 * Green) + (0.1 * Blue), and assigning it to each channel(Except Alpha in this case).
Another example use of luminosity, but instead of aiming for a gray value, we set all RGB channels to 255 or 0. This is dependant upon the threshold integer, which you have likely seen in image processing software. This results in pixels being entirely black or entirely white, and makes for some great effects and is useful in vector creation.
To invert the colors of an image, RGB values are subtracted from their maximum(255). This produces the inverse value: 255(100%) - 178(70%) = 77(%30)
Sepia Tone adds a bit of color to a grayscale image. For processing
a colored image, it is converted to grayscale, then the Red and Green
channels are added in addition to the luminosity value. These are adjustable,
but something similar to:
Red = (0.3 * R) + 150, Green = (0.6 * G) + 50, Blue = (0.1 * B)
