{"id":9930,"date":"2025-09-10T09:32:05","date_gmt":"2025-09-10T07:32:05","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=9930"},"modified":"2025-09-10T09:32:06","modified_gmt":"2025-09-10T07:32:06","slug":"theoreme-de-pick","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=9930","title":{"rendered":"Th\u00e9or\u00e8me de Pick"},"content":{"rendered":"  <!-- JSXGraph -->\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph\/distrib\/jsxgraph.css\">\r\n  <!-- <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph\/distrib\/jsxgraphcore.js\"><\/script> -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.11.1\/distrib\/jsxgraphcore.js\"><\/script>\r\n\r\n  <!-- MathJax -->\r\n  <script>\r\n    window.MathJax = {\r\n      tex: { inlineMath: [['\\\\(', '\\\\)'], ['$', '$']] },\r\n      svg: { fontCache: 'global' }\r\n    };\r\n  <\/script>\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mathjax@3\/es5\/tex-svg.js\"><\/script>\r\n\r\n  <style>\r\n\r\n    #boxA, .jxgboxA {\r\n      width: 600px;\r\n      height: 600px;\r\n      border: none;\r\n    }\r\n    #boxB, .jxgboxB {\r\n      width: 400px;\r\n      height: 600px;\r\n      border: none;\r\n    }\r\n    .board-container {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: flex-start;\r\n      gap: 20px;\r\n      padding: 20px;\r\n    }\r\n    #undoBtn {\r\n      margin: 10px;\r\n      padding: 6px 12px;\r\n      border-radius: 6px;\r\n      border: none;\r\n      background: #AE181E;\r\n      color: white;\r\n      cursor: pointer;\r\n    }\r\n    #undoBtn:hover {\r\n      background: #7d1014;\r\n    }\r\n    .btnEx {\r\n      margin: 10px;\r\n      padding: 6px 12px;\r\n      border-radius: 6px;\r\n      border: none;\r\n      background: #AE181E;\r\n      color: white;\r\n      cursor: pointer;\r\n    }\r\n    .btnEx:hover {\r\n      background: #7d1014;\r\n    }\r\n\r\n   #resetBtn {\r\n      margin: 10px;\r\n      padding: 6px 12px;\r\n      border-radius: 6px;\r\n      border: none;\r\n      background: #AE181E;\r\n      color: white;\r\n      cursor: pointer;\r\n    }\r\n    #resetBtn:hover {\r\n      background: #7d1014;\r\n    }\r\n\r\n  <\/style>\r\n<h1> Th\u00e9or\u00e8me de PICK<\/h1>\r\n<div class=\"board-container\">\r\n <div>\r\n    <div id=\"boxA\" class=\"jxgbox jxgboxA\"><\/div>\r\n    <button id=\"undoBtn\">\u27f2 Annuler le dernier point<\/button>\r\n    <button id=\"resetBtn\">\u27f2 Reset<\/button>\r\n  <\/div>\r\n  <div id=\"boxB\" class=\"jxgbox jxgboxB\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n\r\n\/\/ --- BoardA ---\r\nlet boardA = JXG.JSXGraph.initBoard('boxA', {\r\n  boundingbox: [-5, 5, 5, -5],\r\n  axis: false,\r\n  showNavigation: false,\r\n  showCopyright: false,\r\n  showFullscreen: true,\r\n  showInfobox:false,\r\n  keepAspectRatio: true\r\n});\r\nboardA.renderer.container.style.backgroundColor = '#C3ADC3';\r\n\r\n\/\/ Grille de d\u00e9part\r\nlet intLabel, intValue;\r\nlet borderLabel, borderValue;\r\nlet pickFormula;\r\n\r\nlet gridA = boardA.create('grid', [], {\r\n  gridX: 0.5,\r\n  gridY: 0.5,\r\n  strokeColor: 'slategray',\r\n  strokeWidth: 1\r\n});\r\n\r\n\/\/ --- BoardB ---\r\nconst boardB = JXG.JSXGraph.initBoard('boxB', {\r\n  boundingbox: [-5, 5, 5, -5],\r\n  grid: false,\r\n  axis: false,\r\n  showNavigation: false,\r\n  showCopyright: false,\r\n  showFullscreen: true,\r\n  showInfobox:false,\r\n  keepAspectRatio: true\r\n});\r\nboardB.renderer.container.style.backgroundColor = '#C3ADC3';\r\nboardB.addChild(boardA);\r\n\r\nlet statsText = null; \/\/ Texte des statistiques sur boardB\r\n\r\n\/\/ Axes sur B\r\n\/\/boardB.create('axis', [[0, 0], [1, 0]], { ticks: { drawZero: true, minorTicks: 0 } });\r\n\/\/boardB.create('axis', [[0, 0], [0, 1]], { ticks: { drawZero: true, minorTicks: 0 } });\r\nboardB.create('grid', [], { gridX: 0.5, gridY: 0.5, strokeColor: '#ccc', strokeWidth: 1 });\r\n\r\n\/\/ Choix du pas\r\nboardB.create('text', [-2, 5.75, `\\\\(\\\\textrm{Espace inter-ticks : }\\\\)`], {anchorX:'middle',anchorY:'middle',fontSize:12});\r\nboardB.create('text', [0, 6, `\r\n  <div id=\"boutons\">\r\n    <label><input type=\"radio\" name=\"valeurs\" value=\"1\">\\\\( 1 \\\\)<\/label>\r\n    <label><input type=\"radio\" name=\"valeurs\" value=\"0.5\" checked >\\\\( 0.5 \\\\)<\/label>\r\n    <label><input type=\"radio\" name=\"valeurs\" value=\"0.25\">\\\\( 0.25 \\\\)<\/label>\r\n  <\/div>\r\n`], { useHtml: true, anchorX: 'left', anchorY: 'top' });\r\n\r\n\/\/ --- Treillis + Interaction ---\r\nlet pointsTreillis = [];\r\nlet selectedPoints = [];  \r\nlet segments = [];   \r\nlet currentStep = 0.5; \/\/ pas courant de la grille\r\n\r\n\/\/ Variables globales pour stocker les r\u00e9sultats\r\nlet insideCount = 0;\r\nlet borderCount = 0;\r\nlet Actif_exemple=false;\r\nlet poly=null;\r\nlet polyExt=null; \r\nconst affiche_resultat=function() {\r\n  if (poly!=null) {\r\n    boardA.removeObject(poly);\r\n    boardA.removeObject(polyExt);\r\n  }\r\n  poly = boardA.create('polygon', selectedPoints, {\r\n      fillColor: 'cornsilk',\r\n      borders: { strokeColor: '#AE181E', strokeWidth: 2 },\r\n      hasInnerPoints: true,\r\n      vertices: { color: 'blue', size: 3 },\r\n      highlight:false,\r\n      border:{highlight:false}\r\n    });\r\n    polyExt = boardA.create('polygon', selectedPoints, {\r\n      visible:false,\r\n      fillColor: 'cornsilk',\r\n      borders: { strokeColor: '#AE181E', strokeWidth: 2 },\r\n      hasInnerPoints: false,\r\n      vertices: { color: 'blue', size: 3 },\r\n      highlight:false,\r\n      border:{highlight:false}\r\n    });\r\n\r\n    \/\/ Compter points int\u00e9rieurs et sur le bord\r\n    \r\n    const { inside, border } = countPointsPolygon(poly,polyExt,  currentStep);\r\n    insideCount = inside;\r\n    borderCount = border;\r\n\r\n    if (intLabel) boardB.removeObject(intLabel);\r\n    if (intValue) boardB.removeObject(intValue);\r\n    if (borderLabel) boardB.removeObject(borderLabel);\r\n    if (borderValue) boardB.removeObject(borderValue);\r\n    if (pickFormula) boardB.removeObject(pickFormula);\r\n\r\n    intLabel = boardB.create('text', [-4.5, 4.5, `\\\\(\\\\textrm{I = Points Int\u00e9rieurs = }\\\\)`], {\r\n      fontSize: 14, anchorX: 'left', anchorY: 'top', useMathJax: true\r\n    });\r\n    intValue = boardB.create('text', [0, 4.5, `\\\\(${insideCount}\\\\)`], {\r\n      fontSize: 14, anchorX: 'left', anchorY: 'top', useMathJax: true\r\n    });\r\n\r\n    borderLabel = boardB.create('text', [-4.5, 3.5, `\\\\(\\\\textrm{B = Points de Bord = }\\\\)`], {\r\n      fontSize: 14, anchorX: 'left', anchorY: 'top', useMathJax: true\r\n    });\r\n    borderValue = boardB.create('text', [0, 3.5, `\\\\(${borderCount}\\\\)`], {\r\n      fontSize: 14, anchorX: 'left', anchorY: 'top', useMathJax: true\r\n    });\r\n\r\n    \/*pickFormula = boardB.create('text', [0, 1.5, `\\\\(A = I + \\\\frac{B}{2} - 1\\\\)`], {\r\n      fontSize: 14, anchorX: 'middle', anchorY: 'middle', useMathJax: true, color: \"#AE181E\"\r\n    });*\/\r\n    pickFormula = boardB.create('text', [0, 1.5, `\\\\(A = I + \\\\frac{B}{2} - 1 = ${insideCount +(borderCount\/2) - 1}\\\\)`], {\r\n      fontSize: 18, anchorX: 'middle', anchorY: 'middle', useMathJax: true, color: \"#AE181E\"\r\n    });    \r\n\r\n    \/\/ R\u00e9initialisation\r\n    boardB.update();\r\n}\r\n\r\n\r\nfunction generatePoints(pas) {\r\n  if (boardA!=null) {\r\n     JXG.JSXGraph.freeBoard(boardA);\r\n  }\r\n  boardA = JXG.JSXGraph.initBoard('boxA', {\r\n    boundingbox: [-5, 5, 5, -5],\r\n    axis: false,\r\n    showNavigation: false,\r\n    showCopyright: false,\r\n    showFullscreen: true,\r\n    showInfobox:false,\r\n    keepAspectRatio: true\r\n  });\r\n\r\n  gridA = boardA.create('grid', [], {\r\n      gridX: 0.5,\r\n      gridY: 0.5,\r\n      strokeColor: 'slategray',\r\n      strokeWidth: 1\r\n  });\r\n\r\n  \/\/pointsTreillis.forEach(pt => boardA.removeObject(pt));\r\n  pointsTreillis = [];\r\n\r\n  for (let x = -5; x <= 5; x += pas) {\r\n    for (let y = -5; y <= 5; y += pas) {\r\n      const pt = boardA.create('point', [x, y], {\r\n        fixed: true,\r\n        size: 1,\r\n        color: 'navy',\r\n        showInfobox: false,\r\n        name: ''\r\n      });\r\n      pt.on('down', () => {\r\n        if (!Actif_exemple) {\r\n          if (pt === selectedPoints[0] && selectedPoints.length >= 3) {\r\n            \/\/ --- Fermeture du polygone ---\r\n            affiche_resultat();\r\n            selectedPoints = [];\r\n            segments.forEach(seg => boardA.removeObject(seg));\r\n            segments = [];\r\n          } else {\r\n            \/\/ --- Ajout d\u2019un nouveau sommet ---\r\n            selectedPoints.push(pt);\r\n            pt.setAttribute({ size: 3, color: 'blue' }); \/\/ style du sommet s\u00e9lectionn\u00e9\r\n\r\n            \/\/ Tracer le segment avec le pr\u00e9c\u00e9dent\r\n            if (selectedPoints.length > 1) {\r\n              const last = selectedPoints.length - 1;\r\n              const seg = boardA.create('line', [\r\n                selectedPoints[last - 1],\r\n                selectedPoints[last]\r\n              ], {\r\n                straightFirst: false,\r\n                straightLast: false,\r\n                strokeColor: '#AE181E',\r\n                strokeWidth: 2\r\n              });\r\n              segments.push(seg);\r\n            }\r\n          }\r\n        }\r\n      });\r\n      pointsTreillis.push(pt);\r\n    }\r\n  }\r\n  boardA.update();\r\n}\r\n\r\n\/\/ G\u00e9n\u00e9ration initiale\r\ngeneratePoints(currentStep);\r\n\r\n\/\/ --- Changement du pas ---\r\ndocument.addEventListener('change', function (e) {\r\n  if (e.target.name === 'valeurs') {\r\n    currentStep = parseFloat(e.target.value); \/\/ mise \u00e0 jour du pas courant\r\n    boardA.removeObject(gridA);\r\n\r\n    gridA = boardA.create('grid', [], {\r\n      gridX: currentStep,\r\n      gridY: currentStep,\r\n      strokeColor: 'slategray',\r\n      strokeWidth: 1\r\n    });\r\n\r\n    generatePoints(currentStep);\r\n  }\r\n});\r\n\r\n\/\/ Compte points int\u00e9rieurs et sur le bord\r\nfunction countPointsPolygon(polygon, polygonExt, pas) {\r\n  let inside = 0;\r\n  let insideTot = 0;\r\n  let border = 0;\r\n  pointsTreillis.forEach(pt=> {\r\n      if (polygon.hasPoint(pt.coords.scrCoords[1], pt.coords.scrCoords[2])) {\r\n       \tinsideTot++;\r\n      }\r\n  });\r\n  pointsTreillis.forEach(pt=> {\r\n     if (polygonExt.hasPoint(pt.coords.scrCoords[1], pt.coords.scrCoords[2])) {\r\n       border++;\r\n     }\r\n  });\r\n  inside= insideTot-border;\r\n  return {inside, border};\r\n}\r\n\r\n\/\/ --- Bouton Annuler ---\r\ndocument.getElementById('undoBtn').addEventListener('click', () => {\r\n  if (selectedPoints.length > 0) {\r\n    const lastPoint = selectedPoints.pop();\r\n    boardA.removeObject(lastPoint);\r\n\r\n    if (segments.length > 0) {\r\n      const lastSeg = segments.pop();\r\n      boardA.removeObject(lastSeg);\r\n    }\r\n    boardA.update();\r\n  }\r\n});\r\n\r\n\r\ndocument.getElementById('resetBtn').addEventListener('click', () => {\r\n\tActif_exemple=false;\r\n  selectedPoints=[];\r\n\tgeneratePoints(currentStep);\r\n});\r\n\r\nthpick = boardB.create('text', [0, 6.7, () => \r\n  `\\\\(\\\\textrm{Th\u00e9or\u00e8me de Pick}\\\\)`\r\n], {\r\n  fontSize: 16,\r\n  anchorX: 'middle',\r\n  anchorY: 'middle',\r\n  useMathJax: true,\r\n  color :'#AE181E'  \r\n});\r\n\r\n\/\/boardB.update()\r\nconst exemples={\"carre\":[27,29,51,49,27],\"rectangle\":[27,29,73,71,27],\"triangle\":[27,63,93,27],\"ex1\":[27,63,93,81,71,59,49,37,27]};\r\n\r\nconst activer_ex1=function(exemple) {\r\n  Actif_exemple=true;\r\n\t\/\/ charge le premier exemple \r\n  selectedPoints=[];\r\n\tgeneratePoints(currentStep);\r\n\texemples[exemple].forEach(p=> {\r\n\t    selectedPoints[0]\r\n\t    const x=-5+parseInt(p\/11);\r\n      const y=-5+p-(11*+parseInt(p\/11));\r\n\t    const pt = boardA.create('point', [x, y], {\r\n       \tfixed: false,\r\n    \t\tsize: 3, color: 'blue',\r\n        attractorDistance:1,\r\n       \tshowInfobox: false,\r\n        attractors : pointsTreillis,\r\n       \tname: ''\r\n      });\r\n      pt.on(\"drag\",function() {affiche_resultat();});\r\n      selectedPoints.push(pt); \r\n\t});\r\n\taffiche_resultat();\r\n}\r\n  boardB.create('button', [-4,-0.5,'Activer', function() {activer_ex1(\"triangle\");} ],{cssClass:\"btnEx\",highlightCssClass: 'btnEx'});\r\n  boardB.create('text', [-1.5,-0.75, () => `\\\\(\\\\textrm{Exemple triangle}\\\\)`]);\r\n  boardB.create('button', [-4,-1.5,'Activer', function() {activer_ex1(\"rectangle\");} ],{cssClass:\"btnEx\",highlightCssClass: 'btnEx'});\r\n  boardB.create('text', [-1.5,-1.75, () => `\\\\(\\\\textrm{Exemple rectangle}\\\\)`]);\r\n  boardB.create('button', [-4,-2.5,'Activer', function() {activer_ex1(\"carre\");} ],{cssClass:\"btnEx\",highlightCssClass: 'btnEx'});\r\n  boardB.create('text', [-1.5,-2.75, () => `\\\\(\\\\textrm{Exemple carr\u00e9}\\\\)`]);\r\n  boardB.create('button', [-4,-3.5,'Activer', function() {activer_ex1(\"ex1\");} ],{cssClass:\"btnEx\",highlightCssClass: 'btnEx'});\r\n  boardB.create('text', [-1.5,-3.75, () => `\\\\(\\\\textrm{Exemple 1}\\\\)`]);\r\n  \r\n\r\n  boardB.create('text', [-4.5,-4.5, () => `\\\\(A= \\\\textrm{(aire du polygone)}\\\\)`]);\r\n  boardB.create('text', [-4.5,-5, () => `\\\\(\\\\textrm{(Cliquez sur un premier point, un second... et refermer}\\\\)`]);\r\n  boardB.create('text', [-4.5,-5.5, () =>`\\\\(\\\\textrm{le polygone en recliquant sur le premier point. On obtient}\\\\)`]);\r\n  boardB.create('text', [-4.5,-6, () => `\\\\(\\\\textrm{l'aire du polygone par la formule de Pick. En cas de doute,}\\\\)`]);\r\n  boardB.create('text', [-4.5,-6.5, () =>`\\\\(\\\\textrm{commencer par un rectangle, un carr\u00e9, un triangle...)}\\\\)`]);  \r\n\r\n<\/script>\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-9930","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/9930","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=9930"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/9930\/revisions"}],"predecessor-version":[{"id":9931,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/9930\/revisions\/9931"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}