{"id":10553,"date":"2025-10-04T15:45:17","date_gmt":"2025-10-04T13:45:17","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=10553"},"modified":"2025-10-04T15:45:17","modified_gmt":"2025-10-04T13:45:17","slug":"surface3d-v2-three","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=10553","title":{"rendered":"Surface3D v2 Three"},"content":{"rendered":"    <style>\r\n        #containerYS {\r\n            position: absolute;\r\n            top:10px;\r\n            left:330px;\r\n            width: 800px;\r\n            height: 800px;\r\n            border-radius: 12px;\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);            \r\n        }\r\n        #controls {\r\n            position: absolute;\r\n            width:280px;\r\n\t\t    height:850px;\r\n            top: 20px;\r\n            left: 20px;\r\n            background: rgba(255, 255, 255, 0.95);\r\n            padding: 20px;\r\n            border-radius: 12px;\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\r\n            max-width: 300px;\r\n            backdrop-filter: blur(10px);\r\n        }\r\n        h3 {\r\n            margin: 0 0 15px 0;\r\n            color: #333;\r\n            font-size: 18px;\r\n        }\r\n        .control-group {\r\n            margin-bottom: 10px;\r\n        }\r\n        label {\r\n            display: block;\r\n            margin-bottom: 5px;\r\n            color: #f00000;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n        }\r\n        select, input {\r\n            width: 100%;\r\n            padding: 8px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 6px;\r\n            font-size: 14px;\r\n            transition: border-color 0.3s;\r\n        }\r\n        select:focus, input:focus {\r\n            outline: none;\r\n            border-color: #667eea;\r\n        }\r\n        button {\r\n            width: 100%;\r\n            padding: 10px;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 6px;\r\n            cursor: pointer;\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            transition: transform 0.2s;\r\n        }\r\n        button:hover {\r\n            transform: translateY(-2px);\r\n        }\r\n        button:active {\r\n            transform: translateY(0);\r\n        }\r\n        #coordinates {\r\n            position: absolute;\r\n            top: 100px;\r\n            left: 350px;\r\n            background: rgba(0,0,0,0.8);\r\n            padding: 15px;\r\n            border-radius: 8px;\r\n            font-family: 'Courier New', monospace;\r\n            font-size: 14px;\r\n            display: none;\r\n            box-shadow: 0 4px 6px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        #coordinates.active {\r\n            display: block;\r\n        }\r\n        \r\n        .coord-line {\r\n            margin: 5px 0;\r\n            color:white;\r\n        }\r\n        \r\n        .coord-label {\r\n            display: inline-block;\r\n            color:white;\r\n            width: 20px;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .x-label { color: #ff4444; }\r\n        .y-label { color: #44ff44; }\r\n        .z-label { color: #4444ff; }\r\n        \r\n        #legend {\r\n            position: absolute;\r\n            top: 10px;\r\n            left: 1000px;\r\n            background: rgba(0,0,0,0.8);\r\n            padding: 15px;\r\n            border-radius: 8px;\r\n            box-shadow: 0 4px 6px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .legend-title {\r\n            font-weight: bold;\r\n            color :white;\r\n            margin-bottom: 10px;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .legend-content {\r\n            display: flex;\r\n            color :white;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n        \r\n        .color-bar {\r\n            width: 30px;\r\n            height: 150px;\r\n            border-radius: 4px;\r\n            background: linear-gradient(to bottom, \r\n                rgb(255,0,0), \r\n                rgb(255,255,0), \r\n                rgb(0,255,0), \r\n                rgb(0,255,255), \r\n                rgb(0,0,255));\r\n        }\r\n        \r\n        .legend-labels {\r\n            display: flex;\r\n            color :white;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            height: 150px;\r\n            font-size: 12px;\r\n        }\r\n\r\n    <\/style>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/katex\/dist\/katex.min.js\"><\/script>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/katex\/dist\/katex.min.css\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph\/distrib\/jsxgraphcore.min.js\"><\/script>   \r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\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\r\n    <div style=\"width:1000px;height:900px\" >\r\n        <div id=\"controls\">\r\n            <h3>\ud83c\udf9b\ufe0f \\(Contr\u00f4les\\)<\/h3>\r\n            <div class=\"control-group\">\r\n                <label>\\(Fonctions:\\)<\/label>\r\n                <select id=\"functionSelect\"  onchange=\"recharge_fonction(); \">\r\n                    <option value=\"sin\">sin(x) * cos(y)<\/option>\r\n                    <option value=\"wave\">sin(\u221a(x\u00b2 + y\u00b2))<\/option>\r\n                    <option value=\"saddle\">x\u00b2 &#8211; y\u00b2<\/option>\r\n                    <option value=\"cobbdouglas\">x^1\/2.y^1\/2<\/option>\r\n                    <option value=\"gaussian\">e^(-(x\u00b2 + y\u00b2))<\/option>\r\n                    <option value=\"ripple\">cos(x) + sin(y)<\/option>\r\n                \t<option value=\"fct1\">VES : forme canonique<\/option>\r\n                    <option value=\"fct2\">VES : affine  en y <\/option>\r\n                    <option value=\"fct3\">VAE : fractionnaire<\/option>\t\t\t\t\t\r\n                <\/select>\r\n            <\/div>\r\n            <div class=\"control-group\">\r\n                <label>\\(R\u00e9solution:\\) <span id=\"resValue\">50<\/span><\/label>\r\n                <input type=\"range\" id=\"resolution\" min=\"20\" max=\"100\" value=\"50\">\r\n            <\/div>\r\n            <div class=\"control-group\">\r\n                <label>\\(Plage:\\) <span id=\"rangeValue\">5<\/span><\/label>\r\n                <input type=\"range\" id=\"range\" min=\"2\" max=\"10\" value=\"5\" step=\"0.5\">\r\n            <\/div>\r\n            <div class=\"control-group\">\r\n                <label>\\(\\textrm{Courbes de niveau :}\\) <span id=\"contourValue\">10<\/span><\/label>\r\n                <input type=\"range\" id=\"contours\" min=\"5\" max=\"20\" value=\"10\">\r\n            <\/div>\r\n            <div class=\"control-group\">\r\n                <label style=\"display: flex; align-items: center; gap: 8px;\">\r\n                    <input onchange=\"reactualise_grap\u0125e();\" type=\"checkbox\" id=\"showProjections\" checked style=\"width: auto;\">\r\n                   \\(\\textrm{Afficher projections}\\)\r\n                <\/label>\r\n            <\/div>\r\n            <div class=\"control-group\">\r\n                <label style=\"display: flex; align-items: center; gap: 8px;\">\r\n                    <input onchange=\"reactualise_grap\u0125e();\" type=\"checkbox\" id=\"showMesh\" checked style=\"width: auto;\">\r\n                   \\(\\textrm{Afficher Mesh}\\)\r\n                <\/label>\r\n            <\/div>\r\n            <div class=\"control-group\">\r\n                <label style=\"display: flex; align-items: center; gap: 8px;\">\r\n                    <input onchange=\"reactualise_grap\u0125e();\" type=\"checkbox\" id=\"showSurface\" checked style=\"width: auto;\">\r\n                   \\(\\textrm{Afficher Surface}\\)\r\n                <\/label>\r\n            <\/div>\r\n\r\n\r\n            <div id=\"box1\" class=\"jxgbox\" style=\"width:100%;height:200px;border-radius: 12px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);margin:10px 0px 0px 0px\"><\/div>\r\n\t\t\t<div id=\"box2\" class=\"jxgbox\" style=\"width:100%;height:200px;border-radius: 12px;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);margin:10px 0px 0px 0px\"><\/div>\t\t\t\r\n            <!-- <button onclick=\"updateSurface()\">Mettre \u00e0 jour<\/button> -->\r\n        <\/div>\r\n        <div id=\"containerYS\"><\/div>\r\n        <div id=\"coordinates\">\r\n            <div class=\"coord-line\"><span class=\"coord-label x-label\">\\(X:\\)<\/span> <span id=\"coord-x\">0.00<\/span><\/div>\r\n            <div class=\"coord-line\"><span class=\"coord-label y-label\">\\(Y:\\)<\/span> <span id=\"coord-y\">0.00<\/span><\/div>\r\n            <div class=\"coord-line\"><span class=\"coord-label z-label\">\\(Z:\\)<\/span> <span id=\"coord-z\">0.00<\/span><\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"legend\">\r\n            <div class=\"legend-title\">\\(L\u00e9gende\\)<\/div>\r\n            <div class=\"legend-content\">\r\n                <div class=\"color-bar\"><\/div>\r\n                <div class=\"legend-labels\">\r\n                    <div>Max<\/div>\r\n                    <div>Moy<\/div>\r\n                    <div>Min<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>        \r\n    <\/div>\r\n\n\n<script type='text\/javascript'>\nvar id = \"10551\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/10551.js?ver=1759732351'><\/script>\n\n\n\n<p><\/p>\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-10553","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10553","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=10553"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10553\/revisions"}],"predecessor-version":[{"id":10554,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10553\/revisions\/10554"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}