title: Construct a circle of nested squares
body: <p>I want to construct a circle of nested squares like this:</p>
  
  <p><img src="https://i.stack.imgur.com/VgR3h.png" alt="circleOfSquares"></p>
  
  <p>In the moment, I am programming in JavaScript/HTML5 canvas. This is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Circle of squares&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  var r = 150, u = 20, nests = 200;       //radius in pixels, circumference in squares, nests in squares
  var w = r;                              //any number != 0
  
  function getNewW()
  {
      if(u &lt; 3)
          alert("Error: u &lt; 3 (" + u + " &lt; 3)!");
  
      var tangents = new Array(new Array(0, w/2), new Array(Math.sin((1/u*360)*(Math.PI/180))*(w/2), -Math.cos((1/u*360)*(Math.PI/180))*(w/2)));
      var sta = new Array(new Array(r, 0), new Array(Math.cos((1/u*360)*(Math.PI/180))*r, Math.sin((1/u*360)*(Math.PI/180))*r));
      var end = new Array(new Array(sta[0][0]+tangents[0][0], sta[0][1]+tangents[0][1]), new Array(sta[1][0]+tangents[1][0], sta[1][1]+tangents[1][1]));
      var pts = new Array(sta[0], end[0], sta[1], end[1]);
      var intersect = new Array(((pts[0][0]*pts[1][1]-pts[0][1]*pts[1][0])*(pts[2][0]-pts[3][0]) - (pts[0][0]-pts[1][0])*(pts[2][0]*pts[3][1]-pts[2][1]*pts[3][0])) / ((pts[0][0]-pts[1][0])*(pts[2][1]-pts[3][1]) - (pts[0][1]-pts[1][1])*(pts[2][0]-pts[3][0])), ((pts[0][0]*pts[1][1]-pts[0][1]*pts[1][0])*(pts[2][1]-pts[3][1]) - (pts[0][1]-pts[1][1])*(pts[2][0]*pts[3][1]-pts[2][1]*pts[3][0])) / ((pts[0][0]-pts[1][0])*(pts[2][1]-pts[3][1]) - (pts[0][1]-pts[1][1])*(pts[2][0]-pts[3][0])));        //Formula from http://en.wikipedia.org/wiki/Line%E2%80%93line_intersection
  
  
      //distTo0 should be equal to distTo1
      var distTo0 = Math.sqrt(Math.pow(sta[0][0]-intersect[0], 2) + Math.pow(sta[0][1]-intersect[1], 2));
      var distTo1 = Math.sqrt(Math.pow(sta[1][0]-intersect[0], 2) + Math.pow(sta[1][1]-intersect[1], 2));
      if(Math.round(distTo0*100)/100 != Math.round(distTo1*100)/100)
          alert("Error: distTo0 != distTo1 (" + distTo0 + " != " + distTo1 + ")!");
  
      return distTo0*2;
  }
  
  function start()
  {
      var canvas = document.getElementById("outputCanvas");
  
      canvas.setAttribute("width",  600);
      canvas.setAttribute("height", 600);
  
      if(canvas.getContext)
      {
          var ctx = canvas.getContext("2d");
          ctx.translate(300, 300);
  
          w = getNewW();
          for(var i=0; i&lt;u; i++)
          {
              ctx.rotate((1/u*360)*(Math.PI/180));
              ctx.fillRect(r, -w/2, w, w);
          }
  
          for(var j=1; j&lt;nests; j++)
          {
              var oldr = r;
              var temp1 = 1/(10*j+1);
              while(r+w &gt; oldr)        //This is the while-loop that makes the program slow
              {
                  r -= temp1;
                  w = getNewW();
              }
              if(r &lt; 0)       //When the radius gets smaller than 0, the center is reached -&gt; no new squares have to be drawn
                  break;
  
              var temp2 = (1/u*360)*(Math.PI/180);
              for(var i=0; i&lt;u; i++)
              {
                  ctx.rotate(temp2);
                  ctx.fillRect(r, -w/2, w, w);
              }
          }
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="main" onload="start()"&gt;
  &lt;canvas style="border:1px #000000 solid;" width="0" height="0" id="outputCanvas"&gt;Canvas not supported...&lt;/canvas&gt;
  &lt;div id="info"&gt; &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But because I don't have a formula for the solution, I use a while-loop to get closer and closer to the solution (until it has reached zero because of float-inaccuracy), that's why it's quite slow.
  So, what <strong>formula</strong> can be used to calculate the width of the next square inside the (thought) circle and, if necessary, how could the code be optimized elsewhere?</p>