Tvorba výučbového programu robot Karel

Transcription

1 Škola pre mimoriadne nadané deti a gymnázium Teplická 7, Bratislava Stredoškolská odborná činnosť 02 Matematika, fyzika, informatika Tvorba výučbového programu robot Karel Tomáš Belan Alexander Mravčák Septima Bratislava 2009

2 Škola pre mimoriadne nadané deti a gymnázium Teplická 7, Bratislava Stredoškolská odborná činnosť 02 Matematika, fyzika, informatika Tvorba výučbového programu robot Karel Tomáš Belan Alexander Mravčák Septima Konzultant: Mgr. Anton Belan Bratislava 2009

3 Obsah 0 Úvod Popis jazyka Gramatika jazyka Vstavané príkazy Vstavané podmienky Riadiace štruktúry Príklady Program Karel zvnútra Popis grafiky Steampunk História steampunku Prvky steampunku Prvky grafického užívaťeľského rozhrania Nároky na grafické užívateľské rozhranie Nároky na jednotlivé prvky D modely Nároky na jednotlivé modely Tvorba grafiky Okno Panel nástrojov Posuvník Tlačidlo Editovateľné políčko Zaškrtávacie políčko Ikony Robot Tehla a plot Záver Summary (English)...21 A Steampunk...1 B Okno...2 C Panel nástrojov...4 D Posuvník...5 E Tlačidlo...7 F Editovacie políčko...8 G Zaškrtávacie políčko...9 H Ikony...10 I Robot...11 J Tehla...13

4 0 Úvod V roku 1981 vytvoril R. E. Pattis, americký profesor počítačovej vedy, výučbový programovací jazyk Karel1. Jeho hlavným aktérom je robot, ktorý chodí po ploche, kreslí na ňu značky a vykonáva zadané príkazy a programy. Bol určený ako jednoduchá učebná pomôcka pre úplných začiatočníkov, a svoj účel splnil. O jeho úspechu a popularite svedčí to, že inšpiroval mnoho ďalších verzií a klonov. Mnohé boli len prekladmi anglického originálu, aby jazyková bariéra neodradila jeho používateľov. Niektorí ale jazyku pridali nové možnosti. V roku 1989 spravili A. Blaho a M. Vítek na Univerzite Komenského novú slovenskú verziu Karla, v ktorej (na rozdiel od pôvodnej) robot dokáže stavať tehly a objavovať tak tretí rozmer. Táto verzia sa úspešne používala pri výučbe informatiky na rôznych slovenských školách. Karel má ako školský jazyk pre začiatočníkov mnohé výhody: je textový, naučí menšie deti používať a nebáť sa klávesnice, ale pritom vďaka dopĺňacím funkciám väčšinou nemusia písať. Je jednoduchý obsahuje len úplne základné programovacie koncepty, nie sú v ňom ani premenné či argumenty funkcií. Je zaujímavý má vhodné grafické spracovanie, a deti zaujme práca s ním. Tá grafická stránka je ale problematická. Nech je program z roku 1989 akokoľvek kvalitný, dnes už zaujme len málokoho. Rozhodli sme sa pokúsiť sa spraviť novú verziu, so skutočnou (nie len izometrickou) 3D grafikou, príťažlivým dizajnom, a celkovo vynoveným prostredím aj jazykom. Medzi ciele tohto projektu patria vylepšenia v týchto oblastiach: výrazne zjednodušená syntax jazyka, rozšíriteľnosť (skriptovateľný engine a framework, flexibilná gramatika, nové primitíva, či priam celé svety ), multiplatformnosť, open-source licencia, pokročilý editor s plynulou podporou drag-and-drop kódu, a hlavne, elegantná 2D aj 3D grafika v štýle steampunk. Chceli by sme sa poďakovať nášmu konzultantovi Mgr. Antonovi Belanovi a oponentovi Mgr. Viliamovi Búrovi za ich pomoc, podporu a cenné pripomienky pri tvorbe tejto práce. Chceli by sme sa tiež poďakovať autorom softvéru, ktorý sme použili, zvlášť programovacieho jazyka Lua, knižnice SDL a systému správy verzií Git. 1 Karel je nazvaný na počesť Karla Čapka, českého spisovateľa, ktorý zaviedol slovo robot. 3

