Ajout de projets Web.
This commit is contained in:
parent
d3659210e4
commit
4bc734353b
3 changed files with 794 additions and 0 deletions
499
Web/Manette/Manette.html
Normal file
499
Web/Manette/Manette.html
Normal file
|
|
@ -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>
|
||||
247
Web/Oeil/Oeil.html
Normal file
247
Web/Oeil/Oeil.html
Normal file
|
|
@ -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'Œil qui traque
|
||||
</h1>
|
||||
<!-- Texte interactif-->
|
||||
<p>
|
||||
On a ci-dessous un schéma qui représente un œ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>
|
||||
48
Web/Oeil/OeilPetit.html
Normal file
48
Web/Oeil/OeilPetit.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue