2 files changed, 89 insertions, 0 deletions
diff --git a/utils/sierpinski_triangle/index.html b/utils/sierpinski_triangle/index.html
new file mode 100644
index 0000000..036e8ac
--- /dev/null
+++ b/utils/sierpinski_triangle/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <title>cacharle - sierpinski triangle</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 {
+                margin-top: 10px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+            .settings label {
+                margin-right: 5px;
+            }
+            .settings input {
+                min-width: 200px;
+            }
+        </style>
+    </head>
+
+    <body><div id="page-wrapper">
+        <h1>sierpinski triangle</h1>
+
+        <canvas width="500" height="500" id="sierpinski-triangle"></canvas>
+
+        <div class="settings">
+            <label>depth</label>
+            <input id="depth" min="1" max="9" value="7" type="range"/>
+        </div>
+
+    </div></body>
+    <script src="script.js" type="text/javascript"></script>
+</html>
diff --git a/utils/sierpinski_triangle/script.js b/utils/sierpinski_triangle/script.js
new file mode 100644
index 0000000..6194413
--- /dev/null
+++ b/utils/sierpinski_triangle/script.js
@@ -0,0 +1,52 @@
+const canvas  = document.getElementById("sierpinski-triangle")
+const context = canvas.getContext("2d")
+
+function triangle(width, height, n) {
+    if (n === 0)
+        return
+    context.beginPath()
+    context.moveTo(width / 2, 0)
+    context.lineTo(width, height)
+    context.lineTo(0, height)
+    context.closePath()
+    context.stroke()
+
+    // top
+    context.save()
+    context.translate(width / 4, 0)
+    triangle(width / 2, height / 2, n - 1)
+    context.restore()
+
+    // bottom left
+    context.save()
+    context.translate(0, height / 2)
+    triangle(width / 2, height / 2, n - 1)
+    context.restore()
+
+    // bottom right
+    context.save()
+    context.translate(width / 2, height / 2)
+    triangle(width / 2, height / 2, n - 1)
+    context.restore()
+}
+
+const depth_input = document.getElementById("depth")
+
+function draw() {
+    context.clearRect(0, 0, canvas.width, canvas.height)
+    triangle(canvas.width - 1, canvas.height - 1, parseInt(depth_input.value))
+}
+
+depth_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()