Les nouvelles technologies pour l’enseignement des mathématiques
Intégration des TICE dans l’enseignement des mathématiques

MathémaTICE, première revue en ligne destinée à promouvoir les TICE à travers l’enseignement des mathématiques.

DGPad - (Partie 2) : Scripts géométriques

Nous poursuivons l’exploration de DGPad d’un point de vue plus technique, en reprenant le principe des CarScripts de CaRMetal, mais sans son interface.

Article mis en ligne le 16 mai 2013
dernière modification le 24 août 2016

par Yves Martin

Après un tour d’horizon géométrique de DGPad dans la première partie de l’article, nous abordons l’extension naturelle de son utilisation qui consiste à modifier les scripts des figures, et à écrire des scripts interprétables par DGPad.
Cet article propose un premier tour d’horizon des possibilités sous forme de quelques exemples assez usuels. C’est l’occasion à chaque fois d’apporter des précisions sur la syntaxe à utiliser.

Mise à jour Juillet 2013
Désormais, sous Android, le navigateur standard est supporté et est très efficace pour utiliser DGPad.
Qui peut le plus peut le moins : on peut utiliser Chrome ou Firefox, ce dernier reste moins rapide pour le JavaScript.

Ajouter du JavaScript aux figures de DGPad

Comme la figure DGPad est, en pratique, un fichier JavaScript (mis en .txt pour des raisons d’exportation), toute modification JavaScript d’une figure est interprétable par DGPad. Chacun aura bien compris que, dans cette première version, il n’y a pas de gestionnaire de scripts comme dans CaRMetal, et donc que tout se fait manuellement dans le fichier de la figure initiale (par exemple).

Sur quelques scripts très classiques pour les programmeurs, nous allons illustrer quelques usages spécifiques à DGPad, et à l’occasion présenter des syntaxes ou techniques spécifiques.

Syntaxe
La syntaxe contient tous les mots clés de la géométrie, les mêmes que ceux des CaRScripts de CaRMetal (Point, Line, Segment, PerpendiculrBissector Circle, Circle3pts, etc). A ce vocabulaire JavaScript spécifiquement écrit pour DGPad, utilisé par les constructions géométriques, on va y ajouter, manuellement, tout complément en JavaScript standard, et en particulier les tests et les boucles.

Script et exportation
Si un script produit une figure dans DGPad, celle-ci est exportée comme une figure de DGPad, cela signifie qu’elle est décrite avec les objets géométriques de base : on n’exporte pas une boucle par exemple, on exporte ce qu’a produit la boucle.

On peut penser qu’une future version contiendra un éditeur de script.

Scripts géométriques
Comme il n’y a pas de nombres ni de coordonnées dynamiques qui puissent être utilisées actuellement, l’intérêt de certains scripts présentés ici est le regard géométrique qu’il impose sur des situations que l’on traiterait - que l’on a traité en CarScript - de manière analytique.
Le changement de cadre est parfois saisissant ...


Organisation de cette seconde partie de l’article (retour à la partie géométrique)

1. Sierpinsky : deux traitements de la fonction Polygon.
2. Koch Géométrique : les subtilités d’une utilisation de macro par appel dans un script.
3. Itération d’un carré avec un curseur : utiliser une macro pour s’affranchir du curseur qui est nécessairement géométrique.
4. Cesàro géométrique : reprise de l’algorithme de la courbe de Cesàro, mais avec un regard géométrique. Curseur circulaire.
5. Fils récursifs : tableau de fils avec fonction générique récursive. Applications
6. Galerie : Autres exemples.

Sierpinsky

Script transféré de CaRMetal : le triangle de Sierpinsky

On se propose de réaliser la figure dont voici une copie d’écran :

Un script de CaRMetal correspondant

C’est une version monochrome. Les sommets sont donc équivalents, il n’y a qu’un seul appel à la fonction principale.
Pour obtenir la figure colorée, il faut particulariser les sommets et donc faire trois appels différents à la fonction principale.

Le script DGPad

Commentaire sur ce script

