Utiliser des sorties graphiques en Python

1) Pourquoi une sortie graphique avec Python ?

Une des forces du langage Scratch, insuffisamment soulignée à notre avis, est l’aller retour possible entre un script et la perception visuelle de son exécution, ce que nous appellerons la sortie graphique. Scratch permet alors de s’appuyer sur une représentation visuelle, c’est à dire de créer des images mentales figuratives, pour construire des représentations plus schématiques, des concepts abstraits que ce soit en mathématiques et en algorithmique.
Le langage Python, en tant que langage textuel, est efficace en terme de production de script mais ne mobilise pas a priori aussi facilement de sorties graphiques.
Il nous a semblé primordial, pour adoucir la transition entre Scratch et Python, de conserver cette possibilité pour illustrer l'exécution d'un script tout comme le concept mathématique sous-jacent.

2) Quel choix de librairie pour une sortie Graphique ?

Après de nombreux essais (Pygame, Tkinter, Turtle) Nous avons choisi d’utiliser la librairie Turtle() pour de nombreuses raisons :

elle est installée avec la majorité des distributions du langage Python 3,

les tutoriels et sites de référence sont nombreux et plutôt simples à trouver.

https://docs.python.org/2/library/turtle.html

Elle contient suffisamment d’instructions pour créer des environnements graphiques intéressants et motivant,

les instructions nécessaires sont plutôt simples à interpréter. Il est assez aisé de les copier et de les coller pour les adapter au développement d’une nouvelle idée d’activité.

Il est possible de générer plusieurs tortues, à la façon des lutins de Scratch.

Quelques essais ont été faits avec la librairie Tkinter, notamment parce que celle-ci permet par exemple de capter la couleur d’un pixel sur une image de fond. Le traitement informatique étant alors plus technique, après quelques expérimentations, il n’a pas paru probant de le proposer en classe de 2nde sur ce TraAM car cela accroit le nombre de termes techniques à comprendre.

3) Un exemple à la loupe : Skieur

L’objectif est de faire suivre et retracer la courbe représentative d’une fonction (la piste de ski) par un mobile (le skieur).
Pour cela, les élèves doivent gérer uniquement la partie traitement de l’algorithme, les éléments graphiques sont apportés par le professeur et permettent d’agrémenter un algorithme classique de tracé de courbe.

Voir le mini-site de l'activité skieur

1ère étape : Définir les éléments graphiques Cette activité nécessitera un arrière plan et un personnage, tous les deux au format .gif. Ces deux éléments résultent d’un traitement d’image : - la courbe représentant la piste de ski ainsi que le repère ont été obtenus à l’aide de GeoGebra. Des éléments de décor ont été ensuite rajoutés. Il est important de noter la dimension en pixels de cette image, ici 1000 × 600.
- le skieur a été détouré avec soin à l’aide de la gomme d’un logiciel de traitement d’image pour être sur un fond transparent. On peut alors commencer à saisir le script.
2ème étape : Importer les librairies
3ème étape : Définir et gérer la fenêtre graphique Cet objet porte le nom fenetre. Les valeurs 1020 et 620 sont liées à la taille de l’image de fond et prennent en compte la bordure de cette fenêtre (10 pixels en plus sur chaque bord)
En toute fin de script, il faut penser à écrire l’instruction fenetre.mainloop() qui permet la gestion de cette fenêtre graphique, notamment la fermeture par clic de souris.
4ème étape : Définir le repère La difficulté est de le rendre cohérent avec celui de l’image de fond. Il faut accepter de tâtonner pour définir les points A(-0,66 ;-0,66) et B(21,3;12,53) qui correspondent aux sommets opposés dans l’image ci-contre.

5ème étape : Définir l’arrière plan Comme pour Scratch, l’arrière plan est un lutin particulier appelé piste et défini avec la première instruction. Puis, dans l’ordre, les instructions permettent : - d’appeler l’image, - de l’affecter à piste, - de lui donner une vitesse suffisamment rapide pour qu’on ne le voit pas apparaître au début de l’exécution, - d’indiquer la position de son centre dans le repère défini précédemment. Là encore, on doit ajuster par tâtonnement.
6ème étape : Définir le mobile On procède comme pour l’arrière plan. Il y a trois instructions supplémentaires relatives au tracé de la courbe permettant d’initialiser le tracé du crayon.

4) Comment proposer une activité avec sortie graphique ?

Une fois ce travail effectué, il faut être conscient :

que les élèves devront importer des images de fond au format .gif en plus d’un script initial en python. Ils devront donc copier tous ces fichiers dans leurs espace personnel sur le réseau,

qu'il faut fournir aux élèves un script à compléter qui contient toutes les instructions permettant de gérer cet aspect, sans qu’ils aient à le comprendre, ni intervenir sur celui-ci.

qu'il fautde définir une zone de travail à l’intérieur du script délimitée par des #########,

que l'exécution du script va générer une fenêtre graphique supplémentaire en plus de la console et du script, à fermer à chaque fin d’utilisation sinon le script ne pourra pas être exécuter à nouveau.

Pour l’enseignant, la présence de ces instructions technique peut paraître rebutante au premier abord mais ne doit pas constituer un frein car :

les élèves ne sont pas perturbés par cet aspect,

Des commentaires doivent être ajoutés pour expliquer la finalité de ces lignes de script,

Elles peuvent être aisément comprises, recopiées et adaptées pour modifier ou même créer une activité, même si on a une connaissance non approfondie du langage Python, et permettre ainsi leur appropriation.