Expérimentations Typographiques

Les expérimentations graphiques et typographiques sont depuis longtemps un des terrains de jeux préférés des graphistes. Entre respect et transgression des règles typographiques et de lectures, de nombreux graphistes tels que Roger Excoffon, Paul Rand, Milton Glaser ou encore Stefan Sagmeister, se sont prêtés à ces exercices. Il en est de même dans le domaine du design interactif et on compte de nombreuses expérimentations typographiques comme Alaphabet interactif de Murielle Lefèvre, Frédéric Durieu et Jean-Jacques Birgé en 1999 ou encore LetterScape en 2002 de Peter Cho, étudiant de John Maeda. À travers ce cours nous allons apprendre à utiliser et mettre un forme un texte à l’aide de processing mais aussi à manipuler les variables de types textes afin de les utiliser par la suite.

Variables textes et méthodes text();

Processing différencie deux types de variables pouvant contenir du texte, la variable de type String et la variable de type char

Comme son nom l’indique la variable de type String est une suite (chaîne) de caractères, elle permet de stocker des mots. Elle se déclare de la manière suivante :

La variable de type char, permet de ne stocker qu’un seul caractère. Elle se déclare de la manière suivante :

Il est important de noter que les suites de caractères sont encadrés par des doubles guillemets «  » là ou le caractère simple n’est encadré que par des simples guillemets  »

Lorsque nous souhaitons afficher un texte dans notre programme nous utilisons la méthode text(), celle-ci nous permettra d’afficher un texte à un endroit précis de notre programme. Cette méthode peut s’utiliser de différentes manières

Enfin la méthode textSize() nous permet de modifier le corps du texte. Comme toutes méthodes de mise en forme, celle-ci doit être placée avant la méthode d’affichage du texte.

Nous verrons un peu plus bas les méthodes de mise en forme de texte avancées.

Manipulations des variables String et char

Lors d’une expérimentation typographique il est souvent utile de pouvoir manipuler le texte.
Nous verrons, dans cette partie, différentes méthodes nous permettant de manipuler nos variables String et char

charAt()

La méthode charAt() permet de connaître un caractère à une position donnée dans une chaîne de caractères.

Ici la variable caractere sera égale à o car il s’agit du 4ème caractère de la variable monTexte

NB : il est important de noter que notre programme commence son calcul à 0. Il compte donc de la sorte :

  • charAt(0) = H
  • charAt(1) = e
  • charAt(2) = l
  • charAt(3) = l
  • charAt(4) = o
  • charAt(5) = (espace)
  • charAt(6) = W

 

substring()

substring() permet d’extraire une chaîne de caractères au sein d’une autre. Nous obtenons ainsi une partie ou un extrait de cette chaîne de caractères.

Ici la variable subst sera égale à World qui correspond à la chaîne de caractères comprise entre le caractère 6 et 11 de la variable monTexte.

length()

Comme pour les tableaux statiques, length() permet de connaitre une taille. Appliquée à une variable de type String, cette méthode nous permet de connaître la taille, en caractère, d’une chaîne de caractères.

Ici la variable len sera égale à 29 car la variable monTexte possède 29 caractères.

indexOf()

La méthode indexOf() permet de connaitre la position d’un caractère dans une chaîne de caractères. Elle correspond à l’inverse de la méthode charAt()

Ici la variable indexMonTexte sera égale à 24 car ‘b’ est en 24ème position de la variable monTexte.

toLowerCase() & toUpperCase()

Ces deux méthodes, plus apparentées à des méthodes de mise en forme, permettent de réécrire une chaîne de caractère en capitale ou bas de casse.

Ici la variable bdc sera égale à « hello world, welcome on board » et CAP à « HELLO WORLD, WELCOME EN BOARD », soit, respectivement, la variable mon monTexte en bas de casse et capitale.

str()

La méthode str() permet de convertir des variables de type int ouf float (nombre entier ou décimal) en chaîne de caractères.

