Fractale by the Tall Guy<\/title>\n <style>\n body {\n background-color: white;\n font-family: Arial, sans-serif;\n }\n .controls {\n text-align: center;\n margin-bottom: 10px;\n }\n button {\n background-color: #4CAF50; \/* Green *\/\n border: none;\n color: white;\n padding: 10px 20px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n transition-duration: 0.4s;\n cursor: pointer;\n }\n button:hover {\n background-color: white;\n color: black;\n border: 2px solid #4CAF50;\n }\n #fractalCanvas {\n border: 1px solid black;\n margin: auto;\n display: block;\n background-color: black; \/* Fond noir pour le canvas *\/\n }\n #segmentInfo {\n text-align: center;\n margin-top: 10px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"controls\">\n <button id=\"increment\">Incr\u00e9menter les segments<\/button>\n <button id=\"decrement\">D\u00e9cr\u00e9menter les segments<\/button>\n <button id=\"reset\">R\u00e9initialiser<\/button>\n <button id=\"zoomIn\">Zoomer<\/button>\n <button id=\"zoomOut\">D\u00e9zoomer<\/button>\n <div id=\"segmentCount\">Segments: 0<\/div>\n <\/div>\n <canvas id=\"fractalCanvas\" width=\"800\" height=\"600\"><\/canvas>\n <div id=\"segmentInfo\">Nombre total de segments: 0<\/div>\n <script>\n const canvas = document.getElementById('fractalCanvas');\n const ctx = canvas.getContext('2d');\n let segmentCount = 0;\n let totalSegments = 0;\n let zoomLevel = 1;\n let offsetX = 0;\n let offsetY = 0;\n let dragging = false;\n let lastX = 0;\n let lastY = 0;\n\n function createGradient(x0, y0, x1, y1) {\n let gradient = ctx.createLinearGradient(x0, y0, x1, y1);\n gradient.addColorStop(0, 'red');\n gradient.addColorStop(0.5, 'blue');\n gradient.addColorStop(1, 'green');\n return gradient;\n }\n\n function drawKochSegment(x0, y0, x1, y1, depth) {\n if (depth === 0) {\n ctx.strokeStyle = createGradient(x0, y0, x1, y1); \/\/ Utiliser un d\u00e9grad\u00e9 pour chaque segment\n ctx.moveTo(x0, y0);\n ctx.lineTo(x1, y1);\n } else {\n let dx = x1 - x0;\n let dy = y1 - y0;\n let dist = Math.sqrt(dx * dx + dy * dy) \/ 3;\n let angle = Math.atan2(dy, dx);\n let x2 = x0 + dx \/ 3;\n let y2 = y0 + dy \/ 3;\n let x3 = x0 + dx * 2 \/ 3;\n let y3 = y0 + dy * 2 \/ 3;\n\n let xPeak = x2 + Math.cos(angle - Math.PI \/ 3) * dist;\n let yPeak = y2 + Math.sin(angle - Math.PI \/ 3) * dist;\n\n totalSegments += 4; \/\/ Incrementing total segments for each recursion\n\n drawKochSegment(x0, y0, x2, y2, depth - 1);\n drawKochSegment(x2, y2, xPeak, yPeak, depth - 1);\n drawKochSegment(xPeak, yPeak, x3, y3, depth - 1);\n drawKochSegment(x3, y3, x1, y1, depth - 1);\n }\n }\n\n function drawFractal() {\n totalSegments = 0; \/\/ Reset total segments\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.save();\n ctx.translate(canvas.width \/ 2 + offsetX, canvas.height \/ 2 + offsetY);\n ctx.scale(zoomLevel, zoomLevel);\n ctx.beginPath();\n\n let size = 400; \/\/ Augmentation de la taille initiale\n let height = size * Math.sqrt(3) \/ 2;\n let points = [\n {x: -size \/ 2, y: -height \/ 3},\n {x: 0, y: 2 * height \/ 3},\n {x: size \/ 2, y: -height \/ 3}\n ];\n\n ctx.lineWidth = Math.max(1 \/ (segmentCount + 1), 0.1); \/\/ Adjust line width based on segment count\n\n drawKochSegment(points[0].x, points[0].y, points[1].x, points[1].y, segmentCount);\n drawKochSegment(points[1].x, points[1].y, points[2].x, points[2].y, segmentCount);\n drawKochSegment(points[2].x, points[2].y, points[0].x, points[0].y, segmentCount);\n\n ctx.stroke();\n ctx.restore();\n\n document.getElementById('segmentInfo').innerText = 'Nombre total de segments: ' + totalSegments;\n }\n\n function resetFractal() {\n segmentCount = 0;\n zoomLevel = 1;\n offsetX = 0;\n offsetY = 0;\n updateSegmentCountDisplay();\n drawFractal();\n }\n\n function updateSegmentCountDisplay() {\n document.getElementById('segmentCount').innerText = 'Segments: ' + segmentCount;\n }\n\n document.getElementById('increment').addEventListener('click', function() {\n segmentCount++;\n updateSegmentCountDisplay();\n drawFractal();\n });\n\n document.getElementById('decrement').addEventListener('click', function() {\n if (segmentCount > 0) {\n segmentCount--;\n updateSegmentCountDisplay();\n drawFractal();\n }\n });\n\n document.getElementById('reset').addEventListener('click', resetFractal);\n\n document.getElementById('zoomIn').addEventListener('click', function() {\n zoomLevel *= 1.1;\n drawFractal();\n });\n\n document.getElementById('zoomOut').addEventListener('click', function() {\n zoomLevel \/= 1.1;\n drawFractal();\n });\n\n canvas.addEventListener('mousedown', function(e) {\n dragging = true;\n lastX = e.offsetX;\n lastY = e.offsetY;\n });\n\n canvas.addEventListener('mousemove', function(e) {\n if (dragging) {\n offsetX += e.offsetX - lastX;\n offsetY += e.offsetY - lastY;\n lastX = e.offsetX;\n lastY = e.offsetY;\n drawFractal();\n }\n });\n\n canvas.addEventListener('mouseup', function(e) {\n dragging = false;\n });\n\n canvas.addEventListener('mouseout', function(e) {\n dragging = false;\n });\n\n window.addEventListener('resize', function() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n drawFractal();\n });\n\n updateSegmentCountDisplay();\n drawFractal();\n <\/script>\n <p>\u00a0<\/p>\n <a href=\"index.php?Itemid=101\">Home<\/a>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Fractale by the Tall Guy Incr\u00e9menter les segments D\u00e9cr\u00e9menter les segments R\u00e9initialiser Zoomer D\u00e9zoomer Segments: 0 Nombre total de segments: 0 \u00a0 Home<\/p>\n","protected":false},"author":1,"featured_media":113,"parent":0,"menu_order":5,"comment_status":"open","ping_status":"closed","template":"page-basique-the-tall-guy","meta":{"footnotes":""},"class_list":["post-82","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":2,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages\/82\/revisions\/112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/media\/113"}],"wp:attachment":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/media?parent=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":82,"date":"2023-12-30T18:32:32","date_gmt":"2023-12-30T17:32:32","guid":{"rendered":"https:\/\/thetallguy.fr\/?page_id=82"},"modified":"2024-01-28T17:59:00","modified_gmt":"2024-01-28T16:59:00","slug":"fractale-by-the-tall","status":"publish","type":"page","link":"https:\/\/thetallguy.fr\/index.php\/fractale-by-the-tall\/","title":{"rendered":"Fractale by The Tall Guy"},"content":{"rendered":"\n\n\n\n Fractale by the Tall Guy<\/title>\n <style>\n body {\n background-color: white;\n font-family: Arial, sans-serif;\n }\n .controls {\n text-align: center;\n margin-bottom: 10px;\n }\n button {\n background-color: #4CAF50; \/* Green *\/\n border: none;\n color: white;\n padding: 10px 20px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n transition-duration: 0.4s;\n cursor: pointer;\n }\n button:hover {\n background-color: white;\n color: black;\n border: 2px solid #4CAF50;\n }\n #fractalCanvas {\n border: 1px solid black;\n margin: auto;\n display: block;\n background-color: black; \/* Fond noir pour le canvas *\/\n }\n #segmentInfo {\n text-align: center;\n margin-top: 10px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"controls\">\n <button id=\"increment\">Incr\u00e9menter les segments<\/button>\n <button id=\"decrement\">D\u00e9cr\u00e9menter les segments<\/button>\n <button id=\"reset\">R\u00e9initialiser<\/button>\n <button id=\"zoomIn\">Zoomer<\/button>\n <button id=\"zoomOut\">D\u00e9zoomer<\/button>\n <div id=\"segmentCount\">Segments: 0<\/div>\n <\/div>\n <canvas id=\"fractalCanvas\" width=\"800\" height=\"600\"><\/canvas>\n <div id=\"segmentInfo\">Nombre total de segments: 0<\/div>\n <script>\n const canvas = document.getElementById('fractalCanvas');\n const ctx = canvas.getContext('2d');\n let segmentCount = 0;\n let totalSegments = 0;\n let zoomLevel = 1;\n let offsetX = 0;\n let offsetY = 0;\n let dragging = false;\n let lastX = 0;\n let lastY = 0;\n\n function createGradient(x0, y0, x1, y1) {\n let gradient = ctx.createLinearGradient(x0, y0, x1, y1);\n gradient.addColorStop(0, 'red');\n gradient.addColorStop(0.5, 'blue');\n gradient.addColorStop(1, 'green');\n return gradient;\n }\n\n function drawKochSegment(x0, y0, x1, y1, depth) {\n if (depth === 0) {\n ctx.strokeStyle = createGradient(x0, y0, x1, y1); \/\/ Utiliser un d\u00e9grad\u00e9 pour chaque segment\n ctx.moveTo(x0, y0);\n ctx.lineTo(x1, y1);\n } else {\n let dx = x1 - x0;\n let dy = y1 - y0;\n let dist = Math.sqrt(dx * dx + dy * dy) \/ 3;\n let angle = Math.atan2(dy, dx);\n let x2 = x0 + dx \/ 3;\n let y2 = y0 + dy \/ 3;\n let x3 = x0 + dx * 2 \/ 3;\n let y3 = y0 + dy * 2 \/ 3;\n\n let xPeak = x2 + Math.cos(angle - Math.PI \/ 3) * dist;\n let yPeak = y2 + Math.sin(angle - Math.PI \/ 3) * dist;\n\n totalSegments += 4; \/\/ Incrementing total segments for each recursion\n\n drawKochSegment(x0, y0, x2, y2, depth - 1);\n drawKochSegment(x2, y2, xPeak, yPeak, depth - 1);\n drawKochSegment(xPeak, yPeak, x3, y3, depth - 1);\n drawKochSegment(x3, y3, x1, y1, depth - 1);\n }\n }\n\n function drawFractal() {\n totalSegments = 0; \/\/ Reset total segments\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.save();\n ctx.translate(canvas.width \/ 2 + offsetX, canvas.height \/ 2 + offsetY);\n ctx.scale(zoomLevel, zoomLevel);\n ctx.beginPath();\n\n let size = 400; \/\/ Augmentation de la taille initiale\n let height = size * Math.sqrt(3) \/ 2;\n let points = [\n {x: -size \/ 2, y: -height \/ 3},\n {x: 0, y: 2 * height \/ 3},\n {x: size \/ 2, y: -height \/ 3}\n ];\n\n ctx.lineWidth = Math.max(1 \/ (segmentCount + 1), 0.1); \/\/ Adjust line width based on segment count\n\n drawKochSegment(points[0].x, points[0].y, points[1].x, points[1].y, segmentCount);\n drawKochSegment(points[1].x, points[1].y, points[2].x, points[2].y, segmentCount);\n drawKochSegment(points[2].x, points[2].y, points[0].x, points[0].y, segmentCount);\n\n ctx.stroke();\n ctx.restore();\n\n document.getElementById('segmentInfo').innerText = 'Nombre total de segments: ' + totalSegments;\n }\n\n function resetFractal() {\n segmentCount = 0;\n zoomLevel = 1;\n offsetX = 0;\n offsetY = 0;\n updateSegmentCountDisplay();\n drawFractal();\n }\n\n function updateSegmentCountDisplay() {\n document.getElementById('segmentCount').innerText = 'Segments: ' + segmentCount;\n }\n\n document.getElementById('increment').addEventListener('click', function() {\n segmentCount++;\n updateSegmentCountDisplay();\n drawFractal();\n });\n\n document.getElementById('decrement').addEventListener('click', function() {\n if (segmentCount > 0) {\n segmentCount--;\n updateSegmentCountDisplay();\n drawFractal();\n }\n });\n\n document.getElementById('reset').addEventListener('click', resetFractal);\n\n document.getElementById('zoomIn').addEventListener('click', function() {\n zoomLevel *= 1.1;\n drawFractal();\n });\n\n document.getElementById('zoomOut').addEventListener('click', function() {\n zoomLevel \/= 1.1;\n drawFractal();\n });\n\n canvas.addEventListener('mousedown', function(e) {\n dragging = true;\n lastX = e.offsetX;\n lastY = e.offsetY;\n });\n\n canvas.addEventListener('mousemove', function(e) {\n if (dragging) {\n offsetX += e.offsetX - lastX;\n offsetY += e.offsetY - lastY;\n lastX = e.offsetX;\n lastY = e.offsetY;\n drawFractal();\n }\n });\n\n canvas.addEventListener('mouseup', function(e) {\n dragging = false;\n });\n\n canvas.addEventListener('mouseout', function(e) {\n dragging = false;\n });\n\n window.addEventListener('resize', function() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n drawFractal();\n });\n\n updateSegmentCountDisplay();\n drawFractal();\n <\/script>\n <p>\u00a0<\/p>\n <a href=\"index.php?Itemid=101\">Home<\/a>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Fractale by the Tall Guy Incr\u00e9menter les segments D\u00e9cr\u00e9menter les segments R\u00e9initialiser Zoomer D\u00e9zoomer Segments: 0 Nombre total de segments: 0 \u00a0 Home<\/p>\n","protected":false},"author":1,"featured_media":113,"parent":0,"menu_order":5,"comment_status":"open","ping_status":"closed","template":"page-basique-the-tall-guy","meta":{"footnotes":""},"class_list":["post-82","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":2,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/pages\/82\/revisions\/112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/media\/113"}],"wp:attachment":[{"href":"https:\/\/thetallguy.fr\/index.php\/wp-json\/wp\/v2\/media?parent=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}