Projet Vacances - Mission 4 — Pixel art & motifs
- il y a 23 heures
- 5 min de lecture
Prenez une photo sur votre téléphone et zoomez. Zoomez encore. À un moment, l'image se désagrège en petits carrés de couleur. Ces carrés sont tout ce qu'il y a : derrière chaque photo, chaque dessin animé, chaque écran, il n'y a qu'une grille de couleurs et une liste de nombres.
Cette semaine, on remonte le mécanisme dans l'autre sens. On part des nombres, et on voit apparaître le dessin.
C'est la quatrième mission de l'été, et l'avant-dernière : la rentrée approche, mais il reste deux vendredis.
🐣 Petits Explorateurs · 5-6 ans
La grille dictée
Ce qu'il vous faut : une feuille à petits carreaux, un crayon de couleur. Aucun écran.
Sur la feuille, entourez une zone de 6 carreaux de large et 5 carreaux de haut. Numérotez les lignes de 1 à 5 sur le côté, et les cases de 1 à 6 en haut.
Annoncez à votre enfant qu'un dessin est caché dans une liste de nombres, et que lui seul peut le faire apparaître.
Dictez, ligne par ligne. Il colorie les cases nommées, en rouge :
Ligne 1 : cases 2 et 5 Ligne 2 : cases 1, 2, 3, 4, 5 et 6 Ligne 3 : cases 1, 2, 3, 4, 5 et 6 Ligne 4 : cases 2, 3, 4 et 5 Ligne 5 : cases 3 et 4
Laissez-le découvrir le résultat tout seul. En général, il devine vers la ligne 4 — et l'annonce à voix haute.
Puis inversez. Il dessine ce qu'il veut sur une nouvelle grille, sans vous la montrer, et vous la dicte case par case. À vous de colorier. Comparez les deux grilles à la fin.
Le conseil qui change tout : pendant qu'il vous dicte, ne devinez pas. Coloriez exactement ce qu'il dit. S'il oublie une case, le dessin sera faux — et il verra pourquoi en comparant. Un enfant de cinq ans comprend très vite qu'il faut être complet quand on parle à une machine.
Ce que ça travaille : le repérage dans un tableau à double entrée, le comptage, et l'idée qu'un dessin peut voyager sous forme de mots.
🚀 Parcours Juniors · 7-10 ans
Deux façons d'écrire un dessin
Ce qu'il vous faut : une feuille à petits carreaux, des crayons de couleur. Un écran seulement pour le bonus.
Partie 1 — Le dessin compressé
Dicter case par case, c'est long. Les informaticiens ont trouvé plus court : au lieu de nommer chaque case, on annonce combien de cases de suite ont la même couleur.
Décodez ce dessin sur une grille de 8 cases de large et 8 lignes de haut. B = blanc, J = jaune, N = noir. « 2B 4J 2B » signifie : deux cases blanches, puis quatre jaunes, puis deux blanches.
Ligne 1 : 2B 4J 2B Ligne 2 : 1B 6J 1B Ligne 3 : 2J 1N 2J 1N 2J Ligne 4 : 8J Ligne 5 : 8J Ligne 6 : 1J 1N 4J 1N 1J Ligne 7 : 1B 1J 4N 1J 1B Ligne 8 : 2B 4J 2B
Comptez : le dessin fait 64 cases, et il tient en 8 lignes de notation. C'est ce qu'on appelle compresser un fichier, et le principe utilisé ici — le codage par plages — est réellement employé dans les images numériques.
À votre tour : dessinez un motif de votre invention sur une grille de 8 sur 8, puis écrivez son code compressé. Donnez le code à quelqu'un d'autre, gardez le dessin. Si sa grille ressemble à la vôtre, votre code est correct.
Partie 2 — Le motif qui se répète
Sur une bande de 24 carreaux, coloriez selon cette règle : répéter 6 fois → 2 rouges, 2 blancs.
Vous avez écrit une ligne, et obtenu 24 cases. C'est une boucle. Toute la puissance du code tient dans cet écart : une règle courte qui produit un résultat long.
Bonus sur Scratch (le plus joli de toute la série). Ajoutez l'extension Stylo, puis assemblez :
quand le drapeau vert est cliqué
effacer tout, puis stylo en position d'écriture
répéter 36 fois → à l'intérieur : répéter 4 fois → avancer de 60 puis tourner de 90 degrés. Et juste après la boucle de 4, encore dans la boucle de 36 : tourner de 10 degrés.
Lancez. Trente-six carrés légèrement pivotés dessinent une rosace que personne n'a dessinée. Changez le 36, le 10, le 90 : chaque nombre transforme la figure entière.
Ce que ça travaille : les boucles, les boucles imbriquées, la notion de compression, et le plaisir un peu vertigineux de voir dix blocs produire une figure complexe.
🛠️ Bâtisseurs du Numérique · 10-15 ans
Une image sans dessiner
Ce qu'il vous faut : un navigateur, sur editor.p5js.org. Fonctionne sur tablette.
Ici, on ne dessine rien. On écrit une règle, et l'image en découle.
let taille = 25;
function setup() {
createCanvas(400, 400);
noStroke();
noLoop();
}
function draw() {
background(248, 244, 238);
for (let ligne = 0; ligne < 16; ligne++) {
for (let colonne = 0; colonne < 16; colonne++) {
if ((ligne + colonne) % 2 === 0) {
fill(13, 27, 42); // navy
} else {
fill(201, 168, 76); // doré
}
rect(colonne * taille, ligne * taille, taille, taille);
}
}
}
Deux boucles imbriquées parcourent 256 cases, et une seule condition décide de la couleur de chacune. Résultat : un damier, sans qu'aucune case ait été placée à la main.
Le vrai sujet : changez la condition
Tout l'intérêt est là. Remplacez la ligne du if et relancez, une modification à la fois :
Condition | Ce qui apparaît |
(ligne + colonne) % 2 === 0 | le damier de départ |
(ligne + colonne) % 4 === 0 | des diagonales espacées |
(ligne * colonne) % 3 === 0 | une trame irrégulière, presque organique |
ligne % 4 === 0 || colonne % 4 === 0 | un quadrillage |
(ligne ^ colonne) % 4 === 0 | à essayer absolument |
La dernière utilise le XOR bit à bit. Elle produit un motif qui se répète à l'intérieur de lui-même, à plusieurs échelles — une figure fractale que personne n'a dessinée et qui sort tout entière d'un seul caractère. Passez la grille à 64 cases (taille = 6, boucles jusqu'à 64) pour la voir vraiment.
Trois défis
Une troisième couleur. Ajoutez un else if avec une seconde condition pour introduire le crème (248, 244, 238). Trouvez une combinaison qui produise un motif que vous trouvez beau — ce critère n'a rien d'anecdotique, c'est exactement le travail d'un artiste génératif.
Rendre le motif vivant. Supprimez noLoop(), puis faites intervenir frameCount dans la condition : par exemple (ligne + colonne + floor(frameCount / 10)) % 4 === 0. Le motif se met à défiler.
Reprendre la main. Faites dépendre taille de mouseX et la couleur de mouseY. Vous venez de fabriquer un instrument : une seule règle, et un espace entier de motifs à explorer au doigt.
Ce que ça travaille : les boucles imbriquées, le modulo, les opérateurs bit à bit, et le principe même de l'art génératif — décrire un système plutôt qu'un résultat.
Pour les parents, en deux lignes
Aucun écran ne contient d'images : il contient des grilles de nombres, et il les allume. Quand une photo de 12 mégapixels tient dans un fichier léger, c'est grâce à une version très sophistiquée du codage par plages que votre enfant vient de faire à la main sur du papier quadrillé. Le principe est identique.
Solutions
À ne lire qu'après avoir essayé.
Petits Explorateurs : un cœur.
Parcours Juniors : un visage souriant.
Montrez-nous le résultat
Vos grilles coloriées, vos rosaces Scratch, vos motifs en code : envoyez-les dans le groupe WhatsApp Grandir avec le Numérique, ou à amroy@codeacademy123.com. Les motifs des Bâtisseurs sont souvent superbes, et nous les partagerons volontiers avec votre accord.
Prochaine mission vendredi prochain, la dernière de l'été : la chasse au trésor construite avec l'IA. On demandera à une intelligence artificielle d'inventer des énigmes pour son propre quartier — et on découvrira qu'obtenir ce qu'on veut d'une IA demande plus de précision qu'on ne le croit.
Anne-Marie Roy — Fondatrice · Code Academy 123
Code Academy 123 • www.codeacademy123.com
Commentaires