Les images1] Dessiner avec Javascool

11) IntroductionTaper et exécuter le code dans la Proglet mauelIsn (carreRouge) void main() { int x = 0 ; int y = 0; initDrawing("Carré rouge",x, y, 200, 200);for(x = 100; x <= 150; x = x + 1){ for(y = 50; y <= 100; y = y + 1){ drawPixel(x, y, 255, 0, 0);}}}

** initDrawing ( )   : ouvre 1 fenêtre de nom Carré rouge , 200 pixels de largeur , 200 pixels de hauteur , dont le pixel en haut à gauche a pour coordonnées (0, 0).** drawPixel( )   : dessine 1 pixel dans la colonne x , la ligne y , la couleur est décrite par le codage RVB avec des nombres qui varient entre 0 et 255 ( = couleur max ) .** Les valeurs de x vont de 0 à largeur -1 ; y va de 0 à hauteur -1 .

Remarques   : a) Javascool ne dessine pas la fenêtre ; x et y vont jusqu’ à 980 et 640 environ ( si résolution 1280 X 800)b) Pour avoir la fenêtre , il faut utiliser Eclipse :

12) Pour compléter a) mettre 1bordure verte à ce carré rouge,b) dessiner 1cercle noir à l’intérieur du carré .Utiliser les fonctions drawLine(x1, y1, x2, y2 , rouge, vert, bleu ) et drawCircle(x, y , rayon, rouge, vert, bleu) .

2] Dessiner en 3 dimensions 21) Une méthode de base Un objet AB est à la distance D de l’œil O , il est vu sous 1angle  ; cet objet s’éloigne à la distance 2D et on le voit sous un angle . Comme l’œil est sensible à l’angle sous lequel l’objet est vu ( et non la taille de l’objet ) , AB paraît 2 fois plus petit quand son éloignement est multiplié par 2 .Voir schéma :

x

y22) Tracer ce cube avec JS nom de fenêtre = « Cube » , 400 X 400 , fichier : cube.jvs .// Face avant drawLine(100, 300, 100, 100, 0, 0, 0); drawLine(100, 100, 300, 100, 0, 0, 0); drawLine(300, 100, 300, 300, 0, 0, 0); drawLine(300, 300, 100, 300, 0, 0, 0);

// Face arrière drawLine(150, 250, 150, 150, 0, 0, 0); drawLine(150, 150, 250, 150, 0, 0, 0); drawLine(250, 150, 250, 250, 0, 0, 0); drawLine(250, 250, 150, 250, 0, 0, 0);

// Arrêtes fuyantes drawLine(100, 300, 150, 250, 0, 0, 0); drawLine(100, 100, 150, 150, 0, 0, 0); drawLine(300, 100, 250, 150, 0, 0, 0); drawLine(300, 300, 250, 250, 0, 0, 0);23 ) On complète l’image Ce cube représente une pièce .** La face inférieure AA’D’D est le sol ; on la laisse en blanc ;** Les faces ABB’A’ et CDD’C’ sont les murs des côtés , on les peint en jaune foncé (230,200,0) ; rappel : J = R + VEcrire le code pour le mur gauche et le droit .// peinture du mur gauche for(int i=100;i<=150;i=i+1){ for(int j=i; j<=400-i;j=j+1){ drawPixel(i,j,230,200,0); } } // peinture du mur droit for(int i=250;i<=300;i=i+1){ for(int j=400-i; j<=i;j=j+1){ drawPixel(i,j,230,200,0);

A A

O D 2D

B B

O

B C

B’ C’

A’ D’

A D

On prend 1 cube d’arrête 200, dont la face proche est ABCD.Sa face éloignée est A’B’C’D’ . Et on a les coordonnées suivantes :

A(100,300)B(100,100)C(300,100)D(300, 300)

A’(150,250)B’(150,150)C’(250,150)D’(250,250)

}( pour x = i , on a y = j = i dans la partie BB’ ; pour la partie A’A : y = 300-(i -100) = 400 –i = j )

** peindre en marron (220, 180, 0) le plafond .// Le plafond for(int j = 100; j <= 150; j = j + 1) for(int i = j; i <= 400 - j; i = i + 1) drawPixel(i, j, 220, 180, 0);

** le mur du du fond :Il est jaune pâle avec 1 fenêtre (160, 160) , (220, 160) , (220,220) , (160 ,220) qui permet de voir le ciel bleu .Jaune pâle = (255, 245, 140 ) ; bleu = (0, 150, 255) .

