Przeglądaj źródła

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

Jose R Ortiz Ubarri 8 lat temu
rodzic
commit
bde431fcb9
1 zmienionych plików z 38 dodań i 39 usunięć
  1. 38
    39
      README-es.md

+ 38
- 39
README-es.md Wyświetl plik

4
 ![main2.png](images/main2-small.png)
4
 ![main2.png](images/main2-small.png)
5
 ![main3.png](images/main3-small.png)
5
 ![main3.png](images/main3-small.png)
6
 
6
 
7
-[Verano 2016 - Ive]
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 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.
7
+[Verano 2016 - Ive - Coralys]
10
 
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.
11
 
10
 
12
 
11
 
13
 ## Objetivos:
12
 ## Objetivos:
14
 
13
 
15
-1. Practicar el ordenamiento de arreglos por selección y por método de "burbuja".
14
+1. Practicar el ordenamiento de arreglos por selección y por método de burbuja.
16
 
15
 
17
 2. Practicar el uso de estructuras de decisión y repetición.
16
 2. Practicar el uso de estructuras de decisión y repetición.
18
 
17
 
23
 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.
24
 
23
 
25
 
24
 
26
-Esta experiencia de laboratorio es una adaptación del "nifty assignment" presentado por  John Nicholson en [1].
25
+Esta experiencia de laboratorio es una adaptación del "nifty assignment" presentado por John Nicholson en [1].
26
+
27
 
27
 
28
 ## Pre-Lab:
28
 ## Pre-Lab:
29
 
29
 
30
 Antes de llegar al laboratorio debes:
30
 Antes de llegar al laboratorio debes:
31
 
31
 
32
-
33
 1. Repasar los algoritmos de ordenamiento por selección y de burbuja.
32
 1. Repasar los algoritmos de ordenamiento por selección y de burbuja.
34
 
33
 
35
-2. Familiarizarte con los métodos `push_back()`, `at(i)`,  `size()`, `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++.
36
 
35
 
37
-3. Familiarizarte con los métodos `width()`, `height()`, `pixel(i, j)`, `setPixel(i,j, pixel)`  de la clase `QImage` de `Qt`.
36
+3. Familiarizarte con los métodos `width()`, `height()`, `pixel(i, j)`, y `setPixel(i,j, pixel)` de la clase `QImage` de `Qt`.
38
 
37
 
39
 4. Estudiar los conceptos e instrucciones para la sesión de laboratorio.
38
 4. Estudiar los conceptos e instrucciones para la sesión de laboratorio.
40
 
39
 
41
-5. Tomar el quiz Pre-Lab que se encuentra en Moodle.
40
+5. Tomar el quiz Pre-Lab, disponible en Moodle.
42
 
41
 
43
 ---
42
 ---
44
 
43
 
45
 ---
44
 ---
46
 
45
 
46
+
47
 ## Píxeles
47
 ## Píxeles
48
 
48
 
49
-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
+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).
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 este lab no vamos a manipular el canal alfa de los píxeles.
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.
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
 
64
 
64
 
65
 ---
65
 ---
66
 
66
 
67
-## Procesamiento de imágenes
68
 
67
 
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 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
+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.
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, 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
 
74
-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
+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.
75
 
75
 
76
 ---
76
 ---
77
 
77
 
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 (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.
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.
88
 
90
 
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
 
91
 
91
-### Mediana de pixeles
92
+### Mediana de píxeles
92
 
93
 
93
 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.
94
 
95
 
95
-####Ejemplo: 
96
-Supón que debemos hallar la mediana de los tres píxeles con valores `0xff223344`, `0xff112233`, `0xff001155`.
96
+**Ejemplo:** 
97
+Supón que debemos hallar la mediana de los tres píxeles con valores `0xff223344`, `0xff112233`, y `0xff001155`.
97
 
98
 
98
 * La mediana del componente rojo es 0x11 (dado que los componentes rojos son `0x22`, `0x11` y `0x00`).
99
 * La mediana del componente rojo es 0x11 (dado que los componentes rojos son `0x22`, `0x11` y `0x00`).
99
 * La mediana del componente verde es 0x22 (dado que los componentes verdes son `0x33`, `0x22` y `0x11`).
100
 * La mediana del componente verde es 0x22 (dado que los componentes verdes son `0x33`, `0x22` y `0x11`).
100
-*  La mediana del componente azul es 0x44 (dado que los componentes azules son `0x44`, `0x33` y `0x55`).
101
+* La mediana del componente azul es 0x44 (dado que los componentes azules son `0x44`, `0x33` y `0x55`).
101
 
102
 
102
 Por lo tanto, la mediana de los píxeles sera `0xff112244`, compuesto por las medianas de los componentes de colores rojo, verde y azul.
103
 Por lo tanto, la mediana de los píxeles sera `0xff112244`, compuesto por las medianas de los componentes de colores rojo, verde y azul.
103
 
104
 
124
 Para esta experiencia de laboratorio necesitarás saber cómo utilizar los siguientes métodos de la clase `vector` de `C++`:
125
 Para esta experiencia de laboratorio necesitarás saber cómo utilizar los siguientes métodos de la clase `vector` de `C++`:
125
 
126
 
126
 
127
 
127
-* `push_back()` // insertar un elemento al final de un vector
128
-* `at(i)`       // obtener el elemento en la posición `i`
129
-* `size()`      // obtener el número de elementos en el vector
130
-* `clear()`     // vaciar el vector / remover los elementos.
128
+* `push_back()` // inserta un elemento al final de un vector
129
+* `at(i)`       // obtiene el elemento en la posición `i`
130
+* `size()`      // obtiene el número de elementos en el vector
131
+* `clear()`     // vacía el vector / remueve los elementos.
131
 
132
 
132
 
133
 
133
 Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
134
 Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
206
 
207
 
207
 ## Sesión de laboratorio:
208
 ## Sesión de laboratorio:
208
 
209
 
209
-
210
-
211
-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`.
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`.
212
 
211
 
213
 #### Algoritmo general para remover ruido de una imagen
212
 #### Algoritmo general para remover ruido de una imagen
214
 
213
 
215
 ```
