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.

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().

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.

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.

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.

Processing: textAlign()

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

Ecco l’esempio:

textAlign() verticale: top, center, bottom

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