瀏覽代碼

README EN AND ES

Luis Albertorio 8 年之前
父節點
當前提交
0c40b74bd7
共有 2 個文件被更改,包括 402 次插入140 次删除
  1. 100
    140
      README-en.md
  2. 302
    0
      README-es.md

+ 100
- 140
README-en.md 查看文件

@@ -1,169 +1,142 @@
1
-# Algoritmos de ordenamiento - El turista impertinente
1
+# Pesky Tourist: Sorting
2 2
 
3 3
 ![main1.png](images/main1.png)
4 4
 ![main2.png](images/main2-small.png)
5 5
 ![main3.png](images/main3-small.png)
6 6
 
7
+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.
7 8
 
8
-Dos tareas comunes cuando se trabaja con arreglos de datos son buscar datos y ordenarlos de forma  ascendente o descendente. Dos algoritmos de ordenamiento sencillos y bien conocidos son el ordenamiento de selección (Selection sort) y el ordenamiento por burbujas (Bubble sort). Los algoritmos de ordenamiento forman parte de muchos programados; por ejemplo, listas de contactos, hojas de cálculo y motores de búsqueda. En esta experiencia de laboratorio completarás una aplicación para procesar imágenes y practicarás el uso de algoritmos de ordenamiento. También aprenderás sobre la biblioteca `QImage` de `Qt` y sobre  el filtro de mediana utilizado en el procesamiento de imágenes para remover "ruido", en este caso un turista impertinente.
9
+##Objectives
9 10
 
11
+Practice sorting arrays by selection and the bubble method.
12
+Practice the use of decision and repetition structures.
13
+Use methods from the `vector` C++ class.
14
+Use the methods of the `QImage` class from `Qt` to manipulate an image’s pixels.
15
+Learn about the median filter for image processing.
10 16
 
11
-
12
-## Objetivos:
13
-
14
-1. Practicar el ordenamiento de arreglos por selección y por método de "burbuja".
15
-
16
-2. Practicar el uso de estructuras de decisión y repetición.
17
-
18
-3. Utilizar métodos de la clase `vector` de C++.
19
-
20
-4. Utilizar los métodos de la clase  `QImage` de `Qt` para manipular los pixeles de una imagen.
21
-
22
-5. Aprender sobre el filtro de mediana para el procesamiento de imágenes.
23
-
24
-
25
-Esta experiencia de laboratorio es una adaptación del "nifty assignment" presentado por  John Nicholson en [1].
17
+This laboratory experience is an adaptation of the nifty assignment presented by John Nicholson in [1].
26 18
 
27 19
 ## Pre-Lab:
28 20
 
29
-Antes de llegar al laboratorio debes:
30
-
31
-
32
-1. Repasar los algoritmos de ordenamiento por selección y de burbuja.
21
+Before arriving at the laboratory you should have:
33 22
 
34
-2. Familiarizarte con los métodos `push_back()`, `at(i)`,  `size()`, `clear()` de la clase `vector` de C++.
35
-
36
-3. Familiarizarte con los métodos `width()`, `height()`, `pixel(i, j)`, `setPixel(i,j, pixel)`  de la clase `QImage` de `Qt`.
37
-
38
-4. Estudiar los conceptos e instrucciones para la sesión de laboratorio.
39
-
40
-5. Tomar el quiz Pre-Lab que se encuentra en Moodle.
23
+Reviewed the selection sort and bubble sort algorithms.
24
+Familiarized yourself with the `push_back()`, `at(i)`,  `size()`, `clear()` methods in the C++ `vector` class.
25
+Familiariezed yourself with the `width()`, `height()`, `pixel(i, j)`, `setPixel(i,j, pixel)` methods in the `QImage` class from `Qt`.
26
+Studied the concepts and instructions for the laboratory session.
27
+Taken the Pre-Lab quiz that can be found on Moodle.
41 28
 
42 29
 ---
43 30
 
44 31
 ---
45 32
 
46
-## Píxeles
33
+## Pixels:
47 34
 
48
-Al elemento más pequeño de una imagen se le llama un *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul,   se codifica como un entero sin signo cuyos bytes  representan los tonos de rojo, verde y azul del pixel (Figura 2). Un cuarto byte especifica lo que se conoce como la *composición alpha*,  la cual define la opacidad del pixel (0xff es totalmente opaco y 0x00 es totalmente transparente, i.e. invisible). A esta combinación se le llama el *ARGB* del color por las siglas de "Alpha-Red-Green-Blue". Por ejemplo un píxel de color rojo (puro) tiene una representación RGB `0xffff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0xffffffff` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad). A través de este lab asumiremos que el alfa de los píxeles tiene opacidad total (0xff).
35
+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).
49 36
 
50 37
 ---
51 38
 
52 39
 ![figure2.png](images/figure2.png)
53 40
 
54
-**Figura 1.** Distribución de bits para la composición alpha y las tonalidades de rojo, verde y azul dentro de la representación ARGB.  Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1).
41
+**Figura 1.** Distribution of bits for the alpha composition and the red, green and blue tones within the ARGB representation. Each tone can have a value between 0x00 (all eight bits on 0), and 0xFF (all eight bits on 1).
55 42
 
