On peut importer facilement une image dans Processing, pour pouvoir l’afficher dans le script, ou pour analyser les pixels qui la composent, ou encore pour n’en afficher qu’une portion.
Avant toute chose, il est important de savoir que Processing importe les formats de base du web : jpg, png, gif. Mais pas de tiff, ni de PDF (qui n’est pas, rappelons-le, un format d’image), ni de PSD.
4 étapes pour afficher une image
1) Importer le fichier image dans le dossier du script
Pour importer l’image, il faut que Processing puisse disposer du fichier "physique" de l’image. Pour cela, on placera l’image dans le dossier où se trouve le script.
Le plus facile pour ça est de glisser-déposer l’image dans la fenêtre du script :
Si tout se passe bien, le message "Un fichier a été ajouté au Sketch" s’affiche sous le script. L’image a en fait té copiée dans le dossier où se trouve le script, dans un dossier "data" qui a été créé pour ça. Vous pouvez le voir en allant dans le menu Sketch/afficher le dossier (ou en tapant Ctrl-k sur pc et pomme-k sur mac).
Attention, cette image sera affichée à sa taille native dans le sketch : un pixel de l’image occupera un pixel de l’animation. Si vous importez une image de 3000 pixels de large par exemple, vous en pourrez voir toute l’image dans la fenêtre de l’animation. Ajustez l’image à la taille de votre fenêtre !
2) Déclarer une variable image
Dans le script, il faut maintenant créé une variable, qui contiendra l’image. Cette variable est de type PImage.
// importer une image
PImage monimage;
void setup(){
size(800,600);
}
void draw(){
}3) Chargez l’image dans la variable
Il faut maintenant que Processing charge le contenu de l’image dans la variable.
Pour cela on emploie la fonction loadImage(). Remarquer le I majuscule sur Image. Le nom entre guillemets DOIT être le nom exact du fichier image. Attention si vous êtes sur PC, Windows cache parfois l’extension.
// importer une image
PImage monimage;
void setup(){
size(800,600);
monimage=loadImage("Funeral for the snail dad killed.jpg");
}
void draw(){
}Une fois cette ligne de code placée, il n’y a toujours pas d’image affichée : elle est juste chargée en mémoire.
4) Afficher l’image
Pour afficher l’image dans le script, on emploie la fonction image(). Elle demande au moins trois paramètres :
– le nom de la variable image à afficher
– la coordonnée horizontale de l’endroit où l’afficher
– la coordonnée verticale de l’endroit où l’afficher
// importer une image
PImage monimage;
void setup(){
size(800,600);
monimage=loadImage("Funeral for the snail dad killed.jpg");
}
void draw(){
image(monimage,10,10);
}Cette fois l’image s’affiche. Remarquer que dans mon exemple, elle dépasse du cadre du script. On peut réduire la taille de l’image avec photoshop ou un autre logiciel de retouche.
Forcer la taille de l’image
Il est possible de donner 5 paramètres à la fonction image() :
– le nom de la variable image à afficher
– la coordonnée horizontale de l’endroit où l’afficher
– la coordonnée verticale de l’endroit où l’afficher
– la largeur en pixel de l’image à afficher
– la hauteur en pixel de l’image à afficher
image(monimage,10,10,230,200);L’image est possiblement déformée, puisque vous être libre d’écrire n’importe quel chiffre...
Connaître la taille de l’image
Il est possible de demander à Processing la taille de l’image.
Si la variable image porte le nom de monimage, comme dans mon exemple, la largeur sera accessible via la propriété monimage.width et la hauteur via monimage.height.
image(monimage,10,10,monimage.width/2,monimage.height/2);Dans cet exemple, on divise la taille d’affichage de l’image par 2.