Contexte
Dans le cadre d’un travail scolaire, j’ai dû réaliser en 2021 une affiche typographique jenson, relatant les informations de la fonte tout en utilisant celle-ci. J’ai dû par la suite recréer, puis animé cette même affiche grâce à des lignes de code en “p5 js”, entré dans le logiciel “processing”.
Conception Graphique
Pour garder l’élégance que possède l’affiche lors de sa mise en mouvement, j’ai opté pour des déplacements simples et linaires, avec des mouvements assez lents. Chacun de ces déplacements est réglé de façon à offrir un sens de lectures et de compréhension au spectateur.
Toutes les lettres du mot “Jenson” se mouvoir en même temps pour garder une certaine homogénéité. Les caractères eux apparaissent hors champ, dissimuler derrière les lignes pour se glisser à leur place. Ce mode d’apparition permet de mettre l’accent se la typographie.
La date de création de la fonte ainsi que le texte informatif lui se lance également au début pour ne pas casser le rythme. Ils apparaissent lentement en opacité pour laisser le temps au “Jenson” de se lire. Ils apparaissent aux seconds plans pour être lue juste après le titre.
Code p5.js
let bold;
let bold_italic;
let semibold;
let semibold_italic;
let regular;
let italic;
let light;
let light_italic;
var j, n, e, s, o, n2;
function preload() {
bold = loadFont (“wp-content/uploads/2021/12/AdobeJensonProBold.otf”);
bold_italic = loadFont(“wp-content/uploads/2021/12/AdobeJensonProBold-Italic.otf”);
semibold = loadFont (“wp-content/uploads/2021/12/AdobeJensonProSemiBold.otf”);
semibold_italic = loadFont (“wp-content/uploads/2021/12/AdobeJensonProSemiBold-Italic-Subhead.otf”);
regular = loadFont (“wp-content/uploads/2021/12/AdobeJensonProRegular.otf”);
italic = loadFont (“wp-content/uploads/2021/12/AdobeJensonProItalic.otf”);
light = loadFont (“wp-content/uploads/2021/12/AdobeJensonProLight.otf”);
light_italic = loadFont (“wp-content/uploads/2021/12/AdobeJensonProLight-Italic-Subhead.otf”);
}
function init(){
j=255;
n=620;
e=300;
s=760;
o= 920;
n2=150;
}
function setup() {
// createCanvas(1122.5204, 1587.4026);
createCanvas(800,1130);
background (30);
init();
}
function draw() {
scale(0.7);
if(frameCount % 300 == 0)
init();
fill (255);
textAlign(LEFT);
background(30);
textFont(bold);
textSize(470);
text(“J”, j, 490);
if (j>170) {
j=j-2;
}
textFont(regular);
textSize(450);
textAlign(RIGHT);
text(“N”, n, 450);
if (n < 710) {
n=n+2;
}
fill (30);
noStroke ();
rect (255, 140, 265, 440);
fill (300);
textFont(light_italic);
textSize(470);
text(“E”,e, 1055);
if (e<390){
e=e+2;
}
fill (30);
noStroke ();
rect (30, 690,230, 400);
fill (255);
textAlign(LEFT);
textFont(semibold_italic);
textSize(600);
text(“s”, s, 1090);
if (s>685){
s=s-2;
}
fill (30);
noStroke ();
rect (790, 830, 170, 300);
fill (255);
textFont(bold);
textSize(650);
text(“O”, o, 780);
if (o>835){
o=o-2;
}
textAlign(RIGHT);
textFont(light_italic);
textSize(900);
text(“n”, n2, 1560);
if (n2<240) {
n2=n2+2;
}
textFont(semibold_italic);
textSize(110);
let gris=30+(frameCount % 300/0.6);
fill (gris);
text(“1”, 30, 120);
textFont(semibold_italic);
textSize(110);
text(“9”, 30, 220);
textFont(semibold_italic);
textSize(110);
text(“9”, 30, 320);
textFont(semibold_italic);
textSize(110);
text(“6”, 30, 420);
textAlign(LEFT);
textFont(light);
textSize(25);
text (“L’arrondissement des empattements et l’adoucissement des diagonales et horizontales apporte”, 210, 1285);
text (“de l’élégance et une facilité de lecture, ainsi que le contraste et une facilité de lecture, ainci que”, 210, 1315);
text (“le contraste marqué entre les pleins et déliés. La typographie Jenson est parfaite pour du texte”, 210, 1345);
text (“de labeur avec sa famille de caractère permettant de varier et faire ressortir des éléments textuel”, 210, 1375);
text (“rigide et simple de lecture avec son arrondissement des empattements, elle permet également”, 210, 1405);
text (“différent gris typographique et peut aussi être utiliser pour du titrage avec son côté élégant.”, 220, 1435);
fill(255);
textAlign(LEFT);
textFont(light);
textSize(25);
rect (255, 150, 5, 1000);
rect (520, 150, 5, 1000);
rect (785, 150, 5, 1000);
}