56 43
 ---
57 44
 
58
-En `Qt` se utiliza el tipo `QRgb` para representar valores **ARGB**.  Utilizando ciertas funciones que describimos abajo podemos obtener los componentes rojo, verde y azul del valor `QRgb` del píxel y así manipular imágenes. En este lab no vamos a manipular el canal alfa de los píxeles.
45
+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.
59 46
 
60
-La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los píxeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
47
+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.
61 48
 
62 49
 ---
63 50
 
64 51
 ---
65 52
 
66
-## Procesamiento de imágenes
67 53
 
54
+## Image Processing
68 55
 
69
-El procesamiento de imágenes es usado en una amplia variedad de aplicaciones que son relevantes socialmente.  En las redes sociales, prácticamente cada vez que subes una imagen hay un filtro de procesamiento de imágenes tomando efecto. Entre las muchas aplicaciones a la salud que tiene el procesamiento de imágenes se encuentran el contar organismos dentro de un espacio explorado para detectar anomalías en las exploraciones de tomografía computarizada ("CT scans") y el mejorar la calidad de las imágenes para poder obtener mejor información de ellas.
56
+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. 
70 57
 
71
-El filtro de mediana es uno de los filtros más simples utilizados en el procesamiento de imágenes. Este filtro es muy útil para remover objetos no deseados de las imágenes. Digamos que encuentras el árbol más interesante del mundo y quieres fotografiarlo. Colocas tu equipo fotográfico, la luz es perfecta, los colores son hermosos. Para estar segura de obtener la foto perfecta tomas tres de ellas. Sin embargo, en el momento preciso en que se tomaron las fotos, un turista impertinente se metió en el medio de tu creación. El filtro de mediana te ayudará a remover el turista de la foto fusionando las tres fotos en una en la que no aparecerá el turista.
58
+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.
72 59
 
73
-Dadas 3 o más imágenes del mismo espacio, el filtro de mediana trabaja como sigue: para el píxel en cada posición $$(x,y)$$ encuentra el color correspondiente a la mediana de los colores de las tres imágenes, luego usa el color correspondiente a la mediana en la imagen  fusionada.
60
+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.  
74 61
 
75 62
 ---
76 63
 
77 64
 ![main2.png](images/main2.png)
78 65
 
79
-
80
-**Figura 2.** Ilustración del algoritmo del filtro de mediana en un píxel dado. Se determinan los colores de los píxeles correspondientes en las tres imágenes, luego se calcula la mediana. La mediana del píxel se usa en la posición correspondiente en la imagen fusionada.
66
+**Figura 2.** Illustration of the median filter algorithm for a given pixel. The pixel’s colors are determined in the three images, then the median is calculated. The median of the pixel is used in the corresponding position of the merged image.
81 67
 
82 68
 ---
83 69
 
84
-### Mediana
85
-
86
-La *mediana* de una lista  de números es el valor que separa la mitad de los números con valor mayor de la mitad de los números con valor menor. Para calcularla se ordena la lista (digamos) en orden ascendente. Si la cantidad de números en la lista es impar, se escoge el valor del medio. Si la cantidad de números en la lista es par, se toma el promedio de los dos valores en el medio.
70
+### Median
87 71
 
88
-Por ejemplo, la mediana de {3,5,2,7,11} es 5 pues el arreglo ordenado es {2, 3, 5, 7, 11}.   La mediana de {3,9,3,2,10,11} es 6 pues el arreglo ordenado es {2, 3, 3, 9, 10, 11} y el promedio de 3 y 9 es 6.
72
+The *median* of a list of numbers is the value that separates halve the numbers with a higher value from the half of the numbers with a lower value. To calculate it, the list is ordered in ascending order. If the number of elements is odd, the middle value is chosen. If the number of elements is even, the average of the two middle values is taken.
89 73
 
90
-### Mediana de pixeles
74
+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.
91 75
 
92
-El método que usaremos en esta experiencia de laboratorio para hallar la mediana de varios píxeles será el siguiente: hallaremos la mediana de sus componentes rojos, verdes, azules y luego compondremos un nuevo píxel usando esas medianas. El siguiente ejemplo ilustra el procedimiento.
76
+### Median of pixels
93 77
 
94
-####Ejemplo: 
95
-Supón que debemos hallar la mediana de los tres píxeles con valores `0xff223344`, `0xff112233`, `0xff001155`.
78
+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.
96 79
 
