La géométrie dynamique
Aide à la lecture et à l'étude
Sections visibles Sections masquées dupliquer .les ('exemples') (dansle fourre-toutci-dessous) ; effacer ('le fourre-tout')
Ce qui suit est un graphique dynamique
planchesde géométrie dynamique
Le module GeoDyn permet d'insérer facilement de la géométrie dynamique dans ses documents en exploitant le module externe JSXGraph, dont on peut voir de nombreux exemples d'application.
Ce module s'utilise donc avec JSXGraph, module très légèrement adapté du site originel pour être directement interfacé avec GeoDyn :
Si la version 0.92 a l'avantage d'être un peu plus rapide au chargement à l'exécution, elle a l'inconvénient de quelques bugs d'affichage mineurs parfois gênants (quadrillage du plan incomplet lors de certains déplacements de la figure ; tracé trop anguleux des courbes représentatives de fonctions, en particulier lors des zooms).
Pour éviter les points anguleux apparaîssant parfois dans le tracé de courbes à faible courbure, on peut utiliser la fonction spécifique faibles_courbures_sur(p) où p est une planche de GeoDyn. C'est par exemple utile pour tracer convenablement certaines fonctions homographiques.
A priori ce module n'a d'intérêt que pour enseigner ou étudier les Mathématiques, en permettant des constructions programmées via des instructions linguistiques ancrées dans un vocabulaire usuel en Mathématiques.
Rien n'empêche évidemment de l'utiliser pour construire des graphiques à partir de données statistiques par exemple, ou encore pour élaborer des figures uniquement pour leur caractère esthétique. Néanmoins, la connaissance de mathématiques reste essentielle, au moins à un niveau élémentaire, si l'on veut en tirer profit, en particulier pour faire mieux qu'avec des outils classiques de dessin, ceux qui présentent une IHM complexe sans pour autant rendre accessible la mathématique sous-jacente, c'est à dire finalement sans permettre une ouverture totale à la puissance créatrice de l'utilisateur.
On peut utiliser JSXGraph sans AlgoDok (car cette API a été conçue pour être utilisée seule), mais ceci nécessite des connaissances pointues en Javascript, incompatibles avec celles d'un simple concepteur de documents applicatifs, relativement pressé et peu au fait de certaines subtilités de la programmation par objets. Ces propos n'enlèvent rien à la qualité de JSXGraph mais le lecteur peut quand même en étudier un exemple simple ou un autre, moins simple pour se faire sa propre idée.
La démarche adoptée est donc opposée à celle d'autres outils de géométrie dynamique qui privilégient les menus et les boîtes à cocher pour créer des figures, en laissant a priori l'initiative à un apprenant plutôt qu'à un enseignant. Ici, comme on ne manipule que des éléments de type HTML, on a le net avantage de pouvoir inclure directement des figures dans un document applicatif, et de permettre de programmer des constructions au lieu de répéter mécaniquement des va-et-vient au sein d'une IHM figée. C'est pour cette raison que l'IHM associée à une planche est minimaliste : chacun fait alors celle qui lui convient, en fonction de son texte donc du contexte.
cacher ('le préliminaire')
Pour définir une planche de géométrie dynamique au sein d'un document applicatif
(décrit en HTML),
GeoDyn n'exige que la présence d'une division qui va l'héberger. Dans ce document, ce sera
par exemple la figure 1
:
Si la division la figure 1
est contenue dans une division, c'est
uniquement pour la déplacer à la souris via ses poignées (orangées),
car souvent on préfèrera que les graphiques suivent le flux du texte,
comme dans ce document (pour quatre des cinq planches).
Alors on comprend facilement l'instruction (cliquable) :
PL_1 = nouvelle .planche ("la figure 1") qui crée un objet
reconnu par JSXGraph, nommé ici PL_1 et que GeoDyn reconnaît aussi comme
la figure 1
.
Le quadrillage et les graduations montrent qu'on travaille dans un
plan rapporté à un repère orthogonal.
Une classe spéciale, conteneur graphique, a été définie pour donner l'opportunité d'apporter à un conteneur de planche déplaçable un aspect particulier, facilement exprimable par une classe ; il suffit ici de commuter ("la figure 1") .sur ("marbrée") pour en voir le principe, en notant la différence avec commuter (le .conteneur .de ("la figure 1")) .sur ("marbré").
Une fois la planche créée, on aperçoit un petit menu dans sa partie inférieure droite, complété par deux actions : le zoom avec la molette de la souris et le ⬆-Glisser (⬆ = Shift : avec l'index gauche pour un droitier) permettant de déplacer la zone de visibilité du plan.
Après cette simple prise en main d'une planche vierge de toute construction,
il reste à la piloter
pour construire des figures géométriques.
cacher ('la partie HTML')
RAPPEL : toute instruction linguistique est testable via la mémoire à instructions, quel que soit le document applicatif, et toute instruction cliquable est récupérable (dans sa forme originelle) dans la mémoire à instructions avec un simple clic-droit.
On peut borner une planche via une instruction de la forme borner (une planche) .par (xmin, xmax, ymin, ymax) comme sur l'exemple : borner (PL_1) .par (-5,8,-4,9). On peut utiliser avec au lieu de par, et passer un tableau au lieu de 4 nombres : borner (une planche) .par ([xmin, xmax, ymin, ymax]).
Pour obtenir un repère orthonormé, il suffit de passer indéfini pour l'une des bornes : GeoDyn se charge de la calculer pour avoir un repère orthonormé. Le lecteur peut s'entraîner avec le script éditable suivant.
Pour connaître les bornes d'une planche on utilise la fonction bornes qui fournit un tableau : alerter(bornes(PL_1)) ;
Pour alléger le graphique on peut faire comme suit, avec un vocabulaire ad hoc : déquadriller (PL_1), désaxer (PL_1), quadriller (PL_1) ou axer (PL_1).
Le lecteur pressé de voir des exemples peut passer directement aux premières instructions de construction.
Certaines valeurs exploitées par GeoDyn peuvent être modifiées dynamiquement, sans nécessité de modification de l'ILO. Ceci permet donc à d'autres modules, en quelque sorte, de modifier dynamiquement cette dernière.
Avec GeoDyn.sd on peut indiquer de signaler ou non les éléments en double,
c'est à dire définis avec le même nom par deux instructions soit.
C'est un choix puisqu'on peut décider de montrer les différentes
position d'un point mobile
en fonction d'une variable. Par défaut
GeoDyn.sd = true.
De même, avec GeoDyn.nkd on peut indiquer de créer ou non les éléments en double ;
par défaut GeoDyn.nkd = true (ne pas créer de double).
C'est aussi de cette manière indirecte que l'on peut définir des styles de traits et de surfaces. Par défaut on dispose de :
Aux couleurs de base on peut ajouter soit Fin soit Orangé, par exemple bleuFin.
On peut redéfinir ces styles de trait
(en fait pour des lignes et des surfaces)
par de nouvelles affectations, comme peut
en définir de nouveaux, autant qu'on veut, en s'inspirant des
exemples ci-dessus. Le mieux est alors de mettre tout ce qui est utile
dans un fichier Styles.js, qu'il suffit de modifier (ou de remplacer)
pour changer le style de l'ensemble des figures construites.
On peut définir autant de fichiers de styles que l'on veut, et leur donner les noms les plus adaptés !
On peut donc définir des styles particuliers, comme les suivants :
Les objets créés par GeoDyn sont accessibles en tant que variables globales, dont le nom est donc a priori compatible avec les noms usuels des variables en Javascript.
Un même nom utilisé deux fois pour définir deux objets aura pour conséquence de ne pouvoir accéder qu'au dernier objet en mémoire globale. C'est donc uniquement en cas de gestion de plusieurs figures qu'il faut être vigilant, avec l'avantage de pouvoir faire évoluer plusieurs graphiques en même temps, en toute connaissance de cause.
Pour faciliter les manipulation des objets via des instructions linguistiques on peut facilement donner des indices numériques comme on peut le voir sur l'exemple qui suit. De même on peut récupérer un objet par son nom avec : objet (nom de l'objet).
Lorsque l'on ne définit pas un objet via soit, c'est à dire par une égalité ou via une simple instruction Javascript (en ignorant donc l'objet retourné), c'est JSXGraph qui affecte une étiquette selon sa logique ; on la retrouve avec la fonction nom (objet). On notera que seuls les points ont des étiquettes, ce qui permet d'alléger les graphiques mais n'empêche aucunement de les légender, comme nous le verrons.
Avec de tels styles on peut construire dynamiquement des graphiques sur une planche, c'est à dire des objets géométriques, selon une syntaxe similaire à celle utilisée en mathématiques.
Pour construire une figure il faut donc surtout comprendre les notions mathématiques sous-jacentes. C'est pourquoi on traite l'ensemble des instructions linguistiques dans une section à part.
Le lecteur est invité à exécuter les scripts éditables et à les modifier, dans l'ordre de lecture puisqu'il s'agit d'introduire les notions dans un ordre de concrétisation d'objets mathématiques.
cacher ('la partie ILO de base')
À bien noter : avec JSXGraph on ne déplace à la souris que des points et leurs étiquettes, ces dernières en pointant la petite flèche qui apparaît lors du survol à la souris.
On peut faire un zoom autour d'un point donné, par exemple avec zoomer (PL_1) .de (1.25) .autour .de (P15) ou zoomer (PL_1) .de (0.8) .autour .de (P15). On peut omettre le facteur zoomer (PL_1) .autour .de (P15) et dans ce cas 1.25 est pris par défaut.
On peut aussi passer directement des coordonnées : zoomer (PL_1) .de (1.6) .autour .de (0,1), zoomer (PL_1) .de (0.625) .autour .de (0,1).
Pour vidéoprojeter on peut dilater la planche entière : dilater (PL_1) ; pour revenir à la normale il suffit de réduire (PL_1) (on peut utiliser aussi rétrécir).
Lorsqu'on définit un point, par exemple avec soit ("T") .le .point (3, -sqrt(2)) .en (pastille) .sur ("la figure 1"), son étiquette apparaît : c'est un élément de document qu'on peut donc manipuler comme tel avec les instructions usuelles d'AlgoDok.
L'étiquette est accessible via la fonction éponyme, on peut donc par exemple classer (étiquette (P45)) .comme ("grossie"). On peut donc aussi, par exemple, écrire (" (<q>premier</q> exemple)") .dans (l .étiquette .de (T)) ou encore écrire(' <br><img width="75" src="http://www.math93.com/image/Galois.jpg">') .dans (étiquette(T)).
On peut donc faire des choses assez amusantes, comme suit.
Pour la lisibilité de la suite il est préférable d'enlever les images : for (a = 0 ; a <= 180 ; a += 15) supprimer (toute ('img') .de (étiquette("P"+a))).
Lorsqu'on définit deux objets de même nom par soit ··· un avertissement est émis et la construction n'est pas effectuée. Par exemple avec soit ("T") .le.point (1,2) .sur ("la figure 1").
On peut définir facilement le milieu de deux points : soit ("M") .le .milieu .de (P75,P165) ; alors M est lié à ces deux points et reste leur milieu lorsqu'on les déplace, à la souris ou avec une instruction de déplacement.
On peut utiliser les instructions déplacer, déplacer.lentement et
déplacer.rapidement, comme sur les exemples suivants. Ici
la lenteur
correspond à environ 4 s et la rapidité
à environ 2 s.
Pour un déplacement relatif on utilise les instructions déplacer (···) .de, déplacer .lentement (···) .de et déplacer .rapidement (···) .de, comme sur l'exemple suivant : déplacer .lentement (P45) .de (-1,2).
Il est donc important de noter que les fonctions abscisse et ordonnée permettent d'obtenir les coordonnées de n'importe quel point, n'importe quand : soit ("S60") .le .point (-ordonnée(P60),-abscisse(P60)) .en (croix + "size:6 ; color:red") .sur ("la figure 1").
On peut rendre solidaires des points : le déplacement de l'un entraîne celui des autres, en translation, aussi bien à la souris que par une instruction. Par exemple : rendre .solidaires (P0,P45,P135) ; déplacer.lentement (P0) .à (2.5,-5).
On peut exploiter des points sans les montrer, tout comme on peut ne pas montrer leurs étiquettes.
On peut utiliser les instructions usuelles d'AlgoDok-fr pour cacher et montrer des objets dès qu'on connaît leur nom de variable globale, par exemple : cacher (P60), cacher ( l .étiquette .de (P60)) et montrer (P60, l .étiquette .de (P60)).
On peut définir des fonctions simples : rotation (angle,point) ou rotation .d (angle) .autour .de (point) et symétrie .par .rapport . à (droite), qui permettent en particulier de déplacer des points autrement qu'en translation.
On peut aussi définir une translation de vecteur (P,Q) : translation (point P,point Q), complétant ainsi l'instruction déplacer .de (x,y).
À tout moment on peut arrêter (le .mouvement).
Les objets créés par GeoDyn accessibles en tant que variables globales peuvent avoir un style qui change dynamiquement, grâce à la propriété .en (style). On peut aussi utiliser l'instruction mettre (objet) .en (style) On peut en voir l'effet dans le paragraphe suivant.
La notion de style
de JSXGraph reprend les attributs des SVG en et ajoute d'autres,
mais pour éviter la nécessité
d'apprendre un vocabulaire (anglais) différent de celui des CSS, GeoDyn permet d'utiliser ce dernier,
sauf dans les cas particuliers d'attributs inexistants en CSS, comme dans le cas des points
avec size définissant une taille en pixels, ou face définissant une forme
(cross
, circle
, square
ou plus
).
On commence par
Bien sûr on peut aussi utiliser les classes et styler avec des CSS, mais alors on doit utiliser le vocabulaire des SVG, comme stroke et stroke-width par exemple. Le mieux est donc de définir des styles avec des noms simples et de les utiliser, comme on l'a fait dans GeoDyn avec des styles de base comme vertFin, ou vertOrangé dont on peut voir le détail ; ce principe d'appellation est le même pour les couleurs de base.
On peut définir des points à l'aide de fonctions et l'évolution de la position est effectuée dynamiquement, sans possibilité de repositionnement manuel, comme avec l'exemple suivant où le point S60 guide Mparabole :
Dans le script précédent on peut remplacer segment par flèche.
On peut graduer une droite définie par deux points,
permettant ainsi de disposer de règles
pour mesurer ou imposer manuellement
visuellement certaines distances. On passe en plus la distance entre deux
graduations principales, les seules étiquetées.
Les graduations ont un style particulier ; par défaut c'est : minorTicks:1 ; majorHeight:12 ; minorHeight:6 ; drawZero:true ; drawLabels:true. Le plus important étant minorTicks qui définit le nombre de sous-graduations (minimum : 1) ; majorHeight et minorHeight définissant respectivement la taille des graduations et sous-graduations.
Lorsqu'une droite est créée à partir de deux points libres, on peut la déplacer directement, en translation.
On a les cas particuliers usuels du triangle et du quadrilatère, par exemple : T_3 = triangle (P0,P30,P45) .en (bleuOrangé) et Q = quadrilatère (M,P15,P0,P150) .en (vertFin + "background-color:pink; opacity:0.4").
On peut obtenir l'aire algébrique
d'un polygone orienté (donc non croisé
)
et son centre de gravité (celui d'une plaque mince homogène) :
À tout moment on peut arrêter (la .modif).
A priori, la création d'un arc de cercle AB suppose que l'on a déjà défini un cercle ou au moins que le centre du cercle est choisi (comment alors ?) sur la médiatrice de [AB]. Mais, par souplesse d'usage, l'instruction de création d'un arc de cercle arc(A,B) .de.centre (C) admet que C ne soit pas sur la médiatrice de [AB] : dans ce cas l'arc en question passe par A et le point B′ sur [CB) tel que CA = CB′.
On peut remplacer arc par secteur : on représente alors, suivant la même logique, une surface délimitée par un arc de cercle et deux rayons du cercle de centre C.
Lorsqu'un cercle est créé à partir de deux points libres, ou d'un point libre avec un rayon, on peut le déplacer directement, en translation (cas des cercles C1 et C2).
On peut tracer déterminer précisément les intersections d'objets comme des cercles et droites puisqu'il existe une solution algébrique au problème. On suppose que la construction précédente a été effectuée.
Les points d'intersection n'apparaîssent pas forcément, comme on peut le constater avec l'animation suivante :
On peut tracer la représentation graphique d'une fonction d'une variable réelle
à valeurs réelles (pour obtenir une courbe représentative
)
ou bien à valeurs vectorielles (i.e qui retourne un tableau, pour définir une
courbe paramétrée
).
Une courbe paramétrée est définie par une fonction de la variable réelle,
(souvent notée t et conçue comme le temps
qui s'écoule)
à valeurs dans un espace de dimension supérieure ou égale à deux ; ici c'est deux.
Sachant que l'on peut récupérer les coordonnées de tout point defini et manipuler son étiquette,
on peut imaginer autant d'effets visuels de propriétés que l'on veut.
Par exemple le fait qu'un point est sur une courbe
:
On définit la dérivée d'une fonction très simplement, comme avec l'exemple précédent : g = dérivée(f) ; C_g = la .courbe .représentative .de (g) .sur (PL_2) .en (pointillés) ; aller .à ("la figure 2").
Avec GeoDyn on peut définir une fonction comme en Mathématiques,
avec un domaine de définition.
De plus on peut définir l'ombre d'une fonction
, fonction
permettant aunsi de mettre en relief
une courbe et de modifier son ombre.
Cette notion d'ombre correspond à l'effet d'une translation sur une courbe.
On peut alors voir l'effet d'un changement d'apparence, à la fois de la courbe et de son ombre : par exemple avec C_phi .en (blanc) ; C_phiO.en ("width:8").
On peut aussi passer directement l'expression d'une fonction de la variable x : par exemple avec C_ArgCh = courbe .représentative .de ("ln(x+sqrt(x^2-1))") .sur (PL_2) .en (bleu) ; aller .à ("la figure 2").
On en profite ici pour montrer toutes les couleurs de base :
Le graphique sera construit après ce script éditable.
On peut compléter dynamiquement la liste (tableau) de points définissant un polynôme de Lagrange ; par exemple : Soit ('E') .le .point (0,-4) .sur (PL_3) ; compléter (la.listeDePoints) .avec (E) ; actualiser(PL_3).
On peut tracer une spline cubique passant par un certain nombre de points.
Comme pour les polynômes de Lagrange, on peut compléter dynamiquement la liste (tableau) de points définissant la spline cubique ; par exemple : Soit ('CO2') .le .point (-3,1.4159) .sur (PL_3) ; compléter (le.quadruplet) .avec (CO2) ; actualiser(PL_3).
Ici on précise l'intervalle du paramétrage, sinon c'est [0 ; 1] par défaut :
On peut alors mettre un peu d'animation, en faisant varier la variable globale m et en modifiant l'apparence en fonction de celle-ci :
Dans le script précédent, de préférence après arrêt du mouvement, le lecteur peut par exemple remplacer la couleur orange par yellow, olive ou magenta ou salmon, ou encore toute couleur définie par les CSS. Bien sûr toute autre modification est envisageable, mais mieux vaut tenir compte de la périodicité des calculs pour éviter de surcharger la machine !
Un point glissant
(ou glisseur) est un point confiné sur un objet comme une
droite, un cercle ou une courbe.
On utilise la planche PL_3 :
Un curseur
est un point confiné sur un segment pour faire varier facilement un
paramètre qu'on peut affecter à une variable globale,
ici omega (valeur présentée comme entière par le script ci-dessous).
Le script construit la planche PL_4 (la figure 4
) juste après ce paragraphe :
Avec de tels moyens de paramétrages on peut garder une trace de l'évolution de certaines figures.
cacher ('la partie mathématique')
Lorsque l'on fait varier des coordonnées, par manipulation à la souris ou par programme, lorsque l'on fait évoluer des variables globales directement ou par curseur, on peut vouloir garder une trace de l'évolution de certains objets construits dynamiquement.
On dispose pour cela de deux instructions : garder .la .trace (objet) et pour supprimer le marquage : oublier .la .trace (objet).
Les traces sont éphémères : un zoom ou un simple déplacement de la planche les font disparaître.
On utilise aussi l'instruction graduer (droite) qui revient à définir une graduation de 5.
On peut à tout moment déplacer manuellement l'un des points de définition, ou déplacer .lentement (U) .à (3,-5) ; déplacer .rapidement (V) .à (5,6). On peut aussi oublier .la .trace .de (M34) (les différentes positions de M34 ne sont plus tracées) ou bien effacer .la .trace .de (M34).
Avec AlgoDok on peut demander une impression sélective, par exemple :
Pour placer une image directement sur une planche, sans l'inclure dans une étiquette, on peut utiliser l'instruction image (url) .de .dimensions (L, H) .à (x,y) .sur (planche). Chacun des cinq premiers paramètres peut être une fonction sans variable, ce qui permet des indications visuelles de propriétés diverses.
cacher ('la partie traçabilité')