Image Processing 6. Brightness, saturation, contrast,, gamma correction

Let's examine the most fundamental image correction parameters: brightness, saturation (without switching to HSV color model), contrast, and gamma.

Brightness#

We've already covered this, but let's briefly revisit it.

Saturation#

Adjusting saturation doesn't require to switch to the HSV color model, modify the values, and switch back to RGB again. You can achieve it through simple calculation of the difference between color components and the gray value:

for (let i = 0; i < dst.length; i++) {
  let r = src[i] & 0xFF;
  let g = (src[i] >> 8) & 0xFF;
  let b = (src[i] >> 16) & 0xFF;
  let gray = (r * 0.2126 + g * 0.7152 + b * 0.0722);

  r += (r - gray) * value / 255;
  g += (g - gray) * value / 255;
  b += (b - gray) * value / 255;
  
  if (r > 255) r = 255;
  else if (r < 0) r = 0;
  if (g > 255) g = 255;
  else if (g < 0) g = 0;
  if (b > 255) b = 255;
  else if (b < 0) b = 0;

  dst[i] = (src[i] & 0xFF000000) | (b << 16) | (g << 8) | r;
}

In the example code, I changed value / 255 to value / max, where max = (value < 0) ? 255 : 128. This was done solely to increase maximum saturation. Try both options, or reduce 128 and set saturation to the maximum. Unlike switching to HSV, this method provides more precision and smoothness. Photoshop has a Vibrance adjustment that does the same thing. Therefore, I don't recommend using Hue/Saturation in Photoshop solely for changing saturation.

Contrast#

Contrast represents the difference between the maximum and minimum brightness in an image. Look again at the color component calculation formula from the saturation example:

let gray = (r * 0.2126 + g * 0.7152 + b * 0.0722);
r += (r - gray) * value / 255;
g += (g - gray) * value / 255;
b += (b - gray) * value / 255;

What happens if we calculate the gray value for the entire image instead of a single pixel?

let gray = 0;
for (let i = 0; i < dst.length; i++) {
  let r = src[i] & 0xFF;
  let g = (src[i] >> 8) & 0xFF;
  let b = (src[i] >> 16) & 0xFF;
  gray += (r * 0.2126 + g * 0.7152 + b * 0.0722);
}
gray /= dst.length;

for (let i = 0; i < dst.length; i++) {
  let r = src[i] & 0xFF;
  let g = (src[i] >> 8) & 0xFF;
  let b = (src[i] >> 16) & 0xFF;

  r += (r - gray) * delta / 255;
  g += (g - gray) * delta / 255;
  b += (b - gray) * delta / 255;
  
  if (r > 255) r = 255;
  else if (r < 0) r = 0;
  if (g > 255) g = 255;
  else if (g < 0) g = 0;
  if (b > 255) b = 255;
  else if (b < 0) b = 0;

  dst[i] = (src[i] & 0xFF000000) | (b << 16) | (g << 8) | r;
}

We get contrast adjustment!

Gamma Correction#

Gamma defines the relationship between a pixel's numerical brightness value and its actual perceived brightness. Our vision perceives brightness non-linearly and is more sensitive to dark tones than bright ones. Conversely, digital camera sensors perceive all brightness linearly.

Applying gamma correction allows us to transition from the digital representation of brightness to human-perceived brightness, and vice versa.

Typically, a simple power function is used for gamma correction:

let gamma = parseInt($("#rangeGamma").val()); // 0.1 ~ 6.0
let level =  1.0 / (gamma / 100.0);

let pow = [];
for (let i = 0; i < 256; i++) {
  let value = (255 * Math.pow(i / 255.0, level) + 0.5);
  if (value > 255) value = 255;
  else if (value < 0) value = 0;
  else value = Math.floor(value);
  pow.push(value);
}

for (let i = 0; i < dst.length; i++) {
  let r = src[i] & 0xFF;
  let g = (src[i] >> 8) & 0xFF;
  let b = (src[i] >> 16) & 0xFF;
  
  r = pow[r];
  g = pow[g];
  b = pow[b];

  dst[i] = (src[i] & 0xFF000000) | (b << 16) | (g << 8) | r;
}

Since each pixel component has only 256 possible brightness values, a lookup table can be created for faster processing.

Thanks to gamma correction, previously unnoticeable details can appear in dark photos.