w3.unpo<code>todo

Seno y coseno

Todo el mundo sabe que dado un triángulo rectángulo ABC:

El seno del ángulo B ( en radianes!!! ) es igual al cateto opuesto / hipotenusa: Math.sin(B) =  AC / AB;
El coseno del ángulo B ( en radianes!!! ) es igual al cateto adyacente / hipotenusa: Math.cos(B) = BC / AB;
La tangente del ángulo B ( en radianes!!! ) es igual al cateto opuesto / cateto adyacente: Math.tan(B) = AC / BC;

Pero estas dos funciones trigonométricas pueden ser muy interesantes, y hay algunos aspectos que merece la pena comentar. El seno y el coseno de cualquier ángulo toma valores que oscilan entre 1 y -1, y las podemos utilizar para generar movimientos suaves, y fluidos, que llamamos movimientos sinusoidales.

Movimientos sinusoidales

Abajo aparecen dos curvas cuadráticas de Bézier. El punto de control de ambas curvas se mueve a lo largo del eje vertical: Y. ( pcy1 y pcy2 son los valores de las coordenadas en y de los puntos de control )

La primera curva, la que aparece trazada en rojo, tiene un movimiento brusco, sobre todo al cambiar de dirección. Se trata de un movimiento lineal donde el valor de la coordenada en Y crece o decrece 2px con cada fotograma.

function animarBezier1(){
  if(pcy1 <= 0){crece = true;}
  if(pcy1 >= ch){crece = false;}
  if(crece){pcy1 +=2;}else{pcy1 -=2;}
  ctx1.clearRect(0,0,cw,ch);
  ctx1.beginPath();
  ctx1.moveTo(ax,ay);// aquí empieza la curva
  ctx1.quadraticCurveTo(pcx,pcy1,zx,zy);
  ctx1.stroke();
  }

Donde pcy1 representa el valor en Y del punto de control pc de la primera curva y crece es una variable de tipo Boolean declarada anteriormente.

La segunda curva, la que aparece trazada en verde, tiene un movimiento sinusoidal, donde el cambio de dirección se hace de manera natural y suave.

function animarBezier2(){
pcy2 = cy + cy * Math.sin(fotogramas*2 * rad);
ctx2.clearRect(0,0,cw,ch);
ctx2.beginPath();
ctx2.moveTo(ax,ay);// aquí empieza la curva
ctx2.quadraticCurveTo(pcx,pcy2,zx,zy);
ctx2.stroke();
}

var c1 = document.getElementById("c1");
var ctx1 = c1.getContext("2d");

var c2 = document.getElementById("c2");
var ctx2 = c2.getContext("2d");

var c_W = c1.width = c2.width = 300, c_X = c_W/2;
var c_H = c1.height = c2.height = 180, c_Y = c_H/2;


ctx1.font="14px Verdana";
ctx1.textAlign="center";
ctx1.fillStyle = "red";
ctx2.font="14px Verdana";
ctx2.textAlign="center";
ctx2.fillStyle = "#6ab150";

var rad = Math.PI / 180;

var ax = 10;
var ay = c_Y;
var pcx = c_X;
var pcy1 = c_Y;
var pcy2 = c_Y;
var zx = c_W -10;
var zy = c_Y;
var crece = true;
var frames = 0;
var rad = Math.PI / 180;

ctx1.lineWidth = 3;
ctx1.strokeStyle = "red";
ctx2.lineWidth = 3;
ctx2.strokeStyle = "#6ab150";

function animarBezier1(){
if(pcy1 <= 0){crece = true;}
if(pcy1 >= c_H){crece = false;}
if(crece){pcy1 +=2; }else{pcy1 -=2; }
ctx1.clearRect(0,0,c_W,c_H);
ctx1.beginPath();
ctx1.moveTo(ax,ay);// aquí empieza la curva
ctx1.quadraticCurveTo(pcx,pcy1,zx,zy);
ctx1.stroke();
ctx1.fillText("movimiento lineal", c_X, c_H-15);
}

