feat: twin dragon curve

algorithms/heighway.js → algorithms/dragon.js

@@ -4,7 +4,7 @@
  * @param {Point2D} end
  * @returns {Point2D[]}
  */
-function simpleHeighway(start, end) {
+function simpleDragon(start, end) {
     const [x1, y1] = start;
     const [x2, y2] = end;
 
@@ -23,8 +23,7 @@ function simpleHeighway(start, end) {
  * @param {number} step
  * @returns {Point2D[]}
  */
-function heighway(start, end, step) {
-    console.assert(step >= 0);
+function dragonCurve(start, end, step) {
     /**
      *
      * @param {Point2D[]} result
@@ -36,10 +35,10 @@ function heighway(start, end, step) {
 
         const segments = result.flatMap((point, index, thisPath) => {
             if (index === thisPath.length - 1) return [];
-            if (index === 0) return simpleHeighway(point, thisPath[index + 1]);
+            if (index === 0) return simpleDragon(point, thisPath[index + 1]);
             if (index % 2 === 0)
-                return simpleHeighway(point, thisPath[index + 1]).slice(1);
-            return simpleHeighway(thisPath[index + 1], point)
+                return simpleDragon(point, thisPath[index + 1]).slice(1);
+            return simpleDragon(thisPath[index + 1], point)
                 .reverse()
                 .slice(1);
         });
@@ -53,22 +52,21 @@ function heighway(start, end, step) {
 /**
  *
  * @param {CanvasRenderingContext2D} context
+ * @param {[number, string][]} colors
  * @param {Point2D} start
  * @param {Point2D} end
  * @param {number} step
  */
-function drawHeighwayDrachen(context, start, end, step) {
+function drawDragonCurve(context, colors, start, end, step) {
     context.beginPath();
-    const points = heighway(start, end, step);
+    const points = dragonCurve(start, end, step);
     const linearGradient = context.createLinearGradient(
         points[0][0],
         points[0][1],
         points[points.length - 1][0],
         points[points.length - 1][1]
     );
-    linearGradient.addColorStop(0, "red");
-    linearGradient.addColorStop(0.5, "blue");
-    linearGradient.addColorStop(1, "purple");
+    colors.forEach(([key, val]) => linearGradient.addColorStop(key, val));
 
     points.forEach((point, index) => {
         if (index === 0) {

draw/heighway-dragon.js → draw/dragon-curve.js

@@ -2,7 +2,7 @@ function draw () {
     /**
      * @type {HTMLCanvasElement}
      */
-    const canvas = document.getElementById("heighway-drachen");
+    const canvas = document.getElementById("dragon");
     const { width } = canvas.parentElement.getBoundingClientRect();
     const w = width,
         h = width * 3/4;
@@ -15,7 +15,7 @@ function draw () {
         setTimeout(() => {
             ctx.clearRect(0, 0, w, h);
             const t = 1/5;
-            drawHeighwayDrachen(ctx, [w * t, h / 3], [w * (1 - t), h / 3], iteration);
+            drawDragonCurve(ctx, [[0, "red"], [0.5, "blue"], [1, "violet"]], [w * t, h / 3], [w * (1 - t), h / 3], iteration);
         }, iteration * 1000);
     }
 }

draw/twin-dragon-curve.js

@@ -0,0 +1,25 @@
+function draw() {
+    /**
+     * @type {HTMLCanvasElement}
+     */
+    const canvas = document.getElementById("twin-dragon");
+    const { width } = canvas.parentElement.getBoundingClientRect();
+    const w = width,
+        h = width * Math.SQRT2;
+    canvas.width = w;
+    canvas.height = h;
+
+    const ctx = canvas.getContext("2d");
+
+    for (let iteration = 0; iteration <= 20; iteration++) {
+        setTimeout(() => {
+            ctx.clearRect(0, 0, w, h);
+            const t = 1 / 5;
+            drawDragonCurve(ctx, [[0, "red"]], [w * t, h / 3], [w * (1 - t), h / 3], iteration);
+            drawDragonCurve(ctx, [[0, "dodgerblue"]], [w * (1 - t), h / 3], [w * t, h / 3], iteration);
+        }, iteration * 1000);
+    }
+}
+
+draw();
+document.getElementById("replay").addEventListener("click", draw);

index.html

@@ -18,7 +18,8 @@ <h2>Made by <em><a href="https://github.com/duong755">duong755</a></em></h2>
         <li><a href="./pages/koch-antisnowflake.html">Koch antisnowflake</a></li>
         <li><a href="./pages/minkowski-sausage.html">Minkowski sausage</a></li>
         <li><a href="./pages/minkowski-island.html">Minkowski island</a></li>
-        <li><a href="./pages/heighway-dragon.html">Heighway dragon</a></li>
+        <li><a href="./pages/dragon-curve.html">Dragon curve</a></li>
+        <li><a href="./pages/twin-dragon-curve.html">Twin dragon curve</a></li>
         <li><a href="./pages/sierpinski-arrowhead-curve.html">Sierpiński arrowhead curve</a></li>
         <li><a href="./pages/sierpinski-triangle.html">Sierpiński triangle</a></li>
         <li><a href="./pages/sierpinski-pedal-triangle.html">Sierpiński pedal triangle</a></li>

pages/heighway-dragon.html → pages/dragon-curve.html

@@ -4,19 +4,19 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Heighway dragon</title>
+    <title>Dragon curve</title>
     <link rel="stylesheet" href="../fractals.css" />    
 </head>
 
 <body>
     <a href="/" class="home">&larr;</a>
     <div class="container">
         <button type="button" id="replay">&#8635; Replay</button>
-        <canvas id="heighway-drachen"></canvas>
+        <canvas id="dragon"></canvas>
     </div>
     <script src="../algorithms/helpers.js"></script>
-    <script src="../algorithms/heighway.js"></script>
-    <script src="../draw/heighway-dragon.js"></script>
+    <script src="../algorithms/dragon.js"></script>
+    <script src="../draw/dragon-curve.js"></script>
 </body>
 
 </html>

pages/twin-dragon-curve.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twin dragon curve</title>
+    <link rel="stylesheet" href="../fractals.css" />    
+</head>
+
+<body>
+    <a href="/" class="home">&larr;</a>
+    <div class="container">
+        <button type="button" id="replay">&#8635; Replay</button>
+        <canvas id="twin-dragon"></canvas>
+    </div>
+    <script src="../algorithms/helpers.js"></script>
+    <script src="../algorithms/dragon.js"></script>
+    <script src="../draw/twin-dragon-curve.js"></script>
+</body>
+
+</html>