{"id":11944,"date":"2026-03-13T18:16:02","date_gmt":"2026-03-13T17:16:02","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=11944"},"modified":"2026-03-13T18:19:01","modified_gmt":"2026-03-13T17:19:01","slug":"signature-fourier-v2","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=11944","title":{"rendered":"Signature -Fourier V2"},"content":{"rendered":"<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\/* body {\r\n  font-family: system-ui, sans-serif;\r\n  background: #f0f2f7;\r\n  color: #111;\r\n  min-height: 100vh;\r\n  padding: 1.2rem 1.6rem 2rem;\r\n} *\/\r\nh1 { font-size: 16px; font-weight: 500; margin-bottom: .9rem; color: #111; letter-spacing: -.01em; }\r\n\r\n\/* \u2500\u2500 TOOLBAR \u2500\u2500 *\/\r\n.toolbar {\r\n  display: flex; align-items: center; gap: 8px;\r\n  flex-wrap: wrap; margin-bottom: .9rem;\r\n  background: #fff; border: 0.5px solid rgba(0,0,0,.11);\r\n  border-radius: 11px; padding: 9px 14px;\r\n}\r\n.ctrl-group { display: flex; align-items: center; gap: 6px; }\r\nlabel { font-size: 12px; color: #555; white-space: nowrap; }\r\nselect, button {\r\n  font-size: 12px; padding: 4px 10px; border-radius: 7px;\r\n  border: 0.5px solid rgba(0,0,0,.18); background: #fff;\r\n  cursor: pointer; color: #111; transition: background .12s;\r\n}\r\nbutton:hover { background: #f0f0f0; }\r\nbutton.active-btn { background: #185fa5; color: #fff; border-color: #185fa5; }\r\ninput[type=range] { width: 72px; cursor: pointer; accent-color: #185fa5; }\r\n.val { font-size: 12px; font-weight: 500; min-width: 22px; color: #111; font-family: monospace; }\r\n.sep { width: 0.5px; height: 20px; background: rgba(0,0,0,.11); flex-shrink: 0; }\r\n.mode-badge {\r\n  font-size: 10.5px; padding: 3px 9px; border-radius: 20px; font-weight: 500;\r\n  background: #e8f0fe; color: #185fa5; border: 0.5px solid rgba(24,95,165,.2);\r\n  white-space: nowrap;\r\n}\r\n.mode-badge.draw { background: #fef3e2; color: #854f0b; border-color: rgba(133,79,11,.2); }\r\n\r\n\/* \u2500\u2500 PANELS LAYOUT \u2500\u2500 *\/\r\n.panels {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 12px;\r\n}\r\n.panel {\r\n  background: #fff; border: 0.5px solid rgba(0,0,0,.11);\r\n  border-radius: 11px; padding: 12px; position: relative;\r\n}\r\n.panel-title {\r\n  font-size: 10.5px; color: #999; margin-bottom: 9px;\r\n  letter-spacing: .05em; text-transform: uppercase; font-weight: 500;\r\n  display: flex; align-items: center; gap: 6px;\r\n}\r\n.panel-title em { color: #185fa5; font-style: normal; }\r\n\r\n\/* Canvases identiques *\/\r\ncanvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; }\r\n\r\n\/* Canvas dessin : curseur crayon quand actif *\/\r\n#cvShape.drawing-mode { cursor: crosshair; }\r\n#cvShape.draw-hint::after { content: 'Dessinez ici'; }\r\n\r\n\/* overlay d'instruction dans le canvas dessin *\/\r\n.draw-overlay {\r\n  position: absolute; inset: 12px 12px auto 12px;\r\n  pointer-events: none;\r\n}\r\n.draw-hint-text {\r\n  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n  font-size: 13px; color: rgba(0,0,0,.22); text-align: center;\r\n  pointer-events: none; line-height: 1.7;\r\n}\r\n\r\n\/* Draw toolbar (sous le canvas forme) *\/\r\n.draw-toolbar {\r\n  display: flex; align-items: center; gap: 7px; margin-top: 8px;\r\n  flex-wrap: wrap;\r\n}\r\n.draw-toolbar button { font-size: 11.5px; padding: 4px 9px; }\r\n.draw-toolbar label  { font-size: 11.5px; }\r\n\r\n\/* L\u00e9gende FFT *\/\r\n.fft-legend {\r\n  display: flex; gap: 12px; margin-top: 7px;\r\n  font-size: 10.5px; color: #888; flex-wrap: wrap;\r\n}\r\n.fft-legend span { display: flex; align-items: center; gap: 4px; }\r\n.leg-line { width: 14px; height: 2px; display: inline-block; border-radius: 1px; }\r\n\r\n\/* \u2500\u2500 INFO ROW \u2500\u2500 *\/\r\n.info-row { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }\r\n.info-item {\r\n  flex: 1; min-width: 80px; background: #fff;\r\n  border: 0.5px solid rgba(0,0,0,.1); border-radius: 8px; padding: 6px 10px;\r\n}\r\n.info-label { font-size: 10px; color: #999; margin-bottom: 1px; text-transform: uppercase; letter-spacing: .04em; }\r\n.info-val { font-size: 12.5px; font-weight: 500; color: #111; font-family: monospace; }\r\n\r\n.btn-row { display: flex; gap: 6px; }\r\n\r\n@media (max-width: 820px) { .panels { grid-template-columns: 1fr 1fr; } body { padding: 1rem; } }\r\n@media (max-width: 520px)  { .panels { grid-template-columns: 1fr; } }\r\n<\/style>\r\n\r\n<h1>Shape Path Tracer \u2014 Formes g\u00e9om\u00e9triques &#038; Dessin libre &#038; Transform\u00e9e de Fourier<\/h1>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TOOLBAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"toolbar\">\r\n\r\n  <!-- Mode source -->\r\n  <div class=\"ctrl-group\">\r\n    <label>Source<\/label>\r\n    <button id=\"btnModeGeo\"  class=\"active-btn\" onclick=\"setMode('geo')\">G\u00e9om\u00e9trique<\/button>\r\n    <button id=\"btnModeDraw\" onclick=\"setMode('draw')\">Main lev\u00e9e<\/button>\r\n  <\/div>\r\n  <div class=\"sep\"><\/div>\r\n\r\n  <!-- Forme g\u00e9o (visible en mode g\u00e9o) -->\r\n  <div class=\"ctrl-group\" id=\"geoGroup\">\r\n    <label>Forme<\/label>\r\n    <select id=\"shapeSelect\">\r\n      <option value=\"square\">Carr\u00e9<\/option>\r\n      <option value=\"rectangle\">Rectangle<\/option>\r\n      <option value=\"circle\">Cercle<\/option>\r\n    <\/select>\r\n  <\/div>\r\n  <div class=\"sep\" id=\"geoSep\"><\/div>\r\n\r\n  <!-- Vitesse -->\r\n  <div class=\"ctrl-group\">\r\n    <label>Vitesse<\/label>\r\n    <input type=\"range\" id=\"speedSlider\" min=\"1\" max=\"10\" value=\"4\" step=\"1\">\r\n    <span class=\"val\" id=\"speedVal\">4<\/span>\r\n  <\/div>\r\n  <div class=\"sep\"><\/div>\r\n\r\n  <!-- Tra\u00een\u00e9e -->\r\n  <div class=\"ctrl-group\">\r\n    <label>Tra\u00een\u00e9e<\/label>\r\n    <input type=\"range\" id=\"trailSlider\" min=\"0\" max=\"60\" value=\"30\" step=\"1\">\r\n    <span class=\"val\" id=\"trailVal\">30<\/span>\r\n  <\/div>\r\n  <div class=\"sep\"><\/div>\r\n\r\n  <!-- Harmoniques FFT -->\r\n  <div class=\"ctrl-group\">\r\n    <label>Harmoniques<\/label>\r\n    <input type=\"range\" id=\"fftNSlider\" min=\"4\" max=\"32\" value=\"16\" step=\"1\">\r\n    <span class=\"val\" id=\"fftNVal\">16<\/span>\r\n  <\/div>\r\n  <div class=\"sep\"><\/div>\r\n\r\n  <!-- Actions -->\r\n  <div class=\"btn-row\">\r\n    <button id=\"btnPlayPause\">Pause<\/button>\r\n    <button id=\"btnReset\">R\u00e9initialiser<\/button>\r\n  <\/div>\r\n\r\n  <!-- Badge mode actif -->\r\n  <div class=\"mode-badge\" id=\"modeBadge\">Mode : g\u00e9om\u00e9trique<\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PANELS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"panels\">\r\n\r\n  <!-- PANEL 1 : Forme \/ Dessin -->\r\n  <div class=\"panel\" id=\"shapePanel\">\r\n    <div class=\"panel-title\" id=\"shapePanelTitle\">Forme \u2014 parcours en temps r\u00e9el<\/div>\r\n    <canvas id=\"cvShape\"><\/canvas>\r\n\r\n    <!-- Barre dessin (cach\u00e9e par d\u00e9faut) -->\r\n    <div class=\"draw-toolbar\" id=\"drawToolbar\" style=\"display:none\">\r\n      <button id=\"btnStartDraw\" class=\"active-btn\">Dessiner<\/button>\r\n      <button id=\"btnClearDraw\">Effacer<\/button>\r\n      <button id=\"btnLaunchDraw\" style=\"background:#185fa5;color:#fff;border-color:#185fa5\" disabled>Lancer l&#8217;animation<\/button>\r\n      <div class=\"sep\" style=\"height:18px\"><\/div>\r\n      <label>\u00c9paisseur<\/label>\r\n      <input type=\"range\" id=\"brushSlider\" min=\"1\" max=\"8\" value=\"2\" step=\"1\" style=\"width:56px;accent-color:#854f0b\">\r\n      <span class=\"val\" id=\"brushVal\" style=\"color:#854f0b\">2<\/span>\r\n    <\/div>\r\n    <!-- Hint (affich\u00e9 si aucune forme dessin\u00e9e) -->\r\n    <div id=\"drawHint\" class=\"draw-hint-text\" style=\"display:none\">\r\n      Tracez une forme continue ici<br>\r\n      <span style=\"font-size:11px;color:rgba(0,0,0,.15)\">clic + glisser \u2014 la courbe doit \u00eatre ferm\u00e9e<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- PANEL 2 : Position \/ Temps -->\r\n  <div class=\"panel\">\r\n    <div class=\"panel-title\">Position X &#038; Y dans le temps<\/div>\r\n    <canvas id=\"cvTime\"><\/canvas>\r\n  <\/div>\r\n\r\n  <!-- PANEL 3 : FFT -->\r\n  <div class=\"panel\">\r\n    <div class=\"panel-title\">Transform\u00e9e de Fourier \u2014 <em>spectre d&#8217;amplitude &#038; phase<\/em><\/div>\r\n    <canvas id=\"cvFFT\"><\/canvas>\r\n    <div class=\"fft-legend\">\r\n      <span><span class=\"leg-line\" style=\"background:#185fa5\"><\/span>|X(k)|<\/span>\r\n      <span><span class=\"leg-line\" style=\"background:#1d9e75\"><\/span>|Y(k)|<\/span>\r\n      <span><span class=\"leg-line\" style=\"background:#ba7517;height:0;border-top:1.5px dashed #ba7517\"><\/span>phase X<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INFO ROW \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"info-row\">\r\n  <div class=\"info-item\"><div class=\"info-label\">Progression t<\/div><div class=\"info-val\" id=\"infoT\">0.000<\/div><\/div>\r\n  <div class=\"info-item\"><div class=\"info-label\">Position X<\/div><div class=\"info-val\" id=\"infoPx\">0<\/div><\/div>\r\n  <div class=\"info-item\"><div class=\"info-label\">Position Y<\/div><div class=\"info-val\" id=\"infoPy\">0<\/div><\/div>\r\n  <div class=\"info-item\"><div class=\"info-label\">Cycle<\/div><div class=\"info-val\" id=\"infoCycle\">1<\/div><\/div>\r\n  <div class=\"info-item\"><div class=\"info-label\">Points trac\u00e9<\/div><div class=\"info-val\" id=\"infoPoints\">\u2014<\/div><\/div>\r\n  <div class=\"info-item\"><div class=\"info-label\">Freq. dom. X<\/div><div class=\"info-val\" id=\"infoDomX\">\u2014<\/div><\/div>\r\n  <div class=\"info-item\"><div class=\"info-label\">Freq. dom. Y<\/div><div class=\"info-val\" id=\"infoDomY\">\u2014<\/div><\/div>\r\n<\/div>\r\n\r\n\n\n<script type='text\/javascript'>\nvar id = \"11949\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/11949.js?ver=1773422318'><\/script>\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-11944","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11944","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=11944"}],"version-history":[{"count":2,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11944\/revisions"}],"predecessor-version":[{"id":11951,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11944\/revisions\/11951"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}