hypocycloid

<!-- Paulo Henrique Junqueira Amorim -->
<html>
  <head>
    <title>Hypocycloid com HTML5</title>

      <script type="text/javascript">

        var canvas, ctx;
        var theta = 0;
        var k, x, y;

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

          reqFrame(animate);
       }

        function init(form)
        {
          if (form != null)
          {

            k =  parseFloat(form.k.value);
            canvas = document.getElementById("hypocycloid");
            ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
          }
          else
          {
            k = 4.5;
          }
          animate();
        }

       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];
       }

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

    <style type="text/css">
      canvas {border: 1px solid black;}
    </style>

  </head>
  <body onload="init(null);">
    <canvas id="hypocycloid" width="500" height="500"></canvas>
    <p>
    <form name="form" action="" method="GET">Valor de K
        <input type="text" name="k" value="4.5" size=4>
    <input type="button" name="button" value="Atualizar" onclick="init(this.form)">
    <p>
    Valores interessantes de K: 2.1,  3,  3.1,  3.15,  3.2,  4,  4.15,  4.5,  6, 12  ...
    <p>
    by Paulo Henrique Junqueira Amorim
  </body>
</html>