CoddyRun
Ce programme réalise une animation élégante et pédagogique : il montre pas à pas comment effectuer une addition posée, en décomposant les nombres, en affichant les retenues, et en mettant en évidence chaque colonne au moment où elle est calculée.
C’est un excellent exemple de programmation créative appliquée à l’enseignement des mathématiques.
Configuration générale
L’animation se déroule sur une toile de :
- 560 px de large
- 420 px de haut
Les différentes zones d’affichage sont soigneusement définies :
- BASE_X : position horizontale de la colonne des unités
- COL_LARG : largeur d’une colonne de chiffres
- Y_NB1, Y_NB2, Y_RETENUE, Y_RESULTAT : hauteurs des différentes lignes (retenues, premier nombre, second nombre, résultat)
Cette structuration permet un rendu propre, aligné, fidèle à la présentation traditionnelle de l’addition posée.
Saisie et préparation des nombres
Les deux nombres sont demandés à l’utilisateur :
- Premier nombre
- Deuxième nombre
Ils sont ensuite transformés en valeurs positives et arrondis à l’entier inférieur.
Décomposition en chiffres
Chaque nombre est découpé en chiffres individuels :
- On extrait les unités (mod 10)
- On divise par 10 pour passer à la colonne suivante
- On stocke les chiffres dans un tableau
Les chiffres sont donc rangés de droite à gauche, ce qui correspond parfaitement à la logique de l’addition posée.
Préparation des colonnes
Le programme détermine :
- le nombre total de colonnes (nbCol)
- un tableau resultat pour les chiffres du résultat
- un tableau retenues pour les retenues intermédiaires
Chaque case est initialisée à -1, ce qui signifie “non encore calculé”.
La procédure dessinerScene : cœur graphique de l’animation
Cette procédure construit une image complète représentant l’état actuel de l’opération.
Fond et titre
Un dégradé gris clair donne un aspect moderne et propre.
Un label affiche l’opération :
- Addition posée : A + B
Affichage des retenues
Chaque retenue déjà calculée est affichée en rouge au-dessus de sa colonne.
Affichage des deux nombres
Les chiffres du premier et du second nombre sont affichés en bleu, parfaitement alignés sur leurs colonnes respectives.
Le signe + est placé à gauche du second nombre.
Trait de séparation
Un trait horizontal marque la zone du résultat, comme dans une addition posée classique.
Mise en surbrillance de la colonne active
Lors du calcul, la colonne en cours est entourée d’un rectangle jaune pâle :
- on y réaffiche les chiffres concernés,
- on y affiche la retenue éventuelle,
- cela guide visuellement l’utilisateur.
Affichage du résultat partiel
Les chiffres déjà calculés du résultat apparaissent en vert, légèrement plus grands pour attirer l’œil.
Message explicatif
Un texte en bas de l’image explique ce qui se passe :
- On pose l’opération…
- 3 + 7 = 10
- J’écris 0 et je retiens 1
Chaque étape est donc accompagnée d’un commentaire pédagogique.
Calcul animé colonne par colonne L’addition se fait de droite à gauche, comme dans la méthode scolaire.
Pour chaque colonne :
- On récupère les chiffres da et db
- On ajoute la retenue éventuelle
On calcule :
- le chiffre du résultat (mod 10)
- la nouvelle retenue (total / 10)
- On affiche une scène expliquant le calcul
- On affiche une scène montrant l’écriture du résultat et de la retenue
Chaque étape est répétée plusieurs fois pour ralentir l’animation et permettre la lecture.
Affichage final
Une fois toutes les colonnes calculées :
- le programme affiche le résultat complet,
- avec un message final :
Résultat : A + B = C
Conclusion
Ce programme est un superbe exemple de pédagogie visuelle appliquée à l’algorithmique.
Il combine :
- décomposition numérique,
- gestion des retenues,
- animation progressive,
- mise en valeur de la colonne active,
- messages explicatifs,
- rendu graphique propre et moderne.
Le résultat est une animation éducative, idéale pour expliquer l’addition posée à des élèves, ou pour illustrer un cours de programmation créative.
Programme :
@ Configuration et Paramètres
LARG est un nombre
LARG vaut 560
HAUT est un nombre
HAUT vaut 420
film est un tableau
// Position d'affichage
COL_LARG est un nombre
COL_LARG vaut 42 // largeur d'une colonne de chiffres
BASE_X est un nombre
BASE_X vaut 400 // x du chiffre des unités
Y_RETENUE est un nombre
Y_RETENUE vaut 90
Y_NB1 est un nombre
Y_NB1 vaut 150
Y_NB2 est un nombre
Y_NB2 vaut 210
Y_TRAIT est un nombre
Y_TRAIT vaut 240
Y_RESULTAT est un nombre
Y_RESULTAT vaut 300
@ Saisie des deux nombres
nombre1 est un nombre
demande "Premier nombre : " dans nombre1
nombre1 vaut arrondi_inferieur(absolue(nombre1))
nombre2 est un nombre
demande "Deuxième nombre : " dans nombre2
nombre2 vaut arrondi_inferieur(absolue(nombre2))
@ Décomposition en chiffres
chiffresA est un tableau
chiffresB est un tableau
na est un nombre
na vaut nombre1
si na = 0 alors
chiffresA ajoute 0
fin si
tant que na > 0
chiffresA ajoute na mod 10
na vaut arrondi_inferieur(na / 10)
fin tant que
nbb est un nombre
nbb vaut nombre2
si nbb = 0 alors
chiffresB ajoute 0
fin si
tant que nbb > 0
chiffresB ajoute nbb mod 10
nbb vaut arrondi_inferieur(nbb / 10)
fin tant que
// Nombre de colonnes = max des deux longueurs, +1 pour une retenue finale
nbCol est un nombre
nbCol vaut maximum(longueur(chiffresA), longueur(chiffresB)) + 1
// Tableaux résultat et retenues (init à vide = -1)
resultat est un tableau
retenues est un tableau
ic est un nombre
pour ic de 0 à nbCol - 1
resultat ajoute -1
retenues ajoute -1
fin pour
@ Fonctions utilitaires
fonction chiffreA(col)
si col < longueur(chiffresA) alors
retourne chiffresA[col]
fin si
retourne 0
fin fonction
fonction chiffreB(col)
si col < longueur(chiffresB) alors
retourne chiffresB[col]
fin si
retourne 0
fin fonction
@ Procédure de Dessin
procedure dessinerScene(colActive, msg)
t est une toile
dimension(t, LARG, HAUT)
// Remplacement du fond uni par un joli dégradé
dégradé(t, [#f8f9fa, #e9ecef])
label(t, 20, 35, "Addition posée : " + convertir_texte(nombre1) + " + " + convertir_texte(nombre2), #495057, 18)
// --- Les retenues ---
rc est un nombre
pour rc de 0 à nbCol - 1
si retenues[rc] >= 0 alors
xr est un nombre
xr vaut BASE_X - rc * COL_LARG
label(t, xr + 4, Y_RETENUE, convertir_texte(retenues[rc]), #e63946, 18)
fin si
fin pour
// --- Premier nombre ---
c1 est un nombre
pour c1 de 0 à longueur(chiffresA) - 1
x1 est un nombre
x1 vaut BASE_X - c1 * COL_LARG
label(t, x1, Y_NB1, convertir_texte(chiffresA[c1]), #1c3d8f, 24)
fin pour
// --- Signe + et deuxième nombre ---
label(t, BASE_X - (nbCol - 1) * COL_LARG - 36, Y_NB2, "+", #1c3d8f, 24)
c2 est un nombre
pour c2 de 0 à longueur(chiffresB) - 1
x2 est un nombre
x2 vaut BASE_X - c2 * COL_LARG
label(t, x2, Y_NB2, convertir_texte(chiffresB[c2]), #1c3d8f, 24)
fin pour
// --- Trait de séparation ---
xGauche est un nombre
xGauche vaut BASE_X - (nbCol - 1) * COL_LARG - 10
ligne(t, xGauche, Y_TRAIT, BASE_X + 34, Y_TRAIT, #212529, 3)
// --- Colonne active mise en surbrillance ---
si colActive >= 0 alors
xa est un nombre
xa vaut BASE_X - colActive * COL_LARG
rectangle_arrondi(t, xa - 6, Y_RETENUE - 24, COL_LARG - 4, Y_RESULTAT - Y_RETENUE + 60, 8, #fff3bf)
si colActive < longueur(chiffresA) alors
label(t, xa, Y_NB1, convertir_texte(chiffresA[colActive]), #1c3d8f, 24)
fin si
si colActive < longueur(chiffresB) alors
label(t, xa, Y_NB2, convertir_texte(chiffresB[colActive]), #1c3d8f, 24)
fin si
si retenues[colActive] >= 0 alors
label(t, xa + 4, Y_RETENUE, convertir_texte(retenues[colActive]), #e63946, 18)
fin si
fin si
// --- Résultat ---
colMax est un nombre
colMax vaut 0
cm est un nombre
pour cm de 0 à nbCol - 1
si resultat[cm] >= 1 alors
colMax vaut cm
fin si
fin pour
rr est un nombre
pour rr de 0 à nbCol - 1
si resultat[rr] >= 0 et rr <= colMax alors
xres est un nombre
xres vaut BASE_X - rr * COL_LARG
label(t, xres, Y_RESULTAT, convertir_texte(resultat[rr]), #2b8a3e, 28) // Vert un peu plus grand
fin si
fin pour
// --- Message explicatif ---
label(t, 20, 380, msg, #495057, 18) // Police légèrement agrandie
film ajoute t
fin procedure
@ Calcul Animé
vide film
pour pause de 1 à 2
appelle dessinerScene(-1, "On pose l'opération. On calcule de droite à gauche.")
fin pour
retenue est un nombre
retenue vaut 0
col est un nombre
pour col de 0 à nbCol - 1
da est un nombre
da vaut chiffreA(col)
db est un nombre
db vaut chiffreB(col)
total_col est un nombre
total_col vaut da + db + retenue
chiffreResultat est un nombre
chiffreResultat vaut total_col mod 10
nouvelleRetenue est un nombre
nouvelleRetenue vaut arrondi_inferieur(total_col / 10)
msg1 est un texte
si retenue > 0 alors
msg1 vaut convertir_texte(da) + " + " + convertir_texte(db) + " + " + convertir_texte(retenue) + " (retenue) = " + convertir_texte(total_col)
sinon
msg1 vaut convertir_texte(da) + " + " + convertir_texte(db) + " = " + convertir_texte(total_col)
fin si
// Remplace les appels multiples par une boucle de pause
pour pause de 1 à 3
appelle dessinerScene(col, msg1)
fin pour
resultat[col] vaut chiffreResultat
msg2 est un texte
msg2 vaut "J'écris " + convertir_texte(chiffreResultat)
si nouvelleRetenue > 0 alors
msg2 vaut msg2 + " et je retiens " + convertir_texte(nouvelleRetenue)
si col + 1 < nbCol alors
retenues[col + 1] vaut nouvelleRetenue
fin si
fin si
pour pause de 1 à 3
appelle dessinerScene(col, msg2)
fin pour
retenue vaut nouvelleRetenue
fin pour
@ Résultat Final
total est un nombre
total vaut nombre1 + nombre2
pour finrep de 1 à 8
appelle dessinerScene(-1, "Résultat : " + convertir_texte(nombre1) + " + " + convertir_texte(nombre2) + " = " + convertir_texte(total))
fin pour
animation(film, 600, 0) // Animation légèrement ralentie pour bien lire
