Added fractal tree

1 files changed, 55 insertions, 0 deletions

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()