From 4bc734353b651cc849f77a32e08f3a2fb213352b Mon Sep 17 00:00:00 2001
From: Alnotz <fredh0001@net-c.fr>
Date: Sun, 3 Oct 2021 16:25:13 +0200
Subject: [PATCH] Ajout de projets Web.

---
 Web/Manette/Manette.html | 499 +++++++++++++++++++++++++++++++++++++++
 Web/Oeil/Oeil.html       | 247 +++++++++++++++++++
 Web/Oeil/OeilPetit.html  |  48 ++++
 3 files changed, 794 insertions(+)
 create mode 100644 Web/Manette/Manette.html
 create mode 100644 Web/Oeil/Oeil.html
 create mode 100644 Web/Oeil/OeilPetit.html
diff --git a/Web/Manette/Manette.html b/Web/Manette/Manette.html
new file mode 100644
index 0000000..6b0c16c
--- /dev/null
+++ b/Web/Manette/Manette.html
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html lang="FR">
+  <head>
+    <title>
+      La manette XBox 360
+    </title>
+    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
+    <meta name="author" content="Alnotz">
+    <meta name="color-scheme" content="dark light">
+    <meta name="keywords" content="alnotz, gamepad, api, interaction">
+    <meta name="description" content="Une page HTML pour illustrer l'interaction avec une manette XBox 360. Conçue par Alnotz et sous GPL3+.">
+    <style>
+      /* Un peu de forme. */
+      html
+      {
+        background: #050505;
+        color: #D0F5D0;
+      }
+      h1
+      {
+        color: #F54040;
+      }
+      canvas#toile
+      {
+        width: 800px;
+        height: 600px;
+        margin: 1em 0 1em 0;
+        border: 3px solid green;
+        border-radius: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <!--Un peu de texte.-->
+    <h1>
+      La manette 
+      <em>
+        XBox 360
+      </em>
+    </h1>
+    <p>
+      On a  ci-dessous un schémas qui représente « en gros » une manette
+      <em>
+        XBox 360
+      </em>
+        qui indique les touches et leurs états respectifs : 
+      <em style="color: red;">
+        actif
+      </em>
+        ou 
+      <em style="color: blue;">
+        passif
+      </em>
+    </p>
+    <!--Le dessin interactif d'une manette.-->
+    <canvas id="toile" width="800" height="600">
+    </canvas>
+    <p>
+      Une création d'<strong>Alnotz</strong> sous <em>GPL3+</em>.
+      <a href="http://www.gnu.org/licenses/gpl-3.0.txt" title="Licence GPL3+ en texte brute">
+        <img src="http://www.gnu.org/graphics/gplv3-or-later.svg" alt="Logotype de GPL3+">
+      </a>
+    </p>
+    <noscript>
+      <p>
+        Sans le JavaScript, il n'y a pas grande chose à afficher vu que c'est la base de l'application. :-/
+      </p>
+    </noscript>
+  </body>
+  <script type="application/javascript">
+  /***************************************|
+  | Du code pour interagir entre la toile |
+  |  et les manettes de jeu.              |
+  |***************************************/
+  //<![CDATA[
+  console.log('Début');
+  var toile = document.getElementById('toile');
+  if (toile.getContext)
+  {
+    var ctx = toile.getContext('2d');
+    /* Support */
+    function drawPad()
+    {
+      ctx.fillStyle = "white";
+      ctx.beginPath();
+      ctx.moveTo(200,10);//En haut à gauche.
+      ctx.lineTo(300,10);
+      ctx.lineTo(320,100);//Creux à gauche.
+      ctx.lineTo(480,100);
+      ctx.lineTo(500,10);
+      ctx.lineTo(600,10);//En haut à droite.
+      ctx.lineTo(700,100);//Coude à droite.
+      ctx.lineTo(700,590);//Pied à droite
+      ctx.lineTo(600,590);
+      ctx.lineTo(480,300);
+      ctx.lineTo(320,300);
+      ctx.lineTo(200,590);//Pied à gauche.
+      ctx.lineTo(100,590); 
+      ctx.lineTo(100,100);
+      ctx.lineTo(200,10);
+      ctx.fill();
+    }
+    /* Positions */
+    let xBd = 200; let yBd = 260;//Bidirectionnel.
+    let xBt = 600; let yBt = 140;//Boutons.
+    /* Boutons */
+    
+    function drawLT(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.fillRect(280,10,20,50);//LT
+    }
+    function drawRT(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.fillRect(500,10,20,50);//RT
+    }
+    function drawLB(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.fillRect(220,70,80,20);//LB
+    }
+    function drawRB(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.fillRect(500,70,80,20);//RB
+    }
+    function drawBdH(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//Bidirectionnel.
+      ctx.moveTo(xBd,yBd);//Centre (haut).
+      ctx.lineTo(xBd-10,yBd-10);
+      ctx.lineTo(xBd-10,yBd-30);
+      ctx.lineTo(xBd+10,yBd-30);
+      ctx.lineTo(xBd+10,yBd-10);
+      ctx.lineTo(xBd,yBd);
+      ctx.fill();
+    }
+    function drawBdD(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//Bidirectionnel.
+      ctx.moveTo(xBd,yBd);//Centre (droite).
+      ctx.lineTo(xBd+10,yBd-10);
+      ctx.lineTo(xBd+30,yBd-10);
+      ctx.lineTo(xBd+30,yBd+10);
+      ctx.lineTo(xBd+10,yBd+10);
+      ctx.lineTo(xBd,yBd);
+      ctx.fill();
+    }
+    function drawBdB(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//Bidirectionnel.
+      ctx.moveTo(xBd,yBd);//Centre (bas).
+      ctx.lineTo(xBd+10,yBd+10);
+      ctx.lineTo(xBd+10,yBd+30);
+      ctx.lineTo(xBd-10,yBd+30);
+      ctx.lineTo(xBd-10,yBd+10);
+      ctx.lineTo(xBd,yBd);
+      ctx.fill();
+    }
+    function drawBdG(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//Bidirectionnel.
+      ctx.moveTo(xBd,yBd);//Centre (left).
+      ctx.lineTo(xBd-10,yBd+10);
+      ctx.lineTo(xBd-30,yBd+10);
+      ctx.lineTo(xBd-30,yBd-10);
+      ctx.lineTo(xBd-10,yBd-10);
+      ctx.lineTo(xBd,yBd);
+      ctx.fill();
+    }
+    function drawA(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//A
+      ctx.arc(xBt,yBt+20,10,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawB(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//B
+      ctx.arc(xBt+20,yBt,10,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawY(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//Y
+      ctx.arc(xBt,yBt-20,10,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawX(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//X
+      ctx.arc(xBt-20,yBt,10,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawJL(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//JoystickL
+      ctx.arc(200,140,30,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawJR(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//JoystickR
+      ctx.arc(580,260,30,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawXB(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//XBox
+      ctx.arc(400,220,30,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawSt(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//Start
+      ctx.arc(340,220,10,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    function drawSe(flg)
+    {
+      if(flg)
+      {
+        ctx.fillStyle = "blue";
+      }
+      else
+      {
+        ctx.fillStyle = "red";
+      }
+      ctx.beginPath();//Select
+      ctx.arc(460,220,10,0,Math.PI*2,true);
+      ctx.fill();
+    }
+    /* Cadres des axes. */
+    function drawSubCanJL(x,y)//Cadre pour Joystik à gauche.
+    {
+      let xSCL = 300; let ySCL = 500;
+      ctx.clearRect(xSCL-5,ySCL-5,90,90);
+      ctx.beginPath();
+      ctx.strokeStyle = "red";//Cadre.
+      ctx.rect(xSCL,ySCL,80,80);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(xSCL+40+x*40,ySCL+35+y*40);//Curseur.
+      ctx.lineTo(xSCL+40+x*40,ySCL+45+y*40);
+      ctx.moveTo(xSCL+35+x*40,ySCL+40+y*40);
+      ctx.lineTo(xSCL+45+x*40,ySCL+40+y*40);
+      ctx.stroke();
+    }
+    function drawSubCanJR(x,y)//Cadre pour Joystik à droite.
+    {
+      let xSCR = 400; let ySCR = 500;
+      ctx.clearRect(xSCR-5,ySCR-5,90,90);
+      ctx.beginPath();
+      ctx.strokeStyle = "red";//Cadre.
+      ctx.rect(xSCR,ySCR,80,80);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(xSCR+40+x*40,ySCR+35+y*40);//Curseur.
+      ctx.lineTo(xSCR+40+x*40,ySCR+45+y*40);
+      ctx.moveTo(xSCR+35+x*40,ySCR+40+y*40);
+      ctx.lineTo(xSCR+45+x*40,ySCR+40+y*40);
+      ctx.stroke();
+    }
+    function drawSubCanLT(y)//Cadre pour Gâchette à gauche.
+    {
+      let xSCLT = 300; let ySCLT = 390;
+      ctx.clearRect(xSCLT-5,ySCLT-5,40,110);
+      ctx.beginPath();
+      ctx.strokeStyle = "red";//Cadre.
+      ctx.rect(xSCLT,ySCLT,30,100);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(xSCLT,ySCLT+y*50+50);
+      ctx.lineTo(xSCLT+30,ySCLT+y*50+50);
+      ctx.stroke();
+    }
+    function drawSubCanRT(y)//Cadre pour Gâchette à droite.
+    {
+      let xSCRT = 400; let ySCRT = 390;
+      ctx.clearRect(xSCRT-5,ySCRT-5,40,110);
+      ctx.beginPath();
+      ctx.strokeStyle = "red";//Cadre.
+      ctx.rect(xSCRT,ySCRT,30,100);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(xSCRT,ySCRT+y*50+50);
+      ctx.lineTo(xSCRT+30,ySCRT+y*50+50);
+      ctx.stroke();
+    }
+    /* Dessin initial. */
+    drawPad(true);
+    drawLT(true);
+    drawRT(true);
+    drawLB(true);
+    drawRB(true);
+    drawBdH(true);
+    drawBdD(true);
+    drawBdB(true);
+    drawBdG(true);
+    drawA(true);
+    drawB(true);
+    drawX(true);
+    drawY(true);
+    drawJL(true);
+    drawJR(true);
+    drawXB(true);
+    drawSt(true);
+    drawSe(true);
+    drawSubCanJL(0.0,0.0);
+    drawSubCanJR(0.0,0.0);
+    drawSubCanLT(0.0);
+    drawSubCanRT(0.0);
+    /* Écoute des touches */
+    function testButtons(gpad)
+    {
+      console.log("Début des essais.");
+      let bLen = gpad.buttons.length;
+      /* Exament des états et affichage... */
+      function reDraw()
+      {
+        //console.log("Test");
+        drawA(!gpad.buttons[0].pressed);
+        drawB(!gpad.buttons[1].pressed);
+        drawX(!gpad.buttons[2].pressed);
+        drawY(!gpad.buttons[3].pressed);
+        drawLB(!gpad.buttons[4].pressed);
+        drawRB(!gpad.buttons[5].pressed);
+        drawSe(!gpad.buttons[6].pressed);
+        drawSt(!gpad.buttons[7].pressed);
+        drawXB(!gpad.buttons[8].pressed);
+        drawJL(!gpad.buttons[9].pressed);
+        drawJR(!gpad.buttons[10].pressed);
+        drawBdH(!(gpad.axes[7] === -1));
+        drawBdD(!(gpad.axes[6] ===  1));
+        drawBdB(!(gpad.axes[7] ===  1));
+        drawBdG(!(gpad.axes[6] === -1));
+        drawSubCanJL(gpad.axes[0],gpad.axes[1]);
+        drawSubCanJR(gpad.axes[3],gpad.axes[4]);
+        drawSubCanLT(gpad.axes[2]);
+        drawSubCanRT(gpad.axes[5]);
+      }
+      /* ...en temps réel. */
+      let boucle = setInterval(reDraw, 200);
+    }
+    /* Écouteurs de manette. */
+    function connection(e)
+    {
+      console.warn("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
+      e.gamepad.index, e.gamepad.id,
+      e.gamepad.buttons.length, e.gamepad.axes.length);
+      testButtons(e.gamepad);
+    }
+    function deconnection(e)
+    {
+      console.warn("Contrôleur n°%d déconnecté : %s",
+      e.gamepad.index, e.gamepad.id);
+    }
+    function scanLog()
+    {
+      console.log("Chargé!");
+      window.addEventListener("gamepadconnected", connection);
+      window.addEventListener("gamepaddisconnected", deconnection);
+    }
+    window.addEventListener("load", scanLog);
+  }
+  else
+  {
+    //Au cas où canvas ne serait pas supporté.
+    console.alarm('Élément Canvas non supporté.');
+  }
+  console.log('Fin');
+  //]]>
+  </script>
+</html>
diff --git a/Web/Oeil/Oeil.html b/Web/Oeil/Oeil.html
new file mode 100644
index 0000000..8394111
--- /dev/null
+++ b/Web/Oeil/Oeil.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="FR">
+  <head>
+    <title>
+      Celui qui voit.
+    </title>
+    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
+    <meta name="author" content="Alnotz">
+    <meta name="color-scheme" content="dark light">
+    <meta name="keywords" content="alnotz, oeil, api, interaction, curseur">
+    <meta name="description" content="Une page HTML pour illustrer l'interaction avec une sourie. Conçue par Alnotz et sous GPL3+.">
+    <style>
+      /* Un peu de forme. */
+      html
+      {
+        background: #050505;
+        color: #D0F5D0;
+      }
+      h1
+      {
+        color: #F54040;
+      }
+      p
+      {
+        width: 800px;
+      }
+      p#alerte
+      {
+        color: orange;
+        font-size: 2em;
+      }
+      /* Ne pas oublier les dimensions de la toile! */
+      canvas#toile
+      {
+        width: 800px;
+        height: 600px;
+        margin: 1em 0 1em 0;
+        border: 3px solid red;
+        border-radius: 3px;
+        cursor: default;
+      }
+    </style>
+  </head>
+  <body>
+    <!--Un peu de texte.-->
+    <h1>
+      L'&#338;il qui traque
+    </h1>
+    <!-- Texte interactif-->
+    <p>
+      On a ci-dessous un schéma qui représente un &#339;il traquant un curseur.
+      Un premier clic active la traque et peut être annulé par un second clic.
+      Les coordonnées sont 
+      <em id="X">
+        X
+      </em>
+      et 
+      <em id="Y">
+        Y
+      </em>.
+    </p>
+    <p id="alerte">
+      <br>
+    </p>
+    <!--Le dessin interactif d'un œil.-->
+    <canvas id="toile" width="800" height="600">
+    </canvas>
+    <p>
+      Une création d'<strong>Alnotz</strong> sous <em>GPL3+</em>.
+      <a href="http://www.gnu.org/licenses/gpl-3.0.txt" title="Licence GPL3+ en texte brute">
+        <img src="http://www.gnu.org/graphics/gplv3-or-later.svg" alt="Logotype de GPL3+">
+      </a>
+    </p>
+    <!--Pas d'accès JS-->
+    <noscript>
+      <p>
+        Sans le JavaScript, il n'y a pas grande chose à afficher vu que c'est la base de l'application. :-/
+      </p>
+    </noscript>
+  </body>
+  <!--Code interactif-->
+  <script type="application/javascript">
+    /***************************************|
+    | Du code pour interagir entre l'œil et |
+    |  le pointeur de la sourie.            |
+    |***************************************/
+    //Astuce XML pour éviter des conflicts avec les balises à la ligne qui suit.
+    //<![CDATA[
+    console.log('Début');
+    var boucle;//ID de boucle.
+    var drapeau = false;//Interrupteur de boucle.
+    var toile = document.getElementById("toile");//Toile à dessin.
+    var ctx = toile.getContext('2d');
+    var oeilX = 400;
+    var oeilY = 300;
+    /* Fonctions. */
+    function dessinInit()//Dessin de départ.
+    {
+      ctx.beginPath();//Blanc de l'œil.
+      ctx.fillStyle ="white";
+      ctx.arc(oeilX,oeilY,100,0,Math.PI*2,true);
+      ctx.fill();
+      ctx.beginPath();//Iris de l'œil.
+      ctx.fillStyle = "#4040D0";
+      ctx.arc(oeilX,oeilY,50,0,Math.PI*2,true);
+      ctx.fill();
+      ctx.beginPath();//Rétine de l'œil.
+      ctx.fillStyle = "black";
+      ctx.arc(oeilX,oeilY,20,0,Math.PI*2,true);
+      ctx.fill();
+      ctx.beginPath();//Paupière supérieure.
+      ctx.fillStyle = "#A040A0";
+      ctx.moveTo(oeilX-102,oeilY-102);
+      ctx.lineTo(oeilX+102,oeilY-102);
+      ctx.arc(oeilX,oeilY+52,102,0,Math.PI,true);
+      ctx.lineTo(oeilX-102,oeilY-102);
+      ctx.closePath();
+      ctx.fill();
+      ctx.beginPath();//Paupière inférieure.
+      ctx.moveTo(oeilX+102,oeilY+102);
+      ctx.lineTo(oeilX-102,oeilY+102);
+      ctx.arc(oeilX,oeilY-52,102,Math.PI,Math.PI*2,true);
+      ctx.lineTo(oeilX+102,oeilY+102);
+      ctx.closePath();
+      ctx.fill();
+      ctx.beginPath();//Contour restreignant le dessin de l'œil.
+      ctx.fillStyle = "rgba(0, 0, 0, 1)";
+      ctx.arc(oeilX,oeilY,101,0,Math.PI*2,true);
+      ctx.arc(oeilX,oeilY,221,0,Math.PI*2,false);
+      ctx.moveTo(oeilX+101,oeilY);
+      ctx.closePath();
+      ctx.fill();
+    }
+    function dessinDyna(mvX, mvY)//Dessin dynamique.
+    {
+      let diffY = 0;//Écart vertical.
+      ctx.clearRect(0,0,800,600);
+      ctx.beginPath();//Blanc de l'œil.
+      ctx.fillStyle ="white";
+      ctx.arc(oeilX,oeilY,100,0,Math.PI*2,true);
+      ctx.fill();
+      ctx.beginPath();//Iris de l'œil.
+      ctx.fillStyle = "#4040D0";
+      ctx.arc(oeilX+mvX, oeilY+mvY,50,0,Math.PI*2,true);
+      ctx.fill();
+      ctx.beginPath();//Rétine de l'œil.
+      ctx.fillStyle = "black";
+      ctx.arc(oeilX+mvX, oeilY+mvY,20,0,Math.PI*2,true);
+      ctx.fill();
+      /* La paupière supérieure se lève quand la rétine
+      *  monte assez haut. De même, celle inférieure
+      * baisse si la rétine est assez basse.
+      */
+      if(mvY >= -10)//L'iris ne touche pas la paupière.
+      {
+        diffY = 0;
+      }
+      else//La paupière levée avec l'iris.
+      {
+        diffY = mvY+10;
+      }
+      ctx.beginPath();//Paupière supérieure.
+      ctx.fillStyle = "#A040A0";
+      ctx.moveTo(oeilX-102,oeilY-102+diffY);
+      ctx.lineTo(oeilX+102,oeilY-102+diffY);
+      ctx.arc(oeilX,oeilY+52+diffY,102,0,Math.PI,true);
+      ctx.lineTo(oeilX-102,oeilY-102+diffY);
+      ctx.closePath();
+      ctx.fill();
+      if(mvY <=  10)//L'iris ne touche pas la paupière.
+      {
+        diffY = 0;
+      }
+      else//La paupière baissée avec l'iris.
+      {
+        diffY = mvY-10;
+      }
+      ctx.beginPath();//Paupière inférieure.
+      ctx.moveTo(oeilX+102,oeilY+102+diffY);
+      ctx.lineTo(oeilX-102,oeilY+102+diffY);
+      ctx.arc(oeilX,oeilY-52+diffY,102,Math.PI,Math.PI*2,true);
+      ctx.lineTo(oeilX+102,oeilY+102+diffY);
+      ctx.closePath();
+      ctx.fill();
+      ctx.beginPath();//Contour restreignant le dessin de l'œil.
+      ctx.fillStyle = "rgba(0, 0, 0, 1)";
+      ctx.arc(oeilX,oeilY,101,0,Math.PI*2,true);
+      ctx.arc(oeilX,oeilY,221,0,Math.PI*2,false);
+      ctx.moveTo(oeilX+101,oeilY);
+      ctx.closePath();
+      ctx.fill();
+    }
+    function dessinCurseur(trace)//Dessin du curseur cible.
+    {
+      ctx.beginPath();//Curseur cible.
+      ctx.strokeStyle = "red";
+      ctx.moveTo(trace.offsetX-10,trace.offsetY);
+      ctx.lineTo(trace.offsetX+10,trace.offsetY);
+      ctx.moveTo(trace.offsetX,trace.offsetY-10);
+      ctx.lineTo(trace.offsetX,trace.offsetY+10);
+      ctx.closePath();
+      ctx.stroke();
+    }
+    function suivre(trace)//Coordonnées en temps réel.
+    {
+      if(drapeau)//Valeurs à jour.
+      {
+        document.getElementById("X").innerHTML = `${trace.offsetX} px`;
+        document.getElementById("Y").innerHTML = `${trace.offsetY} px`;
+        /* La position de la rétine et de l'iris varie dans l'œil
+        *  proportionnellement à la position du curseur dans la toile.
+        */
+        dessinDyna((trace.offsetX-400)/4, (trace.offsetY-300)/3);
+        dessinCurseur(trace);//Curseur ajouté à part.
+      }
+      else//Valeurs indéfinies.
+      {
+        document.getElementById("X").innerHTML = "X";
+        document.getElementById("Y").innerHTML = "Y";
+      }
+    }
+    function autoriser(coups)//Interrupteur de traçage.
+    {
+      if(drapeau)
+      {
+        document.getElementById("alerte").innerHTML = "<br>";
+        toile.style.cursor = "default"
+        toile.removeEventListener("mousemove", suivre);
+        //console.log("Ignore");
+      }
+      else
+      {
+        document.getElementById("alerte").innerHTML = "Attention, il observe!";
+        toile.style.cursor = "none"
+        toile.addEventListener("mousemove", suivre);
+        //console.log("Écoute");
+      }
+      drapeau = !drapeau;
+    }
+    /* Actions. */
+    dessinInit();
+    toile.addEventListener("click", autoriser);
+    console.log('Fin');
+    //Fin d'encadrement XML anti-conflict.
+    //]]>
+  </script>
+</html>
diff --git a/Web/Oeil/OeilPetit.html b/Web/Oeil/OeilPetit.html
new file mode 100644
index 0000000..f78d27f
--- /dev/null
+++ b/Web/Oeil/OeilPetit.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="FR">
+  <head>
+    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
+    <style>
+      /* Un peu de forme. */
+      html
+      {
+        background: #050505;
+        color: #D0F5D0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Texte interactif-->
+    <p>
+      Les coordonnées sont <em id="X">X</em> et <em id="Y">Y</em>.
+    </p>
+  </body>
+  <script type="application/javascript">
+  //<![CDATA[
+  console.log('Début');
+  var boucle;//ID de boucle.
+  var drapeau = false;//Interrupteur de boucle.
+  function suivre(trace)
+  {
+    if(drapeau)
+    {
+      document.getElementById("X").innerHTML = trace.offsetX;
+      document.getElementById("Y").innerHTML = trace.offsetY;
+    }
+    else
+    {
+      document.getElementById("X").innerHTML = "X";
+      document.getElementById("Y").innerHTML = "Y";
+    }
+  }
+  function autoriser(coups)
+  {
+    drapeau = !drapeau;
+  }
+  
+  window.addEventListener("click", autoriser);
+  window.addEventListener("mousemove", suivre);
+  console.log('Fin');
+  //]]>
+  </script>
+</html>
