Les nouvelles technologies pour l’enseignement des mathématiques
Intégration des TICE dans l’enseignement des mathématiques

MathémaTICE, première revue en ligne destinée à promouvoir les TICE à travers l’enseignement des mathématiques.

Au fil des cordes
Article mis en ligne le 6 octobre 2017
dernière modification le 10 novembre 2017

par Alexis Lecomte

’Au fil des cordes’ : spectacle réalisé par des élèves du lycée Maurois (restitué le 4 mai 2016 au Cirque-Théâtre d’Elbeuf), avec la participation de deux élèves d’ISN (dans le cadre de leur projet de bac).

Conception du projet

Établi depuis plusieurs années, un lien fort existe entre le Cirque-Théâtre d’Elbeuf et l’option musique du lycée Maurois (avec notamment la conception de plusieurs projets cirque/musique). Concernant l’année scolaire 2015/2016, un spectacle était programmé sur le thème de la ligne, avec des interventions d’un funambule, d’un chorégraphe et d’un percussionniste.
Trois ateliers en parallèle étaient donc prévus sur les quelques mercredi après-midi de répétition pour les élèves volontaires de l’option musique.

Très tôt (durant l’été 2015, c’est l’avantage de partager ses grandes vacances avec la professeur de musique…), nous avons également discuté de l’implication de l’ISN dans le spectacle. L’idée originelle était de créer un passage du spectacle avec une partition aléatoire générée à partir de lignes, qui serait projetée sur un écran géant.
J’avais testé au préalable la faisabilité technique (avec Python et la librairie Tkinter) mais une des difficultés principales était la date du spectacle (début mai), assez tôt comparé au temps alloué aux projets d’ISN (de mars à début juin). Cependant l’idée a germé notamment en connaissant deux élèves particulièrement créatifs qui avaient choisi la spécialité ISN, Sami, un élève de l’option musique et Léo, élève suivant l’option arts plastiques.

Travail préparatoire et partition aléatoire

Dès les premiers mini-projets du mois de septembre et avec l’accord de mon collègue d’ISN Valéry Quédru, il a fallu évoquer l’idée de ce projet particulier afin de s’assurer de la constitution du binôme, ce qui n’a posé aucun problème, l’ensemble des élèves comprenant le principe.
Comme tous les autres élèves d’ISN, Léo et Sami ont découvert la programmation et le langage Python durant le premier semestre de l’année.
Le mercredi 20 janvier ils ont pu assister au Cirque-Théâtre à une séance de travail pour se familiariser avec le projet.
A ce stade, nous encouragions les deux élèves à proposer d’eux mêmes des idées originales.
Voici un extrait (issu du dossier projet de Léo, avec son accord) :
• Sonogramme relié à l’intensité du son de l’orchestre
• Cardiogramme relié encore une fois à la musique
• Lignes qui se placent de façon à créer un mot
• Lignes qui s’agencent très vite en un objet puis qui repartent aussitôt
• Effet de 3D (plusieurs lignes, jouer avec leur épaisseur)
• Intégration de photo réelle dans Tkinter
• Disparition de l’écran par un remplissage de lignes
• Décalage de lignes suivant la couleur associée aux coordonnées d’une image donnée
• Explosion de lignes
• Arbre

Une des difficultés fût donc de choisir ce qui était réalisable en temps raisonnable !
En parallèle on leur présentait l’idée de partition aléatoire, avec une idée nouvelle : faire participer le public !
En disposant des élèves de seconde, première et terminale de l’option musique dans le public, la partition aléatoire se retrouve exécutée par le public en même temps que sa conception.
Au fil du temps, il a été décidé de concevoir trois phases différentes pour le public participatif.
Voici ce que Léo écrira dans son dossier pour expliquer comment est utilisée la partition :
Légende des couleurs :


« (Chaque élève était muni d’un bâtonnet fluorescent dont la couleur correspondait à sa couleur de référence, le mouvement d’un élève induisait donc simultanément un déplacement lumineux ainsi que le départ du chant de l’élève : l’animation vidéo avait donc pour conséquence un déplacement matériel, une production sonore et lumineuse...) »