5 1 Popis jazyka Táto kapitola obsahuje podrobný popis jazyka Karel, jeho presnej gramatiky a vstavaných príkazov. 1.1 Gramatika jazyka Takmer každý variant Karla má rovnaké príkazy, ale celkom inú gramatiku. Pri tvorbe gramatiky pre náš projekt sme mali toto kritérium: Gramatika musí byť jednoducho pochopiteľná, ale tiež jednoducho spracovávateľná. Spätná kompatibilita nehrala úlohu existuje toľko rôznych variantov Karla, že by sa ani nedalo určiť, z ktorého by naša gramatika mala vychádzať. Projekt v Karlovi sa skladá z prostredia (scény, miestnosti), čiže pozícii Karla a predmetov, ktoré položil, a funkcií, čiže vykonateľných príkazov, ktoré používateľ Karla naučil. Funkcia je rozdelená do riadkov. Riadky obsahujú príkazy na každom riadku je jeden príkaz. (Iné jazyky majú oddeľovač príkazov, často bodkočiarku, a môžu mať na jednom riadku aj viacero príkazov. Tu nič také nie je.) Existuje niekoľko riadiacich štruktúr (viď nižšie) príkazov, ktoré majú špeciálne vlastnosti. Všetko ostatné sa vykonáva tak, ako je. Používateľove funkcie môžu mať takmer ľubovoľný názov, len sa nesmú dať zameniť s riadiacimi štruktúrami, alebo anglickými názvami vstavaných príkazov. Môžu obsahovať aj medzery. (A odporúča sa to programy sa čítajú ľahšie, ako keby to boli podčiarkovníky či bodky.) To vďaka tomu, že na každom riadku je práve jeden príkaz, takže nevznikne nejednoznačnosť. Jazyk má len jediné chybové hlásenie neznámy príkaz. Karel ho vyhlási vtedy, keď nejakému riadku nerozumie nie je to ani riadiaca štuktúra, ani používateľova funkcia, ani vstavaný príkaz. Aby boli programy dobre čitateľné, vstavaný editor riadky automaticky odsadzuje. Tiež vynucuje, že nikde (okrem odsadenia) nesmie byť viacero medzier za sebou. Vstavané príkazy a riadiace štruktúry môžu byť preložené. Napríklad step je to isté, čo krok, a repeat 5 times je to isté, čo opakuj 5 krát a opakuj 5 ráz. Toto umožňuje pohodlnú tvorbu preložených poddialektov jazyka, a jednoduchú konverziu programov z jedného do druhého. 4

6 Slovenský preklad je spravený tak, aby bolo možné písať program na anglických klávesniciach bez diakritiky napríklad vľavo bok je to isté čo vlavo bok. Mohlo by sa stať, že slovenský programátor vytvorí vlastný príkaz vlevo vbok, a v myslenom českom preklade sa bude tento príkaz miešať so vstavaným vlevo vbok. Keď sa tento projekt otvorí v českej verzii, Karel to vyrieši tak, že používateľov vlevo vbok ponechá (potlačí vstavaný príkaz) a tam, kde sa robot skutočne má otočiť doľava (kde v pôvodnej slovenčine bolo vľavo bok), dá anglický príkaz turn left. Anglické verzie príkazov sa nedajú potlačiť. 1.2 Vstavané príkazy Pri každom príkaze je jeho základné anglické meno a jeho slovenský preklad. Ak používateľ pôvodne používal iný preklad Karla, mohol v ňom spraviť funkciu, ktorá sa volá rovnako ako preklad jedného z týchto príkazov. Vtedy má používateľova funkcia prednosť. (Viď vyššie.) step (krok) Karel postúpi o políčko vpred. Ak mu bráni plot, alebo by musel výjsť hore o viac ako jednu tehlu, nespraví nič. turn left (vľavo bok) turn right (vpravo bok) Karel sa otočí o 90 doľava, resp. doprava. add brick (polož tehlu) Karel položí na políčko pred sebou tehlu. Ak mu bráni plot, alebo je tam už priveľa tehál a nedočiahne (jeho výška, resp. dosah, je štandardne 10), nespraví nič. remove brick (zober tehlu) Karel zoberie z políčka pred sebou tehlu. Ak mu bráni plot, alebo je tam priveľa tehál a nedočiahne na vrch (jeho výška, resp. dosah, je štandardne 10), alebo je tam primálo tehál a nedočiahne na ňu (dosiahne len na tehlu na jeho pozícii), alebo tam žiadna tehla nie je, nespraví nič. Príklad: Karel stojí na stĺpiku štyroch tehál. Ak je pred ním políčko, na ktorom sú 5

7 štyri až štrnásť tehál (vrátane), môže odtiaľ zobrať tehlu. Inak už nedočiahne. add fence (polož plot, postav plot) Karel pred sebou postaví plot, ak tam ešte nie je. (Plot je na hranici medzi dvoma políčkami.) remove fence (zober plot, znič plot) Karel zničí plot pred sebou, ak tam nejaký je. Ak by tým zničil plot na kraji miestnosti, nespraví nič. (Tento plot je neviditeľný, lebo by zhoršil viditeľnosť do miestnosti.) add mark (polož značku, označ) Karel na políčku, kde stojí, spraví značku (vyšle sondu) s číslom 1. Ak tam už je, tak zvýši jej číslo o 1. Maximum je 999. remove mark (zober značku, odznač) Karel zníži číslo značky (sondy) na políčku, kde stojí, o 1, prípadne ju celkom zruší, ak by číslo kleslo na nulu. Ak tam žiadna nie je, nespraví nič. true (pravda) false (nepravda) Používa sa pri tvorbe používateľových vlastných podmienok. Podmienka pomocou týchto príkazov dá najavo, či je pravdivá, alebo nie. Ak použije true alebo false viac ráz, použije sa to, čo bolo použité posledný raz. Ak sa nepoužije ani true, ani false, berie sa, že je pravdivá. return (vráť sa) Skončí vykonávanie momentálnej funkcie, ako keby Karel prišiel na jej koniec. 1.2 Vstavané podmienky Podmienky sú výrazy, ktoré sú v určitom momente buď pravdivé, alebo nie. Napríklad je voľno je podmienka. Okrem vstavaných podmienok môže používateľ Karla naučiť nové podmienky. Podmienka sa vyrába úplne rovnako, ako bežná funkcia, ale príkazmi true a false (viď vyššie) dá najavo, či je pravdivá alebo nie. 6

