roadtolarissa

Adam Pearce

Dragon Curve

Another fractal with d3. Since the lines aren’t space filling after a finite number of iterations, I’ve added squares to capture mouse events and colored them to hint at the direction the line will turn. This fractal also looks quite messy if different parts of it exist at different iterations. To handle this, squares to create the next level only appear once all the visible squares on the current level have been touched.

Using canvas instead of SVG would be have allowed this to handle many more points before slowing the page down. I’m not sure how to do that and preserve the simplicity at the heart of the current code:

function drawLine(a, b, θ){
  svg.append('path').attr('d', ['M', a, 'L', b].join(''))
      .on('mouseover', function(){
        //on mouseover, draw two new lines
        var ℓ = length(a, b)/(2*Math.sqrt(2))

        var θ1 = (θ - 45) % 360
        var b1 = extendPoint(a, ℓ, θ1)
        drawLine(a, b1, θ1)

        var θ2 = (θ - 135) % 360
        var b2 = extendPoint(b, ℓ, θ2)
        drawLine(b, b2, θ2)

        function extendPoint(a, ℓ, θ){
          return [a[0] + ℓ*Math.sin(θ*π/180), a[1] + ℓ*Math.cos(θ*π/180)]
        }
      })
}