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

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 2 de julio de 2024 por Francisco Javier M.

7 visualizaciones

Más información Transcripción

Descargar la transcripción

Buenos días, bueno, vamos a comenzar con este segundo tutorial. 00:00:00

El color o la función color, ahora ya la definiremos, se puede trabajar de dos maneras. 00:00:04

Una con lo que sería la escala RGB, la escala que mezcla el rojo, el verde y el azul. 00:00:17

Serían tres canales de color en distinta proporción, más un posible canal alfa, 00:00:24

que también es interesante cuando queremos que los colores sean transparentes. 00:00:29

Los colores se pueden presentar de forma opaca o pueden tener ciertas transparencias. 00:00:33

Eso lo veremos luego o después. 00:00:38

También hay otra manera de trabajar que sería con la escala HSB que hace alusión a la abreviatura en inglés del matiz, la saturación y el brillo. 00:00:40

Todo ello lo tenemos aquí. 00:00:51

Como vamos y trabajamos, yo puedo con el ratón fijar qué saturación y brillo tengo o qué mezclas de rojo, verde y anitas. 00:00:59

Para este color definido tendríamos aquí ya el código hexadecimal, que no hace falta ni seleccionarlo porque directamente... 00:01:17

Dicho esto, si volvemos a nuestro segundo programa, pues vamos a empezar definiendo un lienzo ya de 800x800, más simétrico, un cuadrado perfecto, lo veis. 00:01:28

y ahora a continuación lo que vamos a hacer ya es 00:01:41

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 00:01:50

de color, la siguiente figura que tengo a continuación 00:01:54

hago notar que de las tres proporciones de color 00:02:09

la verde es la más baja, por lo tanto 00:02:13

será más intenso en color rojo y en azul 00:02:16

esto debe quedar una especie de color rojo 00:02:20

Muy bien, está bien situado en el 0,0, la longitud sería de 100 y tendríamos este color rosa. 00:02:25

Si aumentáramos la proporción de verde, pues lógicamente se nos iría a la zona del naranja. 00:02:33

Eso es exactamente. 00:02:41

Bien, prosiguiendo, hago notar también que este cuadrado tiene un boro a función que aquí tengo definida, que es la función stroke. 00:02:44

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:01

Vamos a ver cómo queda tan mucho, vamos a exagerarlo un poco bajando, por ejemplo, el verde. 00:03:14

Aquí ya parece que se aprecia un poquito más. 00:03:23

Esta también la podríamos y tendríamos, por lo tanto, la posibilidad de configurar el color del borde de nuestra figura. 00:03:31

De la misma forma que tenemos el stroke para el color del contorno, podríamos definir la función noStroke, que evidentemente lo que haría es no ponerme ningún color. 00:03:44

Como estoy diciendo, la función noStroke lo que haría sería eliminar el color del borde de la línea. 00:04:02

Vamos a ver cómo quedaría. 00:04:08

Y así que vemos que nuestro cuadrado de color naranja lo eliminamos. 00:04:10

Bien, pues vamos a proseguir con nuestra programación. 00:04:15

Escribo las tres líneas en un color 0, 0, 0. El color 0, 0, 0 aludiría a aquel en el cual no hay participación de los colores primarios, 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:29

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 00:04:53

Pero me voy a ir al extremo opuesto 00:04:56

Al color negro, que sería el color blanco 00:04:59

252.255 00:05:01

Y se lo voy a aplicar al mismo cuadrado 00:05:04

A un cuadrado, perdón, distinto 00:05:06

Que está desplazado 100 píxeles con respecto a ella 00:05:09

De tener dos cuadrados 00:05:17

Si continuáramos con nuestro razonamiento 00:05:18

y definiéramos nuestra línea 8 y 9, otro cuadrado, pero desplazado a 200 píxeles en color negro, 00:05:22

estaríamos ya en condiciones de ir construyendo lo que vamos buscando, 00:05:29

que ya algunos seguramente se habrán dado cuenta que es nuestro tablet. 00:05:35

Bien, he ido reconfigurándolo, entonces he ido incorporando la función no stroke, 00:05:42

no quiero bordes para cada uno de los cuadrados. 00:05:50

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:53

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, cuando lleguéis al final, 00:06:10

os vais a dar cuenta que tenemos en programación de incorporar herramientas, que las hay, 00:06:20

como son los bucles, la función for, el while, que evidentemente nos deben simplificar el trabajo. 00:06:31

Pero bueno, en principio vamos a intentar, por mayasín, sabremos movernos de manera cartesiana. 00:06:41

Eso es todo. 00:06:50

Subido por:: Francisco Javier M.
Licencia:: Reconocimiento - No comercial - Compartir igual
Visualizaciones:: 7
Fecha:: 2 de julio de 2024 - 18:54
Visibilidad:: Público
Centro:: Sin centro asignado
Duración:: 06′ 51″
Relación de aspecto:: 16:9 Es el estándar usado por la televisión de alta definición y en varias pantallas, es ancho y normalmente se le suele llamar panorámico o widescreen, aunque todas las relaciones (a excepción de la 1:1) son widescreen. El ángulo de la diagonal es de 29,36°.
Resolución:: 1360x768 píxeles
Tamaño:: 9.16 MBytes