Fractal Simulator<\/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>Fractal Simulator<\/h1>\n <div class=\"controls\">\n <label for=\"fractal\">Fractal:<\/label>\n <select id=\"fractal\">\n <option value=\"sierpinski\">Sierpinski Triangle<\/option>\n <option value=\"koch\">Koch Curve<\/option>\n <option value=\"cesaro\">Cesaro Fractal<\/option>\n <\/select>\n\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 <\/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 fractalSelect = document.getElementById('fractal');\n const generateButton = document.getElementById('generate');\n const formulaText = document.getElementById('formulaText');\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 (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 await sleep(delay);\n await drawKoch(xA, yA, xC, yC, depth - 1, delay);\n await sleep(delay);\n await drawKoch(xC, yC, xB, yB, depth - 1, delay);\n await sleep(delay);\n await drawKoch(xB, yB, x2, y2, depth - 1, delay);\n }\n\n async function drawCesaro(x1, y1, x2, y2, depth, angle, delay) {\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 const dist = Math.sqrt(dx * dx + dy * dy);\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 + dist \/ 3 * Math.cos((angle * Math.PI) \/ 180);\n const yC = yA + dist \/ 3 * Math.sin((angle * Math.PI) \/ 180);\n\n await drawCesaro(x1, y1, xA, yA, depth - 1, angle, delay);\n await sleep(delay);\n await drawCesaro(xA, yA, xC, yC, depth - 1, angle, delay);\n await sleep(delay);\n await drawCesaro(xC, yC, xB, yB, depth - 1, angle, delay);\n await sleep(delay);\n await drawCesaro(xB, yB, x2, y2, depth - 1, angle, delay);\n }\n\n function generateFractal() {\n const depth = parseInt(depthSlider.value);\n const delay = parseInt(speedInput.value);\n const fractal = fractalSelect.value;\n\n depthValue.textContent = depth;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.strokeStyle = '#007acc';\n ctx.lineWidth = 1;\n\n if (fractal === 'sierpinski') {\n formulaText.textContent = \"Sierpinski Triangle: Constructed using iterative or chaos methods.\";\n \/\/ Existing Sierpinski drawing logic here\n } else if (fractal === 'koch') {\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 } else if (fractal === 'cesaro') {\n formulaText.textContent = \"Cesaro Fractal: Similar to Koch curve with custom angles.\";\n drawCesaro(50, canvas.height \/ 2, canvas.width - 50, canvas.height \/ 2, depth, 85, delay);\n }\n }\n\n depthSlider.addEventListener('input', () => {\n depthValue.textContent = depthSlider.value;\n });\n\n generateButton.addEventListener('click', generateFractal);\n\n \/\/ Initial render\n generateFractal();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Fractal Simulator Fractal Simulator Fractal: Sierpinski TriangleKoch CurveCesaro Fractal Depth: 5 Speed (ms): Generate Formula will appear here…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-420","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts\/420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=420"}],"version-history":[{"count":2,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts\/420\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts\/420\/revisions\/422"}],"wp:attachment":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":420,"date":"2024-12-31T09:58:31","date_gmt":"2024-12-31T09:58:31","guid":{"rendered":"https:\/\/www.qrngua.website\/?p=420"},"modified":"2025-01-01T10:18:54","modified_gmt":"2025-01-01T10:18:54","slug":"420","status":"publish","type":"post","link":"https:\/\/www.qrngua.website\/?p=420","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Fractal Simulator<\/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>Fractal Simulator<\/h1>\n <div class=\"controls\">\n <label for=\"fractal\">Fractal:<\/label>\n <select id=\"fractal\">\n <option value=\"sierpinski\">Sierpinski Triangle<\/option>\n <option value=\"koch\">Koch Curve<\/option>\n <option value=\"cesaro\">Cesaro Fractal<\/option>\n <\/select>\n\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 <\/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 fractalSelect = document.getElementById('fractal');\n const generateButton = document.getElementById('generate');\n const formulaText = document.getElementById('formulaText');\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 (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 await sleep(delay);\n await drawKoch(xA, yA, xC, yC, depth - 1, delay);\n await sleep(delay);\n await drawKoch(xC, yC, xB, yB, depth - 1, delay);\n await sleep(delay);\n await drawKoch(xB, yB, x2, y2, depth - 1, delay);\n }\n\n async function drawCesaro(x1, y1, x2, y2, depth, angle, delay) {\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 const dist = Math.sqrt(dx * dx + dy * dy);\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 + dist \/ 3 * Math.cos((angle * Math.PI) \/ 180);\n const yC = yA + dist \/ 3 * Math.sin((angle * Math.PI) \/ 180);\n\n await drawCesaro(x1, y1, xA, yA, depth - 1, angle, delay);\n await sleep(delay);\n await drawCesaro(xA, yA, xC, yC, depth - 1, angle, delay);\n await sleep(delay);\n await drawCesaro(xC, yC, xB, yB, depth - 1, angle, delay);\n await sleep(delay);\n await drawCesaro(xB, yB, x2, y2, depth - 1, angle, delay);\n }\n\n function generateFractal() {\n const depth = parseInt(depthSlider.value);\n const delay = parseInt(speedInput.value);\n const fractal = fractalSelect.value;\n\n depthValue.textContent = depth;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.strokeStyle = '#007acc';\n ctx.lineWidth = 1;\n\n if (fractal === 'sierpinski') {\n formulaText.textContent = \"Sierpinski Triangle: Constructed using iterative or chaos methods.\";\n \/\/ Existing Sierpinski drawing logic here\n } else if (fractal === 'koch') {\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 } else if (fractal === 'cesaro') {\n formulaText.textContent = \"Cesaro Fractal: Similar to Koch curve with custom angles.\";\n drawCesaro(50, canvas.height \/ 2, canvas.width - 50, canvas.height \/ 2, depth, 85, delay);\n }\n }\n\n depthSlider.addEventListener('input', () => {\n depthValue.textContent = depthSlider.value;\n });\n\n generateButton.addEventListener('click', generateFractal);\n\n \/\/ Initial render\n generateFractal();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Fractal Simulator Fractal Simulator Fractal: Sierpinski TriangleKoch CurveCesaro Fractal Depth: 5 Speed (ms): Generate Formula will appear here…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-420","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts\/420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=420"}],"version-history":[{"count":2,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts\/420\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=\/wp\/v2\/posts\/420\/revisions\/422"}],"wp:attachment":[{"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qrngua.website\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}