Nous sommes dans un premier temps partis du code source utilisé par Jill-Jênn Vie [3]. Cette base de travail fournit une série de pages web contenant du code html / javascript, qui peut être modifié et immédiatement exécuté dans la page elle-même [4]. En revanche, le code produit ne peut pas être enregistré, sauf par l’intermédiaire d’un copié-collé.

Les instructions en javascript sont peut-être de prime abord assez effrayantes pour les élèves, mais ils apprennent rapidement comment intervenir sur le code pour modifier le jeu ou la petite animation produite. Ainsi, ils peuvent prendre conscience de leur capacité à comprendre les principes de la programmation d’une page web.

Des échanges avec un collègue de sciences de l’ingénieur, partageant certaines classes avec nous à l’occasion d’un enseignement d’exploration, nous ont convaincus d’utiliser un langage par bloc, de type « Scratch ». Cela permet une grande cohérence pour les élèves car l’interface utilisée en S.I. pour programmer les modules Arduino et presque la même que celle utilisée en cours de mathématiques. Cependant, le logiciel Scratch est peu adapté pour notre projet car il offre certaines possibilités qui court-circuitent les notions que l’on doit enseigner en mathématiques [5].

La découverte de Blockly nous a permis de disposer d’un environnement de travail où les élèves peuvent coder par bloc mais où le professeur peut contrôler les blocs qui sont disponibles [6].

Nous avons développé une version utilisable avec les élèves [7], où le nombre de blocs disponibles est volontairement fortement restreint, mais où par ailleurs certains nouveaux blocs ont été ajoutés. Cela permet, d’un côté, de rendre nécessaire l’utilisation des notions du programme de mathématiques de seconde ; et, d’un autre côté, de court-circuiter certaines difficultés propres à l’algorithmique : c’est un peu l’inverse de ce qui se passe dans le logiciel Scratch où les difficultés mathématiques sont levées mais où tout est fait pour permettre de travailler la programmation.

Cet environnement permet également d’enregistrer un algorithme ou d’ouvrir un fichier préalablement enregistré [8].

Un exemple qui utilise les blocs spéciaux proposés aux élèves :

codage (relativement simple) d’un curseur bleu qu’on pilote avec les flèches du clavier.

retour en début de partie

Rappelons que notre objectif n’est pas uniquement d’enseigner certains rudiments d’algorithmique, mais avant tout d’utiliser l’algorithmique pour faire travailler certaines notions mathématiques d’une façon différente, pour les inscrire dans un cohérence globale et pour leur donner une raison d’être supplémentaire. Plusieurs chapitres du programme de seconde ont toute leur place dans ce parcours : ceux où on étudie les notions de fonction, d’intervalle, les équations de droites, les vecteurs, les expressions du second degré, notamment.

La question initiale évoquée ci-dessus en introduction : « Comment un ordinateur peut-il faire pour proposer un jeu vidéo à l’écran ? », se décline en plusieurs sous-questions plus précises. Chacune d’entre elles justifie l’introduction d’une notion mathématique du programme de seconde et le travail de certains types de tâches mathématiques [9]. En voici quelques-unes que nous avons abordées sous une forme ou une autre cette année :

« Comment créer l’illusion du mouvement ? »

Réponse :
pour donner l’impression qu’un objet – par exemple un disque rouge – se déplace, on affiche l’objet à un certain endroit de l’écran, puis on l’efface et on le ré-affiche très vite, à un endroit légèrement différent. On répète cela très rapidement et un grand nombre de fois.

La programmation de cet algorithme très simple oblige à utiliser des axes de coordonnées pour définir la position du centre du disque rouge, des variables pour stocker ces coordonnées et les modifier à chaque itération ; et même quelques lignes de code qu’il faudra répéter un grand nombre de fois et qu’on peut placer dans une structure appelée classiquement une « fonction » en algorithmique.

Si on veut contrôler le mouvement du disque rouge – vitesse, direction, etc. – , il faut travailler sur les coordonnées d’un point.

