From 0bf460197e9d5a477f8ec5072e482203530bcba9 Mon Sep 17 00:00:00 2001 From: Charles Cabergs Date: Tue, 3 Nov 2020 12:54:23 +0100 Subject: Added sierpinski triangle --- utils/sierpinski_triangle/index.html | 37 +++++++++++++++++++++++++ utils/sierpinski_triangle/script.js | 52 ++++++++++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 utils/sierpinski_triangle/index.html create mode 100644 utils/sierpinski_triangle/script.js (limited to 'utils') 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 @@ + + + + + cacharle - sierpinski triangle + + + + + + +

sierpinski triangle

+ +

+ depth + +

+ +

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