The Dragon Curve

Depth:

The HTML file:

<html>
<body>

<h1>The Dragon Curve</h1>
<canvas id="dragon" height="500" width="500" style="border:2px solid #000000;"></canvas>
<p>
Depth: <input id="depth", type="text" size=4 onchange = "Redisplay()"></input>

<script src="dragon.js"></script>

<script type="text/javascript">
    let canvas = document.getElementById('dragon');
    let width = canvas.width;
    let height = canvas.height;

    let lines = []
    let depth = 10 ;

    let ctx = canvas.getContext('2d');

    let depthButton = document.getElementById("depth");
    depthButton.value = depth;

    Reset();

    function Reset() {
        lines =  SetUP(width, height) ;

        for(let i = 0; i < depth; i++) {
            lines = Dragon(lines);
        }
        Display(lines, ctx, width, height);
    }

    function Redisplay() {

         depth = depthButton.value;
         Reset();
    }
</script>
</body>
</html>

dragon.js

"use strict"

class Point {
   #x =0;
   #y =0;

   constructor(x, y) {
      this.#x = x;
      this.#y = y;
   }

   X() {
      return this.#x;
   }

   Y() {
      return this.#y;
   }

   Move(ctx) {
       ctx.moveTo(this.#x, this.#y);
   }

   Line(ctx) {
       ctx.lineTo(this.#x, this.#y);
   }
}


function SetUP(width, height) {
   lines = [];
   lines.push(new Point(width*.3,height*.4))
   lines.push(new Point(width*.8,height*.8))

   return lines;
}

function DrawLines(lines, ctx) {
   let i;

   ctx.beginPath();
   lines[0].Move(ctx);

   for(i =1; i < lines.length; i++) {
      lines[i].Line(ctx);
   }
   ctx.stroke();
}

function Display(lines, ctx, width, height) {
    ctx.clearRect(0,0, width, height);
    DrawLines(lines, ctx);
}

function AddPoint(p1, p2, dir) {
   // find the center of the line.
   let cx = (p2.X()+p1.X())/2;
   let cy = (p2.Y()+p1.Y())/2;

   // find dx, dy
   let dx = p2.X()-p1.X();
   let dy = p2.Y()-p1.Y();

   let nx, ny;

   if (dir == 0) {
       nx = cx + dy/2;
       ny = cy - dx/2;
   } else {
       nx = cx - dy/2;
       ny = cy + dx/2;
   }

   return new Point(nx, ny);
}

function Dragon(lines) {
   let newLines = [];

   let dir=0;

   newLines.push(lines[0]);
   for(let i = 1; i < lines.length; i++) {
       newLines.push(AddPoint(lines[i-1], lines[i], dir));
       newLines.push(lines[i]);

       if (dir == 1) {
           dir = 0;
       } else {
           dir = 1;
       }
   }

   return newLines;
}