Travailler avec du texte

Cette page reprend la base de la fonction text() (et fonctions annexes), ainsi qu’une série de ressources et tutoriels plus avancés, mais pouvant être mis en oeuvre assez rapidement. En effet, à l’instar de ce qui se fait pour le traitement de la video, l’export PDF ou la création d’interfaces utilisateur, une série de bibliothèques (libraries) proposent un grand nombre de fonctions avancées pour la manipulation du texte.

Une entrée en matière : https://creative-coding.decontextualize.com/text-and-type/

La façon la plus simple d’afficher du texte dans p5js est la suivante:

function setup() {
    createCanvas(300,200);
    fill(200,0,0);//Plutôt rouge
    textSize(24);
    text("Un texte", 10, 30);
}

Ce chapitre va vous permettre de personnaliser l’usage des textes dans p5.js en utilisant des polices de caractères alternatives.

Utiliser une police de caractères

Les typos peuvent être chargées de différentes manières. Typos systèmes, typos en lignes & typos installées sur votre pc sont utilisables…

Typos systèmes

Ce sont les typographies communément installées sur tout les ordinateurs. La police choisie doit être installée sur la machine qui éxecute le sketch.

function setup() {
    createCanvas(800, 600);
    textFont("Arial");
    textSize(102);
}
function draw() {
    text("Hello world", 50, 120);
}

Typo locale

Pour utiliser un fichier de typo, la méthode est la même que pour charger une image, avec loadFont(). p5.js accepte les fichiers ttf, otf et woff.

1. Copier le fichier de la typo dans le dossier du sketch (par exemple dans assets).
2. Créer une variable.
3. Dans setup(), charger le fichier avec await loadFont(), et ajouter async devant function setup().

let robotoCondensed;

async function setup() {
  robotoCondensed = await loadFont('assets/RobotoCondensed-Regular.ttf');
  createCanvas(800, 600);
  textFont(robotoCondensed);
  textSize(60);
}

function draw() {
  text("Il est aussi possible d'intégrer le texte dans une boîte.", 50, 50, 400, 400);
}

await attend que la typo soit chargée avant de passer à textFont(). Sans lui, p5.js essaierait d’utiliser une police qui n’est pas encore arrivée.

Les deux derniers nombres de text() (400, 400) sont la largeur et la hauteur d’une boîte : le texte va à la ligne tout seul pour y tenir.

Typo en ligne (Google Fonts)

Avec p5.js 2, loadFont() accepte aussi l’adresse d’une police de Google Fonts, sans rien télécharger. Sur la page de la police, cliquez sur Get font, puis Get embed code : l’adresse est celle qui commence par https://fonts.googleapis.com/css2?family=….

let police;

async function setup() {
  police = await loadFont('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque');
  createCanvas(800, 600);
  textFont(police);
  textSize(60);
}

Il faut alors une connexion internet pour que le sketch fonctionne.

Et preload() ?

L’ancienne version de cette page chargeait la typo dans preload(). C’était la méthode de p5.js 1.x, supprimée dans p5.js 2.0.

Avant — p5.js 1.x

function preload() {
  robotoCondensed = loadFont('assets/RobotoCondensed-Regular.ttf');
}

Maintenant — p5.js 2.0

async function setup() {
  robotoCondensed = await loadFont('assets/RobotoCondensed-Regular.ttf');
  createCanvas(800, 600);
}

On déplace les lignes de preload() dans setup(), on ajoute await devant chaque loadFont(), et async devant function setup().

Typographie: Pour aller plus loin

• https://b2renger.github.io/p5js_typo/