• Partie 1 : les points initiaux
On commence par construire 3 points et leurs milieux, puis on trace les segments en marron. En fait ceci n’a lieu que parce que l’on veut différencier les sommets en terme de couleur.
Le début de la figure est fait avec le logiciel. On voit qu’il n’est pas nécessaire de nommer les objets « pour le logiciel » : sPQ sera nommé automatiquement par DGPad.
De même le STLyle des objets est rédigé de manière minimale : « h:1 » signifie que l’objet est caché (pour « Hide=True »).

• Partie 2 : la fonction Sierpinsky
Elle est standard au sens qu’elle est en complètement en JavaScript comme pour la version CaRMetal : on prend les milieux des trois points, on construit le polygone de ces trois point (voir point suivant), puis on applique Sierpinsky à l’un des sommets initiaux et aux deux autres points correspondant, par permutation circulaire.
Comme on a choisi de mettre des couleurs différentes par sommet, on différencie les couleur en appelant trois fois la procédure Sierpinsky, une fois par sommet.

• Partie 3 : La chaine de caractère pour Polygon

Dans cette partie, on revient sur les deux lignes qui construisent et affichent le polygone, et on expose une autre façon de faire.

vpol=i+« , »+j+« , »+k ;
LePoly=Polygon(« LePoly »,vpol) ;STL(LePoly,couleur) ;

La fonction Polygone attend une chaine de caractères de point, typiquement quelque chose comme Polygon(« A, B, C, D »).

On voit ci-dessus qu’une façon de construire une chaine de caractères conforme à la syntaxe de la fonction Polygon est d’ajouter des variables points séparés par des virgules. Le typage automatique donne alors à la variable vpol le type « string » (chaine de caractères).

Autre façon de faire - Précision sur les scripts

Si, avec des variables JavaScript, on est amené à placer des données dans une chaine de caractère, alors il faut passer ces variables par contenu, c’est-à-dire, traditionnellement, avec la syntaxe _x pour une variable x. On dit aussi que l’on a parsé la variable.
Comme pour CaRMetal, en parsant une variable elle est passée par contenu au logiciel, et dans le cas d’un point, c’est son nom qui est passé - donc une chaine de caractère.

Mais il y a un problème dans DGPad, et c’est pour cela que ce paragraphe a été écrit. Pour le moment, et pour encore un certain temps, ne peuvent être parsées que les variables globales (en tout cas pour Polygon).

La solution consiste alors à initialiser des variables globales (à 0 cela suffit, même si elles vont ensuite devenir des points) puis à copier les variables locales dans ces variables globales et faire le polygone avec. Ainsi les deux lignes analysées plus haut deviendraient :

ig=i ;jg=j ;kg=k ;
LePoly=Polygon(« LePoly »,« _ig,_jg,_kg ») ;STL(LePoly,couleur) ;

Et dans le corps du programme, avant le premier appel à Sierpinsky, on doit définir et initialiser ces trois variables globales par :

ig=0 ;jg=0 ;kg=0 ;

C’est donc une autre écriture d’un polygone, qui peut être utile par exemple quand une partie des points est fixe et que l’on doit utiliser quelque chose de mixte comme Polygon(« A,_x,C,_y »).

• Partie 4 : Traitement du nom dans les boucles

Le nom externe du polygone est construit à partir de la racine LePoly qui est automatiquement indexée par le logiciel comme tous les noms des autres objets. Ainsi, même en ne donnant que le nom LePoly on donne la racine d’un nom qui sera indexe en LePoly1, LePoly89, etc.
Autrement dit, il n’est plus nécessaire, comme avec les CaRScripts de CaRMetal, de mettre un nom du type « LePoly »+ii est une variable de boucle par exemple ou un compteur quelconque.

Bien entendu, on peut avoir envie d’indexer des objets à sa façon pour y avoir ensuite accès dans un algorithme, mais c’est une autre question.

Variante sur ce script proposée en exercice

Modifier le script pour que les couleurs ne soient plus dans les régions des sommets A, B et C, mais que ces sommets orientent vers une couleur : quand un triangle intermédiaire est dans la direction d’un sommet, il prendra la couleur de ce sommet. Cela donne ceci :


Bilan de ce premier exemple