// Le mur du fond for(int i = 150; i <= 250; i = i + 1){ for(int j = 150; j <= 250; j = j + 1) { if((160 <= i) && (i <= 210) && (160 <= j) && (j <= 220)) { drawPixel(i, j, 0, 150, 255); } else { drawPixel(i, j, 255, 245, 140); } }

3] La représentation des images dans 1fichier La méthode précédente consiste à représenter 1cercle par 3 nombres ( coordonnées du centre, le rayon ) , 1 carré par 8 nombres ( les coordonnées ) … est la représentation vectorielle de l’image .Elle ne convient pas pour toutes les images.L’autre méthode consiste à utiliser 1quadrillage, et chaque case est un pixel ( = picture element) .Chaque pixel sera codé sur des bits , ou octets [ noir ( = 1) , blanc (=0), blanc, noir, ….etc ] .Cette représentation est un bitmap , « carte de bits » .L’image est stockée dans 1fichier . Il y a différents formats de fichiers [ blanc/noir , avec niveaux de gris, couleurs, compressés , pas compressés , …].

L’un des formats s’appelle PNM ( Portable aNyMap) . C’est 1format d’image matricielle, sans compression , assez peu utilisé, mais facile à manipuler .

31) Fichier PBM (Portable BitMap)Ce format de fichier est utilisé pour des images noir et blanc. ** Un pixel noir est codé par 1, un pixel blanc est codé par 0.** Le fichier en ASCII:

==> P1 (le nombre magique du format)Un caractère d'espacement (espace, tabulation, nouvelle ligne)==> # commentaire éventuel==> La largeur de l'image en pixels Un caractère d'espacement La hauteur de l’image en pixels==>Les données binaires de l'image

L'image est codée ligne par ligne en partant du haut ; chaque ligne est codée de gauche à droite ; toutes les lignes commençant par # sont ignorées ; aucune ligne ne doit dépasser 70 caractères.

Exemple   : P1# Un exemple bitmap de « rayures »10 71 1 1 1 1 1 1 1 1 10 0 0 0 0 0 0 0 0 01 1 1 1 1 1 1 1 1 10 0 0 0 0 0 0 0 0 01 1 1 1 1 1 1 1 1 10 0 0 0 0 0 0 0 0 01 1 1 1 1 1 1 1 1 1 ( les 0 ou 1 peuvent être ligne par ligne)

** Copier le fichier et l’enregistrer avec le bloc-notes sous le nom rayures.PBM codage ANSI

** L’ouvrir avec Gimp ; il faut agrandir l’image car elle est petite ; Relever ses propriétés dans Image/propriétés de l’image.

32) Fichier PGM (Portable GrayMap)Ce format est utilisé pour des images en niveau de gris. En plus des caractéristiques de largeur et hauteur, une valeur maximale est utilisée pour coder les niveaux de gris ; cette valeur doit être inférieure à 65536 . Chaque niveau de gris est codé par une valeur entre 0 et cette valeur maximale.si 1px est codé sur 1octet :** le « 0 » => noir** le »127 » => gris moyen** le « 255 » => blanc .

Exemple   : P2#Rayures avec gris10 62550 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0127 127 127 127 127 127 127 127 127 127127 127 127 127 127 127 127 127 127 127255 255 255 255 255 255 255 255 255 255 255255 255 255 255 255 255 255 255 255 255 255

** Copier le fichier et l’enregistrer avec le bloc-notes sous le nom rayuresGris.PBM codage ANSI** L’ouvrir avec Gimp ; il faut agrandir l’image car elle est petite ; Relever ses propriétés dans Image/propriétés de l’image.

33) Fichier PPM ( Portable PixMap)Ce format de fichier est utilisé pour des images couleur. Chaque pixel est codé par trois valeurs (rouge, vert et bleu). Comme le format PGM, en plus des caractéristiques de largeur et hauteur, une valeur maximale utilisée pour coder les niveaux de couleur ; cette valeur doit être inférieure à 65536.

Exemple   : largeur = 200 px hauteur = 180 px valeur max = 255P3#monFichier.PPM200180255255 0 0 codage du 1er px ( r[0][0] v[0][0] b[0][0] , il est rouge)………………75 0 150 codage du dernier px (r[108 000][108 000] v[108 000][108 000] b[108 000][108 000] , il est violet )

Ouvrir monFichier.PPM dans JS ; puis avec Gimp :

