Tutoriel:Manipuler des images et des cartes

De GeoGebra Manual
Aller à : navigation, rechercher


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 Image, qui constituent une bonne introduction. 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 cartographiques, 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) A1, A2, A4, placer une image en A1, spécifier les deux autres coins A2 et A4, puis bougez les points. On trouve sur les ressources de D. Mentrard un pur chef d'oeuvre réalisé (entre autres...) à 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. Allez, fabriquons tout de suite l'accélérateur: un curseur v, nombre entre 0 et .... 10 (vitesse maximale), et précisez comme vitesse d'animation du point A: v

Nous allons maintenant trouver une image de voiture de course et positionner ses coins. J'ai choisi l'image ci-contre:

la voiture

Cette image a pour dimensions: 440x193 pixels, donc un rapport hauteur/largeur de 0.44. Le point A sera à l'avant, au milieu du capot. Il nous faut maintenant créer les coins de l'image.

Nous allons donc créer un rectangle qui bougera avec le point A. Pour ne pas déformer la voiture dans les virages, le rectangle sera orienté selon la tangente à la courbe. Nous créons donc cette tangente par : Tangente[A,b] (en supposant que b est le nom de la courbe). Choisissons la longueur de la voiture: 1. On place l'arrière à l'aide d'un cercle de rayon 1 centré en A, puis son intersection (arrière) avec la tangente: le point B. Nous créons alors deux perpendiculaires à la tangente: en B et en A. Puis autour de ces deux points des cercles de rayon 0.22 (la moitié de 0.44) et leurs intersections, respectivement C, D, E, F avec les perpendiculaires: voir la capture d'écran jointe.

Voiture cadre.png

Il ne reste qu'à placer l'image: coin 1 en D, coin 2 en F, coin 3 en C. Puis animer le point A, cacher tout ce qui doit l'être, dessiner la route, et voilà! On peut régler la vitesse avec le curseur.

Superposer des images

Nous passons maintenant aux applications géographiques, où les images sont soit des cartes, soit des images aériennes ou satellites.

Le premier problème qui se pose est de trouver des images qui se superposent effectivement. J'ai choisi une approche basée sur, au choix, Google Maps ou, pour les applications en France, le site Geo Portail de l'IGN (c'est préférable car les images sont issues d'une projection adaptée à la France, qui préserve localement distances et angles). Dans les deux cas, on choisit la zone dont on veut créer l'image, on l'affiche en image satellite ou aérienne, on fait une capture de tout l'écran. Puis, sans rien changer d'autre, on affiche la carte, et on refait une capture d'écran. Enfin, on coupe la même zone dans les deux images. Il est important de sauver l'échelle dans l'image, afin de la mesurer en pixels: cela fera la base pour déterminer les coordonnées des points de l'image. Faites bien attention à la projection des images (voir la section Projections de ce même tutoriel): on trouve facilement des fonds de cartes dans les ressources de géographie, en projection de Mercator et avec une échelle, qui n'est utilisable que si l'on se déplace dans le sens Ouest-Est. L'IGN fournit des images en projection de Lambert, adaptée à la France.

Une fois les deux images créées, on les positionne au même endroit, puis, au choix:

  • soit on crée un 'bouton radio' (plusieurs boutons avec un seul choix possible, voir le tutoriel: Tutoriel:Scripts:Boutons Radio). Chaque image a comme condition d'affichage un booléen crée par le bouton radio.
  • soit on crée un curseur t entre 0 et 1, puis par l'onglet Propriétés/Avancé des images, mettre comme couleur dynamique/opacité la valeur t à la première image et 1-t à la deuxième.

Vous venez de créer un Système d'Information Géographique, proudly made with GeoGebra!

