[[{"text":"Afin de vérifier vos acquis, répondez aux questions suivantes.","posi":0}],[{"text":"En quelle année a été créé le concept d'hypertexte numérique (lien hypertexte)?"},{"radio":[{"label":"1965","sol":true},{"label":"1995","sol":false},{"label":"1935","sol":false},{"label":"1905","sol":false}]}],[{"text":"
En quelle année a été créé le world wide web ( www )?
"},{"radio":[{"label":"1989","sol":true},{"label":"1965","sol":false},{"label":"1889","sol":false},{"label":"1939","sol":false}]}]]
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1629
[[{"login":"aa"}],[{"quiz":815}]]
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1547
[[{"text":"
"},{"htm2":[{"html":""},{},{}]}],[{"chrono":480},{"text":"
"},{"htm2":[{"html":" \n \n \n \n Le titre de la page \n \n \n Valeur: \n \n
\n"},{"htm2":[{"html":" \n \n \n \n Le titre de la page \n \n \n Valeur: \n \n
\n"},{"htm2":[{"html":" \n \n \n \n Le titre de la page \n \n \n Valeur: \n \n
\n"},{"htm2":[{"html":" \n \n \n \n Le titre de la page \n \n \n Valeur: \n \n
\n"},{"htm2":[{"html":" \n \n \n \n Le titre de la page \n \n \n Valeur: \n \n
\n
"},{"htm2":[{"html":""},{},{}]}]]
Vous devez réaliser les programmes suivants en html5 directement dans le navigateur.
Vous avez le droit à tout document.
Attention chaque page doit respecter la structure et les balises d'une page HTML5.
Pour des questions d'équité dans la classe, vous devez utiliser 1 seul écran.
","posi":1}],[{"chrono":480},{"text":"Ecrire une page html qui affiche dans un paragraphe, le texte suivant:
Attention, vous devez respecter les retours à la ligne.
Nous autres, mordus d'informatique, préférons par-dessus tout passer notre temps à bidouiller nos ordinateurs, plutôt que les utiliser pour faire quelque chose de productif! |
Copier ici le code de votre page html5
Ecrire un code html qui affiche exactement la page suivante dans le navigateur:
![\"\"](\"http://sciencesappliquees.com/images/php/eo2.PNG\")
Remarques : Cette page est composée :
- d'un titre très très important;
- d'un titre important;
- d'un titre vraiment pas important;
- d'un paragraphe.
Copier ici votre code html :
"},{"htm2":[{"html":""},{},{}]}],[{"chrono":480},{"text":"Para 2
Ecrire un code html qui affiche exactement la page suivante dans le navigateur:
![\"\"](\"http://sciencesappliquees.com/images/php/exo3.PNG\")
Remarque : Ce paragraphe est composé :
- d'un texte souligné;
- d'un texte en gras;
- d'un texte en italique;
- d'un texte mis en évidence.
Copier ici votre programme :
"},{"htm2":[{"html":""},{},{}]}],[{"chrono":480},{"text":"Listes
Ecrire un code html qui affiche exactement la page suivante dans le navigateur:
Attention, il faut utiliser les listes!
![\"\"](\"https://sciencesappliquees.com/images/php/exo4.PNG\")
Copier ici votre code html :
"},{"htm2":[{"html":""},{},{}]}],[{"chrono":480},{"text":"Image
Ecrire un code html qui affiche exactement la page suivante dans le navigateur:
![\"\"](\"https://sciencesappliquees.com/images/php/eo5.PNG\")
Remarque : Cette page est composée :
- d'un titre très très important;
- de l'image ci-dessous avec une taille de 300px par 200px et d'une bordure de 4px ;
![\"logo](\"https://sciencesappliquees.com/images/STI2D.jpeg\")
Copier ici votre code html :
"},{"htm2":[{"html":""},{"css":""},{}]}],[{"chrono":480},{"text":"Liens
Réaliser la page ci-dessous avec 3 liens qui pointent vers ies sites suivants:
Lycée Sérusier
Toutatice
Onisep
Remarque : les adresses sont les suivantes :
Lycée Sérusier : http://www.lycee-serusier.fr
Toutatice : https://www.toutatice.fr/
Onisep : http://www.onisep.fr/
"},{"htm2":[{"html":""},{},{}]}],[{"chrono":480},{"text":"CSS
Ecrire un code css pour afficher la page de la manière suivante :
- un titre avec la couleur blanche, un arrière plan rouge et une taille de 50px;
- un paragraphe de couleur bleue et une taille de 20px.
- un paragraphe de couleur verte et en gras.
Attention ne pas toucher au html.
"},{"htm2":[{"html":"NSI
\n4 heures par semaine
\n1 des 3 spécialités
"},{"css":""},{}]}],[{"chrono":480},{"text":"Ecrire une variable texte avec le contenu suivant :
Nos études ont montré que la probabilité qu’un programme corrigé fonctionne comme avant la correction est seulement de cinquante pour cent. |
Le contenu de cette variable doit être affiché dans la div resultat.
Modifier uniquement le code javascript ci-dessouq en conséquence:
Attention : Ne pas toucher au Html.
\n
Résultat:
\n \n"},{},{"js":"var mondiv = document.getElementById('resultat');\n//ci-dessous votre code \n\n\n\n\n\nmondiv.innerHTML += 'Bonjour le Monde!'; \n \n \nfunction myFunction() {\n var valeur = document.getElementById(\"valeur\").value;\n mondiv.innerHTML = valeur;\n\n\n}\n\n"}]}],[{"chrono":480},{"text":"Votre programme récupère la valeur de l'input text.
Cette valeur correspond à l'intensité du courant en mA dans une ligne électrique de 230V.
Le script devra afficher dans le div resultat :
-\"pas de danger\" si le courant est inférieur à 20;
-\"danger\" si le courant est entre 20 et 30;
-\"Risque de mort\" si le courant est supérieur à 30;
Modifier uniquement le code javascript ci-dessouq en conséquence:
Attention : Ne pas toucher au Html.
\n
Résultat:
\n \n"},{},{"js":"var mondiv = document.getElementById('resultat');\n//ci-dessous votre code \n\n\n\n\n\nmondiv.innerHTML += 'Bonjour le Monde!'; \n \n \nfunction myFunction() {\n var valeur = document.getElementById(\"valeur\").value;\n mondiv.innerHTML = valeur;\n\n\n}\n\n"}]}],[{"chrono":480},{"text":"Votre programme a 2 variables chaine1 = \"Bonjour\" et chaine2 = \"Monde\".
Il doit afficher dans la div résultat la concaténation des 2 variables (Attention il faut des espaces).
Modifier uniquement le code javascript ci-dessouq en conséquence:
Attention : Ne pas toucher au Html.
\n
Résultat:
\n \n"},{},{"js":"var mondiv = document.getElementById('resultat');\n//ci-dessous votre code \n\n\n\n\n\nmondiv.innerHTML += 'Bonjour le Monde!'; \n \n \nfunction myFunction() {\n var valeur = document.getElementById(\"valeur\").value;\n mondiv.innerHTML = valeur;\n\n\n}\n\n"}]}],[{"chrono":480},{"text":"Ecrire une fonction surfSphere qui calcule la surface d'une sphère en fonction de la valeur de l'input text.
Par exemple :
Modifier uniquement le code javascript ci-dessouq en conséquence:
Attention : Ne pas toucher au Html.
\n
Résultat:
\n \n"},{},{"js":"var mondiv = document.getElementById('resultat');\n//ci-dessous votre code \n\n\n\n\n\nmondiv.innerHTML += 'Bonjour le Monde!'; \n \n \nfunction myFunction() {\n var valeur = document.getElementById(\"valeur\").value;\n mondiv.innerHTML = valeur;\n\n\n}\n\n"}]}],[{"chrono":480},{"text":"Le lien ci-dessous renvoie la température d'une salle :
http://sciencesappliquees.com/templates/php/temp.php
Ecrire le programme qui affiche la valeur de la température dans le
div resultat. Il faudra utiliser la méthode get.Modifier uniquement le code javascript ci-dessouq en conséquence:
Attention : Ne pas toucher au Html.
\n
Résultat:
\n \n"},{},{"js":"var mondiv = document.getElementById('resultat');\n//ci-dessous votre code \n\n\n\n\n\nmondiv.innerHTML += 'Bonjour le Monde!'; \n \n \nfunction myFunction() {\n var valeur = document.getElementById(\"valeur\").value;\n mondiv.innerHTML = valeur;\n\n\n}\n\n"}]}],[{"chrono":480},{"text":"Ecrire un formulaire qui demande :
- le nom
- le prénom
- et l'age
de la personne et qui l'envoie par la méthode post au serveur suivant : http://www.sciencesappliquees.com/serveur.php
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1589
[[{"text":"![](\"https://www.demotivateur.fr/images-buzz/2978/snapchat-687.jpg\")
","title":"Traitements des images numériques (suite)","posi":0}],[{"text":"
"}],[{"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 :
"}],[{"text":"
![\"image](\"https://web.stanford.edu/class/cs101/image-flip.png\")
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);\">
"}],[{"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":"
","title":"Exercice"},{"code":"
","title":"Amélioration du programme"},{"code":"
for pixel in image :
"},{"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.
"},{"text":"Comment varie le temps de traitement de l'image en fonction de la grandeur de l'image?"},{"edit":"
Répondre ici
"}],[{"text":"
"},{"solution":"pixel.setRed(255)"}],[{"text":"Maintenant, vous allez mettre le canal vert et bleu à 0, sans toucher au canal rouge.
","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.
"},{"code":"
![](\"http://www.sciencesappliquees.com/assets/enigme.png\")
","title":"Enigme"},{"edit":"
"},{"code":"
"}]]
","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)
pixel.setGreen(50)
pixel.setBlue(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 |
Re
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).
Ecrire le code correspondant.
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()
green = pixel.getGreen()
blue = pixel.getBlue()
#Etape 2
moy = (red + green + blue) / 3
#Etape 3
pixel.setRed(moy)
pixel.setGreen(moy)
pixel.setBlue(moy)
print(\"image traitée sepia\")
print(image)
print(image)
Rappel sur les coordonnées des pixels dans une image.![](\"https://web.stanford.edu/class/cs101/image-xy.jpg\")
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
- 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.
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)
pixel.setGreen(0)
pixel.setBlue(255)
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.
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":"Ecrire 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":"#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.Pour cela, il faut transformer les pixels dont le rouge est supèrieur à 160 en bleu.
Ecrire le code correspondant.
image = new SimpleImage(\"./assets/stop.jpg\")
for pixel in image :
#Ecrire le code ici
if pixel.getRed() > 160 :
if pixel.getGreen() < 160 :
if pixel.getBlue() < 160 :
pixel.setRed(0)
pixel.setGreen(0)
pixel.setBlue(255)
print(image)
"}],[{"text":"Pour modifier uniquement le rouge de l'image, 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.
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)
pixel.setGreen(0)
pixel.setBlue(255)
print(image)
"}],[{"text":"Mettre le pixel à l'origine en vert et celui juste à droite en rouge.
Modifier le code en conséquence.
","title":"Détection du trotoire "},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
# Pixel refers to (0, 0), set to red
pixel = image.getPixel(0, 0)
pixel.setRed(255)
# Change pixel to refer to (1, 0)
pixel = image.getPixel(1, 0)
pixel.setRed(255)
print(image)
"},{"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.![\"stop](\"https://web.stanford.edu/class/cs101/stop.jpg\")
![\"leaves](\"https://web.stanford.edu/class/cs101/leaves.jpg\")
L'algorithme est le suivant :
![\"bluescreen](\"https://web.stanford.edu/class/cs101/image-bluescreen.png\")
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()
vert = pixel2.getGreen()
bleu = pixel2.getBlue()
pixel.setRed(rouge)
pixel.setGreen(vert)
pixel.setBlue(bleu)
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":"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:![\"monkey](\"https://web.stanford.edu/class/cs101/monkey.jpg\")
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.![\"famous](\"https://web.stanford.edu/class/cs101/moon.jpg\")
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":"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.1
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)
pixel.setGreen(vert)
pixel.setBlue(bleu)
print(image)
"}],[{"text":"luescreen Multi-Pass - Vous l'essayez
Apportez plusieurs modifications: changez le rouge et changez le bleu
Code fourni: détecte le rouge, les copies dans les feuilles.jpg (image \"retour\")
Vous l'essayez:
-Ajouter une seconde instruction if après la première (copier / coller la 1ère si)
-Change pour détecter les pixels bleus, copie dans yosemite.jpg pixels (image \"back2\")
-Le second si suit le premier à l'intérieur de la boucle
-Ils ne sont pas l'un dans l'autre, ils sont frères et soeurs
-Ils sont au même niveau de retrait
-Trois paires {..}: 1x for-loop, 2x if-statement
image = new SimpleImage (\"stop.jpg\");
retour = new SimpleImage (\"leaves.jpg\");
back.setAsBig (image);
back2 = new SimpleImage (\"yosemite.jpg\");
back2.setAsBig (image);
pour (pixel: image) {
avg = (pixel.getRed () + pixel.getGreen () + pixel.getBlue ()) / 3;
if (pixel.getRed ()> avg * 1.7) {// if-red
pixel2 = back.getPixel (pixel.getX (), pixel.getY ());
pixel.setRed (pixel2.getRed ());
pixel.setGreen (pixel2.getGreen ());
pixel.setBlue (pixel2.getBlue ());
}
// Votre code ici
}
imprimer (image)
","title":"Les boucles pour le traitement d'images"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
#image sans traitement
print(\"image non traitée:\")
print(image);
#traitement de tous les pixels de l'image
pixel.setGreen(0)
pixel.setBlue(0)
#image traiter
print(\"image traitée:\")
print(image)
"},{"text":"Combien de fois ont été exécutés les instructions dans la boucle for du programme?
Aide : x.png est une image de 10 pixels sur 10 pixels.
Répondre ici.
Expériences avec les deux ifs
Utilisez couper / coller pour exécuter avec l'un ou l'autre ou les deux si
Puis changez leaves.jpg, en stanford.jpg
Exécuter sans puis avec le code if-blue
Pourquoi ça ressemble à ça?
Échange la commande, donc si-bleu est la première, suivie de si-rouge
Maintenant à quoi ça ressemble?
Conclusion: if-blue va se déclencher sur un pixel original ou nouveau
La logique ne fonctionne que sur les données que nous alimentons
Répondre
Répondre ici.
image = new SimpleImage(\"./assets/flowers.jpg\")
print(\"avant\")
for pixel in image :
pixel.setRed(255)
pixel.setGreen(255)
pixel.setBlue(0)
print(image)
print(\"après\")
Que fait ce programme.
"},{"edit":"Répondre ici.
Peinture post-traitement
Ici nous avons banana.jpg
banane jaune avec des briques rouges
Supposons que nous voulions montrer à la banane son rêve de paris
Mais nous ne voulons pas remplacer toute la brique rouge
Cette image ne convient pas bien à l'écran bleu (banane ou brique, trop de rouge)
On peut \"réparer ça en post\" (expression hollywoodienne)
Signification manipuler l'image dans un programme de peinture
J'ai créé banana2.jpg en tant que copie à modifier
Recadrer l'image pour positionner la banane et la tour eiffel
Mettre dans les cercles bleus artistiquement (démo)
Maintenant, le code peut simplement chercher du bleu
Vous pouvez également l'utiliser pour \"corriger\" discrètement dans l'image d'origine des petites zones qui posent des problèmes de logique de sélection d'écran bleu (comme lorsque vous avez des petites taches dont vous ne pouvez pas vous débarrasser).
Sur le Mac, Aperçu dispose d'un mode d'édition primitif. 1. Faites d’abord une copie de votre fichier original pour ne pas endommager l’original. Ouvrez la copie dans Aperçu. 2 Cliquez sur le crayon pour passer en mode édition. 3 Cliquez sur le cercle pour dessiner des cercles. 4 Cliquez sur les couleurs, en sélectionnant le bleu et une couleur de remplissage du bleu. Dessiner / organiser des cercles bleus ou autre. Windows a un programme de peinture simple similaire.
banane jaune avec cercles bleus peints en poteau
image = new SimpleImage (\"banana2.jpg\");
retour = new SimpleImage (\"paris.jpg\");
back.setAsBig (image);
pour (pixel: image) {
avg = (pixel.getRed () + pixel.getGreen () + pixel.getBlue ()) / 3;
if (pixel.getBlue ()> avg * 1.3) {// sélectionnez le bleu
pixel2 = back.getPixel (pixel.getX (), pixel.getY ());
pixel.setRed (pixel2.getRed ());
pixel.setGreen (pixel2.getGreen ());
pixel.setBlue (pixel2.getBlue ());
}
}
imprimer (image);
image-blues2-
","title":"Expérience n°1 : Rouge à 0"},{"code":"image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
Ecrire le code en conséquence.
Admirez votre création.
","title":"Les filtres"},{"code":"image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"}],[{"text":"Faire de même avec le canal bleu. Mettre le canal rouge et vert à 0.Ecrire le code en conséquence.
Admirer votre création.
","title":"Expérience n°3 : Canal Bleu"},{"code":"image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"}],[{"text":"Nous allons utiliser trois nouvelles instructions :- pixel.getRed()
- pixel.getGreen()
- pixel.getBlue()
Ces instructions permettent de prendre la valeur du canal rouge, vert ou bleu du pixel sélectionné.
Remarque : En programmation, nous utilisons très souvent la combinaison ci-dessous pour coder :
set / get ( mettre / prendre )
image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
# Pixel (2, 2),blanc
pixel = image.getPixel(2, 2)
red = pixel.getRed()
print(\"rouge =\",red)
green = pixel.getGreen()
print(\"vert =\",green)
blue = pixel.getBlue()
print(\"vert =\",blue)
print(image)
Répondre ici.
Nous multiplions par 2 la valeur.
pixel.setRed(red) : Met le canal rouge du pixel à cette nouvelle valeur.
Exécuter le code et décrire le résultat obtenu.
image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
red = pixel.getRed()
red = red * 2
pixel.setRed(red)
print(image)
Pour cela, il faut garder 75% du canal vert ( x 0.75 ).
Ecrire le code correspond en utilisant la combinaison setGreen et getGreen.
","title":"Expérience n°4"},{"code":"image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"},{"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.Ecrire le code python correspondant.
Ensuite vous essaierez avec un coefficient de 0.5 et 0.25.
Quel effet cela a sur l'image?
","title":"Expérience n°5"},{"edit":"Répondre ici.
image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"},{"solution":" green = pixel.getGreen()\n green = green * 0.75\n pixel.setGreen(green)"}],[{"text":"Nous avons volontairement modifié une image pour camoufler sont contenue.
Les paramètres du traitement de l'image sont les suivants :
Les valeurs verte et bleue ne sont que des valeurs aléatoires dans la plage 0 à 255. On appelle cela \"neige\" ou \"bruit de fond\".
Les données de l'image réelle sont exclusivement dans les valeurs rouges.
De plus, les valeurs en rouge ont toutes été divisées par 10 (pour la foncer).
La \"neige\" créé par le vert et le bleu obscurcit l'image réelle.
Écrire le code pour récupérer l'image réelle et résoudre l'énigme.
Répondre ici.
image = new SimpleImage(\"./assets/enigme.png\")
for pixel in image :
#Ecrire le code ici
print(image)
"}],[{"text":"Source : http://www.stanford.edu- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1779
[[{"text":"![](\"https://static.cnews.fr/sites/default/files/styles/image_640_360/public/snapchat_filtre_0.jpg?itok=5SZfZFat\")
","title":"Traitements des images numériques"}],[{"text":"Nous allons reprendre l'image x.png pour commencer à traiter les images.
","title":"pixel.setRed(255) Example"},{"code":"
for pixel in image :
"},{"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.
![](\"http://www.sciencesappliquees.com/assets/flowers.jpg\")
","title":"flowers.jpg"},{"edit":"
"},{"code":"
"},{"text":"Exécuter le programme.
"},{"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":"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.
"},{"code":"
","title":"Enigme"},{"edit":"
"},{"code":"
","title":"Traitements des images numériques"}],[{"text":"Nous allons reprendre l'image x.png pour commencer à traiter les images.Rappels sur les 3 lignes de code ci-dessous.
- La première ligne stocke l'image nommée \"x.png\" dans la variable nommée \"image\":
image = new SimpleImage (\"./assets/x.png\");
- La ligne 2 : image.setZoom(20); - régler l’option de zoom sur 20 (10, 20, ... peu importe).
- La ligne print(image); - affiche donc l'image avec un agrandissement de 20x.
Exécuter le code.
"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
print(image)
"}],[{"text":"Maintenant nous allons manipuler les pixels.Explications :
- La première ligne prend le pixel de coordonnée (0,0) dand l'image et le stocke dans la variable pixel.
pixel = image.getPixel(0, 0)
- pixel.setRed(255) Met une valeur au canal rouge du pixel.
Exécuter le code et modifier la valeur entre 0 et 255.
image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
pixel = image.getPixel(0, 0)
pixel.setRed(255)
print(image)
"}],[{"text":"Les fonctions suivantes permettent de modifier les canaux rouge, vert et bleu du pixel : - setRed(int) - int varie entre 0 et 255:
- setGreen(int) - int varie entre 0 et 255:
- setBlue(int) - int varie entre 0 et 255:
Testez le code ci-dessous.
Modifier le code pour mettre le pixel (0,0) en vert.
","title":"Fonctions Pixel Set Red/Green/Blue "},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
pixel = image.getPixel(0, 0)
pixel.setRed(255)
print(image)
"},{"solution":"pixel = image.getPixel(0, 0)\npixel.setGreen(255)"}],[{"text":"Mettre le pixel(0,0) en jaune.
Modifier le code en conséquence.
","title":"Exercice"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
pixel = image.getPixel(0, 0)
pixel.setRed(255)
print(image)
"},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(0, 0)\npixel.setRed(255)\npixel.setGreen(255)"}],[{"text":"Mettre le pixel(1,0) en jaune.
Modifier le code en conséquence.
","title":"Exercice"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
pixel = image.getPixel(0, 0)
pixel.setRed(255)
print(image)
"},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(1, 0)\npixel.setRed(255)\npixel.setGreen(255)"}],[{"text":"Mettre le pixel(0,0) en blanc.
Modifier le code en conséquence.
","title":"Exercice"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
pixel = image.getPixel(0, 0)
pixel.setRed(255)
print(image)
"},{"solution":"#mettre rouge et vert à 255 et bleu à 0\npixel = image.getPixel(0, 0)\npixel.setRed(255)\npixel.setGreen(255)\npixel.setBlue(255)"}],[{"text":"Ecrire le code pour mettre le pixel(1,4) en violet.
","title":"Exercice"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
print(image)
"}],[{"text":"Pour modifier la couleur de plusieurs pixels, il faut juste assigner le pixel à une nouvelle coordonnée et lui mettre une nouvelle couleur.Tester le code.
","title":"Plusieurs Pixels - Diagonale en Rouge"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
# Pixel refers to (0, 0), set to red
pixel = image.getPixel(0, 0)
pixel.setRed(255)
# Change pixel to refer to (1, 0)
pixel = image.getPixel(1, 0)
pixel.setRed(255)
print(image)
"}],[{"text":"Mettre le pixel à l'origine en vert et celui juste à droite en rouge.
Modifier le code en conséquence.
","title":"Exercice"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
# Pixel refers to (0, 0), set to red
pixel = image.getPixel(0, 0)
pixel.setRed(255)
# Change pixel to refer to (1, 0)
pixel = image.getPixel(1, 0)
pixel.setRed(255)
print(image)
"},{"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":"Mettre le pixel blanc aux coordonnées (2,2) en rouge.
Modifier le code en conséquence.
Maintenant que vous maitriser, mettre toute la diagonale en rouge.
Appeler le professeur pour valider votre travail.
","title":"Plusieurs Pixels - Diagonale en Rouge"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
# Pixel refers to (0, 0), set to red
pixel = image.getPixel(0, 0)
pixel.setRed(255)
# Change pixel to refer to (1, 0)
pixel = image.getPixel(1, 0)
pixel.setRed(255)
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":"Ecrire un programme pour créer une barre horizontale bleu, blanc et rouge.
Appeler le professeur pour valider votre travail.
","title":"Exercice"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
pixel = image.getPixel(0, 0)
pixel.setBlue(255)
pixel = image.getPixel(1, 0)
pixel.setBlue(255)
#Ecrire la suite
print(image)
"}],[{"text":"Supposons que vous avez 5 000 cartons dans un entrepôt et un robot.
Vous voulez que le robot déplace toutes les cartons d'un coin à l'autre de l'entrepôt.
L'ordinateur est stupide, alors vous lui expliquez (en codant) en détail comment déplacer un carton.
Ensuite vous lui dites de répéter les mêmes étapes pour tous les cartons (5000 fois).
C'est dans ces situations que vous utiliserez les boucles
Boucles = rapidité + puissance!
Exécuter le code Python ci-dessous.
Le programme à réaliser un traitement sur tous les pixels de l'image x.png.
Celui-ci consiste à mettre à 0 les canaux du vert et du bleu.
Combien de fois ont été exécutés les instructions dans la boucle for du programme?
Aide : x.png est une image de 10 pixels sur 10 pixels.
Lorsque l'on met à 0 le canal bleu et le canal vert d'un pixel blanc. De quelle couleur devient le pixel?
","title":"Les boucles pour le traitement d'images"},{"code":"image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
#image sans traitement
print(\"image non traitée:\")
print(image);
#traitement de tous les pixels de l'image
pixel.setGreen(0)
pixel.setBlue(0)
#image traiter
print(\"image traitée:\")
print(image)
"},{"text":"Combien de fois ont été exécutés les instructions dans la boucle for du programme?
Aide : x.png est une image de 10 pixels sur 10 pixels.
Répondre ici.
L'image flowers.jpg est une image de 457 pixels de large (width) sur 360 pixels de haut (height).
Combien de fois vont être exécutés les instructions dans la boucle for du programme?
Répondre ici.
image = new SimpleImage(\"./assets/flowers.jpg\")
print(\"avant\")
for pixel in image :
pixel.setRed(255)
pixel.setGreen(255)
pixel.setBlue(0)
print(image)
print(\"après\")
Que fait ce programme.
"},{"edit":"Répondre ici.
Nous avons vu que pour obtenir la couleur jaune, il faut utiliser du rouge + vert.
Nous savons donc que les parties jaunes de l’image flowers.jpg ont des valeurs rouge et vert élevées. Alors que se passe-t-il si, pour chaque pixel, s! nous mettons le rouge à 0?
![\"yellow](\"https://web.stanford.edu/class/cs101/flowers.jpg\")
L'exemple précédent avait modifié tous les pixels de l'image. Ce n'est pas réaliste.
De quoi sont faits les pixels des feuilles vertes? De quoi sont faits les pixels des fleurs jaunes?
Vous allez, pour chaque pixel, mettre le canal rouge à 0.
Ecrire le code en conséquence (rouge à 0).
Quelles sont les couleurs RVB élevées pour les fleurs jaunes?
image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
Ecrire le code en conséquence.
Admirez votre création.
","title":"Expérience n°2 : Canal Rouge"},{"code":"image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"}],[{"text":"Faire de même avec le canal bleu. Mettre le canal rouge et vert à 0.Ecrire le code en conséquence.
Admirer votre création.
","title":"Expérience n°3 : Canal Bleu"},{"code":"image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"}],[{"text":"Nous allons utiliser trois nouvelles instructions :- pixel.getRed()
- pixel.getGreen()
- pixel.getBlue()
Ces instructions permettent de prendre la valeur du canal rouge, vert ou bleu du pixel sélectionné.
Remarque : En programmation, nous utilisons très souvent la combinaison ci-dessous pour coder :
set / get ( mettre / prendre )
image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
# Pixel (2, 2),blanc
pixel = image.getPixel(2, 2)
red = pixel.getRed()
print(\"rouge =\",red)
green = pixel.getGreen()
print(\"vert =\",green)
blue = pixel.getBlue()
print(\"vert =\",blue)
print(image)
Répondre ici.
Nous multiplions par 2 la valeur.
pixel.setRed(red) : Met le canal rouge du pixel à cette nouvelle valeur.
Exécuter le code et décrire le résultat obtenu.
image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
red = pixel.getRed()
red = red * 2
pixel.setRed(red)
print(image)
Pour cela, il faut garder 75% du canal vert ( x 0.75 ).
Ecrire le code correspond en utilisant la combinaison setGreen et getGreen.
","title":"Expérience n°4"},{"code":"image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"},{"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.Ecrire le code python correspondant.
Ensuite vous essaierez avec un coefficient de 0.5 et 0.25.
Quel effet cela a sur l'image?
","title":"Expérience n°5"},{"edit":"Répondre ici.
image = new SimpleImage(\"./assets/flowers.jpg\")
for pixel in image :
#Ecrire le code ici
print(image)
"},{"solution":" green = pixel.getGreen()\n green = green * 0.75\n pixel.setGreen(green)"}],[{"text":"Nous avons volontairement modifié une image pour camoufler sont contenue.
Les paramètres du traitement de l'image sont les suivants :
Les valeurs verte et bleue ne sont que des valeurs aléatoires dans la plage 0 à 255. On appelle cela \"neige\" ou \"bruit de fond\".
Les données de l'image réelle sont exclusivement dans les valeurs rouges.
De plus, les valeurs en rouge ont toutes été divisées par 10 (pour la foncer).
La \"neige\" créé par le vert et le bleu obscurcit l'image réelle.
Écrire le code pour récupérer l'image réelle et résoudre l'énigme.
Répondre ici.
image = new SimpleImage(\"./assets/enigme.png\")
for pixel in image :
#Ecrire le code ici
print(image)
"}],[{"text":"Source : http://www.stanford.edu"}]]
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 1784