function animarBezier2(){
pcy2 = c_Y + c_Y * Math.sin(frames * 2 * rad);	
ctx2.clearRect(0,0,c_W,c_H);
ctx2.beginPath();
ctx2.moveTo(ax,ay);// aquí empieza la curva
ctx2.quadraticCurveTo(pcx,pcy2,zx,zy);
ctx2.stroke();
ctx2.fillText("movimiento sinusoidal", c_X, c_H-15);
}

function Dibujar(){
	frames ++;
	animarBezier1();
	animarBezier2();
	
	requestId = window.requestAnimationFrame(Dibujar);
	}
requestId = window.requestAnimationFrame(Dibujar);

Curvas sinusoidales

En matemáticas, se llama sinusoide o senoide la curva que representa gráficamente la función seno. Antes de dibujar una curva sinusoidal tenemos que definir algunas variables: la amplitud,la frecuencia y la fase inicial de oscilación.

var h = 200;
var amplitud = h / 2;
var frecuencia = Math.PI/50;
var faseInicial = Math.PI/2;

Mientras que la coordenada en x varia de manera lineal

for (var x = 0; x < w; x++) {

haremos que la coordenada en y varíe de manera sinusoidal:

y = Math.sin(x * frecuencia + faseInicial) * amplitud + amplitud;

var csin = document.getElementById("csin");
var ctxSin = csin.getContext("2d");
var cw = csin.width = 300;
var ch = csin.height = 250;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;
var w = cw;
var h = 200;
var amplitud = h / 2;
var frecuencia = .062;
var faseInicial = Math.PI/2;
ctxSin.strokeStyle = "#6ab150";
ctxSin.lineWidth = 4;

function dibujarSinusoide() {

  ctxSin.clearRect(0, 0, cw, ch);
  ctxSin.beginPath();
  ctxSin.moveTo(0, ch);
  for (var x = 0; x < w; x++) {
    y = Math.sin(x * frecuencia + faseInicial) * amplitud + amplitud;
    ctxSin.lineTo(x, y + 40);
  }
  ctxSin.lineTo(w, ch);
  ctxSin.lineTo(0, ch);
  ctxSin.stroke();
}
dibujarSinusoide();

Ondas sinusoidales

Podemos animar la sinusoide variando el valor de la fase phi ( el desplazamiento horizontal ).

function dibujarOnda() {
  fotogramas++
  phi = fotogramas / 30;
  ctx.clearRect(0, 0, c_w, c_h);
  ctx.beginPath();
  ctx.moveTo(0, c_h);
  for (var x = 0; x < w; x++) {
    y = Math.sin(x * freq + phi) * ampl + ampl;
    ctx.lineTo(x, y + 10); // 10 = offset
  }
  ctx.lineTo(w, c_h);
  ctx.lineTo(0, c_h);
  ctx.stroke();
  requestId = window.requestAnimationFrame(dibujarOnda);
}

var cOnda = document.getElementById("cOnda");
var ctx = cOnda.getContext("2d");
var c_w = cOnda.width = 300;
var c_h = cOnda.height = 200;
var c_x = c_w / 2,
  c_y = c_h / 2;
var rad = Math.PI / 180;
var w = c_w;
var h = 150;
var ampl = h / 2;
var freq = .01;
var phi = 0;
var fotogramas = 0;
ctx.strokeStyle = "#6ab150";
ctx.lineWidth = 4;

function dibujarOnda() {
  fotogramas++
  phi = fotogramas / 30;
  ctx.clearRect(0, 0, c_w, c_h);
  ctx.beginPath();
  ctx.moveTo(0, c_h);
  for (var x = 0; x < w; x++) {
    y = Math.sin(x * freq + phi) * ampl + ampl;
    ctx.lineTo(x, y + 10); // 10 = offset
  }
  ctx.lineTo(w, c_h);
  ctx.lineTo(0, c_h);
  ctx.stroke();
  requestId = window.requestAnimationFrame(dibujarOnda);
}
requestId = window.requestAnimationFrame(dibujarOnda);

¿Para que podemos utilizar las ondas sinusoidales? Vea esta colección de ejemplos en codepen.io.