CC2018-eartsup

Couleurs et typographies

Couleurs

La base de la théorie des couleurs

RGB vs CMJN -> addition vs soustraction CMJN vs RGB Illusion de Couleurs Color Illusion RGB/HSB/HSL RGB, HSB, HSL

Cercle chromatique et schémas de couleurs

Color Scheme

Typographies

S’il est possible d’écrire et afficher du texte au sein d’une page HTML il est également possible d’en dessiner sur la surface de dessin qu’est l’objet <canvas>. Cela permet ainsi de dessiner et afficher des interfaces par dessus le canvas ou mainpuler une chaine de caractère afin d’en changer son affichage ou son tracé.

Écrire sur le canvas

P5js permet d’afficher un texte sur la surface de dessin par l’utilisation de la fonction text(text, x, y, w, h) où :

Si aucune fonction d’affichage ne définie les paramètres le texte sera afficher avec une typographie, une taile et un alignement gauche par défaut. Pour changer les paramètre d’affichage nous utiliserons les méthodes suivante :

p5js permet également de récupérer les information de taille d’un texte telle que sa largeur ou sa hauteur, saouvent necessaire pour le dessin d’interfaces de datavisualization. Afin de connaitre la largeur d’un texte nous utiliserons la méthode textWidth(texte) qui renverra la taille du texte envoyé en paramètre. Nous noterons qu’il est necesseraire de définir en amont les paramètres d’affichage du texte sans quoi la largeur renvoyée sera calculé pour un typographie et taille de base du programme.

La hauteur d’un texte se décompose en deux éléments : la hauteur des hampes ascendante et descendante. line height

Pour connaître ces taille avec p5js nous utiliserons les méthodes suivante :

Ainsi pour connaitre la hauteur complète d’un ligne nous réaliserons le calcul suivant :

var hauteur = textAscent() + textDescent();

Manipuler une chaine de caractère

Au dela de la mise en forme de texte il est possible de manipuler une chaine de caractère afin de la composer. Cela permet par exemple, à partir d’un paragraphe, de lister et compter le nombre de mot, ou de décomposer le texte en caractère afin de dessiner chaque caractère indépendamment.

La méthodes split(text, param) permet de diviser une chaîne de caractères à partir d’un séparateur pour fournir un tableau de sous-chaînes. Le premier paramètre text est le texte à diviser, le second param défini le séparateur à utiliser pour scinder le texte.

Pour l’exemple suivant nous utiliserons en texte de référence la citation de Paul Rand suivante :

There are no formulas in creative work. I do many variations, which is a question of curiosity. I arrive at many different configurations-some just slight variations, others more radical-of an original idea. It is a game of evolution.

Si nous souhaitons compter le nombre de mots utiliser dans cette citation il nous suffira de diviser le texte en en tavleau de mots et d’en demander sa taille. Chaque mot étant séparé d’une espace, nous utiliserons celle-ci comme spérateur de notre méthode.

var quotes = "There are no formulas in creative work. I do many variations, which is a question of curiosity. I arrive at many different configurations-some just slight variations, others more radical-of an original idea. It is a game of evolution.";
var wordsArray = split(quotes, " ");
var numberOfWord = wordsArray.length;

Nous noterons également qu’il est possible de diviser une chaîne de caractère en tableau de caractère si notre séparateur est défini comme vide. Nous récupérons ainsi un tableau contenant l’ensemble des caractères (espces et ponctuation incluses).

var quotes = "There are no formulas in creative work. I do many variations, which is a question of curiosity. I arrive at many different configurations-some just slight variations, others more radical-of an original idea. It is a game of evolution.";
var charArray = split(quotes, "");
var numberOfChar = charArray.length;

Manipulation typo

Manipulation typographique avec p5.Font

Au delà de la manipulation de la chaîne de caractère nous pouvons également manipuler le tracé d’un texte et de se typographie par l’utilisation de l’objet p5.Font. Cet objet de p5js est une implémentation de la librairie opentype.js permettant de parser et mainpuler des typographies aux formats OpenType (OTF) et True Type (TTF). Par son utilisation nous pourrons récupérer le tracé vectoriel d’un texte sous forme d’un tableau de coordonées pour créer, manipuler, interagir ou animer avec le tracé du texte.

Pour fonctionner la librairie aura besoins de charger dans sa mémoire l’ensemble de la typographie, aussi nous ne pourrons pas utiliser d’appels de typographies chargées en css, ces dernières étant encodées pour le DOM. Aussi la première étape consiste à charger la typographie à manipuler de la manière suivante :

var font;
function preload(){
  font = loadFont("./MuktaMahee-Bold.ttf");
}

Nous nottons ici l’utilisation de la fonction preload(). Cette fonction, appelée avant le setup() est utiliser afin de gérer le chargement de fichiers et assets de manière asynchrone. Si cette fonction est utilisée le setup() attendra la fin de chargement des assets avant de passer au draw().

Un fois la typographie chargée nous pouvons utiliser la méthode p5.Font.textToPoints(text, x, y, taille, [options]) afin de calculer la liste de points composant notre texte pour une typographie et taille donnée. Les paramètres sont les suivants :

Ainsi pour obtenir notre liste de coordonées nous écrirons :

var pointsList = font.textToPoints('Hello World!', 0, 0, 75, {
    sampleFactor: 0.25,
    simplifyThreshold: 0
  });

Nous pourrons alors naviguer dans la liste de points par l’utilisation d’une boucle for afin de manipuler ou dessiner notre tracé de la manière suivante :

for(var i=0; i<pointsList.length; i++){
  var point = pointsList[i];
  ellipse(p.x, p.y, 4, 4);
}

Nous noterons ici que le tableau pointsList`est un tableau de coordonée 2D. Aussi nous pouvons récupérer indépendamment les coordonées x et y par l’appel des variable de chaque objet présent dans le tableau où :

De la même manière nous pourrons récupérer la bounding box (boite) du texte par l’utilsation de la méthode p5.Font.textBounds(text, x, y, taille). Les paramètres sont les suivants :

var bounds = font.textBounds('Hello World!', 0, 0, 75);

La méthode nous reverra alors un objet pour lequel nous pourrons interroger les variables suivantes :

p5.Font

Exemples :

This site is open source. Improve this page.