8 Podmienky sa používajú ako súčasť riadiacich štruktúr if a while (viď nižšie). Môžu sa síce použiť aj ako bežné príkazy, ale tak sa nedá zistiť, či sú pravdivé. Keď sa za if alebo while pred podmienkou napíše slovo not (nie), význam podmienky sa obráti. Napríklad nie je voľno má opačný význam, ako je voľno. Za povšimnutie stojí, že táto gramatika niekedy nie je samozrejmá a neodráža ľudský jazyk. Napríklad Karel rozumie príkazu if not front is clear then, aj keď v angličtine by sme mali povedať skôr if front isn't clear. front is clear (je voľno) Pravda, ak Karel môže pokročiť vpred nebráni mu plot ani privysoký múr. facing brick (je tehla) Pravda, ak je na políčku pred Karlom aspoň jedna tehla (a nebráni mu vo výhľade plot). facing fence (je plot) Pravda, ak je pred Karlom plot. on mark (je značka) Pravda, ak je na políčku, kde Karel stojí, značka. on cliff (na útese) Pravda, ak Karel môže pokročiť vpred, ale nebude sa môcť (priamou cestou) vrátiť späť políčko pred ním je nižšie o viac ako 1 tehlu. 1.3 Riadiace štruktúry Existujú riadiace štruktúry, ktoré sú ako príkazy zložené z viacerých riadkov. Prvý riadok (samotná riadiaca štruktúra) nejakým spôsobom ovplyvňuje vykonávanie riadkov, ktoré mu patria sú v jeho tele. Riadiace štruktúry končia ukončovacou značkou. Môžu byť aj vnorené (napríklad vnútri ak môže byť ďalší ak). Tu je príklad riadiacej štruktúry: opakuj 8 ráz krok polož tehlu koniec riadiaca štruktúra telo - podpríkazy (automaticky odsadené) ukončovacia značka 7

9 Existujú tieto riadiace štruktúry: repeat n times (opakuj n krát, opakuj n ráz) príkazy end (koniec, stačí) Zopakuje príkazy vo svojom vnútri daný počet krát. n musí byť prirodzené číslo od 1 do haste (rýchlo) príkazy end (koniec, stačí) Rýchlo vykoná príkazy vo svojom tele. Miesto toho, že by sa pre každý príkaz zobrazila samotná animácia, vyhodnotia sa všetky naraz a zobrazí sa len konečný stav. (Tento príkaz nemá žiaden vplyv na výsledok, ovplyvňuje len, ako rýchlo sa ten výsledok zobrazí.) if podmienka then (ak podmienka tak) príkazy ak áno else (inak) príkazy ak nie end (koniec, stačí) Podľa toho, či je podmienka pravdivá alebo nie, Karel vykoná buď príkazy ak áno, alebo príkazy ak nie. Časť else príkazy ak nie je nepovinná. while podmienka do (kým podmienka rob) príkazy end (koniec, stačí) Ak je podmienka pravdivá, vykonajú sa príkazy. Keď sa vykonajú všetky, znovu sa otestuje, či je stále podmienka pravdivá, a ak hej, znovu sa vykonajú príkazy. Keď po vykonaní príkazov (alebo na začiatku) už podmienka nie je pravdivá, Karel pokračuje v programe ďalej. 1.4 Príklady Kompletná učebnica, ktorá Karla používa, aby zoznámila žiakov s programovaním, je mimo rozsahu tejto práce, ale na ukážku, tu je niekoľko príkladov kódu. 8

10 Úloha: Spravte príkaz ohrada, ktorý Úloha: Spravte príkaz hľadaj, ktorý okolo celej miestnosti postaví ohradu nájde v labyrinte cestu ku značke. z tehál. (Môžete predpokladať, že robot na začiatku stojí v rohu a je vhodne otočený.) Ukážkové riešenie používa podobné princípy, ako v príkaze prejdi. Príkaz opakuj 4 krát hľadaj prehľadá celú vetvu bludiska, kým nie je plot rob ktorá leží za políčkom, ku ktorému je robot polož tehlu práve otočený. Na konci každého jeho krok spustenia je robot buď v cieli, alebo presne koniec tam, kde vykonávanie príkazu začal. vpravo bok koniec ak je značka tak vráť sa koniec Úloha: V miestnosti je úzky chodník, ohraničený plotom. Karel stojí na začiatku ak nie je voľno tak vráť sa chodníka. Spravte príkaz prejdi, koniec s ktorým prejde na koniec. krok vpravo bok Ukážkové riešenie používa rekurziu opakuj 3 krát volanie príkazu zo seba samého. hľadaj ak je značka tak vpravo bok vráť sa opakuj 3 krát koniec ak je voľno tak vľavo bok krok koniec prejdi krok vráť sa vľavo bok koniec vľavo bok vľavo bok koniec Existujú aj ťažšie úlohy tu je niekoľko z nich. Ich riešenia sú už zložitejšie a miestami pozostávajú z viacerých podpríkazov. Nájdete ich medzi ukážkovými projektmi priamo v Karlovi. Úloha: Robot je v prázdnej miestnosti. Spravte príkaz pyramída, čo postaví pyramídu najväčšiu možnú, aká sa tam zmestí. Úloha: Karel je na políčku so značkou, ktorá má nejaké číslo. Na políčku pred ním je tiež značka. Zvyšok miestnosti je prázdny. Spravte príkaz vynásob, ktorý vynásobí prvé číslo druhým a výsledok zapíše do značky na políčko vpravo od neho. Úloha: V miestnosti nie sú žiadne značky s číslami rôznymi od 1, ploty ani tehly. Zo značiek je vytvorený obrázok. Spravte príkaz preklop, po vykonaní ktorého bude obrázok horizontálne preklopený. 9