Ici la variable numberToString sera égale à la chaîne de caractères « 2014 ».

char() & int()

Les méthodes char() & int() permettent respectivement de convertir un caractère en sa valeur numérique et vice versa (notamment utilisé en ASCII).

Ici la variable caractere sera égale à ‘A’ qui est la lettre correspondant à la valeur ’65’ et la variable numberChar sera égale à ’69’ qui est la valeur correspondante à ‘E’.

NB : Vous pouvez retrouver les correspondances ASCII ici : Tables de correspondance ASCII

join(), split(), splitTokens()

La méthode join() permet d’assembler les éléments d’un tableau de String en une seule chaîne de caractères. Elle s’emploie de la manière suivante : join(nomDuTableau, « séparateur »);. Séparateur correspond au caractère ou chaîne de caractères que nous souhaitons utiliser pour séparer nos mots.

Ici la variable ensemble sera égale à « les étudiants sont : prénom1, prénom2, prénom3, prénom4, prénom5 » où « ,  » sera le séparateur de chacun de nos mots.

La méthode split() effectue l’inverse de la méthode join(). Elle permet de convertir en tableau de type String une chaîne de caractères. Elle s’emploie de la manière suivante : split(variableString, « séparateur »);. Séparateur correspond au caractère ou chaîne de caractères que nous souhaitons utiliser pour séparer nos mots dans notre variable String.

Ici notre tableau prénom contiendra alors les éléments suivant : prénom1, prénom2, prénom3, prénom4, prénom5.

splitTokens effectue la même action que la méthode split() à cela près qu’elle permet d’utiliser divers séparateurs.

Ici notre tableau phrase contiendra les éléments : « Hello World » et « Welcome on Board » soit notre chaîne de caractères monTexte séparée à chaque ponctuation ‘!’ et ‘.’.

toCharArray()

La méthode toCharArray() permet de convertir en tableau de type char une chaîne de caractères. Elle permet ainsi d’isoler l’ensemble des caractères d’une phrase ou d’un mot.

Ici la tableau car contiendra les éléments suivant : H, e, l, l, o, ,W, o, r, l, d, !.

Ces méthodes constituent les principales méthodes nécessaire à des expérimentations typographique. Il existe évidement encore d’autres méthodes permettant de traiter des variables textes dont vous pourrez retrouver les références sur le site processing

Mise en forme (avancée) de texte

Utiliser une typographie

Comme pour beaucoup de programmes, si nous souhaitons utiliser une typographie spécifique il nous faudra la charger dans notre programme. Processing utilisant une format spécifique pour ses fichiers typographiques, il nous faudra dans un premier temps créer puis charger notre typographie. Cela va se faire très facilement à l’aide de l’outil Create Font disponible via le menu Tools de notre fenêtre processing. Cet outil nous permettra, via la pop-up suivante, de choisir puis créer notre typographie au corps souhaité.

createFont

Une fois notre typographie créée nous pouvons la retrouver dans le dossier /data présent à la racine de notre sketch. Celui portera le nom que nous lui aurons donné précédemment (filename).

Afin de pouvoir utiliser notre typographie dans notre programme il est nécessaire de la charger dans une variable de type PFont. PFont pour processing font est un variable de type typographie. Elle permet de stocker une typographie chargée. Elle s’utilise de la manière suivante :

Nous pouvons alors utiliser notre typographie au sein de notre méthode draw() afin de mettre en forme notre texte. Pour cela nous utiliserons la méthode suivante textFont(nomDeMaVariableFont);

Nous remarquons que notre texte est automatiquement mise en forme au corps auquel nous avons créer notre font (Size dans l’outil de création font). Il nous est cependant possible de changer celle-ci à l’aide de la méthode textSize();

textAlign()

Cette méthode nous permet de mettre en forme l’alignement d’un texte.

  • CENTER pour un alignement centré
  • LEFT pour un alignement à gauche
  • RIGHT pour un alignement à droite

