Archivi categoria: Testi

Articoli, esercizi ed esempi in Processing.

Esercizio: Testo psichedelico

Oggi vi propongo un esercizio molto semplice per analizzare alcune funzioni relative al testo che non abbiamo avuto modo di approfondire nei post precedenti. L’esercizio riportato qui sotto mostra come siano sufficienti poche righe di codice per ottenere risultanti interessanti lavorando con del testo all’interno di Processing.

Partiamo dal codice completo del programma:

/*
 * Esercizio: Testo Psichedelico
 * Federico Pepe, 19.01.2017
 * http://blog.federicopepe.com/processing
*/
String letters = "";

void setup() {
  size(500, 500);
  background(255);
  fill(0);
  textSize(26);
  textAlign(CENTER);
}

void draw() {
  background(255);
  for(int i = 0; i <= letters.length(); i++) {
    if(i % 2 == 0) {
      fill(random(255), random(255), random(255));
    } else {
      fill(255);
    }
    text(letters, width/3 + i*1.5, height/2+i);
  }
}
 
void keyPressed() {
  if(key == BACKSPACE) {
    if (letters.length() > 0) {
      letters = letters.substring(0, letters.length()-1);
    }
  }
  else if(textWidth(letters+key) < width)  {
    letters = letters+key;
  }
}

L'intero programma si basa sulla variabile di tipo Stringa chiamata letters che dichiariamo e inizializziamo nella prima riga.

void keyPressed()

Di questa funziona-evento abbiamo già parlato in passato. Sappiamo che il codice all'interno viene eseguito quando viene premuto un tasto della tastiera. Partiamo da un controllo condizionale per verificare se stiamo premendo il tasto backspace, quello che usiamo per cancellare l'ultimo carattere inserito.

Se la prima condizione è true verifichiamo che la lunghezza della stringa sia maggiore di 0 letters.length() > 0. Se anche questa condizione risulta true reimpostiamo il valore della variabile letters eliminando l'ultimo carattere inserito: letters = letters.substring(0, letters.length()-1);.

Non avendo mai visto prima questi metodi delle variabili String, spiego velocemente come funzionano:

  • .length() restituisce semplicemente il numero di caratteri della stringa.
  • .substring() restituisce una nuova stringa che è parte della stringa iniziale. Accetta due parametri la posizione di partenza e quella finale.

Ritornando al primo if: se stiamo premendo un tasto e questo tasto non è backspace allora aggiungiamo il tasto premuto (key) alla nostra stringa a patto che la lunghezza della stringa non sia maggiore alla lunghezza della finestra del nostro sketch: textWidth(letters+key) < width

Risultato

Quello che accade dentro setup() e draw() non dovrebbe essere troppo complesso da capire per cui, inserisco direttamente un'immagine che rappresenta un risultato ottenuto con questo sketch:

Testo Psichedelico

Font personalizzati: aggiungerli e utilizzarli

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

Testi in Processing: text(), textSize() e textAlign()

È possibile utilizzare Processing non solo per disegnare forme, colori e animazioni sullo schermo ma anche per lavorare con testi. Avere pieno controllo delle parole sullo schermo può essere utile in diversi progetti in particolare, per esperienza personale, nelle visualizzazioni di dati dove la giusta combinazione di grafica e testo può rendere le nostre infografiche più comprensibili.

Visualizzare un testo: text()

La prima funzione da imparare è text(). Il suo funzionamento è piuttosto semplice; i parametri accettati sono tre: il carattere o la stringa che vogliamo scrivere e la posizione x e y.


size(500, 200);
text("Questo è un testo", 10, height/2);

Funzione text() in Processing

Di default il testo è di colore bianco e l’allineamento è a sinistra. Come per le forme, per modificare il colore è sufficiente utilizzare la funzione fill().

size(500, 200);
fill(0);
text("Questo è un testo", 10, height/2);

Colorare i testi in processing con fill()

È importante notare che la stringa all’interna della funzione deve essere scritta tra virgolette. Ovviamente è possibile passare alla funzione anche una variabile di tipo String.

String testo = "Questo è un testo in una variabile";
size(500, 200);
fill(0);
text(testo, 10, height/2);

Utilizzare una variabile per il testo

Cambiare la dimensione del testo: textSize()

La funzione textSize() imposta la grandezza della font. Una volta impostata, tutti i testi rappresentati al di sotto di questa funzione, avranno la stessa dimensione.

String testo = "Questo è un testo in una variabile";
size(500, 200);
fill(0);
text(testo, 10, 25);
textSize(18);
text(testo, 10, 50);
text(testo, 10, 100);
textSize(12);
text(testo, 10, 125);

textSize() per modificare la dimensione

Allineare il testo: textAlign()

L’ultimo controllo di base di cui abbiamo bisogno è la funzione textAlign() che ci permette di allineare il testo che stiamo mostrando sullo schermo. I parametri accettati sono CENTERLEFTRIGHT scritti rigorosamente in maiuscolo.

size(500, 200);
line(width/2, 0, width/2, height);
fill(0);
textAlign(CENTER);
text("Testo allineato al centro", width/2, 50);
textAlign(LEFT);
text("Testo allineato a sinistra", width/2, 100);
textAlign(RIGHT);
text("Testo allineato a destra", width/2, 150);

Processing: textAlign()

La stessa funzione accetta anche un secondo parametro per regolare l’allineamento verticale: TOP, CENTER, BOTTOM.

Ecco l’esempio:

size(500, 200);
fill(0);
textAlign(CENTER, TOP);
line(0, 50, width, 50);
text("Allineamento verticale top", width/2, 50);
textAlign(CENTER, CENTER);
line(0, 100, width, 100);
text("Allineamento verticale centrato", width/2, 100);
textAlign(CENTER, BOTTOM);
line(0, 150, width, 150);
text("Allineamento verticale bottom", width/2, 150);

textAlign() verticale: top, center, bottom

Per oggi è tutto, nel prossimo post vedremo insieme come modificare le font.