Janča Hošáková a Peťa Zapletalová: Aplikace pro vizualizaci patchworkových výrobků

Jak to začalo

Uprostřed další náročné soboty jsme seděly v krásných prostorách Kiwi jídelny a diskutovaly o složitých problémech vesmíru jakými jsou např. nejoblíbenější jídlo a jeho dopad na naši postavu či kolik káv denně je moc. Když jsme se dostaly k tématu Patchwork (vysvětlíme později :-) ), který byl jedním z Jančiných nápadů na projekt. Jelikož se v mojí rodině záliba v patchworku usídlila již před několika lety, bylo mi toto téma blízké a do debaty o tom, jak by měl projekt vypadat a co by aplikace měla umět, jsem měla dost co přidat...no, a bylo jasno :-)

Nejprve tedy k tomu, co to vlastně patchwork je, aby pak bylo lépe vidět, kam naše myšlenky směřovaly. Patchwork je velmi stará textilní technika, která vznikla nejen jako ozdoba postelí a sedaček, ale také z úsporných důvodů, kdy látka byla drahá a bylo nutné využít každý centimetr. Patchwork ve svém názvu obsahuje jak svůj vznik, tak nápovědu k tomu, o co vlastně jde: patch - záplata. Zjednodušeně, vezmete krásné látky, rozstříháte je na malé kousky a ty pak sešijete dohromady tak, aby vytvořily různé obrazce. Touto technikou je možné tvořit tolik věcí, kolik vám jen fantazie dovolí si představit - deky, polštáře, tašky, batohy, obaly na cokoliv si vzpomenete, zvířátka, apod. My jsme se zaměřily na výrobky tvořené tzv. panely, tedy základními čtverci a to proto, že ty se používají u dek a polštářů, kde je největší spotřeba materiálu a zároveň není snadné si ve spoustě malých kousků představit výslednou velkou deku.

Tak vznikl nápad na aplikaci, ve které si uživatelka bude moci nejen jednoduše “vybarvit” vybraný vzor, ale místo jednoduchých barev si dosadit reálné látky, jejichž kombinaci ji navíc automaticky aplikace dopočítá na základě studií o tom, jaké barvy se k sobě hodí, a které kombinace jsou “oku příjemné”. Samozřejmě pořád máme sepsány nápady na spousty dalších rozšíření, nicméně jsme musely zůstat nohama na zemi a pochopit, že v tak krátkém časovém úseku a s našimi současnými znalostmi jsou naše možnosti omezené.

Nápad máme, co teď?

Začátek cesty vypadal vcelku jednoduše, nápadů bylo víc než mnoho, očekávání byla velká, nadšení ještě větší a množství otázek úplně největší. Navíc to vypadalo, že štěstí stojí při nás. Podařilo se nám domluvit si celý katalog fotografií látek jednoho obchodu s patchworkovými látkami a obě máme nějaký ten přístup k “ajťákům” když bude potřeba pomoc. Juchů, jízda začíná. Prvotní nadšení vcelku rychle opadlo, když jsme zjistily, že na všech fotkách látek je malé pravítko, kvůli měřítku a tudíž byly pro nás takové látky v našich očích nepoužitelné. Naštěstí se celá aplikace momentálně chová jinak než jsme předpokládaly, takže jsme látky použít mohly. Také určování hamonických barev nebyla ani zdaleka taková legrace, jak by se mohlo zdát. Že budeme pracovat na základě RGB kombinací bylo jasné od začátku, ale kolik je to různých barev nám došlo až jsme začaly analyzovat a kategorizovat. Barvy jako žlutou, červenou či zelenou je snadné zařadit, ale kde končí hnědá a začíná oranžová? A pokud kliknu na barvu, jak řeknu aplikaci, do které kategorie spadá zrovna tato RGB kombinace...to nám přece poradí mentor :-) Tak jsme si připravily vzory, rady od mentorů, které jsme již v zápalu boje kontaktovaly, základ webových stránek na kterých bude aplikace fungovat, jakousi počáteční databázi látek a těšily se na Meet Your Mentor. 

Smích nás přešel hned ve chvíli, kdy jsme zjistily, že za námi preferovaným mentorem se dostaneme až úplně nakonec, když už bude mít úplně plnou hlavu ostatních projektů. Tak jsme už s malinko pokleslým srdcem putovaly od jednoho mentorského stanoviště k druhému a poslouchaly pokaždé úplně jiný návod, jak celou aplikaci uchopit. Na závěr jsme měly hlavy jak pátrací balóny, spoustu názvů jazyků a programů, kterým jsme absolutně nerozumněly a mentora, který na akci nebyl, takže to vypadalo jako “nikdo vás nechtěl a tenhle na vás zbyl”. Naše nadšení bylo to tam a my čekaly, co bude dál. Naštěstí se nás zželelo Tomovi a Tomovi a vzali si nás pod svá křídla. Tedy hlavě jeden z nich a my jsme za to velmi rády. 

Máme mentora, můžeme začít tvořit