• On retiendra de cet exercice la méthode de constructions de chaines de caractères à partir de points pour éviter l’utilisation de variables parsées.
• On a vu que si les variables locales d’une fonction doivent être parsées pour être utilisées dans un objet géométrique - dans une chaine de caractères - on utilisera des variables globales qui prennent les valeurs locales pour la construction de cet objet géométrique.
• Dans une itération, il suffit de donner un nom générique - un préfixe - aux objets géométriques, ils seront automatiquement indexés par le logiciel.

Retour à la barre d’onglets

Koch Geom

Koch géométrique : exécuter une macro dans un script

Nous avons vu que, dans l’usage standard des macros, celles-ci sont appliquées et non pas appelées.

Bien entendu, si on entre dans le code d’une figure, alors on peut appeler une macro et l’exécuter. La syntaxe est alors celle-ci :

t=$macros[« NomDeLaMacro »].exec(LesObjetsInitiaux) ;

exemple : t=$macros[« Div3AB_parC »].exec(P,Q,R) ;

La macro est désignée par son nom, et elle est exécutée avec des objets initiaux donnés.

Attention

Il est important de n’avoir qu’une unique variable pour le retour des données de la macro. Ici la macro renvoie deux points, mais une syntaxe de style Python comme

[u,v]=$macros[« Div3AB_parC »].exec(P,Q,R) ;

fonctionnera correctement sous Firefox dont le JavaScript sait interpréter l’affectation parallèle, mais cela ne fonctionnera ni sous Chrome, ni sous Safari.

Spécificité d’une macro appelée par un script

.

En utilisation standard, chacun a pu observer que les macros ne contiennent pas de styles des objets intermédiaires : dans l’application des macros, ils sont tout simplement cachés. Au passage cela signifie que les macros ne peuvent pas conserver les attributs des objets (couleur, taille, etc) au moment où elles sont construites

Quand on appelle une macro dans un script, on ne passe plus par la procédure standard de construction des objets intermédiaires. Cela signifie qu’il faut cacher « à la main » tous les objets intermédiaires dans le corps de la macro.

Voyons cela, concrètement, sur cette autre figure classique, la courbe de Koch. Le script suivant produit cette figure :


Commentaires sur le code

Pour construire la courbe de Koch, il faut commencer par diviser le segment en 3. Pour cela, comme on ne dispose pas de données numériques utilisables, la macro est géométrique (propriété de Thalès) et donc nécessite un point extérieur C pour partager le segment [AB] : mettre un point extérieur au coeur de la macro évite de construire nombre de points intermédiaires si ce point C devait être construit à partir des deux points A et B.

La macro Div3AB_parC renvoie les deux points du partage. On voit que chaque point intermédiaire est caché, dans la macro. Ceci est ajouté par le concepteur de la macro. En pratique on fait la macro dans DGPad, on récupère son code par l’outil exportation, et on continue dans un traitement de texte.

La fonction KochGeom a trois paramètres, P et Q du segment [PQ] qu’elle va traiter et un point extérieur R pour utiliser la macro Div3AB_parC.
Elle commence par découper [PQ] en 3. la variable t est une liste, on récupère donc les points par t[0] et t[1]. Puis on construit un triangle équilatéral. Il sera toujours orienté de la même façon à cause du choix 0 des intersections des cercles.

Appel récursif de KochGeom : puis la fonction s’appelle 4 fois, pour chaque segment. Pour cet appel, on utilise un troisième point non aligné avec les deux premiers pour l’application de la macro.

Le corps principal du script : on construit d’abord un premier point C non aligné avec A et B pour pouvoir appliquer la macro, et on lance l’application récursive.

On pourra trouver, avec raison, le corps du texte vraiment mal organisé (comme pour l’exemple 1), c’est juste pour montrer que presque tout est possible ;-)

Bilan de cet exemple

• On peut appeler les macros dans un script. Dans ce cas la syntaxe est du type : t=$macros[« NomDeLaMacro »].exec(SesParametres) ;
• Pour cela il convient de cacher à la main tous les objets intermédiaires de la macro.
• Si la macro retourne un seul objet, t est cet objet
• Sinon t est une liste qui contient les objets, on les récupère par t[0], t[1], etc .

Retour à la barre d’onglets

Curseur linéaire

Itération d’une figure dépendant d’un curseur

