1 00:00:00,560 --> 00:00:10,099 Buenos días. Bueno, vamos a comenzar con este segundo tutorial y vamos a empezar a meter un poquito de color ya en nuestras aplicaciones gráficas que vamos a hacer con Processing. 2 00:00:11,300 --> 00:00:23,679 El color o la función color, ahora ya la definiremos, se puede trabajar de dos maneras. Una con lo que sería la escala RGB, la escala que mezcla el rojo, el verde y el azul. 3 00:00:23,679 --> 00:00:27,440 Serían tres canales de color en distinta proporción 4 00:00:27,440 --> 00:00:33,539 Más un posible canal alfa, que también es interesante cuando queremos que los colores sean transparentes 5 00:00:33,539 --> 00:00:38,000 Los colores se pueden presentar de forma opaca o pueden tener ciertas transparencias 6 00:00:38,000 --> 00:00:39,420 Eso lo veremos luego después 7 00:00:39,420 --> 00:00:43,659 También hay otra manera de trabajar que sería con la escala HSB 8 00:00:43,659 --> 00:00:51,740 Que hace alusión a la abreviatura en inglés del matiz, la saturación y el brillo 9 00:00:51,740 --> 00:01:12,920 Todo ello lo tenemos aquí en herramientas en el selector de colores. Dependiendo de la zona en la que nos movamos, si trabajamos por ejemplo en esta zona del verde, yo puedo con el ratón fijar qué valores de matiz, saturación y brillo tengo o qué mezclas de rojo, verde y azul. 10 00:01:12,920 --> 00:01:27,359 Para este cuadradito estaríamos aquí. Las posibilidades evidentemente son infinitas. Para este color definido, pues tendríamos aquí ya el código hexadecimal, que no hace falta ni seleccionarlo porque directamente lo podríamos copiar. 11 00:01:27,359 --> 00:01:34,280 Dicho esto, si volvemos a nuestro segundo programa 12 00:01:34,280 --> 00:01:38,859 Pues vamos a empezar definiendo un lienzo ya de 800x800 más simétrico 13 00:01:38,859 --> 00:01:42,000 Un cuadrado perfecto, lo vamos a ir ejecutando para que lo veáis 14 00:01:42,000 --> 00:01:45,439 Y ahora a continuación lo que vamos a hacer ya es 15 00:01:45,439 --> 00:01:50,939 Me traigo hacia arriba lo que tenía como comentario 16 00:01:50,939 --> 00:01:56,079 Y defino ya una función fill, la función de llenado de color 17 00:01:56,500 --> 00:02:08,599 Esta función me va a llenar de color la siguiente figura que tengo a continuación, que es este cuadrado, que lo tengo puesto en posición 0, 0, 100. 18 00:02:09,979 --> 00:02:23,219 Hago notar que de las tres proporciones de color, la verde es la más baja, por lo tanto será más intenso en color rojo y en azul, esto debe quedar una especie de color rosa. 19 00:02:23,219 --> 00:02:33,460 Vamos a verlo. Muy bien, ahí quedaría. Está bien situado en el 0,0, la longitud sería de 100 y tendríamos este color rosa. 20 00:02:33,939 --> 00:02:42,680 Si aumentáramos la proporción de verde, pues lógicamente se nos iría a la zona del naranja. Eso es exactamente. 21 00:02:42,680 --> 00:02:51,840 Bien, prosiguiendo, hago notar también que este cuadrado tiene un borde de color negro 22 00:02:51,840 --> 00:02:55,560 Que a lo mejor nos puede interesar que no lo tenga de ese color 23 00:02:55,560 --> 00:03:00,379 Y para ello tendríamos que venirnos a una nueva función que aquí tengo definida 24 00:03:00,379 --> 00:03:01,500 Que es la función stroke 25 00:03:01,500 --> 00:03:04,340 La habilito, la subimos arriba 26 00:03:04,340 --> 00:03:14,080 y con esta combinación de colores, 125 y 115, pues estaría definiendo el color del borde de línea que quiero que tenga mi cuadrado. 27 00:03:14,080 --> 00:03:22,699 Vamos a ver cómo quedaría. No se nota mucho, vamos a exagerarlo un poco bajando, por ejemplo, el verde. 28 00:03:22,699 --> 00:03:44,560 Y aquí ya parece que se aprecia un poquito más. Esta también la podríamos aumentar y tendríamos, por lo tanto, la posibilidad de configurar el color del borde de nuestra figura. 29 00:03:44,560 --> 00:03:59,860 De la misma forma que tenemos el stroke para el color del contorno, podríamos definir la función no stroke, que evidentemente lo que haría es no ponerme ningún color en el borde. 30 00:04:00,000 --> 00:04:08,120 Bien, como estoy diciendo la función no stroke lo que haría sería eliminar el color del borde de la línea 31 00:04:08,120 --> 00:04:09,340 Vamos a ver cómo quedaría 32 00:04:09,340 --> 00:04:14,120 Y así que vemos que nuestro cuadrado de color naranja pues no tiene este borde 33 00:04:14,120 --> 00:04:18,939 Si lo eliminamos por defecto vendría de color negro 34 00:04:18,939 --> 00:04:24,980 Vamos a eliminarlo y al ejecutarlo lo veríamos de color negro 35 00:04:24,980 --> 00:04:28,720 Bien, pues vamos a proseguir con nuestra programación 36 00:04:28,720 --> 00:04:32,579 escribo las tres líneas en un color 0,0,0 37 00:04:32,579 --> 00:04:39,000 el color 0,0,0 aludiría a aquel en el cual no hay participación de los colores primarios 38 00:04:39,000 --> 00:04:40,759 por lo tanto esto debe ser el color negro 39 00:04:40,759 --> 00:04:45,000 y está aplicado sobre el cuadrado que está en la posición 0,0 40 00:04:45,000 --> 00:04:47,879 vamos a ver el efecto como quedaría 41 00:04:47,879 --> 00:04:53,639 bien, si ahora activamos las siguientes líneas de comando 42 00:04:53,639 --> 00:05:11,879 Voy a llamar a un nuevo fill, pero me voy a ir al extremo opuesto, al color negro, que sería el color blanco, 255, 255, 255, y se lo voy a aplicar al mismo cuadrado, a un cuadrado, perdón, distinto, que está desplazado 100 píxeles con respecto al primero. 43 00:05:12,740 --> 00:05:13,899 Vamos a ver cómo nos queda esto. 44 00:05:16,139 --> 00:05:18,519 Estaríamos en condiciones ya de tener dos cuadrados. 45 00:05:18,519 --> 00:05:22,720 si continuáramos con nuestro razonamiento 46 00:05:22,720 --> 00:05:25,699 y definiéramos esta línea 8 y 9 47 00:05:25,699 --> 00:05:28,860 otro cuadrado pero desplazado a 200 píxeles en color negro 48 00:05:28,860 --> 00:05:30,860 estaríamos ya en condiciones 49 00:05:30,860 --> 00:05:34,600 de ir construyendo lo que vamos buscando 50 00:05:34,600 --> 00:05:37,459 que ya algunos seguramente se habrán dado cuenta 51 00:05:37,459 --> 00:05:39,040 que es nuestro tablero de ajedrez 52 00:05:39,040 --> 00:05:45,670 bien, he ido reconfigurándolo 53 00:05:45,670 --> 00:05:49,189 entonces he ido incorporando 54 00:05:49,189 --> 00:05:54,629 la función no stroke, no quiero bordes, para cada uno de los cuadrados, estos tres cuadrados 55 00:05:54,629 --> 00:06:00,810 que tengo dibujado. Aquí se pueden ver claramente. Lo que os propongo es que sigáis escribiendo 56 00:06:00,810 --> 00:06:07,589 el código correspondiente para intentar llegar a las 64 casillas del tablero de ajedrez. 57 00:06:08,250 --> 00:06:17,290 Ese sería un poco el reto. El objetivo es no cansaros con esto y lógicamente cuando 58 00:06:17,290 --> 00:06:27,430 tengáis hecho, o cuando lleguéis al final, os vais a dar cuenta de la necesidad que tenemos en 59 00:06:27,430 --> 00:06:35,069 programación de incorporar herramientas, que las hay, como son los bucles, la función for, 60 00:06:36,850 --> 00:06:42,670 el while, que evidentemente nos deben simplificar el trabajo. Pero bueno, en principio vamos a 61 00:06:42,670 --> 00:06:49,389 Vamos a intentar dibujar nuestro tablero de ajedrez de esta forma y así sabremos movernos de manera cartesiana. 62 00:06:50,529 --> 00:06:51,009 Eso es todo.