---
title: "Coordenadas polares"
---

# Fundamentos

El sistema de coordenadas polares es un sistema de coordenadas en dos dimensiones donde cada punto se ubica a partir de un valor de radio `r` (distancia respecto a un punto de referencia) y de ángulo `a` (respecto a una dirección de referencia).


## Conversión a coordenadas rectangulares

Para convertir de coordenadas polares a rectangulares, usamos funciones trigonométricas pues relacionan un radio (hipotenusa) y ángulo, con los lados (catetos) de un triángulo rectángulo.

[[Funciones trigonométricas]](/notas/trig.html)

![](/img/xyar.png)

Estas son las fórmulas para convertir coordenadas polares `r,a` con centro en `cx,cy`, a coordenadas rectangulares `x,y`.

```java
// calcula coordenadas rectangulares x,y a partir de:
// r: radio
// a: ángulo
// cx,cy: centro / punto de referencia
float x = r*cos(a) + cx;
float y = r*sin(a) + cy;
```

El siguiente diagrama muestra algunos valores comunes de ángulos medidos en radianes:

![](/img/radianes.png)

# Ejemplos de código: radio constante

Los siguientes son *sketches* de código que demuestran varias posibilidades de utilizar coordenadas polares de manera tradicional con un valor de radio constante y un ángulo que avanza de 0 a `TWO_PI`.

## Polígono regular

Este ejemplo dibuja un polígono regular a partir de calcular la posición de sus vértices con coordenadas polares.

Nota cómo al cambiar el divisor del incremento del ángulo, aumentarás o reducirás el número de lados.

```java
size(400, 400);
background(0);
noFill();
stroke(255);

beginShape();
// cambia el ángulo en incrementos de TWO_PI/6
for(float a=0; a<=TWO_PI; a=a+TWO_PI/6){
 // calcula las coordenadas x,y con radio 100 y centro en 200,200
 float x = 100*cos(a) + 200;
 float y = 100*sin(a) + 200;
 
 // establece el vértice del polígono en x,y
 vertex(x,y);
}
endShape(CLOSE);
```

![](/img/hexagono.png)

## Rayos/Radios

Este ejemplo dibuja 16 líneas que van hacia el centro desde puntos ubicados en una circunferencia.

```java
size(400, 400);
background(0);
noFill();
stroke(255);

// aumenta el ángulo en incrementos de TWO_PI/16
for(float a=0; a<=TWO_PI; a=a+TWO_PI/16){
 // calcula las coordenadas x,y con radio 100 y centro en 200,200
 float x = 100*cos(a) + 200;
 float y = 100*sin(a) + 200;

 // dibuja una línea del punto x,y al centro
 line(x,y, 200, 200);
}
```

![](/img/radios.png)

## Aleatoriedad en área circular

Este ejemplo dibuja 500 puntos en posición aleatoria dentro de un área circular de 100 pixeles de radio y centro en 200,200.

Para que los puntos estén dentro de esa área, en vez de generar coordenadas `x,y` aleatorias se generan un radio `r` y un ángulo `a` aleatorios. Estas coordenadas polares entonces se usan para calcular las coordenadas `x,y` correspondientes.

```java
size(400, 400);
background(0);
noFill();
stroke(255);
strokeWeight(5);

// repite 500 veces:
for(int cuenta=1; cuenta<=500; cuenta++){

  // genera un radio aleatorio entre 0 y 100
  float r = random(0, 100);
  // genera un ángulo aleatorio entre 0 y TWO_PI
  float a = random(0, TWO_PI);
  
  // calcula coordenadas x,y
  // en función de r, a
  float x = r*cos(a) + 200;
  float y = r*sin(a) + 200;
  
  // dibuja punto en x,y
  point(x,y);
}
```

![](/img/puntos-random-en-circulo.png)

## Curva de Lissajous

Este es un caso especial de uso de coordenadas polares, en el que la posición de cada vértice `x,y` de una figura se basa en dos funciones senoidales con frecuencia distinta.

En este ejemplo, esas frecuencias son de 3 y 4.

Prueba cambiar esas cantidades para obtener otras versiones.

```java
size(400, 400);
background(0);
noFill();
stroke(255);

beginShape();
for(float a=0; a<=TWO_PI; a=a+PI/100){
 float x = 100*sin(3*a) + 200;
 float y = 100*sin(4*a) + 200;
 vertex(x,y);
}
endShape(CLOSE);
``` 

![](/img/lissajous-3-4.png)

# Ejemplos de código: radio variable

En estos ejemplos el radio de una figura circular cambia con cada iteración del ciclo `for`.

Todos usan `vertex(x,y)` para definir los vértices de un polígono entre `beginShape()` y `endShape()`.

## Espiral

En este ejemplo tenemos una variable `r` que funciona como acumulador y que corresponde a la longitud del radio. En cada iteración del ciclo aumenta un poco, por lo que cada vértice está más alejado del punto central respecto a los anteriores.

Nota que en el ciclo `for` la condición *while* indica que las repeticiones sucederán mientras el ángulo sea menor o igual a `5*TWO_PI`; es decir, el ángulo dará 5 vueltas.

Prueba cambiar ese número de vueltas y/o los incrementos al radio y al ángulo en cada iteración.

```java
size(400, 400);
background(0);
noFill();
stroke(255);
beginShape();

// valor inicial del radio
float r = 1;
// itera con un ángulo entre 0 y 5*TWO_PI
for(float a=0; a<=5*TWO_PI; a=a+PI/100){
 // calcula coordenadas rectangulares
 float x = r*cos(a) + 200;
 float y = r*sin(a) + 200;

 vertex(x,y);
 
 // en cada iteración el radio aumenta linealmente
 r = r + 0.1;
}
endShape();
```

![](/img/espiral.png)

[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)

## Flores

En este ejemplo la longitud del radio cambia de acuerdo a una función senoidal, a una frecuencia mayor que las funciones seno y coseno que utilizamos para calcular las posiciones de los vértices.

Prueba modificar la amplitud de esa función del radio, su frecuencia, e incluso su punto central.

```java
size(500, 500);
background(0);
noFill();
stroke(255);
beginShape();
for(float a=0; a<=TWO_PI; a=a+PI/1000){
 // la longitud del radio oscila de -200 a 200
 // realizando 8 ciclos por cada ciclo de 'a'
 float r = 200*sin(8*a);

 float x = r*cos(a) + 250;
 float y = r*sin(a) + 250;
 vertex(x,y);
}
endShape(CLOSE);
```

![](/img/flor-16petalos.png)

## Aleatorio

En este ejemplo cada vértice tiene un radio distinto generado de manera aleatoria.

Prueba modificar el incremento de ángulo en el ciclo y/o el rango aleatorio del radio.

```java
size(400, 400);
background(0);
noFill();
stroke(255);
beginShape();
for(float a=0; a<=TWO_PI; a=a+PI/100){
 // genera un radio aleatorio para cada punto
 float r = random(50, 150);

 float x = r*cos(a) + 200;
 float y = r*sin(a) + 200;
 vertex(x,y);
}
endShape();
```

![](/img/circulo-random.png)

## Y más...

Estos ejemplos solo son algunas sugerencias de posibilidades. Te invito a experimentar combinándolos o haciéndolos más complejos.


# Notas que enlazan aquí

* [[Funciones trigonométricas]](/notas/trig.html)
