2.6. Funciones de contorno, relleno y centrado

Processing permite manipular muchos tipos de características de un sketch. Dentro de estas características, el contorno, relleno y tipo de centrado de las figuras que se dibujan en el lienzo son básicos y operar sobre ellas permite una estructura sólida de base para una correcta terminación de la aplicación final. Por lo tanto, conocer las funciones que permiten esta manipulación dota al programador de herramientas sumamente importantes.

2.6.1. Funciones de contorno y relleno

Las funciones de contorno y relleno permiten definir qué colores tendrán las figuras que dibujemos en el lienzo, así como también el grosor de las líneas que delimitan los objetos. Para esto se utilizan las función fill() (del inglés, relleno) y la función stroke() (del inglés, trazo). La sintaxis para estas funciones es la siguiente:

fill(escalaDeGrises);
fill(R, G, B);
fill(R, G, B, A);


Como se observa fill() es una función que puede recibir uno, tres o cuatro argumentos. En el primer caso, se puede definir un valor de relleno en escalas de grises –un valor entre 0 y 255. En el segundo caso, fill recibe tres valores RGB –todos entre 0 y 255–, que indican el contenido de rojo, verde y azul del color seleccionado. El tercer caso indica, además del valor RGB, un valor de opacidad que puede ir también entre 0 y 255.

La función stroke() puede recibir los mismos parámetros que fill, pero en este caso afectará el color del borde de las figuras:

stroke(escalaDeGrises);
stroke(R, G, B);
stroke(R, G, B, A);


En el uso de estas dos funciones, se debe tener en cuenta que estas afectarán a cualquier figura que esté después de su declaración hasta que se indique lo contrario. Para indicar el fin del ámbito de acción de estas dos funciones, se usarán las sentencias noFill() y noStroke().

Actividad 7

Tomando como punto de partida los ejemplos complementarios 2 y 3, realizar cuatro versiones de cada programa.


 

2.6.2. Atributos de dibujos

En adición a las posibilidades de relleno y contorno que se configuran en las diferentes formas primitivas, se pueden también cambiar atributos propios de la geometría de los objetos que se crean en Processing. Las funciones smooth() y noSmooth() pueden activar o desactivar las opciones de suavizado del render en cada uno de los objetos. Gracias a estas funciones de suavizado, se logran contornos más definidos, lo que enriquece visualmente las figuras creadas, especialmente cuando los dibujos presentan gran cantidad de curvas.

También se pueden controlar atributos de líneas y contornos de los dibujos mediante tres funciones:

strokeWeight(): recibe un parámetro que define el espesor de las líneas o contornos que lo continúan.
strokeCap(): recibe un parámetro (ROUND, SQUARE o PROYECT) que determina cómo será el redondeado de las líneas. ROUND redondea en forma circular, SQUARE lo hace de forma cuadrada y PROYECT genera una mezcla de ambas.
strokeJoin(): recibe un parámetro (BEVER, MITER o ROUND) que determina cómo es la terminación de los contornos. BEVER hace un bisel, MITER genera un ángulo puntiagudo y ROUND crea una curva.


El uso de estas funciones permite un acabado más fino de los dibujos que se realizan en Processing.

Para un entendimiento más profundo de estas herramientas revisar el ejemplo complementario 4:
CAP2EjemploComplementario4.pde

 

2.6.3. Modos de centrado

Cuando se dibujan círculos o cuadrados, las funciones por defecto indican que estos se generen a partir de un centro, o sea, que las coordenadas del centro sean las coordenadas que se pasan en la posición (los dos primeros argumentos de estas funciones). Esto se puede cambiar mediante las funciones ellipseMode() y rectMode().

ellipseMode() recibe los parámetros CENTER, RADIUS, CORNER y CORNERS, para definir desde dónde se toma la coordenada de posición.

El modo por defecto es CENTER, que construye la figura desde el centro. El modo RADIUS utiliza los parámetros de posición para configurar el centro, pero utiliza el tercer parámetro para definir la mitad del ancho, y el cuarto para definir la mitad de la altura. De esta manera, con RADIUS, los parámetros de ancho y alto definen el radio de la elipse, no el diámetro.

Al utilizar CORNER como modo de centrado, se define la posición de la elipse desde la esquina superior izquierda. Con CORNERS se define la posición según los parámetros 3 y 4.

En el caso de rectMode(), se utilizan solo los parámetros CORNER, CORNERS y CENTER, que funcionan igual que para la elipse.

Actividad 8

Generar un programa que utilice la estructura setup-draw, donde se dibujen cuatro elipses y tres triángulos con los diferentes modos de centrado.