For the colour values, we can process it in different ways. Here’s an example of how to turn an image grayscale:
data[i] = data[i+1] = data[i+2] = 0.2126 * r + 0.7152 * g + 0.0722 * b; //CIE luminance that matches the brightness level of our eyes.
It’s basically a piece of math, isn’t it? In here I’ll show you some effects’ math equivalents that you can apply to your code easily.
data[i] = data[i+1] = data[i+2] = 0.2126 * r + 0.7152 * g + 0.0722 * b
- Sepia (old-style brownish worn-away)
data[i] = 0.393 * r + 0.769 * g + 0.189 * b; data[i+1] = 0.349 * r + 0.686 * g + 0.168 * b; data[i+2] = 0.272 * r + 0.534 * g + 0.131 * b;
- X-Ray (also called invert)
data[i] = 255 - r; data[i+1] = 255 - g; data[i+2] = 255 - b;
var amt; //The brightness value data[i] = r + amt; data[i+1] = g + amt; data[i+2] = b + amt;
var level; //The contrast level level = Math.pow((level+100)/100,2); //Map the linear value to an exponential curve to make the change in contrast bigger data[i] = ((r/255-0.5)*level+0.5)*255; data[i+1] = ((g/255-0.5)*level+0.5)*255; daa[i+2] = ((b/255-0.5)*level+0.5)*255;
We’ll talk about more effects later. Stay tuned and practice more on this!