[MÚSICA] [MÚSICA] Hola y bienvenidos a este nuevo video, en el que vamos a seguir estudiando estructuras de datos relativamente complejas, construidas a partir de los tipos básicos del lenguaje. En uno de los videos anteriores, construimos una estructura de datos para representar imágenes vectoriales, las cuales se basan en la descripción de las figuras geométricas que la componen. En cambio en este nuevo video, vamos a hablar de imágenes rasterizadas, también llamadas mapas de bits, Estas son las imágenes que utilizamos la mayor parte del tiempo, siempre que usamos un programa similar a photoshop para paint, para manipular una foto en nuestro computador, celular o tableta, estamos usando imágenes rasterizadas. En este video y en la siguientes actividades, veremos como se representan este tipo de imágenes como matrices de tuplas en Python, y como las podemos manipular para lograr efectos muy útiles e interesantes. Empecemos observando esta fotografía de un famoso cuadro de Van Gogh. Una imagen como esta es tan compleja, que resulta imposible imaginar como describirla en términos de figuras geométricas de colores, así que no podríamos almacenarla como una imagen vectorial. Lo que necesitamos es tratar la imagen como una imagen rasterizada o como un mapa de bits. Esto quiere decir que en lugar de preocuparnos por las figuras que componen la imagen, vamos a preocuparnos uno por uno por los puntos o pixeles que componen la imagen. En una imagen como esta, donde la cantidad de pixeles es relativamente grande comparada con el tamaño que ocupa la imagen en sus computadores, nuestros ojos serán incapases de distinguir la diferencia entre los pixeles y veremos una imagen suave, en lugar de solo un conjunto de puntos. Ahora bien, en este ejemplo nuestro pixeles, son pixeles RGB, esto significa que el color de cada uno, lo vamos a describir a partir de las combinaciones de niveles de rojo, de verde y de azul. Estos niveles usualmente se describen como un número entre 0 y 255. Por ejemplo el color del pixel que tenemos señalado en la imagen, es el resultado de combinar un nivel de 139 de rojo con 100 de verde y 9 de azul. Esto quiere decir que tenemos un rojo de casi media intensidad, porque 139 es apenas el 54% de 255, tenemos un nivel de verde que es un poco menor que el nivel de rojo y prácticamente no tenemos nada de azul, apenas 9 de un máximo de 255. El resultado de esta combinación es el color ocre que vemos en la imagen. Pero detengámonos y estudiemos un poco más de donde sale este resultado. Los colores RGB están basados en algo que se llama síntesis aditiva de colores y que funciona con las reglas diferentes a la síntesis sustractiva de colores, con la probablemente todo jugamos en el colegio, usando pinturas o lápices de colores, aprendimos que se pueden mezclar colores básicos para obtener nuevos colores. La teoría dice que combinando los colores cían, que es una especie de azul, magenta y amarillo, podemos obtener todos los colores visibles. Por ejemplo, si observamos muy, muy de cerca una imagen en un periódico impreso, es posible que veamos imperfecciones del proceso de impresión, que muestran que la imprenta usa tintas de esos tres colores, para obtener toda la gama de colores. Esta síntesis se llama sustractiva, porque cada color reduce la cantidad de luz, hasta que eventualmente lleguemos al negro. Los colores RGB en cambio se basan en la síntesis aditiva, en la cual lo que se combina son luces de colores. Por ejemplo si apuntamos una linterna con luz roja y una linterna con luz azul al mismo lugar, obtendremos una luz de color magenta. Si hacemos experimentos similares con luces de los tres colores aditivos primarios rojo, verde y azul, nos daremos cuenta que podemos obtener todos los colores que queramos. Ese es el principio detrás del funcionamiento de la mayoría de pantallas y televisores. Por ejemplo, observa la letra A en color negro, que aparece en el recuadro blanco que acaba de aparecer en sus pantallas. Si tomamos una foto con algo de aumento, veremos que la pantalla está compuesta por varios puntos que están iluminados con dierentes colores. La mayoría de los pixeles en esta imagen están iluminados de blanco, mientras que solo los pixeles que corresponden a la letra A, están apagados para formar el color negro. Además debido al aumento en la foto, alcanzamos a ver una líneas negras alrededor de cada una de los pixeles de la pantalla, que eran imperceptibles cuando veíamos la imagen a una distancia mayor. Eso es absolutamente normal y una de las cosas que hace que una pantalla sea mejor que la otra es su resolución, la cual está relacionada con la distancia entre puntos. Entre mayor resolución tenga una pantalla, menor será la distancia entre ellos. Si la pantalla a la que le tomé la foto, hubiera sido un 4K, posiblemente no se vería tan marcado la retícula de los pixeles. Finalmente observemos el resultado cuando se utiliza mucho más aumento. En esta imagen, podemos ver que cada punto de la pantalla, es realmente una mezcla de tres minúsculos bombillos, uno rojo, uno verde y uno azul. Para que nosotros viéramos el color blanco en el fondo de la imagen, la pantalla encendió al máximo los tres colores. Para que nosotros viéramos el color negro, la pantalla apagó los tres colores. Finalmente en esta foto se puede ver que en el pixel que se encuentra en la mitad de la A, los tres colores no están ni completamente apagados ni completamente prendidos. Exploremos ahora algunas combinaciones de colores, para ver cómo podemos construir todos los colores que nos interesa. En esta tabla, hemos expresado el nivel de rojo, verde y azul, usando números entre 0 y 255, aunque no es la única forma en la que se puede hacer, es bastante común porque nos permite expresar el nivel de cada componente, usando solo un byte y el color de un pixel usando solo tres bytes. Los primeros tres colores de la tabla, corresponden a los colores aditivos primarios, por ejemplo, el rojo lo formamos usando el máximo posible de rojo, es decir 255, sin agregar nada de verde o azul. De la misma manera se pueden formar el azul y el verde. Ahora bien, combinando dos de esos colores, podemos obtener los llamados colores aditivos secundarios. Si mezclamos rojo al máximo con azul al máximo, obtenemos magenta. Si mezclamos verde al máximo con azul al máximo, obtenemos cían y si mezclamos rojo al máximo con verde al máximo, obtendremos amarillo. A partir de esta base, podemos construir muchísimos más colores, cambiando las intensidades, para que no siempre sean cero o el máximo. Por ejemplo, si combinamos el máximo de rojo, con 50% de verde y 25% de azul, obtendremos naranja. En la tabla podemos ver cómo se podrían construir algunos colores, incluyendo un azul y un verde menos intensos o un amarillo más pálido del que teníamos antes. Finalmente veamos lo que pasa cuando los niveles de los tres colores son iguales. Si lo tres colores tienen valor cero, el color resultante es negro. Si lo tres colores tienen valor 255, el color resultante es blanco y si los tres colores tienen cualquier otro valor entre esos dos extremos, pero siendo iguales entre ellos, el resultado será algun tono de gris. Una implicación de esto, es que una imagen en escala de grises, solo necesita la tercera parte de la información, puesto que para pixel, es suficiente indicar el nivel de intensidad con un solo número entre 0 y 255. Es decir que solo necesitamos un solo byte por pixel, en lugar de los tres bytes que necesitaríamos en una imagen en color. Volvamos ahora a nuestra imagen de Van Gogh, para revisar todo lo que hemos aprendido. La imagen que estamos viendo, tiene 969 pixeles de ancho por 766 pixeles de alto. Es decir que tiene más de 700 mil pixeles y cada uno de estos está descrito con una combinación de tres números, uno para rojo, uno para verde y uno para azul. Si quisiéramos representar esta imagen dentro de python, probablemete usted you se habrá imaginado, que la estructura de datos más adecuada, sería una matriz. Estos nos permitiría referirnos a cada pixel, a partir de su posición en una fila y una columna. Y para representar cada pixel, la estructura más natural sería usar una tupla con tres valores, uno para rojo, uno para verde y uno para azul. Finalmente no queremos que se quede con la idea errada, de que la única forma de describir un color, es usando un tripleta de números entre 0 y 255. A la izquierda tenemos algunas de las formas en las que podemos describir un color y a la derecha mostramos cómo se representaría el mismo color, utilizando cada una de esas alternativas. En primer lugar tenemos los colores RGB, pero estos no siempre se describen utilizando números entre 0 y 255. También pueden representarse con tres números sexagesimales entre 00 y FF, lo cual es tremendamente utilizado en el mundo web. Y también pueden representarse con tres números decimales entre 0 y 1, lo cual es muy utilizado en el mundo python. En este caso 0 correspondería a la ausencia de un color y 1 correspondería al nivel máximo que antes era 255. Otra forma completamente diferente de expresar colores, se conoce como CMYK y utiliza la combinación de diferentes niveles de cían, magenta, amarillo y negro. Estos son los colores que utiliza por ejemplo una impresora a color, para saber que tanto de cada tinta aplicar, en cada punto en que esté imprimiendo, HSB, es otra forma de describir colores, que también se basa en tres componentes, en primer lugar el hue o matiz en español, que corresponde al color base expresado con una temperatura. Los azules son colores fríos, mientras que los rojos son colores cálidos. Luego tenemos la saturación, que tiene que ver con que tan intenso debe aparecer el color y por último tenemos el brillo, que expresa que tanta luz tiene el color. Finalmente tenemos los colores RGBA, que son una simplemente una extensión a RGB, con un número adicional que corresponde al alfa o al nivel de transparencia. Esto nos permite describir colores que son más o menos opacos y dejan ver lo que sea que esté detrás de ellos. Para concluir este video, revisemos lo que aprendimos sobre imágenes y su representación en python. Una imagen resterizada o un mapa de bits, se escribe a partir de cada uno de los puntos que la componen. Esos puntos o pixeles, usualmente se describen como una mezcla de los tres colores aditivos básicos, rojo, verde y azul. Nosotros podemos representar en python, un mapa de bits usando una matriz de tuplas, que como sabemos es una lista de listas. De esta manera, si tuviéramos una imagen almacenada en la aureole imagen y nos refiriéramos a la posición imagen sub seis, estaríamos hablando de la linea número seis de la imagen. Mientras que si nos refiriéramos a la posición imagen sub seis sub ocho, estaríamos hablando de la posición ocho dentro de esta linea, es decir el pixel que está en la columna ocho de la fila seis. Finalmente y considerando que ese pixel es un tupla, si nos refiriéramos a la posición imagen sub seis, sub ocho, sub dos, estaríamos hablando del componente azul de ese pixel. Como el pixel es blanco la imagen el valor sería 255. [MÚSICA]