4] Etude avec JAVASCOOL   41) Ecrire un fichier texte (ecrireUnFichierTexte.jvs )Entrer le code : java.io.OutputStreamWriter f; // pour créer le fichier

void main() {String S1 = readString("entrer votre ligne 1");String S2 = readString("entrer votre ligne 2");String S3 = readString("entrer votre ligne 3");

// ecriture du fichier .txt f = openOut("C://images/monFichier.txt");// 1 canal vers le fichier printlnToFile(f, S1); // passage automatique a la ligne . printlnToFile(f, S2); printlnToFile(f, S3); closeOut(f); }// fin de main Remarque   : adapter le chemin "C://images/monFichier.txt" Constater que le fichier a bien été créé.

42) Lire un fichier texte (LireUnFichierTexte.jvs )Entrer le code :java.util.Scanner f1; // pour ouvrir 1 fichier

void main() {String s =""; // Lecture du fichier f1 = openIn("C://images/monFichier.txt" ); // f1 = canal en lecture vers le fichier s = readStringFromFile(f1); // passe automatiquement d'une ligne à l'autre println(s); s = readStringFromFile(f1); println(s); s = readStringFromFile(f1); println(s); closeIn(f1);

//autre méthode , plus générale . f1 = openIn("C://images/monFichier.txt" ); String ligne = ""; ligne=readStringFromFile(f1);

while(ligne != null) { println(ligne); ligne=readStringFromFile(f1); }

closeIn(f1);}

On constate que le fichier est lu et affiché correctement :

4   3 ) Le fichier PBM peut être écrit avec JS

entrer le code : (ecrireRayuresAvecJS.jvs code à améliorer ! )java.io.OutputStreamWriter f; // pour créer le fichiervoid main() {int x, y ; // x= les colonnes,y= les lignes dans rayures[x][y] en commencant par for (y = O; ....int[][] rayures = new int[10][7]; // tableau des pixels

for (x = 0;x<=9;x = x+1){ // ligne y = 0 à 1 (noir)rayures[x][0] = 1 ;

}

for (x = 0;x<=9;x = x+1){ // ligne y = 1 à 0 (blanc)rayures[x][1] = 0 ;

}

for (x = 0;x<=9;x = x+1){ // ligne y = 2 à 1 (noir)rayures[x][2] = 1 ;

}

for (x = 0;x<=9;x = x+1){ // ligne y = 3 à 0 (blanc)rayures[x][3] = 0 ;

}for (x = 0;x<=9;x = x+1){ // ligne y = 4 à 1 (noir)

rayures[x][4] = 1 ;}

for (x = 0;x<=9;x = x+1){ // ligne y = 5 à 0 (blanc)rayures[x][5] = 0 ;

}for (x = 0;x<=9;x = x+1){ // ligne y = 6 à 1 (noir)

rayures[x][6] = 1;}f = openOut("C://images/ecrireRayuresAvecJS.pbm");printlnToFile(f,"P1");printlnToFile(f,"#Rayures");printlnToFile(f,10);printlnToFile(f,7);

for ( y=0; y<=6; y= y+1) {for (x = 0; x<=9;x++){

printlnToFile(f,rayures[x][y]);

}}

closeOut(f);

}

Constatez que JS a bien créé le fichier ; l’ouvrir avec Gimp : on a l’image du 31) .

Vous pouvez ouvrir le .PBM avec JS et voir que JS a bien écrit le fichier.44) L’ image PBM peut être affichée avec JS

Entrer le code :

void main() {int lig =0; // pour parcourir les lignes ( axe x) int col =0 ;// pour parcourir les colonnes( axe y) int ligne, colonne; // nbre de ligne & colonne du fichier int[][] rayures; // tableau rayures[col][lig] des pixels String s; // pour afficher l'en-tête java.util.Scanner f1; // f1 = canal en lecture vers le fichier

// Lecture de l'image f1 = openIn("C://images/rayures.PBM");

s = readStringFromFile(f1);//ligne 1 = P1 println("s = "+s); s = readStringFromFile(f1);// ligne 2 = # Un exemple bitmap de « rayures » println("s = "+s); colonne = readIntFromFile(f1);// ligne 3 = 10 (10 lignes) println("colonne= "+colonne); ligne = readIntFromFile(f1);//ligne 4= 7 (7 lignes) println("ligne= "+ligne);

rayures = new int [colonne][ligne];

for(lig = 0; lig<=ligne-1; lig++){ for(col=0; col<= colonne-1 ; col++){ rayures[col][lig] = readIntFromFile(f1); println(rayures[col][lig]); } }

closeIn(f1); // afficher : for(int i = 0; i<=colonne-1; i++){ for(int j=0; j<= ligne-1 ;j++){ int couleur = rayures[i][j]; if ( couleur ==0) {drawPixel(i,j,255,255,255);} if ( couleur ==1) {drawPixel(i,j,0,0,0);} } }

}

