Úvod

U vzniku aplikace "Kouzelné křídy" stála vzpomínka na dětský animovaný seriál o dvou medvědech "Pojďte pane, budeme si hrát". V jednom díle medvědi v rámci nějaké diskuze malují křídou jednoduché obrázky a vzápětí je dotykem oživují - například "brouk ošklivák" začne lézt. Zajímalo mne, zda tuto myšlenku dokáži realizovat nějakým programem. Už kdysi dávno jsem se o něco podobného pokoušel na prvním počítači, se kterým jsem si mohl hrát (Sinclair Spektrum), ale jeho výkon a Basic tehdy nepostačovaly na potřebné výpočty v reálném čase.

Brzy se ukázalo, že ani dnes se nejedná o triviální úlohu. Kontrast mezi jednoduchostí z vnějšího pohledu - načmárá se pár čar a ty se začnou hýbat, a složitostí matematických a programovacích nástrojů potřebných na realizaci je překvapující (více viz. část "Co je pod kapotou").

Ovládání aplikace - tlačítka

Při návrhu ovládání jsme kladli maximální důraz na jednoduchost a intuitivnost (děti nečtou návody). Přesto zůstalo několik věcí, na které si uživatel musí přijít sám. Ve skutečnosti toto "objevování" považujeme za součást hraní a hra sama o sobě neobsahuje žádný návod. Těm, co dávají přednost teoretické přípravě, je k dispozici následující popis.

	Přepínání připravených barevných palet. Na zvolené paletě závisí i barva pozadí a barva ovládacích tlačítek.
	Volba barevné křídy. Právě zvolená křída se zobrazuje jako
	Otevírá nabídku pro ukládání a čtení obrázků z galerie. Přes tuto nabídku je také možné nastavovat některé parametry.
	Příprava nového obrázku. Pokud starý obrázek nebyl uložen, otevře se potvrzovací dialog. Nový obrázek má přiděleno defaultové jméno.
	Odstraní naposledy nakreslenou čáru. (Můžete opakovat, dokud nevymažete vše, ale lepší je použít předchozí tlačítko.)
	Přepne do režimu výmazu, ve kterém můžete dotekem mazat libovolnou čáru. Tlačítko zůstane stisknuté (červené), dokud ho nestisknete znovu, nebo nezvolíte jinou funkci.
	Přepne do režimu, ve kterém můžete dotekem "přišpendlit" libovolný bod čáry, opakovaný dotek stejného bodu špendlík odstraní. Tlačítko zůstane stisknuté (červené), dokud ho nestisknete znovu, nebo nezvolíte jinou funkci.
	Oživí vaši kresbu, opakovaný stisk animaci zastaví. Během animace se všechna ostatní tlačítka ukryjí.

Ovládání aplikace - doteky

Aplikace reaguje na jeden, nebo dva prsty. Jedním prstem se kreslí, nebo pohybuje obrázky, dvěma prsty se provádí zoom a posun obrazovky.

Kreslení je samozřejmě triviální, nicméně je možné upozornit na několik věcí:

Aby se jednotlivé čáry chovaly jako jeden objekt, musíte je k sobě "přilepit". To se dělá tak, že buď začnete, nebo skončíte na již existující čáře (můžete samozřejmě přilepit začátek i konec).
Aby vám to program usnadnil, objeví se okolo vašeho prstu v ten správný okamžik tyrkysový indikační kruh.

Důležitý speciální případ je, když spojíte konec kreslené čáry s jejím začátkem. Vznikne tím "uzavřená čára", která má tu užitečnou vlastnost, že další čáry nakreslené dovnitř (třeba oči v obličeji) se stanou součástí kresleného útvaru, aniž by byly explicitně spojeny s nějakou jeho částí. Při animaci se pak pohybují spolu s útvarem.

Pozor, uzavřený tvar se musí nakreslit jedním tahem - i když kruh vytvořený ze dvou půlkruhů vypadá stejně, nepovažuje ho program za uzavřený tvar a "oči" vám z takového obličeje utečou. Aplikace vám to opět usnadňuje, při uzavírání tvaru nakreslí červený indikační kruh.

V určitých situacích je přesto jemná kresba prstem obtížná - v takových situacích hodně pomůže obrázek na chvíli dvěma prsty zvětšit/posunout.

Jednotlivé barvy palety mají přiřazenu další skrytou vlastnost a to "gravitaci". První barva palety je lehčí, než vzduch, tj. kroužek namalovaný touto barvou při animaci stoupá vzhůru. Poslední barva palety je těžší, než vzduch a při animaci spadá k zemi. Zbývající tři barvy jsou neutrální - volně se vznášejí. Gravitační vlivy působící na všechny částice se sčítají. Zkuste například namalovat teplovzdušný balón.

