Be able to adjust the brightness of an image

What is Brightness? 🔆

Brightness is how light or dark an image looks. Think of it like turning up or down the volume on a speaker – only for light!

How Brightness Works

Every pixel in a digital image has a colour value. For a simple example, we’ll look at a single colour channel (Red, Green, or Blue). The brightness of a pixel can be increased or decreased by multiplying its value by a factor.

In formula form: NewPixel = OldPixel × Factor

Remember to keep the result between 0 and 255 – just like you can’t have a negative amount of light or more than the maximum brightness.

Adjusting Brightness in Code

Below is a simple JavaScript example that changes the brightness of an image using a canvas.

1. Load the image onto a canvas.
2. Get the pixel data with getImageData().
3. Loop through each pixel and apply the brightness factor.
4. Put the modified data back with putImageData().

<script>
const img = document.getElementById('myImage');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const factor = 1.2; // increase brightness by 20%

for (let i = 0; i < data.length; i += 4) {
  data[i]     = Math.min(255, data[i] * factor);     // Red
  data[i + 1] = Math.min(255, data[i + 1] * factor); // Green
  data[i + 2] = Math.min(255, data[i + 2] * factor); // Blue
  // data[i + 3] is Alpha (unchanged)
}
ctx.putImageData(imageData, 0, 0);
</script>
  

Practical Example: Brightening a Photo

Imagine you have a photo of a sunset that looks a bit dull. By applying a brightness factor of 1.3, the sunset will appear more vibrant and the colours pop.

• Original sunset: soft, muted tones
• After brightness adjustment: rich, warm colours

Try experimenting with different factors: 0.8 for a darker look, 1.5 for a very bright image.

Exam Tips 📚

When answering exam questions about image brightness:

• Explain the concept of pixel values and the 0–255 range.
• Show the formula: NewPixel = OldPixel × Factor and note the need to clamp values.
• Describe a simple algorithm or code snippet (JavaScript, Python, or pseudocode).
• Use an analogy, e.g., “brightness is like turning up the volume on a light switch.”
• Remember to mention that brightness changes affect all colour channels equally.

Good luck, and keep experimenting with images – the more you play, the easier it becomes! 🎉