Dibujar espirales

Una espiral es una curva generada por un punto que se va alejando progresivamente del centro a la vez que gira alrededor de él. Podemos dibujar una espiral en <canvas> utilizando el método lineTo(), de la misma manera como dibujamos otras curvas.

De hecho el resultado no será una espiral, sino una línea poligonal abierta con un gran número de lados, que se le aproxima mucho. Para dibujarla necesitamos saber calcular las coordenadas x e y de un punto en la curva, y para esto utilizamos la misma fórmula que aplicamos para calcular un punto en la circunferencia de un circulo, solo que en este caso la distancia desde el centro r varía en función del ángulo a ( en radianes!! ). Recuerde que cx y cy representan las coordenadas del centro alrededor del cual gira la espiral.

Por lo tanto podemos escribir una función que dibuja una espiral de esta manera:

function espiral(func,n){
  ctx.beginPath();
  for(var i= 0; i < (5*360);i++){
     a = i*rad;
     r = func(n,a);
     x = cx + r*Math.cos(a);
     y = cy + r*Math.sin(a);
     ctx.lineTo(x,y);
  }
  ctx.stroke();
  }

Donde func es una función que calcula la distancia desde el centro en función del ángulo a. Observe por favor que se trata de una espiral que gira 5 veces alrededor del centro ( for(var i= 0; i < (5*360);i++){...), pero puede libremente optar por otros valores.


function espiral(func,n,ctx){
ctx.beginPath();
for(var i= 0; i< 1800;i++){
	var t = i*rad;
	r = func(n,t);
	x = cx + r*Math.cos(t);
	y = cy + r*Math.sin(t);
	ctx.lineTo(x,y)
}
ctx.stroke();
}

La espiral de Arquímedes

Probablemente la espiral más simple es una espiral aritmética o la espiral de Arquímedes donde r ( la distancia desde el centro ) varía de manera constante:


function espiralArquimedes(n, a) {
  var r = n * a;
  return r;
}

El parámetro a representa el ángulo en radianes, y n es un número real cualquiera.
Si queremos que la espiral empiece en otro punto que no sea el centro alrededor del cual gira, podemos escribir:

r = d + n*a

Donde d puede ser un número positivo o negativo. Si d es un número negativo la espiral gira en el sentido contrario.

var arq = document.getElementById("Arquimedes");
if (arq && arq.getContext) {
  var ctx = arq.getContext("2d");
  if (ctx) {
    var cw = arq.width = 250,
      cx = cw / 2;
    var ch = arq.height = 250,
      cy = ch / 2;
    var rad = Math.PI / 180;
  

    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    espiral(espiralArquimedes, 3,ctx);
  }
}

La espiral de Fermat

La espiral de Fermat, también conocida como espiral parabólica, es un caso particular de la espiral de Arquímedes donde: r = n*Math.sqrt(a);


function espiralFermat(n,a){
	var r = n*Math.sqrt(a);
	return r;
}

Recuerde que a representa el ángulo en radianes, y n es un número real cualquiera.

var ferm = document.getElementById("Fermat");
if (ferm && ferm.getContext) {
  var ctx1 = ferm.getContext("2d");
  if (ctx1) {
    var cw = ferm.width = 250,
      cx = cw / 2;
    var ch = ferm.height = 250,
      cy = ch / 2;
    var rad = Math.PI / 180;

    ctx1.strokeStyle = "black";
    ctx1.lineWidth = 2;

    espiral(espiralFermat, 20,ctx1);
  }
}

Espirales logarítmicas

Unas de las mas famosas curvas son las espirales logarítmicas, una clase de curvas que aparecen frecuentemente en la naturaleza. Para saber más sobre espirales logarítmicas puede leer este articulo.

Veamos como dibujarlas: Primero declaramos la variable var t que representa el ángulo ( constante ) entre la tangente a la curva en un punto cualquiera y el "radio" o sea la línea que une el centro de la espiral con el punto de tangencia. De hecho esta es la razón por la cual este tipo de espirales recibe también el nombre de equiangulares.
En el siguiente ejemplo el ángulo t = 82*rad donde rad = Math.PI / 180, y representa, como ya lo sabe, el valor en radianes de un grado sexagesimal.


function espiralLogaritmica(n,a){
	var t = n*rad;
	//var r = Math.pow(Math.E, a * Math.cos(t));
	var r = Math.exp(a * Math.cos(t));
	return r;
}

var log = document.getElementById("logaritmica");
if (log && log.getContext) {
  var ctx2 = log.getContext("2d");
  if (ctx2) {
    var cw = log.width = 250,
      cx = cw / 2;
    var ch = log.height = 250,
      cy = ch / 2;
    var rad = Math.PI / 180;

    ctx2.strokeStyle = "black";
    ctx2.lineWidth = 2;

    espiral(espiralLogaritmica, 82,ctx2);
  }
}

Vea esta demonstración en codepen

See the Pen espirales by Gabi (@enxaneta) on CodePen.

w3.unpo<code>todo