Príbehy a poznámky z tvorby FleaWinderu — malého animovaného cirkusu poháňaného vašou klávesnicou a myšou.
Cirkus na malých obrazovkách
FleaWinder bol navrhnutý pre široký, tenký pás nad panelom úloh — pohodlne na šírku. Telefóny sú na výšku. Aby cirkus fungoval na malých obrazovkách, bolo treba prehodnotiť rozloženie bez straty toho, čo mu dáva život.
The embeddable widget flips to a tall canvas on mobile, stacking the acts vertically instead of spreading them across a ribbon. Anyone dropping FleaWinder into their own site gets a layout that adapts automatically. Four theme presets (dark, light, warm, cool) and a scale parameter let it blend with whatever surrounds it.
Väčšou výzvou bola čitateľnosť. Na displeji telefónu sú blchy vykreslené v desktopovej mierke len bodky. Pridali sme priblíženie, ktoré zväčší telá bĺch, aby ich kostýmy, výrazy a doplnky boli skutočne viditeľné — Pip čelenka, Rex helma, Blaze korunka. Detaily osobnosti, ktoré tam vždy boli, sa zrazu dajú rozoznať na dĺžku ramena.
Zvyšok mobilnej prestavby bol menej okázalý, ale rovnako dôležitý: dotykovo prívetivé ciele, lepšie škálovanie písma, responzívne rozostupy naprieč marketingovým webom. Nič revolučné — jednoducho zabezpečiť, aby cirkus vyzeral správne, nech ho nájdete kdekoľvek.
Kostýmy, ročné obdobia a šéf manéže
Tento týždeň bol celý o vizuálnej hĺbke. Každá blcha v kolónii teraz nosí jedinečný kostým — Nova má slnečník na lane, Rex nosí helmu v kanóne, Blaze dostáva korunku pre číslo s ohňom. Drobné detaily, ale dávajú každému umelcovi identitu, ktorú rozoznáte na prvý pohľad.
Samotné javisko sa mení s kalendárom. Sezónny časticový systém sype sneh v zime, čerešňové kvety na jar, svetlušky v lete a poletujúce lístie na jeseň. Je tu aj jemný denný/nočný odtieň naviazaný na váš reálny čas — pás sa oteplí počas zlatej hodinky a stmavne po zotmení, s jasnejšími hviezdami na nočnej oblohe.
Najväčšou novinkou je šéf manéže — špeciálna blcha v cylindri, ktorá sa prechádza medzi číslami a kontroluje predstavenie. Nevystupuje; dohliada. Správne nastavenie jeho pochôdzky znamenalo načasovať jeho chôdzu tak, aby dorazil práve v momente, keď skončí prechod medzi číslami, čo dáva celému cirkusu pocit choreografie, ktorý predtým chýbal.
Pod kapotou to celé poháňa kompletný systém motívov. Osem farebných paliet plus automatický sezónny režim, ktorý vyberie ten správny podľa mesiaca. Každá farba v každom čísle a prvku rozhrania čerpá z aktívneho motívu, takže prepnutie pôsobí plynulo, nie prilepene.
v1.1.0: Dve nové vystúpenia
Verzia 1.1.0 pridáva žonglérske vystúpenie a ohňožrúta do zostavy, čím sa celkový počet zvyšuje na sedem živých cirkusových vystúpení. Oba bežia na tom istom energetickom systéme, ktorý poháňa zvyšok šou — vaše stlačenia klávesov, pohyby myši a kliknutia.
Žonglér sleduje viacero loptičiek v skutočných parabolických oblúkoch. Počet sa škáluje s energiou: dve alebo tri v pokoji, až šesť na plný výkon, s chytaním za chrbtom, keď publikum šalie. Správne načasovanie vyžadovalo oddelenie fázy každej loptičky, aby sa nezhlukovali.
Ohňožrút využíva existujúci časticový systém, ale s novým efektom tepelného mihotania. Dĺžka plameňa rastie s energiou a kliknutia produkujú bonusové výbuchy. Najzložitejšia časť bolo miešanie farieb — plynulý prechod od tmavočervenej pri základni po jasnožltú na špičke bez viditeľného pruhovania.
Obe vystúpenia sa zaraďujú do existujúceho rotačného systému, takže ich uvidíte striedať sa spolu s pôvodnými piatimi. Ak si chcete pripnúť obľúbené, panel Nastavenia teraz umožňuje zapínať a vypínať jednotlivé vystúpenia.
História za stránkou história
Stránka histórie FleaWinderu dokumentuje viac ako štyristo rokov skutočných blších cirkusov — od mikroskopických nákresov Roberta Hooka v roku 1665 až po účinkujúcich na Oktoberfeste, ktorí pôsobia dodnes. Napísanie si vyžadovalo čítanie viktoriánskych plagátov, digitalizovaných novinových výstrižkov a prekvapivého množstva akademických prác o entomologickej zábave.
Najťažšia časť bola rozhodnúť, čo vynechať. Samotný Louis Bertolotto by mohol zaplniť knihu (a on to aj urobil — niekoľkokrát). Kompromisom bola časová os zahŕňajúca hlavné momenty a sada rozbaľovacích sekcií pre tých, ktorí sa chcú ponoriť hlbšie.
Stránka používa iniciály, ozdobné oddeľovače a pätkové písmo na priblíženie sa letákom a plagátom, ktoré opisuje. Každá sekcia je predvolene zbalená, aby čitateľ nebol zahltený, ale prvý odsek je vždy viditeľný s iniciálou, ktorá vás vtiahne.
Všetok text je dostupný v angličtine, španielčine a nemčine. Prekladateľský proces odhalil niektoré fascinujúce miestne dejiny — nemecké tradície Flohzirkus na Oktoberfeste, napríklad, majú vlastnú líniu odlišnú od londýnskej a newyorskej scény.
Prečo som vytvoril FleaWinder
Chcel som niečo, čo by dodalo počítaču pocit živosti — nie rušivým spôsobom, ale ako tichý spoločník, ktorý reaguje na vašu prítomnosť. Väčšina šetričov obrazovky sa aktivuje, keď odídete; FleaWinder sa aktivuje, keď prídete.
Myšlienka bola jednoduchá: vziať všetok nečinný vstup, ktorý váš operačný systém ignoruje — rytmus vášho písania, rýchlosť vašej myši, kadenciu vašich kliknutí — a nakŕmiť ním skupinu animovaných cirkusových blích. Čím viac pracujete, tým viac šou ožíva.
Vytvorenie priehľadného prekrytia nad panelom úloh sa ukázalo ako správne obmedzenie. Je vždy viditeľné, ale nikdy neprekáža. Neinteragujete s ním priamo; jednoducho pracujete a ono reaguje. Technickou výzvou bolo urobiť ho skutočne prekliknuteľným, aby nikdy neukradlo zameranie.
FleaWinder je vyznanie lásky viktoriánskemu blšiemu cirkusu — skutočnej, storočia starej umeleckej forme, kde hodinári zapriahali skutočné blchy do miniatúrnych kočov a nechali ich chodiť po lanách. Stránka história rozpráva celý tento príbeh.
