Processing nos permite dibujar polígonos arbitrarios a partir de una serie de vértices.
La estructura general para dibujar un polígono en Processing consiste en:
beginShape();
vertex(x, y);
, en sentido clockwise (con las manecillas del reloj)endShape();
o endShape(CLOSE);
para asegurar que el polígono se cierra.Siempre conviene empezar con algún tipo de boceto para ubicar los vértices.
Vale mucho la pena establecer un punto de referencia desde el cual la figura está dibujada.
Por ejemplo, en las figuras básicas que dibuja Processing por default:
rect( )
está dibujado respecto a su esquina superior izquierdaellipse( )
está dibujada respecto a su centroEsto nos funcionará más adelante.
Por ejemplo, después de ubicar en papel los vértices de un cuadrado de 100 pixeles de lado, con esquina superior izquierda en 0,0, lo podemos dibujar de la siguiente forma:
// dibuja un cuadrado de 100x100 con esquina superior izquierda en 0,0
beginShape();
vertex(0, 0); // superior izquierda
vertex(100, 0); // superior derecha
vertex(100,100); // inferior derecha
vertex(0,100); // inferior izquierda
endShape(CLOSE); // cierra figura
Este es un cuadrado del mismo tamaño, pero dibujado con su centro en 0,0:
// dibuja un cuadrado de 100x100 con centro en 0,0
beginShape();
vertex(-50, -50); // superior izquierda
vertex(50, -50); // superior derecha
vertex(50,50); // inferior derecha
vertex(-50,50); // inferior izquierda
endShape(CLOSE); // cierra figura
Hay distintas estrategias para almacenar y manipular los valores numéricos en los vértices de nuestro polígono.
El método más directo, con la desventaja de que no podemos manipularlas directamente en el código, y de que tenemos que calcularlas manualmente:
// dibuja un cuadrado de 100x100 con esquina superior izquierda en 0,0
beginShape();
vertex(0, 0); // superior izquierda
vertex(100, 0); // superior derecha
vertex(100,100); // inferior derecha
vertex(0,100); // inferior izquierda
endShape(CLOSE); // cierra figura
Podemos usar variables para almacenar posiciones y parámetros de nuestro polígono, en x
y en y
.
Esto nos permite modificar los vértices durante la ejecución del programa, o a mano pero con más facilidad.
// dibuja un cuadrado en x,y
// de w pixeles de lado
float x = 0; // posición x
float y = 0; // posición y
float w = 100; // lado
beginShape();
vertex( x, y); // superior izquierda
vertex( x+w , y); // superior derecha
vertex( x+w, y+w ); // inferior derecha
vertex( x, y+w ); // inferior izquierda
endShape(CLOSE); // cierra figura
En ocasiones puede funcionar más tener cada vértice guardado como una variable de tipo PVector
:
// dibuja un cuadrado en 0,0
// de 100 pixeles de lado
new PVector( 0, 0 ); // superior izquierda
PVector p1 = new PVector( 100, 0); // superior derecha
PVector p2 = new PVector( 100, 100); // inferior derecha
PVector p3 = new PVector( 0, 100); // inferior izquierda
PVector p4 =
beginShape();
vertex( p1.x, p1.y );
vertex( p2.x, p2.y );
vertex( p3.x, p3.y );
vertex( p4.x, p4.y );
endShape(CLOSE); // cierra figura
En lugar de hacer una o dos variables para cada vértice, podemos hacer una que almacene a todos, y usar un ciclo for
para dibujarlos.
Lo revisamos en otro tema.
También es posible usar ciclos for
para establecer los valores de los vértices de acuerdo al número de iteración.
Para dibujar un hueco, podemos utilizar vértices entre beginContour();
y endContour();
.
Los vértices han de estar en secuencia counter-clockwise, en sentido contrario de las manecillas del reloj.
beginContour() en la referencia de Processing
Utilizando el renderer llamado P2D
, podemos asignar color de relleno (fill()
) y/o de borde (stroke()
) a cada vértice.
Al ejecutarse, Processing interpola los colores en forma de gradiente
void setup() {
size(400, 400, P2D); // nota el uso de P2D
}
void draw() {
noStroke();
beginShape();
// color magenta para los vértices superiores
fill(255, 0, 255);
vertex(0, 0);
vertex(100, 0);
// color amarillo para vértices inferiores
fill(255, 255, 0);
vertex(100, 100);
vertex(0, 100);
endShape(CLOSE);
}