|
|
|
|
6
|
|
6
|
|
7
|
[Verano 2016 - Ive - Coralys]
|
7
|
[Verano 2016 - Ive - Coralys]
|
8
|
|
8
|
|
9
|
-Two common tasks when working with arrays of data is to search for and sort the data in ascending or descending order. Two well known simple sorting algorithms are the Selection Sort and the Bubble Sort. Sorting algorithms make up part of many programs; for example, contact lists, search engines, etc. In this laboratory experience, you will complete an application to process images and pratice the use of sorting algorithms. You will also learn about the `QImage` library from `Qt` and about the median filter used in image processing to remove noise, in this case, a pesky tourist.
|
|
|
|
|
9
|
+Two common tasks when working with arrays of data is to search for and sort the data in ascending or descending order. Two well known simple sorting algorithms are the Selection Sort and the Bubble Sort. Sorting algorithms make up part of many programs; for example, contact lists, search engines, spreadsheets, etc. In this laboratory experience, you will complete an application to process images and pratice the use of sorting algorithms. You will also learn about the `QImage` library from `Qt` and about the median filter used in image processing to remove noise, in this case, a pesky tourist.
|
10
|
|
10
|
|
11
|
-## Objectives
|
|
|
12
|
|
11
|
|
13
|
-1. Practice sorting arrays by selection and the bubble method.
|
|
|
|
|
12
|
+## Objectives:
|
|
|
13
|
+
|
|
|
14
|
+1. Practice sorting arrays by the selection and the bubble method.
|
14
|
|
15
|
|
15
|
2. Practice the use of decision and repetition structures.
|
16
|
2. Practice the use of decision and repetition structures.
|
16
|
|
17
|
|
|
|
|
|
27
|
|
28
|
|
28
|
Before arriving at the laboratory you should have:
|
29
|
Before arriving at the laboratory you should have:
|
29
|
|
30
|
|
30
|
-1. Reviewed the selection sort and bubble sort algorithms.
|
|
|
|
|
31
|
+1. Reviewed the selection sort and the bubble sort algorithms.
|
31
|
|
32
|
|
32
|
2. Familiarized yourself with the `push_back()`, `at(i)`, `size()`, and `clear()` methods in the C++ `vector` class.
|
33
|
2. Familiarized yourself with the `push_back()`, `at(i)`, `size()`, and `clear()` methods in the C++ `vector` class.
|
33
|
|
34
|
|
|
|
|
|
41
|
|
42
|
|
42
|
---
|
43
|
---
|
43
|
|
44
|
|
44
|
-## Pixels:
|
|
|
|
|
45
|
+## Pixels
|
45
|
|
46
|
|
46
|
-The smallest element in an image is called a pixel. This unit consists of a single color. Since each color is a combination of tones of the primary red, green and blue colors, it is coded as an unsigned integer whose bytes represent the tones of red, green and blue of the pixel (Figure 1). One fourth of a byte specifies what is known as the *alpha composition*, which defines the opacity of the pixel (0xff is completely opaque and 0x00 is completely transparent, i.e. invisible). This combination is known as the *ARGB* of the color for “Alpha-Red-Green-Blue”. For example a pixel of pure red has an RGB representation of `0xffff0000`, while a pixel of pure white has an RGB representation of `0xffffffff` (since the color white is the combination of the red, green and blue tones in their maximum intensity). Throughout this laboratory experience, we will assume the pixel’s alpha has total opacity (0xff).
|
|
|
|
|
47
|
+The smallest element in an image is called a pixel. This unit consists of a single color. Since each color is a combination of tones of the primary colors red, green and blue, it is coded as an unsigned integer whose bytes represent the tones of red, green and blue of the pixel (Figure 1). One fourth of a byte specifies what is known as the *alpha composition*, which defines the opacity of the pixel (0xff is completely opaque and 0x00 is completely transparent, i.e. invisible). This combination is known as the *ARGB* of the color for “Alpha-Red-Green-Blue”. For example, a pixel of pure red has an RGB representation of `0xffff0000`, while a pixel of pure white has an RGB representation of `0xffffffff` (since the color white is the combination of the red, green and blue tones in their maximum intensity). Throughout this laboratory experience, we will assume the pixel’s alpha has total opacity (0xff).
|
47
|
|
48
|
|
48
|
---
|
49
|
---
|
49
|
|
50
|
|
|
|
|
|
53
|
|
54
|
|
54
|
---
|
55
|
---
|
55
|
|
56
|
|
56
|
-In `Qt`, a `QRgb` type is used to represent **ARGB** values. Using certain functions that will be described below we can obtain the red, green and blue components of the `QRgb` value of a pixel and manipulate the images. In this lab we will not manipulate the alpha channel of the pixels.
|
|
|
|
|
57
|
+In `Qt`, a `QRgb` type of data is used to represent **ARGB** values. Using certain functions that will be described below, we can obtain the red, green and blue components of the `QRgb` value of a pixel and manipulate the images. In this laboratory experience we will not manipulate the alpha channel of the pixels.
|
57
|
|
58
|
|
58
|
-Today’s laboratory experience will use the `QImage` class. This class permits access to the data of the pixels of an image to manipulate it. The documentation for the `QImage` class can be found in http://doc.qt.io/qt-4.8/qimage.html.
|
|
|
|
|
59
|
+Today’s laboratory experience will use the `QImage` class. This class allows access to the data of the pixels of an image in order to manipulate it. The documentation for the `QImage` class can be found in http://doc.qt.io/qt-4.8/qimage.html.
|
59
|
|
60
|
|
60
|
---
|
61
|
---
|
61
|
|
62
|
|
|
|
|
|
66
|
|
67
|
|
67
|
Image processing is used in a wide variety of socially relevant applications. People daily apply image processing filters to their pictures before posting them in a social media. Social media, cameras, and mobile devices use image processing for face recognition. Researchers use image processing to count organisms inside a scanned space, to detect anomalies inside computer tomography (CT) scans, and in general to reveal information about scanned objects.
|
68
|
Image processing is used in a wide variety of socially relevant applications. People daily apply image processing filters to their pictures before posting them in a social media. Social media, cameras, and mobile devices use image processing for face recognition. Researchers use image processing to count organisms inside a scanned space, to detect anomalies inside computer tomography (CT) scans, and in general to reveal information about scanned objects.
|
68
|
|
69
|
|
69
|
-The median filter is one of the simplest filters used in image processing. It is very useful for removing undesired objects from images. Let's say that you encounter the most interesting tree in the world and you would like to photograph it. You set up your photography equipment, the light is perfect, and the colors are beautiful. To be sure that you capture the perfect photo, you take three of them. However, at the exact moment that the photos were taken a pesky tourist photobombed your master creation. The median filter will help you remove the tourist from the photo by merging the three photos into a tourist-free nature shot.
|
|
|
|
|
70
|
+The median filter is one of the simplest filters used in image processing. It is very useful for removing undesired objects from images. Let's say that you encounter the most interesting tree in the world and you would like to photograph it. You set up your photography equipment, the light is perfect, and the colors are beautiful. To be sure that you capture the perfect photo, you take three of them. However, at the exact moment that the photos were taken, a pesky tourist photobombed your master creation. The median filter will help you remove the tourist from the photo by merging the three photos into a tourist-free nature shot.
|
70
|
|
71
|
|
71
|
Given three or more images of the same space, a median filter works as follows: for each pixel position $$(x,y)$$ find the median color among the images, then use the median color in the merged image.
|
72
|
Given three or more images of the same space, a median filter works as follows: for each pixel position $$(x,y)$$ find the median color among the images, then use the median color in the merged image.
|
72
|
|
73
|
|
|
|
|
|
84
|
|
85
|
|
85
|
For example, the median of {3,5,2,7,11} is 5 since the ordered array is {2, 3, 5, 7, 11}. The median of {3,9,3,2,10,11} is 6 since the ordered array is {2, 3, 3, 9, 10, 11} and the average of 3 and 9 is 6.
|
86
|
For example, the median of {3,5,2,7,11} is 5 since the ordered array is {2, 3, 5, 7, 11}. The median of {3,9,3,2,10,11} is 6 since the ordered array is {2, 3, 3, 9, 10, 11} and the average of 3 and 9 is 6.
|
86
|
|
87
|
|
87
|
-### Median of pixels
|
|
|
|
|
88
|
+
|
|
|
89
|
+### Median of Pixels
|
88
|
|
90
|
|
89
|
The method we will be using in this laboratory experience to acquire the median of various pixels will be the following: we will determine the median of its red, green and blue components, and then create a new pixel using these medians. The following example illustrates the procedure.
|
91
|
The method we will be using in this laboratory experience to acquire the median of various pixels will be the following: we will determine the median of its red, green and blue components, and then create a new pixel using these medians. The following example illustrates the procedure.
|
90
|
|
92
|
|
91
|
-#### Example:
|
|
|
|
|
93
|
+**Example:**
|
92
|
|
94
|
|
93
|
Suppose we have to find the median of the three pixels with values `0xff223344`, `0xff112233`, and `0xff001155`.
|
95
|
Suppose we have to find the median of the three pixels with values `0xff223344`, `0xff112233`, and `0xff001155`.
|
94
|
|
96
|
|
|
|
|
|
100
|
|
102
|
|
101
|
Notice that the result can be a pixel with a color that did not exist among the originals. Despite that, this detail does not affect the application we will be implementing in this laboratory experience.
|
103
|
Notice that the result can be a pixel with a color that did not exist among the originals. Despite that, this detail does not affect the application we will be implementing in this laboratory experience.
|
102
|
|
104
|
|
|
|
105
|
+
|
103
|
---
|
106
|
---
|
104
|
|
107
|
|
105
|
!INCLUDE "../../eip-diagnostic/pesky-tourist/en/diag-pesky-tourist-02.html"
|
108
|
!INCLUDE "../../eip-diagnostic/pesky-tourist/en/diag-pesky-tourist-02.html"
|
|
|
|
|
156
|
|
159
|
|
157
|
`int greenContent = qGreen(originalImage.pixel(1,1));`.
|
160
|
`int greenContent = qGreen(originalImage.pixel(1,1));`.
|
158
|
|
161
|
|
159
|
-5. The following code assigns to the red component of the pixel `(1, 1)` of `editedImage` the average of the values of the red tone that are in pixel `(1, 1)` of `originalImage1` and `originalImage2` and does the same to the green and blue components.
|
|
|
|
|
162
|
+5. The following code assigns to the red component of the pixel `(1, 1)` of `editedImage` the average of the values of the red tone that are in pixel `(1, 1)` of `originalImage1` and `originalImage2`, and does the same to the green and blue components.
|
160
|
|
163
|
|
161
|
---
|
164
|
---
|
162
|
|
165
|
|
|
|
|
|
180
|
}
|
183
|
}
|
181
|
```
|
184
|
```
|
182
|
|
185
|
|
183
|
----
|
|
|
184
|
|
186
|
|
|
|
187
|
+---
|
185
|
|
188
|
|
186
|
!INCLUDE "../../eip-diagnostic/pesky-tourist/en/diag-pesky-tourist-01.html"
|
189
|
!INCLUDE "../../eip-diagnostic/pesky-tourist/en/diag-pesky-tourist-01.html"
|
187
|
<br>
|
190
|
<br>
|
188
|
|
191
|
|
189
|
|
192
|
|
190
|
-
|
|
|
191
|
---
|
193
|
---
|
192
|
|
194
|
|
193
|
---
|
195
|
---
|
194
|
|
196
|
|
|
|
197
|
+
|
195
|
## Laboratory Session:
|
198
|
## Laboratory Session:
|
196
|
|
199
|
|
197
|
The project `PeskyTourist` contains the skeleton for the application to remove the noise from an image. In today’s laboratory experience, you will complete the application to process images using the median filter to remove the noise of an image, in this case, a pesky tourist. You will be working in the `Filter.cpp` file.
|
200
|
The project `PeskyTourist` contains the skeleton for the application to remove the noise from an image. In today’s laboratory experience, you will complete the application to process images using the median filter to remove the noise of an image, in this case, a pesky tourist. You will be working in the `Filter.cpp` file.
|
198
|
|
201
|
|
199
|
-#### General algorithm to remove noise from an image
|
|
|
|
|
202
|
+#### General Algorithm to Remove Noise from an Image
|
200
|
|
203
|
|
201
|
```
|
204
|
```
|
202
|
|
205
|
|
|
|
|
|
211
|
|
214
|
|
212
|
```
|
215
|
```
|
213
|
|
216
|
|
214
|
-## Exercise 1: Implement the function to order a vector of integers
|
|
|
|
|
217
|
+## Exercise 1 - Implement the Function to Order a Vector of Integers
|
215
|
|
218
|
|
216
|
To find the median of the components of the colors in a pixel, we have to use a sorting function. In this part you will implement the Selection Sort.
|
219
|
To find the median of the components of the colors in a pixel, we have to use a sorting function. In this part you will implement the Selection Sort.
|
217
|
|
220
|
|
|
|
|
|
239
|
5. Create a unit test to validate the `Sort` function and invoke it from the `RemoveNoise` function.
|
242
|
5. Create a unit test to validate the `Sort` function and invoke it from the `RemoveNoise` function.
|
240
|
|
243
|
|
241
|
|
244
|
|
242
|
-### Exercise 2: Calculate the median of a vector of integers
|
|
|
|
|
245
|
+### Exercise 2 - Calculate the Median of a Vector of Integers
|
243
|
|
246
|
|
244
|
#### Instructions
|
247
|
#### Instructions
|
245
|
|
248
|
|
|
|
|
|
248
|
2. Create a unit test to validate the `Median` function and invoke it from the `RemoveNoise` function.
|
251
|
2. Create a unit test to validate the `Median` function and invoke it from the `RemoveNoise` function.
|
249
|
|
252
|
|
250
|
|
253
|
|
251
|
-### Exercise 3: Calculate the median of each pixel
|
|
|
|
|
254
|
+### Exercise 3 - Calculate the Median of Each Pixel
|
252
|
|
255
|
|
253
|
Complete the `MedianPixel` function that receives a vector of pixels (of type `QRgb`) and returns the pixel `QRgb` corresponding to the median of the pixels. The median of the pixels is composed of the median of each color component of the pixels.
|
256
|
Complete the `MedianPixel` function that receives a vector of pixels (of type `QRgb`) and returns the pixel `QRgb` corresponding to the median of the pixels. The median of the pixels is composed of the median of each color component of the pixels.
|
254
|
|
257
|
|
|
|
|
|
259
|
To compute the median of pixels, for each of the color components (red, green and blue), extract the component in a vector and invoke the function `Median` to calculate the median of this vector. For example, if we receive a vector with the pixels 0xff112233, 0x113344, and 0x224455, one of the first tasks of the algorithm would be to extract the red components and create a vector with them: 0x11, 0x11 y 0x22. Afterwards this vector will be sent to the `Median` function to obtain the median (and we will obtain 0x11 as a result). This will be done also for the green and blue components.
|
262
|
To compute the median of pixels, for each of the color components (red, green and blue), extract the component in a vector and invoke the function `Median` to calculate the median of this vector. For example, if we receive a vector with the pixels 0xff112233, 0x113344, and 0x224455, one of the first tasks of the algorithm would be to extract the red components and create a vector with them: 0x11, 0x11 y 0x22. Afterwards this vector will be sent to the `Median` function to obtain the median (and we will obtain 0x11 as a result). This will be done also for the green and blue components.
|
260
|
|
263
|
|
261
|
|
264
|
|
262
|
-### Exercise 4: Remove noise
|
|
|
|
|
265
|
+### Exercise 4 - Remove Noise
|
263
|
|
266
|
|
264
|
Your last task is to complete the `RemoveNoise` function that receives a vector of images with noise and the reference to the edited image that will have the noise removed.
|
267
|
Your last task is to complete the `RemoveNoise` function that receives a vector of images with noise and the reference to the edited image that will have the noise removed.
|
265
|
|
268
|
|
|
|
|
|
273
|
|
276
|
|
274
|
---
|
277
|
---
|
275
|
|
278
|
|
276
|
-##Deliverables
|
|
|
|
|
279
|
+## Deliverables
|
277
|
|
280
|
|
278
|
-Use "Deliverable" in Moodle to upload the `Filter.cpp` file that contains the functions you implemented in this laboratory experience. Remember to use good programming techniques, by including the names of the programmers involved, and documenting your program.
|
|
|
|
|
281
|
+Use "Deliverable" in Moodle to upload the `Filter.cpp` file that contains the functions you implemented in this laboratory experience. Remember to use good programming techniques, include the names of the programmers involved, and document your program.
|
279
|
|
282
|
|
280
|
---
|
283
|
---
|
281
|
|
284
|
|