Processing

Les images

Ce que nous appelons « image » dans Processing n'est en fait rien d'autre qu'une collection de pixels, rassemblés à l'intérieur d'un rectangle. Pour dessiner une image à l'écran, nous devons donner une couleur à chacun des pixels d'un rectangle, puis donner la position en {x,y} où nous voulons dessiner cette collection de pixels. Il est aussi possible de modifier la taille {largeur,hauteur} de notre image, même si ces dimensions ne correspondent pas à la taille originelle de l'image.

Trouver une image

Pour dessiner une image dans Processing, il faut commencer par trouver une image et l'importer dans notre sketch. Vous pouvez prendre une photo à l'aide de votre appareil numérique ou directement depuis votre webcam ou bien encore effectuer une recherche d'images se trouvant déjà dans le disque dur de votre ordinateur. Pour cet exercice, l'origine de l'image importe peu. Par contre, nous recommandons de commencer avec une image relativement petite, par exemple d'une largeur de 400 x 300 pixels.

Ici nous allons commencer avec une image légèrement réduite de l'île des peupliers à Ermenonville, trouvée sur le site Commons de Wikimedia (base de données d'images et de médias appartenant au domaine public ou sous licence libre) à l'adresse suivante : http://fr.wikipedia.org/wiki/Fichier:Erm6.JPG

Formats d'image

Trois formats de fichier d'image sont acceptés dans Processing : PNG, JPEG, ou GIF. Ceux qui ont de l'expérience dans la conception de sites web devraient reconnaître ces trois formats, car ce sont les plus répandus sur la Toile. Chaque format utilise ses propres méthodes de compression de l'image (réduction de la taille mémoire de l'image occupée sur l'ordinateur), lui donnant à la fois des avantages et des désavantages et que nous pouvons résumer de la manière suivante :

JPEG est souvent utilisé pour compresser des images de type photographique. Ce format ne permet pas d'avoir des zones transparentes.
GIF est historiquement utilisé pour l'illustration de boutons et autres éléments graphiques de l'espace de travail d'un programme. Sur les sites internet, ce format est utilisé pour les logos et de manière générale pour les dessins réalisés par ordinateur (notamment ceux qui comportent des aplats de couleurs). Ce format peut contenir des zones transparentes binaires (soit opaques soit transparentes, sans possibilité d'opacité intermédiaire). Il existe des images gif animées, mais Processing ignorera cet aspect.
PNG est de plus en plus utilisé pour les deux usages (photos + dessins) et peut contenir des zones transparentes non binaires, offrant des niveaux d'opacité (opaque, semi-opaque, totalement transparent).

Glisser-déposer

Nous allons maintenant importer le fichier de cette image dans l'environnement Processing. Pour bien réussir cette étape, nous vous recommandons de sauvegarder d'abord votre sketch, de préférence dans le dossier processing qui devrait se trouver par défaut dans le dossier Documents ou Mes documents de votre ordinateur.

Localisez maintenant votre fichier d'image, et glissez-le directement sur la fenêtre Processing :

Lorsque nous glissons les fichiers de cette manière, Processing nous indique dans la bande grisée de la console qu'il a ajouté ce fichier « dans le sketch ». En réalité, Processing a simplement copié cette image dans un dossier nommé data, qui devrait maintenant se trouver à côté de votre programme.pde que vous venez de sauvegarder.

C'est dans ce dossier data que nous devons placer en réalité toutes les images dont nous voulons nous servir dans notre sketch. C'est dans cet emplacement que doivent également être rangés les autres fichiers médias comme les polices ou les sons.

Pour accéder rapidement à ce dossier, afin par exemple d'y placer de nouveaux fichiers d'images, il suffit de sélectionner, dans le menu Sketch, l'option Affcher le dossier. Cette option est également accessible via le raccourci Ctrl-k sur Windows et GNU/Linux ou Cmd-k sur Mac :

Importer une image

Maintenant que nous avons placé une image dans notre dossier data, nous pouvons désormais nous en servir dans notre programme.

size(500,400);

PImage ile;
ile = loadImage("ile.jpg");

image(ile,50,10);

D'abord nous avons donné à notre espace de dessin une taille plus grande que notre image, juste pour mieux comprendre comment celle-ci peut être positionnée dans le sketch final.

