TP 1 — Premiers dessins avec Pyxel⚓︎

🎯 Objectifs

À la fin de ce TP, vous saurez :

créer une fenêtre avec le module pyxel ;
repérer un pixel dans cette fenêtre à l'aide de ses coordonnées ;
choisir une couleur dans la palette de Pyxel ;
afficher du texte et dessiner des formes géométriques simples ;
répéter un motif à l'aide d'une boucle for ;
réaliser une petite scène graphique statique.

Prérequis

Variables, expressions arithmétiques, appels de fonctions, boucles for et tests simples en Python.

👏 Crédits

Ce TP est adapté d'une ressource conçue et partagée par Florian Picard. Il s'appuie également sur la documentation officielle de Pyxel et sur le tutoriel de la Nuit du Code.

1. Découvrir Pyxel⚓︎

Pyxel est un moteur de jeu rétro pour Python. Il fournit notamment :

une fenêtre graphique composée de pixels ;
une palette de 16 couleurs ;
des fonctions pour dessiner des formes ou afficher des images ;
des outils pour gérer le clavier, la souris, les animations et les sons.

Dans ce premier TP, nous réaliserons uniquement une image statique dessinée par le programme. L'éditeur de ressources et les programmes interactifs seront étudiés dans les deux TP suivants.

1.1. Premier programme⚓︎

Environnement

Dans Pyxel Studio, il faut d'abord se créer un compte. Créer ensuite un projet Python, saisir le code puis lancer le programme avec le bouton prévu à cet effet.
Dans Capytale, créer une activité Pyxel, l'interface est similaire à celle de Pyxel Studio
Avec Thonny ou Spyder, enregistrer le fichier avec l'extension .py, puis l'exécuter. Le module pyxel doit être installé dans l'environnement Python utilisé.

Exercice 1 — Créer une fenêtre

Recopier puis exécuter le programme suivant.

🐍 Script Python

import pyxel

# Dimensions de la fenêtre, en pixels
LARGEUR = 128
HAUTEUR = 128

pyxel.init(LARGEUR, HAUTEUR, title="Mon premier programme Pyxel")

pyxel.cls(0)
pyxel.text(10, 10, "Bonjour Pyxel !", 7)

pyxel.show()

Question 1

Quelles instructions fixent les dimensions de la fenêtre ?

Question 2

Modifier le programme pour donner à la fenêtre le titre TP 1 - Dessins.

Question 3

Remplacer successivement les arguments 0 et 7 par d'autres entiers compris entre 0 et 15. Quel est leur rôle ?

Question 4

Modifier les deux premiers arguments de pyxel.text et observer le déplacement du texte.

Question 5

Que se passe-t-il si on supprime l'appel à pyxel.show() ?

1.2. Les premières fonctions⚓︎

Créer une fenêtre

Fonction	Rôle
`pyxel.init(width, height, title=...)`	Initialise une fenêtre de dimensions `width` × `height`.
`pyxel.cls(col)`	Efface la fenêtre et la remplit avec la couleur `col`.
`pyxel.text(x, y, texte, col)`	Affiche une chaîne de caractères à partir du point de coordonnées `(x, y)`.
`pyxel.show()`	Affiche l'image et attend que la fenêtre soit fermée.

Paramètre optionnel

Dans pyxel.init, le paramètre title est optionnel. On peut donc écrire pyxel.init(128, 128) ou préciser sa valeur avec pyxel.init(128, 128, title="Mon programme").

2. Se repérer dans la fenêtre⚓︎

Repérage dans la fenêtre

La fenêtre peut être considérée comme une grille de pixels. Chaque pixel est repéré par ses coordonnées (x, y).

l'origine (0, 0) est située dans le coin supérieur gauche ;
l'abscisse x augmente lorsqu'on se déplace vers la droite ;
l'ordonnée y augmente lorsqu'on se déplace vers le bas.

Dans une fenêtre de largeur LARGEUR et de hauteur HAUTEUR, les pixels visibles ont donc pour coordonnées :

\[0 \leqslant x < \text{LARGEUR} \qquad\text{et}\qquad 0 \leqslant y < \text{HAUTEUR}.\]

Position	Coordonnées dans une fenêtre de 128 × 128 pixels
coin supérieur gauche	`(0, 0)`
coin supérieur droit	`(127, 0)`
coin inférieur gauche	`(0, 127)`
coin inférieur droit	`(127, 127)`
centre de la fenêtre	`(64, 64)` environ

