Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Vídeo 9. Colores en Processing - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 6 de octubre de 2020 por Juan Luis C.

37 visualizaciones

Explica cómo se puede seleccionar un color. Introduce la función
stroke() para indicar el color de un borde.

Más información Transcripción

Descargar la transcripción

hola muy buenas en este vídeo tutorial hablaremos de los colores en processing 00:00:00
en processing los colores se guardan en variables de tipo color si nos vamos a 00:00:05
la referencia de processing veremos que donde tenemos los datos 00:00:11
primitivos hay un tipo de dato que todavía no hemos hablado que es el tipo 00:00:18
color. Cuando queremos trabajar con variables que representan colores diremos que esas variables 00:00:24
sean de tipo color. Para seleccionar colores resulta de gran utilidad la función color. 00:00:31
La función color me va a devolver un dato de tipo color. Entrando en ella y bajando 00:00:39
a su descripción, nos dice que en esta función se puede trabajar con dos modelos de colores, 00:00:47
el modelo RGB, que se corresponde con las siglas rojo, verde y azul en inglés, y el 00:00:56
modelo HSB, que se corresponde con las siglas matiz, saturación y brillo en inglés. Por 00:01:03
defecto, nosotros trabajaremos con el modelo RGB y diremos que vamos a tener tres canales 00:01:12
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 00:01:17
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 00:01:29
con las transparencias. Valores bajos de transparencia hacen que el color sea muy transparente. Valores altos de transparencia 00:01:42
hacen que el color sea muy opaco. Bajando a la sección de sintaxis, vemos que tenemos cuatro posibilidades a la hora de utilizar 00:01:52
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 00:02:03
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. 00:02:11
Y la última, lo mismo que la anterior, pero añadiendo el color alfa de la transparencia. Bueno, realmente las dos primeras son simplificaciones 00:02:26
de las dos últimas, porque nosotros podemos conseguir un color gris simplemente poniendo 00:02:36
que todos los valores de los canales de color sean el mismo número. Vamos a verlo con un 00:02:44
ejemplo. Aquí tenemos que hemos guardado en una variable de tipo color llamada color 00:02:50
fondo un valor con el modelo RGB que tiene el mismo número para todos los colores, el 00:02:56
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. 00:03:04
Luego, realmente, cuando hablamos de escala de grises, es una simplificación para no tener que poner tres veces el mismo número. 00:03:24
Bueno, ¿cómo elegimos un color? Aquí tenemos una variable, la variable es llamada colorBorde, y queremos seleccionar un color. 00:03:34
¿Qué valores tengo que poner aquí para el color que yo quiero realmente poner? 00:03:43
Bueno, afortunadamente disponemos de una herramienta en Processing que es el selector de colores 00:03:47
Donde en esta columna vertical yo voy a elegir el color que más o menos deseo, por ejemplo este naranja 00:03:52
Aquí puedo coger con más precisión en detalle el color deseado 00:04:00
Este de aquí, es un marroncito, si lo damos un poco más abajo podremos elegir un naranja 00:04:06
Fijaros que cuando yo selecciono el color se me pone aquí, el color que he seleccionado 00:04:12
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í. 00:04:17
En nuestro caso son 240, 140 y 90. 00:04:30
Bueno, y esto lo estamos almacenando en la variable colorBorde. 00:04:38
Si nos vamos al draw, vemos que aparece una nueva función, la función stroke, donde utilizamos esa variable. 00:04:43
Stroke indica el color del borde de la figura. 00:04:50
Vamos a ver cómo queda en nuestro programa. 00:04:54
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. 00:04:57
Por defecto, si no ponemos esta función, los bordes se pintan de color negro. 00:05:06
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. 00:05:10
incluso podemos utilizar una función que es noStroke, no tiene parámetros, que lo que hace es no poner bordes 00:05:20
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 00:05:29
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 00:05:37
selecciono un color y pinto un círculo, lo hago tres veces 00:05:43
el primer círculo que voy a pintar es el círculo que aparece en el medio 00:05:47
y como podemos apreciar no tiene canal alfa, es decir, va a ser completamente opaco 00:05:51
el segundo círculo que dibujamos es el círculo de la izquierda 00:05:57
y tampoco tiene canal alfa 00:06:01
y el tercer círculo es el de la derecha 00:06:04
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. 00:06:07
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. 00:06:19
Bueno, hasta ahora hemos estado utilizando colores desde 0 a 255 00:06:35
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 00:06:40
Utilizamos ese rango de valores desde el 0 hasta el 255 00:06:46
Y no otros 00:06:51
Esto tiene que ver cómo se almacena una variable de tipo color en la memoria de un ordenador 00:06:52
Una variable de tipo color se almacenará utilizando 32 bits 00:06:56
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. 00:07:02
En binario, con 8 bits nosotros podemos codificar hasta 256 números distintos, desde el 0 hasta el 255. 00:07:14
Por eso, cuando utilizamos los colores, siempre vamos a poner como parámetros valores comprendidos entre 0 y 255. 00:07:23
Bueno, y hasta aquí el vídeo acerca de los colores en Procesion. 00:07:31
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Autor/es:
Juan Luis Carrillo
Subido por:
Juan Luis C.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
37
Fecha:
6 de octubre de 2020 - 7:42
Visibilidad:
Público
Centro:
IES SEVILLA LA NUEVA
Duración:
07′ 37″
Relación de aspecto:
1.78:1
Resolución:
1368x768 píxeles
Tamaño:
68.38 MBytes

Del mismo autor…

Ver más del mismo autor

Comentarios

Para publicar comentarios debes entrar con tu nombre de usuario de EducaMadrid.

Comentarios

Este vídeo todavía no tiene comentarios. Sé el primero en comentar.


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid