From f74dbbc1b358d66bad01b27322636971315065b7 Mon Sep 17 00:00:00 2001 From: duong755 Date: Sat, 30 Dec 2023 21:46:06 +0700 Subject: [PATCH] feat: twin dragon curve --- algorithms/{heighway.js => dragon.js} | 20 +++++++-------- draw/{heighway-dragon.js => dragon-curve.js} | 4 +-- draw/twin-dragon-curve.js | 25 +++++++++++++++++++ index.html | 3 ++- ...heighway-dragon.html => dragon-curve.html} | 8 +++--- pages/twin-dragon-curve.html | 22 ++++++++++++++++ 6 files changed, 64 insertions(+), 18 deletions(-) rename algorithms/{heighway.js => dragon.js} (72%) rename draw/{heighway-dragon.js => dragon-curve.js} (74%) create mode 100644 draw/twin-dragon-curve.js rename pages/{heighway-dragon.html => dragon-curve.html} (69%) create mode 100644 pages/twin-dragon-curve.html diff --git a/algorithms/heighway.js b/algorithms/dragon.js similarity index 72% rename from algorithms/heighway.js rename to algorithms/dragon.js index 67cfdeb..cac1413 100644 --- a/algorithms/heighway.js +++ b/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) { diff --git a/draw/heighway-dragon.js b/draw/dragon-curve.js similarity index 74% rename from draw/heighway-dragon.js rename to draw/dragon-curve.js index 554f58e..00fbb87 100644 --- a/draw/heighway-dragon.js +++ b/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); } } diff --git a/draw/twin-dragon-curve.js b/draw/twin-dragon-curve.js new file mode 100644 index 0000000..0a14751 --- /dev/null +++ b/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); diff --git a/index.html b/index.html index c1675f9..7a43f74 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,8 @@

Made by duong755

  • Koch antisnowflake
  • Minkowski sausage
  • Minkowski island
    • -
  • Heighway dragon
    • +
  • Dragon curve
    • +
  • Twin dragon curve
  • Sierpiński arrowhead curve
  • Sierpiński triangle
  • Sierpiński pedal triangle
    • diff --git a/pages/heighway-dragon.html b/pages/dragon-curve.html similarity index 69% rename from pages/heighway-dragon.html rename to pages/dragon-curve.html index e0469df..77a8b61 100644 --- a/pages/heighway-dragon.html +++ b/pages/dragon-curve.html @@ -4,7 +4,7 @@ - Heighway dragon + Dragon curve @@ -12,11 +12,11 @@ ←
    - +
    - - + + \ No newline at end of file diff --git a/pages/twin-dragon-curve.html b/pages/twin-dragon-curve.html new file mode 100644 index 0000000..e5b8a97 --- /dev/null +++ b/pages/twin-dragon-curve.html @@ -0,0 +1,22 @@ + + + + + + + Twin dragon curve + + + + + ← +
    + + +
    + + + + + + \ No newline at end of file