{"id":3233,"date":"2023-01-01T08:11:00","date_gmt":"2023-01-01T07:11:00","guid":{"rendered":"https:\/\/yk-design.xyz\/?p=3233"},"modified":"2023-02-28T13:31:04","modified_gmt":"2023-02-28T12:31:04","slug":"dynamic-poster-jenson-2","status":"publish","type":"post","link":"https:\/\/yk-design.xyz\/?p=3233&lang=en","title":{"rendered":"Dynamic Poster Jenson"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls loop src=\"https:\/\/yk-design.xyz\/wp-content\/uploads\/2023\/02\/Affiche_Typographique_Jenson_bilboard_video.mp4\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-cover alignfull uag-hide-desktop uag-hide-tab uag-hide-mob\" style=\"min-height:90px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover aligncenter is-light uag-hide-desktop uag-hide-tab uag-hide-mob\" style=\"min-height:541px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim\" style=\"background-color:#cd9359\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading alignfull has-text-align-center has-white-color has-text-color\" style=\"font-size:60px;font-style:normal;font-weight:600\">Contexte<\/h2>\n\n\n\n<h2 class=\"wp-block-heading alignfull has-text-align-center has-white-color has-text-color\" style=\"font-size:35px;font-style:normal;font-weight:600\"><\/h2>\n\n\n\n<div class=\"wp-block-columns alignfull are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"justify has-white-color has-text-color\">   Dans le cadre d&rsquo;un travail scolaire, j&rsquo;ai d\u00fb r\u00e9aliser en 2021&nbsp;une affiche typographique jenson, relatant les informations de la fonte tout en utilisant celle-ci.&nbsp;J&rsquo;ai d\u00fb par la suite recr\u00e9er, puis anim\u00e9 cette m\u00eame affiche gr\u00e2ce \u00e0 des lignes de code en \u00ab\u00a0p5&nbsp;js\u00a0\u00bb, entr\u00e9 dans le logiciel \u00ab\u00a0processing\u00a0\u00bb.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull uag-hide-desktop uag-hide-tab uag-hide-mob\" style=\"min-height:90px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover is-light uag-hide-desktop uag-hide-tab uag-hide-mob\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim\" style=\"background-color:#cd9359\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading alignfull has-text-align-center has-white-color has-text-color\" style=\"font-size:60px;font-style:normal;font-weight:600\">Conception Graphique<\/h2>\n\n\n\n<h2 class=\"wp-block-heading alignfull has-text-align-center has-white-color has-text-color\" style=\"font-size:35px;font-style:normal;font-weight:600\"><\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"justify has-white-color has-text-color\">Pour garder l&rsquo;\u00e9l\u00e9gance que poss\u00e8de l&rsquo;affiche lors de sa mise en mouvement, j&rsquo;ai opt\u00e9 pour des d\u00e9placements simples et linaires, avec des mouvements assez lents.&nbsp;Chacun de ces d\u00e9placements est r\u00e9gl\u00e9 de fa\u00e7on \u00e0 offrir un sens de lectures et de compr\u00e9hension au spectateur.<\/p>\n\n\n\n<p class=\"justify has-white-color has-text-color\">    Toutes les lettres du mot \u00ab\u00a0Jenson\u00a0\u00bb se mouvoir en m\u00eame temps pour garder une certaine homog\u00e9n\u00e9it\u00e9.&nbsp;Les caract\u00e8res eux apparaissent&nbsp;hors champ, dissimuler derri\u00e8re les lignes pour se glisser \u00e0 leur place.&nbsp;Ce mode d&rsquo;apparition permet de mettre l&rsquo;accent se la typographie.<\/p>\n\n\n\n<p class=\"justify has-white-color has-text-color\">    La date de cr\u00e9ation de la fonte ainsi que le texte informatif lui se&nbsp;lance \u00e9galement au d\u00e9but pour ne pas casser le rythme.&nbsp;Ils apparaissent lentement en opacit\u00e9 pour laisser le temps au \u00ab\u00a0Jenson\u00a0\u00bb de se lire.&nbsp;Ils apparaissent aux seconds plans pour \u00eatre lue juste apr\u00e8s le titre.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull uag-hide-desktop uag-hide-tab uag-hide-mob\" style=\"min-height:90px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover is-light uag-hide-desktop uag-hide-tab uag-hide-mob\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim\" style=\"background-color:#cd9359\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading alignfull has-text-align-center has-white-color has-text-color\" style=\"font-size:60px;font-style:normal;font-weight:600\">Code p5.js<\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center uag-hide-desktop uag-hide-tab uag-hide-mob is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"has-white-color has-text-color\">let bold;<br>let bold_italic;<br>let semibold;<br>let semibold_italic;<br>let regular;<br>let italic;<br>let light;<br>let light_italic;<br>var j, n, e, s, o, n2;<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">function preload() {<br>bold = loadFont (\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProBold.otf\u00a0\u00bb);<br>bold_italic = loadFont(\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProBold-Italic.otf\u00a0\u00bb);<br>semibold = loadFont (\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProSemiBold.otf\u00a0\u00bb);<br>semibold_italic = loadFont (\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProSemiBold-Italic-Subhead.otf\u00a0\u00bb);<br>regular = loadFont (\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProRegular.otf\u00a0\u00bb);<br>italic = loadFont (\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProItalic.otf\u00a0\u00bb);<br>light = loadFont (\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProLight.otf\u00a0\u00bb);<br>light_italic = loadFont (\u00ab\u00a0wp-content\/uploads\/2021\/12\/AdobeJensonProLight-Italic-Subhead.otf\u00a0\u00bb);<br>}<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">function init(){<br>j=255;<br>n=620;<br>e=300;<br>s=760;<br>o= 920;<br>n2=150;<br>}<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">function setup() {<br>\/\/ createCanvas(1122.5204, 1587.4026);<br>createCanvas(800,1130);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">background (30);<br>init();<br>}<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">function draw() {<br>scale(0.7);<br>if(frameCount % 300 == 0)<br>init();<br>fill (255);<br>textAlign(LEFT);<br>background(30);<br>textFont(bold);<br>textSize(470);<br>text(\u00ab\u00a0J\u00a0\u00bb, j, 490);<br>if (j&gt;170) {<br>j=j-2;<br>}<br>textFont(regular);<br>textSize(450);<br>textAlign(RIGHT);<br>text(\u00ab\u00a0N\u00a0\u00bb, n, 450);<br>if (n &lt; 710) {<br>n=n+2;<br>}<br>fill (30);<br>noStroke ();<br>rect (255, 140, 265, 440);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">fill (300);<br>textFont(light_italic);<br>textSize(470);<br>text(\u00ab\u00a0E\u00a0\u00bb,e, 1055);<br>if (e&lt;390){<br>e=e+2;<br>}<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">fill (30);<br>noStroke ();<br>rect (30, 690,230, 400);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">fill (255);<br>textAlign(LEFT);<br>textFont(semibold_italic);<br>textSize(600);<br>text(\u00ab\u00a0s\u00a0\u00bb, s, 1090);<br>if (s&gt;685){<br>s=s-2;<br>}<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">fill (30);<br>noStroke ();<br>rect (790, 830, 170, 300);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">fill (255);<br>textFont(bold);<br>textSize(650);<br>text(\u00ab\u00a0O\u00a0\u00bb, o, 780);<br>if (o&gt;835){<br>o=o-2;<br>}<br>textAlign(RIGHT);<br>textFont(light_italic);<br>textSize(900);<br>text(\u00ab\u00a0n\u00a0\u00bb, n2, 1560);<br>if (n2&lt;240) {<br>n2=n2+2;<br>}<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">textFont(semibold_italic);<br>textSize(110);<br>let gris=30+(frameCount % 300\/0.6);<br>fill (gris);<br>text(\u00ab\u00a01\u00a0\u00bb, 30, 120);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">textFont(semibold_italic);<br>textSize(110);<br>text(\u00ab\u00a09\u00a0\u00bb, 30, 220);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">textFont(semibold_italic);<br>textSize(110);<br>text(\u00ab\u00a09\u00a0\u00bb, 30, 320);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">textFont(semibold_italic);<br>textSize(110);<br>text(\u00ab\u00a06\u00a0\u00bb, 30, 420);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">textAlign(LEFT);<br>textFont(light);<br>textSize(25);<br>text (\u00ab\u00a0L\u2019arrondissement des empattements et l\u2019adoucissement des diagonales et horizontales apporte\u00a0\u00bb, 210, 1285);<br>text (\u00ab\u00a0de l\u2019\u00e9l\u00e9gance et une facilit\u00e9 de lecture, ainsi que le contraste et une facilit\u00e9 de lecture, ainci que\u00a0\u00bb, 210, 1315);<br>text (\u00ab\u00a0le contraste marqu\u00e9 entre les pleins et d\u00e9li\u00e9s. La typographie Jenson est parfaite pour du texte\u00a0\u00bb, 210, 1345);<br>text (\u00ab\u00a0de labeur avec sa famille de caract\u00e8re permettant de varier et faire ressortir des \u00e9l\u00e9ments textuel\u00a0\u00bb, 210, 1375);<br>text (\u00ab\u00a0rigide et simple de lecture avec son arrondissement des empattements, elle permet \u00e9galement\u00a0\u00bb, 210, 1405);<br>text (\u00ab\u00a0diff\u00e9rent gris typographique et peut aussi \u00eatre utiliser pour du titrage avec son c\u00f4t\u00e9 \u00e9l\u00e9gant.\u00a0\u00bb, 220, 1435);<\/p>\n\n\n\n<p class=\"has-white-color has-text-color\">fill(255);<br>textAlign(LEFT);<br>textFont(light);<br>textSize(25);<br>rect (255, 150, 5, 1000);<br>rect (520, 150, 5, 1000);<br>rect (785, 150, 5, 1000);<br>}<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[30],"tags":[],"class_list":["post-3233","post","type-post","status-publish","format-standard","hentry","category-every-projects"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"signify-slider":false,"signify-featured-content":false,"signify-photography":false,"signify-promotion-headline":false},"uagb_author_info":{"display_name":"YK Design","author_link":"https:\/\/yk-design.xyz\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/yk-design.xyz\/index.php?rest_route=\/wp\/v2\/posts\/3233"}],"collection":[{"href":"https:\/\/yk-design.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yk-design.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yk-design.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yk-design.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3233"}],"version-history":[{"count":0,"href":"https:\/\/yk-design.xyz\/index.php?rest_route=\/wp\/v2\/posts\/3233\/revisions"}],"wp:attachment":[{"href":"https:\/\/yk-design.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yk-design.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yk-design.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}