---
title: "Funciones trigonométricas"
---

Las funciones trigonométricas definen relaciones entre los lados y ángulos de un triángulo rectángulo.

![](/img/xyar.png)

```java
sin( a ) <-> y/r
cos( a ) <-> x/r
tan( a ) <-> y/x
```

[[Ángulos en radianes]](/notas/angulos.html)

## Seno y coseno

Estas dos funciones son periódicas y tienen un rango de resultados entre -1 y 1.

Suelen usarse para generar comportamientos oscilatorios y para trabajar con *coordenadas polares*.

[[Coordenadas polares]](/notas/coordenadas-polares.html)

Las dos funciones tienen la misma forma pero están desfasadas por `HALF_PI`.

### En función del espacio

Estos ejemplos utilizan ciclos `for` para dibujar un conjunto de puntos.

[[Ciclos while y for]](/notas/ciclos.html)

El siguiente programa dibuja a la función `sin( )` con un periodo correspondiente al canvas completo:

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

for(float x=0; x<=width; x++){
 float y = 100*sin( TWO_PI*x/width ) + 200;
 point(x,y);  
}
```

![](/img/sin.png)

Algunas observaciones y definiciones:

* La **amplitud** de la onda es 100, esto implica que oscilará entre -100 y 100
* `x/width` *normaliza* a `x`, haciendo que resulte en un número entre 0 y 1
* `TWO_PI` hace que se obtenga un ciclo completo (**frecuencia** de 1)
* `+ 200` hace que la onda tenga su centro en 200 en vez de en 0.

Podemos obtener el mismo dibujo utilizando la función `map( )`:

```java
// dibuja 1 ciclo de la función seno
size(400, 400);
background(0);
stroke(255);
strokeWeight(2);

for(float x=0; x<=width; x++){
 // convierte a x 
 // que tiene un rango original de 0 a width
 // a un rango entre 0 y TWO_PI
 float t = map(x, 0, width, 0, TWO_PI);

 // convierte al resultado de sin(t)
 // que tiene un rango original entre -1 y 1
 // a un rango entre 100 y 300
 float y = map( sin(t), -1, 1,  100, 300);
 point(x,y);  
}
```

[[Mapeo/conversión de valores]](/notas/map.html)

En el siguiente ejemplo, lo único que cambia es la *frecuencia*, de `TWO_PI` a `4*TWO_PI`. Nota cómo ahora hay cuatro ciclos:

```java
// dibuja 4 ciclos de la función seno
size(400, 400);
background(0);
stroke(255);
strokeWeight(2);

for(float x=0; x<=width; x++){
 // convierte a x 
 // que tiene un rango original de 0 a width
 // a un rango entre 0 y 4*TWO_PI
 float t = map(x, 0, width, 0, 4*TWO_PI);

 // convierte al resultado de sin(t)
 // que tiene un rango original entre -1 y 1
 // a un rango entre 100 y 300
 float y = map( sin(t), -1, 1,  100, 300);
 point(x,y);  
}
```

![](/img/sin4.png)

### En función del tiempo 

Estos ejemplos utilizan el ciclo de animación para funcionar.

[[Ciclo de animación]](/notas/draw.html)

En este ejemplo el brillo del fondo es modulado por una función senoidal.

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

void draw(){
 // convierte frameCount
 // de un rango original de 0 a 300 frames
 // a un rango de 0 a TWO_PI
 // (hace que un ciclo completo suceda en 300 frames)
 float t = map(frameCount, 0, 300, 0, TWO_PI);
 
 // convierte el resultado de sin(t)
 // de un rango de -1 a 1
 // a uno de 0 a 255
 float brillo = map( sin(t), -1, 1, 0, 255);
 // asigna el resultado al color de fondo
 background(brillo);
}
``` 

* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
* [[Mapeo/conversión de valores]](/notas/map.html)

*Nota: si bien frameCount sigue incrementándose más allá de 300, la función `map()` se encarga de seguirlo convirtiendo con la misma relación de 300 frames a `TWO_PI`*


# Notas que enlazan aquí

* [[Coordenadas polares]](/notas/coordenadas-polares.html)
