w3.unpo<code>todo

Epicicloide

En el siguiente ejemplo la curva roja es una epicicloide trazada a medida que el círculo pequeño o generatriz ( con el radio r ) gira sobre la circunferencia de un círculo mayor ( directriz ). En este caso el radio del círculo mayor:

R = 3*r 

y genera una epicicloide de 3 vertices.
Para recordar el nombre: el prefijo epi- aparece en palabras científicas con el significado de sobre...

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

Dibujar una epicicloide en el canvas

Primero necesitamos definir algunas variables:
el número de vértices : var nVertices = 3;
el radio de la directriz (el círculo grande) R = 50;
el radio de la generatriz (el círculo pequeño) r = R / nVertices;

Para dibujar la epicicloide necesitamos calcular las coordenadas (x,y) de cada punto. Esta es la parte más importante del código:

for (var t = 1; t <= 360; t ++) {
    phi = t * rad;
    x = cX + (R + r)*Math.cos(phi) - r*Math.cos(rotacion + (R + r)/r*phi);	
    y = cY + (R + r)*Math.sin(phi) - r*Math.sin(rotacion + (R + r)/r*phi);
    contexto.lineTo(x, y);
}

Si queremos girar la epicicloide alrededor de su centro, tenemos que definir también la var rotacion;

Consejo: pruebe variar el número de vertices nVertices.
Veamos el código:

var epi = document.getElementById("epicicloide");
var contexto = epi.getContext("2d");

var cW = epi.width = 250, cX = cW/2;
var cH = epi.height = 250, cY = cH/2;
var rad = Math.PI / 180;

var nVertices = 3;
var R=50,r=R/nVertices,x,y,phi;
var rotacion = Math.PI/3;
contexto.lineWidth =3;
contexto.strokeStyle = "#6ab150";

// epicicloide
 contexto.beginPath();
   for (var t = 1; t <= 360; t ++) {
    phi = t * rad;
    x	=	cX+(R+r)*Math.cos(phi)-r*Math.cos(rotacion+(R+r)/r*phi);	
    y	=	cY+(R+r)*Math.sin(phi)-r*Math.sin(rotacion+(R+r)/r*phi);
    contexto.lineTo(x, y);
  }
 contexto.closePath();
 contexto.stroke();

Hipocicloide

En el siguiente ejemplo la curva roja es una hipocicloide trazada a medida que el círculo pequeño - la generatriz ( con el radio r ) gira sobre la circunferencia de un círculo mayor ( directriz ). En este caso el radio del círculo mayor:

R = 3*r

y genera una hipocicloide de 3 vertices.
Para recordar el nombre: el prefijo hipo- se usa para formar nombres y adjetivos con el significado de "debajo de" o "inferior".

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

Dibujar una hipocicloide en el canvas

Primero necesitamos definir algunas variables:
el número de vértices : var nVertices = 3;
el radio de la directriz (el círculo grande) R = 100;
el radio de la generatriz (el círculo pequeño) r = R / nVertices;

Para dibujar la epicicloide necesitamos calcular las coordenadas (x,y) de cada punto. Esta es la parte más importante del código:

for (var t = 1; t <= 360; t ++) {
    phi = t * rad;
    x =	cx + (R - r)*Math.cos(phi) + r*Math.cos(rotacion + (R - r)/r*phi);	
    y =	cy + (R - r)*Math.sin(phi) - r*Math.sin(rotacion + (R - r)/r*phi);
    contexto.lineTo(x, y);
}

Si queremos girar la epicicloide alrededor de su centro, tenemos que definir también la var rotacion;

Consejo: pruebe variar el número de vertices nVertices.
Veamos el código:

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

var cw = c.width = 250, cx = cw/2;
var ch = c.height = 250, cy = ch/2;
var rad = Math.PI / 180;


var nVert = 3;
var R=100,r=R/nVert;

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


ctx1.beginPath();
for (var t = 1; t <= 360; t ++) {
    var phi = t * rad;
    var x	=	cx+(R-r)*Math.cos(phi)+r*Math.cos((R-r)/r*phi);	
    var y	=	cy+(R-r)*Math.sin(phi)-r*Math.sin((R-r)/r*phi);
    ctx1.lineTo(x, y);
  }
ctx1.closePath();
ctx1.stroke();

Hipotrocoide

Una hipotrocoide es una curva trazada por un punto vinculado a una circunferencia (generatriz) que rueda sin deslizamiento dentro de una circunferencia (directriz). En el código R es el rádio del circulo exterior ( azul ), r es el rádio del circulo interior y h es la distáncia entre el centro de la generatriz y la hipotrocoide ( la línea verde ).
Para recordar el nombre: la palabra "hipotrocoide" se compone de las raíces griegas hipo (abajo) y trokos (rueda).

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

Dibujar una hipotrocoide en el canvas

Primero necesitamos definir algunas variables:
el radio de la directriz (el círculo grande) a = 90;
el radio de la generatriz (el círculo pequeño) b = 30;
la distáncia entre el centro de la generatriz y la hipotrocoide h = 50;

Para dibujar la hipotrocoide necesitamos calcular las coordenadas (x,y) de cada punto. Esta es la parte más importante del código:

for( var T = 0; T < 360; T++){
    var t = T*rad;			 
    var x = cx + (a-b)*Math.cos(t)+h*Math.cos(rotacion+(a-b)/b*t);
    var y = cy + (a-b)*Math.sin(t)-h*Math.sin(rotacion+(a-b)/b*t);			
    contexto.lineTo(x, y);
}

Si queremos girar la hipotrocoide alrededor de su centro, tenemos que definir también la var rotacion;
Consejo: pruebe variar el valor de a, b, y/o h.
Veamos el código:

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

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

var a = 90;
var b = 30;
var h = 50;
var rotacion = 0;

ctx2.beginPath();
for( var T = 0; T < 360; T++){
var t = T*rad;			 
var x	=	cx + (a-b)*Math.cos(t)+h*Math.cos(rotacion+(a-b)/b*t);
var y	=	cy + (a-b)*Math.sin(t)-h*Math.sin(rotacion+(a-b)/b*t);				 
			  	
ctx2.lineTo(x,y);
}
ctx2.closePath();
ctx2.stroke();