Ce travail s’inscrit également naturellement dans le chapitre sur les fonctions et leurs représentations graphiques. La similitude entre une courbe, qui est un ensemble de points dont les coordonnées sont liées par une relation, et un mouvement à l’écran, qui se décompose en une succession d’images où la position de l’objet est également repérée, est un point d’appui. Par contre, les différences de signification des mots « variable » et « fonction » en mathématiques et en algorithmique sont bien sûr à prendre en compte.

« Comment détecter qu’un objet atteint les bords de la zone graphique ? »

Réponse :
avec des tests du type « si $x>300$ alors... ». (La zone graphique dans notre environnement correspond à $x_{min}=y_{min}=0$ et $x_{max}=y_{max}=300$ .)

L’étude de ce type de tests très simples remplit un objectif algorithmique mais donne aussi l’occasion de travailler sur les droites d’équation $y=0$ ; $y=300$ ; $x=0$ et $x=300$ et qui seront généralisées par la suite.

« Comment détecter la collision entre deux objets rectangulaires ? »

Réponse :
laissée au lecteur ! (voir l’activité 1 jointe en annexe)

C’est une activité intéressante du point de vue logique, mais surtout : il donne l’occasion d’un travail sur les intervalles et les inégalités, qui est différent des habituelles résolutions d’inéquations.

« Comment faire en sorte qu’un rayon laser atteigne une cible donnée ? »

Réponse :
en calculant la pente appropriée de la droite qui va représenter ce rayon laser.

La fameuse méthode qui consiste à lire graphiquement la pente d’une droite prend ici tout son sens : on trace un rayon laser point par point en augmentant à chaque itération l’abscisse, de « 1 », et l’ordonnée, d’une valeur égale à la pente…

« Comment représenter la vitesse d’un objet, de façon à pouvoir programmer facilement, par exemple, son rebond sur les bords de la zone graphique ? »

Réponse :
grâce à un vecteur vitesse et à ses coordonnées.

Le rebond sur une des parois de la zone graphique rectangulaire se programme très simplement, en inversant le signe d’une des coordonnées du vecteur vitesse. C’est donc l’occasion de travailler sur les vecteurs mais également, à nouveau, sur les coordonnées.

« Comment donner l’illusion qu’un objet est lancé, puis retombe au sol sous l’action de son poids ? »

Réponse :
si on admet que la trajectoire de l’objet en chute libre est une parabole, il suffit de programmer point par point le dessin d’une parabole à l’écran...

C’est l’occasion de retravailler sur les courbes vues comme ensembles de points et les méthodes pour les dessiner à partir d’un tableau de valeurs… mais si on veut maîtriser la forme de la trajectoire, tout un travail sur les expressions du second degré est possible. Voici quelques pistes simples :

• Pour que la trajectoire ne sorte pas de l’écran, on peut jouer sur l’influence du coefficient de « $x^{2}$ ».
• Pour maîtriser l’endroit où l’objet retombe : un travail sur les expressions factorisées « $a(x-x_{1})(x-x_{2})$ » est tout à fait approprié.
• Pour être certain que l’objet passe par un point A donné, on peut utiliser un travail sur les équations du type $y_\text{A}=ax_\text{A}^{2}+bx_\text{A}$ où l’inconnue est $b$.

Les travaux évoqués ci-dessus peuvent être organisés avec les élèves de différentes façons :

• travail en groupe-classe, comme dans l’activité 1 proposée en annexe.
• travail en salle informatique dans un environnement ouvert, avec éventuellement des consignes données sur papier et des algorithmes envoyés aux élèves sous forme de fichier « xml » (voir l’activité 2 proposée en annexe).
• travail en salle informatique dans une suite d’environnements plus restreints incluant des consignes précises (voir l’image ci-dessous [10])

Exemple de série d’exercices où les consignes et les algorithmes sur lesquels doivent travailler les élèves sont entièrement donnés sur écran.

