Logo v MetaPost-e

Môj prvý blogpost sa bude týkať tvorby loga, ktoré programátor chce použiť či už pre svoju webovú stránku alebo program. Cieľom bude vytvoriť logo pre môj dlhodobý projekt emuStudio (emulačná platforma a framework).

Kde si dnes človek môže nakresliť relatívne rýchlo logo, aké chce? Áno, predstavte si, že nápad už máte. V mojom prípade nápad na logo by sa mal týkať počítača, už len preto, čo znamená pojem emulátor. Ide o program, ktorý napodobňuje prácu nejakého iného počítača. Táto vlastnosť potom väčšinou umožňuje spustiť programy pre napodobovaný počítač, ktoré na reálnom počítači nemôžu bežať, a to hlavne z dôvodu nekompatibility. Keď som si to predstavil “graficky”, vytvoril sa mi obraz počítača v počítači. A to sa stalo ústrednou myšlienkou loga.

Počítač sa v dnešnej dobe kreslí väčšinou ako monitor, pod ktorým je klávesnica:

Predtým sa počítač zas kreslil ako monitor, vedľa ktorého stál minitower:

A ešte predtým počítač zas vyzeral tak, že monitor stál na podlhovastej “bedni”:

A práve tento posledný typ sa mi páči. Takže potrebujeme bedňu a monitor. Na logo “počítač v počítači” teda stačia štyri obdĺžniky.

Moje prvé kroky viedli na internet. Hľadal som niečo jednoduché, proste pekný “computer clipart”. A podarilo sa mi nájsť veľmi pekný a hlavne free clipart, ktorý sa mi zapáčil ako základ pre moje nové logo (zo stránky 4vector.com):

Kde si dnes človek môže nakresliť logo?

Bohužiaľ nie som ani grafik, ani umelec, ani frontend developer, takže s grafikou mám pramálo skúseností. Napriek tomu, ak by som mal niečo reálne nakresliť, ako prvé mi napadlo použiť grafický editor. Napríklad open-source program Inkscape na vektorovú grafiku alebo GIMP na rastrovú grafiku.

Po prezretí si niekoľkých “grafických” projektov na GitHub-e (väčšinou ikony alebo logá - numix-icon-theme, logos, gnome-icon-theme, paper-icon-theme, oranchelo-icon-theme) som zistil, že vo všetkých z nich sa ako zdrojový formát používa SVG. SVG, keďže ide o vektorový formát, je potom použitý ako zdroj buď pre generovanie výsledných formátov, alebo rôznych veľkostí obrázkov pre rôzne použitie.

Grafici na GitHub teda neukladajú svoj “projekt” grafického programu. Všetky vrstvy, pomocné čiary a podobne ostanú v “projekte” grafického programu u nich na počítači a tento nie je verejný. Zamýšľam sa - prečo? Možno že si autor chce ponechať výhradné právo na akékoľvek pomocné prvky, ktorými dospel k výslednému obrázku? Alebo je to tým, že projektový súbor predpisuje použitie grafického programu a sám o sebe licenčne nedovoľuje jeho uvoľnenie ako open-source? Neviem.

Keby som si mal nakresliť logo, samozrejme ja projektový súbor mať budem. A zdieľať ho asi tiež môžem, snáď. Avšak, keďže som viac programátor ako grafik, existuje “programátorská” alternatíva?

Alternatíva

Existuje. Skutočne “naprogramovať” logo môžeme napríklad pomocou programov, ako je MetaPost, Dot (GraphViz) alebo TikZ pre LaTeX. Výhodou tohto prístupu je, že obrázok vo forme zdrojového kódu je ľahko modifikovateľný, hocikto môže pridávať a odoberať prvky a nemusí byť žiadny umelec, a nakoniec vieme si ho pekne držať v git-e.

Nevýhodou - snáď - je to, že zložitejšie tvary, krivky alebo objekty s dynamickými efektmi kreslíme využitím jednak jazyka samotného, jednak afinných transformácií = matematiky.

Všetko však záleží od požiadaviek a od vlastných schopností. Ja som sa rozhodol pre MetaPost, zrejme preto, že logo, ktoré chcem nakresliť, je jednoduché, chcel som si to skúsiť a viac sa spolieham na napísaný text inštrukcií, ako obrázok nakresliť, než na WYSIWYG ťahanie myši. Rád by som, aby moje logo bolo geometricky presné.

MetaPost

Je to kombinácia programovacieho jazyka a jeho interpreta, ktorý generuje výstup do PostScriptu (EPS), ale výstupom môže byť aj SVG alebo PNG formát. Vychádza z programu s názvom Metafont od Donalda Knutha. Metafont však vznikol za účelom vytvárania rastrových fontov. Jazyky sú však podobné - pomocou algebraických definícií a zápisov vieme vytvárať geometrické objekty, manipulovať s nimi a aplikovať transformácie.

Takže v mojom prípade logo napíšem ako postupnosť takýchto definícií - obdĺžnikov, čiar a bodov, niektoré plochy vyfarbím a budem mať počítač nakreslený. Potom vezmem tento počítač, nakreslím ho znova, ale zmenšený do monitora toho väčšieho počítača. A hotovo.

