Liquid Camera PROJECT REPORT STUDY WEEK FASCINATING INFORMATICS. N. Ionescu, L. Kauflin & F. Rickenbach

Transcription

1 PROJECT REPORT STUDY WEEK FASCINATING INFORMATICS Liquid Camera N. Ionescu, L. Kauflin & F. Rickenbach Alte Kantonsschule Aarau, Switzerland Lycée Denis-de-Rougemont, Switzerland Kantonsschule Kollegium Schwyz, Switzerland Supervised by: Gallidabino Andrea Date: 14 September

2 Abstract The Liquid Camera is a web application where the users can take pictures with the webcam or drag and drop images inside a web browser. They can apply different filters on them and send the result to other client devices like phones or laptops that use the same server (p2p). 1. Introduction / Question The Liquid Camera application is built on top of three main languages. HTML is used to create the skeletal structures of the Website. With CSS, it is possible to design the layout of the website with colors and different fonts. To modify the pictures, we coded image filters with JavaScript. However, before starting editing digital pictures, we had to understand how images are structured. Every picture has his own meta information in which the height, width and format of the image is stored. The image itself is composed by pixels. A pixel consists of a composition of four different values: the red, blue, and green values representing the colors of the pixel and an alpha value representing its transparency. To modify the image, we can change the color values of the pixels. 2. Materials & Methods HTML: The skeleton of the website was already created but to understand the whole application we learned the Hyper Text Markup Language or in short HTML. It is a special programming language which uses tags to define in the browser how the webpage should look like. 2

3 CSS: Cascading Style Sheets are used to design the web page. Our tutor already wrote the basic CSS of the web page, so we could build up on this. JavaScript: It is a scripting language and we have never worked with before, so it was a bit difficult to start. But in the end, we were able to create the planned filters. 3. Results With JavaScript and the gained knowledge of how a digital image looks like we created ten different filters. Furthermore, we are now able to create filters on our own. The basis of digital image: Every picture has a so-called header or meta information, which contains the title, the file size, the resolution and other information about the image. Additionally, every image is stored as an array with the values for every color of each pixel. Depending on the color models used, the arrays have different layouts. We only worked with the RGBA model, which stands for Red Green Blue Alpha. We changed the values of the red, green and blue value of every pixel to create filters. We coded loops to go through the whole image and get the pixel data and modified them later on. Grayscale: To show the color gray, every color value of the pixel should have the same value. We added the values of red green and blue and divided it by three to get the average value. Then we stored it as a new image and sent it to the screen. To make an optimized grayscale we used this formula: val. = red green blue That value is called the luminescence. 3

4 Negative: For this filter, we had to invert the color values from every pixel. For instance, the RGB values of one pixel are 120,150,160. For its negative values, they would become 135, 105, 95. To get them, we subtract the color values from the maximum value of a color, which is 255. Sharpen: To sharpen a picture, we made a convolution of every pixel using the following kernel: To make a convolution, we took the value of the pixel and applied the kernel onto it. Then we took the sum of the color values of the pixels touched by the kernel times the value of the kernel. To show the result, we implemented the sum into the value of the new pixel data. 4

5 Blur: To blur an image, we made a convolution of every pixel using this kernel: 1/9 1/9 1/9 1/9 1/9 1/9 1/9 1/9 1/9 We could also use a bigger kernel to get different blurring effects but our code is not prepared for it. Threshold: We fixed a threshold value and checked the luminescence of every pixel. If it is higher than the threshold, the final color of that pixel would be white. If it is below, it would be black. Sobel: First, we applied the grayscale filter onto our image. Then we did two convolutions with kernels that detect the edges horizontally and vertically. For each color value of a pixel, we used the following formula: hoooooooooooooooooo vvvvvvvvvv 2 + vvvvvvvvvvvvvvvv vvvvvvvvvv 2 To make a colored sobel filter, we merged that value only for the red component, for example, and added the horizontal value to the green and the vertical value to the blue. 5

6 Brightness: To adjust the brightness of a picture we added the same value, for example 40, to every color value of a pixel. We still needed to make sure the final value wasn t higher than 255. Therefore, we created a bound function. ASCII conversion: We had a predefined array full of ASCII characters. For every pixel, we looked at its luminescence and depending on it, we associated the pixel with a character. 4. Discussion After learning how to make all these filters, we acquired the skill to code other ones quite easily. For example, we can make a combination of two filters, extract and show only one RGB value of a picture, mirror the image horizontally and vertically, heighten the contrast of an image, color the sobel, try different kernels and a lot more. The possibilities are almost infinite and we had a lot of fun trying different combinations of the filters. Some of the filters were quite hard to program but in the end, we were proud of what we did. It was very useful to learn all the basic notions of image rendering. The ASCII filter was very interesting and we implemented an option to make all the characters colored, which was even more impressive. Overall, it was a pleasure to work with images, learn new programming languages and see the results on the website. 5. Acknowledgements We would like to thank Andrea Gallidabino for helping us during this week. He made everything possible and this project would have been impossible without his supervision. 6