446943615357fd68a68b by mpmckenna8

A dragon curve made using pretty much the algorithm I saw with openscad on Rosetta code. https://rosettacode.org/wiki/Dragon_curve.

Then it had to be hacked up a little bit to get it to work with d3.

This way also isn’t really optimized for showing each different unfold. Want to look into how people did it in some of the pretty animations and step throughts.

index.js

//var d3 = require('d3');
var svgwidth = 800;
var svgheight = 700;

var body = d3.select('body');

var svg = body.append('svg')
    .attr('width', svgwidth)
    .attr('height', svgheight)
    .attr('class', 'dragonContainer')

var line = d3.line()
              .x(function(d) { return d[0]; })
    .y(function(d) { return d[1]; }); 

var width = 400;
var height = svgheight - svgheight/10;

var points = [ [0,0], [width, 0 ]];
var itnum = 0;

var transtring;

var initline = svg.append('g')
                .attr('id', function(){
                    var classname = "itg" + itnum;
                    itnum += 1;
                    return classname;

                })
                .attr('transform', function(){
                    transtring =  "translate(" + (svgwidth/4) + "," +
                    (svgheight)/2 + ")";
                    return transtring;
                })
				.attr('rotation', 0);

var linecolor = "black"

var sqrt2 = Math.sqrt(2);


function dragon(selection, level) {
    if(level <= 0 ) {
  //  console.log('trying to add a line to , ', selection)

        selection.append('g')
          .attr('transform', function(){
             return 'translate(' + 0 + ', 0)'
            })
           .append('path')
           .datum(points)
           .attr('d', line)
           .attr('stroke', 'green')
           .attr('stroke-width', 9); 
 }
    else{
  //  console.log('shoule do', level)
        var newsel = selection.append('g').attr('transform', 
                'rotate(-45),'+ 'scale(' + (1/sqrt2) + ')')
        dragon(newsel, level-1)

        var secsel = selection.append('g')
        secsel
            .attr('transform', function(){
                return "translate("+ width + ", 0), rotate(-135), scale(" + 1/sqrt2 + ")"
               })
        dragon(secsel, level-1);

    }
    
}


dragon(d3.select('#itg0'), 12)

index.html

<!DOCTYPE html>
<html>
    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></script>
  </head>
  <body>
    <div id="heap">
    </div>
  <script src="index.js"></script>

  </body>

</html>