Tutorial de Processing (V)

 

La escala de grises

Digitalmente, el color negro corresponde al valor 0 y el color blanco al valor 255. Esto quiere decir que existen, entre estos dos valores, 254 diferentes colores que podríamos representar.

Dichos valores corresponden entonces a una escala de grises. Con esto en mente, debemos inicialmente comprender tres instrucciones adicionales, mediante las cuales podremos aplicar la escala de niveles de gris. Estas instrucciones son background(), fill()
y stroke().

 

El background

La instrucción background() permite definir la escala de grises deseada que utilizaremos para el fondo de pantalla donde se desplegarán cada una de las formas geométricas utilizadas.

Ejemplo:

background(10);

 

El stroke

La función stroke() permite definir la escala de grises deseada para los contornos de las formas geométricas.

Ejemplo:

stroke(255);

La función stroke() permite trabajar con los contornos de las formas, existiendo la función noStroke(), que hace desaparecer totalmente el contorno. También podemos utilizar la función strokeWeight() para definir el grosor del contorno deseado.

El fill

La instrucción fill() permite modificar el nivel de gris de la parte interna de las formas. Este es un relleno que se utiliza de la siguiente manera:

fill(130);

Asimismo, está la función noFill(), la cual eliminará por completo el relleno de las formas y permitirá visualizar únicamente el contorno.

 

Observa el siguiente código y su resultado:



 

El color

El color, en el mundo digital, es generalmente construido al mezclar tres colores primarios (rojo, verde, azul), en inglés RGB (Red, Green, Blue). Processing no es la excepción.

Para generar algún color, tenemos que formar una combinación de estas tonalidades.
Processing cuenta con una herramienta llamada color selector, la cual puede ser desplegada a partir del menú Tools (herramientas, selector de colores), como se muestra a continuación:



En Color Selector podemos observar tres diferentes formas de escoger el color deseado, utilizando el modo HSB (Hue, Saturation y Brightness), el RGB o, finalmente, utilizando la codificación Hexadecimal correspondiente al color deseado. Por default, las funciones se encuentran definidas con el RGB.

Para ingresar esta codificación del color podemos modificar el valor del nivel de gris, definido en las funciones background(), fill() y stroke(). De este modo, en lugar de definir un parámetro, podremos definir tres. Observa:



size(400,400);
background (29,232,12);
stroke(18,12,232);
strokeWeight(5);
fill(232,12,56);
ellipse(100,100,150,150);

La transparencia

Además de definir cualquier combinación de color, Processing permite definir el nivel de transparencia de cada uno de los colores. Este nivel va del 0 (color completamente sólido) al 255 (color completamente transparente).

Este nivel de transparencia, muchas veces llamado nivel alpha, se define como un cuarto parámetro dentro de las funciones background(), fill(), y stroke().

 

Ejercicio 9: modifique el ejercicio 06 cambiando el color del fondo, el color de relleno y el color del borde.

Ejercicio 10: modifique el ejercicio 08 cambiando el color del fondo, el color de relleno y el color del borde.

Ejercicio 11: usando el modelo de color RGB, cambie el color del fondo por su color favorito.

 

Tutorial de Processing (VI)