Tutoriel:Manipuler des images et des cartes
Manipuler des images et des cartes
Les utilisateurs débutants peuvent directement lire ce tutoriel, mais il est bien de connaître déjà l'essentiel de ce qu'on peut faire avec des images. En français, il y a la description de l'objet Images et de l'outil Outil Insérer Image. Il existe des tutoriels sur les transformations d'image en anglais et en espagnol.
Je ne propose pas ici une traduction de ces tutoriels, mais un matériau qui permet de faire les manipulations les plus fréquentes sur les images ainsi qu'une section supplémentaire dédiée au cas particulier où l'on souhaite mesurer des distances et/ou des angles dans l'image. C'est notamment le cas quand l'image est une carte où une photo satellite. Il est alors nécessaire de se doter d'un moyen de récupérer la position, par exemple latitude et longitude, d'un point dans l'image.
Je ne couvre cependant pas l'excellent passage du tutoriel espagnol sur le pavage d'un plan par des images incluses dans des polygones réguliers, c'est lisible même quand on n'est pas hispanophone, et c'est un bel exercice.
Objectifs
- Un petit rappel sur les formats d'image les plus adaptés.
- Ce tutoriel couvre les manipulations basiques: image de fond, positionnement, opacité, un exemple de transformation.
- Une première illustration est donnée par l'image d'une voiture de course effectuant des tours d'un circuit.
- On y explique comment superposer et mélanger des images, avec l'exemple d'une carte et d'une image satellite correspondante.
- On aborde enfin les utilisations en cartographies, nées de la bonne entente avec un collègue prof d'histoire géo... Deux applications proposées: une carte de France interactive où les villes sont matérialisées par des points, et où les distances sont directement en kilomètres. Cette application utilise largement le tableur. Puis enfin un planisphère universel, où l'on choisit le méridien central et l'orientation nord-sud. Ces deux dernières applications nécessitent une explication (très simple!) sur les projections géographiques, que les lecteurs seulement soucieux des manipulations GeoGebra peuvent passer.
Quels types d'images ?
Je conseille, surtout si votre application va inclure plusieurs images et leurs transformées, de limiter la taille des images. Personnellement je me limite à 300ko mais si je peux faire mieux, je le fais. Cette contrainte respectée, vous serez surpris par la fluidité et la rapidité de GeoGebra vis-à-vis des images. Même exporté en HTML5, c'est très bien fait.
- Si l'image est une image de type photographie, le format JPG procure une compression très efficace.
- Les formats GIF et PNG sont bien adaptés aux images moins complexes, comme des logos, où des images de synthèse. Ils respectent mieux les hautes fréquences, notamment les contours et coins présents dans l'image.
- On peut utiliser des images PNG transparentes, pourvu qu'elles aient un canal "alpha". La transparence est gérée par Geogebra.
- Sauf erreur de ma part, les GIFs animés ne sont pas supportés: vous ne verrez que la première image.
- GeoGebra offre la possibilité d'insérer des images par couper-coller depuis le presse-papier. Personnellement, je n'utilise pas cette fonctionnalité tant que je ne sais pas quelle mémoire cela représente; il me semble plus efficace d'utiliser le format de fichier le plus adapté. Mais je me trompe peut-être, ne sachant pas comment Geogebra gère en interne les images.
Manipulations basiques
Une image se crée avec l'Outil Insérer Image. L'image est créée avec le coin inférieur-gauche au point cliqué. La taille de l'image correspond à son nombre de pixels. On peut utiliser cet outil en cliquant sur un point existant, l'image se déplacera avec le point. Même si on ne l'a pas fait, on peut déplacer l'image avec l'outil déplacer, directement en la sélectionnant.
On peut régler l'opacité (la transparence) de l'image par le menu Propriétés/Couleur. C'est utile si on veut voir à travers les axes, la grille, les objets créés précédemment que l'image recouvre.
Une fois l'image placée, on peut choisir, par son menu Propriétés/Basique de la mettre en image de fond: elle est alors non sélectionnable et ne constituera plus qu'un élément de décor. On peut rendre sa position fixe, indépendamment des déplacements et agrandissements de la fenêtre graphique: il suffit de cocher "Position absolue sur l'écran" par un clic droit sur l'image. Une image en fond d'écran est très intéressante pour apprendre aux élèves à faire une figure mathématique à partir d'une situation concrète. Si par exemple on choisit de faire pratiquer Thalès avec la mesure de la hauteur d'un arbre, il suffit de se procurer ou de faire soi-même une photo avec un arbre, une personne tenant au bon endroit la croix du bûcheron, la mettre en fond d'écran avec une opacité intermédiaire, pour voir les axes et la grille. Les élèves tracent alors la figure par dessus l'image, avec les outils GeoGebra.
Là où les choses deviennent intéressantes, c'est quand on spécifie les coins de l'image. Par le menu Propriétés/Position vous pouvez préciser jusqu'à 3 coins: le coin inférieur gauche (numéro 1), le coin inférieur droit (numéro 2) et le coin supérieur gauche (numéro 4). Le quatrième coin n'est pas réglable, c'est le quatrième sommet du parallélogramme formé par les 3 premiers. Quand on déplace les points, l'image suit, et de manière très fluide! Créez trois points (prenez l'habitude de les indexer par 1, 2 et 4, ça facilite l'utilisation de l'onglet position) A_1, A_2, A_4, placer une image en A_1, spécifier les deux autres coins A_2 et A_4, puis bougez les points. On trouve sur les ressources de D. Mentrard un pur chef d'oeuvre réalisé à partir de cette fonctionnalité.
En combinant les deux précédents paragraphes, on peut créer une image de fond qui occupe tout l'écran: il faut préciser comme coins: Coin[1], Coin[2], Coin[4], la Commande Coin renvoyant les coordonnées des coins de l'écran. Pour une image qui occuperait, disons le cinquième inférieur gauche de l'écran, utilisez les coins suivants:
C_1=Coin[1]C_2=Coin[1]+0.2(Coin[2]-Coin[1])C_4=Coin[1]+0.2(Coin[4]-Coin[1])
Enfin ne pas manquer d'appliquer des transformations à une image: placez une image qui présente un axe de symétrie (par exemple, un monument), une droite, puis le symétrique de l'image par rapport à la droite. Le jeu est alors de placer la droite et/ou l'image pour que l'image et son symétrique se superposent. Pour que cela fonctionne bien, il faut pouvoir voir les deux images même quand elles se superposent, une manière de faire est de diminuer l'opacité de l'image symétrique. Voir un exemple où l'on doit trouver la symétrie de la mairie de Marseille. Remarquez que dans cet exemple, l'opacité de l'image symétrique est réglable par un curseur: il suffit pour cela de définir un curseur t entre 0 et 1, puis, par l'onglet Propriétés/Avancées de l'image, de spécifier t comme opacité dans les champs "couleurs dynamiques".
Pour finir, il faut bien comprendre que GeoGebra, même s'il fait beaucoup de choses, n'est pas Photoshop! On n'accède pas aux pixels de l'image et on ne peut, par exemple, coder une augmentation de contraste par une fonction gamma.
Image et animation: la voiture de course
On veut créer une image d'une voiture de course qui fait des tours autour d'un circuit.
Commençons par créer le circuit: on peut envisager de le définir par morceaux, mais cela va compliquer l'animation (mais pas la rendre impossible, attention! Juste beaucoup, beaucoup, beaucoup plus compliquée). Une manière de faire est d'utiliser un polygone, mais la vitesse de la voiture va dépendre de la longueur du côté parcouru, ce qui donne un aspect peu naturel à l'animation. Il vaut mieux faire un peu de maths et trouver la courbe qui répond à vos désirs. L'animation ne demandera que quelques clics, et la vitesse s'ajustera en fonction de la courbure de la courbe, donnant une impression de ralentir dans les virages. Pour cette exemple j'ai choisi une courbe de Lissajous rentrée dans la zone de saisie par:
Courbe[ 4 sin(x), 4 sin(2x), x, 0, 2π]
Créer un point A sur cette courbe. Ce sera le moteur de l'animation. Vous pouvez d'ores et déjà l'animer pour vérifier si l'animation vous plaît, en régler la vitesse par l'onglet Propriétés/Algèbre du point A.
Nous allons maintenant trouver une image de voiture de course et positionner ses coins. J'ai choisi l'image:
