[[{"text":"
","title":"Traitements des images numériques (suite)","posi":0}],[{"text":"
Dans cette partie, nous allons apprendre à transformer une image couleur en sepia (nuances de gris).
Comment peut-on faire du gris avec du Rouge Vert Bleu?
Tester le code ci-dessous.
Indiquer le nom de la couleur afficher dans le tableau ci-dessous.
Faire de même avec les autres valeurs RVB du pixel (1,1) et compléter le tableau en conséquence.
","title":"Les nuances de gris"},{"code":"
image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
pixel = image.getPixel(1, 1)
pixel.setRed(50)
print(image)
"},{"edit":"
rouge | vert | bleu | couleur |
---|
50 | 50 | 50 | gris foncé |
120 | 120 | 120 |
|
200 | 200 | 200 |
|
| | | |
0 | 0 | 0 |
|
255 | 255 | 255 |
|
"}],[{"text":"Nous venons de voir que pour créer du gris, il faut que les RVB soient égaux.
Pour transformer une image couleur en sepia (nuances de gris), il faut réaliser l'algorithme suivant pour chaque pixel :
Etape 1 : prendre la valeur du rouge, du vert et du bleu.
Etape 2 : calculer la moyenne de ces 3 valeurs.
Etape 3 : mettre les RVB égaux à cette moyenne (gris).
Compléter le code ci-dessous pour réaliser une image sepia.
","title":"Image sepia"},{"code":"
image = new SimpleImage(\"./assets/flowers.jpg\")
print(\"image d'origine\")
print(image)
for pixel in image :
#Ecrire le code ici
#Etape 1
red = pixel.getRed()
#Etape 2
moy = red
#Etape 3
pixel.setRed(moy)
print(\"image traitée sepia\")
print(image)
print(image)
"},{"solution":" #Etape 1\n red = pixel.getRed()\n green = pixel.getGreen()\n blue = pixel.getBlue()"},{"solution":" #Etape 2\n moy = (red + green + blue) / 3"},{"solution":" #Etape 3\n pixel.setRed(moy)\n pixel.setGreen(moy)\n pixel.setBlue(moy)"}],[{"text":"Une image noir et blanc est composé de 2 couleurs:
- le noir rgb(0,0,0);
- le blanc rgb(255,255,255);
Donc pour réaliser cette image, il faut juste insérer à l'étape 2 une condition avec un seuil sur la moyenne (la moitier de 255) :
if moy<128:
moy = 0
else :
moy = 255
De cette manière, nous avons 2 nuances de gris ( blanc et noir).
Ecrire le code correspondant en vous servant du code précédent.
","title":"Image noir et blanc"},{"code":""},{"solution":" #Etape 2\n moy = (red + green + blue) / 3\n if moy<128: \n moy = 0\n else :\n moy = 255"}],[{"text":"
Rappel sur les coordonnées des pixels dans une image.
Nous allons utiliser l'image du panneau stop
500 pixels de large, 375 pixels de haut
Chaque pixel est identifié par une coordonnée x, y
x = 0 y = 0 est le pixel au coin supérieur gauche, (0, 0)
Pour x les valeurs augmentent en allant à droite
Pour y les valeurs augmentent en descendant
Dans nos nouvelles expériences sur le traitement des images numériques nous aurons besoin de nouvelles fonctions :
- pixel.getX() retourne la valeur X de l'abscisse du pixel;
- pixel.getY() retourne la valeur Y de l'ordonnée du pixel;
- image.getWidth() retourne la largeur de l'image;
- image.getHeight retourne la hauteur de l'image;
Tester et expliquer le programme ci-dessous.
","title":"4 nouvelles fonctions"},{"code":"
image = new SimpleImage(\"./assets/stop.jpg\")
pixel = image.getPixel(3, 5)
print(\"posi pixel : \")
print(\"X=\",pixel.getX() )
print(\"Y=\",pixel.getY() )
print(\"definition de l'image\")
print(\"largeur=\", image.getWidth() )
print(\"hauteur=\", image.getHeight() )
print(image)
"},{"edit":"
Expliquez ici.
"}],[{"text":"
L'instruction if permet de tester si une condition est vraie ou fausse ( true / false ) qui contrôlera si le code est exécuté ou non.
Vous avez, ci-dessous, un exemple d'instruction if dans une boucle for avec l'image \"stop.jpg\".
Tester et expliquer le code.
","title":"Utilisation de if"},{"code":"
image = new SimpleImage(\"./assets/stop.jpg\")
for pixel in image :
if pixel.getX() < 238 :
pixel.setRed(0)
print(image)
"},{"edit":"
238 regions\" style=\"vertical-align: middle; margin: 10px 10px 10px 25px; color: rgb(51, 51, 51); font-family: Roboto, Verdana, sans-serif; background-color: rgb(255, 255, 255);\">
Expliquez ici.
"}],[{"text":"En vous aidant, écrire le code pour créer sur le haut de l'image une bande horizontale bleue de 20 pixels de haut.
","title":"Exercice"},{"code":"
image = new SimpleImage(\"./assets/stop.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(1, 0)\npixel.setRed(255)\npixel.setGreen(255)"}],[{"text":"En vous aidant de l'exercice précédent, écrire le code pour créer sur la droite de l'image une bande verticale noire de 20 pixels de large.","title":"Exercice"},{"code":"
image = new SimpleImage(\"./assets/stop.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"},{"solution":""}],[{"text":"Maintenant, nous souhaitons changer la couleur rouge du panneau stop en bleue.
Pour cela, il faut transformer les pixels dont le rouge est supèrieur à 160 en bleu.
Compléter le code ci-dessous pour répondre à la question.
Quel est l'inconvénient de cette méthode.
","title":"Changer les couleurs d'une image"},{"code":"
image = new SimpleImage(\"./assets/stop.jpg\")
for pixel in image :
if pixel.getRed() > 160 :
pixel.setRed(0)
#Ecrire le code ici
print(image)
"},{"edit":"
Répondre ici.
"}],[{"text":"Pour modifier uniquement le rouge du stop, il faut sélectionner les pixel qui ont le canal rouge dominant.
Il faudra donc utiliser l'algorithme suivant :
Etape 1 ; calculer la moyenne du Rouge Vert Bleu.
Etape 2 ; mettre un seuil de détection à 1.2 fois la moyenne.
Etape 3 ; mettre tous les pixel dont le rouge est supérieur à moyenne * 1.5 en bleu.
Ecrire le code correspondant.
","title":"Amélioration du programme"},{"code":"
image = new SimpleImage(\"./assets/stop.jpg\")
for pixel in image :
#Ecrire le code ici
moy = ( pixel.getRed() + pixel.getGreen() + pixel.getBlue() ) / 3
seuil = moy*1.2
if pixel.getRed() > seuil :
pixel.setRed(0)
print(image)
"}],[{"text":"Faire de même que l'application précédente. Mais cette fois, il faut mettre le panneau stop en vert.
En vous aidant de l'application précédente, écrire le code correspondant.
","title":"Exercice"},{"code":""}],[{"text":"
Nous souhaitons modifier le rouge du trottoirs de l'image.
Ajuster le seuil de la condition (if) pour obtenir le résultat souhaité.
Puis changez la bordure en gris moyen avec le rouge, vert et bleu à 120.
En vous aidant de l'application précédente, écrire le code correspondant.
","title":"Exercice : Détection du trot(oirs "},{"code":"
image = new SimpleImage(\"./assets/curb.jpg\")
for pixel in image :
avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
if votre code ici :
pixel.setRed(120);
pixel.setGreen(120);
pixel.setBlue(120);
print(image)
"},{"solution":"if pixel.getRed() > avg * 1.5 :"}],[{"text":"Nous allons incruster l'image de droite dans les pixels rouge du stop.
L'algorithme est le suivant :
pixel sont les pixels de l'image stop.jpg.
pixel2 sont les pixels de l'image leaves.jpg
L'algorithme est le suivant pour réaliser le programme.
Pour chacun des pixels :
Etape 1 : Calculer la moyenne des couleurs RVB d'un pixel.
Etape 2 : tester si le canal rouge du pixel est dominant avec un seuil à 1.5*moyenne.
Etape 3 : Si oui, récupérer les coordonnées x y du pixel dans l'image stop.jpg.
Etape 4 : Sélectionner le pixel2 aux coordonnées x et y de l'image leaves.jpg
Etape 6 ; copier les couleurs rouge, verte et bleue du pixel2 dans des variables.
Etape 6 : Copier les RVB de pixel2 (leaves.jpg) dans pixel (stop.jpg).
Tester le code et indiquer en commentaire sur celui-ci les différentes étapes (#Etape 1, #Etape 2, ...).
","title":"Incrustation d'image"},{"code":"
image = new SimpleImage(\"./assets/stop.jpg\")
incruste = new SimpleImage(\"./assets/leaves.jpg\")
for pixel in image :
#Ecrire le code ici
#Etape1
moy=(pixel.getRed() + pixel.getGreen() + pixel.getBlue() ) / 3
seuil = moy*1.2
if pixel.getRed() > seuil :
x = pixel.getX()
y = pixel.getY()
pixel2 = incruste.getPixel(x, y)
rouge = pixel2.getRed()
pixel.setRed(rouge)
print(image)
"},{"solution":"#mettre vert 0 rouge 255 bleu 0\npixel = image.getPixel(2, 2)\npixel.setGreen(0)\npixel.setBlue(0)\n\n#mettre rouge 255\npixel = image.getPixel(1, 0)\npixel.setRed(255)"}],[{"text":"
Maintenant, nous allons faire de même avec monkey.jpg.
Vous devez remplacer le fond bleu derrière le singe par les pixels provenant de moon.jpg.
Ci-dessous, nous avons notre fond d'écran, la célèbre photo prise d'Apollo 8 (1968) montrant la Terre au-dessus de l'horizon lunaire. Il existe une théorie selon laquelle cette image nous à permis de prendre conscience de la fragilité de notre planète..
.
Modifier la valeur du coefficient de la variable seuil (1.0) du code ci-dessous pour obtenir une jolie image.
Ensuite, essayez-le code avec d’autres images d'arrière plan :
paris.jpg yosemite.jpg stanford.jpg
","title":"INCRUSTATION AVEC LE CANAL BLEU"},{"code":"
image = new SimpleImage(\"./assets/monkey.jpg\")
incruste = new SimpleImage(\"./assets/moon.jpg\")
incruste.setAsBig(image)
for pixel in image :
#Ecrire le code ici
#Etape1
moy=(pixel.getRed() + pixel.getGreen() + pixel.getBlue() ) / 3
seuil = moy*1.0
if pixel.getBlue() > seuil :
x = pixel.getX()
y = pixel.getY()
pixel2 = incruste.getPixel(x, y)
rouge = pixel2.getRed()
vert = pixel2.getGreen()
bleu = pixel2.getBlue()
pixel.setRed(rouge)
print(image)
"}],[{"text":"Un filtre sur une image est une matrice (petit tableau) que nous appliquons à chaque pixel de l'image.
Prenons l'image x.png.
Nous allons appliquer le filtre :
[-1,-2,-1,
0, 0 , 0
1, 2 ,1]
à tous les pixels de l'image x.png.
Pour regarder la méthode de calcule suivre le lien suivant :
Déplacer vous sur l'image input pour voir la méthode de calcul avec un filtre .
Exécuter le filtre ci-dessus sur l'image x.png
","title":"Les filtres"},{"code":"
image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
image.filter( [ -1, -2, -1,
0, 0 , 0,
1, 2 , 1])
"}],[{"text":"Exécuter le code ci-dessous.
En vous aidant du code précédent, compléter le code pour appliquer le filtre suivant sur l'image :
Quel est le role de ce filtre?
","title":"Filtre n°1"},{"code":"
image = new SimpleImage(\"./assets/paris.jpg\")
"},{"edit":"
Répondre ici.
"}],[{"text":"Exécuter le code ci-dessous.
En vous aidant du code précédent, compléter le code pour appliquer le filtre suivant sur l'image :
[0, 1, 0,
1, -4 ,1
0, 1 , 0]
Quel est le role de ce filtre?
","title":"Filtre n°2"},{"code":"
image = new SimpleImage(\"./assets/paris.jpg\")
"},{"edit":"
Répondre ici.
"}],[{"text":"Exécuter le code ci-dessous.
En vous aidant du code précédent, compléter le code pour appliquer le filtre suivant sur l'image :
[-2,-1,0,
1, 1 ,1
0, 2 ,1]
Quel est le role de ce filtre?
","title":"Filtre n°3"},{"code":"
image = new SimpleImage(\"./assets/paris.jpg\")
"},{"edit":"
Répondre ici.
"}],[{"text":"Exécuter le code ci-dessous.
En vous aidant du code précédent, compléter le code pour appliquer le filtre suivant sur l'image :
[-1,-1,-1,
-1, 8 ,-1
-1, -1 ,-1]
Quel est le rôle de ce filtre?
Quelle est la différence avec le filtre n°2?
","title":"Filtre n°4"},{"code":"
image = new SimpleImage(\"./assets/paris.jpg\")
"},{"edit":"
Répondre ici.
"}],[{"text":"Exécuter le code ci-dessous.
En vous aidant du code précédent, compléter le code pour appliquer le filtre de Gauss suivant sur l'image :
[1, 4, 7, 4, 1,
4, 16, 26, 16,4,
7, 26 ,41,26,7
4, 16, 26,16,4,
1, 4, 7, 4, 1]
Quel est le rôle de ce filtre?
Le filtre de gauss est la base de l'apprentissage artificielle. Lire l'article suivant :
","title":"Filtre n°5"},{"code":"
image = new SimpleImage(\"./assets/paris.jpg\")
"},{"edit":"
Répondre ici.
"}],[{"text":"Ecrire un code qui met le rouge à 0 de l'image flowers.jog et qui ne change pas le vert et le bleu.","title":"Exercice"},{"edit":"
Répondre ici.
"},{"code":"
image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
print(\"après\")
"},{"text":"De quelle couleur est l'image?
"},{"edit":"
Répondre ici.
"},{"text":"Comment varie le temps de traitement de l'image en fonction de la grandeur de l'image?"},{"edit":"
Répondre ici
"}],[{"text":"Ecrire un code qui met le vert à 0 de l'image 51020.png et qui ne change pas le rouge et le bleu.","title":"Exercice"},{"edit":"
Répondre ici.
"},{"code":"
image = new SimpleImage(\"./assets/51020.png\")
for pixel in image :
#Ecrire le code ici
print(image)
print(\"après\")
"},{"text":"Il y a quoi sur l'image?
"},{"edit":"
Répondre ici.
"},{"text":"Comment varie le temps de traitement de l'image en fonction de la grandeur de l'image?"},{"edit":"
Répondre ici
"}],[{"text":"Sources : http://www.stanford.edu
"}]]