Elle s’utilise de la manière suivante :

Il est également possible de gérer l’alignement vertical d’un texte. Pour se faire nous utiliserons toujours la méthode textAlign() auquel nous ajouterons un argument. Nous aurons donc textAlign(alignementHorizontal, alignementVertical). Les alignements verticaux possible étant:

  • TOP pour un alignement haut
  • BOTTOM pour un alignement bas
  • CENTER pour un alignement centré
  • BASELINE pour un alignement sur la ligne de base

Nous l’utilisons donc la manière suivante :

textLeading()

La méthode textLeading() permet de manipuler, en pixel, l’interlignage d’un texte. Elle s’utilise de la manière suivante :

NB : Il est possible dans une variable String d’indiquer un retour à la ligne. Pour se faire il suffit d’inclure la chaîne de caractères suivante « \n » avant chaque retour à la ligne dans notre variable String. Dans l’exemple ci-dessus nous avons donc écrit : Hello World!\nHello You.\nHello Me afin d’indiquer un retour à la ligne avant chaque nouvelle phrase.

textWidth()

textWidth() permet de connaitre, en pixel, la largeur d’un texte affiché par notre programme.

textAscent() & textDescent()

La méthode textAscent() permet de connaitre la hauteur de jambage supérieur (hampe ou longue ascendante) de la typographie utilisée dans notre programme. Cette hauteur est calculée depuis la ligne de pied de notre typographie.
Elle s’utilise de manière suivante :

La méthode textDescent() permet de connaitre la hauteur de jambage inférieur (hampe ou longue descendante) de la typographie utilisée dans notre programme. Cette hauteur est calculée depuis la ligne de pied de notre typographie.
Elle s’utilise de manière suivante :

En combinant ces deux méthode nous pouvons alors calculer la hauteur d’une ligne en fonction de la typographie utilisée.

Part_05. Exemple d’expérimentation typographique

experimentation_0764

Dans l’exemple suivant nous allons voir comment exploiter les méthodes précédentes afin de réaliser une expérimentation typographique interactive.
Pour cet exemple nous allons utiliser une citation de Charles Eames : « Design is a plan for arranging elements in such a way as best to accomplish a particular purpose. »

Nous souhaitons disposer l’ensemble des caractères formant cette citation sur une grille 3D. Celle-ci effectuera une rotation sur différents axes.
Enfin nous allons voir comment mettre en exergue certaines lettres de cette citation lorsque l’utilisateur appuie sur la touche de son clavier correspondant. Celles-ci avanceront sur l’axe z puis changeront de couleurs.

Nous allons commencer par créer un classe Lettre. Celle-ci permettra de stocker et gérer nos objets caractères. Nous voulons positionner nos lettres dans un espace x, y, z et que nous souhaitons en changer la couleur. Nous aurons donc besoins des variables suivantes :

  • La variable char correspondant à la lettre de la citation
  • La position x,y,z (float)
  • La couleur HSB de la lettre (float)
  • Une variable boolean afin de savoir si notre lettre et appuyée ou non

Cela nous donnera le début de classe suivante :

Nous aurons par ailleurs besoins de diverses méthodes dont :

  • Le constructeur de notre objet
  • Une méthode permettant de définir la lettre et la couleur de notre objet defineLetter(char lettre_)
  • Une méthode permettant de changer le comportement de la lettre si celle-ci est appuyée changeBehavior()
  • Une méthode permettant d’afficher notre lettre display()
  • Une méthode globale permettant d’appeler les méthodes nécessaires à notre programme run()

Ajoutons notre première méthode, à savoir, notre constructeur. Celui-ci va nous permettre de définir la position de notre objet. Nous définirons la lettre puis la couleur dans une seconde méthode afin de s’éviter un calcul de correspondance entre une grille et un suite de caractères.

