|
|
|
|
1
|
-# Arreglos - Editor de Imagenes Simple
|
|
|
|
|
1
|
+# Arreglos - Editor de Imágenes Simple
|
2
|
|
2
|
|
3
|
![main1.png](images/main1.png)
|
3
|
![main1.png](images/main1.png)
|
4
|
![main2.png](images/main2.png)
|
4
|
![main2.png](images/main2.png)
|
5
|
![main3.png](images/main3.png)
|
5
|
![main3.png](images/main3.png)
|
6
|
|
6
|
|
|
|
7
|
+[verano2016 - Coralys]
|
7
|
|
8
|
|
8
|
-Los arreglos de datos (*arrays*) nos facilitan guardar y trabajar con grupos de datos del mismo tipo. Los datos se guardan en espacios de memoria consecutivos a los que se puede acceder utilizando el nombre del arreglo e índices o suscritos que indican la posición en que se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder a los datos de un arreglo. En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos simples de procesamiento de imágenes para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales.
|
|
|
|
|
9
|
+Los arreglos de datos (*arrays*) nos facilitan guardar y trabajar con grupos de datos del mismo tipo. Los datos se guardan en espacios de memoria consecutivos a los que se puede acceder utilizando el nombre del arreglo con índices o suscritos que indican la posición en la que se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder a los datos de un arreglo. En la experiencia de laboratorio de hoy, diseñarás e implementarás algoritmos simples de procesamiento de imágenes para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales.
|
9
|
|
10
|
|
10
|
## Objetivos:
|
11
|
## Objetivos:
|
11
|
|
12
|
|
|
|
|
|
13
|
|
14
|
|
14
|
2. Aplicar ciclos anidados para implementar algoritmos simples de procesamiento de imágenes.
|
15
|
2. Aplicar ciclos anidados para implementar algoritmos simples de procesamiento de imágenes.
|
15
|
|
16
|
|
16
|
-3. Utilizar expresiones aritméticas para transformar colores de pixeles.
|
|
|
|
|
17
|
+3. Utilizar expresiones aritméticas para transformar colores de píxeles.
|
17
|
|
18
|
|
18
|
-4. Acceder pixeles en una imagen y descomponerlos en sus componentes rojo, azul y verde.
|
|
|
|
|
19
|
+4. Acceder píxeles en una imagen y descomponerlos en sus componentes rojo, azul y verde.
|
19
|
|
20
|
|
20
|
|
21
|
|
21
|
## Pre-Lab:
|
22
|
## Pre-Lab:
|
|
|
|
|
26
|
|
27
|
|
27
|
2. Haber repasado los conceptos básicos relacionados a estructuras de repetición y ciclos anidados.
|
28
|
2. Haber repasado los conceptos básicos relacionados a estructuras de repetición y ciclos anidados.
|
28
|
|
29
|
|
29
|
-3. Conocer las funciones básicas de `QImage` para manipular los pixeles de las imágenes.
|
|
|
|
|
30
|
+3. Conocer las funciones básicas de `QImage` para manipular los píxeles de las imágenes.
|
30
|
|
31
|
|
31
|
4. Haber estudiado los conceptos e instrucciones para la sesión de laboratorio.
|
32
|
4. Haber estudiado los conceptos e instrucciones para la sesión de laboratorio.
|
32
|
|
33
|
|
33
|
-5. Haber tomado el quiz Pre-Lab que se encuentra en Moodle.
|
|
|
|
|
34
|
+5. Haber tomado el quiz Pre-Lab disponible en Moodle.
|
34
|
|
35
|
|
35
|
---
|
36
|
---
|
36
|
|
37
|
|
|
|
|
|
39
|
|
40
|
|
40
|
## Edición de imágenes
|
41
|
## Edición de imágenes
|
41
|
|
42
|
|
42
|
-En esta experiencia de laboratorio, trabajarás con varios conceptos y destrezas básicas de edición de imágenes. Te proveemos un interfaz gráfico (GUI) simple que le permite al usuario cargar una imagen e invertirla vertical y horizontalmente. Tu tarea es crear e implementar una función para convertir una imagen a color a una imagen con tonos de gris, y otra función que convierta una imagen a color a una imagen en blanco y negro.
|
|
|
|
|
43
|
+En esta experiencia de laboratorio trabajarás con varios conceptos y destrezas básicas de edición de imágenes. Te proveemos un interfaz gráfico (GUI) simple que le permite al usuario cargar una imagen e invertirla vertical y horizontalmente. Tu tarea es crear e implementar una función para convertir una imagen a color a una imagen con tonos de gris, y otra función que convierta una imagen a color a una imagen en blanco y negro.
|
43
|
|
44
|
|
44
|
### Píxeles
|
45
|
### Píxeles
|
45
|
|
46
|
|
46
|
-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 1). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
|
|
|
|
|
47
|
+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 1). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo, un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
|
47
|
|
48
|
|
48
|
---
|
49
|
---
|
49
|
|
50
|
|
50
|
![figure1.png](images/figure1.png)
|
51
|
![figure1.png](images/figure1.png)
|
51
|
|
52
|
|
52
|
-**Figura 1.** Distribución de bits para las tonalidades de rojo, verde y azul dentro de la representación RGB. Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1).
|
|
|
|
|
53
|
+**Figura 1.** Distribución de bits para las tonalidades de rojo, verde y azul dentro de la representación RGB. Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1).
|
53
|
|
54
|
|
54
|
---
|
55
|
---
|
55
|
|
56
|
|
56
|
-En `Qt` se utiliza el tipo `QRgb` para representar valores `RGB`. 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.
|
|
|
|
|
57
|
+En `Qt` se utiliza el tipo de dato `QRgb` para representar valores `RGB`. 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.
|
57
|
|
58
|
|
58
|
### Biblioteca
|
59
|
### Biblioteca
|
59
|
|
60
|
|
60
|
-La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los pixeles 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.
|
61
|
|
62
|
|
62
|
El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
|
63
|
El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
|
63
|
|
64
|
|
64
|
* `originalImage` // contiene la información de la imagen original que vas a editar
|
65
|
* `originalImage` // contiene la información de la imagen original que vas a editar
|
65
|
* `editedImage` // contendrá la imagen editada
|
66
|
* `editedImage` // contendrá la imagen editada
|
66
|
|
67
|
|
67
|
-Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
|
|
|
|
|
68
|
+Los objetos de la clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
|
68
|
|
69
|
|
69
|
|
70
|
|
70
|
* `width()` // devuelve el valor entero del ancho de la imagen
|
71
|
* `width()` // devuelve el valor entero del ancho de la imagen
|
|
|
|
|
97
|
|
98
|
|
98
|
`editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
|
99
|
`editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
|
99
|
|
100
|
|
100
|
-4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de `originalImage`:
|
|
|
|
|
101
|
+4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de `originalImage`:
|
101
|
|
102
|
|
102
|
`int greenContent = qGreen(originalImage.pixel(1,1));`.
|
103
|
`int greenContent = qGreen(originalImage.pixel(1,1));`.
|
103
|
|
104
|
|
104
|
|
105
|
|
105
|
-5. El siguiente programa crea un objeto de clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
|
|
|
|
|
106
|
+5. El siguiente programa crea un objeto de la clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
|
106
|
|
107
|
|
107
|
---
|
108
|
---
|
108
|
|
109
|
|
|
|
|
|
148
|
|
149
|
|
149
|
### Ejercicio 1 - Entender el código provisto
|
150
|
### Ejercicio 1 - Entender el código provisto
|
150
|
|
151
|
|
151
|
-#### Instrucciones:
|
|
|
|
|
152
|
+#### Instrucciones
|
152
|
|
153
|
|
153
|
|
154
|
|
154
|
1. Carga a `QtCreator` el proyecto `SimpleImageEditor`. Hay dos maneras de hacer esto:
|
155
|
1. Carga a `QtCreator` el proyecto `SimpleImageEditor`. Hay dos maneras de hacer esto:
|
|
|
|
|
168
|
|
169
|
|
169
|
3. Estarás trabajando con el archivo `filter.cpp`. Estudia la función `HorizontalFlip` del archivo `filter.cpp` para que entiendas su operación.
|
170
|
3. Estarás trabajando con el archivo `filter.cpp`. Estudia la función `HorizontalFlip` del archivo `filter.cpp` para que entiendas su operación.
|
170
|
|
171
|
|
171
|
- En los ejercicios siguientes estarás usando mayormente los objetos `originalImage` y `editedImage` de clase `QImage`. ¿Cuál crees que es el propósito la variable `pixel`?
|
|
|
|
|
172
|
+ En los ejercicios siguientes estarás usando mayormente los objetos `originalImage` y `editedImage` de la clase `QImage`. ¿Cuál crees que es el propósito la variable `pixel`?
|
172
|
|
173
|
|
173
|
-4. El código que te proveemos ya tiene programado el funcionamiento de los botones de la interfaz gráfica. NO tienes que cambiar nada en este código pero te incluimos las siguientes explicaciones para que conozcas un poco del funcionamiento de los botones. En el archivo `mainwindow.cpp`, las etiquetas `lblOriginalImage` y `lblEditedImage` corresponden a las partes de la interfaz que identifican la imagen original y la imagen procesada. Los botones
|
|
|
|
|
174
|
+4. El código que te proveemos ya tiene programado el funcionamiento de los botones de la interfaz gráfica. NO tienes que cambiar nada en este código, pero te incluimos las siguientes explicaciones para que conozcas un poco del funcionamiento de los botones. En el archivo `mainwindow.cpp`, las etiquetas `lblOriginalImage` y `lblEditedImage` corresponden a las partes de la interfaz que identifican la imagen original y la imagen procesada. Los botones
|
174
|
|
175
|
|
175
|
* `btnLoadImage`
|
176
|
* `btnLoadImage`
|
176
|
* `btnSaveImage`
|
177
|
* `btnSaveImage`
|
|
|
|
|
190
|
El "image grayscale" es una operación que se usa para convertir una imagen a color a una imagen que solo tenga tonalidades de gris. Para hacer esta conversión se usa la siguiente fórmula en cada uno de los píxeles: `gray = (red * 11 + green * 16 + blue * 5)/32 ;` donde `red`, `green` y `blue` son los valores para los tonos de los colores rojo, verde y azul en el píxel de la imagen original a color, y `gray` será el color asignado a los colores rojo, verde y azul en el píxel de la imagen editada. Esto es,
|
191
|
El "image grayscale" es una operación que se usa para convertir una imagen a color a una imagen que solo tenga tonalidades de gris. Para hacer esta conversión se usa la siguiente fórmula en cada uno de los píxeles: `gray = (red * 11 + green * 16 + blue * 5)/32 ;` donde `red`, `green` y `blue` son los valores para los tonos de los colores rojo, verde y azul en el píxel de la imagen original a color, y `gray` será el color asignado a los colores rojo, verde y azul en el píxel de la imagen editada. Esto es,
|
191
|
`editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
|
192
|
`editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
|
192
|
|
193
|
|
193
|
-#### Instrucciones:
|
|
|
|
|
194
|
+#### Instrucciones
|
194
|
|
195
|
|
195
|
1. Utilizando pseudocódigo, expresa el algoritmo para convertir una imagen a color a una imagen solo con tonalidades de gris. El apéndice de este documento contiene algunos consejos sobre buenas prácticas al hacer pseudocódigos.
|
196
|
1. Utilizando pseudocódigo, expresa el algoritmo para convertir una imagen a color a una imagen solo con tonalidades de gris. El apéndice de este documento contiene algunos consejos sobre buenas prácticas al hacer pseudocódigos.
|
196
|
|
197
|
|
|
|
|
|
210
|
|
211
|
|
211
|
"Thresholding" es una operación que se puede utilizar para convertir una imagen a color a una imagen en blanco y negro. Para hacer esta conversión debemos decidir cuáles colores de la imagen original van a convertirse en píxeles blancos y cuáles serán negros. Una manera sencilla de decidir esto es computando el promedio de los componentes rojo, verde y azul de cada píxel. Si el promedio es menor que el valor umbral ("threshold"), entonces cambiamos el píxel a negro; de lo contrario se cambia a blanco.
|
212
|
"Thresholding" es una operación que se puede utilizar para convertir una imagen a color a una imagen en blanco y negro. Para hacer esta conversión debemos decidir cuáles colores de la imagen original van a convertirse en píxeles blancos y cuáles serán negros. Una manera sencilla de decidir esto es computando el promedio de los componentes rojo, verde y azul de cada píxel. Si el promedio es menor que el valor umbral ("threshold"), entonces cambiamos el píxel a negro; de lo contrario se cambia a blanco.
|
212
|
|
213
|
|
213
|
-#### Instrucciones:
|
|
|
|
|
214
|
+#### Instrucciones
|
214
|
|
215
|
|
215
|
1. Utilizando pseudocódigo, expresa el algoritmo para "thresholding". Presume que utilizarás el valor del deslizador como umbral.
|
216
|
1. Utilizando pseudocódigo, expresa el algoritmo para "thresholding". Presume que utilizarás el valor del deslizador como umbral.
|
216
|
|
217
|
|
|
|
|
|
236
|
|
237
|
|
237
|
---
|
238
|
---
|
238
|
|
239
|
|
239
|
-##Entrega
|
|
|
|
|
240
|
+## Entrega
|
240
|
|
241
|
|
241
|
-Utiliza "Entrega" en Moodle para entregar el archivo `filter.cpp` que contiene las funciones `GreyScale` y `Threshold`. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
|
|
|
|
|
242
|
+Utiliza "Entrega" en Moodle para entregar el archivo `filter.cpp` que contiene las funciones `GreyScale` y `Threshold`. Recuerda utilizar buenas prácticas de programación, incluye el nombre de los programadores y documenta tu programa.
|
242
|
|
243
|
|
243
|
---
|
244
|
---
|
244
|
|
245
|
|
245
|
---
|
246
|
---
|
246
|
|
247
|
|
247
|
-##Apéndice: Buenas prácticas al escribir pseudocódigos
|
|
|
|
|
248
|
+## Apéndice: Buenas prácticas al escribir pseudocódigos
|
248
|
|
249
|
|
249
|
-1. Provee una descripción de los datos de entrada y salida
|
|
|
250
|
-2. Enumera los pasos
|
|
|
251
|
-3. Usa estructuras de repetición y decisión comunes: `if, else, for, while`
|
|
|
252
|
-4. Indenta los bloques de pasos que están dentro de una estructura de repetición o decisión, "Python-style"
|
|
|
253
|
-5. No necesitas declarar los tipos de las variables pero si debes inicializarlas. Esto es especialmente importante para contadores y acumuladores
|
|
|
|
|
250
|
+1. Provee una descripción de los datos de entrada y salida.
|
|
|
251
|
+2. Enumera los pasos.
|
|
|
252
|
+3. Usa estructuras de repetición y decisión comunes: `if, else, for, while`.
|
|
|
253
|
+4. Indenta los bloques de pasos que están dentro de una estructura de repetición o decisión, "Python-style".
|
|
|
254
|
+5. No necesitas declarar los tipos de las variables, pero si debes inicializarlas. Esto es especialmente importante para contadores y acumuladores.
|
254
|
6. Recuerda que el propósito de un pseudocódigo es que un humano lo pueda entender.
|
255
|
6. Recuerda que el propósito de un pseudocódigo es que un humano lo pueda entender.
|
255
|
|
256
|
|
256
|
**Ejemplo:**
|
257
|
**Ejemplo:**
|
|
|
|
|
269
|
|
270
|
|
270
|
---
|
271
|
---
|
271
|
|
272
|
|
272
|
-##Referencias
|
|
|
|
|
273
|
+## Referencias
|
273
|
|
274
|
|
274
|
[1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
|
275
|
[1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
|
275
|
|
276
|
|