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:37,979 Los colores se pueden presentar de forma opaca o pueden tener ciertas transparencias 6 00:00:37,979 --> 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,480 --> 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:20,280 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. 19 00:02:20,280 --> 00:02:33,460 Esto debe quedar una especie de color rosa. 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,460 --> 00:02:55,560 Si aumentáramos la proporción de verde, pues lógicamente se nos iría a la zona del naranja. Eso es exactamente. Bien, prosiguiendo, hago notar también que este cuadrado tiene un borde de color negro, que a lo mejor nos puede interesar que no lo tenga de ese color. 21 00:02:55,560 --> 00:03:01,500 y para ello tendríamos que venirnos a una nueva función, que aquí tengo definida, que es la función stroke. 22 00:03:01,800 --> 00:03:09,919 La habilito, la subimos arriba y con esta combinación de colores, 125 y 115, 23 00:03:10,259 --> 00:03:14,080 pues estaría definiendo el color del borde de línea que quiero que tenga mi cuadrado. 24 00:03:14,280 --> 00:03:15,159 Vamos a ver cómo quedaría. 25 00:03:17,280 --> 00:03:22,699 No se nota mucho, vamos a exagerarlo un poco, bajando por ejemplo el verde. 26 00:03:22,699 --> 00:03:44,550 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. 27 00:03:44,550 --> 00:03:59,849 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. 28 00:04:01,210 --> 00:04:14,090 Bien, como estoy diciendo, la función no stroke lo que haría sería eliminar el color del borde de la línea. Vamos a ver cómo quedaría. Y así que vemos que nuestro cuadrado de color naranja no tiene este borde. 29 00:04:14,550 --> 00:04:18,930 Si lo eliminamos, por defecto vendría de color negro. 30 00:04:18,930 --> 00:04:24,970 Vamos a eliminarlo y al ejecutarlo lo veríamos de color negro. 31 00:04:25,430 --> 00:04:28,709 Bien, pues vamos a proseguir con nuestra programación. 32 00:04:29,470 --> 00:04:32,569 Escribo las tres líneas en un color 0, 0, 0. 33 00:04:33,149 --> 00:04:39,009 El color 0, 0, 0 aludiría a aquel en el cual no hay participación de los colores primarios, 34 00:04:39,009 --> 00:04:45,009 por lo tanto esto debe ser el color negro, y está aplicado sobre el cuadrado que está en la posición 0,0. 35 00:04:45,449 --> 00:04:47,850 Vamos a ver el efecto cómo quedaría. 36 00:04:49,370 --> 00:04:56,810 Bien, si ahora activamos las siguientes líneas de comando, voy a llamar a un nuevo fill, 37 00:04:57,290 --> 00:05:04,329 pero me voy a ir al extremo opuesto, al color negro, que sería el color blanco, 250, 250, 55, 38 00:05:04,329 --> 00:05:11,889 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. 39 00:05:12,709 --> 00:05:13,910 Vamos a ver cómo nos queda esto. 40 00:05:16,149 --> 00:05:18,509 Estaríamos en condiciones ya de tener dos cuadrados. 41 00:05:20,089 --> 00:05:26,410 Si continuáramos con nuestro razonamiento y definiéramos, o sea, la línea 8 y 9, otro cuadrado, 42 00:05:26,410 --> 00:05:34,610 pero desplazado a 200 píxeles en color negro, estaríamos ya en condiciones de ir construyendo lo que vamos buscando, 43 00:05:35,170 --> 00:05:39,029 que ya algunos seguramente se habrán dado cuenta que es nuestro tablero de ajedrez. 44 00:05:42,220 --> 00:05:51,740 Bien, he ido reconfigurándolo, entonces he ido incorporando la función no stroke, no quiero bordes, 45 00:05:52,100 --> 00:05:57,339 para cada uno de los cuadrados, estos tres cuadrados que tengo dibujado. Aquí se pueden ver claramente. 46 00:05:58,040 --> 00:06:07,579 Lo que os propongo es que sigáis escribiendo el código correspondiente para intentar llegar a las 64 casillas del tablero de ajedrez. 47 00:06:08,259 --> 00:06:09,860 Ese sería un poco el reto. 48 00:06:10,279 --> 00:06:20,379 El objetivo es no cansaros con esto y, lógicamente, cuando lo tengáis hecho o cuando lleguéis al final, 49 00:06:20,379 --> 00:06:30,279 os vais a dar cuenta de la necesidad que tenemos en programación de incorporar herramientas, 50 00:06:30,339 --> 00:06:40,639 que las hay, como son los bucles, la función for, el while, que evidentemente nos deben simplificar el trabajo. 51 00:06:41,279 --> 00:06:45,459 Pero bueno, en principio vamos a intentar dibujar nuestro tablero de ajedrez de esta forma 52 00:06:45,459 --> 00:06:49,379 y así sabremos movernos de manera cartesiana. 53 00:06:50,379 --> 00:06:50,939 Eso es todo.