Zoomable Sierpinski Triangle

http://roadtolarissa.com/triangles/

After finishing up the petition project, I wanted to use what I learned about d3.js to create something a little more fun. After a few hours¹ of work, I had this:

//triangle centered at (cx, cy) with circumradius r
function addTriangle(cx, cy, r){
  svg.append('polygon')
    .on(mobile ? "click" : "mouseover", function(d){
      addTriangle(  cx,             cy - r/2,       r/2);     
      addTriangle(  cx - r*sin30/2, cy + r*cos30/2, r/2);     
      addTriangle(  cx + r*sin30/2, cy + r*cos30/2, r/2);

      d3.select(this).on('mouseover', function(){});
      d3.select(this).on('click', function(){
        addTriangle(cx, cy, r);});
    })
    .attr('fill', 'white')
    .attr('points', (cx)  +','+   (cy)  +' '+ 
                    (cx)  +','+   (cy)  +' '+
                    (cx)  +','+   (cy))
    .transition()
    .duration(600)
    .delay(10)
      .attr('fill', randomColor())
      .attr('points', (cx)  +','+   (cy-r)          +' '+ 
              (cx-r*sin30)  +','+   (cy + r*cos30)  +' '+
              (cx+r*sin30)  +','+   (cy + r*cos30))
}

which is currently live at the above link. There are a lot of things I’d like to add – proper mobile support, more fractal patterns, deeper zooming, and more interesting coloring – but I’ve just been clicking and scrolling around the triangles instead. It’s incredible to me that such a small snipping of code could create something so visually engaging. Even though the internet already has dozens of Sierpinski Triangles, I haven’t found any as interactive and eloquent as this one (which is because of d3.js, not anything I’ve done) so I feel ok posting it.

The most frustrating part of making this: tricking myself into think that I had forgotten everything about geometry. From about 2 AM to 3.30 AM, I was trying to find the vertices of an equilateral triangle given the circumradius and center. This is pretty easy to do with trigonometry (see lines 21-23) , but I kept getting lopsided triangles no matter how I calculated the vertices. I even ended up pulling a geometry textbook off the shelf to check that I was doing the math correctly. Eventually (and I can’t remember what lead me to this realization or why it didn’t come earlier) it dawned on me that Math.sin(x) thought x was in radians and I was entering degrees.