{"id":10094,"date":"2025-09-19T14:10:18","date_gmt":"2025-09-19T12:10:18","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=10094"},"modified":"2025-09-19T14:10:19","modified_gmt":"2025-09-19T12:10:19","slug":"treillis-simulateur","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=10094","title":{"rendered":"Treillis : simulateur"},"content":{"rendered":"  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph\/distrib\/jsxgraph.css\">\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.11.1\/distrib\/jsxgraphcore.js\"><\/script>\r\n\r\n  <script>\r\n    window.MathJax = {\r\n      tex: {\r\n        inlineMath: [ ['$','$'], [\"\\\\(\",\"\\\\)\"] ],\r\n        displayMath: [ ['$$','$$'], [\"\\\\[\",\"\\\\]\"] ],\r\n        packages: ['base', 'ams']\r\n      },\r\n      options: {\r\n        ignoreHtmlClass: 'tex2jax_ignore',\r\n        processHtmlClass: 'tex2jax_process'\r\n      }\r\n    };\r\n    <\/script>\r\n  <script type=\"text\/javascript\" id=\"MathJax-script\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/mathjax@3\/es5\/tex-mml-chtml.js\"> <\/script>\r\n  <style>\r\n    #container {\r\n      display: flex;\r\n      gap: 20px;\r\n    }\r\n    #boardTree {\r\n      width: 700px;\r\n      height: 700px;\r\n    }\r\n    #boardHist {\r\n      width: 300px;\r\n      height: 700px;\r\n    }\r\n    #controls {\r\n      margin-bottom: 10px;\r\n    }\r\n\tlabel {\r\n\t\tcolor:white;}\r\n  <\/style>\r\n\r\n<div id=\"controls\">\r\n  <label>$\u00c9tapes :$<\/label><input type=\"number\" id=\"steps\" value=\"4\" min=\"1\" max=\"20\">\r\n  <label>$\\textrm{Probabilit\u00e9 de mont\u00e9e :}$<\/label><input type=\"number\" id=\"prob\" value=\"0.5\" step=\"0.01\" min=\"0\" max=\"1\">\r\n  <label>$Simulations :$ <\/label><input type=\"number\" id=\"sims\" value=\"200\" min=\"200\" step=\"250\" max=\"10000\">\r\n  <button onclick=\"buildBoards()\">Tracer<\/button>\r\n  <button onclick=\"startSimulation()\">Start<\/button>\r\n  <label><input type=\"checkbox\" id=\"showNormal\" checked> Afficher la loi normale<\/label>\r\n\r\n<\/div>\r\n\r\n<div id=\"container\">\r\n  <div id=\"boardTree\" class=\"jxgbox\"><\/div>\r\n  <div id=\"boardHist\" class=\"jxgbox\"><\/div>\r\n  <p style=\"color:#AE181E;position:absolute;top:110px;left:50px;\" >$\\textrm{Simulation d&#8217;un  processus binaire sym\u00e9trique}$<\/p>\r\n\r\n<\/div>\r\n\r\n<script>\r\nJXG.Options.text.useMathJax = true;\r\n  let boardTree, boardHist;\r\n  let nodesByLevel = [];\r\n  let histBars = [], histTexts = [];\r\n  let counts = [];\r\n  let T = 4, p = 0.5, sims = 1000;\r\n\r\n  function clearBoard(board) {\r\n    if (!board) return;\r\n    JXG.JSXGraph.freeBoard(board);\r\n  }\r\n\r\n\/\/\r\n\r\n\r\n  \/\/ Construire l\u2019arbre compress\u00e9\r\n  function buildTree(T) {\r\n    const dx = 1, dy = 1;\r\n    nodesByLevel = [];\r\n    const start = boardTree.create('point', [0, 0], {name:'', size:2, fixed:true,color:'#AE181E'});\r\n    nodesByLevel.push([start]);\r\n    boardHist.renderer.container.style.backgroundColor = 'gainsboro';\r\n    boardTree.renderer.container.style.backgroundColor = 'gainsboro';\r\n    for (let i = 1; i <= T; i++) {\r\n      const level = [];\r\n      for (let j = -i; j <= i; j += 2) {\r\n        const pt = boardTree.create('point', [i*dx, j*dy], {name:'', size:2, fixed:true, color:\"#AE181E\",shadow:true});\r\n        level.push(pt);\r\n      }\r\n      nodesByLevel.push(level);\r\n    }\r\n  }\r\n\r\n  \/\/ Histogramme align\u00e9 avec les feuilles\r\n  function buildEmptyHistogram(T) {\r\n    histBars = [];\r\n    histTexts = [];\r\n    counts = new Array(T+1).fill(0);\r\n\r\n    const barHeight = 0.4;\r\n    const leftX = 0.02;\r\n    const leaves = nodesByLevel[T];\r\n\r\n    for (let k = 0; k <= T; k++) {\r\n      const y = leaves[k].Y();\r\n      const poly = boardHist.create('polygon', [\r\n        [leftX, y - barHeight\/2],\r\n        [leftX + 0.0001, y - barHeight\/2],\r\n        [leftX + 0.0001, y + barHeight\/2],\r\n        [leftX, y + barHeight\/2]\r\n      ], { fillColor: '# bluecadet', vertices: { visible: false }, borders: { strokeWidth: 1 } });\r\n\r\n      const txt = boardHist.create('text', [leftX + 0.05, y,\r\n        `\\\\(l_{${k}}: 0\\\\)`], { anchorX: 'left', fixed: true });\r\n      histBars.push(poly);\r\n      histTexts.push(txt);\r\n    }\r\n    boardHist.create('text', [0.6, leaves[0].Y() + 8.5,\r\n      '$$Histogramme$$'], { fixed: true, strokeColor: '#AE181E' });\r\n  }\r\n\r\n  function buildBoards() {\r\n    T = parseInt(document.getElementById('steps').value);\r\n    p = parseFloat(document.getElementById('prob').value);\r\n    sims = parseInt(document.getElementById('sims').value);\r\n\r\n    clearBoard(boardTree);\r\n    clearBoard(boardHist);\r\n\r\n    \/\/ bornes du tree et histogramme\r\n    boardTree = JXG.JSXGraph.initBoard('boardTree', {\r\n      boundingbox: [-0.5, T + 1, T + 1.5, -(T + 1)],\r\n      keepaspectratio: false,  axis: false, showNavigation: false, showCopyright: false\r\n    });\r\n\t\r\n\r\n    boardHist = JXG.JSXGraph.initBoard('boardHist', {\r\n      boundingbox: [-0.2, T + 1, 1.2, -(T + 1)],\r\n      axis: false, showNavigation: false, showCopyright: false\r\n    });\r\n\r\n    buildTree(T);\r\n    buildEmptyHistogram(T);\r\n  }\r\n\r\n  \/\/ simulation d\u2019un chemin\r\n  function simulateOnePath() {\r\n    let y = 0, upCount = 0;\r\n    let pathPoints = [nodesByLevel[0][0]];\r\n\r\n    for (let i = 1; i <= T; i++) {\r\n      if (Math.random() < p) {\r\n        y += 1; upCount++;\r\n      } else {\r\n        y -= 1;\r\n      }\r\n      const index = (i + y) \/ 2;\r\n      pathPoints.push(nodesByLevel[i][index]);\r\n    }\r\n\r\n    \/\/ illuminer le chemin\r\n    for (let i = 0; i < pathPoints.length - 1; i++) {\r\n      const seg = boardTree.create('line', [pathPoints[i], pathPoints[i+1]], {\r\n        straightFirst: false, straightLast: false,\r\n        strokeColor: 'cadetBlue', \r\n\t\tstrokeWidth: 2,\r\n\t\tshadow:true,\r\n\t\tlastArrow:true\r\n      });\r\n      setTimeout(()=> boardTree.removeObject(seg), 500);\r\n    }\r\n\r\n    return upCount;\r\n  }\r\n\r\n  function updateHistogram() {\r\n    const maxCount = Math.max(...counts, 1);\r\n    const leaves = nodesByLevel[T];\r\n    for (let k = 0; k <= T; k++) {\r\n      const y = leaves[k].Y();\r\n      const ratio = counts[k] \/ maxCount;\r\n      const width = ratio * 0.8;\r\n\r\n      histBars[k].vertices[1].moveTo([0.02 + width, y - 0.2]);\r\n      histBars[k].vertices[2].moveTo([0.02 + width, y + 0.2]);\r\n\r\n      histTexts[k].setText(`\\\\(l_{${k}}: ${(counts[k]\/sims).toFixed(3)}\\\\)`);\r\n    }\r\n    boardHist.update();\r\n  }\r\n\r\nfunction drawNormalCurve() {\r\n  const show = document.getElementById('showNormal').checked;\r\n  if (!show) return;\r\n\r\n  const leaves = nodesByLevel[T];\r\n\r\n  \/\/ Calcul empirique de l'esp\u00e9rance et de la variance\r\n  let total = 0, totalSq = 0;\r\n  for (let k = 0; k <= T; k++) {\r\n    total += k * counts[k];\r\n    totalSq += k * k * counts[k];\r\n  }\r\n  const mean = total \/ sims;\r\n  const variance = totalSq \/ sims - mean * mean;\r\n  const sigma = Math.sqrt(variance);\r\n\r\n  \/\/ Trac\u00e9 de la densit\u00e9 normale (rotation verticale)\r\n  const curvePoints = [];\r\n  const maxDensity = 1 \/ (sigma * Math.sqrt(2 * Math.PI)); \/\/ densit\u00e9 max th\u00e9orique\r\n\r\n  for (let k = 0; k <= T; k += 0.1) {\r\n    const density = (1 \/ (sigma * Math.sqrt(2 * Math.PI))) *\r\n                    Math.exp(-Math.pow(k - mean, 2) \/ (2 * sigma * sigma));\r\n\r\n    const y = leaves[Math.round(k)].Y();\r\n    const x = 0.02 + (density \/ maxDensity) * 0.8; \/\/ normalis\u00e9 \u00e0 la largeur max\r\n\r\n    curvePoints.push([x, y]);\r\n  }\r\n\r\n  boardHist.create('curve', [curvePoints.map(p => p[0]), curvePoints.map(p => p[1])], {\r\n    strokeColor: 'green',\r\n    strokeWidth: 2,\r\n    fixed: true\r\n  });\r\n}\r\n\r\nfunction startSimulation() {\r\n  counts.fill(0);\r\n  let i = 0;\r\n\r\n  function step() {\r\n    if (i >= sims) {\r\n      drawNormalCurve();\r\n      return;\r\n    }\r\n    const upCount = simulateOnePath();\r\n    counts[upCount]++;\r\n    updateHistogram();\r\n    i++;\r\n    if (sims <= 500) {\r\n      setTimeout(step, 20); \/\/ animation visible pour petits n\r\n    } else {\r\n      step(); \/\/ rapide pour grands n\r\n    }\r\n  }\r\n\r\n  step();\r\n}\r\n\r\n\/\/ Initial draw\r\nbuildBoards();\r\n<\/script>\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10094","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10094"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10094\/revisions"}],"predecessor-version":[{"id":10095,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10094\/revisions\/10095"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}