Typography in graphic programming languages (applied in Processing)

M. Turčić, M. Rudolf

Summary

Processing is a programming language, based on Java, specialized for generating and modification of graphics. System enables creating computer graphic and interactivity including vector and raster objects, interactive events, network communications and object oriented programming.
Creating Web typography has to be independent of browsers, programming language, or installed fonts. The goal of typography is the quality and universal display regardless of resolution.
To use fonts in Processing, they have to be converted to bitmap images, and supported in VLW format. Processing stores each character in a special file. It also allows text editing (font size, leading, alignment …).
Since the size of Processing canvas and fonts are fixed, chosen fonts are always displayed in the way they are supposed to. That means that design is preserved without any losses or changes.
Keywords: Processing, universal display, fonts

TIPOGRAFIJA U GRAFIČKIM PROGRAMSKIM JEZICIMA (sa primjenom u Processingu)

M. Turčić, M. Rudolf

Sažetak

Processing je programski jezik specifično namijenjen za generiranje i modificiranje grafike, a bazira se na Java programskom jeziku. Sistem olakšava kreiranje kompjutorske grafike i interaktivnosti uključujući vektorske i rasterske slike, interaktivne događaje, mrežno komuniciranje i objektno programiranje.
Programiranje tipografije za Web mora biti neovisno o web pregledniku, programskom jeziku, te bazi fontova koju korisnik ima u svom sistemu. Cilj dizajna tipografije je univerzalnost prikaza te kvaliteta prikaza bez obzira na rezoluciju.
Da bi se tipografski znakovi prikazali na ekranu, u processingu se mora font konvertirati u bitmap, koji je podržan u VLW formatu. Processing sprema svaki slovni znak kao sliku u posebnu datoteku. Processing omogućuje editiranje teksta (izbor i veličina fonta, prored, poravnavanje...).
Processing dokument je definiran u fiksnoj veličini, kao i fontovi, stoga ne postoji mogućnost da se odabrani font ne prikazuje u željenom obliku i veličini na korisničkoj strani. Ova činjenica znači da se dizajnerska ideja može u potpunosti prenijeti na korisničko sučelje, bez gubitaka i izmjena podataka. Za razliku od ostalih programskih jezika, koji imaju unaprijed zadane fontove (koje nije potrebno pozivati), u processingu se font obavezno poziva te se time zadržava njihov izgled.
Ključne riječi: Processing, univerzalan prikaz, fontovi

1. Uvod
Okruženje Processing jezika je Java. Programi napisani u Processing-u se prevode u Java programski jezik i pokreću kao Java aplikacija. Najčešće će se pokretati brže od programa baziranih na skriptim jezicima kao što je ActionScript, što je posebno važno kod mnogih grafičkih aplikacija.
Najveća razlika između Processing-a i Java programskog jezika je što Processing nudi jednostavno sučelje za programiranje koje ne zahtjeva napredne koncepte programiranja kao što su klase, objekti ili animacija ujedno omogućujući naprednim korisnicima njihovo korištenje. Zbog toga su programi kraći i čitljiviji.
Processing koristi razne pristupe renderiranja tipografije uključujući i rasterska i vektorska rješenja. Povijesno gledajući, grafički dizajneri su tipografiju na Webu mogli oblikovati pomoću standardnih i sveprisutnih fontova (koji se mogu nać na kompjutorima svih korisnika) ili koristeći kompliciranija, memorijski zahtjevnija te nepredvidiva rješenja. Processing omogućuje programiranje i prikazivanje tipografije na Web-u neovisno o korisničkom Web pregledniku i bazi fontova.

2. Definicija processinga
Processing povezuje koncepte programiranja sa pricipima vizualne forme, pokreta i interakcije. On integrira programski jezik i razvojno okruženje u jedinstveni sistem. Kreiran je za učenje osnova kompjuterskog programiranja unutar vizualnog konteksta.
Jezik Processinga je specifično namijenjen za generiranje i modificiranje slika. Cilj mu je dostići ravnotežu između jasnoće (jednostavnosti) i naprednih mogućnosti, tako da je prilagođen i amaterima i naprednim programerima. Sistem omogućava korištenje i izradu kompjutorske grafike i interakcije uključujući vektorske/rasterske crteže, procesiranje slika, boje, događaje, mrežnu komunikaciju i objektno programiranje. Također ima mogućnost generiranja zvuka, slanja i primanja podataka u raznim formatima te slanja i primanja 2D i 3D datoteka.
Processing je otvorenog formata što omogućuje svima da se njime bave i da ga razvijaju bez obzira na financijske mogućnosti.
Osnova jezika je Java koji također dijeli elemente sa C programskim jezikom te time omogućava brži razvitak i razumljivost programerima upoznatim tim programskim jezicima.
Zato što je Processing inicijativa potekla od Web-a, njegova dokumentacija je napisana u HTML-u i dizajnirana da iskoristi prednosti preglednika. Java API (application programming interface) se također bazira na HTML-u, stoga HTML omogućava i Processing i Java dokumentaciji da ugrade hiperveze te omogućavaju jednostavno povezivanje između srodnih struktura i koncepata.