Další velkou překážku na naší cestě za vysněným projektem se ukázal programovací jazyk. V původním návrhu byl Python v kombinaci s Javascriptem. Python se učí v rámci akademie a Javascript prostě budeme muset nějak zvládnout. Tomáš nás z omylu vyvedl hned na začátku a řekl, že celá aplikace bude v Javascriptu, který se bohužel na akademii neučí. Tak jsme jedno sobotní dopoledne/odpoledne dostaly rychlokurz Javascriptu, spoustu rad a úkolů a ponořily se do studia. Javascript není kamarád a nemá nás rád :-D 4 úkoly, které jsme dostaly v rámci procvičení, nám trvaly téměř týden a vůbec nám to nedávalo smysl. Boj pokračoval a Tomáš chudák musel s námi mít svatou trpělivost a ocelové nervy. Nicméně na Hackatonu se nám podařilo dojít do fáze, kdy aplikace měla colorpicker a canvas s obrázkem vzoru, který se někdy i vybarvil :-D Byl to velký posun, nicméně stále jsme nebyly v cíli. 

Tak jsme se potkali v páteční kavárně a začali jsme jednotlivé části kódu spojovat dohromady. Pak nastala optimalizace. Od toho pátku nás toto slovo malinko děsí :-D Představte si, že sedíte x hodin na hackatonu a pracně něco vypotíte. O týden později vám váš mentor řekne, že našel lepší cestu a v podstatě vás přiměje téměř všechno, co už jste měly smazat a napsat jinak...aspoň v našich očích to tak vypadalo :-D Nicméně jsme odcházely s fungujícím projektem, což bylo povzbudivé. 

A jak to celé funguje?

Aplikace funguje na dva kliky. Takže to vypadá, že je to brnkačka a všechno si krásně funguje. Ano, je to tak. Ale pouze na první pohled. Znalým a zkušeným je jasné, že to tak úplná brnkačka nebude. Za jednoduchým fungováním je dost malých krůčků, které jsme museli promyslet a naprogramovat. V první řadě bylo potřeba nadefinovat vzory tak, aby se s nimi dále dobře pracovalo. Vzor jsme vybarvily různými odstíny šedé. Nechtěli jsme je dělat barevně, abysme uživateli zbytečně nevnucovali představu, že takto by to mělo vypadat. První krok za námi, vzory jsou připravené. 

Teď bylo potřeba nadefinovat kombinace barev a colorpicker (to je to barevné kolečko). Zásadní bylo vybrat barevnou harmonii neboli jak se budou barvy kombinovat, dle jakého klíče. Vybírali jsme z následujících harmonií.

Nejvíce se nám zamlouvala harmonie tvořená obdelníkem (vpravo nahoře). Se samotným skriptem na colorpicker a do něho zapojené harmonie nám opravdu moc pomohl náš mentor Tomáš, který nám ho připravil. 

Máme tedy vzor, colorpicker, nadefinovanou harmonii. Teď už stačí to dát všechno dohromady.

Bylo potřeba programu říct, aby ve vzoru (v odstínech šedi) prošel každý pixel a určil, zda se jedná o unikátní barvu. Poté se tyto unikátní barvy zapsaly do nově vytvořeného pole. Program pak prochází vzor znovu a unikátní barvy nahrazuje barvami vypočítanými z colorpickeru. Toto byla první varianta, která se ukázala být nepříšil uživatelsky přívětivá. Obrázek se načítal opravdu hodně dlouho. Takže jsme změnili taktiku.

První část zůstala, takže program stále procházel pixel po pixelu a určoval unikátní barvy, ale hned vedle bylo vytvořeno plátno, na které se rovnou zakreslovali výsledné barvy. To znamená, že program najde pixel, určí, že se jedná o unikátní barvu a vezme první barvu, která byla colorpickerem vybraná a tento pixel zakreslí na plátno. Na plátně pak vznikne vzor s vybranými barvami. 

Dalo by se říct, že toto je vše a máme hotovo. Ale není tomu tak. Pozornější z vás si všimli, že nám dosud nikde nefigurují samotné látky. Máte pravdu, ale právě se k tomu dostáváme. Jak tedy z colorpickeru dostat kombinaci ne barev, ale konkrétních látek, které jsou v databázi? Z látek jsme si vytvořili pole, kde je zaznamenán RGB kód každé látky, její název a pro další použití jsme každou látku zařadili do skupiny barev (červená, žlutá, zelená, modrá, atd.). Uživatel tedy zvolí barvu na colorpickeru, který tuto barvu převede do RGB kódu. RGB kód tvoří čísla, která náš program sečte a porovná se sečtenými čísly RGB kódu látek. Následně určí nejmenší rozdíl (v absolutní hodnotě) mezi RGB barvy a RGB látky. Tím zajistíme, že se vybere látka nejvíce podobná barvě vybrané na colorpickeru. Všechny tyto kroky dohromady dávají to kouzlo, že dvěma kliky se vám vybarví vzor vámi vybranými barvami. Všechny tyto kroky se zopakují při každém pohybu myší v colorpickeru. Nám to přijde úžasné a doufáme, že sdílíte naše nadšení :)

Dost bylo teorie, tady jsou obrázky

Takto vypadá aplikaci, než si cokoliv vyberete.

Prvním krokem je výběr barvy.

Vidíte, že okamžitě při výběru barvy, se celý vzor vykreslí. Pokud by se vám nelíbil první vzor, máme na výběr.

Vyberete jiný vzor, barva zůstává, konečný obrázek se zase okamžitě překreslí.

A pak už si jen hrajete s barvami a vzory a sledujete jak se vám před očima vzory mění a čekáte, která barevné kombinace vás zaujme natolik, že si ji budete chtít ušít.