Voir la source de 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 [http://wiki.geogebra.org/en/Tutorial:Transformations_%26_Inserting_Pictures_into_the_Graphics_View anglais] et en [http://wiki.geogebra.org/es/Tutorial:Transformando_Im%C3%A1genes 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 [http://www.geogebra.org/material/show/id/19402 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: <code>Coin[1]</code>, <code> Coin[2]</code>, <code>Coin[4]</code>, 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:
* <code>C_1=Coin[1]</code>
* <code>C_2=Coin[1]+0.2(Coin[2]-Coin[1])</code>
* <code>C_4=Coin[1]+0.2(Coin[4]-Coin[1])</code>

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 [http://www.geogebra.org/material/show/id/56808 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 <code>t</code> entre 0 et 1, puis, par l'onglet Propriétés/Avancées de l'image, de spécifier <code>t</code> 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:

<code>Courbe[ 4 sin(x), 4 sin(2x), x, 0, 2π] </code>

Créer un point <code>A</code> 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 <code>v</code>, nombre entre 0 et .... 10 (vitesse maximale), et précisez comme vitesse d'animation du point A: <code>v</code>

Nous allons maintenant trouver une image de voiture de course et positionner ses coins. J'ai choisi l'image ci-contre: [[File:f1.png|200px|thumb|right|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 donner l'impression que la voiture dérape dans les virages, le rectangle sera orienté selon la tangente à la courbe. Nous créons donc cette tangente par : <code>Tangente[A,b]</code> (en supposant que <code>b</code> 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.

 [[File: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 street view ou, pour les applications en France, le site [http://www.geoportail.gouv.fr/accueil Geo Portail] de l'IGN. 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.

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 <code>t</code> entre 0 et 1, puis par l'onglet Propriétés/Avancé des images, mettre comme couleur dynamique/opacité la valeur <code>t</code> à la première image et <code>1-t</code> à 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.