Otras curvas

Podemos dibujar todo tipo de curvas ( de hecho todo tipo de trazados ) utilizando el método lineTo().

Dibujar un circulo con el método lineTo()

Pensemos un momento en un polígono regular inscrito, Como más lados tiene el polígono, mas se parece al circulo circunscrito. Sabiendo esto podemos ( aunque no se si debemos ) dibujar un circulo como un polígono regular con 360 lados – por ejemplo. De hecho si el circulo es relativamente pequeño podemos reducir considerablemente el número de lados. En el siguiente ejemplo verá un polígono regular con 60 lados que parece un círculo perfecto.

for (var a = 0; a < 360; a += 6){...

Cómo dibujar Polígonos regulares en <canvas>


var c = document.getElementById("circulo");
var ctx = c.getContext("2d");
var cw = c.width = 250;
var ch = c.height = 200;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;

ctx.lineWidth = 3;
ctx.strokeStyle = "#64b150";

// los dos radios de la elipse
var r = 75;

ctx.beginPath();
for (var a = 0; a < 360; a+=6) {
  var x = cx + r * Math.cos(a * rad);
  var y = cy + r * Math.sin(a * rad);
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();

Elipses

En este momento podemos dibujar una elipse en canvas, utilizando el método ellipse(). La mala noticia es que este método funciona solo en Chrome y versiones modernas de Opera. Sin embargo podemos dibujar una elipse utilizando el método lineTo(), tal y como hemos visto anteriormente.


var c = document.getElementById("elipse");
var ctx = c.getContext("2d");
var cw = c.width = 250;
var ch = c.height = 200;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;

ctx.lineWidth = 3;
ctx.strokeStyle = "#64b150";

// los dos radios de la elipse
var rx = 100;
var ry = 50;

ctx.beginPath();
for (var a = 0; a < 360; a+=6) {
  var x = cx + rx * Math.cos(a * rad);
  var y = cy + ry * Math.sin(a * rad);
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();

Elipse inclinada

Esto ya está muy bien pero lo podemos hacer mejor. El método contexto.ellipse() nos permite también girar la elipse:

contexto.ellipse(X, Y, rX, rY, ar, ap, af, cR);

Donde ar representa el ángulo de rotación del eje horizontal ( en radianes - siempre en radianes!!! ).
Podemos hacer lo mismo ( o casi ) utilizando esta "receta":


var c = document.getElementById("elipseInclinada");
var ctx = c.getContext("2d");
var cw = c.width = 250;
var ch = c.height = 200;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;

ctx.lineWidth = 3;
ctx.strokeStyle = "#64b150";

// los dos radios de la elipse
var rx = 100;
var ry = 50;
//el ángulo del eje horizontal
var theta = 45*rad;

ctx.beginPath();
for (var a = 0; a < 360; a+=6) {
  var x = cx + rx*Math.cos(a*rad)*Math.cos(theta) - ry*Math.sin(a*rad)*Math.sin(theta);
  var y = cy + rx*Math.cos(a*rad)*Math.sin(theta) + ry*Math.sin(a*rad)*Math.cos(theta);
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();

Lemniscata de Bernoulli

En matemáticas, la lemniscata de Bernoulli es un tipo de curva cuya representación gráfica es similar al símbolo del infinito. Lea más acerca de la lemniscata de Bernoulli en Wikipedia.


var c = document.getElementById("lemniscata");
var ctx = c.getContext("2d");
var cw = c.width = 250;
var ch = c.height = 200;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;

ctx.lineWidth = 3;
ctx.strokeStyle = "#64b150";

// algunas variables necesarias
var R = 100,x,y,t;

ctx.beginPath();
for (var a = 0; a < 360; a+=3) {
	t = a * rad;
	x = cx + (R * Math.cos(t)) / (1 + (Math.sin(t) * Math.sin(t))),
    y = cy + (R * Math.sin(t) * Math.cos(t)) / (1 + (Math.sin(t) * Math.sin(t)))
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();

Rosas polares

Consejo: pruebe variar el valor de los parámetros A,B y K. Por ejemplo:
si A = 1,B = 2 y K = 1 obtendrá un Limaçon;
si A = 1,B = 1 y K = 1 obtendrá un Cardioide.

Lea más acerca de las rosas polares en Wikipedia.


var c = document.getElementById("rosas");
var ctx = c.getContext("2d");
var cw = c.width = 250;
var ch = c.height = 250;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;
var frames = 0;

ctx.lineWidth = 3;
ctx.strokeStyle = "#6ab150";

var R = 35;

// Consejo: pruebe variar el valor de los parámetros A,B y K 
var A = 1; //1,2,...
var B = 2; //1,2,...
var K = 6; // K = 0,1,2,3,4,5,.....360

ctx.beginPath();
for (var a = 0; a < 360; a++) {

  var r = A * R + B * R * Math.sin(K * a * rad);

  var x = cx + r * Math.cos(a * rad);
  var y = cy + r * Math.sin(a * rad);
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();

See the Pen Polar sine flower by Gabi (@enxaneta) on CodePen.

Curva de Lissajous

Consejo: pruebe variar el valor de los parámetros kx, y ky. Combinaciones a probar:

kx = 1, ky = 2;
kx = 3, ky = 2;
kx = 3, ky = 4;
kx = 5, ky = 4;
kx = 5, ky = 6;
kx = 9, ky = 8;

Lea más acerca de la Curva de Lissajous en Wikipedia.


var c = document.getElementById("lissajous");
var ctx = c.getContext("2d");
var cw = c.width = 250;
var ch = c.height = 250;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;

ctx.lineWidth = 3;
ctx.strokeStyle = "#6ab150";

var Rx = 100, 
  Ry=100, 
  // consejo: pruebe variar el valor de los parámetros kx y ky
  kx = 5,
  ky = 6,
  phi = Math.PI/2,
  x,y,t;
  
ctx.beginPath;
for (var a = 1; a <= 360; a ++) {
    t = a * rad;
	x = cx + Rx * Math.sin(kx * t + phi );
    y = cy + Ry * Math.sin(ky * t);
    ctx.lineTo(x, y);
  }
ctx.closePath();
ctx.stroke();

Dibujar un corazón

Si quiere saber más acerca de cómo dibujar un corazón lea este articulo a Wolfram MathWorld: The Web's Most Extensive Mathematics Resource


var c = document.getElementById("corazon");
var ctx = c.getContext("2d");
var cw = c.width = 250;
var ch = c.height = 250;
var cx = cw/2,cy = ch/2;
var rad = Math.PI / 180;

ctx.lineWidth = 3;
ctx.strokeStyle = "#6ab150";
	
var r =5;
ctx.beginPath();
for( var t = 0; t < 360; t++){
var x = cx + 16*r*(Math.sin(t*rad) *Math.sin(t*rad) *Math.sin(t*rad) );	
var y = cy - 13*r*Math.cos(t*rad) +
             5*r*Math.cos(2*t*rad) +
			 2*r*Math.cos(3*t*rad) +
			 r*Math.cos(4*t*rad);	
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();

w3.unpo<code>todo