[ L’avantage d’écrire le fichier avec JS est qu’on pourra modifier l’image ].

5] Etude du .PGM avec JS écrire le code JS ( rayuresGrisEcrireLireAvecJS.jvs) qui écrit le fichier pgm (rayuresGrisAvecJS.pgm ) .

** ouvrir rayuresGrisAvecJS.pgm avec Gimp ; faire Couleurs/Inverser , et enregistrer le nouveau fichier .** Ecrire le code JS qui lit le fichier rayuresGris.PGM , réalise l’inversion , affiche le fichier inversé et l’enregistre dans rayuresGrisInverseAvecJS.PGM .

6] Etude du .PPM avec JS

61) Ecrire le code qui écrit puis qui affiche l’image de monFichier.PPM (ecrireAffichermonFichier.jvs )

void main() {

java.io.OutputStreamWriter f; // pour créer le fichier int largeur, hauteur, max; // largeur = les colonnes, hauteur = les lignes , max = ligne 5 du fichier int[][] r, v, b; // le tableau du rouge , du vert , du bleu

largeur = 200; hauteur = 180; max = 255; r = new int[largeur][hauteur];// tableau des pixels ROUGES v = new int[largeur][hauteur];// tableau des pixels VERTS b = new int[largeur][hauteur];// tableau des pixels BLEUS//http://www.toutes-les-couleurs.com/code-couleur-rvb.phpfor( int y = 0;y<=29 ; y++) { // la zone rouge

for (int x = 0; x<=199; x++) {r[x][y] = 255;v[x][y] = 0;b[x][y] = 0;

}}for( int y = 30;y<=59 ; y++) { // la zone orangée

for (int x = 0; x<=199; x++) {r[x][y] = 240;v[x][y] = 130;b[x][y] = 50;

}}for( int y = 60;y<=89 ; y++) { // la zone jaune

for (int x = 0; x<=199; x++) {r[x][y] = 255;v[x][y] = 255;b[x][y] = 0;

}}for( int y = 90;y<=119 ; y++) { // la zone verte

for (int x = 0; x<=199; x++) {r[x][y] = 0;

v[x][y] = 255;b[x][y] = 0;

}}for( int y = 120;y<=149 ; y++) { // la zone bleue

for (int x = 0; x<=199; x++) {r[x][y] = 0;v[x][y] = 0;b[x][y] = 255;

}}

for( int y = 150;y<=179 ; y++) { // la zone violette for (int x = 0; x<=199; x++) {

r[x][y] = 100;v[x][y] = 0;b[x][y] = 150;

}}

// ecriture du fichier ppm

f = openOut("C://images/PPM/monFichierJ.ppm"); printlnToFile(f, "P3"); //P3 printlnToFile(f, "#monFichierCouleurs");//#monFichierCouleurs printlnToFile(f, 200);// largeur printlnToFile(f, 180);//hauteur printlnToFile(f, 255);// lavaleur max = 255

for(int y = 0; y <= hauteur- 1; y++){ for(int x = 0; x <= largeur-1;x++) { printlnToFile(f, r[x][y]); printlnToFile(f, v[x][y]); printlnToFile(f, b[x][y]); }

} closeOut(f);

// Afficher l'image :

initDrawing("ppm", 0,0,largeur,hauteur);

for (int i = 0; i<=largeur-1; i = i+1){ for(int j= 0; j<=hauteur-1;j++){ // b[i][j] = 255 ; v[i][j] = 200 ; si on veut modifier l'image drawPixel(i,j,r[i][j], v[i][j], b[i][j]); } }

}

62) Ecrire le code qui ouvre monFichier.PPM puis qui inverse les couleursfichier JS : liremonFichierInverseEcrireJ.jvsfichier ppm : monFichierInverseJ.PPM// la nouvelle couleur = 255 – l’ancienne Code :void main() {