On se propose cette fois de faire la figure suivante, toujours dans le contexte du DGPad de avril 2013 où il n’y a pas de nombres et donc pas de coordonnées :



Construction préliminaire

Pour cela on fait une première construction dans DGPad : le curseur, le carré initial, et le premier point A1 pour préparer la première itération.

Le curseur va de 0 à 0,2 et quand il est à 0 on veut que le point A1 soit en A. On commence donc par une construction comme celle-ci :

Attention ceci n’est qu’une illustration : on ne peut pas donner des nombres décimaux comme nom de points !

Voir le code de la construction préliminaire

Macro-construction « CarreItere » : détermination de A2

À partir du premier carré et de A1 on se propose de construire le carré suivant, de centre O, de sommet A1, et surtout le point A2 qui prépare l’itération suivante. L’idée est de ne pas utiliser le curseur pour éviter les points intermédiaires superflus reconstruits à chaque itération.

La figure est faite dans DGPad, transformée en macro, et ensuite adaptée pour être appelée dans une itération (adaptée = cacher les objets intermédiaires).

À partir du premier carré (O, A, B, C, D), du segment [BC] et du point A1 précédemment construit, la macro renvoie les points du carré suivant, le trace (d’une couleur précise), et renvoie sur [A1B1] le point suivant A2.

Il suffit alors de faire une itération de cette macro.

Itération de la macro

Cela se fait dans une simple boucle

Ces quelques lignes sont le coeur de la figure, on voit tout l’intérêt de l’itération.