Évidemment la programmation par classes n’était pas abordée dans l’enseignement d’ISN, Sami et Léo ont donc dû faire face à certaines difficultés, notamment d’afficher plusieurs lignes en même temps (leurs premiers essais ne faisaient apparaître les lignes qu’une par une ce qui manquait de dynamisme) puis de maîtriser plus finement l’aléatoire (appui sur une touche pour faire apparaître une ligne d’une couleur précise afin de maîtriser le rythme et l’alternance des participants, maîtrise de la trajectoire des lignes pour éviter d’en avoir une dans un angle de l’écran…)

Au final voici ce que donne l’exécution du code Python :

Code Python concernant la première phase :

  1. # Créé par Sami et Léo, le 28/05/2016 en Python 3.2
  2. from random import *
  3. from tkinter import*
  4.  
  5. #Lignes qui viennent du bas: PHASE 1
  6. def animation1 (LIGNE,NEON, X1, X2, Y1, Y2, DECALAGEY, HAUTEUR):
  7.     if -11<Y2:# si extrémité n'est pas trop basse, la ligne monte
  8.         Y2=Y2+DECALAGEY
  9.         if Y2<=HAUTEUR:#lorsque extrémité arrive à sa hauteur déterminé, elle commence à "reculer"
  10.             DECALAGEY=-DECALAGEY
  11.         Fond.coords(NEON, X1, Y1, X2, Y2)
  12.         Fond.coords(LIGNE, X1, Y1, X2, Y2)
  13.         fenetre.after(10,animation1, LIGNE,NEON, X1, X2, Y1, Y2, DECALAGEY, HAUTEUR)
  14.  
  15. def creer_ligne1(obligacouleur):
  16.     global farbe
  17.     Y1=H+10
  18.     Y2=Y1 #Y1 et Y2
  19.     X1=randint(L/8,L-L/8)
  20.     X2=X1
  21.     decalageY=randint(-5,-1)
  22.     indexcolor=3   #valeur de couleur par défaut: le blanc
  23.     tableaucolor=['#FF00CC','#FFA000','#33AAFF','#FFFFFF']
  24.     if obligacouleur==True:           # oligacouleur traduit la demande de l'utilisateur: ligne de couleur (non pas blanche)
  25.         indexcolor=randint(0,2)
  26.         while tableaucolor[indexcolor]==farbe:#la couleur précédente ne peut être reprise directement
  27.             indexcolor=randint(0,2)
  28.     farbe=tableaucolor[indexcolor]
  29.     width=randint(10,20)  #épaisseur
  30.     hauteur=randint(H/4,H/2)  #hauteur limite
  31.     neon=Fond.create_line(X1, Y1, X2, Y2, width=width+2, fill="black")
  32.     ligne=Fond.create_line(X1, Y1, X2, Y2, width=width, fill=tableaucolor[indexcolor])
  33.     animation1(ligne, neon, X1, X2, Y1, Y2, decalageY, hauteur)
  34.  
  35. def blanc(event = 0):
  36.     creer_ligne1(False)
  37. def colorer(event = 0):
  38.     creer_ligne1(True)
  39. farbe='#FFFFFF'
  40.  
  41. L,H=1024, 768
  42. fenetre=Tk()
  43. Fond=Canvas(fenetre, width=L, height=H, bg="black")
  44. Fond.grid()
  45.  
  46. fenetre.bind('<a>', colorer)#bleu violet ou orange
  47. fenetre.bind('<z>', blanc)#blanc
  48. ##fenetre.attributes("-fullscreen", 1)
  49. fenetre.mainloop()

Télécharger

Les autres idées de Léo et Sami

Des foisonnantes idées de Léo et Sami, trois ont été conservées pour être intégrées à divers moments du spectacle, les élèves se répartissant le travail de programmation.

 Pluie verticales découvrant des lignes horizontales :

 Création d’arbres à partir de lignes : Cette idée reprend le principe de fractales, même si des fonctions récursives n’ont pas été utilisées dans le code.