Nous allons ensuite ajouter notre méthode permettant de définir la lettre et la couleur de notre objet. Nous n’allons pas choisir la couleur de nos lettre au hasard mais allons mapper leur valeurs en ASCII sur des valeurs de bleu du cercle chromatique. Pour ce faire nous allons utiliser la méthode int() vu précédemment puis nous mapperons les valeurs à l’aide d’une méthode map(). Nous définirons le caractère de notre objet en découpant la citation, donc en dehors de l’objet en lui même, nous devrons donc passer la variable caractère à notre méthode. Pour ce faire nous allons utiliser la syntaxe suivante fonction(typeDeVariable nomDeVariable)

Nous ajoutons ensuite nos méthodes changeBehavior() et display(). La première nous permettra de changer la position z et la saturation de notre objet si sa lettre correspondante est appuyée par l’utilisateur. Nous utilisons une simple condition ainsi que notre variable booléenne.

Notre méthode display() dessinera notre lettre au centre de sa position. Nous dessinerons également une tige à notre lettre afin d’accentuer graphiquement notre mise en valeur des lettre appuyées.

Enfin nous regroupons nos deux méthodes changeBehavior() et display dans une méthode run()

Nous obtenons alors la classe suivante

Nous allons à présent nous occuper de découper notre citation puis l’afficher sur scène. Si nous analysons le programme voulu et son design, nous remarquons que nous aurons besoins de

  • Découper notre citation en tableau de caractères
  • Positionner nos caractères sur un grille d’une certaines taille, avec un espace précis entre chacun d’eux
  • Positionner notre grille sur la scène
  • Effectuer une rotation de notre scène

Nous aurons besoins des variables suivantes :

  • Taille de la scène
  • Citation et Auteur
  • Tableau pour stocker l’ensemble des caractères formant la citation
  • Tableau pour stocker l’ensemble de nos objets Lettre
  • La typographie pour notre mise en forme du texte
  • La taille de notre grille
  • les marge haute et basse pour positionner notre grille
  • la résolution en largeur et hauteur de notre grille
  • Les angles x, y, z de notre scène

Soit :

Nous pouvons à présent définir notre setup(). C’est dans ce dernier que nous effectuerons l’analyse de notre texte, la création des objets Lettre et leur position.
Nous commençons par les paramètres de base de notre programme ainsi que le chargement de la typographie créée au préalable :

Puis, à l’aide de la méthode toCharArray() nous allons créer un tableau contenant tout les caractères de la variable citation.

Nous définissons ensuite les paramètres de notre grille, puis à l’aide d’une double boucle for, nous créons et positionnons nos objets de type Lettre.

Enfin nous n’avons plus qu’à définir les lettres de chacun de nos objets. Si nous observons notre grille, nous remarquons qu’il s’agit d’une grille de 100 emplacements. Or notre citation fait 97 caractères. Nous devrons donc, à l’aide d’une condition, définir un caractère vide ‘ ‘ pour tout nous objets n’ayant pas de caractères correspondant (de l’emplacement 98 à 100).

Nous obtenons donc le setup() suivant

Nous allons désormais définir notre draw(). Nous souhaitons pouvoir effectuer une rotation de notre grille. Cela implique donc l’utilisation d’une déplacement de matrice et d’une rotation sur des axes x, y et z. Pour afficher nos objets nous utilisons un simple boucle for() afin d’appeler leur méthodes run().

Une fois notre affichage créé, il ne nous reste plus qu’à réaliser la partie interactive de notre expérimentation. Nous allons utiliser une méthode keyPressed() dans laquelle nous comparons la touche du clavier appuyée par l’utilisateur avec le lettres de nos objets. Si celles-ci correspondent, nous passerons alors les variables booléenne clicked de nos objets en vrai, sinon en faux.

Nous obtenons alors l’expérimentation suivante pour le code suivant :

Une réflexion au sujet de « Expérimentations Typographiques »

Les commentaires sont fermés.