Niels Fabian Helge von Koch<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n background-color: #f0f8ff;\n margin: 0;\n padding: 0;\n }\n canvas {\n border: 1px solid #ccc;\n margin-top: 20px;\n }\n .controls {\n margin: 20px;\n }\n .controls label {\n margin-right: 10px;\n }\n .formula {\n margin-top: 20px;\n font-style: italic;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Niels Fabian Helge von Koch<\/h1>\n <div class=\"controls\">\n <label for=\"depth\">Depth:<\/label>\n <input type=\"range\" id=\"depth\" min=\"1\" max=\"10\" value=\"5\">\n <span id=\"depthValue\">5<\/span>\n\n <label for=\"speed\">Speed (ms):<\/label>\n <input type=\"number\" id=\"speed\" min=\"10\" max=\"1000\" value=\"100\">\n\n <button id=\"generate\">Generate<\/button>\n <button id=\"stop\">Stop<\/button>\n <\/div>\n <canvas id=\"fractalCanvas\" width=\"600\" height=\"600\"><\/canvas>\n\n <div class=\"formula\">\n <p id=\"formulaText\">Formula will appear here…<\/p>\n <\/div>\n\n <script>\n const canvas = document.getElementById('fractalCanvas');\n const ctx = canvas.getContext('2d');\n const depthSlider = document.getElementById('depth');\n const depthValue = document.getElementById('depthValue');\n const speedInput = document.getElementById('speed');\n const generateButton = document.getElementById('generate');\n const stopButton = document.getElementById('stop');\n const formulaText = document.getElementById('formulaText');\n\n let stopRequested = false;\n\n function sleep(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n }\n\n async function drawKoch(x1, y1, x2, y2, depth, delay) {\n if (stopRequested) return;\n\n if (depth === 0) {\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n return;\n }\n\n const dx = x2 - x1;\n const dy = y2 - y1;\n\n const xA = x1 + dx \/ 3;\n const yA = y1 + dy \/ 3;\n\n const xB = x1 + 2 * dx \/ 3;\n const yB = y1 + 2 * dy \/ 3;\n\n const xC = xA + (xB - xA) * Math.cos(Math.PI \/ 3) - (yB - yA) * Math.sin(Math.PI \/ 3);\n const yC = yA + (xB - xA) * Math.sin(Math.PI \/ 3) + (yB - yA) * Math.cos(Math.PI \/ 3);\n\n await drawKoch(x1, y1, xA, yA, depth - 1, delay);\n if (stopRequested) return;\n await sleep(delay);\n await drawKoch(xA, yA, xC, yC, depth - 1, delay);\n if (stopRequested) return;\n await sleep(delay);\n await drawKoch(xC, yC, xB, yB, depth - 1, delay);\n if (stopRequested) return;\n await sleep(delay);\n await drawKoch(xB, yB, x2, y2, depth - 1, delay);\n }\n\n function generateFractal() {\n const depth = parseInt(depthSlider.value);\n const delay = parseInt(speedInput.value);\n\n stopRequested = false;\n\n depthValue.textContent = depth;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.strokeStyle = '#007acc';\n ctx.lineWidth = 1;\n\n formulaText.textContent = \"Koch Curve: Divides each line into three segments and adds a triangular spike.\";\n drawKoch(50, canvas.height \/ 2, canvas.width - 50, canvas.height \/ 2, depth, delay);\n }\n\n function stopFractal() {\n stopRequested = true;\n }\n\n depthSlider.addEventListener('input', () => {\n depthValue.textContent = depthSlider.value;\n });\n\n generateButton.addEventListener('click', generateFractal);\n stopButton.addEventListener('click', stopFractal);\n\n \/\/ Initial render\n generateFractal();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Niels Fabian Helge von Koch Niels Fabian Helge von Koch Depth: 5 Speed (ms): Generate Stop Formula will appear here…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-423","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=423"}],"version-history":[{"count":6,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/423\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/423\/revisions\/429"}],"wp:attachment":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":423,"date":"2025-01-01T10:20:14","date_gmt":"2025-01-01T10:20:14","guid":{"rendered":"https:\/\/www.qrngua.website\/?page_id=423"},"modified":"2025-01-01T10:50:58","modified_gmt":"2025-01-01T10:50:58","slug":"fractal-simulator","status":"publish","type":"page","link":"https:\/\/www.qrngua.website\/?page_id=423","title":{"rendered":"Fractal Simulator"},"content":{"rendered":"\n\n\n\n \n \n Niels Fabian Helge von Koch<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n background-color: #f0f8ff;\n margin: 0;\n padding: 0;\n }\n canvas {\n border: 1px solid #ccc;\n margin-top: 20px;\n }\n .controls {\n margin: 20px;\n }\n .controls label {\n margin-right: 10px;\n }\n .formula {\n margin-top: 20px;\n font-style: italic;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Niels Fabian Helge von Koch<\/h1>\n <div class=\"controls\">\n <label for=\"depth\">Depth:<\/label>\n <input type=\"range\" id=\"depth\" min=\"1\" max=\"10\" value=\"5\">\n <span id=\"depthValue\">5<\/span>\n\n <label for=\"speed\">Speed (ms):<\/label>\n <input type=\"number\" id=\"speed\" min=\"10\" max=\"1000\" value=\"100\">\n\n <button id=\"generate\">Generate<\/button>\n <button id=\"stop\">Stop<\/button>\n <\/div>\n <canvas id=\"fractalCanvas\" width=\"600\" height=\"600\"><\/canvas>\n\n <div class=\"formula\">\n <p id=\"formulaText\">Formula will appear here…<\/p>\n <\/div>\n\n <script>\n const canvas = document.getElementById('fractalCanvas');\n const ctx = canvas.getContext('2d');\n const depthSlider = document.getElementById('depth');\n const depthValue = document.getElementById('depthValue');\n const speedInput = document.getElementById('speed');\n const generateButton = document.getElementById('generate');\n const stopButton = document.getElementById('stop');\n const formulaText = document.getElementById('formulaText');\n\n let stopRequested = false;\n\n function sleep(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n }\n\n async function drawKoch(x1, y1, x2, y2, depth, delay) {\n if (stopRequested) return;\n\n if (depth === 0) {\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n return;\n }\n\n const dx = x2 - x1;\n const dy = y2 - y1;\n\n const xA = x1 + dx \/ 3;\n const yA = y1 + dy \/ 3;\n\n const xB = x1 + 2 * dx \/ 3;\n const yB = y1 + 2 * dy \/ 3;\n\n const xC = xA + (xB - xA) * Math.cos(Math.PI \/ 3) - (yB - yA) * Math.sin(Math.PI \/ 3);\n const yC = yA + (xB - xA) * Math.sin(Math.PI \/ 3) + (yB - yA) * Math.cos(Math.PI \/ 3);\n\n await drawKoch(x1, y1, xA, yA, depth - 1, delay);\n if (stopRequested) return;\n await sleep(delay);\n await drawKoch(xA, yA, xC, yC, depth - 1, delay);\n if (stopRequested) return;\n await sleep(delay);\n await drawKoch(xC, yC, xB, yB, depth - 1, delay);\n if (stopRequested) return;\n await sleep(delay);\n await drawKoch(xB, yB, x2, y2, depth - 1, delay);\n }\n\n function generateFractal() {\n const depth = parseInt(depthSlider.value);\n const delay = parseInt(speedInput.value);\n\n stopRequested = false;\n\n depthValue.textContent = depth;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.strokeStyle = '#007acc';\n ctx.lineWidth = 1;\n\n formulaText.textContent = \"Koch Curve: Divides each line into three segments and adds a triangular spike.\";\n drawKoch(50, canvas.height \/ 2, canvas.width - 50, canvas.height \/ 2, depth, delay);\n }\n\n function stopFractal() {\n stopRequested = true;\n }\n\n depthSlider.addEventListener('input', () => {\n depthValue.textContent = depthSlider.value;\n });\n\n generateButton.addEventListener('click', generateFractal);\n stopButton.addEventListener('click', stopFractal);\n\n \/\/ Initial render\n generateFractal();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Niels Fabian Helge von Koch Niels Fabian Helge von Koch Depth: 5 Speed (ms): Generate Stop Formula will appear here…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-423","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=423"}],"version-history":[{"count":6,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/423\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/pages\/423\/revisions\/429"}],"wp:attachment":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}