Code Python correspondant, générant une fois de plus un rendu aléatoire (mais maîtrisé, afin d’obtenir un résultat visuellement intéressant)

  1. # Créé par samip, le 20/04/2016 en Python 3.2
  2. #from lycee import *
  3. from random import *
  4. from math import *
  5. from tkinter import *
  6. import time
  7.  
  8. L,H=800, 600
  9.  
  10. def animation_branche_2(LIGNE, X1, Y1, X2, Y2, decalageX, decalageY, width, premier):
  11.     global index_branche
  12.     if(LIGNE>2500):
  13.         return
  14.     #global X1, X2, Y1, Y2, décalageX, décalageY
  15.     if (-11<Y2<H+10 and -11<X2<L+10) and not(premier and Y2<H//2):
  16.         X2=X2+decalageX
  17.         Y2=Y2+decalageY
  18.         Fond.coords(LIGNE, X1, Y1, X2, Y2)
  19.         vitesse=80
  20.         #correctif de vitesse pour les dernières lignes :
  21.         # if decalageX != 0:
  22.         #     vitesse = max(int(vitesse*fabs(decalageX)//2),vitesse)
  23.         fenetre.after(vitesse,animation_branche_2,LIGNE, X1, Y1, X2, Y2, decalageX, decalageY, width, premier)
  24.     else:
  25.         if -11<Y1<H+10 and -11<X1<L+10:
  26.             decalageXnew=decalageX
  27.             decalageXnew2=decalageX
  28.             while decalageXnew==decalageX or decalageXnew2==decalageX:
  29.                 if(randint(1,2)==1):
  30.                     decalageXnew = randint(-3,-1)
  31.                     decalageXnew2 = randint(1,3)
  32.                 else:
  33.                     decalageXnew = randint(1,3)
  34.                     decalageXnew2 = randint(-3,-1)
  35.             #plus joli si les premiers sont très écartées :
  36.             if premier :
  37.                 decalageXnew=-7
  38.                 decalageXnew2=5
  39.                 decalageXnew3=-3
  40.                 decalageXnew4=2
  41.             # m = randint(3,7)
  42.             # n = randint(2,m-1)
  43.             m = randint(20,25)
  44.             n = 3*m//8
  45.             X1_new=((m-n)*X1+n*X2)//m
  46.             Y1_new=((m-n)*Y1+n*Y2)//m
  47.             if premier :
  48.                 width_new = 10
  49.                 m = randint(20,25)
  50.                 n = m//2-5
  51.                 X1_new=X1
  52.                 #Y1_new=((m-n)*Y1+n*Y2)//m
  53.                 #Y1_new2=(n*Y1+(m-n)*Y2)//m
  54.                 X1_new2=X1
  55.                 Y1_new = tab_branches_gauche[index_branche]
  56.                 Y1_new2 = Y1_new+10
  57.                 index_branche = index_branche+1
  58.  
  59.             else :
  60.                 width_new = max(width//2,1)
  61.                 #de l'autre côté de la branche
  62.                 #X1_new2=(n*X1+(m-n)*X2)//m
  63.                 #Y1_new2=(n*Y1+(m-n)*Y2)//m
  64.                 n=m-n+3
  65.                 X1_new2 = (n*X1+(m-n)*X2)//m
  66.                 Y1_new2=(n*Y1+(m-n)*Y2)//m
  67.             creer_branche_2(X1_new,Y1_new,X1_new,Y1_new,decalageXnew,decalageY,width_new, False)
  68.             creer_branche_2(X1_new2,Y1_new2,X1_new2,Y1_new2,decalageXnew2,decalageY,width_new, False)
  69.  
  70. def creer_branche_2(X1,Y1,X2,Y2,decalageX,decalageY,width,premier = False):
  71.     Color='#FFFFFF'
  72.     ligne=Fond.create_line(X1, Y1, X2, Y2, width=width, fill=Color)
  73.     #print("ligne=",ligne)
  74.     animation_branche_2(ligne,X1, Y1, X2, Y2, decalageX, decalageY,width, premier)
  75.  
  76. fenetre=Tk()
  77. Fond=Canvas(fenetre, width=L, height=H, bg="black")
  78. Fond.grid()
  79.  
  80. def arbre_v2(event):
  81.     global index
  82.     #définition des variables de base du tronc (jacques)
  83.     Y1=H+9
  84.     Y2=Y1
  85.     X1=tab_depart[index]
  86.     index=index+1
  87.     X2=X1
  88.     decalageX=randint(0,0)
  89.     decalageY=-1#pour la vitesse
  90.     creer_branche_2(X1,Y1,X2,Y2,decalageX,decalageY,40,True)
  91.  
  92. #fenetre.attributes("-fullscreen", 1)
  93. index = 0
  94. index_branche = 0
  95. tab_depart = [7*L//16,10*L//16]#pour savoir en quelles abscisses partent les deux arbres
  96. tab_branches_gauche = [H//2+1*H//4-35,H//2+1*H//4+50]#pour savoir à quelle hauteur partent les branches gauche
  97. fenetre.bind('<a>',arbre_v2)
  98. fenetre.mainloop()

Télécharger

 Affichage d’une clé de sol : pour la fin du spectacle, une des idées des élèves a été de se servir d’une image de clé de sol pour la faire apparaître, toujours en dessinant des lignes verticales.

Pas d’aléatoire ici, mais une idée simple avec un rendu visuel intéressant. Au niveau du code, les élèves ont pensé à utiliser les informations de l’image en deux couleurs (noir et blanc) et reprendre l’idée de la pluie verticale, mais en testant à chaque pixel si le pixel correspondant de la clé de sol avait changé de couleur et ne rien dessiner à ce pixel, afin de créer un décalage qui créera au final le détour de la clé de sol.
Lors du spectacle, deux vidéo projecteurs ont été installés, afin de projeter les images à la fois sur l’écran géant et sur le sol.
Cette partie mettant en avant la traversée d’une élève sur un fil haut de 6 mètres, accompagnée de deux danseurs et d’une musique créée pour l’occasion s’est révélée particulièrement poétique.

Code Python correspondant :

  1. # Créé par Léo, le 31/05/2016 en Python 3.2
  2. from random import *
  3. from tkinter import*
  4. from PIL import Image
  5.  
  6. im1=Image.open("cle.JPG")
  7. L,H=im1.size
  8. x1, y1,y2=3, 0,0 #x1,y1,y2,xx1,yy1,yy2=> coordonnées associées à l'ANIMATION,au CANVAS
  9. xx1, yy1,yy2=L-2,0,0
  10. PP1,PP2=255,255  #=>moyennes des composantes de couleurs
  11. decalage=5
  12.  
  13. def animation (X1,Y1,Y2,ligne, P,recule):
  14.     Fond.coords(ligne, X1, Y1, X1, Y2)
  15.     if Y2<H:# la ligne continue
  16.         p=im1.getpixel((X1,Y2))
  17.         if (p[0]+p[1]+p[2])/3!=P:#saut dans la ligne quand moyenne des composantes de couleurs change:
  18.             P=(p[0]+p[1]+p[2])/3
  19.             Y1=Y2+5     #le +5 représente le nb de pixels sautés
  20.             ligne=Fond.create_line(X1, Y1, X1, Y2, width=3, fill="white") #nouvelle ligne
  21.         else:
  22.             Y2=Y2+decalage
  23.         fenetre.after(1,animation,X1,Y1,Y2,ligne,P, recule)
  24.     else:
  25.         if recule==True:
  26.             if X1>L//2: #décalage vers la <--gauche à partir du haut:
  27.                 X1=X1-decalage
  28.                 Y2, Y1=0,0
  29.                 ligne=Fond.create_line(X1, Y1, X1, Y2, width=3, fill="white")  #nouvelle ligne
  30.                 animation(X1,Y1,Y2,ligne,P, recule)
  31.         else:#décalage vers la droite--> à partir du haut:
  32.             if X1<L//2:
  33.                 X1=X1+decalage
  34.                 Y2, Y1=0,0
  35.                 ligne=Fond.create_line(X1, Y1, X1, Y2, width=3, fill="white")  #nouvelle ligne
  36.                 animation(X1,Y1,Y2,ligne,P, recule)
  37.  
  38. def animer(event):
  39.     animation(x1,y1,y2,ligne1,PP1,False)
  40.     animation(xx1,yy1,yy2,ligne2,PP2,True)
  41.  
  42. fenetre=Tk()
  43. Fond=Canvas(fenetre, width=L, height=H, bg="black")
  44. Fond.grid()
  45. ligne1=Fond.create_line(x1, y1, x1, y2, width=3, fill="white")
  46. ligne2=Fond.create_line(xx1,yy1,xx1,yy2, width=3, fill="white")
  47.  
  48. fenetre.bind('<a>', animer)
  49. ##fenetre.attributes("-fullscreen", 1)
  50. fenetre.mainloop()

Télécharger

Le spectacle

Le travail des élèves a été particulièrement dense sur les trois derniers jours, du lundi 2 au mercredi 4 mai puisque des répétitions ont eu lieu les après midi et jusqu’à la générale avant le spectacle tout n’était pas encore parfaitement calé.
En effet il a fallu faire face à des adaptations puisque le spectacle s’est créé au fil de l’eau et a été précisé les derniers jours.
Sauf que ce qui semble des détails de l’extérieur ne l’est pas forcément du point de vue de la programmation !
Pour la clé de sol par exemple le code initial faisait apparaître une pluie de lignes verticales de la gauche vers la droite, ce qui était intéressant car avançait en même temps que la funambule mais faisait découvrir le motif de la clé de sol au milieu de la scène. En faisant démarrer cette pluie simultanément à gauche et à droite et en ralentissant le rythme, le motif n’apparaissait qu’à la toute fin.
Ce genre de modification (non prévue au départ de la programmation) est difficilement faisable par une personne n’ayant pas codé l’animation. Même en maîtrisant leur code les élèves ont pu mesurer la nécessité de le structurer de manière efficace (ce qu’ils n’avaient pas forcément mesuré en travaillant un peu dans l’urgence vu les délais).
De même, pour la partition avec public participatif, c’est réellement lors des derniers jours que la maîtrise de l’aléatoire par l’appui de touches s’est révélé nécessaire.
Du côté du déroulement, Sami étant musicien il était sur scène durant tout le spectacle. De mon côté je filmais les répétitions et le spectacle afin de réaliser une vidéo par la suite.
Il ne restait que Léo pour se placer en régie et se frotter au stress de gestion de la technique (commander les ‘shutter’ pour fermer/ouvrir les vidéoprojecteurs, basculer d’un fichier à l’autre etc).

L’intégralité du spectacle (environ 45 minutes) en haute définition est visible en ligne :

Après le spectacle…

Jusqu’à leur soutenance début juin, il restait donc un peu moins d’un mois de travail aux deux élèves. Nous étions rassurants sur leur travail déjà accompli (dépassant de loin les attentes d’un projet de bac d’ISN) tout en leur rappelant que le travail fourni pour l’ISN doit rester raisonnable…

Ils ont commencé à concevoir un site web pour témoigner de leur projet mais ne l’ont pas terminé faute de temps, ils se sont mis à la rédaction de leur dossier projet dans lequel ils ont notamment évoqué leurs autres idées et ce qu’ils auraient pu faire avec plus de temps (de la 3D pour Sami, optimisation de code et récursivité pour Léo)

On y trouve également une réflexion personnelle sur les arts numériques, faisant référence notamment au spectacle ‘Pixel’ (création de Claire B et Adrien M) pour lequel nous avions obtenu deux places pour Léo et Sami.

Extrait du dossier projet de Léo :

"Le Numérique et L’Art

Les Arts et Sciences restent aujourd’hui deux domaines qui semblent être opposés : l’expression libre contre la rigueur scientifique. Au-delà de cette idée stéréotypée, le rapprochement entre ces deux domaines paraît difficile : pour prendre l’exemple d’une terminale Scientifique, la créativité d’un élève, sans option facultative (ou dans notre cas la spécialité ISN), serait nullement sollicitée. Or la créativité enseigne l’imagination, une capacité non négligeable dans la recherche en Sciences par exemple...

Ainsi le numérique, domaine Scientifique, est aussi un domaine Artistique. L’Art questionne les Sciences et les Sciences donnent de nouvelles techniques pour la création artistique. Cette vision nous est appuyée par les paroles et l’expérience d’Adrien Mondot et de Claire Bourdainne, avec qui nous avons pu échanger à la fin de la représentation de leur spectacle : lui sort d’une formation d’ingénieur informaticien, elle de l’École Nationale Supérieure des Arts Décoratifs, ils représentent parfaitement l’alliage de l’Art et des Sciences. En effet ici le Numérique permet aux artistes une très grande liberté de création, permet d’atteindre un très fort pouvoir émotionnel. Les Sciences sont alors vectrices de création, créateurs d’Art ; (le 7ème Art par exemple représente bien cet accaparement de techniques scientifiques par le domaine de l’Art...) "

Une réflexion qui mériterait d’être partagée, ce projet témoignant qu’il est aberrant de mettre en concurrence le numérique et les arts (l’ICN de Première et Terminale étant une option facultative, on assiste malheureusement à l’extinction d’autres enseignements optionnels artistiques pour le financer…)

Sami et Léo ont tous les deux poursuivi des études artistiques, Sami est en licence ‘Arts du spectacle’ à Amiens et Léo suit un double cursus sciences et design sur Paris.