214
 ```
216
-
217
 Input: VI, un vector con N imágenes
215
 Input: VI, un vector con N imágenes
218
 Output: una imagen sin ruido
216
 Output: una imagen sin ruido
219
 ---------------------------------------
217
 ---------------------------------------
233
 
231
 
234
 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
 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.
235
 
233
 
236
-#### Instrucciones
237
 
234
 
235
+#### Instrucciones
238
 
236
 
239
 1. Carga a `QtCreator` el proyecto `PeskyTourist`. Hay dos maneras de hacer esto:
237
 1. Carga a `QtCreator` el proyecto `PeskyTourist`. Hay dos maneras de hacer esto:
240
 
238
 
241
-	* Utilizando la máquina virtual: Haz doble “click” en el archivo `PeskyTourist.pro` que se encuentra  en el directorio `/home/eip/labs/sorting-peskytourist` de la máquina virtual.
242
-	* Descargando la carpeta del proyecto de `Bitbucket`: Utiliza un terminal y escribe el commando `git clone http:/bitbucket.org/eip-uprrp/sorting-peskytourist` para descargar la carpeta `tema-nombre` de `Bitbucket`. En esa carpeta, haz doble “click” en el archivo `PeskyTourist.pro`.
239
+	* Utilizando la máquina virtual: Haz doble “click” en el archivo `PeskyTourist.pro` que se encuentra en el directorio `/home/Documents/eip/sorting-peskytourist` de la máquina virtual.
240
+	* Descargando la carpeta del proyecto de `Bitbucket`: Utiliza un terminal y escribe el comando `git clone http:/bitbucket.org/eip-uprrp/sorting-peskytourist` para descargar la carpeta `sort-peskytourist` de `Bitbucket`. En esa carpeta, haz doble “click” en el archivo `PeskyTourist.pro`.
243
 
241
 
244
-2.  El código que te proveemos crea la interfaz de la Figura 3.
242
+2.  Configura el proyecto y ejecuta el programa marcando la flecha verde en el menú de la izquierda de la ventana de Qt Creator. El código que te proveemos crea la interfaz de la Figura 3.
245
 
243
 
246
     ---
244
     ---
247
 
245
 
253
 
251
 
254
 3. Marca el botón  `Load Images` y busca el directorio `ImagesPeskyTourist` que contiene las imágenes con el turista impertinente.
252
 3. Marca el botón  `Load Images` y busca el directorio `ImagesPeskyTourist` que contiene las imágenes con el turista impertinente.
255
 
253
 
256
-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.
254
+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.
257
 
255
 
258
 5. Crea una prueba unitaria para validar la función `Sort` e invócala desde la función `RemoveNoise`.
256
 5. Crea una prueba unitaria para validar la función `Sort` e invócala desde la función `RemoveNoise`.
259
 
257
 
275
 
273
 
276
 #### Algoritmo:
274
 #### Algoritmo:
277
 
275
 
278
-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.
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.
279
 
277
 
280
 
278
 
281
 ### Ejercicio 4: Remover ruido
279
 ### Ejercicio 4: Remover ruido
282
 
280
 
283
 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.
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.
284
 
282
 
283
+
285
 #### Algoritmo:
284
 #### Algoritmo:
286
 
285
 
287
 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.
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.
288
 
287
 
289
 
288
 
290
-Cuando completes la función el botón `Remove Noise` ejecutará tus algoritmos y desplegará la imagen final.
289
+Cuando completes la función, el botón `Remove Noise` ejecutará tus algoritmos y desplegará la imagen final.
291
 
290
 
292
 ---
291
 ---
293
 
292
 
294
 ---
293
 ---
295
 
294
 
296
-##Entrega
295
+## Entrega
297
 
296
 
298
-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.
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.
299
 
298
 
300
 ---
299
 ---
301
 
300
 
303
 
302
 
304
 
303
 
305
 
304
 
306
-##Referencias
305
+## Referencias
307
 
306
 
308
 [1] John Nicholson, http://nifty.stanford.edu/2014/nicholson-the-pesky-tourist/
307
 [1] John Nicholson, http://nifty.stanford.edu/2014/nicholson-the-pesky-tourist/