java.io.OutputStreamWriter f; // pour créer le fichier modifié int i =0; int j =0 ; int largeur, hauteur, max; int[][] r, v, b; String s; java.util.Scanner f1;// pour lire le fichier à modifier // Lecture de l'image f1 = openIn("C://images/PPM/monFichierJ.ppm"); //f1 = openIn("rouge.ppm"); s = readStringFromFile(f1);//ligne 1 = P3 println("s = "+s); s = readStringFromFile(f1);// ligne 2 = # println("s = "+s); largeur = readIntFromFile(f1);// ligne 3 println("largeur= "+largeur); hauteur = readIntFromFile(f1);//ligne 4 println("hauteur= "+hauteur); max = readIntFromFile(f1); println("max= "+max); r = new int[largeur][hauteur]; v= new int[largeur][hauteur]; b= new int[largeur][hauteur];

for(j = 0; j <= hauteur - 1; j = j + 1){ for(i = 0; i <= largeur -1; i = i + 1){ r[i][j] = readIntFromFile(f1); v[i][j] = readIntFromFile(f1); b[i][j] = readIntFromFile(f1);} } closeIn(f1);

println("OK");

//traitement :inversion de la quantité de chaque couleur (couleurs complémentaires ) //ROUGE ==>255 - ROUGE .... etc //ROUGE ==>cyan

// ORANGE ==> bleu entre cyan et bleu // JAUNE==> bleu // vert ===> magenta // bleu ===> jaune // violet ==>vert for( int y = 0; y <= 179; y = y + 1){ for(int x= 0; x <= 199; x = x + 1){ // drawPixel(x, y, 255, 0, 0); disparaitr[x][y] = 255 -r[x][y];v[x][y] = 255 -v[x][y];b[x][y] = 255-b[x][y];} } // Affichage du fichier modifié initDrawing("ppm", 0,0,largeur,hauteur);

for ( i = 0; i<=largeur-1; i = i+1){ for( j= 0; j<=hauteur-1;j++){ drawPixel(i,j,r[i][j], v[i][j], b[i][j]); } }

// Enregistrement Fichier modifié

// ecriture du fichier ppm

f = openOut("C://images/monFichierInverseJ.PPM"); printlnToFile(f, "P3"); //P3 printlnToFile(f, "#");//# printlnToFile(f, 200);// largeur printlnToFile(f, 180);//hauteur printlnToFile(f, 255);// la valeur max = 255 // inversion de i et j car dans la fenetre GIMP l'ordonnee est vers le HAUT ! for(j = 0; j <= hauteur- 1; j = j + 1){ for(i = 0; i <= largeur-1; i =i + 1) { printlnToFile(f, r[i][j]); printlnToFile(f, v[i][j]); printlnToFile(f, b[i][j]); }

} closeOut(f);

}

Vérifier que ce code correspond au menu Couleurs/inverser de Gimp .

63) Ecrire le code qui ouvre monFichier.PPM puis qui transforme l’image couleur en image en niveaux de gris

fichier JS : liremonFichierCouleursEnGrisEcrireJ.jvsfichier ppm : monFichierCouleursEnGrisJ.PPM// chaque pixel de couleur R,V,B est remplacé par 1pixel dont le niveau de gris est la moyenne des nombres R,V,B.Code :void main() {

java.io.OutputStreamWriter f; // pour créer le fichier int i =0; // i = une ligne int j =0 ; // j = une colonne int largeur, hauteur, max; //nbres de lignes , colonnes, valeur max int[][] r, v, b; String s; java.util.Scanner f1;

// Lecture de l'image f1 = openIn("C://images/PPM/monFichierJ.ppm"); //f1 = openIn("rouge.ppm"); s = readStringFromFile(f1);//ligne 1 = P3 println("s = "+s); s = readStringFromFile(f1);// ligne 2 = # println("s = "+s); largeur = readIntFromFile(f1);// ligne 3 println("largeur= "+largeur); hauteur = readIntFromFile(f1);//ligne 4 println("hauteur= "+hauteur); max = readIntFromFile(f1); println("max= "+max); r = new int[largeur][hauteur]; v= new int[largeur][hauteur]; b= new int[largeur][hauteur];

for(j = 0; j <= hauteur - 1; j = j + 1){ for(i = 0; i <= largeur -1; i = i + 1){ r[i][j] = readIntFromFile(f1); v[i][j] = readIntFromFile(f1); b[i][j] = readIntFromFile(f1);} } closeIn(f1);

println("OK");

//traitement :transformer l'image couleur en image en niveaux de gris int[][] gris = new int[largeur][hauteur]; for(int y= 0; y <= 179; y = y + 1){ for(int x= 0; x <= 199; x = x + 1){ gris[x][y]= ( r[x][y] + b[x][y] + v[x][y])/3 ;}} // afficher la nouvelle image: initDrawing("ppm", 0,0,largeur,hauteur);

