diff options
| -rwxr-xr-x | generate-blog | 5 | ||||
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | utils/fractal_tree/index.html | 43 | ||||
| -rw-r--r-- | utils/fractal_tree/script.js | 55 |
4 files changed, 105 insertions, 7 deletions
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'' "/<!--UTILSINDEX-->/ a\ - <li><a href=\"$util_dst_path\">$title</a></li>" index.html + <li><a href=\"$util_path\">$title</a></li>" index.html done @@ -25,10 +25,11 @@ <h2>Utils</h2> <ul> <!--UTILSINDEX--> -<li><a href="utils/sierpinski_triangle/index.html">sierpinski_triangle</a></li> -<li><a href="utils/rot13/index.html">rot13</a></li> -<li><a href="utils/minesweeper/index.html">minesweeper</a></li> -<li><a href="utils/langton_ant/index.html">langton_ant</a></li> +<li><a href="utils/sierpinski_triangle">sierpinski triangle</a></li> +<li><a href="utils/rot13">rot13</a></li> +<li><a href="utils/minesweeper">minesweeper</a></li> +<li><a href="utils/langton_ant">langton ant</a></li> +<li><a href="utils/fractal_tree">fractal tree</a></li> </ul> <h2>Links</h2> 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() |