Cet article décrit différentes étapes à suivre pour réaliser un atelier d’initiation à la programmation. Cet atelier peut être destiné à des enfants dans les écoles.
Pour apprendre à programmer d’une façon amusante, nous partons du principe que l’enfant doit pouvoir interagir avec l’ordinateur avec des mots simples, courts et surtout que le résultat doit être visible graphiquement.
L’avantage de cet atelier est qu’il est réalisé en langage Python : le professeur peut ainsi le modifier et l’améliorer facilement s’il connait le langage Python (Jython en fait) et les mécanismes des greffons proposés par le langage Linotte.
Linotte est un langage de programmation simple, mais nous allons le simplifier en peu plus !
Ainsi, nous allons créer un greffon graphique qui affiche une horloge sur l’écran.
Afficher une horloge est assez complexe, car il faut dessiner un cercle, afficher les chiffres autour du cadran et bien positionner les aiguilles.
Nous allons cacher cette complexité en le réalisant directement en langage Python.
Nous laisserons à l’enfant seulement la possibilité d’afficher l’horloge, puis de modifier les aiguilles de l’horloge directement en langage Linotte.
Etape 1 : l’écriture du greffon minimal en Python
La structure d’un greffon graphique en langage Python est la suivante :
from org.linotte.greffons.externe import Graphique
from java.awt import Color
class Simple(Graphique):
#### Methodes liees a l aspect graphique
def projette(self, dessin):
dessin.setPaint(Color.BLUE)
dessin.drawString("Hello !", 100, 100)
return None
def getShape(self):
return None
#### Methodes liees au greffon Simple
def slot_message(self):
return "Coucou !"
Ce petit bout de code permet d’afficher le texte Hello sur la toile et propose la fonction message().
Pour utiliser ce greffon, il va falloir l’enregistrer dans un fichier Simple.py (attention à bien respecter la casse) dans le répertoire greffons de votre Atelier Linotte.
Ensuite, il faut signaler ce greffon avec ces caractéristiques auprès de l’Atelier, pour cela, créez le fichier simple.greffon.xml contenant ce xml :
<?xml version="1.0" encoding="UTF-8"?>
<greffon nom="Simple" espece="simple" class="Simple" lang="python">
<description>Exemple simple<description>
<auteur>R.M</auteur>
<version>0.1</version>
</greffon>
Vous enregistrez ce fichier dans le répertoire greffons de votre Atelier.
Suite à ces deux actions, relancez l’Atelier : votre greffon est prêt à être utilisé !
Testons-le avec cet exemple dans l’Atelier :
principale :
démo est un simple
début
projette démo
affiche démo.message()
Voici le résultat sur la toile :
Et sur le tableau :
Coucou !
Nous avons toutes les bases pour créer notre Atelier de programmation !
Etape 2 : l’écriture du greffon Horloge en Python
Nous allons maintenant créer un greffon en Python qui affiche une horloge.
Voici le code Python que vous allez sauvegarder dans un fichier Horloge.py dans le répertoire greffons :
from java.awt import Color, BasicStroke, Graphics2D
from org.linotte.greffons.externe import Graphique
import math
import time
class Horloge(Graphique):
#### Attributs de l'objet Horloge
heure = 0
minute = 0
seconde = 0
#### Methodes liees a l aspect graphique
def projette(self, dessin):
x = self.getAttributeAsBigDecimal("x").intValue()
y = self.getAttributeAsBigDecimal("y").intValue()
rayon = self.getAttributeAsBigDecimal("rayon").intValue()
dessin.setPaint(Color.DARK_GRAY)
dessin.setStroke(BasicStroke(3))
dessin.drawOval(x, y, rayon * 2, rayon * 2)
x2 = x + rayon
y2 = y + rayon
# Affichage de l'heure
dessin.setPaint(Color.BLUE)
dessin.setStroke(BasicStroke(5, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND))
dessin.drawLine(x2, y2, int(x2 + rayon * 0.6 * math.cos((self.heure - 3) * 2 * math.pi / 12)), int(y2 + rayon * 0.6 * math.sin((self.heure - 3) * 2 * math.pi / 12)))
# Affichage des minutes
dessin.setPaint(Color.BLACK)
dessin.setStroke(BasicStroke(3, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND))
dessin.drawLine(x2, y2, int(x2 + rayon * 0.85 * math.cos((self.minute - 15) * 2 * math.pi / 60)), int(y2 + rayon * 0.85 * math.sin((self.minute - 15) * 2 * math.pi / 60)))
# Affichage de la trotteuse
dessin.setPaint(Color.RED)
dessin.setStroke(BasicStroke(1, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND))
dessin.drawLine(x2, y2, int(x2 + rayon * 0.9 * math.cos((self.seconde - 15) * 2 * math.pi / 60)), int(y2 + rayon * 0.9 * math.sin((self.seconde - 15) * 2 * math.pi / 60)))
# Les chiffres
dessin.setPaint(Color.BLACK)
for c in range(1, 13):
dessin.drawString(str(c), int(x2 + rayon * 1.2 * math.cos((c - 15) * 2 * math.pi / 12)), int(y2 + rayon * 1.2 * math.sin((c - 15) * 2 * math.pi / 12)))
return None
def getShape(self):
return None
#### Methodes liees au greffon Horloge
def slot_heure(self, h):
self.heure = int(h)
# Force le rafraichissement de la toile :
self.getRessourceManager().setChangement()
return True
def slot_minute(self, m):
self.minute = int(m)
# Force le rafraichissement de la toile :
self.getRessourceManager().setChangement()
return True
def slot_seconde(self, s):
self.seconde = int(s)
# Force le rafraichissement de la toile :
self.getRessourceManager().setChangement()
return True
Le descripteur du greffon nommé horloge.greffon.xml contient :
<?xml version="1.0" encoding="UTF-8"?>
<greffon nom="Horloge" espece="horloge" class="Horloge" lang="python">
<description>Atelier Horloge</description>
<auteur>R.M</auteur>
<version>0.1</version>
<attribut nom="x" type="NOMBRE">50</attribut>
<attribut nom="y" type="NOMBRE">50</attribut>
<attribut nom="rayon" type="NOMBRE">100</attribut>
</greffon>
Après avoir créé ces deux fichiers, vous relancez l’Atelier.
Maintenant, nous pouvons créer notre Atelier de programmation !
Etape 3 : Création d’un Atelier de programmation niveau 1
Ce premier niveau permet d’afficher l’horloge avec l’heure souhaitée.
L’enfant doit être accompagné pour réaliser le programme suivant :
principale :
comtoise est une horloge
début
projette comtoise
comtoise.heure(15)
comtoise.minute(35)
comtoise.seconde(50)
Le résultat est directement visible après l’exécution du livre :
Compliquons un peu plus les choses …
Etape 4 : Création d’un Atelier de programmation niveau 2 avec une boucle
Pour ce deuxième exemple, nous allons ajouter une boucle permettant d’afficher l’heure en temps réel :
principale :
comtoise est une horloge
début
projette comtoise
tant que vrai, lis
comtoise.heure(heure)
comtoise.minute(minute)
comtoise.seconde(seconde)
attends 1 seconde
ferme
Il ne manque que le son du tictac !
Etape 5 : Création d’un Atelier de programmation niveau 3 avec des conditions, des boucles
Et pour les enfants motivés, nous allons réaliser un vrai programme.
Le programme suivant affiche une comtoise, une vraie.. si si ! Avec le balancier qui se balance !
Voici le programme qui doit être réalisé :
principale :
pièce est une toile, couleur vaut "vert bouteille"
comtoise est une horloge, x vaut 200, y vaut 50, rayon vaut 80, position vaut 1
coffre est un rectangle, couleur vaut "puce", plein vaut "oui", position vaut 0,
x vaut 180, y vaut 15, hauteur vaut 500, largeur vaut 205
balancier est un cercle, plein vaut "oui", x vaut 280, y vaut 400, position vaut 1,
couleur vaut "platine", rayon vaut 20
tige est une ligne, x1 vaut 280, y1 vaut 250, x2 vaut 280, y2 vaut 400, position vaut 1,
couleur vaut "platine", taille vaut 5
i est un nombre
sens est un drapeau valant vrai
début
projette comtoise
projette coffre
projette balancier
projette tige
tant que vrai, lis
comtoise.heure(heure)
comtoise.minute(minute)
comtoise.seconde(seconde)
// Evolution du balancier
pour i de 0 à 40 suivant i + 5, lis
si sens est vrai, lis
x de balancier vaut 260 + i
x2 de tige vaut 260 + i
ferme
sinon lis
x de balancier vaut 300 - i
x2 de tige vaut 300 - i
ferme
attends 1/8 seconde
ferme
sens vaut non (sens)
ferme
L’Atelier de programmation est terminé.
Conclusion :
Le professeur peut adapter son cours en modifiant le greffon et les enfants ont découverts les bases de la programmation simplement et en s’amusant.
Vous trouverez tous les fichiers de l’exemple Horloge sur forum.
Un autre atelier pédagogique pour apprendre à programmer est proposé : Le robot.