# Processing images on the web!

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.

1. Grayscale
`data[i] = data[i+1] = data[i+2] = 0.2126 * r + 0.7152 * g + 0.0722 * b`
2. 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;```
3. X-Ray (also called invert)
```data[i] = 255 - r;
data[i+1] = 255 - g;
data[i+2] = 255 - b;```
4. Brightness
```var amt; //The brightness value
data[i] = r + amt;
data[i+1] = g + amt;
data[i+2] = b + amt;```
5. Contrast
```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!