Il y a trois étapes pour afficher une image dans Processing :

Créer une variable qui contiendra les données (en pixels) de notre image.
Importer les pixels d'un fichier dans notre variable.
Dessiner les pixels de cette variable dans notre espace de dessin.

Tout d'abord, nous devons créer une variable Processing, avant d'importer notre fichier dedans. Mais avant tout, à quoi sert une variable ? Et bien dans ce cas précis, il s'agit d'un nom interne à notre programme qui contient l'ensemble des pixels de notre fichier ile.jpg. À chaque fois que nous écrirons par la suite le mot « ile » dans notre programme, Processing comprendra qu'il s'agit de la suite de valeurs en pixels qui composent notre image. C'est justement le rôle de cette action loadImage("nomdefichier") d'aller chercher ces pixels dans le fichier et les importer dans notre variable nommé « ile ».

Vous avez peut-être également noté un mot étrange au tout début du code ci-dessus, le mot PImage. Celui-ci indique à Processing le genre de la variable et lui permettra de consacrer assez de mémoire dans votre ordinateur pour contenir l'ensemble des données de ce genre. Dans le cas de n'importe quelle variable, la syntaxe à utiliser est {type de la variable} {nom de la variable} = {les valeurs de la variable}.

Par exemple, si par un tour de force il était possible d'importer un petit chien tout mignon dans Processing, il suffirait d'écrire PetitChiot milou = loadDog("milou.dog"); On écrit d'abord le type de la chose, le nom de la chose, et enfin on lui donne sa valeur.

Ici, cette valeur est donnée par la fonction loadImage() qui va aller chercher les pixels de l'image dans le fichier et les importera dans notre variable nommée ile.

Pour plus d'informations sur les variables et les différents types de variables, reportez-vous au chapitre dédié à ce sujet.

Enfin, une fois notre variable remplie, nous la dessinons à une position {x,y} dans notre sketch. Si nous voulons dessiner notre image à sa taille originelle, nous utilisons la version courte de l'instruction image qui nécessite uniquement trois paramètres : {PImage}, {x}, {y}.

image(ile,50,10)

Importer une image web

Nous pouvons également importer des images directement depuis Internet, en indiquant l'adresse web de l'image à la place du nom de fichier.

size(400,400);

PImage webcam;
webcam = loadImage("http://www.gutenberg.org/files/3913/3913-h/images/rousseau.jpg");
image(webcam,10,20,width,height);

Si notre programme n'est pas animé, comme c'est le cas ici, il y aura juste une longue pause lorsque l'image se charge dans Processing.

Par contre, faites bien attention à placer ce type d'instructions au début du sketch sinon vous risquez de ralentir fortement le fonctionnement des autres parties du programme, celles-ci devant attendre le téléchargement complet de vos images depuis Internet avant de s'exécuter. Dans des cas très spécifiques, si vous avez besoin d'importer des images web en plein milieu de votre sketch, sachez qu'il existe des techniques appropriées dénommées « fils d'exécution ». Ces techniques séparent le chargement de fichiers médias depuis internet du reste des fonctions du programme. Il s'agit malheureusement d'un sujet trop avancé pour ce manuel. Pour davantage d'informations sur les fils d’exécution, reportez-vous au forum du site de Processing en faisant une recherche sur le mot « thread ».

Changer de taille

En ajoutant deux paramètres, nous pouvons changer la taille de l'image. Cette taille peut être plus petite ou plus grande que l'image d'origine, et à priori il n'y a pas vraiment de limite. Par contre, au-delà de la taille d'origine de l'image, Processing sera obligé d'inventer des pixels en doublant les originaux, ce qui donnera un effet pixelisé. Cet effet n'est pas forcément indésirable, à vous de voir.

Pour changer la taille de l'image, il suffit de rajouter deux paramètres à votre image, {largeur, hauteur}, ce qui nous amène à 5 paramètres : {variableImage, x, y, largeur,hauteur}.

size(500,250);

PImage ile;
ile = loadImage("ile.jpg");

image(ile,10,10,20,15);
image(ile,20,20,50,30);
image(ile,45,45,100,75);
image(ile,95,95,1000,750);