97
-* La mediana del componente rojo es 0x11 (dado que los componentes rojos son `0x22`, `0x11` y `0x00`.
98
-* La mediana del componente verde es 0x22 (dado que los componentes verdes son `0x33`, `0x22` y `0x11`.
99
-*  La mediana del componente azul es 0x44 (dado que los componentes azules son `0x44`, `0x33` y `0x55`.
100
-
101
-Por lo tanto, la mediana de los píxeles sera `0xff112244`, compuesto por las medianas de los componentes de colores rojo, verde y azul.
102
-
103
-Nota que el resultado puede ser un píxel con un color que no existía entre los originales. Sin embargo, ese detalle no afecta mucho la aplicación que estamos realizando en esta experiencia de laboratorio.
80
+####Example:
81
+Suppose we have to find the median of the three pixels with values `0xff223344`, `0xff112233`, `0xff001155`.
104 82
 
83
+* The median of the red component is 0x11 (since the red components are `0x22`, `0x11` y `0x00`).
84
+* The median of the green component is 0x22 (since the green components are `0x33`, `0x22` y `0x11`).
85
+* The median of the blue component is 0x44 (since the blue components are `0x44`, `0x33` y `0x55`).
105 86
 
87
+Therefore, the median of the pixels will be `0xff112244`, composed of the medians of the red, green and blue components.
106 88
 
89
+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.
107 90
 
108 91
 ---
109 92
 
110 93
 ---
111 94
 
112 95
 
96
+## Libraries
113 97
 
98
+For this laboratory experiences you will need to know how to use the following methods for the `vector` C++ class:
114 99
 
115
-## Bibliotecas
116
-
117
-Para esta experiencia de laboratorio necesitarás saber cómo utilizar los siguientes métodos de la clase `vector` de `C++`:
118
-
119
-
120
-* `push_back()` // insertar un elemento al final de un vector
121
-* `at(i)`       // obtener el elemento en la posición `i`
122
-* `size()`      // obtener el número de elementos en el vector
123
-* `clear()`     // vaciar el vector / remover los elementos.
100
+* `push_back()`  // to insert an element at the end of the vector
101
+* `at(i)`               // get element at position i
102
+* `size()`            // get the number of elements in the vector
103
+* `clear()`          // empty the vector/remove the elements.
124 104
 
105
+The following functions are useful to work with data of type `QRgb`:
125 106
 
126
-Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
107
+* `qRed(pixel)`      // returns the tone of the red color of the pixel
108
+* `qGreen(pixel)`  // returns the tone of the green color of the pixel
109
+* `qBlue(pixel)`     // returns the tone of the blue color of the pixel
127 110
 
128
-* `qRed(pixel)`   // devuelve el tono del color rojo del píxel
129
-* `qGreen(pixel)` // devuelve el tono del color verde del píxel
130
-* `qBlue(pixel)`  // devuelve el tono del color azul del píxel
111
+The objects of the `QImage` class have the following methods that will be useful to manipulate the pixels of an image:
131 112
 
113
+* `width()`		// get the width of the image
114
+* `height()`		// get the height of the image
115
+* `pixel(i, j)` 		// gets the color of the pixel at position `(i,j)`
116
+* `setPixel(i, j, pixel)` 	// sets the pixel at position `(i,j`) to the QRgb color pixel.
117
+* `qRgb(int red, int green, int blue)` // returns a `QRgb` pixel composed of the values of red, green and blue received.
132 118
 
133
-Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para manipular los píxeles de las imágenes:
119
+### Examples:
134 120
 
121
+`QRgb myRgb = qRgb(0xff, 0x00, 0xff);`: Assigns to `myRgb` the value `0xff00ff` that represents the color ![figure3.png](images/figure3.png)
135 122
 
136
-* `width()`      // devuelve el valor entero del ancho de la imagen
137
-* `height()`      // devuelve el valor entero de la altura de la imagen
138
-* `pixel(i, j)`       // devuelve el `QRgb` del píxel en la posición `(i,j)`
139
-* `setPixel(i,j, pixel)`   // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`.
123
+Notice that the value of `0xff00ff` represents the values `0xff`, `0x00`, `0xff`, that correspond to the red, green and blue components of `myRgb`.
140 124
 
141
-* `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
125
+2. If the following `4 x 4` image of pixels represents the object `originalImage`,
142 126
 
127
+![main1.png](images/main1.png)
143 128
 
144
-### Ejemplos:
145
-
146
-1. `QRgb myRgb = qRgb(0xff, 0x00, 0xff);`: Asigna a `myRgb` el valor `0xff00ff` que representa el color ![figure3.png](images/figure3.png)
147
-
148
-    Nota que el valor `0xff00ff` representa los valores `0xff`, `0x0`, `0xff`, que corresponden a los componentes rojo, verde y azul de `myRgb`.
149
-
150
-2. Si la siguiente imagen `4 x 4` de píxeles representa el objeto `originalImage`,
151
-
152
-      ![main1.png](images/main1.png)
153
-
154
-     entonces `originalImage.pixel(2,1)` devuelve un valor `rgb` que representa el color azul (`0x0000ff`).
155
-
156
-3. La siguiente instrucción asigna el color rojo al píxel en posición `(2,3)` en la imagen editada:
157
-
158
-    `editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
129
+then `originalImage.pixel(2,1)` returns the `rgb` value that represents the color blue (`0x0000ff`).
159 130
 
131
+3. The following instruction assigns the red color to the pixel in position `(2, 3)` in the edited image: 
160 132
 
161
-4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de  `originalImage`:
133
+`editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
162 134
 
163
-    `int greenContent = qGreen(originalImage.pixel(1,1));`.
135
+4. The following instruction assigns a `greenContent` the value of the green value contained in the pixel `(1, 1)` of the `originalImage`:
164 136
 
137
+`int greenContent = qGreen(originalImage.pixel(1,1));`.
165 138
 
166
-5. El siguiente código le asigna al componente rojo del píxel `(1,1)` de  `editedImage` el promedio de los valores del tono de rojo que contiene el píxel `(1,1)` de  `originalImage1` y  `originalImage2` y lo mismo hace con los componentes verde y de azul.
139
+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.
167 140
 
168 141
 ---
169 142
 
@@ -190,7 +163,6 @@ int main() {
190 163
 ---
191 164
 
192 165
 ---
193
-
194 166
 !INCLUDE "../../eip-diagnostic/pesky-tourist/es/diag-pesky-tourist-01.html"
195 167
 
196 168
 !INCLUDE "../../eip-diagnostic/pesky-tourist/es/diag-pesky-tourist-02.html"
@@ -201,42 +173,34 @@ int main() {
201 173
 
202 174
 ---
203 175
 
204
-## Sesión de laboratorio:
205
-
176
+## Laboratory Session:
206 177
 
178
+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.
207 179
 
208
-El proyecto `PeskyTourist` contiene el esqueleto de una aplicación para remover el "ruido" de una imagen. En la experiencia de laboratorio de hoy completarás la aplicación para procesar imágenes utilizando el filtro de mediana para remover el ruido de una imagen, en este caso un turista impertinente. Estarás trabajando en el archivo `Filter.cpp`.
209
-
210
-#### Algoritmo general para remover ruido de una imagen
180
+#### General algorithm to remove the noise from an image
211 181
 
212 182
 ```
213 183
 
214
-Input: VI, un vector con N imágenes
215
-Output: una imagen sin ruido
184
+Input: VI, a vector with N images
185
+Output: an image without noise
216 186
 ---------------------------------------
217
-1. Para cada posición x,y:
218
-
219
-2.     P es un vector de tamaño N
220
-
221
-3.     Asignar a los elementos de P los valores
222
-       de los píxeles en la posicion (x,y) de las N imágenes de VI
187
+For each position x, y:
188
+     P is a vector of size N
189
+    Assign to the elements of P the values of the pixels in position (x, y) of the N images in VI
190
+    M = median of the pixels of P
191
+ Assign the value of M to the pixel (x, y) of the image without noise.
223 192
 
224
-4.     M = mediana de los píxeles de P
225
-
226
-5.     Asignar el valor de M al píxel (x,y) de la imagen sin ruido
227 193
 ```
228 194
 
229
-### Ejercicio 1: Implementar una función para ordenar un vector de enteros
230
-
231
-Para hallar la mediana de los componentes de colores de los píxeles, debemos contar con una función de ordenamiento. En esta parte implementarás el ordenamiento de selección.
195
+## Exercise 1: Implement the function to order a vector of integers
232 196
 
233
-#### Instrucciones
197
+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.
234 198
 
199
+#### Instructions
235 200
 
236
-1. Carga a QtCreator el proyecto `PeskyTourist`  haciendo doble "click" en el archivo `PeskyTourist.pro` en el directorio `Documents/eip/Sort-PeskyTourist` de tu computadora. También puedes ir a `http://bitbucket.org/eip-uprrp/sort-peskytourist` para descargar la carpeta `Sort-PeskyTourist` a tu computadora.
237
-
238
-2.  El código que te proveemos crea la interfaz de la Figura 3.
201
+Load the project `PeskyTourist` on to QtCreator by double-clicking on the file `PeskyTourist.pro` in the directory `Documents/eip/Sort-PeskyTourist` on your computer. You can also go to `http://bitbucket.org/raarceupr/sort-peskytourist` to download the folder `Sort-PeskyTourist` to your computer.
239 202
 
203
+The code that we provide creates the interface in Figure 3.
240 204
     ---
241 205
 
242 206
     ![figure3.png](images/figura3.png)
@@ -245,58 +209,54 @@ Para hallar la mediana de los componentes de colores de los píxeles, debemos co
245 209
 
246 210
     ---
247 211
 
248
-3. Marca el botón  `Load Images` y busca el directorio `ImagesPeskyTourist` que contiene las imágenes con el turista impertinente.
249
-
250
-4. Tu primera tarea es completar la función `Sort` que recibe un vector de enteros. La función debe ordenar los enteros del vector en orden ascendente utilizando el método de  selección.
251
-
252
-5. Crea una prueba unitaria para validar la función `Sort` e invócala desde la función `RemoveNoise`.
212
+3. Press the `Load Images` button and look for the directory `ImagesPeskyTourist` that contains the images of the pesky tourist.
253 213
 
214
+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.
254 215
 
255
-### Ejercicio 2: Calcular la mediana de un vector de enteros
216
+5. Create a unit test to validate the `Sort` function and invoke it from the `RemoveNoise` function.
256 217
 
257
-#### Instrucciones
218
+### Exercise 2: Calculate the median of a vector of integers
258 219
 
259
-1. Completa la función `Median` que recibe un vector de enteros. La función `Median` debe invocar la función `Sort` para ordenar los enteros y calcular la mediana. La función devuelve la mediana calculada.
220
+#### Instructions
260 221
 
261
-2. Crea una prueba unitaria para validar la función `Median` e invócala desde la función `RemoveNoise`.
222
+Complete the `Median` function that receives a vector of integers. The `Median` function should invoke the `Sort` function to order the integers and calculate the median. The function returns the calculated median.
262 223
 
224
+Create a unit test to validate the `Median` function and invoke it from the `RemoveNoise` function.
263 225
 
264
-### Ejercicio 3: Calcular la mediana de cada píxel
226
+### Exercise 3: Calculate the median of each pixel
265 227
 
266
-Completa la función `MedianPixel` que recibe un vector de píxeles (de tipo `QRgb`) y devuelve el píxel `QRgb` correspondiente a la mediana de los píxeles. La mediana de los píxeles se compone de las medianas de cada componente de color en los píxeles.
228
+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.
267 229
 
268
-En el código proveemos una función que puedes usar para validar la función `MedianPixel`.
230
+In the code we provide a function you can use to validate the `MedianPixel` function.
269 231
 
270
-#### Algoritmo:
232
+#### Algorithm:
271 233
 
272
-Para computar la mediana del píxel, para cada uno de los componentes de color (rojo, verde y azul), extrae el componente en un vector e invoca la función `Median` para calcular la mediana sobre ese vector. Por ejemplo, si recibimos un vector con los píxeles 0xff112233, 0x113344, y 0x224455, una de las primeras tareas del algoritmo sería extraer los componentes rojos y crear un vector con ellos: 0x11, 0x11 y 0x22. Luego se enviaría ese vector a la función `Median` para obtener la mediana (y obtendremos 0x11 como resultado). Esto se realizaría también para los componentes verde y azul.
234
+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.
273 235
 
274 236
 
275
-### Ejercicio 4: Remover ruido
237
+### Exercise 4: Remove noise
276 238
 
277
-Tu última tarea es completar la función `RemoveNoise` que recibe un vector de imágenes con ruido y la referencia a la imagen editada que tendrá el ruido removido.
239
+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.
278 240
 
279
-#### Algoritmo:
241
+#### Algorithm:
280 242
 
281
-Para cada posición $$(x,y)$$, forma un vector de píxeles que contendrá los valores de los píxeles en la posición $$(x,y)$$ de cada una de las imágenes con ruido. Invoca la función `MedianPixel` y asigna el valor de la mediana los píxeles en la posición $$(x,y)$$ de la imagen editada.
243
+For each position $$(x,y)$$, create a vector of the pixels that will contain the values of the pixels in the position $$(x,y)$$ of each one of the images with noise. Invoke the `MedianPixel` function and assign the value of the median of the pixels in the position $$(x,y)$$ of the edited image.
282 244
 
283
-
284
-Cuando completes la función el botón `Remove Noise` ejecutará tus algoritmos y desplegará la imagen final.
245
+When you complete the function, the `Remove Noise` button will execute your algorithms and display the final image.
285 246
 
286 247
 ---
287 248
 
288 249
 ---
289 250
 
290
-##Entrega
251
+##Deliverables
291 252
 
292
-Utiliza "Entrega" en Moodle para entregar el archivo `Filter.cpp` que contiene las funciones  que implementaste en esta experiencia de laboratorio. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
253
+Use "Deliverables" 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.
293 254
 
294 255
 ---
295 256
 
296 257
 ---
297 258
 
259
+##References
298 260
 
261
+[1] John Nicholson, http://nifty.stanford.edu/2014/nicholson-the-pesky-tourist/
299 262
 
300
-##Referencias
301
-
302
-[1] John Nicholson, http://nifty.stanford.edu/2014/nicholson-the-pesky-tourist/

+ 302
- 0
README-es.md 查看文件

@@ -0,0 +1,302 @@
1
+# Algoritmos de ordenamiento - El turista impertinente
2
+
3
+![main1.png](images/main1.png)
4
+![main2.png](images/main2-small.png)
5
+![main3.png](images/main3-small.png)
6
+
7
+
8
+Dos tareas comunes cuando se trabaja con arreglos de datos son buscar datos y ordenarlos de forma  ascendente o descendente. Dos algoritmos de ordenamiento sencillos y bien conocidos son el ordenamiento de selección (Selection sort) y el ordenamiento por burbujas (Bubble sort). Los algoritmos de ordenamiento forman parte de muchos programados; por ejemplo, listas de contactos, hojas de cálculo y motores de búsqueda. En esta experiencia de laboratorio completarás una aplicación para procesar imágenes y practicarás el uso de algoritmos de ordenamiento. También aprenderás sobre la biblioteca `QImage` de `Qt` y sobre  el filtro de mediana utilizado en el procesamiento de imágenes para remover "ruido", en este caso un turista impertinente.
9
+
10
+
11
+
12
+## Objetivos:
13
+
14
+1. Practicar el ordenamiento de arreglos por selección y por método de "burbuja".
15
+
16
+2. Practicar el uso de estructuras de decisión y repetición.
17
+
18
+3. Utilizar métodos de la clase `vector` de C++.
19
+
20
+4. Utilizar los métodos de la clase  `QImage` de `Qt` para manipular los pixeles de una imagen.
21
+
22
+5. Aprender sobre el filtro de mediana para el procesamiento de imágenes.
23
+
24
+
25
+Esta experiencia de laboratorio es una adaptación del "nifty assignment" presentado por  John Nicholson en [1].
26
+
27
+## Pre-Lab:
28
+
29
+Antes de llegar al laboratorio debes:
30
+
31
+
32
+1. Repasar los algoritmos de ordenamiento por selección y de burbuja.
33
+
34
+2. Familiarizarte con los métodos `push_back()`, `at(i)`,  `size()`, `clear()` de la clase `vector` de C++.
35
+
36
+3. Familiarizarte con los métodos `width()`, `height()`, `pixel(i, j)`, `setPixel(i,j, pixel)`  de la clase `QImage` de `Qt`.
37
+
38
+4. Estudiar los conceptos e instrucciones para la sesión de laboratorio.
39
+
40
+5. Tomar el quiz Pre-Lab que se encuentra en Moodle.
41
+
42
+---
43
+
44
+---
45
+
46
+## Píxeles
47
+
48
+Al elemento más pequeño de una imagen se le llama un *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul,   se codifica como un entero sin signo cuyos bytes  representan los tonos de rojo, verde y azul del pixel (Figura 2). Un cuarto byte especifica lo que se conoce como la *composición alpha*,  la cual define la opacidad del pixel (0xff es totalmente opaco y 0x00 es totalmente transparente, i.e. invisible). A esta combinación se le llama el *ARGB* del color por las siglas de "Alpha-Red-Green-Blue". Por ejemplo un píxel de color rojo (puro) tiene una representación RGB `0xffff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0xffffffff` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad). A través de este lab asumiremos que el alfa de los píxeles tiene opacidad total (0xff).
49
+
50
+---
51
+
52
+![figure2.png](images/figure2.png)
53
+
54
+**Figura 1.** Distribución de bits para la composición alpha y las tonalidades de rojo, verde y azul dentro de la representación ARGB.  Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1).
55
+
56
+---
57
+
58
+En `Qt` se utiliza el tipo `QRgb` para representar valores **ARGB**.  Utilizando ciertas funciones que describimos abajo podemos obtener los componentes rojo, verde y azul del valor `QRgb` del píxel y así manipular imágenes. En este lab no vamos a manipular el canal alfa de los píxeles.
59
+
60
+La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los píxeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
61
+
62
+---
63
+
64
+---
65
+
66
+## Procesamiento de imágenes
67
+
68
+
69
+El procesamiento de imágenes es usado en una amplia variedad de aplicaciones que son relevantes socialmente.  En las redes sociales, prácticamente cada vez que subes una imagen hay un filtro de procesamiento de imágenes tomando efecto. Entre las muchas aplicaciones a la salud que tiene el procesamiento de imágenes se encuentran el contar organismos dentro de un espacio explorado para detectar anomalías en las exploraciones de tomografía computarizada ("CT scans") y el mejorar la calidad de las imágenes para poder obtener mejor información de ellas.
70
+
71
+El filtro de mediana es uno de los filtros más simples utilizados en el procesamiento de imágenes. Este filtro es muy útil para remover objetos no deseados de las imágenes. Digamos que encuentras el árbol más interesante del mundo y quieres fotografiarlo. Colocas tu equipo fotográfico, la luz es perfecta, los colores son hermosos. Para estar segura de obtener la foto perfecta tomas tres de ellas. Sin embargo, en el momento preciso en que se tomaron las fotos, un turista impertinente se metió en el medio de tu creación. El filtro de mediana te ayudará a remover el turista de la foto fusionando las tres fotos en una en la que no aparecerá el turista.
72
+
73
+Dadas 3 o más imágenes del mismo espacio, el filtro de mediana trabaja como sigue: para el píxel en cada posición $$(x,y)$$ encuentra el color correspondiente a la mediana de los colores de las tres imágenes, luego usa el color correspondiente a la mediana en la imagen  fusionada.
74
+
75
+---
76
+
77
+![main2.png](images/main2.png)
78
+
79
+
80
+**Figura 2.** Ilustración del algoritmo del filtro de mediana en un píxel dado. Se determinan los colores de los píxeles correspondientes en las tres imágenes, luego se calcula la mediana. La mediana del píxel se usa en la posición correspondiente en la imagen fusionada.
81
+
82
+---
83
+
84
+### Mediana
85
+
86
+La *mediana* de una lista  de números es el valor que separa la mitad de los números con valor mayor de la mitad de los números con valor menor. Para calcularla se ordena la lista (digamos) en orden ascendente. Si la cantidad de números en la lista es impar, se escoge el valor del medio. Si la cantidad de números en la lista es par, se toma el promedio de los dos valores en el medio.
87
+
88
+Por ejemplo, la mediana de {3,5,2,7,11} es 5 pues el arreglo ordenado es {2, 3, 5, 7, 11}.   La mediana de {3,9,3,2,10,11} es 6 pues el arreglo ordenado es {2, 3, 3, 9, 10, 11} y el promedio de 3 y 9 es 6.
89
+
90
+### Mediana de pixeles
91
+
92
+El método que usaremos en esta experiencia de laboratorio para hallar la mediana de varios píxeles será el siguiente: hallaremos la mediana de sus componentes rojos, verdes, azules y luego compondremos un nuevo píxel usando esas medianas. El siguiente ejemplo ilustra el procedimiento.
93
+
94
+####Ejemplo: 
95
+Supón que debemos hallar la mediana de los tres píxeles con valores `0xff223344`, `0xff112233`, `0xff001155`.
96
+
97
+* La mediana del componente rojo es 0x11 (dado que los componentes rojos son `0x22`, `0x11` y `0x00`.
98
+* La mediana del componente verde es 0x22 (dado que los componentes verdes son `0x33`, `0x22` y `0x11`.
99
+*  La mediana del componente azul es 0x44 (dado que los componentes azules son `0x44`, `0x33` y `0x55`.
100
+
101
+Por lo tanto, la mediana de los píxeles sera `0xff112244`, compuesto por las medianas de los componentes de colores rojo, verde y azul.
102
+
103
+Nota que el resultado puede ser un píxel con un color que no existía entre los originales. Sin embargo, ese detalle no afecta mucho la aplicación que estamos realizando en esta experiencia de laboratorio.
104
+
105
+
106
+
107
+
108
+---
109
+
110
+---
111
+
112
+
113
+
114
+
115
+## Bibliotecas
116
+
117
+Para esta experiencia de laboratorio necesitarás saber cómo utilizar los siguientes métodos de la clase `vector` de `C++`:
118
+
119
+
120
+* `push_back()` // insertar un elemento al final de un vector
121
+* `at(i)`       // obtener el elemento en la posición `i`
122
+* `size()`      // obtener el número de elementos en el vector
123
+* `clear()`     // vaciar el vector / remover los elementos.
124
+
125
+
126
+Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
127
+
128
+* `qRed(pixel)`   // devuelve el tono del color rojo del píxel
129
+* `qGreen(pixel)` // devuelve el tono del color verde del píxel
130
+* `qBlue(pixel)`  // devuelve el tono del color azul del píxel
131
+
132
+
133
+Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para manipular los píxeles de las imágenes:
134
+
135
+
136
+* `width()`      // devuelve el valor entero del ancho de la imagen
137
+* `height()`      // devuelve el valor entero de la altura de la imagen
138
+* `pixel(i, j)`       // devuelve el `QRgb` del píxel en la posición `(i,j)`
139
+* `setPixel(i,j, pixel)`   // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`.
140
+
141
+* `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
142
+
143
+
144
+### Ejemplos:
145
+
146
+1. `QRgb myRgb = qRgb(0xff, 0x00, 0xff);`: Asigna a `myRgb` el valor `0xff00ff` que representa el color ![figure3.png](images/figure3.png)
147
+
148
+    Nota que el valor `0xff00ff` representa los valores `0xff`, `0x0`, `0xff`, que corresponden a los componentes rojo, verde y azul de `myRgb`.
149
+
150
+2. Si la siguiente imagen `4 x 4` de píxeles representa el objeto `originalImage`,
151
+
152
+      ![main1.png](images/main1.png)
153
+
154
+     entonces `originalImage.pixel(2,1)` devuelve un valor `rgb` que representa el color azul (`0x0000ff`).
155
+
156
+3. La siguiente instrucción asigna el color rojo al píxel en posición `(2,3)` en la imagen editada:
157
+
158
+    `editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
159
+
160
+
161
+4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de  `originalImage`:
162
+
163
+    `int greenContent = qGreen(originalImage.pixel(1,1));`.
164
+
165
+
166
+5. El siguiente código le asigna al componente rojo del píxel `(1,1)` de  `editedImage` el promedio de los valores del tono de rojo que contiene el píxel `(1,1)` de  `originalImage1` y  `originalImage2` y lo mismo hace con los componentes verde y de azul.
167
+
168
+---
169
+
170
+```cpp
171
+#include <QImage>
172
+
173
+using namespace std;
174
+int main() {
175
+    int redEdit;
176
+    int greenEdit;
177
+    int blueEdit;
178
+    QImage editedImage;
179
+
180
+   redEdit=(qRed(originalImage1.pixel(1,1)) + qRed(originalImage2.pixel(1,1)))/2;
181
+   greenEdit=(qGreen(originalImage1.pixel(1,1)) + qGreen(originalImage2.pixel(1,1)))/2;
182
+   blueEdit=(qBlue(originalImage1.pixel(1,1)) + qBlue(originalImage2.pixel(1,1)))/2;
183
+
184
+   editedImage.setPixel(1,1,qRgb(redEdit,greenEdit,blueEdit));
185
+
186
+   return 0;
187
+}
188
+```
189
+
190
+---
191
+
192
+---
193
+
194
+!INCLUDE "../../eip-diagnostic/pesky-tourist/es/diag-pesky-tourist-01.html"
195
+
196
+!INCLUDE "../../eip-diagnostic/pesky-tourist/es/diag-pesky-tourist-02.html"
197
+
198
+!INCLUDE "../../eip-diagnostic/pesky-tourist/es/diag-pesky-tourist-03.html"
199
+
200
+---
201
+
202
+---
203
+
204
+## Sesión de laboratorio:
205
+
206
+
207
+
208
+El proyecto `PeskyTourist` contiene el esqueleto de una aplicación para remover el "ruido" de una imagen. En la experiencia de laboratorio de hoy completarás la aplicación para procesar imágenes utilizando el filtro de mediana para remover el ruido de una imagen, en este caso un turista impertinente. Estarás trabajando en el archivo `Filter.cpp`.
209
+
210
+#### Algoritmo general para remover ruido de una imagen
211
+
212
+```
213
+
214
+Input: VI, un vector con N imágenes
215
+Output: una imagen sin ruido
216
+---------------------------------------
217
+1. Para cada posición x,y:
218
+
219
+2.     P es un vector de tamaño N
220
+
221
+3.     Asignar a los elementos de P los valores
222
+       de los píxeles en la posicion (x,y) de las N imágenes de VI
223
+
224
+4.     M = mediana de los píxeles de P
225
+
226
+5.     Asignar el valor de M al píxel (x,y) de la imagen sin ruido
227
+```
228
+
229
+### Ejercicio 1: Implementar una función para ordenar un vector de enteros
230
+
231
+Para hallar la mediana de los componentes de colores de los píxeles, debemos contar con una función de ordenamiento. En esta parte implementarás el ordenamiento de selección.
232
+
233
+#### Instrucciones
234
+
235
+
236
+1. Carga a QtCreator el proyecto `PeskyTourist`  haciendo doble "click" en el archivo `PeskyTourist.pro` en el directorio `Documents/eip/Sort-PeskyTourist` de tu computadora. También puedes ir a `http://bitbucket.org/eip-uprrp/sort-peskytourist` para descargar la carpeta `Sort-PeskyTourist` a tu computadora.
237
+
238
+2.  El código que te proveemos crea la interfaz de la Figura 3.
239
+
240
+    ---
241
+
242
+    ![figure3.png](images/figura3.png)
243
+
244
+    **Figura 3.** Interfaz del editor de imágenes.
245
+
246
+    ---
247
+
248
+3. Marca el botón  `Load Images` y busca el directorio `ImagesPeskyTourist` que contiene las imágenes con el turista impertinente.
249
+
250
+4. Tu primera tarea es completar la función `Sort` que recibe un vector de enteros. La función debe ordenar los enteros del vector en orden ascendente utilizando el método de  selección.
251
+
252
+5. Crea una prueba unitaria para validar la función `Sort` e invócala desde la función `RemoveNoise`.
253
+
254
+
255
+### Ejercicio 2: Calcular la mediana de un vector de enteros
256
+
257
+#### Instrucciones
258
+
259
+1. Completa la función `Median` que recibe un vector de enteros. La función `Median` debe invocar la función `Sort` para ordenar los enteros y calcular la mediana. La función devuelve la mediana calculada.
260
+
261
+2. Crea una prueba unitaria para validar la función `Median` e invócala desde la función `RemoveNoise`.
262
+
263
+
264
+### Ejercicio 3: Calcular la mediana de cada píxel
265
+
266
+Completa la función `MedianPixel` que recibe un vector de píxeles (de tipo `QRgb`) y devuelve el píxel `QRgb` correspondiente a la mediana de los píxeles. La mediana de los píxeles se compone de las medianas de cada componente de color en los píxeles.
267
+
268
+En el código proveemos una función que puedes usar para validar la función `MedianPixel`.
269
+
270
+#### Algoritmo:
271
+
272
+Para computar la mediana del píxel, para cada uno de los componentes de color (rojo, verde y azul), extrae el componente en un vector e invoca la función `Median` para calcular la mediana sobre ese vector. Por ejemplo, si recibimos un vector con los píxeles 0xff112233, 0x113344, y 0x224455, una de las primeras tareas del algoritmo sería extraer los componentes rojos y crear un vector con ellos: 0x11, 0x11 y 0x22. Luego se enviaría ese vector a la función `Median` para obtener la mediana (y obtendremos 0x11 como resultado). Esto se realizaría también para los componentes verde y azul.
273
+
274
+
275
+### Ejercicio 4: Remover ruido
276
+
277
+Tu última tarea es completar la función `RemoveNoise` que recibe un vector de imágenes con ruido y la referencia a la imagen editada que tendrá el ruido removido.
278
+
279
+#### Algoritmo:
280
+
281
+Para cada posición $$(x,y)$$, forma un vector de píxeles que contendrá los valores de los píxeles en la posición $$(x,y)$$ de cada una de las imágenes con ruido. Invoca la función `MedianPixel` y asigna el valor de la mediana los píxeles en la posición $$(x,y)$$ de la imagen editada.
282
+
283
+
284
+Cuando completes la función el botón `Remove Noise` ejecutará tus algoritmos y desplegará la imagen final.
285
+
286
+---
287
+
288
+---
289
+
290
+##Entrega
291
+
292
+Utiliza "Entrega" en Moodle para entregar el archivo `Filter.cpp` que contiene las funciones  que implementaste en esta experiencia de laboratorio. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
293
+
294
+---
295
+
296
+---
297
+
298
+
299
+
300
+##Referencias
301
+
302
+[1] John Nicholson, http://nifty.stanford.edu/2014/nicholson-the-pesky-tourist/