Intro

The Liquid Camera is a web application, called “liquid.js”. There – users can take a picture with their webcam or drag and drop some pictures into this application. One can apply different filters and share the process and the result live with some other devices e.g. a mobile phone or another computer.

The goal of our project was to get an insight in the field of image processing. This means one has to understand how a image is stored and how one can alter its information to obtain certain effects e.g. grayscale or blur. To test the knowledge filters should be written with javascript hence they can be run on an ordinary browser.

RGB

How are images stored on a computer?

Images are actually a long string of numbers between 0 and 255:
192 213 135 255 2 0 200 255 ...

Four of them in a row define one pixel:
192 213 135 255 2 0 200 255 ...

They describe the following things:

Position Number Meaning
1 192 The intensity of red
2 213 The intensity of green
3 135 The intensity of blue
4 255 The alpha value (transparency of the pixel)

Kernel

A kernel, in maths also known as matrix, is in our case of use a rectangular array of numbers:

Picture: Kernel of our horizontal sobel filter.


We used it to change the pixels not on itself but also on the surrounding pixels:

Picture: http://machinelearninguru.com/_images/topics/computer_vision/basics/convolution/1.JPG, 15.09.2018, edited


To understand it better, a small example:

Picture: Example from our presentation.

Examples

You can find all important filters with their formula in our Poster.

Original


Picture: http://zyzixun.net/data/out/72/3412963-fruits-wallpapers.jpg, 12.09.2018

RGB

In this filter, you can define, which color(s) you want to see.

Greyscale

Threshold

Negative (Invert)

Contrast

Darker & Brighter

Sobel (Detect Edges)

Ascii (Pixel replaced by Letters)

Conclusions

We successfully learned to code and understand image processing filters. Not only the basic filters which modify the colours of each pixel, basing the computation only on the pixel itself, but also more complex filters whose computation is based on kernel multiplications which take the surrounding pixels into account. These advanced filters can sharpen or blur an image and even highlight edges which are vital for advanced algorithms, e.g. face recognition.

Media

PWC Promo