tortue

La tortue logo.

La tortue logo est un logiciel qui a été écrit (dans les années 1970) pour l'apprentissage de la programmation.

Exemple : à cette adresse, vous pouvez tester une tortue logo. Copiez-collez par exemple le code suivant : av 150 td 120 av 150 td 120 av 150 dans la ligne de commande (haut de la page) et validez (en cliquant sur la petite icône verte). Observez le résultat.

Pour comprendre ce résultat, il suffit de savoir ce que signifie les commandes utilisées. Le principe est que l'on dispose d'une petite tortue (ou de n'importe quel personnage) qui se déplace dans l'écran en laissant des traits de crayon sur son passage.

av 150 signifie "avance de 150" (sous-entendu 150 unités, l'unité dépendant de l'implémentation, ce peut être par exemple 150 pixels).
td 120 signifie que la tortue tourne sur sa droite de 120 degrés.

A l'aide de ce premier exemple, essayez par exemple de tracer un carré dans l'application en ligne ciblée.

Un tel code pourrait ressembler à ceci :

av 200 td 90 av 200 td 90 av 200 td 90  av 200

On voit, via ce simple exemple, en quoi les notions de programmation interviennent naturellement ici :

le même code apparaît plusieurs fois : on pourrait donc faire intervenir une boucle for pour ne l'écrire qu'une fois.
Si on veut modifier la taille du carré, on est ici obligé de tout réécrire : faire intervenir des variables éviterait cela.
De même, si l'on veut augmenter le nombre de côtés du polygone tracé, des paramètres éviteraient d'avoir à tout recoder.

Dans l'application ciblée ci-dessus, on pourrait écrire (voir la page de documentation en cliquant sur le mot tutoriel dans la gauche de la page) :

pour carre :x repete 4 [av :x td 90] fin

carre 100

La première ligne définit une fonction dessinant un carré de côté x, la seconde ligne utilise cette fonction pour dessiner un carré de côté 100.

La tortue svg

Ci-dessous, on donne un code permettant de reproduire quelques-unes des commandes de base de la tortue en produisant le tracé en svg.

Vous chercherez à comprendre le principe : à chaque ordre donné à la tortue, on calcule la nouvelle position de la tortue et on stocke les nouvelles coordonnées dans un tableau. On parcourt ensuite ce tableau pour définir des éléments svg line.

Vous utiliserez ce script dans les exercices en ne modifiant que le script d'utilisation (second script du code ci-dessous).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> tortue </title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script>  
    </head>
    <body>
<svg id="cadreSVG" style="width:200px; height:200px;"> </svg>	
 		
 
<script>
// valeurs extrêmes prises par la figure  terminée 
// ces valeurs sont mises à rouge au fur et à mesure des ordres
// donnés à la tortue
var xmin;
var xmax;
var ymin;
var ymax;
// coordonnées du point de départ
var xdepart;
var ydepart;

// dans tcrayon, on aura des lettres "b" et "l" 
// tcrayon[2] = "b" signifie qu' on rejoint le point 1 au point 2 crayon baissé
var tcrayon = [];
// dans tcouleur, on aura des couleurs
// tcouleur[2] = "red" signifie qu' on rejoint le point 1 au point 2  en rouge
var tcouleur = [];
// dans tepais, on aura des nombres
// tepais[2] = 3 signifie qu' on rejoint le point 1 au point 2  avec une épaisseur de crayon 3
var tepais = [];
// contiendra les abscisses des points successifs  
var tabscisse = [];
// contiendra les ordonnées des points successifs  
var tordonnee = [];


// trace = true : la tortue trace ses déplacements
// trace = false : la tortue ne trace pas ses déplacements
var trace = false; 

 
// vecteur unité dans la direction de la tortue.
// vecteurUnite * distance sera donc le vecteur de translation
// de la tortue si on lui demande de parcourir une longueur distance
var vecteurUniteDirectionTortue = { x: 1, y: 0};

// angle entre le vecteur (1;0) (unité abscisse) 
// et vecteurUniteDirectionTortue (vecteur de la queue vers la tête)
var angleActuel = 0;
// abscisse en cours
var xactuel;
//ordonnée en cours
var yactuel;
// épaisseur en cours pour le crayon
var epaisseuractuelle = 1;
// couleur actuelle :
var couleuractuelle = "black";


function epaisseur(e)
{//fonction pour changer épaisseur de tracé
	epaisseuractuelle = e;
}

function couleur(c)
{// fonction pour changer couleur de tracé
	couleuractuelle = c;
}

function depart(abscisse,ordonnee)
{
	 xdepart = abscisse;
	 ydepart = ordonnee;
	 xactuel = abscisse;
	 yactuel = ordonnee;
	 xmin = abscisse;
	 xmax = abscisse;
	 ymin = ordonnee;
	 ymax = ordonnee;
	 amenerTortueAPosition(abscisse, ordonnee);
}

function miseAJourExtremes()
{
	if ( xactuel < xmin ) { xmin = xactuel;}
	if ( xactuel > xmax ) { xmax = xactuel;}
	if ( yactuel < ymin ) { ymin = yactuel;}
	if ( yactuel > ymax ) { ymax = yactuel;} 
}


function tournerTortue(angle)
{
	// angle en degrés
	// angle=90 : tourne quart de tour dans le sens vecteur(1;0) vers vecteur(0;1)
	// angle=-90 : tourne quart de tour dans le sens vecteur(0;1) vers vecteur(1;0)
	  angleActuel += angle; //  += : il s'agit ici d'une rotation relative
	  vecteurUniteDirectionTortue.x = Math.cos(Math.PI/180 * angleActuel);
	  vecteurUniteDirectionTortue.y = Math.sin(Math.PI/180 * angleActuel);
} 


function orienterTortueDansDirection(angle)
{
	// angle en degrés
	  angleActuel = angle; // = et non += : orientation absolue de la tortue
	  vecteurUniteDirectionTortue.x = Math.cos( Math.PI/180 * angleActuel);
	  vecteurUniteDirectionTortue.y = Math.sin( Math.PI/180 * angleActuel);
} 

function donnerCrayonATortue()
{
	trace = true;
}

function enleverCrayonATortue()
{
	trace = false;
}

function pousserTortue(distance) 
{
	// déplacement relatif à la position actuelle
	if (trace)
	{
		tcrayon.push("b");
	}
	else
	{
		tcrayon.push("l");
	}
	
	// on ajoute maintenant les coordonnées du point visé :
	var abscisse = distance * vecteurUniteDirectionTortue.x;
	var ordonnee = distance * vecteurUniteDirectionTortue.y;
	
	xactuel += abscisse; 
	yactuel += ordonnee;
	
	tabscisse.push(xactuel);
	tordonnee.push(yactuel);
	tepais.push(epaisseuractuelle);
	tcouleur.push(couleuractuelle);
	 
	miseAJourExtremes();
}

function amenerTortueAPosition(x, y) 
{
	// déplacement absolu au point de coordonnées (x,y)
	if (trace)
	{
		tcrayon.push("b");
	}	
	else
	{
		tcrayon.push("l");
	}
	 
  	xactuel = x; yactuel = y;
  	tabscisse.push(xactuel);
	tordonnee.push(yactuel);
	tepais.push(epaisseuractuelle);
	tcouleur.push(couleuractuelle);
  	miseAJourExtremes();
}


function axeOrdonneeVersleHaut()
{//traite les ordonnées afin de retrouver un axe orienté vers le haut
// permet du coup que tournerTortue(90) corresponde à un quart
// de tour sur la gauche 
	
	for(var i = 0; i < tordonnee.length; i += 1)
	{
		tordonnee[i] = ymax+ymin-tordonnee[i];
	}
	
}


function miseAechelle()
{
	// traitement des abscisses et des ordonnées 
	// pour ramener la figure tracée dans la box de l'élément svg
	
	// récupération de la largeur et de la hauteur de l'élément svg :
	var largeur = document.getElementById("cadreSVG").style.width;
	var hauteur = document.getElementById("cadreSVG").style.height;
	largeur = parseInt(largeur);// transfo en nb (on enlève l'unité px)
	hauteur = parseInt(hauteur);
	
	//on augmente un peu xmax, ymax  et diminue xmin, ymin
	// pour laisser un peu de marge entre la figure et les bords
	// de la box de l'élément svg 
	var k = 0.05;
	var deltax = k * (xmax -xmin);
	var deltay = k * (ymax - ymin);
	xmax += deltax ;
	ymax += deltay;
	xmin -= deltax;
	ymin -= deltay;

	// on ramène tout à la plage de données [0;largeur] en x et [0;hauteur] en y :
 	xdepart = largeur/(xmax-xmin)  * ( xdepart - xmin);
 	ydepart = hauteur/(ymax-ymin)  * ( ydepart - ymin);
	for(var i = 0; i < tabscisse.length; i += 1)
	{
		tabscisse[i]  = largeur/(xmax-xmin) * ( tabscisse[i] - xmin);
		tordonnee[i]  = hauteur/(ymax-ymin)  * ( tordonnee[i] - ymin);
	}
}


function miseAechelleNormalise()
{
	// traitement des abscisses et des ordonnées 
	// pour ramener la figure tracée dans la box de l'élément svg
	
	// on fait en sorte d'avoir les mêmes unités dans les deux directions principales
	
	// récupération de la largeur et de la hauteur de l'élément svg :
	var largeur = document.getElementById("cadreSVG").style.width;
	var hauteur = document.getElementById("cadreSVG").style.height;
	largeur = parseInt(largeur);// transfo en nb (on enlève l'unité px)
	hauteur = parseInt(hauteur);
	
	dimensionFenetre =  Math.min(largeur, hauteur);
	
	//on augmente un peu xmax, ymax  et diminue xmin, ymin
	// pour laisser un peu de marge entre la figure et les bords
	// de la box de l'élément svg 
	var k = 0.01;
	var deltax = k * (xmax -xmin);
	var deltay = k * (ymax - ymin);
	xmax += deltax ;
	ymax += deltay;
	xmin -= deltax;
	ymin -= deltay;
	
	dimensionFigure = Math.max(xmax-xmin, ymax-ymin);
	

	// on ramène tout à la plage de données [0;dimensionFenetre] en x et [0;dimensionFenetre] en y :
 	xdepart = dimensionFenetre/dimensionFigure  * ( xdepart - xmin);
 	ydepart = dimensionFenetre/dimensionFigure  * ( ydepart - ymin);
	for(var i = 0; i < tabscisse.length; i += 1)
	{
		tabscisse[i]  = dimensionFenetre/dimensionFigure * ( tabscisse[i] - xmin);
		tordonnee[i]  = dimensionFenetre/dimensionFigure  * ( tordonnee[i] - ymin);
	}
}




function dessiner(option = "normal")
{
	var fenetre = Snap("#cadreSVG");
	axeOrdonneeVersleHaut();
	if (option === "normal") {miseAechelleNormalise();}
	else {miseAechelle();}
	var x = xdepart;
	var y = ydepart;
	 
	for(var i = 0; i < tabscisse.length; i += 1)
	{
	
		var segment = fenetre.line(x,y, tabscisse[i], tordonnee[i]);
		if ( tcrayon[i] === "b" ) 
		{ 
			segment.attr("stroke", tcouleur[i]);
			segment.attr("stroke-width", tepais[i]);
		}
		else  { segment.attr("stroke", "none"); }
		
		x = tabscisse[i];
		y = tordonnee[i];
	}
	
}



</script>

<script>
depart( 0,0);
donnerCrayonATortue();

couleur('red');
pousserTortue(50) ; 
tournerTortue(90);
  
couleur('green');
epaisseur(5);
pousserTortue(30)  ;  
tournerTortue(90);
  
couleur('brown');
epaisseur(1);
pousserTortue(40)  ;  
 
dessiner("non normalisé");
</script>
</body>
</html>

Pour y voir plus clair, on enregistre le code du premier script dans un fichier littleTurtle.js et on fait appel à ce fichier. On peut ainsi ne conserver que la partie qui sera à modifier :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> tortue </title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script>  
    </head>
    <body>

 
<svg id="cadreSVG" style="width:200px; height:200px;"> </svg>	
 		
 
<script src="fichiers/littleTurtle.js"></script>

<script>
depart(10,10);
donnerCrayonATortue();
 
pousserTortue(20);
tournerTortue(90);

couleur('red');
pousserTortue(20);
tournerTortue(90);

 
couleur('green'); 
epaisseur(5);
pousserTortue(20);
tournerTortue(90);

couleur('brown'); 
epaisseur(0.2);
pousserTortue(20);
tournerTortue(90);

dessiner();
</script>
</body>
</html>