KODÉR.BLOG

Socialbakers Hackaton od Excelu, přes SVG až po CSS polygony

25 Mar 2015

Nebyl to tak úplně hackaton celého socialbakers, jako spíše jen "produktový" team a už vůbec né hackaton, kdy se X lidí na X dní někam zavře a jen pracuje, ale spíše 3denní teambuilding s PS4, CS:GO, LoL, výborným jídlem, pitím a taky troškou práce, která dala vzniknout mému projektu: COMICS HEROES IN POLYGONS, který chci popsat a ukázat o čem je.

View Demo

CSS polygon pitch

O tom jak moc mě nadchnul projekt species-in-pieces.com, se můžeš dočíst na mém twitteru a facebooku. Proto moje volba padla na to, že vezmu CSS polygony, kterých bude trošku více než 30, superhrdiny od Marvelu a DC comics (kteří jsou nejen teď hodně v "kurzu") a zkusíme něco takového vytvořit. Jediné co jsem potřeboval byl grafik s Adobe Ilustrátorem a ti "správní" hrdinové, kteří budou potřeba nakreslit polygonově. Pomyslně vhozenou rukavici příjmul Tomáš Pojeta a Jan Čermák.

Od Marvelu a jeho Iron Manovi k DC Comics a největšímu "badass hrdinovi" Batmanovi!

Polygony, Ilustrator a SVG

Je sice možné mít polygon s X body, takže to nemusí být jen trojůhelník, jako používám já, ale řekl jsem si, že to nechci zbytečně zesložiťovat hlavně proto, že jsem měl namyšleno jak budu prezentovat a jak vytvořím v Excelu funkce, díky kterým si budu generovat přímo CSS kód a budu to tak mít dá se říct bez práce. Všechny bylo potřeba mít skrz procentuální pozici, nakreslené ve stejné velikosti, takže jsem zvolil 800x600 a poté počítám přes excel místo kde se nachází (vysvětlím dál přímo na excelu).

Poslední věc, kterou jsem řešil byl počet polygonů, věděl jsem sice, že nějaké větší množství se bude sekat, ale nechtěl jsem grafiky limitovat, takže je dobré na to myslet pokud to budeš sám zkoušet. Stejně tak si nejsem jist co gradienty a výkon, takže určitě opatrně s nima.

Bacha na počet polygonů, ideál bych bral tak do 200 (já používám přes 250), opatrně s gradienty nebo změnou opacity.

Excel evangelist

Aneb "cože, ty jsi na to použil excel"? Ano použil, protože nakopíruju do něho vygenerované SVG, napíšu pár funkcí a... no však mrkni sám na výsledný excel, ze kterého ti to bude asi jasné. Pokud tě to zajímá více, tak se stačí podívat na prvních pár a poté na posledních pár sloupců. Jediná trošku divná věc je ta, že tam několikrát měním v číslech čárky za tečky, protože byl problém s tím, aby to můj OpenOffice bral jako číslo, nakonec jsem na to použil tabulky z GDocs a vše fungovalo parádně, stejně tak to fungovalo rovnou i v Excelu. Kdyby ti ale i přesto něco nebylo jasné nebo jses chtěl na něco zeptat, tak klidně do komentářů.

Ano, mohl bych to dělat jiným způsobem a třeba i lépe, ale proč pár kolegům neukázat použítí Excelu, trošku jinak?

Layout, animace a tak dále

Chtěl jsem to mít fullscreen, takže proto jsou tam pod sebou 5x <article>, který je vždy roztáhnutý na 100% výšky, tak abych jednoduše přes waypoints přepínal superhrdiny a loga, díky unikátnímu ID... prostě nic složitého. Stejně tak jednoduše se díky ID, dělají kotvy, takže není problém poslat jen daného superhrdinu.

Animování jako takové jsem měl namyšleno jen přes CSS transition, kde vlastně měním jen pro dané itemy, pozice, kde jaký polygon má být. Super by bylo kdyby měla každá postava nebo věc, kterou chceš takto dělat, jen pár polygonů, tak aby jsi mohl různě měnit pozice bodů a dělat tu super rotaci, která tomu dá neuvěřitelné "koule". Stačí se nad tím jen zamyslet a mít na to dostatek času.

Poslední věc, která mě dost trápila, bylo co s "nevyužítýma" polygonama, prostě co dělat když Iron Man má nějakých 250+ polygonů a logo Marvel, třeba jen 80. Prvně jsem zkoušel nějaký fade, visibility:hidden, display:block, ale prostě buď se to sekalo nebo to nevypadalo dobře, nakonec ty nevyužité nastavuji na jedno místo (v případě Marvel loga na 3 různá místa), ze kterého se to poté spojuje do většího obrázku. Krásně to jde vidět při přechodu Marvel -> Iron Man. Je to opět jen o tom jak moc si s tím chceš vyhrát.

Poslední věc, kterou jsem řešil a vlastně ani moc řešit nemusel, bylo to, aby to fungovalo i na devicech (stačí mi iPad, iPhone). To jsem docílal vlastně jen tím, že div ve kterém jsou všechny polygony resizují z 800x600 na 640x480 a poté 320x240, opět nic složitého a díky procentuálnímu zadání bodů daného polygonu, to funguje parádně. Jasně jsou tam občas vidět půlpixelové / pixelové mezery, ale přesně tohle tomu dává to (aspoň z mého pohledu) co se mi na tom líbí.

Jelikož 100lidí / 100chutí, takže asi né každý by bral ty mezery jako super "fičuru", proto stačí v Ilustrátoru navrhnout jednotlivé polygony jakoby "přes sebe" a tím se tohle vlastně vyřeší.

Ještě není konec, protože

...to nejduležitěšjí je, že tohle celé je fakt jen sranda, která vlastně funguje jen v Safari a Chrome (myslel jsem že i FF to bude dávat, ale bohužel, zatím ne), tím pádem je doslova jen pro pár prohlížečů a kdoví zda někdy bude možnost tohle použít všude, takže žádný, že to hned slíbíš nějakýmu klientovi, protože pak X% návštěvníků bude koukat na statickej obrázek, což si ve FF můžeš zkusit :)

A to je vše! Díky za přečtení, doufám, že se ti tohle líbilo a opět budu moc rád za jakýkoliv komentář, feedback nebo prostě jen sdílení :) díky!

Sdílet:

comments powered by Disqus