Browse Source

README-es.md edited online with Bitbucket

Jose R Ortiz Ubarri 8 years ago
parent
commit
5b55c67cc9
1 changed files with 21 additions and 18 deletions
  1. 21
    18
      README-es.md

+ 21
- 18
README-es.md View File

5
 ![main2.png](images/main2.png)
5
 ![main2.png](images/main2.png)
6
 ![main3.png](images/main3.png)
6
 ![main3.png](images/main3.png)
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
 ##Objetivos:
13
 ##Objetivos:
33
 
33
 
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 
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
 
42
 
43
 ##Tecnología de pantalla verde ("Green Screen")
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
 
70
 
71
 ##Píxeles
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
 El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
89
 El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
90
 
90
 
91
 * `originalImage`   // contiene la información de la imagen original que vas a editar
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
 Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
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
 * `setPixel(i,j, pixel)`   // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`
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
 Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
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
 * `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
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
 
197
 
198
 ##Sesión de laboratorio:
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
 Estarás trabajando con el archivo `Filter.cpp`. Lo que sigue es un resumen de las variables en este archivo.
202
 Estarás trabajando con el archivo `Filter.cpp`. Lo que sigue es un resumen de las variables en este archivo.
203
 
203
 
206
 * `mergedImage`: referencia a la imagen compuesta
206
 * `mergedImage`: referencia a la imagen compuesta
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.
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
 * `ghost`: valor Booleano utilizado para aplicar el filtro "fantasma" a los pixeles. 
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
 ###Ejercicio 1: Crear imagen compuesta
213
 ###Ejercicio 1: Crear imagen compuesta
217
 1. Carga a `QtCreator` el proyecto `GreenScreenLab`. Hay dos maneras de hacer esto:
217
 1. Carga a `QtCreator` el proyecto `GreenScreenLab`. Hay dos maneras de hacer esto:
218
    
218
    
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.
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
 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.
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
 
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
 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.
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
 
339
 
340
 ---
340
 ---
341
 
341
 
342
+
343
+
344
+