Jazyk MetaPost-u som sa nijak zvlášť nepotreboval učiť - na moje požiadavky, až na pár základných vecí. Jazyk je podľa mňa dosť divný. Myslím si, že väčšina populárnych programovacích jazykov vychádza zo syntaxe C, ale jazyk MetaPost-u sa k tomu veľmi nedá prirovnať. Vychádzal som hlavne z manuálu a z nejakých príkladov a ďalších príkladov.

Kód loga umiestnime do súboru s príponou .mp, teda napr. logo.mp. Základná štruktúra programu je nasledovná:

prologues:=3;
outputtemplate:="%j-%c.svg";
outputformat:="svg";

beginfig(1);
  % ...
endfig;

end.

Takže vidíme, že príkazy musia byť zakončené bodkočiarkou. Prvé tri riadky som skopíroval z manuálu. Lepšie vysvetlenie premennej prologues však nájdeme v manuáli MetaPost-u. Hodnota 3 zabezpečuje správne zahrnutie použitých fontov do výstupu; nejde o nastavenie orezania obrázka.

outputtemplate definuje šablónu názvu výstupného súboru, pričom %j zastupuje tzv. “job name”, ktorý odpovedá menu vstupného súboru bez prípony (teda v našom prípade logo), a %c je číslo obrázka. A outputformat je snáď jasný. Okrem svg môžeme použiť png alebo eps (na veľkosti písmen záleží).

Ako ste si už iste všimli, súbor môže obsahovať popis aj niekoľkých obrázkov, každý z nich je označený číslom za beginfig. Takže to %c v šablóne outputtemplate je toto číslo.

Logo v MetaPost-e

Kreslenie v MetaPoste je vlastne zábava. Predstavte si, že logo sa skladá z určitých komponentov, ktoré majú svoje parametre, napr. bedňa počítača je obdĺžnik, ktorého parametre sú šírka a výška, prípadne farba. Môžeme si vytvoriť makro, ktoré vezme tieto parametre a nakreslí bedňu. V makre môžeme definovať aj iné komponenty, ktoré bedňu prikrášlia, napríklad vodorovnú čiaru, ktorá bude reprezentovať floppy disk, a pod. Makro na nakreslenie bedne môže vyzerať nasledovne:

A výsledok:

Ako vidno, v kóde sa vieme pekne vyhrať. Nie je to nič zložité, len musíme trochu porozumieť, ako to celé funguje. Napríklad, do premennej p som si uložil cestu (typ path), čo je vlastne akoby cesta v grafe, ktorým je fiktívna mriežka dvojrozmerného priestoru. S touto cestou si môžeme robiť, čo chceme - môžeme ju vykresliť alebo vyplniť (ak je uzavretá), atď.

Moju “cestu” - teda hlavný obdĺžnik bedne - som vytvoril pomocou pomocnej konštanty (podľa manuálu) unitsquare, ktorá reprezentuje cestu (0,0)--(1,0)--(1,1)--(0,1)--cycle. Názov “unit square” hovorí, že ide o “jednotkový štvorec”. Ak chceme z neho spraviť obdĺžnik, musíme ho dobre “ponaťahovať”. To dosiahneme pridaním xscaled a yscaled parametrov, ktoré zo štvorca spravia obdĺžnik.

Túto cestu potom použijeme jednak na vykreslenie obrysu bedne (draw), a jednak na podfarbenie bieleho pozadia (fill). Jednoduché, nie? Ak pozadie nechceme, jednoducho vymažeme príkaz fill.

Týmto spôsobom vieme vytvoriť celé logo, môžeme sa s tým vyhrať do ľubovôle a snažiť sa kód napísať pekne. Kód výsledného loga je tu:

A vyzerá nasledovne:

Čo ďalej

No tak zdroj SVG máme - teraz môžeme pokračovať tak, ako to robia ostatní. Napríklad, keďže MetaPost umožňuje písanie parametrických makier, môžeme si vygenerovať rôzne verzie loga pre webovú stránku. Napríklad - hlavné logo pre banner na úvodnej stránke alebo malé logo na hornú lištu, atď. Ak je viac rôznych verzií loga alebo ak sme vytvorili celú sadu ikon či obrázkov takýmto spôsobom, výsledné SVG súbory môžeme zabaliť do web-fontu, napríklad pomocou WebFont Generátora.

Taktiež, výsledné SVG treba pred použitím optimalizovať, čím sa redukuje veľkosť súboru. Môžeme na to použiť napríklad program svgo.

Na záver - nemyslím si, že MetaPost je tou správnou voľbou pre všetky typy lôg alebo ikon. Výhodou, ktorú prináša, je hlavne matematická presnosť a možnosť využiť reálne dáta pri tvorbe obrázka. K dispozícii máme napríklad generátory pseudonáhodných čísel (uniformné alebo normálne rozdelenie), riadenie presných uhlov natočenia kriviek, čím sa dajú vytvárať veľmi zaujímavé tvary, cykly, podmienené vykonávanie a makrá. MetaPost toho dokáže oveľa viac, avšak na to treba vedieť lepšie jazyk MetaPost-u, ale často už aj algebraické vyjadrenie grafiky.