Processing

Las propiedades más básicas de la forma son el grosor de borde strokeWeight y antialiasing, también llamadas smoothing.

smooth() / noSmooth()
smooth() dibuja la geometría con bordes suaves (anti-aliasing). Este comportamiento es el predeterminado, por lo que smooth() solo debe utilizarse cuando un programa tiene que establecer el suavizado de una manera diferente. El parámetro de nivel aumenta el nivel de suavidad. Este es el nivel máximo de muestreo utilizado en el búfer de gráficos.

Con los renders P2D y P3D, smooth(2) es el valor por defecto, esto se llama “2x anti-aliasing”. El código smooth(4) se utiliza para 4x anti-aliasing y smooth(8) es especificado para 8x anti-aliasing. El máximo nivel de anti-aliasing se determina por el hardware de la máquina que ejecuta el software, por tanto smooth(4) y smooth(8) no funciona en todos los ordenadores.

El renderizador por defecto, JAVA2D, usa smooth(3). Esto es suavizado bicúbico. La otra opción para el procesador predeterminado es smooth(2), que es suavizado bilineal.

smooth() también mejorará la calidad de las imágenes redimensionadas. Recuerda que smooth() está activo por defecto. noSmooth() se puede utilizar para desactivar el suavizado de la geometría, imágenes y fuentes.

En Processing 3, smooth() funciona diferente que antes. Era común el uso de smooth() y noSmooth() para activar y desactivar antialiasing dentro de un boceto. Ahora, debido a la forma en que el software ha cambiado, smooth() sólo puede establecerse una vez dentro de un boceto. Se puede utilizar ya sea en la parte superior de un boceto sin setup(), o después de la función size() cuando se utiliza un boceto con setup(). La función noSmooth() también sigue las mismas reglas.

smooth(0); // Nada de suavizado
smooth(2); // Por defecto en P2D y P3D
smooth(3); // Por defecto en JAVA2D
smooth(4); 
smooth(8); // Máximo suavizado


noSmooth(); = smooth(0);


________________________________________________________
*NOTA: Algunas implementaciones de Processing (como la versión para JavaScript, ahora llamada p5.js), siempre dibuja en modo suavizado; otras en cambio, no lo soportan. Para más detalle, echa un ojo a la referencia de Processing.  https://processing.org/reference/smooth_.html
____________________________________________________________________

Por defecto, el grosor de línea está definido por un pixel. Pero podemos cambiar el grosor con la función strokeWeight(). Un solo parámetro define el grosor de las líneas de dibujo.

size(480, 120);
ellipse(75, 60, 90, 90);
strokeWeight(8); // Grosor de borde de 8 pixels.
ellipse(175, 60, 90, 90);
ellipse(279, 60, 90, 90);
strokeWeight(20); // Grosor de borde de 20 pixels.

ellipse(389, 60, 90, 90);

Si quieres que tus formas no tengan ningún tipo de borde, puedes utilizar la función noStroke() sin parámetros.

strokeJoin() define el estilo de las articulaciones que conectan los segmentos de una línea. Los parámetros que podemos introducir (en mayúsculas) son:

MITER
BEVEL
ROUND

https://processing.org/reference/strokeJoin_.html

Define el estilo para la representación de los finales de línea. Los parámetros que podemos incluir en esta función son:

ROUND
SQUARE
PROJECT

Estas funciones se aplicarán a todos los elementos que se encuentren debajo de la misma y continuará mientras no indiquemos lo contrario, como sucede con muchas funciones de Processing.

https://processing.org/reference/strokeCap_.html

Por último, vuelvo a recordar, que Processing nos proporciona la función noStroke() que no mostrará ningún tipo de trazo.

https://processing.org/reference/noStroke_.html

Todas las formas que hemos visto hasta ahora tienen un relleno blanco con un borde negro y un fondo gris claro.

Para cambiar estos valores utilizamos las funciones:

background() para el fondo.
fill() modifica el color de relleno de la forma.
stroke() modifica el color del borde.

Los valores de los parámetros que podemos introducir en las funciones de color se encuentran en un rango entre 0 y 255.

255 = Blanco
128 = Gris
0 = Negro

size(480, 120);
background(0); //Fondo negro
fill(204); // Relleno gris claro
ellipse(132, 82, 200, 200); // Elipse gris claro
fill(154); // Gris medio
ellipse(228, -16, 200, 200); // Elipse gris medio
fill(102);
ellipse(268, 118, 200, 200);

Como ya hemos explicado, puedes desactivar el relleno y el borde con noStroke(); y noFill();


*NOTA: ¡Cuidado! Si utilizas ambas, nada se dibujará en la ventana de reproducción.

Referencia background()
https://processing.org/reference/background_.html

Referencia fill()
https://processing.org/reference/fill_.html

Referencia stroke()
https://processing.org/reference/stroke_.html

