---
title: "Funciones de dibujo"
---

Podemos crear nuestras propias funciones para dibujar figuras específicas.

Hay varias ventajas:

* Nuestro código se vuelve más fácil de leer
* Podemos repetir el dibujo múltiples veces sin repetir el código
* Podemos reusar el dibujo en otros sketches

En general, nos interesará crear funciones con parámetros para poderlas utilizar como las que conocemos `line()`, `rect()`, `ellipse()`, etc.

Pero hay veces en que escribir funciones, aunque no usen parámetros, ayuda bastante.

# Funciones sin parámetros

La forma de declarar una función de dibujo sin parámetros será la que sigue:

```java
void miFigura(){
   // código que dibuja la figura
}
```

* `void` implica que es una función que no "regresa" un valor.
* `miFigura` puede ser cualquier nombre que queramos, mientras no sea una de las palabras reservadas de Processing
* `()` indica que es una función y que no hay parámetros
* `{ }` engloban el bloque de código que le pertenece a la función.

Por ejemplo, puedo declarar esta función que dibuja una "punta de flecha" apuntando hacia arriba:

```java
void punta(){
  beginShape();
  vertex(0, -50); // punta
  vertex(50, 50); // derecha abajo
  vertex(0, 0); // centro
  vertex(-50, 50); //izquierda abajo
  endShape(CLOSE);
}
```

Para utilizarla, solo será necesario llamar `punta()`.

## En contexto

Así se podría ver un programa completo con la función en contexto:

```java
void setup(){
  size( 400, 400 );
}

void draw(){
  background(255); // fondo blanco

  translate( 200, 100); // mueve el origen 200 a la derecha y 100 abajo
  punta(); // dibuja la "punta"
}

void punta(){
  beginShape();
  vertex(0, -50); // punta
  vertex(50, 50); // derecha abajo
  vertex(0, 0); // centro
  vertex(-50, 50); //izquierda abajo
  endShape(CLOSE);
}
``` 

Nota que la función `draw()` queda un poco más clara comparada con tener todo el bloque `beginShape()` a `endShape()` en su interior.

Nota también el uso de la traslación.

[[Transformaciones]](/notas/transformaciones.html)

# Funciones con parámetros

Parametrizar nuestra figura nos permite dibujarla de múltiples maneras, variarla durante la ejecución del programa, y más.

Podemos tener tantos parámetros como queramos. Solo hay que establecer su tipo de dato, y el nombre con el que los llamaremos dentro de la función.

La forma de declarar una función de dibujo con dos parámetros `x,y` será la que sigue:

```java
void miFigura(float x, float y){
   // código que dibuja la figura respecto a x, y
}
```

## Uso de transformaciones

Podemos aprovechar las funciones de transformación para añadirle a nuestro dibujo la posibilidad de colocarse donde sea.

En el ejemplo anterior con la función `punta()`, sus vértices están descritos de manera constante (*hardcoded*).

Pero si agregamos transformaciones, podemos moverlos a donde queramos:

```java
void punta( float x, float y ){
  // guarda la matriz de transformaciones antes de cualquier cosa
  pushMatrix(); 

  // traslada el origen (x, y) unidades:
  translate(x, y);

  // dibuja la figura sin cambio:
  beginShape();
  vertex(0, -50); // punta
  vertex(50, 50); // derecha abajo
  vertex(0, 0); // centro
  vertex(-50, 50); //izquierda abajo
  endShape(CLOSE);

  // recupera la matriz a como estaba antes:
  popMatrix();
}
```

[[Transformaciones]](/notas/transformaciones.html)
 
## Uso de parámetros en vértices

Otra posibilidad, que en algunos contextos puede tener más sentido, es usar los parámetros directamente en los vértices de la figura.

Por ejemplo, el caso anterior podría quedar también así:

```java
void punta( float x, float y ){
  // dibuja la figura respecto a x,y:
  beginShape();
  vertex(x, y-50); // punta
  vertex(x+50, y+50); // derecha abajo
  vertex(x, y); // centro
  vertex(x-50, y+50); //izquierda abajo
  endShape(CLOSE);
}
```

En el caso de esa función, y dependiendo lo que queramos hacer, el `50` también podría convertirse en un parámetro, ya sea en cada eje, o para los dos ejes.

Por ejemplo:

```java
void punta( float x, float y, float d ){
  // dibuja la figura respecto a x,y, con "tamaño" d:
  beginShape();
  vertex(x, y-d); // punta
  vertex(x+d, y+d); // derecha abajo
  vertex(x, y); // centro
  vertex(x-d, y+d); //izquierda abajo
  endShape(CLOSE);
}
```

Como dato curioso, la función `rect( )` que utilizamos, está definida en Processing de una manera parecida:

```java
// versión simplificada de la función rect( )
void rect( float x, float y, float w, float h ){
  beginShape();
  vertex(x, y); // superior izquierda
  vertex(x+w, y); // superior derecha
  vertex(x+w, y+h); // inferior derecha
  vertex(x, y+h); //inferior izquierda
  endShape(CLOSE);
}
```

## En contexto

Sin importar qué versión escojamos, podemos utilizarla y reutilizarla como cualquier otra función de dibujo:

```java
void setup(){
  size( 400, 400 );
}

void draw(){
  background(255); // fondo blanco
  noFill();

  punta(10, 20); // dibuja la "punta" en 10, 20
  punta(50, 70); // dibuja la "punta" en 50, 70
}

void punta( float x, float y ){
  // guarda la matriz de transformaciones antes de cualquier cosa
  pushMatrix(); 

  // traslada a los valores dados por x, y:
  translate(x, y);

  // dibuja la figura sin cambio:
  beginShape();
  vertex(0, -50); // punta
  vertex(50, 50); // derecha abajo
  vertex(0, 0); // centro
  vertex(-50, 50); //izquierda abajo
  endShape(CLOSE);

  // recupera la matriz a como estaba antes:
  popMatrix();
}
``` 

