From 383fe7e3f29f366b504b6a3d4a52fd81cb0869b2 Mon Sep 17 00:00:00 2001 From: Charles Cabergs Date: Tue, 3 Nov 2020 13:36:36 +0100 Subject: Added fractal tree --- generate-blog | 5 ++-- index.html | 9 +++---- utils/fractal_tree/index.html | 43 +++++++++++++++++++++++++++++++++ utils/fractal_tree/script.js | 55 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 105 insertions(+), 7 deletions(-) create mode 100644 utils/fractal_tree/index.html create mode 100644 utils/fractal_tree/script.js diff --git a/generate-blog b/generate-blog index 6aaa1be..668bad8 100755 --- a/generate-blog +++ b/generate-blog @@ -30,8 +30,7 @@ done for util_path in utils/* do - title=$(basename "$util_path") - util_dst_path="$util_path/index.html" + title=$(basename "$util_path" | tr '_' ' ') sed -i'' "// a\ -
  • $title
    • " index.html +
  • $title
    • " index.html done diff --git a/index.html b/index.html index a7aecd7..2a2f8ec 100644 --- a/index.html +++ b/index.html @@ -25,10 +25,11 @@

    Utils

    Links

    diff --git a/utils/fractal_tree/index.html b/utils/fractal_tree/index.html new file mode 100644 index 0000000..5c4adf2 --- /dev/null +++ b/utils/fractal_tree/index.html @@ -0,0 +1,43 @@ + + + + + cacharle - fractal tree + + + + + + +
    +

    fractal tree

    + + + +
    +
    + + +
    +
    + + +
    +
    + +
    + + diff --git a/utils/fractal_tree/script.js b/utils/fractal_tree/script.js new file mode 100644 index 0000000..3c658f5 --- /dev/null +++ b/utils/fractal_tree/script.js @@ -0,0 +1,55 @@ +const canvas = document.getElementById("tree-canvas") +const context = canvas.getContext("2d") + +let angle = undefined + +function tree(length, n) { + if (n === 0) + return + context.beginPath() + context.moveTo(0, 0) + context.lineTo(0, -length) + context.stroke() + + context.save() + context.translate(0, -length) + + context.save() + context.rotate(angle) + tree(length / 2, n - 1) + context.restore() + + context.save() + context.rotate(-angle) + tree(length / 2, n - 1) + context.restore() + + context.restore() +} + +const depth_input = document.getElementById("depth") +const angle_input = document.getElementById("angle") + +function draw() { + context.clearRect(0, 0, canvas.width, canvas.height) + context.save() + context.translate(canvas.width / 2, canvas.height) + angle = 2 * Math.PI * (parseInt(angle_input.value) / 360) + tree(canvas.height / 2, parseInt(depth_input.value)) + context.restore() +} + +depth_input.addEventListener("input", draw) +angle_input.addEventListener("input", draw) + +function updateCanvas() { + const canvas_size = Math.min(window.innerWidth, window.innerHeight - 250) + canvas.width = canvas_size + canvas.height = canvas_size + context.strokeStyle = "#DDDDDD" + context.lineWidth = 0.7 + draw() +} + +window.addEventListener("resize", updateCanvas) +updateCanvas() -- cgit