title: Creating a rectangle filled with triangles
body: <p>I'm doing this in JavaScript ( SVG or Canvas ) but I'm really just looking for pseudocode for how somebody could accomplish this:</p>
  
  <p>If given a rectangle, how can you fill it with various sized, non-overlapping triangles similar to this picture:
  <a href="http://imgur.com/5XOxpjB" rel="nofollow">http://imgur.com/5XOxpjB</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is what I came up with for those that are interested. I used D3.js which has a great delaunay function to do this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var width = 360;
  var height = 220;
  
  var vertices = d3.range(100).map(function (d) {
      return [Math.random() * width, Math.random() * height];
  });
  
  // place coordinates in the corners
  [
      [0, 0],
      [width, 0],
      [0, height],
      [width, height]
  ].forEach(function (d) {
      vertices.push(d);
  });
  
  // add the temporary coordinates that will follow mousemove
  vertices.unshift([0, 0]);
  
  var svg = d3.select("#main").append("svg")
      .style("width", width + "px")
      .style("height", height + "px")
      .on("mousemove", function () {
      vertices[0] = d3.mouse(this);
      draw();
  })
      .on("click", function () {
      vertices.push(d3.mouse(this));
  });
  
  var path = svg.append("g").selectAll("path");
  
  draw();
  
  function draw() {
      path = path.data(d3.geom.delaunay(vertices).map(function (d) {
          return "M" + d.join("L") + "Z";
      }), String);
      path.exit().remove();
      path.enter().append("path").attr("class", function (d, i) {
          return "q" + (i % 9) + "-9";
      }).attr("d", String);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#main {
      position: relative;
      width: 360px;
      height: 220px;
      border: 1px solid #ddd;
  }
  path {
      fill: #fff;
      stroke: steelblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;div id="main"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>