1 00:00:00,620 --> 00:00:05,179 hola muy buenas en este vídeo tutorial hablaremos de los colores en processing 2 00:00:05,179 --> 00:00:11,619 en processing los colores se guardan en variables de tipo color si nos vamos a 3 00:00:11,619 --> 00:00:18,739 la referencia de processing veremos que donde tenemos los datos 4 00:00:18,739 --> 00:00:24,739 primitivos hay un tipo de dato que todavía no hemos hablado que es el tipo 5 00:00:24,739 --> 00:00:31,780 color. Cuando queremos trabajar con variables que representan colores diremos que esas variables 6 00:00:31,780 --> 00:00:39,460 sean de tipo color. Para seleccionar colores resulta de gran utilidad la función color. 7 00:00:39,460 --> 00:00:47,820 La función color me va a devolver un dato de tipo color. Entrando en ella y bajando 8 00:00:47,820 --> 00:00:56,060 a su descripción, nos dice que en esta función se puede trabajar con dos modelos de colores, 9 00:00:56,840 --> 00:01:03,539 el modelo RGB, que se corresponde con las siglas rojo, verde y azul en inglés, y el 10 00:01:03,539 --> 00:01:12,000 modelo HSB, que se corresponde con las siglas matiz, saturación y brillo en inglés. Por 11 00:01:12,000 --> 00:01:17,799 defecto, nosotros trabajaremos con el modelo RGB y diremos que vamos a tener tres canales 12 00:01:17,799 --> 00:01:29,680 para los colores, el canal del rojo, el canal del verde y el canal del azul. Mezclando esos tres colores vamos a ser capaces de conseguir el color que 13 00:01:29,680 --> 00:01:42,560 realmente deseamos. Además, a cualquiera de estos dos modelos de colores, el RGB y el HSB, se le puede añadir un cuarto canal, es el canal alfa y que tiene que ver 14 00:01:42,560 --> 00:01:52,359 con las transparencias. Valores bajos de transparencia hacen que el color sea muy transparente. Valores altos de transparencia 15 00:01:52,359 --> 00:02:03,359 hacen que el color sea muy opaco. Bajando a la sección de sintaxis, vemos que tenemos cuatro posibilidades a la hora de utilizar 16 00:02:03,359 --> 00:02:11,759 esta función. La primera es con una escala de grises. La segunda es con una escala de grises más el canal alfa si le queremos dotar 17 00:02:11,759 --> 00:02:26,120 de transparencia. La tercera sería nuestro modelo RGB, canal rojo, el primer valor, canal verde, el segundo valor, y canal azul, el tercer valor. 18 00:02:26,780 --> 00:02:36,759 Y la última, lo mismo que la anterior, pero añadiendo el color alfa de la transparencia. Bueno, realmente las dos primeras son simplificaciones 19 00:02:36,759 --> 00:02:44,199 de las dos últimas, porque nosotros podemos conseguir un color gris simplemente poniendo 20 00:02:44,199 --> 00:02:50,199 que todos los valores de los canales de color sean el mismo número. Vamos a verlo con un 21 00:02:50,199 --> 00:02:56,199 ejemplo. Aquí tenemos que hemos guardado en una variable de tipo color llamada color 22 00:02:56,199 --> 00:03:04,439 fondo un valor con el modelo RGB que tiene el mismo número para todos los colores, el 23 00:03:04,439 --> 00:03:24,719 Más abajo vemos que utilizamos la función background con ese color. Si ejecutamos este programa, vemos que el fondo de la pantalla se me pone en color gris, exactamente igual que si aquí solo pongo una escala de grises y no una mezcla de colores RGB. 24 00:03:24,719 --> 00:03:33,879 Luego, realmente, cuando hablamos de escala de grises, es una simplificación para no tener que poner tres veces el mismo número. 25 00:03:34,659 --> 00:03:43,400 Bueno, ¿cómo elegimos un color? Aquí tenemos una variable, la variable es llamada colorBorde, y queremos seleccionar un color. 26 00:03:43,819 --> 00:03:47,879 ¿Qué valores tengo que poner aquí para el color que yo quiero realmente poner? 27 00:03:47,879 --> 00:03:52,819 Bueno, afortunadamente disponemos de una herramienta en Processing que es el selector de colores 28 00:03:52,819 --> 00:04:00,699 Donde en esta columna vertical yo voy a elegir el color que más o menos deseo, por ejemplo este naranja 29 00:04:00,699 --> 00:04:06,780 Aquí puedo coger con más precisión en detalle el color deseado 30 00:04:06,780 --> 00:04:12,819 Este de aquí, es un marroncito, si lo damos un poco más abajo podremos elegir un naranja 31 00:04:12,819 --> 00:04:17,519 Fijaros que cuando yo selecciono el color se me pone aquí, el color que he seleccionado 32 00:04:17,519 --> 00:04:30,259 Y me va a dar los valores RGB que debería utilizar para conseguir ese color. Estos valores los apunto, cierro este selector de colores y serán los que tenga que poner aquí. 33 00:04:30,259 --> 00:04:37,899 En nuestro caso son 240, 140 y 90. 34 00:04:38,779 --> 00:04:43,019 Bueno, y esto lo estamos almacenando en la variable colorBorde. 35 00:04:43,459 --> 00:04:49,480 Si nos vamos al draw, vemos que aparece una nueva función, la función stroke, donde utilizamos esa variable. 36 00:04:50,459 --> 00:04:53,379 Stroke indica el color del borde de la figura. 37 00:04:54,660 --> 00:04:56,980 Vamos a ver cómo queda en nuestro programa. 38 00:04:57,660 --> 00:05:05,360 Nosotros hemos dibujado tres círculos en nuestro programa y vemos como efectivamente el borde de cada uno de los círculos es de color naranja. 39 00:05:06,680 --> 00:05:10,639 Por defecto, si no ponemos esta función, los bordes se pintan de color negro. 40 00:05:10,639 --> 00:05:20,220 Vamos a comentarla, la desactivamos poniendo un comentario de línea y si ahora probamos nuestra función vemos que efectivamente el borde es de color negro. 41 00:05:20,220 --> 00:05:29,779 incluso podemos utilizar una función que es noStroke, no tiene parámetros, que lo que hace es no poner bordes 42 00:05:29,779 --> 00:05:37,259 ahí lo tenemos, bueno vamos a borrar esta función, que si queremos ver el borde, vamos a poner el borde que habíamos elegido 43 00:05:37,259 --> 00:05:43,920 y vamos a ver a continuación el código que tenemos, si os fijáis en el resto del código de la función draw 44 00:05:43,920 --> 00:05:47,839 selecciono un color y pinto un círculo, lo hago tres veces 45 00:05:47,839 --> 00:05:51,839 el primer círculo que voy a pintar es el círculo que aparece en el medio 46 00:05:51,839 --> 00:05:57,319 y como podemos apreciar no tiene canal alfa, es decir, va a ser completamente opaco 47 00:05:57,319 --> 00:06:01,879 el segundo círculo que dibujamos es el círculo de la izquierda 48 00:06:01,879 --> 00:06:04,899 y tampoco tiene canal alfa 49 00:06:04,899 --> 00:06:07,839 y el tercer círculo es el de la derecha 50 00:06:07,839 --> 00:06:18,839 Si nos fijamos, tenemos los mismos colores RGB que el de la izquierda, pero en este caso le hemos añadido canal alfa con una cierta transparencia. 51 00:06:19,180 --> 00:06:35,259 Si ejecutamos el programa, vemos como efectivamente, aunque tiene los mismos colores el de la izquierda que el de la derecha, en el de la derecha se aprecia el fondo, es decir, tiene transparencia, mientras que el de la izquierda no. 52 00:06:35,259 --> 00:06:40,100 Bueno, hasta ahora hemos estado utilizando colores desde 0 a 255 53 00:06:40,100 --> 00:06:46,639 Y puede ser que os llame un poco la atención por qué los niveles para el rojo, para el azul, para el verde, para el canal alfa 54 00:06:46,639 --> 00:06:51,040 Utilizamos ese rango de valores desde el 0 hasta el 255 55 00:06:51,040 --> 00:06:52,000 Y no otros 56 00:06:52,000 --> 00:06:56,920 Esto tiene que ver cómo se almacena una variable de tipo color en la memoria de un ordenador 57 00:06:56,920 --> 00:07:02,600 Una variable de tipo color se almacenará utilizando 32 bits 58 00:07:02,600 --> 00:07:14,620 Como tenemos 4 canales, 3 para el color y 1 para el canal alfa, si dividimos 32 entre 4 nos quedan 8, es decir, cada canal va a utilizar 8 bits. 59 00:07:14,899 --> 00:07:23,279 En binario, con 8 bits nosotros podemos codificar hasta 256 números distintos, desde el 0 hasta el 255. 60 00:07:23,600 --> 00:07:31,000 Por eso, cuando utilizamos los colores, siempre vamos a poner como parámetros valores comprendidos entre 0 y 255. 61 00:07:31,000 --> 00:07:35,779 Bueno, y hasta aquí el vídeo acerca de los colores en Procesion.