Browse Source

README-es.md edited on August 3, 2016 at 4:15pm

Jose R Ortiz Ubarri 8 years ago
parent
commit
75a6b96d2d
1 changed files with 24 additions and 31 deletions
  1. 24
    31
      README-es.md

+ 24
- 31
README-es.md View File

6
 
6
 
7
 [Verano 2016 - Ive - Coralys]
7
 [Verano 2016 - Ive - Coralys]
8
 
8
 
9
-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 de burbuja (Bubble sort). Los algoritmos de ordenamiento forman parte de muchos programas; 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
+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 de burbuja (Bubble Sort). Los algoritmos de ordenamiento forman parte de muchos programas; 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.
10
 
10
 
11
 
11
 
12
 ## Objetivos:
12
 ## Objetivos:
17
 
17
 
18
 3. Utilizar métodos de la clase `vector` de C++.
18
 3. Utilizar métodos de la clase `vector` de C++.
19
 
19
 
20
-4. Utilizar los métodos de la clase  `QImage` de `Qt` para manipular los pixeles de una imagen.
20
+4. Utilizar los métodos de la clase  `QImage` de `Qt` para manipular los píxeles de una imagen.
21
 
21
 
22
 5. Aprender sobre el filtro de mediana para el procesamiento de imágenes.
22
 5. Aprender sobre el filtro de mediana para el procesamiento de imágenes.
23
 
23
 
29
 
29
 
30
 Antes de llegar al laboratorio debes:
30
 Antes de llegar al laboratorio debes:
31
 
31
 
32
-1. Repasar los algoritmos de ordenamiento por selección y de burbuja.
32
+1. Repasar los algoritmos de ordenamiento de selección y de burbuja.
33
 
33
 
34
 2. Familiarizarte con los métodos `push_back()`, `at(i)`,  `size()`, y `clear()` de la clase `vector` de C++.
34
 2. Familiarizarte con los métodos `push_back()`, `at(i)`,  `size()`, y `clear()` de la clase `vector` de C++.
35
 
35
 
46
 
46
 
47
 ## Píxeles
47
 ## Píxeles
48
 
48
 