11 2 Program Karel zvnútra Táto kapitola predstavuje úvod do zdrojového kódu programu. Program Karel t.j. samotné prostredie, cez ktoré používateľ Karlovi dáva príkazy a sleduje ich výsledok, editor a kompilátor jazyka sme naprogramovali v jazyku Lua. Tento jazyk bol zvolený, pretože: je interpretovaný pri vývoji netreba po každej zmene nič prekompilovávať, je jednoduchý má len niekoľko základných, ale flexibilných mechanizmov, ktorých použitím môžu vznikať zložitejšie štruktúry a správania2, je rýchly jeden z najrýchlejších interpretovaných jazykov, a ak by to nestačilo, kriticky dôležité časti programu sa môžu prepísať v jazyku C, je rozšíriteľný programy v jazyku Lua majú veľmi dobrú introspekciu, môžu za behu meniť definície tried. Vďaka tomuto môže pokročilejší používateľ napr. vytvoriť vlastné vstavané príkazy. Súčasťou práce je aj podporný framework ULT. Tento nami vytvorený framework obsahuje rozhranie ku vonkajším knižniciam, ktoré program používa, napr. SDL a OpenGL, a niekoľko vedľajších subsystémov. Napríklad vďaka subsystému FS môže Karel načítavať svoje dáta z viacerých dátových súborov, ktoré majú rôznu prioritu. Patche a nové verzie sa dajú distribuovať ako dodatkové dátové súbory, ktoré obsahujú len tie časti, čo sa medzitým zmenili. Ak niekto nejakú časť Karla zmení (je to open-source), tiež môže svoje zmeny distribuovať ako dodatkový dátový súbor. Subsystém Console obsahuje konzolu, do ktorej sa dajú zadávať príkazy v jazyku Lua. Dala by sa prirovnať ku cheat konzolám v rôznych hrách, ale tu je určená skôr ako nástroj na ladenie programu, a rozumie ľubovoľným príkazom v jazyku Lua, nie len niekoľkým špeciálnym prípadom. Karel používa OOP, snaží sa minimalizovať globálne premenné a jedináčikov (singletons). Medzi dôležité časti programu patria zvlášť tieto: ProgramNode je srdce editora a kompilátora jazyka. Každý riadok kódu v jazyku Karel je ProgramNode. Funkcia ProgramNode:updateState() určí 2 Samotný jazyk Lua napríklad neposkytuje OOP služby, ale má tzv. metatabuľky, ktorých vhodným použitím sa dá implementovať dedičnosť, preťažovanie atď. 10

12 rodiča a správne odsadenie daného riadku, zistí pomocou regulárnych výrazov, či ten riadok obsahuje riadiacu štruktúru, a vytvorí jeho predpripravenú formu, interne nazývanú bytecode. Nejde o binárny zápis ani nič podobné, pozostáva len z názvu príkazu a čísiel riadkov, kde má vykonávanie pokračovať, podľa toho, či ten príkaz (resp. podmienka) je pravdivý alebo nie. S pomocou tohto ide spraviť if, while aj ostatné riadiace štruktúry. Upravením tejto funkcie v zdrojovom kóde programu idú pridať aj celkom nové. ProgramNode obsahuje aj všetko okolo editora príkazov a jeho podpory dragand-drop. Vďaka tomu je možné jednotlivé riadky, alebo aj celé riadiace štruktúry aj s ich telom naraz, myšou chytiť a presunúť ich do inej funkcie. Používatelia nemusia veľa písať, ak nechcú môžu celý program poskladať po jednotlivých riadkoch myšou. Machine zoberie bytecode, ktorý predtým vytvoril ProgramNode, a vykoná ho. Stará sa o Karlov zásobník volaní (call stack), a tiež zabezpečuje, že ak používateľ uloží projekt, keď je Karel uprostred vykonávania nejakého príkazu, pri jeho načítaní bude od neho pokračovať ďalej. RoomModel predstavuje prostredie, v ktorom Karel žije. Ako jeho metódy sú definované všetky základné príkazy a podmienky, čo Karel pozná (napr. step a facing fence). RoomView informácie z RoomModel zobrazuje v podobe 3D plochy. Tieto časti robia Karla robotom ich nahradením môže vzniknúť celkom iný svet. Project sa stará o správu, a zvlášť ukladanie, projektu v Karlovi ako takého. Projekty sú uložené vo forme normálneho Lua kódu. To má tú výhodu, že sú čitateľné a upravovateľné aj mimo programu Karla, ale čo je dôležitejšie, ukladanie a načítavanie je veľmi jednoduché. Pri ukladaní sa používajú tie isté introspekčné mechanizmy, ako sa používajú pri hláseniach z Console, a pri načítavaní projektu stačí načítať a spustiť daný Lua program, a všetky objekty RoomModel, Machine atď., budú ako predtým. 11