La fonction pyxel.pset(x, y, col) colore le pixel de coordonnées (x, y) avec la couleur col.

Palette des couleurs : chaque couleur est codée par un entier entre 0 et 15 :

alt

Exercice 2 — Placer des pixels

Compléter le programme ci-dessous sans modifier les constantes LARGEUR et HAUTEUR.

🐍 Script Python

import pyxel

LARGEUR = 128
HAUTEUR = 128

pyxel.init(LARGEUR, HAUTEUR, title="Se repérer")
pyxel.cls(0)

# 1. Un pixel blanc dans le coin supérieur gauche
pyxel.pset(0, 0, 7)

# 2. Un pixel rouge dans le coin supérieur droit
pyxel.pset(..., ..., 8)

# 3. Un pixel vert dans le coin inférieur gauche
...

# 4. Un pixel jaune dans le coin inférieur droit
...

# 5. Un pixel bleu clair au centre de la fenêtre
...

pyxel.show()

3. Dessiner des formes géométriques⚓︎

Dessiner dans une fenêtre

Pyxel associe à chacune des 16 couleurs de sa palette un entier compris entre 0 et 15. Quelques codes utiles sont indiqués ci-dessous.

Code	Couleur	Code	Couleur
0	noir	8	rouge
1	bleu foncé	9	orange
3	vert foncé	10	jaune
5	gris foncé	11	vert clair
6	bleu clair	12	bleu ciel
7	blanc	14	rose
13	violet clair	15	beige

Voici les principales fonctions de dessin utilisées dans ce TP.

Fonction	Forme dessinée
`pyxel.line(x1, y1, x2, y2, col)`	segment reliant `(x1, y1)` et `(x2, y2)`
`pyxel.rect(x, y, w, h, col)`	rectangle plein dont le coin supérieur gauche est `(x, y)`
`pyxel.rectb(x, y, w, h, col)`	contour d'un rectangle
`pyxel.circ(x, y, r, col)`	disque de centre `(x, y)` et de rayon `r`
`pyxel.circb(x, y, r, col)`	cercle de centre `(x, y)` et de rayon `r`
`pyxel.tri(x1, y1, x2, y2, x3, y3, col)`	triangle plein défini par ses trois sommets

Ordre des instructions

Les formes sont dessinées dans l'ordre d'exécution des instructions. Une forme dessinée en dernier peut donc masquer une partie des formes précédentes.

3.1. Construire un paysage⚓︎

Exercice 3 — Composer un paysage

On souhaite réaliser progressivement une maison dans un paysage. Compléter le programme suivant en traitant les questions dans l'ordre.

🐍 Script Python

import pyxel

# Constantes
LARGEUR = 128
HAUTEUR = 128
HORIZON = 80

pyxel.init(LARGEUR, HAUTEUR, title="Une maison")
pyxel.cls(0)

# 1. Le ciel et le sol
pyxel.rect(0, 0, LARGEUR, HORIZON, 12)
pyxel.rect(0, HORIZON, LARGEUR, HAUTEUR - HORIZON, 3)

# 2. Le soleil
pyxel.circ(..., ..., ..., 10)

# 3. Les murs de la maison
x_maison = 32
y_maison = 48
largeur_maison = 32
hauteur_maison = 32
pyxel.rect(..., ..., ..., ..., 9)

# 4. Le toit
pyxel.tri(..., ..., ..., ..., ..., ..., 8)

# 5. La porte
largeur_porte = 8
hauteur_porte = 16
pyxel.rect(..., ..., ..., ..., 4)

# 6. Les fenêtres et leurs croisillons
# À compléter

pyxel.show()

Question 1

Expliquer pourquoi la hauteur du rectangle représentant le sol est HAUTEUR - HORIZON.

Question 2

Dessiner un soleil jaune de rayon 5, centré au point de coordonnées (100, 20).

Question 3

Compléter l'appel de pyxel.rect qui dessine les murs de la maison.

Question 4

Le toit est un triangle. Déterminer les coordonnées de ses trois sommets pour qu'il repose exactement sur les murs et que son sommet soit centré au-dessus de la maison.

Question 5

Calculer l'abscisse de la porte pour qu'elle soit centrée sur la façade. Son bord inférieur doit coïncider avec celui des murs.

Question 6

Ajouter deux fenêtres carrées de côté 8. Tracer leurs contours avec pyxel.rectb, puis leurs croisillons avec pyxel.line.