Cuando en informática hablamos del canal Alpha nos referimos a un canal de transparencia. En Processing tenemos dos maneras de añadir transparencia.

En primer lugar, añadiendo a la función fill, stroke o color en lugar de un parámetro, poniendo dos parámetros –La función color se estudia en las siguientes entradas–.

Ejemplo: fill(0, 125);
Esta función rellena de negro y a un 50% de transparencia

Entonces, con dos parámetros > fill(negro, alpha);

Si no indicamos lo contrario, el parámetro de transparencia tendrá un rango de 0 a 255. Donde 0 es totalmente transparente y 255 totalmente opaco.

Además del modo RGB, como ya hemos dicho, podemos trabajar también con parámetros de color Hexadecimales. Pero además Processing nos permite cambiar del modo de color de RGB a HSB. Para ello utilizamos la función colorMode()

colorMode() cambia la forma en la que Processing interpreta el color. Por defecto, el parámetro para fill(), stroke(), background() y color() están definidos por defecto por valores entre 0 y 255 usando el modelo de color R, G, B.

La función colorMode() también es usada para cambiar el rango numérico usado para especificar colores, además de cambiar entre sistemas de color RGB y HSB.

HUE = Rueda de color
SATURATION = Saturación de color
BRIGHTNESS = Brillo de color

colorMode(HSB); // Modo de color HSB
colorMode(RGB); // Modo de color RGB

Por ejemplo, definiendo la función colorMode(RGB, 1.0); especifica que: el modo de color es RGB y los valores tendrán un rango entre 0.0 y 1.0.

fill(0.7, 0.3, 0.9); = color(rojo 70%, verde 30%, azul 90%)
Esta puede ser una manera más intuitiva de trabajar con colores.

colorMode() permite la introducción de varios parámetros definidos de la siguiente manera:

colorMode(mode)
colorMode(mode, max)
colorMode(mode, max1, max2, max3)
colorMode(mode, max1, max2, max3, maxA)

maxA, en la última opción, nos introduce en el siguiente apartado donde trataremos el canal-Alpha.

Podemos añadir transparencia a nuestros colores RGB o HSB añadiendo un cuarto parámetro. El valor 0 define el color como completamente transparente (no se muestra) y 255 es completamente opaco.

Cuando usamos colores transparentes, se superponen y se mezclan con el color de fondo y con el color de las formas que se encuentran detrás, creando nuevos colores.

size(480, 120);
noStroke();
background(204, 226, 225);
fill(255, 0, 0, 160);
ellipse(132, 82, 200, 200);
fill(0, 255, 0, 160);
ellipse(228, -16, 200, 200);
fill(0, 0, 250, 160);
ellipse(268, 118, 200, 200);

No estamos limitados a usar las formas geométricas básicas, también puedes definir nuevas formas conectando una serie de puntos.

Para ello utilizamos las funciones beginShape(), vertex() y endShape() en grupo.

código 3.20-1


La función beginShape() señala el comienzo de una forma. La función vertex() es usada para definir cada par de coordenadas x e y para la forma. Finalmente, la función endShape() sirve para indicar que la forma ha sido finalizada.

código 3.20-1
size(480, 120);
beginShape();
  vertex(180, 82);
  vertex(207, 36);
  vertex(214, 63);
  vertex(407, 11);
  vertex(412, 30);
  vertex(219, 82);
  vertex(226, 109);
endShape(CLOSE);


Para cerrar nuestra forma, podemos utilizar la constante CLOSE (en mayúsculas) para cerrar nuestra forma.

Las funciones beginShape() y endShape() has de ser usadas en pares. Poe defecto, todas las formas dibujadas con vertex() están rellenas de color blanco y una línea negra de un pixel conectando todos los puntos excepto el primero y el último. Las funciones fill(), stroke(), noFill(), noStroke() y strokeWeight() controlan los atributos de las formas dibujadas con la función vertex(), de la misma manera que funciona con las FORMAS PRIMITIVAS, que hemos visto en este capítulo.

 El orden de la posición de los vértices cambia la forma que queremos dibujar. Añadiendo más vértices se revela el potencial de estas funciones. Una forma puede tener miles de vértices, pero dibujar muchos puntos pueden hacer que tus programas sean más lentos.

La función beginShape() puede aceptar diferentes parámetros para definir qué tipo de dibujo se formará desde los datos del vértice. Los mismos vértices pueden ser usados para crear una serie de puntos, una forma sin relleno, o una línea continua.

POINTS
LINES
TRIANGLE
TRIANGLE_STRIP
TRIANGLE_FAN
QUADS
QUAD_STRIP

Hay ocho opciones diferentes para el parámetro MODE de la función de beginShape() y cada una interpreta los datos de vértices de forma diferente. La notación V1, V2, V3, etc., representa el orden y la posición de cada punto del vértice.