Les rendus demandés aux élèves peuvent être : un fichier contenant un algorithme, une feuille sur laquelle ils ont recopié les modifications effectuées dans le code initial, des explications et un calcul mathématique, etc.

Ces travaux sur le thème des jeux vidéos prennent bien sûr toute leur place lors de la mise au point de nouvelles techniques en mathématiques ou en algorithmique, mais ils peuvent aussi être inclus dans les évaluations par exemple : voici un extrait d’un exercice utilisé lors d’un contrôle.

Exercice

Donné lors d’un contrôle

retour en début de partie
retour en début d’article

Comme nous avons en général manqué de temps pour mettre au point nos activités – tant sur le plan technique que sur le plan pédagogique – , rien n’est parfait et les progrès à réaliser sont nombreux. Cependant, l’intérêt des élèves pour ce type de travail ne s’est pas démenti et la cohérence du parcours sur toute l’année de seconde [11] est d’un grand intérêt.

Sans surprise, nous avons pu constater que les élèves manipulent beaucoup plus facilement le code de type « Blockly » que le « javascript ». Cependant, présenter un peu de javascript au cours de l’année présente aussi des intérêts et ne doit pas à notre avis être écarté trop vite.
Si on fournit un algorithme aux élèves, leur premier réflexe est de le manipuler, de voir comment on peut « trafiquer » le code initial pour obtenir tel ou tel comportement. Ils parviennent alors rapidement à obtenir de petits résultats, mais souvent par des voies surprenantes, voire totalement inattendues [12] !
Si on veut qu’ils lisent réellement le code, de façon linéaire et en étant capable de comprendre comment il fonctionne, il faut batailler un peu et éventuellement avoir recours au dispositif "frontal" avec vidéoprojecteur. Un autre moyen consiste bien sûr à leur demander d’écrire un algorithme à partir de zéro [13] et dans ce cas Blockly est bien plus pertinent que le javascript.

Il est très important, au delà de l’environnement de travail qu’on a préparé, de réfléchir aux consignes que l’on va donner aux élèves et à la façon qu’on aura de gérer la séance. C’est un travail difficile car on a peu de recul : on améliore les choses petit à petit en observant les réactions des élèves.
Il faut aussi signaler que bien sûr, pour certains élèves, la motivation s’érode rapidement devant la difficulté : pour garder l’aspect ludique et éviter au maximum les problèmes trop techniques, il est important de prévoir quelques blocs supplémentaires qui permettent d’obtenir à peu de frais de petites animations intéressantes :

• « explosion(x ;y) » (dessine une image d’explosion au point de coordonnées (x ;y) ;
• « collision(x1,y1,w1,h1,x2,y2,w2,h2) » (détecte dans un booléen que les rectangles dont les coordonnées sont indiquées en arguments s’intersectent) ;
• « curseur(x_initial ;y) » (crée un curseur initialement placé au point dont les coordonnées sont données) ;
• « personnage(x ;y) » (crée un personnage au point dont les coordonnées sont données)
• ... [14]

Enfin, une amélioration sans doute très intéressante consisterait à créer un « micro-monde » dans lequel les élèves pourraient programmer leur propre petit jeu-vidéo, y ajoutant des éléments au fur et à mesure de l’avancement de l’année et en parallèle du travail fait en classe. Les efforts entrepris cette année nous rapprochent de cet objectif, mais il reste des limitations, comme la difficulté d’écrire un code relativement long avec des blocs Blockly [15].

Les choses évoluent très vite actuellement en ce qui concerne les rapports entre mathématiques et algorithmique dans l’enseignement, mais aussi bien sûr au niveau du développement des outils logiciels disponibles. Nous espérons que des lecteurs intéressés signalerons certains outils que nous ne connaissons pas ou reprendrons certains des outils que nous avons développés, pour les améliorer à leur tour.

N’hésitez pas à réagir à cet article...
retour en début de partie
retour en début d’article