13 3 Popis grafiky Časť práce spočívala v tvorbe grafiky, čiže užívateľského rozhrania a modelov, v tejto kapitole si teda popíšeme ciele ktoré sme sledovali. 3.1 Steampunk Steampunk je podžáner fantasy a špekulatívnej fikcie, ktorý sa dostal do povedomia na prelome osemdesiatych a deväťdesiatych rokov dvadsiateho storočia. Vychádza z anglického steam, čiže para, a odkazuje na dobu, keď bola táto hlavným zdrojom energie 19. storočie. Predstavuje alternatívny svet, kde sa nachádzajú okrem reálnych prvkov, ktoré do danej doby nepochybne patria, aj prvky vymyslené, či už zo sciencefiction alebo fantasy, ako napríklad roboti či najrôznejšie lietajúce stroje, a taktiež reálne moderné prvky, naštylizované do danej doby napríklad počítač, ktorý môžeme vidieť na obrázku v prílohe A.1. Dnes už ľudia tento termín nepoužívajú len v pôvodnom zmysle, ktorý je obmedzený na literatúru a film, ale aj ako štýl umenia a dizajnu. Steampunk má množstvo fanúšikov, ktorí pretvárajú najrôznejšie veci a dávajú im jeho vizuál (príloha A.2). Podobný bol aj náš cieľ pretvoriť štandardné grafické užívateľské rozhranie (GUI) do steampunkového štýlu a vytvoriť k nemu trojrozmerné objekty História steampunku Prvé knihy, ktoré sa zaraďujú medzi steampunk, začali vychádzať už v 50. rokoch 20. storočia. Za prvý známy televízny seriál v tomto žánri by sa dal považovať Wild Wild West z rokov 1965 až 1969, ktorý bol neskôr spracovaný na celovečerný film. Samotný termín steampunk však vznikol až omnoho neskôr, v roku Jeho pôvodca, autor science-fiction Kevin Wayne Jeter, ho navrhol, keď hľadal spoločný termín pre špekulatívnu fikciu zasadenú do Viktoriánskej éry. Steampunk má korene vo vedeckých románoch 19. storočia, ktoré písali Jules Verne, H. G. Wells, Mark Twain, a Mary Shelley. Za prvý román, ktorý dostal steampunk do širokého povedomia, odborníci považujú Diferenčný Stroj (The Difference Engine), v ktorom ľudia postavili parou poháňaný, 12

14 mechanický počítač a počítačová doba sa tak začala o sto rokov skôr, ako by sa mala Prvky steampunku Medzi charakteristické prvky, ktoré sa vyskytujú v steampunkových dizajnoch, a ktoré sme použili aj v našom programe a modeloch, patria: Kovy ako mosadz, oceľ, meď a železo, často zhrdzavené Zlato a zlaté ozdoby vo Viktoriánskom štýle Nity a skrutky Ozubené kolieska 3.2 Prvky grafického užívaťeľského rozhrania Grafické užívateľské rozhranie ako také sa vyvíjalo desaťročia a vyhranili sa v ňom určité prvky. Keďže naše GUI muselo byť jednoduché, držali sme sa týchto bežných prvkov, ktorými sú: Okno: nachádzajú sa v ňom zoskupené ovládacie prvky, dá sa presúvať po obrazovke. V našom rozhraní je to najprepracovanejší komponent. Panel nástrojov: v angličtine známy ako toolbar, nachádza sa na vrchu okien a zoskupuje ikony na jedno miesto. Posuvník: čiže scrollbar, umožňuje posúvať obsah okna, ak je priveľký a nevidno ho celý naraz. Tlačidlo: používateľ ho môže stlačiť a vyvolať tak nejakú akciu. Editovateľné políčko: umožňuje používateľovi poskytnúť programu text. Používa sa napríklad pri nastavení veľkosti miestnosti. Niekedy môže mať pri sebe dve malé tlačítka šípky na zmenu číselnej hodnoty (spinbox). Zaškrtávacie políčko: dáva používateľovi na výber medzi dvoma stavmi zapnuté (áno) alebo vypnuté (nie) Ikony: štylizované tlačidlá, ktoré miesto textového popisu majú piktogram znázorňujúci účel. Nachádzajú sa na paneli nástrojov. 13