for ( i = 0; i<=largeur-1; i = i+1){ for( j= 0; j<=hauteur-1;j++){ // b[i][j] = 255 ; v[i][j] = 200 ; si on veut modifier l'image drawPixel(i,j,gris[i][j], gris[i][j], gris[i][j]); } }

// Enregistrement Fichier modifié

// ecriture du fichier ppm

f = openOut("C://images/PPM/monFichierCouleursEnGrisJ.PPM"); printlnToFile(f, "P3"); //P3 printlnToFile(f, "#");//# printlnToFile(f, 200);// largeur printlnToFile(f, 180);//hauteur printlnToFile(f, 255);// lavaleur max = 255 for(j = 0; j <= hauteur- 1; j = j + 1){ for(i = 0; i <= largeur-1; i =i + 1) { printlnToFile(f, gris[i][j]); printlnToFile(f, gris[i][j]); printlnToFile(f, gris[i][j]); }

} closeOut(f);

}

Comparer à Image/Mode/Niveaux de gris de Gimp

64) Ecrire le code qui ouvre monFichier.PPM   ; qui transforme l’image en niveaux de gris et qui augmente le contraste fichier JS : liremonFichierCouleursEnGrisContrasteEcrireJ.jvsfichier ppm : monFichierCouleursEnGrisContrasteJ.PPM// si le niveau de gris est < = 90 , on le met à 0// sinon, on le met à 255 Code :void main() {

java.io.OutputStreamWriter f; // pour créer le fichier int i =0; // i = une ligne int j =0 ; // j = une colonne int largeur, hauteur, max; //nbres de lignes , colonnes, valeur max int[][] r, v, b; String s; java.util.Scanner f1;

// Lecture de l'image f1 = openIn("C://images/PPM/monFichierJ.ppm"); //f1 = openIn("rouge.ppm"); s = readStringFromFile(f1);//ligne 1 = P3 println("s = "+s); s = readStringFromFile(f1);// ligne 2 = # println("s = "+s); largeur = readIntFromFile(f1);// ligne 3 println("largeur= "+largeur);

hauteur = readIntFromFile(f1);//ligne 4 println("hauteur= "+hauteur); max = readIntFromFile(f1); println("max= "+max); r = new int[largeur][hauteur]; v= new int[largeur][hauteur]; b= new int[largeur][hauteur];

for(j = 0; j <= hauteur - 1; j = j + 1){ for(i = 0; i <= largeur -1; i = i + 1){ r[i][j] = readIntFromFile(f1); v[i][j] = readIntFromFile(f1); b[i][j] = readIntFromFile(f1);} } closeIn(f1);

println("OK"); //traitement : //1 ] transformer l'image couleur en image en niveaux de gris int[][] gris = new int[largeur][hauteur]; for(int y= 0; y <= 179; y = y + 1){ for(int x= 0; x <= 199; x = x + 1){ gris[x][y]= ( r[x][y] + b[x][y] + v[x][y])/3 ;}} //2) augmenter le contraste int[][] grisbis = new int[largeur][hauteur]; for(int y= 0; y <= 179; y = y + 1){ for(int x= 0; x <= 199; x = x + 1){ if (gris[x][y] <= 90){ grisbis[x][y]= 0;} else { grisbis[x][y]= 255;} }} // Afficher : initDrawing("ppm", 0,0,largeur,hauteur);

for ( i = 0; i<=largeur-1; i = i+1){ for( j= 0; j<=hauteur-1;j++){ drawPixel(i,j,grisbis[i][j], grisbis[i][j], grisbis[i][j]); } }

// Enregistrement Fichier modifié// ecriture du fichier ppm

f = openOut("C://images/PPM/monFichierCouleursEnGrisContrasteJ.PPM"); printlnToFile(f, "P3"); //P3 printlnToFile(f, "#");//# printlnToFile(f, 200);// largeur printlnToFile(f, 180);//hauteur printlnToFile(f, 255);// lavaleur max = 255 for(j = 0; j <= hauteur- 1; j = j + 1){ for(i = 0; i <= largeur-1; i =i + 1) { printlnToFile(f, grisbis[i][j]); printlnToFile(f, grisbis[i][j]); printlnToFile(f, grisbis[i][j]); }

} closeOut(f); }

Correspond à Couleurs/Luminosité-Contraste contraste au max de Gimp.

