Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Colores en Processing - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
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.
00:00:00
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.
00:00:11
Serían tres canales de color en distinta proporción
00:00:23
Más un posible canal alfa, que también es interesante cuando queremos que los colores sean transparentes
00:00:27
Los colores se pueden presentar de forma opaca o pueden tener ciertas transparencias
00:00:33
Eso lo veremos luego después
00:00:37
También hay otra manera de trabajar que sería con la escala HSB
00:00:39
Que hace alusión a la abreviatura en inglés del matiz, la saturación y el brillo
00:00:43
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.
00:00:51
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.
00:01:12
Dicho esto, si volvemos a nuestro segundo programa
00:01:27
Pues vamos a empezar definiendo un lienzo ya de 800x800 más simétrico
00:01:34
Un cuadrado perfecto, lo vamos a ir ejecutando para que lo veáis
00:01:38
Y ahora a continuación lo que vamos a hacer ya es
00:01:42
Me traigo hacia arriba lo que tenía como comentario
00:01:45
Y defino ya una función fill, la función de llenado de color
00:01:50
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.
00:01:56
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.
00:02:09
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.
00:02:20
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.
00:02:33
y para ello tendríamos que venirnos a una nueva función, que aquí tengo definida, que es la función stroke.
00:02:55
La habilito, la subimos arriba y con esta combinación de colores, 125 y 115,
00:03:01
pues estaría definiendo el color del borde de línea que quiero que tenga mi cuadrado.
00:03:10
Vamos a ver cómo quedaría.
00:03:14
No se nota mucho, vamos a exagerarlo un poco, bajando por ejemplo el verde.
00:03:17
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.
00:03:22
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.
00:03:44
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.
00:04:01
Si lo eliminamos, por defecto vendría de color negro.
00:04:14
Vamos a eliminarlo y al ejecutarlo lo veríamos de color negro.
00:04:18
Bien, pues vamos a proseguir con nuestra programación.
00:04:25
Escribo las tres líneas en un color 0, 0, 0.
00:04:29
El color 0, 0, 0 aludiría a aquel en el cual no hay participación de los colores primarios,
00:04:33
por lo tanto esto debe ser el color negro, y está aplicado sobre el cuadrado que está en la posición 0,0.
00:04:39
Vamos a ver el efecto cómo quedaría.
00:04:45
Bien, si ahora activamos las siguientes líneas de comando, voy a llamar a un nuevo fill,
00:04:49
pero me voy a ir al extremo opuesto, al color negro, que sería el color blanco, 250, 250, 55,
00:04:57
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.
00:05:04
Vamos a ver cómo nos queda esto.
00:05:12
Estaríamos en condiciones ya de tener dos cuadrados.
00:05:16
Si continuáramos con nuestro razonamiento y definiéramos, o sea, la línea 8 y 9, otro cuadrado,
00:05:20
pero desplazado a 200 píxeles en color negro, estaríamos ya en condiciones de ir construyendo lo que vamos buscando,
00:05:26
que ya algunos seguramente se habrán dado cuenta que es nuestro tablero de ajedrez.
00:05:35
Bien, he ido reconfigurándolo, entonces he ido incorporando la función no stroke, no quiero bordes,
00:05:42
para cada uno de los cuadrados, estos tres cuadrados que tengo dibujado. Aquí se pueden ver claramente.
00:05:52
Lo que os propongo es que sigáis escribiendo el código correspondiente para intentar llegar a las 64 casillas del tablero de ajedrez.
00:05:58
Ese sería un poco el reto.
00:06:08
El objetivo es no cansaros con esto y, lógicamente, cuando lo tengáis hecho o cuando lleguéis al final,
00:06:10
os vais a dar cuenta de la necesidad que tenemos en programación de incorporar herramientas,
00:06:20
que las hay, como son los bucles, la función for, el while, que evidentemente nos deben simplificar el trabajo.
00:06:30
Pero bueno, en principio vamos a intentar dibujar nuestro tablero de ajedrez de esta forma
00:06:41
y así sabremos movernos de manera cartesiana.
00:06:45
Eso es todo.
00:06:50
- Autor/es:
- Javier Magro Godoy
- Subido por:
- Francisco Javier M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 24
- Fecha:
- 2 de julio de 2024 - 19:59
- Visibilidad:
- Público
- Centro:
- Sin centro asignado
- Duración:
- 06′ 51″
- Relación de aspecto:
- 2.02:1
- Resolución:
- 1352x668 píxeles
- Tamaño:
- 7.95 MBytes