15 3.2.1 Nároky na grafické užívateľské rozhranie Grafické užívateľské rozhranie má byť v steampunkovom štýle (viď vyššie) má používať steampunkové prvky a držať sa základných farieb v tomto prípade hnedej a zlatej. Keďže program môže byť používaný malými deťmi, musí byť rozhranie graficky zaujímavé, dôraz treba klásť na estetickú stránku veci, prinajhoršom aj na úkor praktickosti. Všetko ale musí byť veľmi podobné štandardnému rozhraniu iných aplikácii, aby si naň používatelia rýchlo zvykli Nároky na jednotlivé prvky Okno musí byť zväčšovateľné, takže sa musí skladať aspoň z ôsmych obrázkových častí (štyri rohy a štyri strany). Musí byť elegantné, ale škálovanie musí byť plynulé, takže časti musia vždy plynule nadväzovať. Okno musí mať ovládacie tlačítka na zatvorenie a maximalizáciu, a hlavičku, kde sa zobrazuje názov. Panel nástrojov sa môže umiestniť buď na vrch obrazovky alebo do hornej časti okien. Musí vystupovať z okna, ale nie príliš akurát tak, aby vyzdvihol a nechal vyniknúť ikony, ktoré na ňom budú umiestnené. Posuvník sa skladá z horného a dolného smerového tlačítka, koľajnice a samotnej posúvajúcej sa časti. Podobne ako pri okne, koľajnica sa musí vedieť roztiahnuť na ľubovoľnú veľkosť a vždy správne nadväzovať so zvyškom. Tlačítko môže mať rôzne veľkosti, a tým pádom musí byť zostavené z deviatich častí (štyri rohy, štyri strany a stred) ktoré plynule nadväzujú. Tlačidlo má tri stavy: základný, vysvietený (keď nad ním je myš) a stlačený. Editovateľné políčko môže mať tiež rôznu veľkosť, ale keďže nie je vyplnené, skladá sa z ôsmych častí. Okrem toho môže mať dve malé pridružené tlačítka na zvyšovanie a znižovanie hodnoty. Zaškrtávacie políčko má dva stavy, zapnuté a vypnuté. Má fixnú veľkosť. Ikony pre tlačítka do panelu nástrojov majú vždy rovnakú veľkosť, ale je veľa typov: Nový, Načítať, Uložiť, Kopírovať, Vyrezať, Vložiť, Nastavenia, Pokračovať, Spustiť, Vstúpiť, Preskočiť, Vystúpiť a Vykonať. 14

16 3.3 3D modely Okrem grafického užívateľského rozhrania program potrebuje 3D modely, ako robota a tehlu. Prostredie je trojrozmerné v dnešnej dobe je také už zvykom. Na obrazovke môžu byť tieto predmety: samotný robot Karel, tehla, plot, značka (sonda) a podlaha Nároky na jednotlivé modely Robot, keďže je ústredným prvkom a akýmsi maskotom, musí byť spomedzi modelov najprepracovanejší. Keďže sa pohybuje, musí mať aj tieto animácie: Krok Otočenie sa (vľavo, vpravo) Položiť tehlu Postaviť plot Tehla je v podstate len kváder, ale má na sebe vhodnú textúru. Textúra je tieňovaná, aby bolo na kvádri vidieť hranice medzi hranami. Plot je štvorec s textúrou. Textúra je miestami priesvitná, takže vyzerá, že má komplexný tvar, aj keď je jednoduchý model. Značku predstavuje trojrozmerná sonda. Keďže značky majú čísla, je pri nej v bubline dané číslo napísané. Podlaha je veľká plocha, na ktorej sa opakuje vhodne zvolená textúra. Táto textúra by mala mať inú farbu, ako zvyšné predmety, aby dobre vynikli. 15

17 4 Tvorba grafiky 4.1 Okno Začali sme dizajnom okna. Po prezretí rôznych steampunkových diel sme sa rozhodli, že okno by mohlo byť podobné Viktoriánskemu obrazovému rámu. Prvé náčrty sú v prílohe B.1. Neskôr sme pomocou vektorového editoru urobili počítačový návrh (príloha B.2). Tejto verzii ešte chýbalo tieňovanie a textúrovanie, bol však veľký problém z nej urobiť škálovateľné okno, takže nakoniec nebola použitá. Rozhodli sme sa radšej použiť jednoduchší a pravidelnejší rám. Stiahli sme obrázok obrazového rámu a upravili sme ho, aby bol tenší, ale ozdobná textúra pritom ostala rovnaká. Po vykonaní ostatných vhodných úprav stačilo vyrezať z každej strany vhodnú časť rámu tak, aby mohli plynule nadväzovať. Z iného obrázku rámu sú zase rohové dekorácie. Po doplnení tieňa (aby vystupovali dopredu) a farebných úpravách (aby boli konzistentné so zvyškom rámu) sme ich mohli použiť ako rohy okien. Hlavička okna s názvom je v samostatnom súbore, pretože názov môže mať rôznu dĺžku. Je zložená z troch častí ľavého okraja, stredu a pravého okraja. Sú v nej aj ovládacie tlačidlá na zatváranie a maximalizáciu okna. Vytvorili sme tlačidlá v podobe skrutiek (podľa prvotného konceptu v prílohe B.1). Boli vytvorené ručne s použitím textúry hrdze, verejne dostupnej z internetu (B.3). Krížová skrutka predstavuje zatváracie tlačítko (veď aj väčšinou je na ňom X), a plochá skrutka maximalizačné. Pozadie okna sme zvolili tmavé, aby kontrastovalo so svetlým okrajom. Po niekoľkých pokusoch sme vytvorili pozadie nasledovne: textúru dostupnú z internetu (B.3) sme naukladali do mriežky 2x2, odfarbili sme ju a zafarbili na hnedo. Použitím čierneho štetca so stopou škrabancov sme vytvorili na povrchu tmavé nepravidelné škrabance, potom sme s pomocou špongiového štetca celú plochu ešte raz nepravidelne stmavili. Jednotlivé prvky okna sú v prílohe B.4. V prílohe B.5 je príklad, ako vyzerajú pokope. 16

