Edit

Cette page permet de soumettre une suggestion de modifications à la page (typiquement correction orthographique ou erreur de contenu). Le contenu est tapé (essentiellement) en markdown.

This page allows the reader to suggest modifications to the page they read. Typically spelling mistakes or suggestions to update the content. The format is essentially standard markdown.

(Optional) Votre nom, your name: (Optional) Votre mail, your email:

### <b> Attention.</b> 
Les TD doivent être réalisés sous Linux et non sous Windows.
Chaque étudiant doit être inscrit sur Moodle. Le forum peut être utilisé 
pour poser des questions pendant et en dehors des TD.

### <b> A propos de la récupération de script dans le code source de la page </b>

Le code des scripts ne sont désormais plus aussi aisément accessible via l'inspecteur 
(mais c'est toujours possible de les trouver en cherchant bien).
Si vous souhaitez une correction particulière pour une question d'un des TD, je vous invite à 
la demander via le forum Moodle et je serais ravis de la fournir le plus rapidement possible.

## Quelques ressources en lignes

* Le site des tutoriels [du W3C](https://www.w3schools.com/html/default.asp) est une référence pour les langages du WEB (langue anglaise).
* Pour les non-anglophones le site de [mozilla](https://developer.mozilla.org/fr/docs/Web/HTML/Element) possède de nombreuses ressources en français pour HTML5, CSS3 et JavaScript
* Le site [openclassrooms](https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3) permet également de réviser les bases HTML5 et CSS3.

## Une première fonction

1. **Un générateur aléatoire de nombre entier**

Quelle fonction permet de générer un nombre aléatoire?
Définir une fonction `genererAleatoirement`

[JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions)
qui prend deux arguments `borneMin` et `borne_max` et qui retourne un 
entier entre `borne_min` et `borneMax` inclus.

2. **Utilisez la fonction `genereAleatoirement`**

Utilisez cette fonction pour réaliser l'exemple suivant:

<div class="script">
function generer()
{
var bmin = parseInt(document.getElementById("borne_min").value);
var bmax = parseInt(document.getElementById("borne_max").value);
var nombres = document.getElementById("n1");
var nombre = document.createElement("div");
nombre.setAttribute("class", "nombre");
nombre.innerHTML = genererAleatoirement(bmin, bmax);
nombres.appendChild(nombre);
}
function genererAleatoirement(borneMin, borneMax)
{
if (borneMax < borneMin) return 0;
else return Math.floor(Math.random()\*(borneMax - borneMin + 1)) + borneMin;
}
</div>

3. **Générer pleins de nombres**

Générer 50 nombres d'un coup à l'aide d'une boucle `for` et de la fonction `genererAleatoirement`
comme dans l'exemple suivant.

<div class="script">
function generer2()
{
var bmin = parseInt(document.getElementById("borne_min2").value);
var bmax = parseInt(document.getElementById("borne_max2").value);
var nombres = document.getElementById("n2");
var nombre = document.createElement("div");
nombre.setAttribute("class", "nombre");
for (var i=0; i<50; i++)
{
nombre.innerHTML += genererAleatoirement(bmin, bmax)+", ";
}
nombre.innerHTML  = nombre.innerHTML.slice(0,-2);
nombres.appendChild(nombre);
}

</div>
## Faire bouger une fourmi

Télécharger l'image animée d'une fourmi 
<a href="/teaching/2017/internet_langages/fourmi.gif" download>
ici </a> et ajoutez la à votre répertoire.

4. **Faire bouger la fourmi**

En vous inspirant du TD précédant, essayez de reproduire l'exemple suivant. 
Vous aurez besoin des fonctions trigonométriques usuelles 
[cosinus](https://www.w3schools.com/jsref/jsref_cos.asp)
et [sinus](https://www.w3schools.com/jsref/jsref_sin.asp).

<div class="script">
var f1Posx = 250;
var f1Posy = 250;
var f1angle = 0;
var f1 = document.getElementById("f1");
function update()
{
f1.style.transform = "translate("+f1Posx+"px,"+f1Posy+"px) rotate("+f1angle+"deg)";
};
function avancer()
{
f1Posx += -Math.cos(2\*f1angle/360\*Math.PI) \* 50;
f1Posy += -Math.sin(2\*f1angle/360\*Math.PI) \* 50;
update();
}
function gauche()
{
	f1angle += -20;
	update();
};
function droite()
{
	f1angle += +20;
	update();
};
update();
</div>

#### Facultatif.

À l'aide de l'évènement [onkeydown](https://www.w3schools.com/jsref/event_onkeydown.asp) de 
l'objet document essayez
de diriger la fourmi avec les flèches directionnelless du clavier.

<div class="script">
var toggle = document.getElementById("toggleArrow");
var arrow=false;
function toggleArrow(){
if (!arrow){
toggle.value ="Désactiver les flèches";
window.onkeydown = function(event){
if(event.keyCode == 37) gauche();
if(event.keyCode == 38) avancer();
if(event.keyCode == 39) droite();
event.preventDefault();
}}
else{
toggle.value ="Activer les flèches";
window.onkeydown = function(){};}
arrow = !arrow;
}</div>

5. **Enfermer la fourmi dans une boite**

Quand la fourmi sors de son carré, elle disparaît. Faites en sorte <b>dans 
un nouvel exemple et sans toucher à la question 3</b>, 
qu'elle soit bloquée et ne puisse plus avancer.

<div class="script">
var f2Posx = 250;
var f2Posy = 250;
var f2angle = 0;
var f2 = document.getElementById("f2");
function update2()
{
f2.style.transform = "translate("+f2Posx+"px,"+f2Posy+"px) rotate("+f2angle+"deg)";
};
function avancer2()
{
f2Posx += -Math.cos(2\*f2angle/360\*Math.PI) \* 50;
f2Posy += -Math.sin(2\*f2angle/360\*Math.PI) \* 50;
var canvas2 = document.getElementById("canvas2");
if (f2Posx < 0)
{
	f2Posx = 0;
}
if (f2Posy < 0)
{
	f2Posy = 0;
}
if (f2Posx > canvas2.clientWidth - 30 )
{
	f2Posx =  canvas2.clientWidth -30 ;
}
if (f2Posy > canvas2.clientHeight -30 )
{
	f2Posy =  canvas2.clientHeight -30;
}
update2();
};
function gauche2()
{
	f2angle += -20;
	update2();
};
function droite2()
{
	f2angle += +20;
	update2();
};
update2();
</div>

6. **Une fourmi qui se déplace aléatoirement**

En utilisant la fonction `genererAleatoiremnt` 
vue dans le debut du TD5 faire en sorte que la fourmi se déplace 
aléatoirement en allant tout droit avec probabilité $\frac{2}{3}$
et en tournant  avec une probabilité $\frac{1}{3}$.
Lorsque la fourmi tourne, elle peut tourner en allant à droite 
ou à gauche. Elle peut tourner d'au plus 60 degrés avec une probabilité 
de tourner de 20 degrés de $\frac{1}{2}$, une probabilité de tourner de 
de 40 degrés de $\frac{1}{3}$ et une probabilité de tourner de 60 degrés de 
$\frac{1}{6}$.

Faites en sorte <b>dans 
un nouvel exemple et sans toucher à la question 3</b> de reproduire  l'exemple suivant
en respectant ces règles simples:

<div class="script">
var f3Posx = 250;
var f3Posy = 250;
var f3angle = 0;
var f3 = document.getElementById("f3");
function update3()
{
f3.style.transform = "translate("+f3Posx+"px,"+f3Posy+"px) rotate("+f3angle+"deg)";
};
function avancer3()
{
f3Posx += -Math.cos(2\*f3angle/360\*Math.PI) \* 50;
f3Posy += -Math.sin(2\*f3angle/360\*Math.PI) \* 50;
var canvas3 = document.getElementById("canvas3");
if (f3Posx < 0)
{
	f3Posx = 0;
}
if (f3Posy < 0)
{
	f3Posy = 0;
}
if (f3Posx > canvas3.clientWidth - 30 )
{
	f3Posx =  canvas3.clientWidth -30 ;
}
if (f3Posy > canvas3.clientHeight -30 )
{
	f3Posy =  canvas3.clientHeight -30;
}
update3();
};
function gauche3()
{
	f3angle += -20;
	update3();
};
function droite3()
{
	f3angle += +20;
	update3();
};
update3();
function marcheAleatoire3()
{
	var i = genererAleatoirement(0,2);
	if (i < 2){
		avancer3();
	}
	else{
		var j = genererAleatoirement(0,11);
		if (j<6)
		{
			tourne = function(){droite3()};
		}
		else
		{
			tourne = function(){gauche3()};
		}
		j = j-6;		
		if (j<3) tourne();
		if (j=3 || j==4)
		{
			tourne();
			tourne();
		}
		if (j= 5) 
		{
			tourne();
			tourne();
			tourne();
		}
	}
}
</div>

7. **Une fourmi qui marche toute seule**

C'est un peu ennuyeux de devoir appuyer sur le bouton 
en permanence. En utilisant la fonction [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) et en faisant particulièrement attention d'ajuster le temps des transitions
sur le temps passé en paramètre de cette fonction, essayez de faire en sorte que 
cette fourmi ce débrouille toute seule, comme dans l'exemple suivant:

<div class="script">
var f4Posx = 250;
var f4Posy = 250;
var f4angle = 0;
var f4 = document.getElementById("f4");
function update4()
{
f4.style.transform = "translate("+f4Posx+"px,"+f4Posy+"px) rotate("+f4angle+"deg)";
};
function avancer4()
{
f4Posx += -Math.cos(2\*f4angle/360\*Math.PI) \* 50;
f4Posy += -Math.sin(2\*f4angle/360\*Math.PI) \* 50;
var canvas4 = document.getElementById("canvas4");
if (f4Posx < 0)
{
	f4Posx = 0;
}
if (f4Posy < 0)
{
	f4Posy = 0;
}
if (f4Posx > canvas4.clientWidth - 30 )
{
	f4Posx =  canvas4.clientWidth -30 ;
}
if (f4Posy > canvas4.clientHeight -30 )
{
	f4Posy =  canvas4.clientHeight -30;
}
update4();
};
function gauche4()
{
	f4angle += -20;
	update4();
};
function droite4()
{
	f4angle += +20;
	update4();
};
update4();
function marcheAleatoire4()
{
	var i = genererAleatoirement(0,3);
	if (i < 2){
		avancer4();
	}
	else{
		var j = genererAleatoirement(0,11);
		if (j<6)
		{
			tourne = function(){droite4()};
		}
		else
		{
			tourne = function(){gauche4()};
		}
		j = j-6;		
		if (j<3) tourne();
		if (j=3 || j==4)
		{
			tourne();
			tourne();
		}
		if (j= 5) 
		{
			tourne();
			tourne();
			tourne();
		}
	}
}
setInterval(marcheAleatoire4, 900);
</div>

## Un objet foumi pour faire une fourmilière

8. **Un objet fourmi**

Nous voulons maintenant avoir une vrai fourmilière car la fourmi se sent 
un peu seule. 
Pour cela, il n'est pas souhaitable de 
recopier pour chaque fourmi le code que nous avons rentré. 
Nous allons donc utiliser pour cela un **objet**.
Relisez *très attentivement* la page dédiée aux objets sur 
le site de la W3schools à [cette adresse](https://www.w3schools.com/js/js_objects.asp).

Créez une fonction `nouvelleFourmi(boite)` où boite est un élément HTML `div` existant
servant de boite pour la fourmi et qui retourne un objet avec les propriétés suivantes:

* positionX (initialisée aléatoirement entre 0 et la largeur de la boite)
* positionY (initialisée aléatoirement entre 0 et la hauteur de la boite)
* angle  (initialisée aléatoirement entre 0 et 360)
* image (nouvel élément `img` crée dynamiquement et dont la propriété `src` pointe vers l'url de l'image de la fourmi)
* boite (l'argument de la fonction)

Cette objet doit également avoir les méthodes suivantes:

* tourneDroite() (modifie l'angle)
* tourneGauche() (modifie l'angle)
* avance() (avance dans la direction de l'angle)
* miseAJour() (met à jour la position réelle de la fourmi à l'aide d'une opération CSS `transform`)
* marcheAleatoire() (marche aléatoirement un coup en respectant les règles de la question 6)
* commence() (ajoute l'image à la boite et commence la marche aléaoire indéfiniment)

<div class="script">
function nouvelleFourmi(boite)
{
	var fourmi = {};
	fourmi.positionX = genererAleatoirement(0, parseInt(boite.clientWidth));
	fourmi.positionY = genererAleatoirement(0, parseInt(boite.clientHeight));
	fourmi.angle = genererAleatoirement(0, 259);
	fourmi.image = document.createElement("img");
	fourmi.image.src = "/teaching/2017/internet_langages/fourmi.gif";
	fourmi.image.setAttribute("class", "fourmis");
	fourmi.boite = boite;	
	fourmi.tourneDroite = function(){
		this.angle += -20;
		this.miseAJour();
	};
	fourmi.tourneGauche = function(){
		this.angle += 20;
		this.miseAJour();
	};
	fourmi.avance = function()
	{		
		this.positionX += -Math.cos(2\*this.angle/360\*Math.PI) \* 50;
		this.positionY += -Math.sin(2\*this.angle/360\*Math.PI) \* 50;
		if (this.positionX < 0)
		{
			this.positionX = 0;
		}
		if (this.positionY < 0)
		{
			this.positionY = 0;
		}
		if (this.positionX > this.boite.clientWidth - 30 )
		{
			this.positionX =  this.boite.clientWidth -30 ;
		}
		if (this.positionY > this.boite.clientHeight -30 )
		{
			this.positionY =  this.boite.clientHeight -30;
		}	
		this.miseAJour();
	};
	fourmi.miseAJour = function()
	{
		this.image.style.transform = "translate("+this.positionX+"px,"+this.positionY+"px) rotate("+this.angle+"deg)";
	};
	fourmi.marcheAleatoire = function()
	{
	var i = genererAleatoirement(0,2);
	var that = this;
	if (i < 2){
		this.avance();
		}
	else{
		var j = genererAleatoirement(0,11);
		if (j<6)
		{
			tourne = function(){that.tourneDroite()};
		}
		else
		{
			tourne = function(){that.tourneGauche()};
		}
		j = j-6;		
		if (j<3) tourne();
		if (j=3 || j==4)
		{
			tourne();
			tourne();
		}
		if (j= 5) 
		{
		tourne();
		tourne();
		tourne();
		}
		}
	};
	fourmi.commencer = function()
	{
		var that = this;
		this.boite.appendChild(this.image);
		setInterval(function(){that.marcheAleatoire();}, 900);		
	};
	return fourmi;
}	
function ajoutFourmi()
{
	var boite =document.getElementById("canvas5");
	var fourmi = nouvelleFourmi(boite);
	fourmi.commencer();	
}
</div>

9. **Une fourmilière**

On peut maintenant créer une véritable fourmilière directement:

<div class="script">
function ajoutFourmi2()
{
	var boite =document.getElementById("canvas6");
	var fourmi = nouvelleFourmi(boite);
	fourmi.commencer();	
}
for (var i=0; i<100;i++) ajoutFourmi2();
</div>

<div class="script2" style="display:none">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
Non c'est pas aussi simple que ça ;)
</div>
</div>
</div>
</div>
</div>
</div>
</div>