A noter: dans GeoGebra, les objets les plus récents sont dessinés par dessus les objets les plus anciens. On peut changer cet ordre par l'onglet Propriété/Avancé et changer la valeur du calque. Par défaut, tout est dessiné dans le calque 0 dans l'ordre d'apparition à l'écran. On peut changer la valeur du calque d'un objet. Un objet sera toujours dessiné par dessus un autre si sa valeur de calque est supérieure. Je conseille cependant de ne modifier les calques qu'à la fin, quand vous n'en êtes plus qu'à la mise en forme. Changer un objet occulté demande de passer par la fenêtre Algèbre, on ne peut plus y accéder directement. Dans le même état d'esprit, utilisez les calques de numéro pair. En cas d'erreur il vous sera facilement possible de corriger en utilisant les calques impairs.

Notions de projection cartographique

Nous voulons maintenant connaître la latitude et la longitude du point sous la souris, une image étant placée à un endroit donné.

La manière de procéder va dépendre du type d'image, et en particulier de sa projection. Pour faire simple: on sait qu'il est impossible de projeter sans distorsion une sphère (la Terre) sur un plan (la fenêtre GéoGebra); il existe forcément des singularités si l'on représente la sphère entière, singularités que l'on repousse habituellement aux pôles. Même à échelle locale, une carte peut être conforme (les angles mesurés sur la carte sont les angles réels) ou équidistante (les distances mesurées sur la carte sont proportionnelles aux distance réelles), mais pas les deux à la fois.

Une grande partie des cartes disponibles est en projection de Mercator. Il s'agit d'une projection cylindrique (voir figure) conforme mais pas équidistante. Les distances sont préservées sur l'équateur, et sont en proportion le long d'un parallèle. Les méridiens sont tous parallèles, perpendiculaires aux parallèles, et régulièrement espacés. Aussi peut-on récupérer la longitude par simple règle de trois avec les abscisses des coins de l'image. C'est la projection habituelle des planisphères.

Projection cylindrique

A l'échelle d'un pays, tous ont adopté un système local qui préserve au mieux à la fois angles et distances. En France, on obtient le système qu'utilise l'IGN, à savoir:

  • les dimensions de la Terre, représentées par un ellipsoïde; en France on utilise l'ellipsoïde "Clarke 1880",
  • le positionnement de l'ellipsoïde: c'est le "datum géodésique": pour les cartes de France, le "datum" s'appelle NTF (nouvelle triangulation française) et son point central est le Panthéon à Paris. Il y a en fait 4 "datum" valables pour la France: zone nord, centre, zone sud et étendue (France entière). Ces "datum" sont calculés pour minimiser localement les distorsions de distance. Pour le GPS, le "datum" s'appelle WGS84.
  • la manière de projeter: en France, on utilise la projection de Lambert, qui est une projection conforme. Sur une carte de France avec ce système (Clarke 1880/NTF étendu) on peut considérer que angles et distances sont conservés, avec une erreur minimale. C'est le cas des cartes fournies par le site GéoPortail de l'IGN.

Je vais traiter par la suite deux exemples:

  • une application sur une carte de France, issue du site de l'IGN: on peut considérer que latitude et longitude s'obtiennent par règle de trois à partir des coordonnées des coins. Bien vérifier la projection de la carte: on trouve quantité de fonds de cartes sur Internet, qui ne précisent pas ces informations. Sur un site très en vue d'un prof de géo, j'ai ainsi récupéré une carte de France munie d'une échelle, mais si on l'utilise pour mesurer Paris-Marseille, on ne trouve que 500km! Il doit vraisemblablement s'agir d'une carte en projection de Mercator.
  • une application sur un planisphère en projection de Mercator. On obtient facilement la longitude par règle de trois, mais la latitude demande une fonction spéciale, la fonction de Gudermann. Si on appelle φ et θ la latitude et la longitude, θ0 le méridien central, x et y les coordonnées sur le plan, alors on a:

\phi = \mbox{gd}(y) = 2 \arctan e^y - \pi/2\\