7] Traitement d’une photoPrendre une photo ***.JPG par exemple.L’ouvrir dans Gimp,Pour l’enregistrer au format ***.PPM :=> Enregistrer sous=>type de fichier : image PPM=> formatage des données : ASCII

=> ouvrir ***.PPM dans JSOn peut alors faire les traitements de l’image avec JS .

( inverser les couleurs : avoir 1 négatif ; mettre en niveaux de gris : photo en noir et blanc ; ne garder que le blanc et le noir ; diminuer la taille : compresser en réduisant le nombre de pixels ; miroir vertical , miroir horizontal , ….)

8] Format des images 81) Codage des imagesIl y a 2 modes de codage d’une image numérique :** Matriciel ;** Vectoriel.

Pour stocker ces 2 types d’images sur disque, il existe de nombreux formats de fichiers. Ces formats diffèrent par les quantifications apportées ( binaire, niveaux de gris , palette, 24 bits , alpha-channel, etc ….) , par leurs algorithmes de compression , par le fait d’avoir un format propriétaire ou au contraire un format ouvert , etc…

A) Le mode matricielUne image matricielle , ou « carte de points » (de l’anglais « bitmap ») , est une image constituée d’une matrice de points colorés. C'est-à-dire constituée d’un tableau où case repérée par sa position possède une couleur qui lui est propre et est considérée comme point .

Il s’agit donc d’une juxtaposition de points de couleurs, formant, dans leur ensemble, une image.

B) Le mode vectoriel Une image vectorielle est une image numérique composée d’objets géométriques individuels (segments de droite, arcs de cercle, courbes, etc…) , définis chacun par divers attributs ( forme, position, couleur, remplissage, etc…) et auxquels on peut appliquer différentes transformations.Au lieu de mémoriser une mosaïque de points élémentaires,on stocke la succession d'opérations conduisant au tracé. Par exemple, un dessin.

Avantages Inconvénients

Avantages Inconvénients

82) Le codage des couleurs pour les images matriciellesA) Niveau de grisQuelle est la quantité d’information nécessaire à l’affichage de la couleur ?Dans le meilleur des cas, on peut distinguer quelques dizaines de niveaux de gris. Le codage sur 1 octet permet 256 niveaux, ce qui est suffisant. En attribuant la valeur 0 à un pixel, celui-ci est noir ; avec la valeur 255 il est blanc. 1valeur intermédiaire donne une nuance de gris.Exercice   : Une image de 1920 X 1080 pixels en nuance de gris a pour taille …………………………………………….

B) Couleur vraieDes expériences tendent à prouver que l’œil humain distingue environ 500 000 couleurs ( à vérifier …).On utilise la technologie RVB ( Red, Green, Blue) et la synthèse additive des couleurs.En codant chaque couleur sur 1octet , on obtient 256 X 256 X 256 nuances , soit environ 16 millions de couleurs ; ce qui est largement suffisant.Chaque pixel est représenté par 3 octets ( 24 bits), 1 pour le rouge , 1 pour le vert , 1 pour le bleu .

Pour certains formats, un 4ième octet est ajouté pour le canal alpha, c'est-à-dire la gestion de la transparence.

Exercice   : Une image de 1920 X 1080 pixels en couleur vraie a pour taille …………………………………………….Une image de 1920 X 1080 pixels en couleur vraie 32 bits a pour taille …………………………………………….

C) La palettePour réduire la place disque prise par une image couleur , on peut utiliser le principe le principe de la palette sur 8 bits.Chaque pixel est codé sur 1octet, la valeur de cet octet fait référence à une palette de 256 couleurs fixée par image .C’est une table de correspondance qui se trouve dans l’en-tête du fichier , avant le commencement de l’image. Exercice   : Une image de 1920 X 1080 pixels en codage 256 couleurs a pour taille …………………………………………….

83) Les différents types de formatsA) La compression

La compression d'image peut être effectuée avec perte de données ou sans perte. La compression sans perte est souvent préférée là où la netteté des traits est primordiale : schémas, dessins techniques, icônes, bandes dessinées. La compression avec perte, plus radicale, est utile pour les transmissions à bas débit, mais dégrade la qualité de l'image restituée. Les méthodes de compression sans perte sont également préférées là où la précision est vitale : balayages médicaux ou numérisations d'images pour archivage. Les méthodes avec perte restent acceptables pour des photos dans les applications où une perte mineure de fidélité (parfois imperceptible) est tolérée pour réduire les coûts de stockage ou d'envoi.

