![\"\"](\"\/dernier\/files\/2008\/12\/add_file.png\")
<\/p>\nApr\u00e8s les variables, les boucles et les objets, d\u00e9compressons un peu avec les images.
\nProcessing est capable de charger un fichier graphique en m\u00e9moire et de le manipuler de diverses fa\u00e7ons notamment en l’affichant, en obtenant la valeur color\u00e9e d’un point pr\u00e9cis ou en dessinant sur cette image. Les principes sont simples mais il y a une \u00e9tape \u00e0 ne pas n\u00e9gliger, celle du chargement du fichier graphique dans le dossier de donn\u00e9es externes de l’animation. Lorsque l’on enregistre une animation, celle-ci se place dans un dossier qui porte le m\u00eame nom. Dans ce dossier se trouve parfois un sous-dossier nomm\u00e9 \u00ab\u00a0data\u00a0\u00bb o\u00f9 seront stock\u00e9es toutes les ressources que l’utilisateur souhaite utiliser : images, sons, mais aussi typographies \u00ab\u00a0rast\u00e9ris\u00e9es\u00a0\u00bb (sujet qui ne nous occupera pas tout de suite). Deux m\u00e9thodes permettent de manipuler un fichier graphique.
\nSoit on cr\u00e9e le sous-dossier \u00ab\u00a0data\u00a0\u00bb pour y placer le fichier en question, soit, plus facile, en passant par la commande Sketch>Add File. Lorsque l’on s\u00e9lectionne un fichier avec cette seconde m\u00e9thode, Processing cr\u00e9e une copie du fichier \u00e0 ajouter et place celle-ci dans le dossier \u00ab\u00a0data\u00a0\u00bb de l’animation, dossier que le programme cr\u00e9e s’il n’existe pas.<\/p>\n
<\/p>\n
Pour que tout se d\u00e9roule bien, il faut respecter quelques r\u00e8gles tr\u00e8s simples.<\/p>\n
Lorsque l’on manipule une image en m\u00e9moire, Processing la stocke sous la forme d’une variable de type PImage<\/strong>. (qui signifie Processing Image<\/em>). Voici un exemple typique de d\u00e9claration et de chargement d’une image :<\/p>\n La premi\u00e8re partie,\u00a0 Faisons un premier essai de chargement et d’affichage d’une image. Mon image se nomme \u00ab\u00a0image_quend.jpg\u00a0\u00bb (pour l’anecdote, il s’agit d’une photographie de Quend-Plage en Baie-de-Somme). Je vais tout d’abord charger l’image en m\u00e9moire, r\u00e9gler la taille de la fen\u00eatre d’affichage sur la taille de l’image, puis afficher cette image, ce qui me donnera pr\u00e9cis\u00e9ment ce r\u00e9sultat :<\/p>\n La derni\u00e8re commande, image(), sert \u00e0 afficher une image \u00e0 un endroit pr\u00e9cis de la sc\u00e8ne selon cette syntaxe : Et voici le r\u00e9sultat :<\/p>\n Ici le rapport entre hauteur et hauteur reste homoth\u00e9tique, mais il peut ne pas l’\u00eatre.<\/p>\n La manipulation d’images sous Processing permet aussi d’obtenir la valeur color\u00e9e d’un pixel d’une image. Pour ce faire, on utilise la commande Dans ce cas pr\u00e9cis, la couleur obtenue est stock\u00e9e dans une variable de type color nomm\u00e9e Passons \u00e0 un cas pratique. Dans le programme qui suit, nous allons v\u00e9rifier la couleur d’un point pr\u00e9cis de l’image tous les dix pixels. Puis nous allons v\u00e9rifier la luminosit\u00e9 de ce point (sur une \u00e9chelle de 0 \u00e0 255) et transformer celle-ci en une valeur allant de 0 \u00e0 10 par l’utilisation de la fameuse r\u00e8gle de trois2<\/a><\/sup> . Voil\u00e0 l’image qui r\u00e9sulte de ces calculs :<\/p>\n On peut imaginer de nombreuses manipulations avec la commande Parmi les autres commandes \u00e0 conna\u00eetre, mentionnons copy() et blend(). o\u00f9 Sa syntaxe et sont fonctionnement sont identiques \u00e0 ceux de la commande pr\u00e9c\u00e9dente si ce n’est qu’un dernier param\u00e8tre est ajout\u00e9, le \u00ab\u00a0mode\u00a0\u00bb. Ce mode est un mode de superposition classique (identique \u00e0 ce que propose Photoshop ou \u00e0 ce que l’on appelle les \u00ab\u00a0encres\u00a0\u00bb dans Director par exemple) qui peut \u00eatre Cette nouvelle image a \u00e9t\u00e9 obtenue avec le programme suivant :<\/p>\n Tout d’abord, le fond de la fen\u00eatre est \u00ab\u00a0peint\u00a0\u00bb en rouge ( Il existe un moyen alternatif extr\u00eamement performant pour manipuler les images en agissant directement sur la liste des pixels de l’image. Pour cela on utilise les fonctions Pour finir, signalons que l’on peut aussi charger et afficher dans Processing des images vectorielles3<\/a><\/sup> au format SVG (facile \u00e0 cr\u00e9er avec Illustrator par exemple) avec les commande Apr\u00e8s les variables, les boucles et les objets, d\u00e9compressons un peu avec les images. Processing est capable de charger un fichier graphique en m\u00e9moire et de le manipuler de diverses fa\u00e7ons notamment en l’affichant, en obtenant la valeur color\u00e9e d’un point pr\u00e9cis ou en dessinant sur cette image. Les principes sont simples mais il y […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-2890","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2890"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2890\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\nPImage monImage = loadImage(\"paysage.png\");<\/pre>\n<\/div>\n
PImage monImage<\/code> sert \u00e0 d\u00e9clarer une donn\u00e9e PImage<\/code> nomm\u00e9e monImage<\/code>. Dans le m\u00eame mouvement, on remplit cette variable monImage<\/code> avec la commande loadImage()<\/code>. En \u00e9crivant loadImage(<\/code>un nom de fichier<\/em>)<\/code>, on demande \u00e0 Processing de se rendre dans le sous-dossier \u00ab\u00a0data\u00a0\u00bb pour y chercher le fichier en question et pour le charger en m\u00e9moire. Nous pouvons ensuite utiliser cette image \u00e0 notre guise et acc\u00e9der \u00e0 ses propri\u00e9t\u00e9s1<\/a><\/sup> . Par exemple en \u00e9crivant print(monImage.width);<\/code>, nous obtiendrons la largeur de l’image (sous r\u00e9serve que celle-ci ait effectivement \u00e9t\u00e9 charg\u00e9e). Le fait de conna\u00eetre la largeur et la hauteur d’une image peut nous permettre, par exemple, de caler la taille de la fen\u00eatre de notre application sur le format de l’image, comme ceci : size(monImage.width, monImage.height);<\/code>.<\/p>\n![\"\"](\"\/dernier\/files\/2008\/12\/quend1.jpg\")
<\/p>\n\n\/\/ d\u00e9claration de l'image nomm\u00e9e img<\/span>\nPImage img;\n\nvoid setup(){\n \/\/ chargement du fichier externe image_quend.jpg dans img<\/span>\n\u00a0\u00a0img = loadImage(\"image_quend.jpg\");\n\/\/ r\u00e9glage de la taille de la fen\u00eatre sur les dimensions de img<\/span>\n\u00a0\u00a0size(img.width, img.height);\n\/\/ affichage de l'image img \u00e0 partir du point (0,0).<\/span>\n\u00a0\u00a0image(img,0,0);\n}<\/pre>\n<\/div>\nimage( nom_de_l'image, x, y);<\/strong><\/code> ou\u00a0image( nom_de_l'image, x, y, largeur, hauteur);<\/strong><\/code>, o\u00f9\u00a0nom_de_l'image<\/code> est le nom de la variable de type PImage<\/code> dans laquelle a \u00e9t\u00e9 charg\u00e9e l’image ; x<\/code> est l’abscisse du point sup\u00e9rieur gauche de l’image ; y<\/code> est son ordonn\u00e9e ; les valeurs facultatives largeur<\/code> et hauteur<\/code> permettent de r\u00e9gler la largeur et la hauteur \u00e0 laquelle l’image est reproduite. Dans la variante qui suit, l’image est copi\u00e9e quatre fois sur la sc\u00e8ne \u00e0 la moiti\u00e9 de sa largeur (img.width\/2<\/code>)\u00a0et de sa hauteur (img.height\/2<\/code>) et \u00e0 quatre coordonn\u00e9es diff\u00e9rentes : (0,0), (la moiti\u00e9 de la largeur, 0), (la moiti\u00e9 de la largeur, la moiti\u00e9 de la hauteur), (0, la poiti\u00e9 de la hauteur).<\/p>\n\nPImage img;\nvoid setup(){\n img = loadImage(\"image_quend.jpg\");\n size(img.width, img.height);\n image(img,0,0,img.width\/2,img.height\/2);\n image(img,img.width\/2,0,img.width\/2,img.height\/2);\n image(img,0,img.height\/2,img.width\/2,img.height\/2);\n image(img,img.width\/2,img.height\/2,img.width\/2,img.height\/2);\n}<\/pre>\n<\/div>\n![\"\"](\"\/dernier\/files\/2008\/12\/quend2.jpg\")
<\/p>\n![\"\"](\"\/dernier\/files\/2008\/12\/quend3.jpg\")
Dans l’exemple qui suit, la fen\u00eatre fait 100×100 pixels et l’image est d\u00e9form\u00e9e pour avoir une largeur de 100 pixels et une hauteur de 100 pixels :<\/p>\n\nPImage img;\n\nvoid setup(){\n img = loadImage(\"image_quend.jpg\");\n size(100,100);\n image(img,0,0,100,100);\n}<\/pre>\n<\/div>\nget(x,y);<\/strong><\/code>, o\u00f9 x<\/code> et y<\/code> sont l’abscisse et l’ordonn\u00e9e du point dont on veut conna\u00eetre la valeur. Par exemple pour conna\u00eetre la valeur color\u00e9e du point (30,40) de l’image img<\/code>, il me suffit d’\u00e9crire :<\/p>\n\ncolor c = img.get(30,40);<\/pre>\n<\/div>\n
c<\/code>. Je peux ensuite utiliser cette couleur comme nous l’avons vu dans de pr\u00e9c\u00e9dents chapitres, par exemple avec background(c);<\/code> ou fill(c);<\/code> ou encore stroke(c);<\/code>. Je peux aussi d\u00e9composer la couleur en extrayant sa valeur dans les rouges, dans les verts ou dans les bleux (respectivement : red(c)<\/code>, green(c)<\/code> et blue(c)<\/code>) ou encore en v\u00e9rifiant sa luminosit\u00e9 (brightness(c)<\/code>), etc.
\nLa fonction get(x,y)<\/code> est donc sym\u00e9trique \u00e0 point(x,y)<\/code>, \u00e0 cette diff\u00e9rence pr\u00e8s qu’avec la fonction get()<\/code>, les coordonn\u00e9es du point doivent imp\u00e9rativement \u00eatre des nombres de type entier (sans virgule). On peut donc \u00e9crire get(10,10)<\/code> mais pas get(10.5,10.9)<\/code>.
\nSi l’on ne sp\u00e9cifie pas l’image que l’on veut manipuler (par exemple si l’on \u00e9crit get(10,10)<\/code> et non monImage.get(10,10)<\/code>, c’est toute la fen\u00eatre de l’application qui est prise en compte.<\/p>\n
\nEnsuite, un rectangle est dessin\u00e9 sur la sc\u00e8ne avec la couleur du point test\u00e9, \u00e0 l’emplacement de ce point et avec une taille correspondant \u00e0 la valeur de 1 \u00e0 10 qui a \u00e9t\u00e9 calcul\u00e9e. La boucle it\u00e9rative (for(int a=0;a<…) sert \u00e0 parcourir successivement les points de l’image.<\/p>\n\nPImage monImage;\nnoStroke();smooth();\nbackground(0);\nmonImage = loadImage(\"image_quend.jpg\");\nsize(monImage.width,monImage.height);\nfor(int a=0;a<width;a+=10){\n for(int b=0;b<height;b+=10){\n color c=monImage.get(a,b);\n fill(c);\n float t=( brightness(c)\/255.0)*10;\n rect(a,b,t,t);\n }\n}<\/pre>\n<\/div>\n![\"\"](\"\/dernier\/files\/2008\/12\/quend4.jpg\")
<\/p>\nget()<\/code> et les commandes de dessin (point()<\/code>, rect()<\/code>, ellipse()<\/code>, etc.). On peut en fait facilement cr\u00e9er des filtres de traitement d’image comme le flou, le \u00ab\u00a0virage\u00a0\u00bb vers une couleur, l’ajout de bruit, etc.<\/p>\n
\nCes deux commandes sont en apparence assez similaires \u00e0 la commande image() que nous avons vu au d\u00e9but de l’article mais elles permettent d’extraire une partie pr\u00e9cise d’une image et de la copier \u00e0 des coordonn\u00e9es et dans une taille pr\u00e9cise de l’image. La syntaxe de copy()<\/code> est la suivante :<\/p>\ncopy(monImage, x, y, largeur, hauteur, dx, dy, largeur_destination, hauteur_destination);<\/strong><\/code><\/p>\nx<\/code> et y<\/code> sont les coordonn\u00e9es du point sup\u00e9rieur gauche de la portion d’image que l’on veut copier. Les dimensions de cette portion d’image sont largeur<\/code> et hauteur<\/code>. dx<\/code> et dy<\/code> sont les coordonn\u00e9es auxquelles va \u00eatre copi\u00e9e l’image et\u00a0largeur_destination<\/code> et\u00a0hauteur_destination<\/code> sont la largeur et la hauteur du rectangle dans lequel va \u00eatre copi\u00e9e la portion d’image. Si le param\u00e8tre monImage<\/code> est omis, la commande s’appliquera \u00e0 la fen\u00eatre de Processing.
\nQuand \u00e0 la commande blend()<\/code>, elle s’utilise comme suit :<\/p>\nblend(monImage, x, y, largeur, hauteur, \u00a0dx, dy, largeur_destination, hauteur_destination, MODE);<\/strong><\/code><\/p>\nADD<\/code>, SUBTRACT<\/code>, DARKEST<\/code>, LIGHTEST<\/code>,\u00a0BLEND<\/code>,\u00a0DIFFERENCE<\/code>, EXCLUSION<\/code>,\u00a0MULTIPLY<\/code>,\u00a0SCREEN<\/code>, OVERLAY<\/code>,\u00a0HARD_LIGHT<\/code>, \u00a0SOFT_LIGHT<\/code>, DODGE<\/code> ou\u00a0BURN<\/code> (toujours \u00e9crit de cette mani\u00e8re, en majuscules).<\/p>\n![\"\"](\"\/dernier\/files\/2008\/12\/quend5.jpg\")
<\/p>\n\nPImage monImage;\nsize(524,100); background(255,0,0);\nmonImage = loadImage(\"image_quend.jpg\");\nblend(monImage, 0, 0, 100, 100, 20, 10, 80, 80, BLEND);\nblend(monImage, 0, 0, 100, 100, 120, 10, 80, 80, ADD);\nblend(monImage, 0, 0, 100, 100, 220, 10, 80, 80, SUBTRACT);\nblend(monImage, 0, 0, 100, 100, 320, 10, 80, 80, LIGHTEST);\nblend(monImage, 0, 0, 100, 100, 420, 10, 80, 80, DARKEST);<\/pre>\n<\/div>\n
background(255,0,0)<\/code>) puis les 100×100 premiers pixels de notre image de d\u00e9part sont copi\u00e9s et r\u00e9tr\u00e9cis \u00e0 la taille de 80×80 pixels. Ils sont appliqu\u00e9s sur notre fond rouge avec plusieurs modes : BLEND<\/code>, ADD<\/code>, SUBTRACT<\/code>, LIGHTEST<\/code> et DARKEST<\/code>.<\/p>\nloadPixels()<\/code>, updatePixels()<\/code> et le tableau d’entiers pixels[]<\/code>. Nous ne verrons pas cela aujourd’hui.<\/p>\nloadShape()<\/code> et shape()<\/code>. Nous ne verrons pas cela aujourd’hui non plus.<\/p>\nloadImage()<\/code> par\u00a0requestImage()<\/code>.\u00a0 [↩<\/a>]<\/span><\/li>