y = \mbox{arcgd}(\phi) = \frac{1}{2}\ln \frac{1 + \sin\phi}{1 - \sin\phi}\\

x \sim \theta-\theta_0 La fonction inverse de Gudermann (arcgd) présente une singularité aux pôles, y tend alors vers l'infini. Aussi les projections de Mercator sont-elles tronquées vers les latitudes extrêmes. Une difficulté est de deviner à quelle latitude une image récupérée en projection de Mercator est-elle tronquée.

Carte de France interactive

On commence donc par récupérer sur le site de l'IGN une carte de France et l'image satellite correspondante. Ces images sont les suivantes:

Ign-france-crop-politique.jpg
Ign-france-crop-physique.jpg

Les deux images sont parfaitement superposables, et ont les mêmes dimensions: 813x692 pixels. Ce sont des captures d'écran de GéoPortail. J'ai fait attention à ce que l'échelle apparaisse dans l'image. Je peux ainsi mesurer précisément une correspondance pixels-kilomètres en utilisant un logiciel de traitement d'images. Dans ce cas, 100km correspondent à 70 pixels (voir figure ci-dessous, copie d'écran de l'image affichée sous GIMP et agrandie autour de l'échelle; cette dernière est mesurée avec un outil de GIMP).

Mesure-echelle.png

Dans cette application, on peut considérer que pixels et kilomètres sont proportionnels, sans faire trop d'erreur. On ne cherchera pas à calculer latitude et longitude. On placera le coin inférieur gauche des images en (0,0), les coordonnées des autres points seront directement données en kilomètres.

On ouvre alors la fenêtre tableur pour y saisir toutes les informations nécessaires: la correspondance pixels-kilomètres, les dimensions de l'image, et bientôt les coordonnées des villes. Puis utiliser le tableur pour calculer les équivalents en kilomètres. Un exemple est donné sur la capture d'écran ci-dessous:

France-tableur.png

On peut alors créer les coins des images: ce sont les lignes "Coin" du tableur, que l'on converti en points en les transformant en liste (sélection des cellules du tableur puis Outil Créer une liste), puis en exécutant la commande:

Exécute[ Séquence[ "C_{"+(i+1)+"}=(Element[liste1, "+(3i+2)+"],Element[liste1, "+(3i+3)+"])",i,0,2] ]

qui crée les points C1, C2 et C3.

On saisit alors les coordonnées pixel des villes, que l'on reporte dans le tableur. Il faut un logiciel d'images qu'on maîtrise bien, où l'on peut zoomer et accéder facilement aux coordonnées. Puis on utilise le tableur pour tout convertir en kilomètre. On peut automatiser la création des points correspondant aux villes: on sélectionne les lignes du tableur qui contiennent les villes, on utilise l'Outil Créer une liste, ce qui crée une liste commençant par:

liste2={"Paris",438,189,625.71,718.57,"Lyon",...}

Voici les commandes pour créer les points: nvilles=Longueur[liste2]/5

Création des points figurant les villes: Exécute[Séquence[ "V_{"+(i+1)+"}=(Element[liste2, "+(5i+4)+"],Element[liste2, "+(5i+5)+"])",i,0,nvilles-1]]

Renommage d'après le vrai nom des villes: Exécute[Séquence[ "Rename[V_{"+(i+1)+"},Element[liste2,"+(5i+1)+"]]", i, 0, nvilles-1]]

Positionner les images aux coins spécifiés dans le tableur, puis ajuster le zoom pour tout voir. Ajuster l'opacité des images avec un curseur, puis spécifier un calque supérieur aux images pour les listes de points.

On a alors une carte où, si on veut connaître les villes à moins de 300km de Brest, il suffit d'utiliser l'Outil Cercle (centre-rayon) avec comme centre Brest, comme rayon 300. On accède aux parallèles et méridiens par les axes, et les outils Outil Perpendiculaire et Outil Parallèle.

Un exemple de produit fini est consultable ici.

