|
@@ -40,11 +40,11 @@ Antes de llegar al laboratorio debes:
|
40
|
40
|
|
41
|
41
|
## Edición de imágenes
|
42
|
42
|
|
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
|
+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.
|
44
|
44
|
|
45
|
45
|
### Píxeles
|
46
|
46
|
|
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
|
+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 de `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).
|
48
|
48
|
|
49
|
49
|
---
|
50
|
50
|
|
|
@@ -54,7 +54,8 @@ Al elemento más pequeño de una imagen se le llama *píxel*. Esta unidad consis
|
54
|
54
|
|
55
|
55
|
---
|
56
|
56
|
|
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
|
+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 las imágenes.
|
|
58
|
+
|
58
|
59
|
|
59
|
60
|
### Biblioteca
|
60
|
61
|
|
|
@@ -155,7 +156,7 @@ En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos
|
155
|
156
|
1. Carga a `QtCreator` el proyecto `SimpleImageEditor`. Hay dos maneras de hacer esto:
|
156
|
157
|
|
157
|
158
|
* Utilizando la máquina virtual: Haz doble “click” en el archivo `SimpleImageEditor.pro` que se encuentra en el directorio `/home/eip/labs/arrays-simpleimageeditor` de la máquina virtual.
|
158
|
|
- * Descargando la carpeta del proyecto de `Bitbucket`: Utiliza un terminal y escribe el commando `git clone http:/bitbucket.org/eip-uprrp/arrays-simpleimageeditor` para descargar la carpeta `arrays-simpleimageeditor` de `Bitbucket`. En esa carpeta, haz doble “click” en el archivo `SimpleImageEditor.pro`.
|
|
159
|
+ * Descargando la carpeta del proyecto de `Bitbucket`: Utiliza un terminal y escribe el comando `git clone http:/bitbucket.org/eip-uprrp/arrays-simpleimageeditor` para descargar la carpeta `arrays-simpleimageeditor` de `Bitbucket`. En esa carpeta, haz doble “click” en el archivo `SimpleImageEditor.pro`.
|
159
|
160
|
|
160
|
161
|
2. El código que te proveemos crea la interfaz de la Figura 2.
|
161
|
162
|
|
|
@@ -188,12 +189,13 @@ En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos
|
188
|
189
|
|
189
|
190
|
### Ejercicio 2 - Convertir una imagen a colores a una imagen en tonos de gris
|
190
|
191
|
|
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,
|
|
192
|
+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,
|
|
193
|
+
|
192
|
194
|
`editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
|
193
|
195
|
|
194
|
196
|
#### Instrucciones
|
195
|
197
|
|
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.
|
|
198
|
+1. Utilizando pseudocódigo, expresa el algoritmo para convertir una imagen a color a una imagen con tonalidades de gris solamente. El apéndice de este documento contiene algunos consejos sobre buenas prácticas al hacer pseudocódigos.
|
197
|
199
|
|
198
|
200
|
2. Completa la función `GreyScale` en el archivo `filter.cpp` para implementar el algoritmo de tonalidades de gris. La función debe producir un resultado similar al de la Figura 3, en donde la imagen de la izquierda es la imagen original y la de la derecha es la imagen editada.
|
199
|
201
|
|
|
@@ -275,10 +277,3 @@ Output: true if n is prime, false otherwise
|
275
|
277
|
[1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
|
276
|
278
|
|
277
|
279
|
[2] http://doc.qt.io/qt-4.8/qimage.html.
|
278
|
|
-
|
279
|
|
-
|
280
|
|
----
|
281
|
|
-
|
282
|
|
----
|
283
|
|
-
|
284
|
|
----
|