Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Colores con 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:38
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, esto debe quedar una especie de color rosa.
00:02:09
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:23
Si aumentáramos la proporción de verde, pues lógicamente se nos iría a la zona del naranja. Eso es exactamente.
00:02:33
Bien, prosiguiendo, hago notar también que este cuadrado tiene un borde de color negro
00:02:42
Que a lo mejor nos puede interesar que no lo tenga de ese color
00:02:51
Y para ello tendríamos que venirnos a una nueva función que aquí tengo definida
00:02:55
Que es la función stroke
00:03:00
La habilito, la subimos arriba
00:03:01
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.
00:03:04
Vamos a ver cómo quedaría. No se nota mucho, vamos a exagerarlo un poco bajando, por ejemplo, el verde.
00:03:14
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
00:04:00
Vamos a ver cómo quedaría
00:04:08
Y así que vemos que nuestro cuadrado de color naranja pues no tiene este borde
00:04:09
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:24
escribo las tres líneas en un color 0,0,0
00:04:28
el color 0,0,0 aludiría a aquel en el cual no hay participación de los colores primarios
00:04:32
por lo tanto esto debe ser el color negro
00:04:39
y está aplicado sobre el cuadrado que está en la posición 0,0
00:04:40
vamos a ver el efecto como quedaría
00:04:45
bien, si ahora activamos las siguientes líneas de comando
00:04:47
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.
00:04:53
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
00:05:18
y definiéramos esta línea 8 y 9
00:05:22
otro cuadrado pero desplazado a 200 píxeles en color negro
00:05:25
estaríamos ya en condiciones
00:05:28
de ir construyendo lo que vamos buscando
00:05:30
que ya algunos seguramente se habrán dado cuenta
00:05:34
que es nuestro tablero de ajedrez
00:05:37
bien, he ido reconfigurándolo
00:05:39
entonces he ido incorporando
00:05:45
la función no stroke, no quiero bordes, para cada uno de los cuadrados, estos tres cuadrados
00:05:49
que tengo dibujado. Aquí se pueden ver claramente. Lo que os propongo es que sigáis escribiendo
00:05:54
el código correspondiente para intentar llegar a las 64 casillas del tablero de ajedrez.
00:06:00
Ese sería un poco el reto. El objetivo es no cansaros con esto y lógicamente cuando
00:06:08
tengáis hecho, o cuando lleguéis al final, os vais a dar cuenta de la necesidad que tenemos en
00:06:17
programación de incorporar herramientas, que las hay, como son los bucles, la función for,
00:06:27
el while, que evidentemente nos deben simplificar el trabajo. Pero bueno, en principio vamos a
00:06:36
Vamos a intentar dibujar nuestro tablero de ajedrez de esta forma y así sabremos movernos de manera cartesiana.
00:06:42
Eso es todo.
00:06:50
- Autor/es:
- Javier Magro Godoy
- Subido por:
- Francisco Javier M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 34
- Fecha:
- 16 de mayo de 2023 - 11:48
- 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:
- 8.50 MBytes
