Monochromes ou l’importance d’une « bonne » représentation¶

Cette activité amène progressivement l’élève à simuler un « variateur de lampe LED », construit de manière incrémentale. L’objectif est de créer une prise de conscience qu’une « bonne » représentation est à la base de la résolution d’une tâche.

Monochromes ou l’importance d’une « bonne » représentation

Thème : Algorithmique et programmation (lors du dernier chapitre d’Algorithmique I)
Niveau : moyen
Durée : 2 période ou 90 minutes
Objectifs pédagogiques : Résoudre un problème donné de manière incrémentale, tout en versionnant son code. Choisir la bonne représentation de l’information pour résoudre un problème.
Modalité : branché
Matériel : fichier de départ monochromes_1_0.py (téléchargeable en haut de cette page)
Prérequis : bases de la programmation

Déroulement¶

Étape	Durée	Phase de l’activité
0. Analyse de code	10 min	Apprentissage
1. Parcours de couleurs	15 min	Exploration
2. Double parcours	10 min	Exploration
3. Optimisation. Un parcours unique	10 min	Exploration
4. Alternative. Un parcours unique	15 min	Exploration et institutionnalisation
5. Variateur de lampe LED	15 min	Enseignement et institutionnalisation
6. Système HSV	15 min	Institutionnalisation

0. Analyse de code¶

Durée : 10 min

Télécharger le fichier de base monochromes_1_0.py qui permet d’afficher une fenêtre « écran noir » en utilisant le module pygame. Prendre le temps d’analyser le code du fichier.

Conseil : le raccourci ctrl+c permet de quitter le programme plus rapidement qu’en fermant la fenêtre.

1. Parcours de couleurs¶

Durée : 15 min

Dupliquer le fichier. Changer le 0 dans le nom du fichier en 1. Modifier le code pour rajouter un écran blanc après l’écran noir.

« A votre avis pourquoi l’écran blanc s’affiche à nouveau ?*

2. Double parcours¶

Durée : 10 min

Dupliquer le fichier. Changer le 1 dans le nom du fichier en 2. Rajouter un parcours de couleurs dans l’autre sens, afin d’éviter la transition brusque entre la couleur blanche à noire.

3. Optimisation. Un parcours unique¶

Durée : 10 min

[Optionnel] Dupliquer le fichier. Changer le 2 dans le nom du fichier en 3. Plutôt que d’avoir deux parcours de couleurs (noir à blanc, suivi de blanc à noir), essayer d’avoir un parcours unique qui se base sur la valeur d’une variable qui paramètre le sens du parcours dans la fonction range(). Changer de sens après un parcours.

4. Alternative. Un parcours unique¶

Durée : 15 min

[Optionnel] Dupliquer le fichier. Changer le 3 dans le nom du fichier en 4. Plutôt que d’avoir deux parcours de couleurs (noir à blanc, suivi de blanc à noir), essayer d’avoir un parcours unique qui se base sur la valeur d’une variable qui change le sens du parcours en changeant background_color. Changer de sens après un parcours.

5. Variateur de lampe LED¶

Durée : 15 min

Faire parcourir les couleurs dans l’ordre de l’image ci-dessous, ce qui correspond aux teintes saturées du cercle chromatique.

Avez-vous pensé à dupliquer le fichier et changer le numéro 4 en 5 dans le nom ?

6. Système HSV¶

Durée : 15 min

[Difficile, pour les avancés] Afficher les valeurs RGB de chaque teinte HSV afin de comprendre la relation qui existe entre ces deux systèmes de représentation numérique des couleurs (utiliser matplotlib.pyplot).

Considérations didactiques¶

Modalité de travail¶

Si le niveau de la classe est faible, répartir les élèves en équipes de développement qui travaillent ensemble.

Institutionnalisation n° 1¶

[A faire après l’étape 4] La première, ainsi que la deuxième, idée d’implémentation n’est pas la plus compacte. Un même algorithme (objectif) peut être implémenté de plusieurs manières différents, et cela vaut la peine de réfléchir à l’implémentation en amont.

Pour gagner du temps, il est possible de présenter les 3 manières de résoudre le même problème et de demander aux élèves comment ils ont procéder, et quelle est la meilleure solution d’après eux.

La première idée qu’on a est souvent la plus simple, mais c’est rarement la meilleure idée.

Institutionnalisation n° 2¶

[A faire après l’étape 5] Cet exercice est beaucoup plus facile à résoudre lorsqu’on passe en représentation HSV au lieu de RVB, une seule boucle au lieu de 3 boucles imbriquées. La représentation de couleur que l’on choisit a un impact fort sur la résolution de l’exercice. Il faut probablement donner cette solution aux élèves, une fois qu’ils ont suffisamment essayé de résoudre l’exercice en utilisant le système RGB, car elle est difficile à trouver.

color_hsva = pygame.Color(0)

# parcourir les 360 teintes (les limites "se rejoignent")
for color_value in range(0,360) :

    # passer en représentation HSL pour parcourir les teintes
    color_hsva.hsva = (color_value,100,100,100)

Avant de coder, il faut vous poser la question de comment représenter l’information dont vous avez besoin pour résoudre le problème.

Institutionnalisation n° 3¶

[A faire après l’étape 6] La relation entre HSV et RGB est visible dans la figure ci-dessous.

Dans le système HSV on fait varier les couleurs RGB une à la fois, dans un ordre bien précis. H représente la teinte, S la saturation et V la luminosité.

Institutionnalisation n° 4¶

[A faire à la fin] Il est trop difficile de résoudre un problème du premier coup. Il faut procéder de manière progressive, par petits paliers. Si l’on souhaite créer un variateur de couleurs, il faut définir des objectifs intermédiaires plus facilement atteignables, ici le parcours de luminosité ou un variateur noir et blanc.

Pour résoudre un problème il faut le « découper », et le résoudre un bout à la fois. Il vaut mieux viser de multiples objectifs atteignables, qu’un seul objectif géant.

Institutionnalisation n° 5¶

[A faire à la fin] Le versionnage consiste à garder toutes les versions d’un même code. Le versionnage permet de se souvenir de la progression dans la résolution d’un problème et de ne pas “tout casser” lorsqu’on modifie le programme (on peut toujours revenir à une version qui marche).

Dans le cas d’un problème difficile à résoudre, le versionnage est essentiel. Il existe des outils de versionnage très aboutis, par exemple « GitHub ».

Liens avec les autres thématiques¶

Les images dans Représentation de l’information.

Ressources complémentaires¶

https://download.tuxfamily.org/linuxgraphic/archives/grokking/node51.html