Sciences Numériques et Technologie – Page : 1
Formation d’une image en couleur sur
un écran numérique
A la loupe…
1. Observer votre écran de téléphone au microscope.
2. Qu’observez-vous ?
Prendre connaissance de la fiche de cours : Le pixel
3. Grâce au site http://www.ostralo.net/3_animations/swf/couleurs_ecran.swf, observez comment le réglage de l’intensité des 3 sous-pixels rouge, vert et bleu peut générer une multitude de couleurs.
La perception «uniforme» pour l’œil, qui ne distingue pas (sauf à la loupe) le détail des sous-pixels mais simplement une couleur globale, est due au pouvoir de résolution limité de l’œil humain.
4. Combien de couleurs différentes peuvent-elles être générées, sachant que chaque sous-pixel (rouge, vert ou bleu) possède 256 nuances possibles ?
Répartition des pixels sur l’écran, notion de définition et de résolution
Lors de l’observation d’écrans effectuée dans la partie précédente, vous avez peut-être constaté des différences dans l’agencement ou la forme des pixels (et sous-pixels), suivant le modèle de smartphone observé.
Prendre connaissance de la fiche de cours : La résolution
5. Combien de Pixels possède un écran 4K de 3 840×2160 pixels
6. Quelle sera sa résolution (pixels par pouce ppp) pour un écran de diagonale 28pouces et format 16/9eme.
https://www.pxcalc.com/
Sciences Numériques et Technologie – Page : 2
Spyder
Nous allons travailler avec Spyder sous windows, un IDE adapté pour le traitement de l’image
Spyder fait partie de la suite Annaconda qui possède de nombreux outils de développement autour de Python
Couleur d’un pixel
Après avoir observé que les écrans recréent les couleurs à partir de trois sous-pixels rouge, vert et bleu, nous allons créer en Python une image que nous définirons pixel par pixel.
Dans un éditeur de code Python tapez et exécutez le code ci-dessous.
from PIL import Image
img = Image.new("RGB",(8,8)) for x in range (8):
for y in range (8):
img.putpixel((x,y),(255,255,255))
img.save(« carreblanc.jpg »)
7. Détaillez chaque ligne de code dans le tableau suivant :
Sciences Numériques et Technologie – Page : 3 from PIL import Image
img = Image.new("RGB",(8,8)) for x in range (8):
for y in range (8):
img.putpixel((x,y),(255,255,255)) img.save(‘Images\carreblanc.jpg’)
Dessinez un motif dans le quadrillage ci-dessous, en coloriant (en noir ou en couleur) quelques-unes des 64 cases.
Récréez votre motif en modifiant le code Python précédent.
from PIL import Image
img = Image.new("RGB",(8,8)) for x in range (8):
for y in range (8):
img.putpixel((x,y),(255,255,255))
img.putpixel((6,1),(0,255,0)) #colore un pixel en une couleur
img.save("Images\exemplequadrillage.jpg")
Exemple : le pixel de coordonnées (6,1) se colorie en vert avec l’ajout de la ligne 8.
Pour retrouver le code RGB de n’importe quelle couleur, vous pouvez par exemple utiliser le site https://htmlcolorcodes.com/fr/
Notre méthode de création d’image possède pour l’instant deux inconvénients majeurs : l’image est bien trop petite, et placer des pixels un par un est très fastidieux. Nous allons y remédier.
8. En analysant votre code actuel, effectuez des modifications pour que l’image créée soit de taille 300 x 200.
9. Rajoutez (toujours avant la dernière ligne de sauvegarde de l’image) le code suivant : for x in range(50,150) :
img.putpixel((x,20),(156,61,207))
10. Exécutez le code complet et analysez les changements apparus dans l’image.
11. Tracez plusieurs lignes de couleurs différentes dans votre image
Sciences Numériques et Technologie – Page : 4
12. Copiez maintenant le code suivant : from PIL import Image
img = Image.new("RGB",(300,300)) for x in range (300):
for y in range (300):
img.putpixel((x,y),(129,167,211)) for x in range (100,200):
for y in range (100,200):
img.putpixel((x,y),(255,255,255))
img.save("exempleCarre.jpg")
13. Quelle est la dimension de l’image ?
14. Que permet de faire les lignes 8 à 10 de votre programme ?
1. Exercice
Activité : A l’aide du code vu dans la partie précédente, concevez les drapeaux ci-dessous : Astuce : vous pouvez rajouter autant de boucle « for » que vous le voulez !
Sciences Numériques et Technologie – Page : 5
Modification d’une image
Nous allons maintenant insérer une image dans un programme et agir sur ses pixels.
Dans le dossier d'échange de votre classe, vous trouverez une image « ciel.jpg ». Copiez ce fichier dans votre dossier de travail (celui où vous enregistrerez vos programmes Python).
Dans le code, on ouvre ensuite une image à partir d’un fichier. Ici, le fichier est « ciel.jpg ». L’image est lue par la méthode open() du module Image, et est stockée dans la variable img. C'est cette variable que nous utiliserons dans la suite du programme.
On récupère ensuite la largeur et la hauteur de cette image, et on affiche ces valeurs (en nombre de pixels).
Pour afficher l'image, insérer à la fin du programme l'instruction : img.show() from PIL import Image
#on ouvre le fichier image
img = Image.open("Images\ciel.jpg") colonne, ligne = img.size
print(colonne) print(ligne)
On a vu dans la partie précédente que la fonction img.putpixel((.,.),(…,…,…)permet de changer la valeur d’un pixel dans une image.
Par exemple nous venons de créer un rectangle blanc dans l’image ciel.jpg : from PIL import Image
img = Image.open("Images\ciel.jpg") for x in range (200,500):
for y in range (100,200):
img.putpixel((x,y),(255,255,255)) img.save("carreCiel.jpg")
2. Exercice
Exercice 1 : Dans dossier Images et voiture.jpg, recouvrez la plaque d’immatriculation de la voiture par un rectangle jaune
Exercice 2 : Dans le dossier Images et Charlie.jpg, encadrez Charlie par un rectangle rouge.
Sciences Numériques et Technologie – Page : 6
Exercices complémentaires
Concevez les images ci-contre
Point info :
Pieter Cornelis Mondriaan, appelé Piet Mondrian à partir de 1912, né le 7 mars 1872 à Amersfoort aux Pays- Bas, et mort le 1er février 1944 à New York, est un peintre néerlandais reconnu comme l'un des pionniers de l’abstraction.
