Animação de hipocicloides com HTML5 e Javascript

Hipocicloide ou hypocycloid (inglês) são curvas que podem ser produzidas por meio de dois círculos, sendo um externo de raio maior e outro interno de raio menor, além dos círculos é utilizada uma constante que é geralmente representada por k, caso a constante seja um número inteiro, ela determina a quantidade de cúspides na curva.

Fig 1: Hipocicloide obtida com K=2.1

O círculo de raio menor rola em volta do círculo de raio maior com um ponto fixo, as coordenadas que esse ponto fixo intercepta, são utilizadas como pontos da curva. O ponto inicial sempre é completado (juntado com outro) no final das iterações.

O que mais chama a atenção são os desenhos que é possível gerar simplesmente variando o valor da constante k, como podemos observar nas figura 1.

Para obter os pontos das curvas é utilizada a seguinte equação.

Onde r é o raio do círculo menor, a letra grega teta é o passo da circunferência e k é a constante que define o modelo da curva.

Para reproduzir computacionalmente a equação anterior, foi utilizada a linguagem Javascript junto com Canvas 2D que faz parte do padrão HTML5. Podemos observar o trecho de código que calcula as coordenadas.

 function calculateCoordinates(theta)
 {
   canvas = document.getElementById("hypocycloid");
   width = canvas.width; 
   height = canvas.height;
   r = width/(k*3);
   x = width/2 + r * (k - 1) * Math.cos(theta) + r * Math.cos((k-1)*theta);
   y = height/2 + r * (k - 1) * Math.sin(theta) - r * Math.sin((k-1)*theta);
   return [x,y];
 }    

Na implementação o raio (r) foi obtido dividindo a largura da área do canvas (área de desenho) pela constante k*3, pois com valor fixo do raio e dependendo do tamanho da área, parte do desenho poderia ser ocultado.

A seguir podemos observar o trecho de código que é responsável pelas iterações e atualização do desenho e animação.

 function animate() 
 {
   reqFrame = window.mozRequestAnimationFrame    ||
              window.msRequestAnimationFrame     ||              
              window.webkitRequestAnimationFrame ||
              window.oRequestAnimationFrame;
   theta=theta+0.006;
   coord = calculateCoordinates(theta);
   x = coord[0];
   y = coord[1];
   draw();
          
   reqFrame(animate);
 }

O trecho que desenha cada ponto no Canvas 2D é mostrado a seguir.

 function draw()
 {
   canvas = document.getElementById("hypocycloid");
   ctx = canvas.getContext("2d");
   ctx.fillRect(x,y,1,1);
 } 

Os principais trechos do código são os que foram expostos anteriormente, é claro que para a animação funcionar é necessário inicializar as variáveis, tratar os valores de entrada e etc. O código completo pode ser visto neste link. Outro detalhe foi que para tornar o código mais didático, não tratei a condição de parada do desenho.

Abaixo é possível ver o funcionamento do código, basta clicar no botão "Gerar Curvas". É necessário o navegador ser compatível com HTML5.

Valor de K

Valores interessantes de K: 2.1, 3, 3.1, 3.15, 3.2, 4, 4.15, 4.5, 6, 12 ...