CoddyRun
La logique numérique est souvent perçue comme abstraite. Pourtant, lorsqu’on la rend visuelle, animée et intuitive, elle devient un formidable outil de compréhension.
Voici une représentation dynamique d’un circuit combinatoire basé sur l’expression :
S = (A ET B) OU (NON C)
L’objectif : montrer comment les signaux se propagent dans un circuit, étape par étape, jusqu’à la sortie finale.
Une mise en scène graphique pensée pour la pédagogie
La construction repose sur une palette harmonisée et un style technique :
- dégradé de fond pour la profondeur visuelle
- grille discrète pour rappeler les schémas électroniques
- pastilles colorées pour les bits (1 / 0)
- fils dont la couleur change selon la propagation du signal
- portes logiques stylisées (ET, OU, NON)
Chaque élément visuel contribue à rendre la logique lisible et attractive.
Des composants dessinés avec précision
Chaque porte logique possède sa propre procédure de dessin :
- ET : rectangle arrondi
- OU : forme plus organique
- NON : triangle + bulle de négation
Les pastilles affichent la valeur des entrées et de la sortie, tandis que les fils s’illuminent progressivement selon les phases de propagation.
Une animation en plusieurs phases
Pour les 8 combinaisons possibles de A, B et C :
- Extraction des bits
- Calcul des signaux intermédiaires (g1, g2)
- Propagation animée en 4 étapes
- Stabilisation du résultat final avec pause visuelle
Cette progression permet d’observer le circuit comme s’il "réfléchissait", en montrant clairement comment chaque entrée influence la sortie.
Un film complet du fonctionnement du circuit
Chaque image générée est ajoutée à une séquence, formant une animation fluide.
Ce type de visualisation est idéal pour :
- l’enseignement de la logique numérique
- des démonstrations techniques
- des présentations en entreprise ou en formation
- des supports pédagogiques interactifs
Une autre manière d’apprendre
En rendant la logique numérique vivante, on facilite :
- la compréhension des mécanismes internes
- la mémorisation des concepts
- l’envie d’explorer plus loin
Une approche qui montre que même les circuits les plus simples peuvent devenir clairs, esthétiques et engageants lorsqu’ils sont présentés autrement.
Programme :
@ Configuration initiale et palette
film est un tableau
largeurToile est un nombre
largeurToile vaut 560
hauteurToile est un nombre
hauteurToile vaut 360
fond1 est un texte
fond1 vaut #0d1b2a
fond2 est un texte
fond2 vaut #1b263b
cFilOff est un texte
cFilOff vaut #37485e
cFilOn est un texte
cFilOn vaut #ffd60a
cPorte est un texte
cPorte vaut #4cc9f0
cTexte est un texte
cTexte vaut #e0e1dd
cUn est un texte
cUn vaut #06d6a0
cZero est un texte
cZero vaut #ef476f
@ Coordonnées des éléments
// Entrées A, B, C
ax est un nombre
ax vaut 60
ay est un nombre
ay vaut 80
bx est un nombre
bx vaut 60
by est un nombre
by vaut 140
cx est un nombre
cx vaut 60
cy est un nombre
cy vaut 250
// Portes
etX est un nombre
etX vaut 230
etY est un nombre
etY vaut 110
nonX est un nombre
nonX vaut 230
nonY est un nombre
nonY vaut 250
ouX est un nombre
ouX vaut 400
ouY est un nombre
ouY vaut 180
// Sortie
sx est un nombre
sx vaut 510
sy est un nombre
sy vaut 180
@ Procédures de dessin utilitaires
fonction couleurFil(valeur)
si valeur = 1 alors
retourne cFilOn
sinon
retourne cFilOff
fin si
fin fonction
procédure pastille(img, px, py, valeur)
teinteP est un texte
si valeur = 1 alors
teinteP vaut cUn
sinon
teinteP vaut cZero
fin si
cercle(img, px, py, 13, teinteP)
label(img, px - 4, py + 5, convertir_texte(valeur), #0d1b2a, 14)
fin procédure
@ Procédures de dessin des portes logiques
procédure dessinePorteET(img, px, py)
rectangle_arrondi(img, px - 35, py - 30, 60, 60, 8, cPorte)
label(img, px - 14, py + 6, "ET", #0d1b2a, 16)
fin procédure
procédure dessinePorteOU(img, px, py)
rectangle_arrondi(img, px - 35, py - 30, 60, 60, 20, cPorte)
label(img, px - 15, py + 6, "OU", #0d1b2a, 16)
fin procédure
procédure dessinePorteNON(img, px, py)
// Utilisation d'un polygone plein pour le triangle
polygone(img, px - 25, py - 25, px - 25, py + 25, px + 25, py, cPorte)
cercle(img, px + 32, py, 6, cPorte)
label(img, px - 18, py + 4, "NON", #0d1b2a, 10)
fin procédure
@ Boucle principale d'animation
combo est un nombre
pour combo de 0 à 7
// Extraction des bits
entreeA est un nombre
entreeA vaut arrondi_inferieur(combo / 4) mod 2
entreeB est un nombre
entreeB vaut arrondi_inferieur(combo / 2) mod 2
entreeC est un nombre
entreeC vaut combo mod 2
// Calcul de la logique
g1 est un nombre
si entreeA = 1 et entreeB = 1 alors
g1 vaut 1
sinon
g1 vaut 0
fin si
g2 est un nombre
si entreeC = 1 alors
g2 vaut 0
sinon
g2 vaut 1
fin si
S est un nombre
si g1 = 1 ou g2 = 1 alors
S vaut 1
sinon
S vaut 0
fin si
// Animation de propagation
phase est un nombre
pour phase de 0 à 4
img est une toile
dimension(img, largeurToile, hauteurToile)
dégradé(img, [fond1, fond2])
// Grille de fond pour le style technique
grille(img, 20, #1c2e4a)
label(img, 130, 30, "Circuit : S = (A ET B) OU (NON C)", cTexte, 18)
// ---- DESSIN DES FILS ----
valFilA est un nombre
valFilA vaut 0
si phase >= 1 alors
valFilA vaut entreeA
fin si
ligne(img, ax + 15, ay, etX - 40, ay, couleurFil(valFilA), 4)
ligne(img, etX - 40, ay, etX - 40, etY - 15, couleurFil(valFilA), 4)
valFilB est un nombre
valFilB vaut 0
si phase >= 1 alors
valFilB vaut entreeB
fin si
ligne(img, bx + 15, by, etX - 40, by, couleurFil(valFilB), 4)
ligne(img, etX - 40, by, etX - 40, etY + 15, couleurFil(valFilB), 4)
valFilC est un nombre
valFilC vaut 0
si phase >= 1 alors
valFilC vaut entreeC
fin si
ligne(img, cx + 15, cy, nonX - 30, cy, couleurFil(valFilC), 4)
valG1 est un nombre
valG1 vaut 0
si phase >= 2 alors
valG1 vaut g1
fin si
ligne(img, etX + 45, etY, ouX - 40, etY, couleurFil(valG1), 4)
ligne(img, ouX - 40, etY, ouX - 40, ouY - 15, couleurFil(valG1), 4)
valG2 est un nombre
valG2 vaut 0
si phase >= 2 alors
valG2 vaut g2
fin si
ligne(img, nonX + 45, nonY, ouX - 40, nonY, couleurFil(valG2), 4)
ligne(img, ouX - 40, nonY, ouX - 40, ouY + 15, couleurFil(valG2), 4)
valS est un nombre
valS vaut 0
si phase >= 3 alors
valS vaut S
fin si
ligne(img, ouX + 45, ouY, sx - 15, ouY, couleurFil(valS), 4)
// ---- DESSIN DES PORTES ----
appelle dessinePorteET(img, etX, etY)
appelle dessinePorteNON(img, nonX, nonY)
appelle dessinePorteOU(img, ouX, ouY)
// ---- DESSIN DES PASTILLES ----
label(img, ax - 30, ay + 5, "A", cTexte, 16)
appelle pastille(img, ax, ay, entreeA)
label(img, bx - 30, by + 5, "B", cTexte, 16)
appelle pastille(img, bx, by, entreeB)
label(img, cx - 30, cy + 5, "C", cTexte, 16)
appelle pastille(img, cx, cy, entreeC)
label(img, sx + 20, sy + 5, "S", cTexte, 18)
si phase >= 3 alors
appelle pastille(img, sx, sy, S)
sinon
cercle(img, sx, sy, 13, #37485e)
fin si
// Panneau explicatif
texteExpl est un texte
texteExpl vaut "A=" + convertir_texte(entreeA) + " B=" + convertir_texte(entreeB) + " C=" + convertir_texte(entreeC) + " => S=" + convertir_texte(S)
label(img, 130, 335, texteExpl, cTexte, 16)
film ajoute img
fin pour
// Pause sur le résultat complet
pauseC est un nombre
pour pauseC de 0 à 5
film ajoute film[longueur(film) - 1]
fin pour
fin pour
@ Lancement de l'animation
animation(film, 200, 0)