Jak jsem se zmínil v úvodu, "povinným" úkolem bylo umožnit namalování lezoucího brouka. Všechny čáry s jedním volným koncem (kromě těch nejkratších) se považují za "nožičky". Při animaci se pak střídavě rytmicky pohybují.

Většinou je to samozřejmě žádoucí efekt. Tam, kde by vám to nevyhovovalo, si můžete vypomoci jednoduchým trikem - přilepíte na volný konec dlouhé čáry jeden bod, nebo velmi krátkou čárku. Konec dlouhé čáry už nebude volný, tj. už nepůjde o nožičku a čára přestane pochodovat.

Hlavní menu aplikace

Otevřít privátní galerii	Otevře seznam kreseb uložených v lokálním úložišti. Zvolenou kresbu můžete načíst do aplikace (případně vymazat).
Uložit "jméno souboru"	Uloží aktuální kresbu do lokálního úložiště. U nových souborů se přednastaví defaultové jméno. Chcete-li soubor uložit pod smysluplnějším jménem, použijte volbu "Uložit jako". Při instalaci nových verzí zůstanou uložené kresby zachovány, ale při odinstalování aplikace se vymažou. Pokud chcete některé kresby uchovat lépe, publikujte je na našem webu (viz dále).
Uložit jako	Otevře dialog pro uložení pod novým jménem. Součástí je též seznam již existujících souborů (nové jméno nesmí v úložišti být).
Nastavení	Otevře dialog pro nastavení některých parametrů.
Následující volby se nabídnou, jen pokud je v "Nastavení" zaškrtnuta volba "Umožnit veřejnou galerii":
Otevřít veřejnou galerii	Otevře dialog pro zadání výběrové podmínky a načtení seznamu kreseb uložených na našem webu. Pro zobrazení libovolné zveřejněné kresby nemusíte být registrováni!
Publikovat	Uloží aktuální kresbu na náš web (vyžaduje registraci). Každý uživatel smí vkládat/opravovat pouze pod svým jménem - můžete ale načíst cizí kresbu a uložit pod svým jménem její kopii.
Registrace	Otevře dialog pro registraci. Povinný je jen login a heslo, zadání emailu je ale užitečné pro případ, že heslo zapomenete. Registrace je potřebná pouze pokud se chcete o své povedené kresby podělit s ostatními.

Nastavení

Umožnit veřejnou galerii	Zapne v hlavním menu položky pro načítání publikovaných kreseb z veřejné galerie na našem webu, publikování vašich vlastních kreseb a registraci.
Šířka obrazovky (mm)	Parametr obsahuje velikost menšího rozměru obrazovky tak, jak ji změřil operační systém. Chcete-li to mít přesně, použijte pravítko a nastavte správnou hodnotu. Android bohužel neumožňuje přesné zjištění fyzických rozměrů obrazovky. Informace, které poskytuje, se liší až o 8%, hrubé rozdělení obrazovek na LDPI až XXXHDPI dnes aplikacím neumožňuje dostatečně přesně nastavovat velikost ovládacích prvků. Pro naši aplikaci je to přitom obzvlášť důležité, protože všechny rozměry přepočítává na fyzické jednotky (milimetry), aby byl umožněn přenos kreseb mezi zařízeními s různým rozlišením a různou velikostí obrazovky.
Výška obrazovky (mm)	Totéž pro větší rozměr obrazovky.
Šířka čáry (mm)	Šířka čáry, která bude použita při otevření nové kresby. Aktuální hodnota se ukládá spolu s kresbou, takže uložené obrázky mohou mít každý jinou šířku použitých čar.
Poloměr výběru (mm)	Parametr určuje, na jakou vzdálenost se čáry začnou k sobě "lepit". Je-li jeho hodnota příliš malá, je těžké se prstem trefit na existující čáru a obrázky nedrží pohromadě. Je-li hodnota příliš velká, lepí se čáry k sobě, i když si to nepřejete. Nastavenou hodnotu považujeme za optimální, budete-li mít přesto problém s kreslením detailů (například očí v obličeji), použijte při kreslení zoom.
Následující volby slouží pouze pro technické fandy:
Zobrazovat drátěný model	Jak je vysvětleno v části "Co je pod kapotou", je kresba zobrazována pomocí 3D knihovny OpenGL. Jednotlivé čáry jsou tvořeny sítí drátěných trojúhelníků, které jsou následně potaženy texturou, nebo obarveny. Zaškrtnutí vám umožní tyto trojúhelníky zviditelnit (resp. u každého trojúhelníku se zobrazí jen dvě strany, což při kreslení čar postačuje).
Zobrazovat omezující podmínky tvarů	Jak je vysvětleno v části "Co je pod kapotou", skládá se kresba z množství autonomních částic, které jsou navzájem propojeny velkým počtem "pružin". Zaškrtnutí vám umožní tyto jednotlivé částice a pružiny zviditelnit. Pozor - je to velmi náročné na grafický výkon.

