{"id":213,"date":"2026-02-21T14:56:46","date_gmt":"2026-02-21T19:56:46","guid":{"rendered":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/?p=213"},"modified":"2026-03-01T13:13:27","modified_gmt":"2026-03-01T18:13:27","slug":"mon-premier-projet-de-portfolio","status":"publish","type":"post","link":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/mon-premier-projet-de-portfolio\/","title":{"rendered":"Mon premier projet de portfolio"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p class=\"has-x-large-font-size\" style=\"font-style:normal;font-weight:700;text-decoration:underline\">\u00a0\u00bbPizza clock\u00a0\u00bb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-22.png\"><img loading=\"lazy\" decoding=\"async\" width=\"986\" height=\"760\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-22.png\" alt=\"\" class=\"wp-image-296\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-22.png 986w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-22-300x231.png 300w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-22-768x592.png 768w\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" \/><\/a><\/figure>\n\n\n\n<p>Pizza clock est un projet r\u00e9alis\u00e9 dans le cours de M\u00e9dia Int\u00e9ractifs.<br><br>Pour le devis de notre TP1, il fallait recr\u00e9er une horloge d&rsquo;une mani\u00e8re dynamique avec l&rsquo;aide du logiciel TouchDesigner. Il fallait que cette horloge soit dynamis\u00e9e avec la valeur de l&rsquo;heure, la minute et la seconde, et qu&rsquo;elle change d\u00e9pendamment s&rsquo;il fait jour ou nuit dehors.<br><br><\/p>\n\n\n\n<p class=\"has-x-large-font-size\" style=\"font-style:normal;font-weight:700;text-decoration:underline\">Id\u00e9ation<\/p>\n\n\n\n<p>Au d\u00e9but du projet, je comptais faire une horloge faite de 4 t\u00e9l\u00e9visions, une qui d\u00e9montre s\u2019il fait jour ou nuit dehors, et les 3 autres qui d\u00e9montrent le temps (une pour l\u2019heure, les minutes, et les secondes). Par contre, j\u2019ai r\u00e9alis\u00e9 que le visuel ne serait pas assez int\u00e9ressant et ne donnerait pas un r\u00e9sultat qui me rendrait heureux. Alors j\u2019ai pens\u00e9 \u00e0 ce que j\u2019aime\u2026 et, bien entendu, j\u2019ai trouv\u00e9 la pizza. Je me suis dit que je pouvais faire une base de pizza qui se remplit avec de la garniture qui d\u00e9montre chacun une unit\u00e9 de temps!<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-23.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-23-1024x458.png\" alt=\"\" class=\"wp-image-303\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-23-1024x458.png 1024w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-23-300x134.png 300w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-23-768x343.png 768w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-23.png 1516w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Id\u00e9ation id\u00e9e V1<\/figcaption><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-24.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"749\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-24-1024x749.png\" alt=\"\" class=\"wp-image-307\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-24-1024x749.png 1024w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-24-300x220.png 300w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-24-768x562.png 768w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-24.png 1029w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Id\u00e9ation de \u00a0\u00bbPizza Clock\u00a0\u00bb<\/figcaption><\/figure>\n\n\n\n<p><br><br><\/p>\n\n\n\n<p class=\"has-x-large-font-size\" style=\"font-style:normal;font-weight:700;text-decoration:underline\">Processus<\/p>\n\n\n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-24bd993d wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-f8582883 wp-block-group-is-layout-constrained\">\n<p class=\"has-large-font-size\"><strong>\u00c9tape 1: CHOIX DES GARNITURES<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-grid wp-container-core-group-is-layout-6b770208 wp-block-group-is-layout-grid\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center\">Premi\u00e8rement, il fallait que je trouve quelles garnitures je voudrais mettre sur ma pizza. Vu que le fromage est la garniture la plus abondante sur une pizza, j\u2019ai d\u00e9cid\u00e9 de l\u2019int\u00e9grer en tant que secondes. En tant que minute, j\u2019ai int\u00e9gr\u00e9 des pepp\u00e9ronis, et en tant qu\u2019heures, des champignons, car c\u2019est assez rare d\u2019en trouver. J\u2019ai ainsi cr\u00e9\u00e9 des assets de champignon, pepperoni, et fromage par moi-m\u00eame sur Adobe Illustrator. J\u2019ai ensuite import\u00e9 des PNG de ces assets sur mon plan de travail.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default wp-container-content-00e99b58\" style=\"margin-right:0;margin-left:0\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-18.png\"><img loading=\"lazy\" decoding=\"async\" width=\"763\" height=\"553\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-18.png\" alt=\"\" class=\"wp-image-226\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-18.png 763w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-18-300x217.png 300w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/a><\/figure>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-f8582883 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-right has-large-font-size\"><strong>\u00c9tape 2: APPLICATION DE L&rsquo;ID\u00c9E<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-grid wp-container-core-group-is-layout-29271053 wp-block-group-is-layout-grid\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"775\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image2.png\" alt=\"\" class=\"wp-image-235\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image2.png 1002w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image2-300x232.png 300w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image2-768x594.png 768w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/a><\/figure>\n\n\n\n<p>Deuxi\u00e8mement, il fallait que je trouve une mani\u00e8re de mettre ces garnitures sur ma pizza. Pour l\u2019expliquer d\u2019une mani\u00e8re simple, j\u2019ai cr\u00e9\u00e9 une boite Noise qui va faire bouger ma garniture des sens al\u00e9atoires qui respecteront le rayon de ma pizza, dont j\u2019ai chang\u00e9 l\u2019opacit\u00e9 \u00e0 0. \u00c0 chaque fois que la valeur associ\u00e9e \u00e0 la garniture change (on va dire l\u2019heure pour les champignons comme dans le screenshot en haut), je change l\u2019opacit\u00e9 \u00e0 1. Dans la frame o\u00f9 l\u2019opacit\u00e9 change de 0 \u00e0 1, un op\u00e9rateur gardera en t\u00eate la position du champignon lorsque son opacit\u00e9 a chang\u00e9 et va ensuite le mettre sur ma pizza (qui se trouve dans un composite), insinuant que le temps a chang\u00e9. J\u2019ai r\u00e9p\u00e9t\u00e9 le m\u00eame code pour toutes les garnitures, en changeant la valeur respective au temps.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-f8582883 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center has-large-font-size\"><strong>\u00c9tape 3: D\u00c9MONTRAGE DU TEMPS<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-grid wp-container-core-group-is-layout-eb970d49 wp-block-group-is-layout-grid\" style=\"min-height:0px;margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-19.png\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"452\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-19.png\" alt=\"\" class=\"wp-image-237\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-19.png 269w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-19-179x300.png 179w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-container-content-60ce118c\">Troisi\u00e8mement, j\u2019ai d\u00e9cid\u00e9 qu\u2019il serait pr\u00e9f\u00e9rable de montrer le temps, m\u00eame si cela ne se retrouve pas dans les consignes. J\u2019ai ainsi recherch\u00e9 des assets pr\u00e9faits sur Vecteezy afin de cr\u00e9er une tablette qui va ensuite d\u00e9montrer le temps. J\u2019ai voulu qu\u2019elle ressemble \u00e0 une tablette car elle donne l\u2019impression que quelqu\u2019un fait une demande de garnitures sur une pizza, comme une commande en ligne, en plus de montrer la valeur en temps de chaque garniture.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-f8582883 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center has-large-font-size\"><strong>\u00c9tape finale: FINITION DU PROJET<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-2a2db647 wp-block-group-is-layout-flex\" style=\"margin-top:0;margin-bottom:0\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-21.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"618\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-21.png\" alt=\"\" class=\"wp-image-291\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-21.png 1002w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-21-300x185.png 300w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-21-768x474.png 768w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/a><\/figure>\n\n\n\n<p>Finalement, j\u2019ai int\u00e9gr\u00e9 les deux compositions ensemble, en plus de rajouter un background qui changera d\u00e9pendamment du niveau de lumi\u00e8re dehors, et le tout \u00e9tait fait ! Je suis tr\u00e8s heureux avec le r\u00e9sultat, et j\u2019ai h\u00e2te de travailler sur d\u2019autres TP en m\u00e9dias interactifs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-25.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"692\" src=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-25-1024x692.png\" alt=\"\" class=\"wp-image-312\" srcset=\"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-25-1024x692.png 1024w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-25-300x203.png 300w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-25-768x519.png 768w, https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-content\/uploads\/2026\/02\/image-25.png 1070w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><br><br><\/p>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0\u00bbPizza clock\u00a0\u00bb Pizza clock est un projet r\u00e9alis\u00e9 dans le cours de M\u00e9dia Int\u00e9ractifs. Pour le devis de notre TP1, il fallait recr\u00e9er une horloge d&rsquo;une mani\u00e8re dynamique avec l&rsquo;aide du logiciel TouchDesigner. Il fallait que cette horloge soit dynamis\u00e9e avec la valeur de l&rsquo;heure, la minute et la seconde, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-portfolio"],"_links":{"self":[{"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":51,"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/posts\/213\/revisions\/350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/media\/216"}],"wp:attachment":[{"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emorin.dectim.ca\/cours\/ep\/SitePersonnelEmile\/wordpress\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}