3. Problem prikazivanja fontova na webu
Tipografija je jedan od aspekata dizajna na Webu koji predstavlja problem. Dugo vremena postojala je mogućnost ograničenog izbora fontova i veličina. Nakon pojave CSS-a i njegove standardizacije, mogućnosti su se proširile. Međutim, i dalje se susrećemo s problemima prikazivanja fontova na Webu. Neki od problema su:
- Određeni fontovi nisu dostupni na svim operativnim sistemima.
- Neki oblici fontova su dizajnirani za korištenje na ekranu, dok su drugi zamišljeni za korištenje na papiru. Najčešće, oni namijenjeni za papir nisu funkcionalni na ekranu.
- Veličina teksta ovisi o rezoluciji ekrana i operativnom sistemu.
- Izgled teksta ovisi također o vrsti preglednika koji se koristi.
- Korisnici sami odabiru različite postavke početnih vrijednosti za svoje kompjutere i preglednike.

4. Tipografija u processingu
Problem dizajniranja Web stranica je inkompatibilnost sistema, kao što su instalirani fontovi, koji će često biti drugačiji od kompjutera do kompjutera i unutar raznih platforma. Jedno rješenje je da se koristi limitirana serija fontova za koju se može pretpostaviti da je instalirana na svim sistemima kao što su Arial i Times. Međutim, sa dizajnerske perspektive, to je prilično limitiran sistem. Drugo rješenje je da se određeni znakovi pretvore u bitmap slike te na taj način osigura namijenjeni dizajn bez obzira na instalirane fontove na korisničkom kompjuteru.
U Processingu, naredba Create Font točno to i učini. Omogućeno je biranje bilo kojeg fonta iz baze podataka, njegova veličina, anti-aliasing. Generirani font je kopija postojećeg fonta iz vašeg sistema, kreirana u VLW formatu i instalirana unutar poddirektorija trenutnog Processing dokumenta koji se automatski kreira.
Problem ovog pristupa prikazivanja fontova je količina memorije koju zauzima. Što se veća veličina fonta definira, više memorije će font zauzet zato što font podrazumijeva stvarnu rastersku informaciju potrebnu da se nacrta svaki znak. Inače se fontovi kreiraju na bazi vektora. Smooth opcija također zauzima više memorije kao i opcija All Character koja omogućuje prikazivanje ne-engleskih znakova kao čćžšđ. Sa ove dvije opcije uključene font zauzima gotovo duplo više memorije nego bez njih.
Da bi se slova mogla prikazivati u Processingu, font se mora kovertirati u VLW format. Kovertiranje fonta se postiže pomoću alata Create Font.Može se kovertirati bilo koji font koji je instaliran na dotičnom sistemu. Odabrani font se generira i kopira u poseban direktorij unutar trenutnog programa. VLW format sprema svaki slovni znak kao sliku, omogućuje brzo renderiranje teksta i objedini font sa slikom.
Prije korištenja fonta u programu, mora se učitati i postaviti kao trenutni font. Processing ima jedinstven tip podataka PFont koji sprema informacije o fontu koji se koristi. Font se poziva kao varijabla a učitava pomoću funkcije loadFont(). Funkcijom textFont() se postavlja trenutni font. Text() funkcija se koristi za iscrtavanje znakova na ekranu uključujući njihovu poziciju. Tekstu se mogu odrediti boja, opacitet, širina i visina paragrafa, prored te poravnavanje.
Fontovi u Processingu su definirani kao slike, a ne vektori. Ukoliko kreirani font određene veličine postavimo na veću veličinu od definirane, fontu će se narušiti njegov izgled.
Veličina fonta se naknadno može mijenjati pomoću funkcije textSize() ili unutar funkcije textFont().
Processing podržava ASCII i Unicode kodiranje slovnih znakova. Ukoliko želimo koristiti znakove kojih nema u ASCII kodu, poželjno je svaki znak zamijeniti njegovim kodom kako bi se izbjegli problemi otvaranja iste datoteke na drugim platformama. Takav kod se sastoji od niza znakova: \u nakon kojeg slijedi heksadecimalna vrijednost znaka iz Unicode-a. Na primjer slovo Š će se zamijeniti kodom \u0160. Da bi mogli koristiti karakteristične znakove pri kreiranju fonta je potrebno uključiti opciju All Characters.