Co je pod kapotou

Tato část je velmi technická a běžnému uživateli moc neřekne. Pro programátora se ale jedná o ty nezajímavější informace.

Program se sice tváří jako jednoduché "malování", ale ve skutečnosti se nejedná ani o rastrové ani o vektorové obrázky. Malování zde slouží pouze k zadávání vstupních informací pro komplikovaný fyzický model.

Jednotlivé tvary a čáry se totiž skládají z množství autonomních "částic", které jsou pospojované různě tuhými "pružinami". Každá částice má vlastní směr a rychlost pohybu, v každém okamžiku na ni působí řada sil:
- tah pružin, které se částice snaží udržet v původních vzájemných vzdálenostech
- setrvačnost
- kladná a záporná gravitace
- uživatelův prst (tvary je možné "tahat" po obrazovce)

K výpočtu polohy každé částice pro jednotlivé snímky by za normálních okolností bylo nutné cca 60x za sekundu vyřešit velkou soustavu diferenciálních rovnic. To by normální počítač v reálném čase nezvládl, proto je nutná nějaká aproximace - tento program používá pro výpočet pohybu částic tzv. Verletovu integraci.

Je zřejmé, že s počtem částic rychle narůstá i počet potřebných výpočtů, na druhou stranu pokud chceme zachovat "ruční" charakter kresby a dostatečnou ohebnost čar při pohybu, musí být částice dostatečně husté. Navíc bylo nutné zohlednit měnící se rychlost pohybu prstu při malování a potřebu spojovat jednotlivé tahy do jednoho tvaru. Převod "kreslení" do soustavy částic tak představoval další netriviální problém. Nakonec bylo nutné použít jednoduché Bézierovy křivky.

Přes výše naznačenou výpočetní složitost nejsou fyzikání výpočty tou částí algoritmu, která spotřebovává největší výkon. Ve skutečnosti první verze algoritmu fungovala i v Javascriptu a HTML5 (dokonce i v mobilním prohlížeči). Teprve po prvním pokusu implementovat program jako plnohodnotnou aplikaci pro Android se ukázalo, že zobrazovací schopnosti moderních prohlížečů jsou mnohem lepší, než se zdá. Stejný kód byl na Androidu v čisté Javě prakticky nefunkční. Nakonec jsem usoudil, že to je tím, že HTML5 canvas je naprogramován v C++, kdežto Java canvas je naprogramován v Javě.

Celá zobrazovací část aplikace je tak nyní postavena na grafické knihovně OpenGL ES 2.0 (používá se pro programování 3D her). Soustava částic se pro zobrazení převede do standardního drátěného 3D modelu, který je pak opatřen vhodnou texturou, nebo obarven. Pro dosažení potřebné plynulosti na mobilních zařízeních bylo nutné většinu této práce přenést na grafickou kartu pomocí tzv. "shaderů".

Zbývající část, tj. logika aplikace, je už jednoduchá. Obrázky zatím nemají žádnou umělou inteligenci, na rozdíl od tvorů v Evoluci se navzájem neloví, ani nepožírají. Veškerou logiku tak představuje odraz od stěn a střídavý pohyb "nožiček".

Samostatnou kapitolu tvořilo ukládání vytvořené kresby. Zde hlavní problém spočívá v umožnění přenosu mezi různými zařízeními s obrovským rozptylem rozlišení a velikostí obrazovek. Otázku rozlišení jsme vyřešili tak, že všechny rozměry před uložením přepočítáme na milimetry. Při načtení se milimetry nejprve přepočítají na rozlišení příslušného zařízení a pak se velikost přizpůsobí rozměrům obrazovky.

Takto je možné kresbu vytvořenou na velkém tabletu s obrovským rozlišením zobrazit na malém telefonu s průměrným rozlišením a obráceně.

(Operační systém Android bohužel neumožňuje přesné zjištěné fyzických rozměrů obrazovky. I ta nejpřesnější metoda "lže", dokonce tím více, čím je zařízení novější a má větší hustotu. Do doby, než se Android "polepší" jsme se to rozhodli řešit kompromisně - použijeme nejlepší metodu, kterou operační systém nabízí, a umožníme uživateli nastavení skutečných rozměrů.)

Ochrana osobních informací

Jediným uchovávaným osobním údajem je nepovinný email, který můžete zadat při registraci. Slouží k jedinému účelu - abychom vám mohli pomoci, pokud zapomenete své heslo.

Pokud jej zadáte, nebude zveřejněn ani poskytnut žádné třetí straně.