18 4.2 Panel nástrojov Ako základ pre panel nástrojov slúži pozadie okna. Urobili sme výrez s maximálnou možnou šírkou, a výškou približne na jednu ikonu a text (70 pixelov). Keďže panel je umiestnený na samom vrchu okna, treba ho v spodnej časti graficky oddeliť od pozadia okna za ním. To je dosiahnuté postupným zosvetľovaním smerom nadol, so zachovaním textúry a škrabancov. Keďže to nestačilo, pribudol aj tieň vrhnutý na pozadie okna. Výsledok je v prílohe C Posuvník Ako vidno v prílohe B.1 a B.2, už na začiatku sme sa rozhodli, že posuvník môžu predstavovať dve ozubené kolieska, medzi ktorými je natiahnutá reťaz. Chceli sme, aby sa kolieska pri posúvaní otáčali a reťaz hýbala. Tvarom kolieska je vytvorený vo vektorovom grafickom editore (príloha D.2). V rastrovom grafickom editore sa na neho naniesla textúra (príloha D.2), stmavili sme ho, do stredu sme mu zasadili skrutku (predtým použitú ako tlačítko okna), a celé koliesko sme vytieňovali, do samostatnej vrstvy, aby sa pri otáčaní neotáčal spolu s ním aj simulovaný zdroj svetla. Táto tieňovacia vrstva je v prílohe D3. Reťaz má ísť okolo kolieska. To je ťažké, ak má vždy presne zapadať do jeho zubov. Miesto reťaze sme použili radšej povraz, ktorý nielen nemá tento problém, ale tiež pekne vyzerá. Z obrázok lana, ktorý sme našli na internete, sme vyrezali vhodnú časť a zmenšili ju tak, aby sa mohla za sebou opakovať. Na záver sme vyrobili závažie za pomoci rastrového grafického editora s použitím textúry D.2. Po dokončení sme pridali tieň, aby závažie vystupovalo do popredia, a v očku, ktoré je zachytené o lano, sme spravili medzeru v časti, kde ide poza lano. Jednotlivé časti sú v prílohe D.4 a príklad výsledku (na pozadí okna) v D Tlačidlo O vzhľade tlačidiel sme si neboli od začiatku istí. Keďže pozadie je hnedé, tlačidlo je zlaté, nech kontrastuje. Zvolili sme preň štandardný obdĺžnikový tvár s vyrezanými štvrťkruhmi v rohoch. Podobne ako predtým, začali sme vytvorením jeho tvaru vo 17

19 vektorovom grafickom editore (príloha E.1). Pri tvorbe sme mysleli na to, že tlačítko sa bude skladať z 9 častí výrez v rohu má dĺžku 1/6 tlačítka, čiže 1/2 každej časti. Takto vyrobený tvar sme v rastrovom grafickom editore vytieňovali a aplikovali naň jemnú textúru zlata. Rohy sme zosvetlili, aby tlačítko vyzeralo plastickejšie, a okolo tlačítka sme dali čiernu linku. Pre vysvietené tlačítko sme použili takú istú grafiku, ale zo stredu k okrajom sme ju postupne zosvetlili. Stlačené tlačítko je zase posunuté nižšie, celé stmavené, a s padajúcimi tieňmi na okrajoch. Výsledky tejto práce sú v prílohe E Editovateľné políčko Začali sme s návrhom tvaru editovateľného políčka. Rozhodli sme sa pre nevyplnený obdĺžnikový tvar s useknutými osemuholníkovými rohmi. Obrys je hrdzavý (príloha F.1), vytieňovaný a zafarbený tak, aby sa políčko hodilo ku okoliu, ale zároveň, aby ho bolo na hnedom pozadí vidieť. Nezvolili sme zlatú, ale radšej svetlejšu sivohnedú farbu. Na dovŕšenie industriálneho vzhľadu sme pridali pozdĺž okraja hrdzavé nity. Okrem toho bolo treba vedľa políčka dorobiť dve malé tlačítka na zvyšovanie a znižovanie číselnej hodnoty. Rozhodli sme sa ich vyrobiť v tvare malých ozubených koliesok, s textúrou rovnakou ako zvyšok políčka. Na tlačítka je pridaná jednoduchá šípka hore, resp. dole, a pri stlačení sa tlačítka zmenšia a stmavia. Editovateľné políčko je v prílohe F Zaškrtávacie políčko Ďalší potrebný prvok rozhrania je zaškrtávacie políčko. Je spravené v podobnom štýle ako tlačítko je zlaté a vypuklé. Ako prvé sme vyrobili jeho tvar, štvorec so zaguľatenými rohmi. Aplikovali sme podobnú zlatú textúru, ako na tlačítko. Grafika programu obsahuje rôzne varianty jedna označuje zapnutý stav prítomnosťou nakreslenej fajky. Ďalšie majú v duchu steampunku páku vypínač. 4.7 Ikony Pre tlačítka, ktoré sa nachádzajú v paneli nástrojov, sme potrebovali niekoľko ikon 18

