|
@@ -4,11 +4,11 @@
|
4
|
4
|
![main2.png](images/main2-small.png)
|
5
|
5
|
![main3.png](images/main3-small.png)
|
6
|
6
|
|
7
|
|
-[Verano 2016 - Ive]
|
|
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 Selection Sort and 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, 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
|
|
11
|
+## Objectives
|
12
|
12
|
|
13
|
13
|
1. Practice sorting arrays by selection and the bubble method.
|
14
|
14
|
|
|
@@ -22,15 +22,16 @@ Two common tasks when working with arrays of data is to search for and sort the
|
22
|
22
|
|
23
|
23
|
This laboratory experience is an adaptation of the nifty assignment presented by John Nicholson in [1].
|
24
|
24
|
|
|
25
|
+
|
25
|
26
|
## Pre-Lab:
|
26
|
27
|
|
27
|
28
|
Before arriving at the laboratory you should have:
|
28
|
29
|
|
29
|
30
|
1. Reviewed the selection sort and bubble sort algorithms.
|
30
|
31
|
|
31
|
|
-2. Familiarized yourself with the `push_back()`, `at(i)`, `size()`, `clear()` methods in the C++ `vector` class.
|
|
32
|
+2. Familiarized yourself with the `push_back()`, `at(i)`, `size()`, and `clear()` methods in the C++ `vector` class.
|
32
|
33
|
|
33
|
|
-3. Familiariezed yourself with the `width()`, `height()`, `pixel(i, j)`, `setPixel(i,j, pixel)` methods in the `QImage` class from `Qt`.
|
|
34
|
+3. Familiariezed yourself with the `width()`, `height()`, `pixel(i, j)`, and `setPixel(i,j, pixel)` methods in the `QImage` class from `Qt`.
|
34
|
35
|
|
35
|
36
|
4. Studied the concepts and instructions for the laboratory session.
|
36
|
37
|
|
|
@@ -42,7 +43,7 @@ Before arriving at the laboratory you should have:
|
42
|
43
|
|
43
|
44
|
## Pixels:
|
44
|
45
|
|
45
|
|
-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 lab we will assume the pixel’s alpha has total opacity (0xff).
|
|
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).
|
46
|
47
|
|
47
|
48
|
---
|
48
|
49
|
|
|
@@ -63,9 +64,9 @@ Today’s laboratory experience will use the `QImage` class. This class permits
|
63
|
64
|
|
64
|
65
|
## Image Processing
|
65
|
66
|
|
66
|
|
-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.
|
|
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.
|
67
|
68
|
|
68
|
|
-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, 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.
|
|
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.
|
69
|
70
|
|
70
|
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.
|
71
|
72
|
|
|
@@ -87,8 +88,9 @@ For example, the median of {3,5,2,7,11} is 5 since the ordered array is {2, 3, 5
|
87
|
88
|
|
88
|
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.
|
89
|
90
|
|
90
|
|
-####Example:
|
91
|
|
-Suppose we have to find the median of the three pixels with values `0xff223344`, `0xff112233`, `0xff001155`.
|
|
91
|
+#### Example:
|
|
92
|
+
|
|
93
|
+Suppose we have to find the median of the three pixels with values `0xff223344`, `0xff112233`, and `0xff001155`.
|
92
|
94
|
|
93
|
95
|
* The median of the red component is 0x11 (since the red components are `0x22`, `0x11` y `0x00`).
|
94
|
96
|
* The median of the green component is 0x22 (since the green components are `0x33`, `0x22` y `0x11`).
|
|
@@ -116,22 +118,22 @@ Notice that the result can be a pixel with a color that did not exist among the
|
116
|
118
|
For this laboratory experiences you will need to know how to use the following methods for the `vector` C++ class:
|
117
|
119
|
|
118
|
120
|
* `push_back()` // to insert an element at the end of the vector
|
119
|
|
-* `at(i)` // get element at position i
|
120
|
|
-* `size()` // get the number of elements in the vector
|
121
|
|
-* `clear()` // empty the vector/remove the elements.
|
|
121
|
+* `at(i)` // get element at position i
|
|
122
|
+* `size()` // get the number of elements in the vector
|
|
123
|
+* `clear()` // empty the vector/remove the elements.
|
122
|
124
|
|
123
|
125
|
The following functions are useful to work with data of type `QRgb`:
|
124
|
126
|
|
125
|
|
-* `qRed(pixel)` // returns the tone of the red color of the pixel
|
|
127
|
+* `qRed(pixel)` // returns the tone of the red color of the pixel
|
126
|
128
|
* `qGreen(pixel)` // returns the tone of the green color of the pixel
|
127
|
|
-* `qBlue(pixel)` // returns the tone of the blue color of the pixel
|
|
129
|
+* `qBlue(pixel)` // returns the tone of the blue color of the pixel
|
128
|
130
|
|
129
|
131
|
The objects of the `QImage` class have the following methods that will be useful to manipulate the pixels of an image:
|
130
|
132
|
|
131
|
|
-* `width()` // get the width of the image
|
132
|
|
-* `height()` // get the height of the image
|
133
|
|
-* `pixel(i, j)` // gets the color of the pixel at position `(i,j)`
|
134
|
|
-* `setPixel(i, j, pixel)` // sets the pixel at position `(i,j`) to the QRgb color pixel.
|
|
133
|
+* `width()` // get the width of the image
|
|
134
|
+* `height()` // get the height of the image
|
|
135
|
+* `pixel(i, j)` // gets the color of the pixel at position `(i,j)`
|
|
136
|
+* `setPixel(i, j, pixel)` // sets the pixel at position `(i,j`) to the QRgb color pixel.
|
135
|
137
|
* `qRgb(int red, int green, int blue)` // returns a `QRgb` pixel composed of the values of red, green and blue received.
|
136
|
138
|
|
137
|
139
|
### Examples:
|
|
@@ -192,35 +194,35 @@ int main() {
|
192
|
194
|
|
193
|
195
|
## Laboratory Session:
|
194
|
196
|
|
195
|
|
-The project `PeskyTourist` contains the skeleton for the application to remove the noise from an image. In today’s laboratory experience yu 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.
|
|
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.
|
196
|
198
|
|
197
|
|
-#### General algorithm to remove noise from an image
|
|
199
|
+#### General algorithm to remove noise from an image
|
198
|
200
|
|
199
|
201
|
```
|
200
|
202
|
|
201
|
203
|
Input: VI, a vector with N images
|
202
|
204
|
Output: an image without noise
|
203
|
205
|
---------------------------------------
|
204
|
|
-For each position x, y:
|
205
|
|
- P is a vector of size N
|
206
|
|
- Assign to the elements of P the values of the pixels in position (x, y) of the N images in VI
|
207
|
|
- M = median of the pixels of P
|
208
|
|
- Assign the value of M to the pixel (x, y) of the image without noise.
|
|
206
|
+1. For each position x, y:
|
|
207
|
+ * P is a vector of size N
|
|
208
|
+ * Assign to the elements of P the values of the pixels in position (x, y) of the N images in VI
|
|
209
|
+ * M = median of the pixels of P
|
|
210
|
+ * Assign the value of M to the pixel (x, y) of the image without noise.
|
209
|
211
|
|
210
|
212
|
```
|
211
|
213
|
|
212
|
214
|
## Exercise 1: Implement the function to order a vector of integers
|
213
|
215
|
|
214
|
|
-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 selection sort.
|
|
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.
|
215
|
217
|
|
216
|
218
|
#### Instructions
|
217
|
219
|
|
218
|
220
|
1. Load the project `PeskyTourist` into `QtCreator`. There are two ways to do this:
|
219
|
221
|
|
220
|
|
- * Using the virtual machine: Double click the file `PeskyTourist.pro` located in the folder `/home/eip/labs/sorting-peskytourist` of your virtual machine.
|
221
|
|
- * Downloading the project’s folder from `Bitbucket`: Use a terminal and write the command `git clone http:/bitbucket.org/eip-uprrp/sorting-peskytourist` to download the folder `tema-nombre` from `Bitbucket`. Double click the file `PeskyTourist.pro` located in the folder that you downloaded to your computer.
|
|
222
|
+ * Using the virtual machine: Double click the file `PeskyTourist.pro` located in the folder `/home/Documents/eip/sorting-peskytourist` of your virtual machine.
|
|
223
|
+ * Downloading the project’s folder from `Bitbucket`: Use a terminal and write the command `git clone http:/bitbucket.org/eip-uprrp/sorting-peskytourist` to download the folder `sort-peskytourist` from `Bitbucket`. Double click the file `PeskyTourist.pro` located in the folder that you downloaded to your computer.
|
222
|
224
|
|
223
|
|
-2. The code that we provide creates the interface in Figure 3.
|
|
225
|
+2. Configure the project and run the program by clicking the green arrow in the menu on the left side of the Qt Creator window. The code that we provide creates the interface in Figure 3.
|
224
|
226
|
|
225
|
227
|
---
|
226
|
228
|
|
|
@@ -232,10 +234,11 @@ To find the median of the components of the colors in a pixel, we have to use a
|
232
|
234
|
|
233
|
235
|
3. Press the `Load Images` button and look for the directory `ImagesPeskyTourist` that contains the images of the pesky tourist.
|
234
|
236
|
|
235
|
|
-4. Your first task is to complete the `Sort` function that receives a vector of integer. The function should order the integers of the vector in ascending order using the selection method.
|
|
237
|
+4. Your first task is to complete the `Sort` function that receives a vector of integers. The function should order the integers of the vector in ascending order using the selection method.
|
236
|
238
|
|
237
|
239
|
5. Create a unit test to validate the `Sort` function and invoke it from the `RemoveNoise` function.
|
238
|
240
|
|
|
241
|
+
|
239
|
242
|
### Exercise 2: Calculate the median of a vector of integers
|
240
|
243
|
|
241
|
244
|
#### Instructions
|
|
@@ -244,9 +247,10 @@ To find the median of the components of the colors in a pixel, we have to use a
|
244
|
247
|
|
245
|
248
|
2. Create a unit test to validate the `Median` function and invoke it from the `RemoveNoise` function.
|
246
|
249
|
|
|
250
|
+
|
247
|
251
|
### Exercise 3: Calculate the median of each pixel
|
248
|
252
|
|
249
|
|
-Complete the function `MedianPixel` that receives a vector of pixels (of type `QRgb`) and return 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.
|
|
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.
|
250
|
254
|
|
251
|
255
|
In the code we provide a function you can use to validate the `MedianPixel` function.
|
252
|
256
|
|
|
@@ -271,7 +275,7 @@ When you complete the function, the `Remove Noise` button will execute your algo
|
271
|
275
|
|
272
|
276
|
##Deliverables
|
273
|
277
|
|
274
|
|
-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 to document your program.
|
|
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.
|
275
|
279
|
|
276
|
280
|
---
|
277
|
281
|
|