## Image Filters

Learn the secrets behind pixels, image blurs, and all your favourite Instagram filters!

Thanks to micro-chips and mobile phones, it only takes a few seconds to snap a photo, pop on a snazzy filter, and share your masterpiece with people all over the world. As easy as breathing! So easy, in fact, that we sometimes forget how remarkable this technology is. Let’s take a look at on one of the many juicy pieces of this puzzle: image filters. Specifically: brightness, saturation, and blur filters.

### Breaking Down a Digital Photo

Every digital image is divided into a grid of tiny squares — often thousands and thousands of squares — called pixels. Open any picture you want and zoom in really close. Sooner or later, even the smoothest of lines become blocky and chunk-like.

In a black and white (greyscale) photo, computers typically represent each pixel with a single number between 0 and 255, where “0” is pure black while “255” is pure white, and every other number is a shade in between. Take a look at the values extracted from this black & white picture of a kitty, downsized to be 15×15 pixels:

Since everything is either pure black or pure white, you can actually see the outline of the kitty in the numbers themselves!

Storing colour pixels on a digital device is a bit more tricky. In pure numbers, what’s the difference between red-purple, fuchsia, Hollywood cerise, and fandango?

There are a couple systems, but the most common one is RGB, or “Red Green Blue”, which mimics the way our eyes work. Essentially, each digital pixel is represented by three numbers between 0 and 255, each one corresponding to a different base colour (or “channel”). If a pixel has equal parts red and blue, but no green, the result is a shade of pure purple. If you slowly increase the value of the red channel, the pixel becomes more and more fuchsia. Throw some green into the mix and the colour becomes less bright.

To get a good feel for how this works, spend a few minutes playing around with an online digital RGB slider.

Try the following values:

• (R: 150, G:0, B:150)
• (R: 200, G:0, B:150)
• (R: 200, G:50, B:150)

So if we take this 15×15 picture of a snail and extract the first, middle, and last columns of its pixels’ RGB values, we get something like this:

With a bit of investigation, can you match the middle column of numbers to the exact column of pixels in the picture? How would you check that your guess is right?

### Brightness and Saturation

“Brightness” (sometimes called “exposure”) controls how dark or light an image is. Let’s see what happens to pixel values when we boost the brightness of our tiny snail!

From a programming perspective, all we’re doing is increasing the R, G, and B values of each pixel by a fixed amount. Each colour is being brightened equally, with the exception of pure black. Not all brightness filters behave this way; some would transform that same black into a shade of smoky grey.

Saturation controls how “colourful” an image is. To make a colour a more intense, you increase the values in one or two channels towards 255 while the leftover channel is decreased towards 0. This contrast, where the values of different colours are drawn towards opposite extremes, is what makes colours extra vivid.

The most elegant way of coding a saturation filter involves a colour system called HSB or HSV, which stands for “Hue, Saturation, Brightness / Value”. Like RGB, each colour pixel is represented using three numbers. Hue runs from 0 to 360 and controls the actual colour: red, yellow, pink, salmon, green, chartreuse, or otherwise. Picture a wheel that starts with red and passes through all the colours of the rainbow as you go around. Saturation controls the intensity of the colour, i.e. how much “grey” it contains: 0%, 100%. Similarly, brightness controls how dark a colour is or how much “black” it contains.

Converting a colour stored with the RGB system into that same colour stored with the HSB system is a bit of an art, but once done, it’s very simple to increase or decrease saturation a specific amount.

To see the process in action, you can check out colorizer.org. This website features colour sliders for multiple systems — RGB and HSV, plus others like CMYK (used for printers) and LAB. Changing the values in one system automatically shifts the sliders of the others, making it possible to see exactly how the different colour systems relate to each other.

### Blurs

While photographers and Instagram users might love making their pictures pop with extra brightness and saturation, computer scientists know that the best filter is the blur.

When you blur a picture, you erase small pesky details and reduce a picture to its biggest, most obvious features. In other words, you’ll be able to distinguish a person’s silhouette, but the wrinkles in their shirt and the freckles on their skin are going to be smoothed over. Getting rid of irrelevant details makes it easier for computers to detect lines and extract features, which in turn make it possible to recognize shapes and interpret them. Basically, blurs are the basis for computer vision.

Code-wise, a blur is done by making each pixel more like its neighbours. What’s special about this filter is that each pixel isn’t modified in isolation; its final value depends on the pixels around it.

In a Mean Blur, you might sum the value of a pixel with the values of the pixels above, beside, and underneath it, then take the average. There are several types of blurs, like Gaussian Blurs, Radial Blurs, and Motion Blurs. They follow the same principle, but they all place a slightly different emphasis on which neighbouring pixels are selected and how much importance is placed on their value.

All in all, image filters are both extremely simple and extremely tricky. The basic concept is to access raw pixel values and fiddle with their intensity in order tweak a picture’s appearance. In practice, there’s lots of math. Decades of research in image processing has helped us discover filtering methods that are efficient and effective — so efficient that they can be done in seconds on a computer that fits in your pocket!

#### Illustration of the HSB system

http://www.tomjewett.com/colors/hsb.html

#### RGB and HSV / HSB Color Spaces

http://colorizer.org/

#### Image Manipulation: Filters and Convolutions (class slides)

https://www.cs.utexas.edu/~theshark/courses/cs324e/lectures/cs324e-6.pdf

## Author

• Patricia Foster is a computer science student at Carleton University. In addition to working professionally as a software developer, she spends her time reading and writing.

### Also In The August 2018 Issue

Use SketchUp to recreate the famous optical illusion that grows and shrinks people around the room.

Learn what makes a good rogue-like game and how to make one yourself.

Unleash your inner digital chef through this simple (but mouth-watering) Python activity.

Dinosaur fossils, STEM podcasts, and a day in the life of a paleontologist.

A fun introduction to programming games with fantasy computers. The 70s and 80s are back in style!

Using solar-powered backpacks to track the movements of snowy owls.

Real life treasure hunts are a way to get outdoors, learn map skills, and have fun finding hidden caches near you.

Tips & trips to help you have a great time on the Internet, even when others don’t behave well.

How scientists finally cracked the code behind the mysterious language of Ancient Egypt.

Two small projects introducing you to Edublocks, a language that bridges the gap between Scratch and Python.

Take your CLI skills to the next level as you combine, redirect, and script commands.

It looks like JavaScript, has a Python aesthetic, and integrates easily with C/C++. Meet Lua: a scripting language for fantasy computers.

How the high-tech LIGO made a huge discovery and won its three founders a Nobel Prize.

A simple Python activity to change even the most skeptical students into coding enthusiasts!

An introduction to the devices that’ll make your robots zoom, skitter, and spin.

Learn the secrets behind pixels, image blurs, and all your favourite Instagram filters!

Links from the bottom of all the August 2018 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about computer science, software programming, and technology for August 2018.

Interested but not ready to subscribe? Sign-up for our free monthly email newsletter with curated site content and a new issue email announcement that we send every two months.

No, thanks!