Question 7

Ajouter une cheminée. À quel endroit faut-il placer son instruction pour qu'une partie de la cheminée soit masquée par le toit ? Tester votre réponse.

Résultat attendu pour l'exercice 3

alt

4. Répéter un motif avec une boucle⚓︎

Exercice 4 — Répéter un motif avec une boucle

Une boucle permet de dessiner plusieurs motifs semblables sans répéter les mêmes instructions.

Le programme ci-dessous dessine cinq disques régulièrement espacés :

🐍 Script Python

for i in range(5):
    x = 12 + 24 * i
    pyxel.circ(x, 20, 5, 7)

Question 1

Calculer les cinq valeurs successives de x.

Question 2

Modifier le programme de la maison pour ajouter une rangée de fleurs à droite de la maison. Chaque fleur pourra être représentée par une tige de hauteur 4 pixels et un petit disque de rayon 2 pixels. On pourra espacer deux fleurs par 5 pixels.

Boucle for ou while

On peut soit calculer avant la boucle le nombre de fleurs qui pourront être affichés, soit utiliser une boucle while.

Question 3

Faire alterner la couleur des fleurs entre le rose (14) et le jaune (10). On pourra choisir la couleur en fonction de la valeur d'une variable i qu'une itération de boucle fait alterner entre 0 et 1.

Question 4

Ajouter 8 rayons autour du soleil à l'aide d'une boucle et de la fonction pyxel.line.

Trigonométrie

Pour tracer un rayon de soleil de 8 pixels de longueur qui fait un angle de 45 degrés avec l'horiozontale on trace un cercle de rayon 8 et de même centre que le soleil et on utilise la trigonométrie pour calculer les coordonnées de l'extrémité sur le cercle :

🐍 Script Python

pyxel.line(
100, # abscisse du centre du soleil
20,  # ordonnée du centre du soleil
100 + 8 * pyxel.cos(45), # abscisse de l'extrémité
20 + 8 * pyxel.sin(45), # ordonnée de l'autre extrémité
10,  # couleur jaune
)

Ci-dessous la formule générale avec un centre du soleil de coordonnées (x, y), un rayon r et un angle \(\theta\) avec l'horizontale :

alt

Résultat attendu pour l'exercice 4

alt

5. Production finale⚓︎

Exercice 5 — A vous de jouer

En partant du programme précédent, réalisez une scène personnelle comportant au minimum :

un fond composé de deux zones colorées ;
un titre ou une courte légende ;
deux types de formes géométriques différents ;
une forme dont la position ou les dimensions sont calculées à partir de variables ;
un motif répété à l'aide d'une boucle for ;
deux formes qui se superposent dans un ordre choisi volontairement.

Organisez le code en parties clairement identifiées par des commentaires. Utilisez des noms de variables explicites.

Quelques idées

Un paysage nocturne, une ville, un robot, une fusée dans l'espace ou une scène sous-marine.

6. Mémento⚓︎

Mémento du TP1

Syntaxe	Explication / sens
`pyxel.init(largeur, hauteur, title="Titre")`	Crée une fenêtre de dimensions `largeur` × `hauteur` et lui donne un titre.
`pyxel.cls(couleur)`	Efface la fenêtre et la remplit avec la couleur indiquée.
`pyxel.pset(x, y, couleur)`	Colore le pixel de coordonnées `(x, y)`.
`pyxel.text(x, y, texte, couleur)`	Affiche un texte à partir du point de coordonnées `(x, y)`.
`pyxel.line(x1, y1, x2, y2, couleur)`	Trace un segment entre les points `(x1, y1)` et `(x2, y2)`.
`pyxel.rect(x, y, largeur, hauteur, couleur)`	Dessine un rectangle plein dont le sommet supérieur gauche est `(x, y)`.
`pyxel.rectb(x, y, largeur, hauteur, couleur)`	Trace le contour d'un rectangle dont le sommet supérieur gauche est `(x, y)`.
`pyxel.circ(x, y, rayon, couleur)`	Dessine un disque de centre `(x, y)` et de rayon donné.
`pyxel.circb(x, y, rayon, couleur)`	Trace un cercle de centre `(x, y)` et de rayon donné.
`pyxel.tri(x1, y1, x2, y2, x3, y3, couleur)`	Dessine un triangle plein dont les sommets sont les trois points indiqués.
`pyxel.show()`	Affiche l'image statique et attend la fermeture de la fenêtre.