Practica 4: Propiedades de las formas.

Hasta ahora, el fondo de nuestro lienzo era siempre gris y las líneas que generábamos siempre negras. Pues bien, en esta práctica vamos a aprender a dar color al fondo, al relleno de las figuras y a las líneas.

Veámoslo paso a paso…

Lo primero que debemos saber es cómo trabaja el color Processing.

Hay tres sistemas:

• El RGB, en el que se parte de que cualquier color se puede conseguir mezclando el R (red-rojo), el G (green-verde) y el B (blue-azul); en tanto pongamos más de uno que de otros. El valor que toma cada uno de ellos va de 0 a 255. Si se utiliza un cuarto parámetro es para referirnos a la transparencia.
• El HSB, en el que se utilizan los parámetros tono, saturación y brillo. El valor que toma cada uno de ellos va de 1% a 100%. Si se utiliza un cuarto parámetro es para referirnos a la transparencia.
• #000000 (notación hexadecimal), donde cada dos cifras de dicho número representa el valor en código hexadecimal de la componente Red, Green o Blue del color.

Para obtener cualquiera de estos parámetros de cualquier color es muy sencillo con una herramienta de la que dispone Processing.

Pinchamos en el menú principal en “Herramientas -> Selector de colores…”

…y ahí podemos sin más que pinchar sobre el color deseado, sus diferentes valores en la columna de la derecha en cualquiera de los sistemas anteriormente mencionados.

Pues visto cómo trabaja el color Processing, vamos a modificar ya el color de las cosas…

FONDO

La instrucción con la que modificamos el fondo del lienzo es:

background(red, green, blue);

En la siguiente imagen vemos un ejemplo para poner el fonde verde:

RELLENO

…ahora le añadimos un círculo de un determinado color. Esto lo haremos con la función:

fill(red,green,blue);

colocándola antes de llamar a la función de la forma [muy importante]

BORDE

…ahora vamos a ponerle el borde al círculo más ancho. Eso lo hacemos con la función:

strokeWeight(x);

…y ahora le cambiamos el color al borde con la función:

stroke(red, green, blue);

Podéis obervar cómo con estas cuatro funciones hemos ganado mucho en cuanto a color.

TAREAS

1. Realizar un programa que nos genere la siguiente imagen:

2. Realizar un programa que nos genere la siguiente imagen: