Tema 17

Text i tipografia

El text és imatge, és so visual, és missatge. Aprèn a dibuixar paraules al llenç, carregar fonts personalitzades amb await loadFont(), i crear composicions tipogràfiques cinètiques que ballen, respiren i comuniquen.

La funció text()

La funció text() escriu una cadena de text al llenç. La seva sintaxi bàsica és:

text("Hola, món!", x, y);

També podem especificar una amplada i alçada per a una caixa de text:

text("Això és una caixa de text llarga.", x, y, ample, alt);

Exemple bàsic: text al centre del llenç.

function setup() {
  createCanvas(300, 120);
  textSize(24);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(245);
  fill(0);
  text("Programació per Artistes", width/2, height/2);
}

Mida, font, color i contorn

  • textSize(mida) — mida en píxels.
  • textFont(font) — assigna una font carregada o una de genèrica (per exemple, 'Georgia', 'Courier New').
  • fill() / stroke() — color d'ompliment i contorn del text.
  • textStyle(ESTIL) — NORMAL, ITALIC, BOLD, BOLDITALIC.
textSize(32);
textFont('Georgia'); fill(200, 0, 0); text("Art", 20, 50);
textFont('Courier New'); textStyle(ITALIC); fill(0, 100, 200); text("Generatiu", 20, 90);
textStyle(BOLD); fill(100, 0, 150); text("Amb p5.js", 20, 130);

Carregar fonts personalitzades amb await loadFont()

Per utilitzar una font no estàndard (descarregada o de Google Fonts), cal carregar-la amb loadFont() dins d'un async setup() usant await. Aquesta és la manera moderna de p5.js v2.

let laMevaFont;

async function setup() {
  createCanvas(400, 200);
  laMevaFont = await loadFont('assets/Inter-Bold.ttf');
  textFont(laMevaFont);
  textSize(36);
  fill(0);
  text("Hola amb Inter Bold!", 30, 100);
}

Si no especifiques cap font amb textFont(), p5.js utilitza la font per defecte (normalment sans-serif del navegador).

Mesurar el text

Per crear composicions precises, necessitem saber les dimensions del text:

  • textWidth(cadena) — amplada en píxels del text.
  • textAscent() — alçada per sobre de la línia de base.
  • textDescent() — alçada per sota de la línia de base.
let paraules = "Art Digital";
let amplada = textWidth(paraules);
let ascent = textAscent(); let descent = textDescent();
let x = (width - amplada) / 2; let y = height / 2;
fill(255, 200, 0); rect(x, y - ascent, amplada, ascent + descent);
fill(0); text(paraules, x, y);

Text cinètic: tipografia en moviment

Podem animar el text canviant la seva posició, mida, color o rotació a cada draw().

let angle = 0;
function draw() {
  background(30); angle += 0.03;
  fill(255, 200, 0); push(); translate(width/2, height/2);
  rotate(sin(angle) * 0.3); text("C O D I", 0, 0); pop();
  fill(255, 100, 100, 150);
  textSize(24 + sin(angle * 1.5) * 8); text("ART", width/2, height/2 + 60);
}

Exemples creatius pas a pas

Pluja de lletres

let gotes = [];
for (let i=0; i<40; i++) {
  gotes.push({ x: random(width), y: random(-height, 0), vel: random(1,4),
               lletra: String.fromCharCode(65 + floor(random(26))), op: random(100,255) });
}

Text elàstic

let paraula = "ARTISTA";
let espai = textWidth("A") * 1.2;
let xInici = (width - espai * (paraula.length-1)) / 2;
for (let i=0; i

Consells per treballar amb tipografia

  • Carrega fonts amb await: dins d'async setup() per evitar errors de sincronització.
  • Utilitza textAlign() per centrar fàcilment paraules al llenç o dins de caixes.
  • Mesura abans de dibuixar: textWidth() t'ajuda a posicionar elements al voltant del text.
  • Combina text amb formes: el text pot ser el centre d'una composició, o un element decoratiu.
  • Experimenta amb la interacció: text que canvia amb el ratolí, el teclat o el so crea experiències molt atractives.

Exercicis per practicar

  1. Dibuixa el teu nom complet al centre del llenç amb una font del sistema i fes que el color canviï gradualment amb frameCount.
  2. Crea un rellotge de text: mostra l'hora actual amb una font gran i que s'actualitzi cada segon.
  3. Implementa un efecte de desplaçament (marquesina): un text llarg que es mou horitzontalment i reapareix per l'altre costat.
  4. Dissenya un poema visual: paraules clau distribuïdes pel llenç amb mides i colors diferents, que reaccionin al ratolí.
  5. Repte: Crea un generador de cartells tipogràfics amb fonts carregades amb await loadFont().

Reflexió artística

La tipografia és la veu visual del llenguatge. Cada font té personalitat: una serifa clàssica evoca tradició; una sans-serif geomètrica suggereix modernitat. Quan combines text amb codi, les paraules no només es llegeixen, sinó que es veuen, es mouen, respiren. En l'art digital, el text pot ser imatge abstracta, narrativa cinètica, o dada en brut. Amb p5.js, pots fer que cada lletra sigui un personatge, que cada paraula sigui un ecosistema visual. Juga amb la tensió entre llegibilitat i abstracció: a partir de quin moment un text deixa de ser text i es converteix en forma? Aquesta frontera és un territori creatiu fascinant.

Mini-projecte del Tema 17

Crea un "Cartell tipogràfic interactiu" amb les següents condicions:

  • Carrega almenys una font personalitzada amb await loadFont().
  • El cartell ha d'incloure un títol, un subtítol i un cos de text amb text real o generat.
  • Incorpora animació subtil: mida, color o posició canviants.
  • El ratolí afecta algun element: color de fons, expansió de lletres, etc.
  • Utilitza textWidth() i/o textAscent()/textDescent() per posicionar els elements amb precisió.