Dibujo de polígonos

Processing nos permite dibujar polígonos arbitrarios a partir de una serie de vértices.

1 Fundamentos

La estructura general para dibujar un polígono en Processing consiste en:

Siempre conviene empezar con algún tipo de boceto para ubicar los vértices.

1.1 Punto de referencia

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:

Esto nos funcionará más adelante.

1.2 Ejemplos

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

2 Opciones de almacenamiento de vértices

Hay distintas estrategias para almacenar y manipular los valores numéricos en los vértices de nuestro polígono.

2.1 Constantes numéricas

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

2.2 Variables por coordenada

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

2.3 Variables por vértice

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

PVector p1 = new PVector( 0, 0 ); // superior izquierda
PVector p2 = new PVector( 100, 0); // superior derecha
PVector p3 = new PVector( 100, 100); // inferior derecha
PVector p4 = new PVector( 0, 100); // inferior izquierda

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

2.4 Arreglos

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.

2.5 Generados

También es posible usar ciclos for para establecer los valores de los vértices de acuerdo al número de iteración.

3 Extras

3.1 Huecos

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

3.2 Colores en vértices

Utilizando el renderer llamado P2D, podemos asignar color de relleno (fill()) y/o de borde (stroke()) a cada vértice.

[Color]

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);
}