5. Naš primjer
Kao primjer korištenja tipografije u Processing-u izradile smo aplikaciju koja se sastoji od prozora definirane veličine unutar kojeg možemo pisati tekst određenog fonta i veličine. Također smo definirale način prebacivanja teksta u novi red te korištenje tipke enter i backspace. Prilikom kreiranja fonta uključile smo opciju all characters čime smo omogućile korištenje svih znakova dotičnog fonta.
Program:
// definiranje varijabli
PFont f;
int leftmargin = 10;
int rightmargin = 30;
int bottommargin = 10;
int font_size = 48;
int space = 4; // razmak između redaka
int max_width; // maksimalna širina prozora koja se smije
// koristiti za tekst
int max_height; // maksimalna visina prozora koja se smije
// koristiti za tekst
int current_ypos; // trenutna pozicija po y
boolean type = true; // smije li se dalje pisati (false ako je // doslo do dna)
String buff = ""; // sav tekst
String buff_temp = ""; // tekst trenutnog retka

void setup() // određivanje veličine prozora, pozivanje fonta
{
size(400, 400);
max_width = width - leftmargin - rightmargin;
max_height = height - bottommargin;

f = loadFont("Verdana-48.vlw");
textFont(f, font_size);
}

void draw() // boja pozadine i teksta, pozicioniranje
{
background(50,25,85);
fill(245,211,0);

translate(leftmargin, font_size + space);
current_ypos = font_size + space;

char k;
buff_temp = ""; // na početku procesiranja cijelog teksta, // prva je linija uvijek prazna

for(int i = 0; i < buff.length();i++)
{
k = buff.charAt(i);
buff_temp = buff_temp + k;
// dodajemo tekući znak u trenutni redak
type = true;
// ako je trenutni redak širi od maksimalne širine ili ako
// je trenutni znak ENTER
if(textWidth(buff_temp) > max_width || k == '\n')
{
// ako je širina trenutnog retka veća od maksimalne širine,
// prelazimo u novi redak,
// dakle, pomjerimo se po y za font_size + space i vratimo na // početak reda znajući da
// smo trenutno na poziciji širine trenutnog retka minus
// trenutni znak (kojeg još nismo ispisali)
translate
(-textWidth(buff_temp.substring(0,buff_temp.length()-1)), font_size+ space);
current_ypos = current_ypos + font_size + space;

// pošto smo prešli u novi redak, u novom retku se nalazi
// trenutno slovo
buff_temp = "" + k;
}

// ako smo došli do dna onda postavljamo type na false i
// mičemo trenutni znak iz buff
// (jer niti ne stane na ekran) niti će se nacrtati, u
// suprotnom ispisuje se trenutni znak
if(current_ypos > max_height)
{
type = false;
buff = buff.substring(0,buff.length()-1);
}
else
{
text(k,0,0);
translate(textWidth(k), 0);
}
}

// iscrtavanje kursora i njegova pozicija
if((millis() % 500) < 250)
{
noFill();
}
else{
fill(0,159,98);
stroke(0);
}
rect(0, -(font_size-5), 10, 45);
}

void keyPressed() //definiranje backspace-a
{
char k;
k = (char)key;
switch(k){
case 8:
if(buff.length()>0){
buff = buff.substring(0, buff.length()-1);
}
break;

default:
// ako nismo dosli do dna, dodajemo znak u buff
if(type == true)
{
buff=buff+k;
}
break;
}
}

6. Zaključak
Tipografija digitalnog doba susreće se sa novim izazovima koji su nametnuti velikim brojem raspoloživih tehnologija. Zbog različitih potreba korisnika nužno je osigurati univerzalan prikaz dizajnerskih ideja bez obzira na njihovu primjenu. Vremenom su se razvili brojni grafički programski jezici koji nude drugačije solucije ali i razna ograničenja. Našim primjerom u Processingu smo pokazale da je moguće kreativno korištenje svih tipografskih rješenja koja uključuju i karakteristične znakove hrvatskog jezika. Fiksnom veličinom prozora aplikacije, kreiranjem posebnog formata fonta te njegove veličine osigurale smo jednak prikaz aplikacije na svim sučeljima. Međutim, ograničenja ovog načina korištenja fontova u Processingu su veličina iskorištene memorije, pretvaranje fonta u bitmap sliku te obaveza instaliranja Java plug-in-a. Processing je moćan alat za dizajniranje grafike na Web-u te pokazuje da tipografija neće ostati samo sredstvo prenošenja tekstualnih informacija već obogaćuje mogućnosti dizajnerskog izražavanja.