49
-Al elemento más pequeño de una imagen se le llama *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 esta experiencia de laboratorio, asumiremos que el alfa de los píxeles tiene opacidad total (0xff).
49
+Al elemento más pequeño de una imagen se le llama *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 píxel (Figura 2). Un cuarto de un byte especifica lo que se conoce como la *composición alfa*,  la cual define la opacidad del píxel (0xff es totalmente opaco y 0x00 es totalmente transparente, e.g. 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 esta experiencia de laboratorio, asumiremos que el alfa de los píxeles tiene opacidad total (0xff).
50
 
50
 
51
 ---
51
 ---
52
 
52
 
56
 
56
 
57
 ---
57
 ---
58
 
58
 
59
-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 esta experiencia de laboratorio, no vamos a manipular el canal alfa de los píxeles.
59
+En `Qt` se utiliza el tipo de dato `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 las imágenes. En esta experiencia de laboratorio, no vamos a manipular el canal alfa de los píxeles.
60
 
60
 
61
 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
 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.
62
 
62
 
67
 
67
 
68
 ## Procesamiento de imágenes
68
 ## Procesamiento de imágenes
69
 
69
 
70
-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 publicas una imagen hay un filtro de procesamiento de imágenes tomando efecto. Asimismo, 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
+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 publicas una imagen, hay un filtro de procesamiento de imágenes tomando efecto. Las redes sociales, las cámaras, y los dispositivos móviles usan el procesamiento de imágenes para reconocimiento facial. Asimismo, investigadores usan el procesamiento de imágenes para contar organismos dentro de un espacio explorado, para detectar anomalías en las exploraciones de tomografías computarizadas ("CT scans"), y en general, para obtener mejor información acerca de objetos explorados.
71
 
71
 
72
 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, y 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
 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, y 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.
73
 
73
 
84
 
84
 
85
 ### Mediana
85
 ### Mediana
86
 
86
 
87
-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
+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 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.
88
 
88
 
89
 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
 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.
90
 
90
 
94
 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.
94
 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.
95
 
95
 
96
 **Ejemplo:** 
96
 **Ejemplo:** 
97
+
97
 Supón que debemos hallar la mediana de los tres píxeles con valores `0xff223344`, `0xff112233`, y `0xff001155`.
98
 Supón que debemos hallar la mediana de los tres píxeles con valores `0xff223344`, `0xff112233`, y `0xff001155`.
98
 
99
 
99
 * La mediana del componente rojo es 0x11 (dado que los componentes rojos son `0x22`, `0x11` y `0x00`).
100
 * La mediana del componente rojo es 0x11 (dado que los componentes rojos son `0x22`, `0x11` y `0x00`).
118
 ---
119
 ---
119
 
120
 
120
 
121
 
121
-
122
-
123
 ## Bibliotecas
122
 ## Bibliotecas
124
 
123
 
125
 Para esta experiencia de laboratorio necesitarás saber cómo utilizar los siguientes métodos de la clase `vector` de `C++`:
124
 Para esta experiencia de laboratorio necesitarás saber cómo utilizar los siguientes métodos de la clase `vector` de `C++`:
140
 
139
 
141
 Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para manipular los píxeles de las imágenes:
140
 Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para manipular los píxeles de las imágenes:
142
 
141
 
143
-
144
 * `width()`      // devuelve el valor entero del ancho de la imagen
142
 * `width()`      // devuelve el valor entero del ancho de la imagen
145
 * `height()`      // devuelve el valor entero de la altura de la imagen
143
 * `height()`      // devuelve el valor entero de la altura de la imagen
146
 * `pixel(i, j)`       // devuelve el `QRgb` del píxel en la posición `(i,j)`
144
 * `pixel(i, j)`       // devuelve el `QRgb` del píxel en la posición `(i,j)`
147
 * `setPixel(i,j, pixel)`   // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`.
145
 * `setPixel(i,j, pixel)`   // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`.
148
-
149
 * `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
146
 * `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
150
 
147
 
151
 
148
 
165
 
162
 
166
    	`editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
163
    	`editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
167
 
164
 
168
-4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de  `originalImage`:
165
+4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de `originalImage`:
169
 
166
 
170
    	`int greenContent = qGreen(originalImage.pixel(1,1));`.
167
    	`int greenContent = qGreen(originalImage.pixel(1,1));`.
171
 
168
 
172
-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.
169
+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.
173
 
170
 
174
 ---
171
 ---
175
 
172
 
194
 ```
191
 ```
195
 
192
 
196
 
193
 
194
+
197
 ---
195
 ---
198
 
196
 
199
 !INCLUDE "../../eip-diagnostic/pesky-tourist/es/diag-pesky-tourist-01.html"
197
 !INCLUDE "../../eip-diagnostic/pesky-tourist/es/diag-pesky-tourist-01.html"
200
 <br>
198
 <br>
201
 
199
 
202
-
203
-
204
 ---
200
 ---
205
 
201
 
206
 ---
202
 ---
207
 
203
 
204
+
208
 ## Sesión de laboratorio:
205
 ## Sesión de laboratorio:
209
 
206
 
210
 El proyecto `PeskyTourist` contiene el esqueleto de una aplicación para remover el "ruido" de una imagen. En esta experiencia de laboratorio 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`.
207
 El proyecto `PeskyTourist` contiene el esqueleto de una aplicación para remover el "ruido" de una imagen. En esta experiencia de laboratorio 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`.
212
 #### Algoritmo general para remover ruido de una imagen
209
 #### Algoritmo general para remover ruido de una imagen
213
 
210
 
214
 ```
211
 ```
212
+
215
 Input: VI, un vector con N imágenes
213
 Input: VI, un vector con N imágenes
216
 Output: una imagen sin ruido
214
 Output: una imagen sin ruido
217
 ---------------------------------------
215
 ---------------------------------------
218
 1. Para cada posición x,y:
216
 1. Para cada posición x,y:
219
-
220
-2.     P es un vector de tamaño N
221
-
222
-3.     Asignar a los elementos de P los valores
223
-       de los píxeles en la posicion (x,y) de las N imágenes de VI
224
-
225
-4.     M = mediana de los píxeles de P
226
-
227
-5.     Asignar el valor de M al píxel (x,y) de la imagen sin ruido
217
+	* P es un vector de tamaño N
218
+    * Asignar a los elementos de P los valores de los píxeles en la posicion (x,y) de las N imágenes de VI
219
+	* M = mediana de los píxeles de P
220
+	* Asignar el valor de M al píxel (x,y) de la imagen sin ruido
221
+	
228
 ```
222
 ```
229
 
223
 
230
-### Ejercicio 1: Implementar una función para ordenar un vector de enteros
224
+### Ejercicio 1 - Implementar una función para ordenar un vector de enteros
231
 
225
 
232
 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.
226
 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.
233
 
227
 
256
 5. Crea una prueba unitaria para validar la función `Sort` e invócala desde la función `RemoveNoise`.
250
 5. Crea una prueba unitaria para validar la función `Sort` e invócala desde la función `RemoveNoise`.
257
 
251
 
258
 
252
 
259
-### Ejercicio 2: Calcular la mediana de un vector de enteros
253
+### Ejercicio 2 - Calcular la mediana de un vector de enteros
260
 
254
 
261
 #### Instrucciones
255
 #### Instrucciones
262
 
256
 
265
 2. Crea una prueba unitaria para validar la función `Median` e invócala desde la función `RemoveNoise`.
259
 2. Crea una prueba unitaria para validar la función `Median` e invócala desde la función `RemoveNoise`.
266
 
260
 
267
 
261
 
268
-### Ejercicio 3: Calcular la mediana de cada píxel
262
+### Ejercicio 3 - Calcular la mediana de cada píxel
269
 
263
 
270
 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.
264
 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.
271
 
265
 
272
 En el código proveemos una función que puedes usar para validar la función `MedianPixel`.
266
 En el código proveemos una función que puedes usar para validar la función `MedianPixel`.
273
 
267
 
274
-#### Algoritmo:
268
+**Algoritmo:**
275
 
269
 
276
 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 (obtendremos 0x11 como resultado). Esto se realizaría también para los componentes verde y azul.
270
 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 (obtendremos 0x11 como resultado). Esto se realizaría también para los componentes verde y azul.
277
 
271
 
281
 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.
275
 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.
282
 
276
 
283
 
277
 
284
-#### Algoritmo:
278
+**Algoritmo:**
285
 
279
 
286
 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.
280
 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.
287
 
281
 
294
 
288
 
295
 ## Entrega
289
 ## Entrega
296
 
290
 
297
-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, al incluir el nombre de los programadores y documentar tu programa.
291
+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, incluye el nombre de los programadores y documenta tu programa.
298
 
292
 
299
 ---
293
 ---
300
 
294
 
301
 ---
295
 ---
302
 
296
 
303
 
297
 
304
-
305
 ## Referencias
298
 ## Referencias
306
 
299
 
307
 [1] John Nicholson, http://nifty.stanford.edu/2014/nicholson-the-pesky-tourist/
300
 [1] John Nicholson, http://nifty.stanford.edu/2014/nicholson-the-pesky-tourist/