[[{"text":"","title":"Traitements des images numériques (suite)","posi":0}],[{"text":"","title":"Les nuances de gris"},{"code":""},{"edit":""}],[{"text":"Nous venons de voir que pour créer du gris, il faut que les RVB soient égaux.","title":"pixel.setRed(255) Example"},{"code":""},{"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":"Dans nos nouvelles expériences sur le traitement des images numériques nous aurons besoin de nouvelles fonctions :","title":"4 nouvelles fonctions"},{"code":""},{"edit":""}],[{"text":"","title":"Utilisation de if"},{"code":""},{"edit":""}],[{"text":"Ecrire le code pour créer sur le haut de l'image une bande horizontale bleue de 20 pixels de haut.","title":"Exercice"},{"code":""},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(1, 0)\npixel.setRed(255)\npixel.setGreen(255)"}],[{"text":"Ecrire le code pour créer sur la droite de l'image une bande verticale noire de 20 pixels de large.","title":"Exercice"},{"code":""},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(1, 0)\npixel.setRed(255)\npixel.setGreen(255)"}],[{"text":"Nous souhaitons changer la couleur rouge du panneau stop en bleue.","title":"Exercice"},{"code":""}],[{"text":"Pour modifier uniquement le rouge de l'image, il faut sélectionner les pixel qui ont le canal rouge dominant.","title":"Amélioration du programme"},{"code":""}],[{"text":"","title":"Détection du trotoire "},{"code":""},{"solution":"#mettre vert 255\npixel = image.getPixel(0, 0)\npixel.setGreen(255)\n\n#mettre rouge 255\npixel = image.getPixel(1, 0)\npixel.setRed(255)"}],[{"text":"Nous allons incruster l'image de droite dans les pixels rouge du stop.","title":"Incrustation d'image"},{"code":""},{"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":"

Now we'll do one like the movies -- film the movie start in front of a blue screen. Replace the blue background behind the monkey with pixels from moon.jpg.

Here is our monkey movie star:

Here is our background, the famous Apollo 8 photo of the earth shown rising above the moon horizon. There is a theory that this famous image helped start the environmental movement.

Nous allons maintenant en faire un film similaire au film - filmer le film devant un écran bleu. Remplacez le fond bleu derrière le singe par des pixels provenant de moon.jpg.

Voici notre star de cinéma singe:

singe montré en face de fond bleu

Voici notre fond d'écran, la célèbre photo Apollo 8 de la Terre montrée au-dessus de l'horizon lunaire. Il existe une théorie selon laquelle cette image célèbre a aidé à lancer le mouvement écologiste.

célèbre photo Apollo 8 de la terre sur un fond noir

Plan Bluescreen:

Boucle sur monkey.jpg

Détecter les pixels bleus, c'est-à-dire bleu haut

Pour ces pixels: copier sur les pixels de la lune

(recopiez l'exemple de code précédent pour commencer)

Ensuite, essayez-le avec d’autres images: paris.jpg yosemite.jpg stanford.jpg

","title":"INCRUSTATION AVEC LE CANAL BLEU"},{"code":""}],[{"text":"","title":"Les boucles pour le traitement d'images"},{"code":""},{"text":""},{"edit":""},{"text":"Lorsque l'on met à 0 le canal bleu et le canal vert d'un pixel blanc. De quelle couleur devient le pixel?"},{"edit":"Répondre ici."}],[{"text":"","title":"flowers.jpg"},{"edit":""},{"code":""},{"text":"Exécuter le programme."},{"edit":""},{"text":"Comment varie le temps de traitement de l'image en fonction de la grandeur de l'image?"},{"edit":"Répondre ici"}],[{"text":"","title":"Expérience n°1 : Rouge à 0"},{"code":""},{"solution":"pixel.setRed(255)"}],[{"text":"Maintenant, vous allez mettre le canal vert et bleu à 0, sans toucher au canal rouge. ","title":"Les filtres"},{"code":""}],[{"text":"Faire de même avec le canal bleu. Mettre le canal rouge et vert à 0.","title":"Expérience n°3 : Canal Bleu"},{"code":""}],[{"text":"Nous allons utiliser trois nouvelles instructions :","title":"pixel.getRed() / pixel.getGreen() / pixel.getBlue()"},{"code":""},{"text":"Les valeurs affichées par les canaux rouge, vert et bleu sont-ils logiques (255,255,255)?"},{"edit":""}],[{"text":"Dans l'exemple suivant, nous récupérons la valeur du canal rouge du pixel : red = pixel.getRed()","title":"Augmentation du canal Rouge"},{"edit":"Décrire ici."},{"code":""}],[{"text":"Nous souhaitons transformer en orange la fleur jaune.","title":"Expérience n°4"},{"code":""},{"solution":" green = pixel.getGreen()\n green = green * 0.75\n pixel.setGreen(green)"}],[{"text":"Vous allez multiplier par 0.75 les valeurs d'origines des canaux rouge, vert et bleu de l'image.","title":"Expérience n°5"},{"edit":""},{"code":""},{"solution":" green = pixel.getGreen()\n green = green * 0.75\n pixel.setGreen(green)"}],[{"text":"","title":"Enigme"},{"edit":""},{"code":""}],[{"text":"Source : http://www.stanford.edu"}]]

Détails

Écrit par : Richard GAUTHIER

Création : 5 Novembre 2019

Mis à jour : 5 Novembre 2019

Clics : 1607

[[{"text":"","title":"Traitements des images numériques"}],[{"text":"Nous allons reprendre l'image x.png pour commencer à traiter les images."},{"code":""}],[{"text":"Maintenant nous allons manipuler les pixels.","title":"pixel.setRed(255) Example"},{"code":""}],[{"text":"Les fonctions suivantes permettent de modifier les canaux rouge, vert et bleu du pixel : ","title":"Fonctions Pixel Set Red/Green/Blue "},{"code":""},{"solution":"pixel = image.getPixel(0, 0)\npixel.setGreen(255)"}],[{"text":"","title":"Exercice"},{"code":""},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(0, 0)\npixel.setRed(255)\npixel.setGreen(255)"}],[{"text":"","title":"Exercice"},{"code":""},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(1, 0)\npixel.setRed(255)\npixel.setGreen(255)"}],[{"text":"","title":"Exercice"},{"code":""},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(0, 0)\npixel.setRed(255)\npixel.setGreen(255)\npixel.setBlue(255)"}],[{"text":"","title":"Exercice"},{"code":""}],[{"text":"Pour modifier la couleur de plusieurs pixels, il faut juste assigner le pixel à une nouvelle coordonnée et lui mettre une nouvelle couleur.","title":"Plusieurs Pixels - Diagonale en Rouge"},{"code":""}],[{"text":"","title":"Exercice"},{"code":""},{"solution":"#mettre vert 255\npixel = image.getPixel(0, 0)\npixel.setGreen(255)\n\n#mettre rouge 255\npixel = image.getPixel(1, 0)\npixel.setRed(255)"}],[{"text":"","title":"Plusieurs Pixels - Diagonale en Rouge"},{"code":""},{"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":"","title":"Exercice"},{"code":""}],[{"text":"","title":"Les boucles pour le traitement d'images"},{"code":""},{"text":""},{"edit":""},{"text":"Lorsque l'on met à 0 le canal bleu et le canal vert d'un pixel blanc. De quelle couleur devient le pixel?"},{"edit":"Répondre ici."}],[{"text":"Maintenant vous allez travaillé avec l'image flowers.jpg.","title":"flowers.jpg"},{"edit":""},{"code":""},{"text":"Exécuter le programme."},{"edit":""},{"text":"Comment varie le temps de traitement de l'image en fonction de la grandeur de l'image?"},{"edit":"Répondre ici"}],[{"text":"","title":"Expérience n°1 : Rouge à 0"},{"code":""},{"solution":"pixel.setRed(255)"}],[{"text":"Maintenant, vous allez mettre le canal vert et bleu à 0, sans toucher au canal rouge. ","title":"Expérience n°2 : Canal Rouge"},{"code":""}],[{"text":"Faire de même avec le canal bleu. Mettre le canal rouge et vert à 0.","title":"Expérience n°3 : Canal Bleu"},{"code":""}],[{"text":"Nous allons utiliser trois nouvelles instructions :","title":"pixel.getRed() / pixel.getGreen() / pixel.getBlue()"},{"code":""},{"text":"Les valeurs affichées par les canaux rouge, vert et bleu sont-ils logiques (255,255,255)?"},{"edit":""}],[{"text":"Dans l'exemple suivant, nous récupérons la valeur du canal rouge du pixel : red = pixel.getRed()","title":"Augmentation du canal Rouge"},{"edit":"Décrire ici."},{"code":""}],[{"text":"Nous souhaitons transformer en orange la fleur jaune.","title":"Expérience n°4"},{"code":""},{"solution":" green = pixel.getGreen()\n green = green * 0.75\n pixel.setGreen(green)"}],[{"text":"Vous allez multiplier par 0.75 les valeurs d'origines des canaux rouge, vert et bleu de l'image.","title":"Expérience n°5"},{"edit":""},{"code":""},{"solution":" green = pixel.getGreen()\n green = green * 0.75\n pixel.setGreen(green)"}],[{"text":"","title":"Enigme"},{"edit":""},{"code":""}],[{"text":"Source : http://www.stanford.edu"}]]

Détails

Écrit par : Richard GAUTHIER

Création : 31 Octobre 2019

Mis à jour : 1 Novembre 2019

Clics : 1643

[[{"text":"Afin de vérifier vos acquis, répondez aux questions suivantes."}],[{"text":"Quel type de photo faut-il utiliser pour faire du traitement d'image? "},{"radio":[{"label":"Photo numérique","sol":true},{"label":"Photo argentique","sol":false},{"label":"Photo imprimée","sol":false}]}],[{"text":""},{"radio":[{"label":"en binaire","sol":true},{"label":"sous forme de texte","sol":false},{"label":"sous forme de couleur","sol":false}]}],[{"text":"C'est quoi la définition d'une image?"},{"radio":[{"label":"C'est le nombre de pixels","sol":true},{"label":"C'est la surface de l'image.","sol":false},{"label":"C'est le nombre de couleurs","sol":false},{"label":"C'est la taille d'un pixel","sol":false}]}],[{"text":"C'est quoi la résolution d'une image?"},{"radio":[{"label":"C'est le nombre de pixels","sol":false},{"label":"C'est la surface de l'image.","sol":false},{"label":"C'est le nombre de couleurs","sol":false},{"label":"C'est la taille d'un pixel","sol":true}]}],[{"text":"De combien de couleurs est composé un pixel?"},{"radio":[{"label":"3","sol":true},{"label":"4","sol":false},{"label":"2","sol":false},{"label":"5","sol":false}]}],[{"text":"Comment peut-on modifier automatiquement les pixels d'une image?"},{"radio":[{"label":"En utilisant un algorithme.","sol":true},{"label":"En utilisant les maths.","sol":false},{"label":"En utilisant un schéma.","sol":false},{"label":"En codant chaque pixel.","sol":false}]}]]

Détails

Écrit par : Richard GAUTHIER

Création : 29 Octobre 2019

Mis à jour : 29 Octobre 2019

Clics : 1453

[[{"text":"Regarder la vidéo suivante :","title":"Les images numériques"}],[{"quiz":805}],[{"text":"","title":"Pixel"},{"code":""},{"solution":"image.setZoom(20)"},{"text":"Explications sur le code :"}],[{"text":"","title":"Les pixels"},{"code":""},{"text":"Est-ce normales de trouver ces valeurs pour le rouge, le vert et le bleu du pixel (0,0) de l'image? Justifier."},{"edit":""}],[{"text":"Faire de même avec le pixel de coordonnée (2,2) de l'image \"x.png\". En vous aidant du code précédent, écrire le code python correspondant.","title":"Visualiser la couleur du pixel(0,0)"},{"code":""},{"text":"Justifier les résultats."},{"edit":""}],[{"text":"","title":"Format des images numériques"},{"edit":"Importer votre belle image numérique ici."}],[{"text":"

Les images numériques que nous voyez sur vos écrans sont donc stockées dans des fichiers. Vous venez de voir qu'il existe plusieurs formats d'images, c'est-à-dire plusieurs façons de coder l'image dans un fichier. 

Selon le format, l'image prend plus ou moins d'espace disque et est de plus ou moins bonne qualité.

logo.BMP	logo.jpg (jpeg)	logo.png	logo.gif
Taille 159ko	Taille 11ko	Taille 22ko	Taille 8ko

 

"}],[{"text":"","title":"Image.bmp"}],[{"text":"","title":"Image.jpeg ou Image.jpg"}],[{"text":"","title":"Image.gif"}],[{"text":"","title":"Image.png"}],[{"text":"Lire la page suivante :","title":"Définition et résolution des images numériques"},{"htm":"","css":"","js":""}],[{"text":"Un fichier \"image\" issu d'un appareil photo numérique contient plus qu'une simple image. On trouve en effet des informations sur l'image elle-même (définition, résolution...) mais aussi des informations sur la prise de vue (date et heure, lieu...). Cette spécification des fichiers \"image\" d'un appareil photo numérique s'appelle EXIF (EXchangeable Image file Format). Ces données contenues dans un fichier \"image\" d'un appareil photo s'appellent des métadonnées.","title":"Les métadonnées d'une image"}],[{"text":""},{"edit":""}],[{"text":"Exécuter le code ci-dessous."},{"edit":"Répondre ici."},{"code":"image = new SimpleImage(url)
"}],[{"text":""},{"edit":"Répondre ici."}],[{"text":"Sources : "},{"code":""}]]

Détails

Écrit par : Richard GAUTHIER

Création : 29 Octobre 2019

Mis à jour : 29 Octobre 2019

Clics : 1703