{"id":1952,"date":"2021-06-17T22:01:16","date_gmt":"2021-06-17T21:01:16","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=1952"},"modified":"2021-06-17T22:07:29","modified_gmt":"2021-06-17T21:07:29","slug":"photomatonsaique-des-photos-en-mosaique","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/17\/photomatonsaique-des-photos-en-mosaique\/","title":{"rendered":"Photomatonsa\u00efque : des photos en mosa\u00efque"},"content":{"rendered":"<p dir=\"ltr\">Bonjour \u00e0 tous !<\/p>\n<p dir=\"ltr\">Nous sommes deux \u00e9tudiants en deuxi\u00e8me ann\u00e9e du cycle pr\u00e9paratoire de l\u2019\u00e9cole d\u2019ing\u00e9nieur Polytech Angers.<\/p>\n<p dir=\"ltr\">Dans cet article, nous allons vous parler de notre projet de conception sur lequel nous avons travaill\u00e9 tout au long du semestre. L\u2019objectif de celui-ci est de pouvoir r\u00e9investir les notions que nous avons \u00e9tudi\u00e9es en cours lors de la r\u00e9alisation d\u2019un projet concret.<\/p>\n<p dir=\"ltr\"><strong>Pr\u00e9sentation du projet<\/strong><\/p>\n<p dir=\"ltr\">Le projet que nous avons choisi s\u2019appelle \u201cPhotomatonsa\u00efque\u201d. Il s\u2019inscrit dans le cadre du programme interdisciplinaire <em>Not a Number<\/em> qui lie la cr\u00e9ation artistique avec la technologie du num\u00e9rique.<\/p>\n<p dir=\"ltr\">L\u2019id\u00e9e \u00e9tait donc de r\u00e9aliser un photomaton qui serait pr\u00e9sent au mus\u00e9e d\u2019Angers. Cependant, celui-ci est un peu particulier car nous avons programm\u00e9, \u00e0 l\u2019aide du langage de programmation processing, un algorithme permettant de transformer une photo en une mosa\u00efque, celle-ci recr\u00e9ant l\u2019image gr\u00e2ce aux tableaux du mus\u00e9e d\u2019Angers comme le montrent les exemples suivants.<\/p>\n<div id=\"attachment_2386\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Image-exemple.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2386\" class=\"size-medium wp-image-2386\" alt=\"Images obtenues apr\u00e8s traitement\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Image-exemple-300x205.png\" width=\"300\" height=\"205\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Image-exemple-300x205.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Image-exemple-437x300.png 437w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Image-exemple.png 839w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-2386\" class=\"wp-caption-text\">Images obtenues apr\u00e8s traitement<\/p><\/div>\n<p dir=\"ltr\">En effet, il est ensuite facilement possible d\u2019int\u00e9grer ce programme dans une Raspberry Pi, nano-ordinateur monocarte, en y connectant une cam\u00e9ra et un \u00e9cran afin de cr\u00e9er un v\u00e9ritable photomaton qui pourrait \u00eatre expos\u00e9 au mus\u00e9e d\u2019Angers.<\/p>\n<p dir=\"ltr\">Nous avons choisi ce projet pour son originalit\u00e9. Nous avons beaucoup aim\u00e9 le fait qu\u2019il joignait une partie de programmation tr\u00e8s compl\u00e8te avec son application directe, tr\u00e8s visuelle.<\/p>\n<p dir=\"ltr\"><strong>Explication du programme<\/strong><\/p>\n<p dir=\"ltr\">Nous avons successivement r\u00e9alis\u00e9 les \u00e9tapes suivantes :<\/p>\n<p dir=\"ltr\">\u00a0 \u00a0 \u00a0 \u00a0 1. Tout d\u2019abord nous avons int\u00e9gr\u00e9 dans des tableaux les codes RGB (qui d\u00e9terminent la couleur d&#8217;un pixel) de chaque image de la banque d\u2019image, qui correspond aux tableaux du mus\u00e9e et qui va remplacer les pixels de l\u2019image principale.<\/p>\n<p dir=\"ltr\">\u00a0 \u00a0 \u00a0 \u00a0 2. Gr\u00e2ce \u00e0 la cam\u00e9ra de l\u2019appareil, nous pouvons prendre une photo. C\u2019est \u00e0 partir de ce clich\u00e9 que nous allons travailler et c\u2019est donc cette photo qui sera transform\u00e9e en mosa\u00efque.<\/p>\n<p dir=\"ltr\">\u00a0 \u00a0 \u00a0 \u00a0 3. Ensuite, nous rempla\u00e7ons chaque pixel de l\u2019image qui vient d\u2019\u00eatre prise par sa couleur moyenne afin de pouvoir ensuite calculer la diff\u00e9rence entre cette moyenne et les codes RGB des tableaux remplis pr\u00e9c\u00e9demment.<\/p>\n<p dir=\"ltr\">\u00a0 \u00a0 \u00a0 \u00a0 4. La plus petite diff\u00e9rence calcul\u00e9e nous permet donc de s\u00e9lectionner la \u201cmeilleure image\u201d de la banque, c\u2019est-\u00e0-dire celle dont la couleur est la plus proche du pixel original. Ainsi, nous rempla\u00e7ons chaque pixel par son image correspondante.<\/p>\n<p dir=\"ltr\">\u00a0 \u00a0 \u00a0 \u00a0 5. Nous avons ensuite eu l\u2019id\u00e9e de cr\u00e9er une nouvelle photomosa\u00efque en utilisant une fonction de processing appel\u00e9e brightness(). Cette nouvelle m\u00e9thode joue avec le crit\u00e8re de luminosit\u00e9, ce qui nous donne un r\u00e9sultat diff\u00e9rent du pr\u00e9c\u00e9dent.<\/p>\n<p dir=\"ltr\">\u00a0 \u00a0 \u00a0 \u00a0 6. Pour que ce programme soit facile \u00e0 utiliser par tous, nous avons cr\u00e9\u00e9 une interface graphique intuitive o\u00f9 nous avons la possibilit\u00e9 de prendre la photo, de la reprendre si elle ne nous convient pas, mais \u00e9galement d\u2019afficher les deux photomosa\u00efques cr\u00e9\u00e9es et de les poster sur Twitter.<\/p>\n<p dir=\"ltr\">\u00a0 \u00a0 \u00a0 \u00a0 7. A l\u2019aide d\u2019une Raspberry Pi que l\u2019on connecte \u00e0 un \u00e9cran et une cam\u00e9ra, notre programme devient compl\u00e8tement ind\u00e9pendant et nous obtenons un r\u00e9el photomaton.<\/p>\n<div id=\"attachment_2280\" style=\"width: 236px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/raspberry-pi.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2280\" class=\"size-medium wp-image-2280\" alt=\"Montage final de la Raspberry Pi avec \u00e9cran et cam\u00e9ra\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/raspberry-pi-226x300.jpg\" width=\"226\" height=\"300\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/raspberry-pi-226x300.jpg 226w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/raspberry-pi.jpg 277w\" sizes=\"auto, (max-width: 226px) 100vw, 226px\" \/><\/a><p id=\"caption-attachment-2280\" class=\"wp-caption-text\">Montage final de la Raspberry Pi avec \u00e9cran et cam\u00e9ra<\/p><\/div>\n<p dir=\"ltr\" style=\"text-align: left\"><strong>Interface et r\u00e9sultat final<\/strong><\/p>\n<p dir=\"ltr\" style=\"text-align: left\">Avec les options et fonctionnalit\u00e9s con\u00e7ues, nous obtenons finalement l&#8217;interface ci-dessous.<\/p>\n<div id=\"attachment_2288\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Interface-daccueil.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2288\" class=\"size-medium wp-image-2288\" alt=\"Interface d'accueil\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Interface-daccueil-300x241.png\" width=\"300\" height=\"241\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Interface-daccueil-300x241.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Interface-daccueil-372x300.png 372w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Interface-daccueil.png 389w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-2288\" class=\"wp-caption-text\">Interface d&#8217;accueil<\/p><\/div>\n<p dir=\"ltr\" style=\"text-align: left\">Ensuite, lorsque la photo est prise, nous voyons appara\u00eetre un bouton qui nous permet de la valider.<\/p>\n<div id=\"attachment_2286\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Validation-de-la-photo.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2286\" class=\"size-medium wp-image-2286\" alt=\"Validation ou non de la photo\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Validation-de-la-photo-300x242.png\" width=\"300\" height=\"242\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Validation-de-la-photo-300x242.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Validation-de-la-photo-370x300.png 370w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Validation-de-la-photo.png 393w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-2286\" class=\"wp-caption-text\">Validation ou non de la photo<\/p><\/div>\n<p dir=\"ltr\" style=\"text-align: left\">Apr\u00e8s le temps de chargement, le r\u00e9sultat final appara\u00eet avec notre image photomosa\u00efque :<\/p>\n\n\t\t<style>\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 50%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-1952 gallery-columns-2 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/17\/photomatonsaique-des-photos-en-mosaique\/resultat-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/R\u00e9sultat-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-2285\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-2285'>\n\t\t\t\tR\u00e9sultat en couleur\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/17\/photomatonsaique-des-photos-en-mosaique\/resultat-2\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/R\u00e9sultat-2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-2284\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-2284'>\n\t\t\t\tR\u00e9sultat en se basant sur la luminosit\u00e9\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p dir=\"ltr\" style=\"text-align: left\"><em>La ressemblance devient impressionnante lorsque l\u2019on s\u2019\u00e9loigne ou lorsque l&#8217;on r\u00e9tr\u00e9cit la mosa\u00efque.<\/em><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><strong>P<\/strong><strong>robl\u00e8mes rencontr\u00e9s<\/strong><\/p>\n<p dir=\"ltr\">Durant ce projet, nous avons d\u2019abord fait face aux l\u00e9gers soucis de programmation ou d&#8217;algorithmie que les jeunes codeurs que nous sommes rencontrent. Par exemple, nous avons d\u2019abord eu des probl\u00e8mes de m\u00e9moire, trop faible pour traiter une banque d\u2019images importante de 6000 fichiers. De plus, des probl\u00e8mes techniques sont apparus, et parfois nos connaissances ne suffisent pas pour d\u00e9terminer nous-m\u00eames l&#8217;origine de ces probl\u00e8mes.<\/p>\n<p dir=\"ltr\"><strong>Conclusion\u00a0<\/strong><\/p>\n<p dir=\"ltr\">Lors du dernier semestre de notre cycle pr\u00e9paratoire, nous avons donc eu l\u2019opportunit\u00e9 de travailler int\u00e9gralement sur un projet, de sa conception \u00e0 son d\u00e9veloppement en passant par la r\u00e9solution de probl\u00e8mes \u00e0 sa mise en place. Cela correspond au travail d\u2019un ing\u00e9nieur en poste, cette exp\u00e9rience a donc \u00e9t\u00e9 tr\u00e8s formatrice pour nous.<\/p>\n<blockquote>\n<p dir=\"ltr\">Nous avons d\u00e9velopp\u00e9 beaucoup de connaissances mais \u00e9galement des comp\u00e9tences telles que le travail de groupe avec la r\u00e9partition des t\u00e2ches, mais surtout des capacit\u00e9s d\u2019autonomie.<\/p>\n<p dir=\"ltr\">A l\u2019aide de cette activit\u00e9 nous avons \u00e9galement \u00e9t\u00e9 confort\u00e9s dans notre choix de sp\u00e9cialisation, l\u2019informatique.<\/p>\n<p dir=\"ltr\">\n<\/blockquote>\n<p dir=\"ltr\">Nous souhaitons donc remercier notre professeur r\u00e9f\u00e9rent Mehdi Lhommeau qui nous a guid\u00e9s tout au long de ce projet.<\/p>\n<p dir=\"ltr\" style=\"text-align: center\"><em>Cet article touche \u00e0 sa fin, nous esp\u00e9rons vous avoir int\u00e9ress\u00e9s et que vous en avez appris davantage sur ce concept.<\/em><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bonjour \u00e0 tous ! Nous sommes deux \u00e9tudiants en deuxi\u00e8me ann\u00e9e du cycle pr\u00e9paratoire de l\u2019\u00e9cole d\u2019ing\u00e9nieur Polytech Angers. Dans cet article, nous allons vous parler de notre projet de conception sur lequel nous avons travaill\u00e9 tout au long du &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/17\/photomatonsaique-des-photos-en-mosaique\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":78437,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"gallery","meta":{"footnotes":""},"categories":[344],"tags":[398,431,434,195,71,433,432,430,243,80,215,27,167,485],"class_list":["post-1952","post","type-post","status-publish","format-gallery","hentry","category-344","tag-informatique","tag-mosaique","tag-musee","tag-peip2","tag-photo","tag-photomaton","tag-photomosaique","tag-pixel","tag-polytech-angers","tag-processing","tag-programmation","tag-projet","tag-raspberry-pi","tag-rgb","post_format-post-format-gallery"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/1952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/users\/78437"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=1952"}],"version-history":[{"count":1,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/1952\/revisions"}],"predecessor-version":[{"id":2394,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/1952\/revisions\/2394"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=1952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=1952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=1952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}