Notez que nous avons importé qu'une seule fois l'image dans notre variable ile et que celle-ci peut être dorénavant utilisée pour le restant de notre programme. Notez également que nous avons respecté les proportions {x,y} de notre image dans le changement de la taille, mais que celles-ci auraient pu prendre n'importe quelle valeur, ce qui reviendrait à étirer l'image sur un de ces deux axes.

Rendre transparent l'arrière-plan d'une image

Souvent nous avons besoin d'importer des images qui ne sont ni carrées, ni rectangulaires, comme dans le cas d'un petit jeu vidéo utilisant des silhouettes de personnages en deux dimensions : nous ne voulons pas voir en permanence un carré blanc autour du profil de notre héros. Malheureusement, à ce jour, les images à base de pixels doivent être importées dans un format carré.

Pour lever cette contrainte, certains formats de fichiers font appel à une couche alpha pour gérer la transparence de certaines zones de l'image et ainsi laisser apparaître les éléments qui sont situés derrière elles (un fond coloré ou illustré par exemple). Cette couche se superpose aux couches rouge, vert, bleu utilisées pour composer l'image et indique l'intensité de la transparence pour chaque pixel, avec même la possibilité de pixels semi-transparents dans le cas du format PNG.

Si vous voulez sauvegarder votre image avec une couche alpha, vous avez trois possibilités qu'il faut choisir lors de l'exportation de votre image dans votre logiciel de traitement d'image préféré :

Fenêtre PNG-24

Chaque logiciel exportera les images à sa manière. Sachez juste qu'il existe une différence par exemple entre GIF, PNG-8, et PNG-24, notamment sur la façon dont chaque format va traiter cette couche alpha. Le plus sûr des trois, et qui vous donnera plus d'options, c'est le PNG-24.

Voici une image du philosophe Jean-Jacques Rousseau avec un fond transparent.

rousseau_bl

Quel que soit le fond sur lequel elle sera placée, cette image s'y intégrera parfaitement parce qu'elle contient justement une couche alpha décrivant les parties transparentes et non transparentes du carré de pixels qui la composent. Notez que les pixels autour de Rousseau sont transparents, alors que son front et son cou sont opaques.

N'hésitez pas à copier cette image au format png sur votre ordinateur depuis la version en ligne de ce manuel : http://fr.flossmanuals.net/processing/, chapitre Les images (conçue à partir d'une illustration mise à disposition sur le site Commons de Wikimedia, cette image est libre de droits).

Dans notre programme Processing, nous allons pouvoir constater que les pixels situés autour du personnage sont effectivement transparents en superposant l'image de Rousseau (au format png) avec celle du paysage précédemment utilisé (au format jpg) :

size(400,300);

PImage ile;
ile = loadImage("ile.jpg");

PImage rousseau;
rousseau = loadImage("rousseau.png");

image(ile,0,0);
image(rousseau,20,20);

Colorier les images

On peut également colorier les images. Autrement dit, on peut changer la couleur des pixels, soit dans leur ensemble, soit individuellement. La plus simple de ces méthodes concerne le coloriage de l'ensemble des pixels. Cette méthode de coloriage ressemble à peu près au coloriage de rectangles, mais nécessite une nouvelle instruction, tint(), pour le distinguer du coloriage direct des pixels à l'intérieur du rectangle. Dans le cas de tint(), Processing va modifier la couleur de chaque pixel au moment où celui-ci est dessiné dans l'espace de dessin.

size(500,130);

PImage ile;
ile = loadImage("ile.jpg");

tint(255,0,0);
image(ile, 10,10, 110,110);

tint(255,255,0);
image(ile, 130,10, 110,110);

tint(255,255,255,127);
image(ile, 250,10, 110,110);

tint(0,0,255,127);
image(ile, 320,10, 110,110);

Tout comme les instructions fill() et stroke(), l'instruction tint() peut prendre une, deux, trois, ou quatre valeurs, selon ce que nous voulons faire. En indiquant trois paramètres, par exemple, nous pouvons augmenter/diminuer l'intensité de la couche rouge, vert, ou bleu de notre image. En indiquant quatre paramètres, nous pouvons augmenter/diminuer, en plus de ces trois couleurs, la valeur de transparence/opacité de l'image.