Transcript Document 4650140

Lycée Edgar Quinet
Année 2014-2015
Terminale S - ISN
TP5 «Transformation photomaton»
Nous allons voir comment Processing peut nous permettre de «manipuler» des images. . .
Lancer l’environnement de développement de Processing. Créer un dossier tp5. Les codes
seront enregistrés dans des dossiers différents, à l’intérieur de tp5.
On rappelle les raccourcis utiles de Processing :
• Ctrl+S : enregistrer,
• Ctrl+R : éxécuter,
• Ctrl+T : mettre en forme,
• Ctrl+K : ouvrir le dossier où est enregistré le sketch.
1. Création et manipulation d’une PImage (tp5_1)
Recopier le code suivant, sans les commentaires, pour comprendre comment on crée
une image et on manipule ses pixels :
PImage mon_image ; // la variable mon_image sera utilisée dans le programme
void setup () {
size (700, 700); // la taille de la fenêtre
mon_image = createImage(width, height, RGB);
// on crée mon_image, width
// et height sont la largeur et
// la hauteur de la fenêtre
mon_image.loadPixels();
// tous les pixels de l'image sont placés dans une liste
for (int n =0; n < width * height; n ++) { // on prend les pixels un par un
mon_image.pixels[n] = color ( random (255), random (255), random (255));
// on leur donne une couleur RGB aléatoire
}
mon_image.updatePixels(); // les pixels de l'image sont ceux qu'on a créé
}
void draw () {
image (mon_image, 0, 0);
// on dessine l'image, le coin haut gauche placé en (0;0)
}
2. Afficher une image existante (tp5_2)
• enregistrer un nouveau sketch tp5_2 (le répertoire est automatiquement créé).
• Télécharger l’image garf.png à l’adresse www.mathsaquinet.fr/pages/isn) et l’enregistrer dans un sous dossier data dans le dossier tp5_2.
• Recopier le code suivant, sans les commentaires, pour comprendre comment on
charge et affiche une image :
PImage mon_image;
void setup(){
size(700,700);
mon_image = loadImage("garf.png"); // on charge l'image
}
void draw(){
image(mon_image,0,0); // on dessine l'image
}
3. Transformer l’image (tp5_3)
• Enregistrer un nouveau sketch tp5_3, et placer dans son sous-répertoire data votre
image.
• Écrire le début du code :
PImage mon_image;
PImage image_finale; // l'image transformée
void setup() {
size(700, 700);
mon_image = loadImage("garf.png"); // l'image est chargée
image_finale = retourne(mon_image); // on appelle la fonction retourne
}
void draw() {
image(image_finale, 0, 0); // on dessine l'image
}
• Ce n’est pas pratique de raisonner avec des numéros de pixels. La fonction suivante transforme un numéro en coordonnées. Écrire cette fonction à la suite du
code.
int pos_to_num(int x, int y) { // transforme des coordonnées en numéro
int n = y*width+x;
return n; // le resultat de la fonction est n
}
• Enfin écrire à la suite du code la fonction qui va retourner l’image :
PImage retourne(PImage image_avant) {
PImage image_apres;
image_apres = createImage(width, height, RGB);
image_avant.loadPixels();
image_apres.loadPixels();
for (int x=0;x<width;x++) { // x de 0 à 699
for (int y =0;y<height;y++) { // y de 0 à 699
int n; // n est un entier
int m; // m est un entier
n = pos_to_num(x, y); // n est le numero du point (x;y)
m = pos_to_num(width−1−x, y); // pour savoir ou va le point (x;y)
image_apres.pixels[m] = image_avant.pixels[n]; // on colorie le pixel m
}
}
image_apres.updatePixels(); // on enregistre image_apres
return image_apres; // le résultat de la fonction
}
• Éxécuter ce code.
• Transformer la fonction retourne pour que le chat se retrouve la tête en bas.
4. la transformation photomaton.
• Enregistrer un nouveau sketch tp5_ final. Copiez-collez le code de tp5_3 en remplacant la fonction retourne par la fonction transforme ci-dessous (et en remplaçant retourne par transforme dans la fonction setup ) :
PImage transforme(PImage image_avant) {
PImage image_apres;
image_apres = createImage(width, height, RGB);
image_avant.loadPixels();
image_apres.loadPixels();
for (int x=0; x<width; x++) {
for (int y =0; y<height; y++) {
int n;
int m;
n = pos_to_num(x, y);
if (x%2==0) { // si x est pair
m = pos_to_num(x/2, y);
} else { // si x est impair
m = pos_to_num(width/2+(x−1)/2, y);
}
image_apres.pixels[m] = image_avant.pixels[n];
}
}
image_apres.updatePixels();
return image_apres;
}
• Écrire la fonction photomaton sur le même modèle, qui transforme l’image en
quatre sous-images, suivant la parité de l’abscisse et de l’ordonnée du pixel.
5. Plusieurs transformations de suite.
photomaton(photomaton(photomaton(mon_image))) permet bien sûr d’effectuer
trois fois de suite la fonction photomaton, mais ce n’est pas très pratique si on veut
le faire dix fois...
On peut pour cela utiliser une boucle «for». Par exemple pour appliquer trois fois de
suite la fonction qui à x associe 4x − 5 à un entier 10 on écrirait :
int n_repetition = 3; // pour le faire trois fois
int x = 10; // x vaut 10
for (int n=0;n<n_repetition ;n++) { // i prend les valeurs 0,1,2
int y;
y = 4*x−5;
x = y;
}
println(x);
• transformer le code de tp5_final pour qu’on puisse choisir le nombre de répétitions de la transformation. Essayer avec n_repetition=3, puis 10,20,55,57,58.
• En ajoutant à la boucle for image_finale.save("image_" "+str(n+1)+".gif");,
vous pouvez enregistrer automatiquement les images au fur et à mesure.
6. Pour aller plus loin, vous pouvez assez facilement transformer le programme pour
répéter la transformation du boulanger...