Pourquoi peut-on compresser ? Parce qu'une image où chaque point serait parfaitement indépendant des autres aurait peu d'intérêt : une image ne nous est utile que si elle contient des corrélations, qui dès lors qu'elles existent peuvent permettre les compressions en question.

B) Les différents formats d’imagesVoici un tableau comparatif : http://fr.wikipedia.org/wiki/Image_num%C3%A9rique#Repr.C3.A9sensation_des_couleurs

Type(matriciel/vectoriel)

Compressiondes données

Nombre de couleurssupportées

Affichageprogressif Animation Transparence

JPEG matricielOui,

réglable(avec perte)

16 millions Oui Non Non

JPEG2000 matriciel Oui,avec ou sans perte 4 milliards Oui Oui Oui

GIF matriciel Oui,Sans perte 256 maxi (palette) Oui Oui Oui

PNG matriciel Oui,sans perte

Palettisé (256 couleurs ou moins) ou

16 millionsOui Non Oui

(couche Alpha)

TIFF matricielCompression ou

pasavec ou sans pertes

de monochrome à 16 millions Non Non Oui

(couche Alpha)

SVG vectoriel compression possible 16 millions * ne s'applique

pas * Oui Oui(par nature)

Certains formats sont plus adaptés que d' autres selon l 'image (photo, dessin, image animée…). Toutes les images diffusées sur Internet ont un point commun : elles sont compressées . Cela veut dire que l ' ordinateur fait des calculs pour qu' elles soient moins lourdes et donc plus rapides à charger .Le JPEGLes images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire le poids des photos , qui peuvent comporter plus de 16 millions de couleurs différentes . L es images JPEG sont enregistrées avec l 'extension .jpg ou .jpeg.Notez que le JPEG détériore un peu la qualité de l ' image, d' une façon généralement imperceptible. C' est ce qui le rend si efficace pour réduire le poids des phot os .Quand il s ' agit d' une photo, on ne peut généralement pas détecter la perte de qualité. Par contre, si ce n' est pas une photo, vous risquez de voir l ' image un peu « baver ». Dans ce cas , il vaut mieux ut iliser l e format PNG .Le PNGLe format PNG (Portable Network Graphics) est le plus récent de tous . Ce format es t adapté à la plupart des graphiques .L e PNG a deux gros avantages : il peut être rendu transparent et i l n' altère pas la qualité de l ' image.L e PNG a été inventé pour concurrencer un autre format , l e GIF , à l ' époque où il fallait payer des royalties pour pouvoir utiliser des GIF . Depuis , le PNG a bien évolué et c' es t devenu le format le plus puissant pour enregistrer la plupart des images .L e PNG existe en deux versions , en fonction du nombre de couleurs que doit comporter l ' image :PNG 8 bi t s : 256 couleurs ;PNG 24 bi t s : 16 millions de couleurs (autant qu' une image JPE G ).

Au fait , si le PNG 24 bits peut afficher autant de couleurs qu' une image JPEG , et qu' en plus i l peut être rendutransparent sans modifier la qualité de l ' image… quel est l ' intérêt du JPE G ?L a compression du JPEG est plus puissante sur les photos . Une photo enregistrée en JPEG se chargera toujours beaucoup plus vit e que si elle était enregistrée en PNG . Réservez le format JPEG aux photos .Le GIFC' est un format assez vieux , qui a été néanmoins très utilisé. Aujourd' hui , l e PNG est globalement bien meilleur que le GIF : l es images sont généralement plus légères et la transparence est de meilleure qualité. Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu' à plusieurs millions de couleurs ).Néanmoins , le GIF conserve un certain avantage que l e PNG n' a pas : il peut être animé.

Il existe un format adapté à chaque imageSi on résume, voici quel format adopter en fonction de l ' image que vous avez :== Une photo : utilisez un JPEG .= N' importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bit s ou éventuellement un GIF .= N' importe quel graphique avec beaucoup de couleurs : ut i lisez un PNG 24 bits .= Une image animée : ut i lisez un GIF animé.Bannissez les autres formatsL es autres formats non cités ici , comme le format BITMAP (*.bmp) s ont à bannir car bien souvent ils ne sont pas compressés , donc trop gros . Ils ne sont pas du tout adaptés au Web.

C) Structuration finale d’un fichier d’image matricielle

En-tête (« header »)Identificateur du format

LargeurHauteur…….

Palette de couleurs(éventuellement)

Données d’imagesuite de pixels

éventuellement compressés