|
|
@@ -5,9 +5,9 @@
|
|
5
|
5
|
|
|
6
|
6
|
|
|
7
|
7
|
|
|
8
|
|
-[Verano 2016 - Ive]
|
|
|
8
|
+[Verano 2016 - Ive- Tatiana]
|
|
9
|
9
|
|
|
10
|
|
-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 practicarás el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales usando técnicas de "pantalla verde".
|
|
|
10
|
+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 donde se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder los datos de un arreglo. En la experiencia de laboratorio de hoy practicarás el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales usando técnicas de "pantalla verde".
|
|
11
|
11
|
|
|
12
|
12
|
|
|
13
|
13
|
##Objetivos:
|
|
|
@@ -33,7 +33,7 @@ Antes de llegar al laboratorio debes:
|
|
33
|
33
|
|
|
34
|
34
|
4. Haber visitado la siguiente página de Facebook para ver cómo se ha usado la tecnología de pantalla verde en algunas películas de Hollywood: https://www.facebook.com/video.php?v=920387528037801
|
|
35
|
35
|
|
|
36
|
|
-5. Haber tomado el quiz Pre-Lab que se encuentra en Moodle.
|
|
|
36
|
+5. Haber tomado el quiz Pre-Lab disponible en Moodle.
|
|
37
|
37
|
|
|
38
|
38
|
|
|
39
|
39
|
---
|
|
|
@@ -42,9 +42,9 @@ Antes de llegar al laboratorio debes:
|
|
42
|
42
|
|
|
43
|
43
|
##Tecnología de pantalla verde ("Green Screen")
|
|
44
|
44
|
|
|
45
|
|
-En esta experiencia de laboratorio, aprenderás los conceptos y destrezas básicas de la tecnología de pantalla verde que se usa en boletines informativos de televisión, películas, juegos de video y otros. La composición de pantalla verde, o composición cromática, es una técnica que se usa para combinar dos imágenes o cuadros de video [1]. Esta técnica de post-producción crea efectos especiales al componer dos imágenes o transmisiones de video sustituyendo el área de un color sólido por otra imágen [2]. La composición cromática se puede hacer con imágenes de objetos sobre fondos de cualquier color que sean uniformes y diferentes a los de la imagen. Los fondos azules y verdes son los que se usan con más frecuencia porque se distinguen con más facilidad de los tonos de la mayoría de los colores de piel humanos.
|
|
|
45
|
+En esta experiencia de laboratorio, aprenderás los conceptos y destrezas básicas de la tecnología de pantalla verde que se usa en boletines informativos de televisión, películas, videojuegos y otros. La composición de pantalla verde, o composición cromática, es una técnica que se usa para combinar dos imágenes o cuadros de video [1]. Esta técnica de post-producción crea efectos especiales al componer dos imágenes o transmisiones de video sustituyendo el área de un color sólido por otra imágen [2]. La composición cromática se puede hacer con imágenes de objetos sobre fondos de cualquier color que sean uniformes y diferentes a los de la imagen. Los fondos azules y verdes son los que se usan con más frecuencia porque se distinguen con más facilidad de los tonos de la mayoría de los colores de piel humanos.
|
|
46
|
46
|
|
|
47
|
|
-Para esta experiencia de laboratorio te proveemos un interfaz gráfico (GUI) simple que permite al usuario cargar una imagen con un objeto sobre un fondo de color sólido (preferiblemente azul o verde) y una imagen para sustituir el fondo. Tu tarea es crear e implementar una función que cree una tercera imagen compuesta en la cual, a la imagen del objeto con el fondo de color sólido se le removerá el color de fondo y el objeto aparecerá sobre la imagen que será el nuevo fondo. La Figura 1 muestra un ejemplo de los resultados esperados.
|
|
|
47
|
+Para esta experiencia de laboratorio te proveemos un interfaz gráfico (GUI) simple que permite al usuario cargar una imagen con un objeto sobre un fondo de color sólido (preferiblemente azul o verde) y una imagen para sustituir el fondo. Tu tarea es crear e implementar una función que cree una tercera imagen compuesta en la cua,l la imagen del objeto con el fondo de color sólido se le removerá el color de fondo y el objeto aparecerá sobre la imagen que será el nuevo fondo. La Figura 1 muestra un ejemplo de los resultados esperados.
|
|
48
|
48
|
|
|
49
|
49
|
---
|
|
50
|
50
|
|
|
|
@@ -70,7 +70,7 @@ Para producir la imagen compuesta (*imagen C*), podríamos comenzar copiando tod
|
|
70
|
70
|
|
|
71
|
71
|
##Píxeles
|
|
72
|
72
|
|
|
73
|
|
-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 3). 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).
|
|
|
73
|
+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 3). 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).
|
|
74
|
74
|
|
|
75
|
75
|
---
|
|
76
|
76
|
|
|
|
@@ -89,22 +89,22 @@ La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase pe
|
|
89
|
89
|
El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
|
|
90
|
90
|
|
|
91
|
91
|
* `originalImage` // contiene la información de la imagen original que vas a editar
|
|
92
|
|
-* `editedImage` // contendrá la imagen editada
|
|
|
92
|
+* `editedImage` // contendrá la imagen editada
|
|
93
|
93
|
|
|
94
|
94
|
Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
|
|
95
|
95
|
|
|
96
|
96
|
|
|
97
|
|
-* `width()` // devuelve el valor entero del ancho de la imagen
|
|
98
|
|
-* `height()` // devuelve el valor entero de la altura de la imagen
|
|
99
|
|
-* `pixel(i, j)` // devuelve el `QRgb` del píxel en la posición `(i,j)`
|
|
|
97
|
+* `width()` // devuelve el valor entero del ancho de la imagen
|
|
|
98
|
+* `height()` // devuelve el valor entero de la altura de la imagen
|
|
|
99
|
+* `pixel(i, j)` // devuelve el `QRgb` del píxel en la posición `(i,j)`
|
|
100
|
100
|
* `setPixel(i,j, pixel)` // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`
|
|
101
|
101
|
|
|
102
|
102
|
Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
|
|
103
|
103
|
|
|
104
|
104
|
|
|
105
|
|
-* `qRed(pixel)` // devuelve el tono del color rojo del píxel
|
|
106
|
|
-* `qGreen(pixel)` // devuelve el tono del color verde del píxel
|
|
107
|
|
-* `qBlue(pixel)` // devuelve el tono del color azul del píxel
|
|
|
105
|
+* `qRed(pixel)` // devuelve el tono del color rojo del píxel
|
|
|
106
|
+* `qGreen(pixel)` // devuelve el tono del color verde del píxel
|
|
|
107
|
+* `qBlue(pixel)` // devuelve el tono del color azul del píxel
|
|
108
|
108
|
* `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
|
|
109
|
109
|
|
|
110
|
110
|
|
|
|
@@ -197,7 +197,7 @@ donde $$P_R, P_G, P_B$$ son los valores de los componentes rojo, verde y azul de
|
|
197
|
197
|
|
|
198
|
198
|
##Sesión de laboratorio:
|
|
199
|
199
|
|
|
200
|
|
-En el laboratorio de hoy, comenzando con una imagen con un objeto de interés sobre un fondo de color sólido y una imagen para utilizar como fondo, definirás e implantarás una función que cree una tercera imagen compuesta en la cual, a la imagen del objeto de interés se le removerá el color de fondo y aparecerá sobre la imagen para el fondo.
|
|
|
200
|
+En el laboratorio de hoy, comenzando con una imagen con un objeto de interés sobre un fondo de color sólido y una imagen para utilizar de fondo, definirás e implantarás una función que cree una tercera imagen compuesta en la cual, a la imagen del objeto de interés se le removerá el color de fondo y aparecerá sobre la imagen para el fondo.
|
|
201
|
201
|
|
|
202
|
202
|
Estarás trabajando con el archivo `Filter.cpp`. Lo que sigue es un resumen de las variables en este archivo.
|
|
203
|
203
|
|
|
|
@@ -206,8 +206,8 @@ Estarás trabajando con el archivo `Filter.cpp`. Lo que sigue es un resumen de l
|
|
206
|
206
|
* `mergedImage`: referencia a la imagen compuesta
|
|
207
|
207
|
* `threshold`: valor umbral usado para comparar las distancias entre el valor del color del píxel de la imagen con el objeto sobre fondo sólido. En el código que se provee, el valor del umbral se lee del valor de la barra deslizable.
|
|
208
|
208
|
* `ghost`: valor Booleano utilizado para aplicar el filtro "fantasma" a los pixeles.
|
|
209
|
|
-* `(x, y)`: coordenadas de un pixel de la imagen del objeto sobre fondo sólido. El valor por defecto es `(0,0)`.
|
|
210
|
|
-* `(offset_x, offset_y)`: coordenadas de la imagen compuesta en donde la esquina superior izquierda de la imagen del objeto sobre fondo sólido será insertada. El valor por defecto es `(0,0)`.
|
|
|
209
|
+* `(x, y)`: coordenadas de un pixel de la imagen del objeto sobre fondo sólido. El valor predeterminado es `(0,0)`.
|
|
|
210
|
+* `(offset_x, offset_y)`: coordenadas de la imagen compuesta en donde la esquina superior izquierda de la imagen del objeto sobre fondo sólido será insertada. El valor predeterminado es `(0,0)`.
|
|
211
|
211
|
|
|
212
|
212
|
|
|
213
|
213
|
###Ejercicio 1: Crear imagen compuesta
|
|
|
@@ -217,7 +217,7 @@ Estarás trabajando con el archivo `Filter.cpp`. Lo que sigue es un resumen de l
|
|
217
|
217
|
1. Carga a `QtCreator` el proyecto `GreenScreenLab`. Hay dos maneras de hacer esto:
|
|
218
|
218
|
|
|
219
|
219
|
* Utilizando la máquina virtual: Haz doble “click” en el archivo `GreenScreenLab.pro` que se encuentra en el directorio `/home/eip/labs/arrays-greenscreen` de la máquina virtual.
|
|
220
|
|
- * Descargando la carpeta del proyecto de `Bitbucket`: Utiliza un terminal y escribe el commando `git clone http:/bitbucket.org/eip-uprrp/arrays-greenscreen` para descargar la carpeta `arrays-greenscreen` de `Bitbucket`. En esa carpeta, haz doble “click” en el archivo `GreenScreenLab.pro`.
|
|
|
220
|
+ * Descargando la carpeta del proyecto de `Bitbucket`: Utiliza un terminal y escribe el comando `git clone http:/bitbucket.org/eip-uprrp/arrays-greenscreen` para descargar la carpeta `arrays-greenscreen` de `Bitbucket`. En esa carpeta, haz doble “click” en el archivo `GreenScreenLab.pro`.
|
|
221
|
221
|
|
|
222
|
222
|
2. Configura el proyecto y corre el programa. El código que te proveemos crea la interfaz de la Figura 5. Los botones *Select Image* y *Select Background Image* ya han sido programados.
|
|
223
|
223
|
|
|
|
@@ -296,7 +296,7 @@ Tu tarea en este ejercicio es la misma que en el Ejercicio 1, pero esta vez debe
|
|
296
|
296
|
|
|
297
|
297
|
---
|
|
298
|
298
|
|
|
299
|
|
-El ejemplo de la Figura 10 muestra cómo se comportará la imagen del objeto al sobreponerla en la imagen que queremos de fondo. Las variables `offset_x, offset_y` representan el punto en la imagen de fondo en el que se colocará la esquina superior izquierda de la imagen del objeto. Nota que si se escoge un punto muy cerca del borde para la composición, parte de la imagen del objeto se sale de los límites de la imagen de fondo. Como hemos visto en la manipulación de arreglos, si se intenta acceder o alterar elementos que estan fuera del rango de tamaño del arreglo, al compilar occurre un error fatal. Lo mismo sucede con las imágenes.
|
|
|
299
|
+El ejemplo de la Figura 10 muestra cómo se comportará la imagen del objeto al sobreponerla en la imagen que queremos de fondo. Las variables `offset_x, offset_y` representan el punto en la imagen de fondo en el que se colocará la esquina superior izquierda de la imagen del objeto. Nota que si se escoge un punto muy cerca del borde para la composición, parte de la imagen del objeto se sale de los límites de la imagen de fondo. Como hemos visto en la manipulación de arreglos, si se intenta acceder o alterar elementos que están fuera del rango de tamaño del arreglo, al compilar ocurre un error fatal. Lo mismo sucede con las imágenes.
|
|
300
|
300
|
|
|
301
|
301
|
Debes asegurarte de que tu implementación toma en cuenta los valores de `offset x` y `offset y` para que la composición no intente acceder o alterar píxeles fuera del límite de la imagen de fondo. Si intentas acceder o alterar píxeles fuera de esos límites, resulta en un error fatal.
|
|
302
|
302
|
|
|
|
@@ -339,3 +339,6 @@ Utiliza "Entrega" en Moodle para entregar el archivo `Filter.cpp` que contiene l
|
|
339
|
339
|
|
|
340
|
340
|
---
|
|
341
|
341
|
|
|
|
342
|
+
|
|
|
343
|
+
|
|
|
344
|
+
|
