diff options
| author | Charles Cabergs <me@cacharle.xyz> | 2020-11-03 13:36:36 +0100 |
|---|---|---|
| committer | Charles Cabergs <me@cacharle.xyz> | 2020-11-03 13:36:36 +0100 |
| commit | 383fe7e3f29f366b504b6a3d4a52fd81cb0869b2 (patch) | |
| tree | 42431018048c8d9670e84ec1063ace3a811c443a /utils | |
| parent | 0bf460197e9d5a477f8ec5072e482203530bcba9 (diff) | |
| download | cacharle.xyz-383fe7e3f29f366b504b6a3d4a52fd81cb0869b2.tar.gz cacharle.xyz-383fe7e3f29f366b504b6a3d4a52fd81cb0869b2.tar.bz2 cacharle.xyz-383fe7e3f29f366b504b6a3d4a52fd81cb0869b2.zip | |
Added fractal tree
Diffstat (limited to 'utils')
| -rw-r--r-- | utils/fractal_tree/index.html | 43 | ||||
| -rw-r--r-- | utils/fractal_tree/script.js | 55 |
2 files changed, 98 insertions, 0 deletions
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 @@ +<!DOCTYPE html> + +<html> + <head> + <title>cacharle - fractal tree</title> + <link rel="stylesheet" type="text/css" href="../../style.css"/> + <meta charset="utf-8"/> + <link rel="icon" type="image/png" href="../../favicon.png" /> + <style> + .settings-item { + margin-top: 10px; + display: flex; + justify-content: flex-start; + align-items: center; + } + .settings-item label { + margin-right: 5px; + } + .settings-item input { + min-width: 200px; + } + </style> + </head> + + <body><div id="page-wrapper"> + <h1>fractal tree</h1> + + <canvas width="500" height="500" id="tree-canvas"></canvas> + + <div class="settings"> + <div class="settings-item"> + <label>depth</label> + <input id="depth" min="1" max="11" value="9" type="range"/> + </div> + <div class="settings-item"> + <label>angle</label> + <input id="angle" min="1" max="180" value="45" type="range"/> + </div> + </div> + + </div></body> + <script src="script.js" type="text/javascript"></script> +</html> 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() |