20 rôznych typov (viď vyššie). Začali sme jednoduchým náčrtom jednotlivých typov ikon (príloha H.1). Potom sme ikony na základe predošlého náčrtu prekreslili vo vektorovom grafickom editore (príloha H.2). Tieto vektorové kresby sme naimportovali do rastrového grafického editoru, kde sme ich vykolorovali a vytieňovali (príloha H.3). 4.8 Robot Ako s každým komplexnejším grafickým prvkom, aj s robotom sme začali rôznymi náčrtmi (príloha I.1). Najlepší sme preniesli do počítača a robota vymodelovali v 3D programe (príloha I.2). Ďalšou potrebnou časťou boli textúry. Pre hlavu a telo sme nakreslili komplexné textúry s rôznymi doplnkami, ostatné časti tela mali jednoduchšie. Textúry sme vytieňovali, aby robot získal trojrozmerný vzhľad, a namapovali sme ich (príloha I.3). Keď sme boli s robotom spokojní, vložili sme kostru a vyrobili sme potrebné animácie (viď vyššie). 4.9 Tehla a plot Tehla a plot majú veľmi jednoduché modely, ale potrebujú textúry. Textúra tehly vznikla pomocou niekoľkými úkonov a filtrov, a zvolením vhodých farieb. Bolo ju ešte treba patrične pripraviť, rozdelili sme ju na časti (pomer šírky k výške tehly je 2:1) a ručne sme ju podľa tohto vytieňovali, aby bolo lepšie vidieť jednotlivé strany. Textúra je v prílohe J.1. 19

21 5 Záver Ako našu stredoškolskú odbornú činnosť sme vytvorili grafickú aplikáciu, ktorá používateľovi umožňuje používať výučbový jazyk Robot Karel, dávať robotovi príkazy na manipuláciu s jeho prostredím, učiť ho nové príkazy a sledovať jeho činnosť. Súčasťou práce je pokročilý editor jazyka, ovládateľný myšou aj klávesnicou, schopný za behu svoj vstup spracovávať a kompilovať, rozšíriteľný model prostredia, vlastné ovládacie rozhranie s neobvyklým grafickým dizajnom, a originálny detailne animovaný 3D model robota Karla samotného. Aplikácia je určená pre začínajúcich programátorov, ale aj pokročilejší nájdu zaujímavé úlohy a problémy, ktoré pre nich môžu predstavovať výzvu možno sčasti aj kvôli tomu, že Karel ako jazyk je veľmi jednoduchý a treba pri ňom zmeniť pohľad na vec, viac sa spoliehať na rekurziu, nie na tradičné metódy. Aj jazyk Lua, v ktorom bola aplikácia naprogramovaná, je známy aj svojou jednoduchosťou je vytvorený tak, aby ho mohli aspoň sčasti pochopiť aj tí, ktorí sa programovaním nezaoberajú. Open-source licencia výslednej práce zabezpečuje, že s patričnými vedomosťami môžu zvedavší používatelia začať meniť aj prostredie samotné, pridávať ďalšie vstavané príkazy primitíva (ktoré sú mocnejšie, ako tie, čo vytvoria v editore), ba aj meniť svet, v ktorom robot žije. 6 Summary (English) We've created a graphical application, which allows the user to use an educational programming language Karel, command a robot to manipulate its environment, teach it new commands and observe its behavior. In particular, the application has a built-in editor, controlled by keyboard or mouse, able to compile its input on-the-fly, a custom user interface done in steampunk style, and an original animated 3D model of the robot itself. The application is meant for beginning programmers, but even more advanced ones can find interesting problems which can pose a challenge perhaps in part because of the simplicity of the language, encouraging them to change their point of view. 20

22 A Steampunk Príloha A.1 Príloha A.2 1

23 B Okno Príloha B.1 Príloha B.2 Príloha B.3 2

24 Príloha B.4 Príloha B.5 3

25 C Panel nástrojov Príloha C.1 4

26 D Posuvník Príloha D.1 Príloha D.2 Príloha D.3 Príloha D.4 5

27 Príloha D.5 6

28 E Tlačidlo Príloha E.1 Príloha E.2 7

29 F Editovacie políčko Príloha F.1 Príloha F.2 8

30 G Zaškrtávacie políčko Príloha G.1 9

31 H Ikony Príloha H.1 Príloha H.2 Príloha H.3 10

32 I Robot Príloha I.1 Príloha I.2 11

33 Príloha I.3 12

34 J Tehla Príloha J.1 13