En pratique, dans le coeur du programme (//Geometry) on supprime la partie qui a servi à faire la macro CarreItere pour appliquer l’itération depuis le début.

On voit bien que la non disponibilité des nombres et des coordonnées nous amène à trouver d’autres stratégies : le changement de cadre nous oblige à reconsidérer nos pratiques.

Voici par exemple la méthode utilisée dans CaRMetal : si le principe est le même - construction du nouveau carré, et itération - la démarche est analytique au lieu d’être géométrique. Elle est plus courte, plus immédiate par le calcul, pas nécessairement plus facile.

Bilan de ce troisième exemple

On a vu :

• L’utilisation géométrique d’un curseur, sans données numériques
• Une construction préliminaire qui va rendre l’itération autonome, au sein de la figure, sans référence au curseur.
• La construction d’une macro plus complexe qui utilise les points de la figure pour s’affranchir du curseur externe.
• le principe d’itération, classique
• la comparaison avec la version analytique (CaRMetal) non encore disponible dans DGPad au moment de la rédaction de cet article.

Retour à la barre d’onglets

Cesaro Geom

Récursivité et curseur : Construction géométrique de la courbe de Cesàro

Il s’agit d’une variante de la courbe de Koch, où le triangle équilatéral devient seulement isocèle. Les 4 côtés - avant et après le triangle et du triangle - étant toujours égaux, ils sont variables et dépendent de l’angle du triangle isocèle.

La version CaRMetal - que l’on peut lancer en ligne ici - a ceci de remarquable que une fois lancé le script, on peut modifier l’angle pendant l’exécution du script, ce qui donne de nouvelles représentations visuelles de la récursivité dont voici deux instantanés (et le script associé) :

Dans ce script, on calcule les coordonnées des trois extrémités du triangle. On notera au passage la technique qui consiste à mettre les cosinus, sinus et longueurs dans une chaine de caractère et d’appeller ensuite dans le script ces variables par contenu, ce contenu n’étant pas une valeur numérique comme on pourrait le croire, mais bien une expression algébrique - c’est le ’contenu’ de la chaine - ce qui renvoie ainsi les expressions dans le logiciel, comme illustré avec une copie d’écran des coordonnées d’un point.

La version DGPad

Elle doit être repensée géométriquement puisque nous disposons pas encore de coordonnées et d’expressions algébriques utilisables dynamiquement.

C’est donc un regard différent qu’il faut poser sur la figure de base, qui s’avère, en définitive d’un abord plus simple, même s’il amène, bien entendu, à beaucoup plus d’objets intermédiaires. Regardons la construction sur le premier niveau :

• L’angle n’est plus un curseur linéaire, mais il est donné par l’angle IOM, M variable sur un quart de cercle.
.
• Le sommet V du triangle du niveau 1 est sur la médiatrice de [AB].
• Puisque l’angle WUV est l’angle IOM, et que AUV est isocèle, l’angle UAV est égal à IOM/2. Pour construire la direction [AV), on peut ainsi quadrisecter IOM - c’est l’angle IOP - et faire la composée de deux symétries orthogonales d’axes passant par A et paralléles à (OI) - en vert - et (OP) - en rouge.
• On trouve ainsi V comme intersection de deux droites et U à l’intersection de (AB) et de la médiatrice de A et U. W est le symétrique de U par rapport à la médiatrice de A et B déjà construite pour trouver V.

On a ainsi une construction géométrique du premier pas de la courbe de Cesàro. Puis on applique une récursivité comme dans les CarScripts. Ce qui donne :

La version analytique (CarScript) permet d’aller à la profondseur 4. Avec la version géométrique, il est plus prudent de s’arreter à la profondeur 3.

Voici ce que cela donne. Mais comme pour les autres scripts, comme il n’y a pas - pas encore de lanceur de script dans DGPad, on ne peut voir et manipuler que la figure achevée, on ne peut pas lancer le script en ligne, comme on peut le faire dans CaRMetal par exemple.



Voir le code complet du script

(fin du bloc)

Retour à la barre d’onglets

Fils récursifs

Tableaux de fils avec fonction récursive

Les versions itératives

Faire des tableaux de fils est quelque chose de trés simple dès que l’on a l’algèbre. Cela peut se faire, avec l’élégance de la notation de Grassmann par des séquences de Geogebra :

ou de manière plus classique (écriture analytique standardisée) avec des CarScripts :

La version DGPad itérative de Alain Busser

Comme dans cette version de DGPad, on ne peu guère que prendre que des milieux, l’idée est venue à Alain Busser de faire des tableaux de fils en itérant les milieux : soit en partageant les segments en une puissance de 2. DGPad existait alors depuis deux semaines seulement ...

Donc il a dû faire un algorithme qui écrivait « horizontalement » les noms des points tout en les construisant « verticalement ». Trés bel exercice de style - à réutiliser en formation par exemple - que l’on peut découvrir dans cet article de l’IREM de La Réunion (second onglet)

Alors en plein dans la récursivité sur DGPad, je lui ai proposé une version récursive, puis rédigé l’onglet suivant, que je reprends et développe un peu plus ici.

Au passage, Alain propose, dans un quatrième onglet, une version générique pour un pas quelconque aussi, tout simplement en utilisant la propriété de Thalès ....

Le principe d’une approche récursive

Soient trois point O, A, B, on veut construire un tableau de fils entre [OA] et [OB]. Pour cela :

On prend les milieux I et J des deux segments, on construit le segment [IJ].
Puis on itère - de manière récursive - ce qui vient d’être fait sur les couples de segments ([OI], [JB]), puis ([IA],[OJ]).

Ce qui donne pour la fonction récursive :

Et pour la figure associée


Quelques applications

Bien entendu, à partir de cette première construction, chacun se peut laisser à ses propres fantaisies :



Exercice de compilation

On peut s’amuser à mettre des tableaux de fils et des curseurs, comme par exemple cette figure :

On notera que ces figures ne sont pas optimisées car par l’appel récursif de la fonction fils, on crée deux fois chaque point d’un segment.

On pourrait donc reprendre cela, en nommant les points, ce qui économiserait quasiment la moitié des points créés.

Retour à la barre d’onglets

Galerie

Itération sur pentagone


Exemple de tableau de fils sur cube en perspective cavalière


Exercice de style : faire cette néphroïde là ...


... plutôt que celle-ci


retour à la présentation de l’aspect géométrique de DGPad

Rappels d’utilisation

Site : www.dgpad.net

Environnement :
Sous Android, on peut utiliser le navigateur standard de la tablette, mais aussi Chrome, éventuellement Firefox, moins rapide.
Sous iOS, utiliser Chrome ou Safari
Avec un ordinateur : Firefox, Chrome, Safari (mais pas IE).

Téléchargement des scripts de cet article (13 mai 2013)