Vai al contenuto

ūüď£ sulla piattaforma e-learning di Codice Inutile sono disponibili i miei corsi: Introduzione alla programmazione e ūüÜē Introduzione all'Arte Generativa

Font personalizzati: aggiungerli e utilizzarli

ūüď¨ Per rimanere aggiornato sui prossimi articoli e su altri contenuti di creative coding, puoi iscriverti a questa newsletter. Per farlo √® sufficiente inserire il tuo indirizzo e-mail nel campo qui sotto.

Puoi leggere l'archivio qui. Powered by TinyLetter

In Processing √® possibile utilizzare le font¬†che abbiamo installato sul nostro computer all’interno dei nostri sketch. In questo post vedremo come aggiungerli al nostro programma e come utilizzarli in modo efficace. Questi argomenti saranno¬†sicuramente utili a chi ha un background di tipo grafico e utilizza regolarmente Photoshop o Illustrator.

Font vettoriali

La prima funzione che dobbiamo usare per aggiungere le font è createFont(), necessaria per convertire un file in formato TrueType (.ttf) oppure Open Type (.otf) in modo tale da poter essere utilizzato con la funzione text() di cui abbiamo parlato.

Per vedere tutte le font installate compatibili, come indicato anche nell’esempio nel reference, basta scrivere le seguenti righe di codice:

String[] fontList = PFont.list();
printArray(fontList);

Queste due righe non fanno altro che generare e mostrare in console un’array di stringhe¬†con tutti i nomi delle font attualmente installate sul computer:

[0] "Serif"
[1] "SansSerif"
[2] "Monospaced"
[3] "Dialog"
[4] "DialogInput"
...
[862] "Verdana"
[863] "Verdana-Bold"
[864] "Verdana-BoldItalic"
[865] "Verdana-Italic"

Ora che sappiamo quali font √® possibile usare, dobbiamo convertirle. √ą necessario utilizzare un¬†data type specifico per salvare tutte le informazioni relative ai caratteri:¬†PFont.

Creiamo una variabile di tipo PFont e usiamo la funzione createFont() per convertire il formato utilizzando due parametri: il primo è il nome della font, il secondo la grandezza di base.

Con la funzione textFont() diciamo al programma quale font usare.

// Rimuovi il commento per vedere l'elenco delle font installate.
// String[] fontList = PFont.list();
// printArray(fontList);

PFont gill;

void setup() {
  size(500, 200);
  gill = createFont("GillSans", 28);
  textFont(gill);
  fill(0);
  text("Questo è un testo in GillSans", 10, height/2);
}

void draw() {
}

Questo il risultato:

Custom Font in Processing

Nel caso volessimo usare pi√Ļ font all’interno del nostro programma, √® sufficiente¬†ripetere il processo con tutte i caratteri che vogliamo:

// Rimuovi il commento per vedere l'elenco delle font installate.
// String[] fontList = PFont.list();
// printArray(fontList);

PFont gill, openSans;

void setup() {
  size(500, 200);
  gill = createFont("GillSans", 28);
  openSans = createFont("OpenSans", 28);
  textFont(gill);
  fill(0);
  text("Questo è un testo in GillSans", 10, height/2);
  textFont(openSans);
  text("Questo è un testo in OpenSans", 10, height/2 + 40);
}

void draw() {
}

Multiple custom fonts in Processing

Articolo precedente

Caricare file esterni in Processing

Articolo successivo

Esercizio: Testo psichedelico

Unisciti alla discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.