---
title: "Dibujo de polígonos"
---

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

# Fundamentos

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

* Inicio con `beginShape();`
* Lista de vértices de la forma `vertex(x, y);`, en sentido *clockwise* (con las manecillas del reloj)
* Final con `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.

## 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:

* `rect( )` está dibujado respecto a su *esquina superior izquierda*
* `ellipse( )` está dibujada respecto a su *centro*

Esto nos funcionará más adelante.

## 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:

```java
// 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*:

```java
// 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
```

# 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.

## 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:

```java
// 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
```

## 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.

```java
// 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
```

## Variables por vértice

En ocasiones puede funcionar más tener cada vértice guardado como una variable de tipo `PVector`:

```java
// 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
```

## 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.

## Generados

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

# Extras

## 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](https://processing.org/reference/beginContour_.html)

## 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]](/notas/color.html)

Al ejecutarse, Processing *interpola* los colores en forma de gradiente

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