Planisphère universel

Dans cette application, on part d'une image (un planisphère) en projection de Mercator, classiquement centré sur le méridien de Greenwich. Nous souhaitons pouvoir régler le méridien central et spécifier si on veut le nord ou le sud en haut de la carte. La position de l'image ne doit pas dépendre du méridien central, on doit pouvoir zoomer et déplacer le graphique à volonté. Voici l'image choisie, prise de Wikipédia:

Mercator-projection.jpg

Il faut donc faire un découpage de l'image: du méridien central jusqu'à la droite, puis de la gauche jusqu'au méridien central. C'est impossible à faire sous GeoGebra, qui n'est pas un logiciel de retouche d'images! A la place nous afficherons trois fois la même image, côte à côte, et n'afficherons qu'une fenêtre de la taille de l'image. La position des coins dépend du méridien central et de l'orientation Nord-Sud, pas celle de la fenêtre de visualisation.

Réglage des coordonnées

On commence par coder la fonction de Gudermann et son inverse:

gd(x)=2arctan(ℯ^x) - π / 2

arcgd(x)=1 / 2 ln((1 + sin(x)) / (1 - sin(x)))

On précise alors la latitude maximale de la carte: ici j'ai trouvé 80°, mais c'est un peu imprécis. maxlat=80°. Évidemment, il serait préférable de partir d'une image dont on maîtrise la création!


On fixe alors la fenêtre de visualisation: les points visibles auront une abscisse (longitude) entre -π et +π, et une ordonnée (latitude) entre les bornes de la projection (+/- arcgd(maxlat)).

Un point de coordonnées A=(x,y) dans le repère de GeoGebra aura dorénavant les coordonnées (en degrés): θ=180(x(A) + θ_0) / π

φ=eps 180 gd(y(A)) / π

Placement des images

Il faut maintenant positionner les 3 images.

L'image centrale sera positionnée sur les points C1, C2, C4 définis ainsi, où ytop=2arcgd(maxlat) et eps vaut 1 si le nord est en haut, -1 sinon.

C_1=(-π - θ_0, -eps ytop)

C_2=C_1 + (2π, 0)

C_3=C_2 + (0, 2eps ytop)

C_4=C_1 + (0, 2eps ytop)

Ainsi, si θ0=0, l'image sera bien positionnée entre les abscisses -π et +π, et se décalera sinon.

On place l'image de droite en créant le point C5 par C_5=C_2 + (2π, 0) puis on place l'image avec les coins C2, C5 et C3.

On place l'image de gauche en créant les points C6 et C7 par: C_6=C_1 - (2π, 0) et C_7=C_4 - (2π, 0). Puis on place l'image avec comme coins C6, C1 et C7. On a donc créé trois images accolées de gauche à droite, de même taille, et de sorte que le méridien central de l'image du milieu soit en x=0. Il ne reste qu'à appliquer une fenêtre de visualisation pour cacher ce qu'on ne veut pas voir.

Fenêtre de visualisation

On ne veut voir que les points (x,y) tels que x est compris entre -π et +π, y entre -ytop et +ytop.

Le plus simple est de créer des inégalités: x ≤ -π, x ≥ π, y ≥ ytop et y ≤ -ytop puis rendre (Propriétés/Couleurs) ces inégalités opaques et (Propriétés/Avancé) d'un niveau de calque supérieur à celui des images. Il ne reste plus qu'à affecter un curseur à θ0, un bouton nord/sud pour régler eps et le tour est joué!

Un exemple de produit fini est consultable ici.

A noter: cette projection ne permet pas le calcul des distances. Pour calculer et afficher le plus court chemin entre deux points A et B à la surface du globe, il faut repasser en 3D, calculer l'arc de grand cercle entre A et B, puis le projeter sur l'image. La formule de distance se trouve facilement (avec un peu de bibliographie...). Un exemple est consultable ici.

© 2021 International GeoGebra Institute