Kouzla s canvasem - libo šachy nebo Wolfensteina?
Snad nejpoužívanější novinkou HTML5 je dnes canvas. Co mě na něm láká nejvíc je, že dosud si nikdo pořádně neuvědomuje, kam až posune hranice stávajícího webu. Já si to také neuvědomuji a jsem s každým zajímavým objevem šokován. S několika čerstvými objevy se s vámi dnes podělím.
Jejich autorem je Jacob Seidelin a publikuje je na svém blogu. Jacob s canvasem hodně experimentuje a vždy když si myslím, že mě už nemůže ničím překvapit, tak přijde s něčím novým, co mě opět dostane.
Super Mario je zpět
Tím prvním příkladem je implementace staré hříčky Super Mario v JavaScriptu. Autor v ní nepoužil techniku vykreslení celé hry v jednom canvasu, ale několika menších canvasů, do kterých vykresluje jednotlivé objekty. Spolu se zvukem hra vypadá velmi zajímavě. Už jí moc nechybí a mohla by být reálně hratelná (při načítání hry vydržte, chvíli to trvá).
Více se o implementaci hry dočtete v Jacobově příspěvku Super Mario in 14kB Javascript. Hra se dočkala uznání i od Johna Resiga, který si v Embedding and Encoding in JavaScript chválí Jacobem použitý způsob vkládání zvuků a grafiky. Ale přesuňme se do 3D.
Šachy v 3D
Další hříčkou jsou šachy a dokonce v 3D. S figurkami lze pohybovat, chybí už jen počítačový protihráč. Delší popis najdete na 3D Javascript Chess (WIP).
Jacob si s 3D opravdu vyhraje, technické hračičky jistě pobaví jeho renderování textur (zvolte si objekt, parametry, chvilku počkejte a máte výsledný objekt, se který můžete i otáčet).
Pravý Wolfenstein v Javascriptu
A teď jsem byl přesvědčený, že Jacob ukázal vše co umí. Že jsem se mýlil, mě přesvědčil Wolfenstein v JavaScriptu. Vypadá jako ten pravý (aspoň co si na něj pamatuju), jediné co mu chybí je, že vaši nepřátelé vás nehoní a nestřílí na vás, zatím jen tak tiše stojí a čekají, až je zastřelíte. Více v Javascript Wolfenstein 3D. Při nahrávání opět chvíli vydržte.
Spustit Wolfensteina (dveře otevře X, střílí se C)
Přehrávač videa v JavaScriptu
Věřili byste, že lze udělat přehrávač videa v JavaScriptu? Já až do přečtení Making a Javascript Video Player tedy ne.
Filtry na obrázky
Canvas umožňuje nejen kreslení obrázků, ale i jejich zpracování. Může načíst obrázky, které na stránce používáte (ačkoliv jsem to ve specifikaci nenašel, zdá se, že může přistupovat jen k obrázkům z téže domény jako je webová stránka), pixel po pixelu je analyzovat, nebo z nich třeba použít výřez pro tvorbu nového obrázku. V Photoshop-like Image Effects using Javascript and canvas je představena tvorba známých obrázkových efektů (filtrů) pomocí JavaScriptu a canvasu. Jacobovi se údajně podařilo naprogramovat všechny obrázkové efekty, které dosud zvládal jenom Internet Explorer, a mnohé další.
Kromě filtrů můžete s obrázky provádět cokoliv, třeba je pomocí knihovny jsAscii můžete převést na ASCII podobu (dokumentace a příklady).
Vyzkoušet jsAscii (měňte parametry podle dokumentace)
Komprimace dat do obrázku
A nakonec něco pro geeky. Možnost zpracovávat obrázky v prohlížeči otevírá novou dimenzi ukládání dat. Myslíte si, že v obrázku musí být uložen zase jenom obrázek? Proč by nešel do obrázku uložit napřiklad kód JavaScriptu? Pokud se použije obrázek s bezeztrátovou kompresí, je to zajímavý způsob přenosu dat a navíc zkomprimovaných. V Compression using Canvas and PNG-embedded data se Jacob pokouší komprimovat populární JavaScriptové knihovny a dlužno říci, že se mu to docela daří. Rozeznáte, na kterém z následujících obrázků je jQuery a na kterém Prototype?
Vyzkoušejte si uložení do obrázku sami.
Canvas – víc než evoluce
Ne, s canvasem web nebude stejný, jako býval před ním. Ovšem, kde jsou skutečné hranice možností canvasu, to zatím těžko říct. Stále se posouvají, záleží kolik takových Jacobů se ještě objeví. Klobouk dolů.
BTW. Mám jsem ještě kupu dalších canvasových zajímavostí od jiných autorů, ale o tom někdy příště.
-
Související články na blogu Martin Hassman: nejen o prohlížečích
-
Canvas - Wolfenstein jako netradiční fotogalerie 18. 8. 2008 12:51
-
Canvas, editace fotek a jezdící Super Mario 3. 6. 2008 18:02
-
Canvas - Doom ve vašem prohlížeči 15. 5. 2007 18:11
-
Je canvas připraven pro web? 4. 3. 2007 0:04
-
WebGL bude ráj pro chemiky 12. 2. 2010 10:23
-
Letošek bude prvním rokem 3D na Webu aneb WebGL rules! 4. 1. 2010 23:08
-
-
Související články na ostatních blozích
-
Optimalizace metodou pokus-omyl 29. 4. 2013 11:47
-
HTML tabulky na web: jiný úhel pohledu 16. 10. 2012 17:35
-
HTML5 urobí z HTML stránky poznámkový blok 11. 2. 2012 23:30
-
Detekce indexovacího robota 25. 5. 2010 10:10
-
Nečekané vlastnosti mého spam filtru 7. 5. 2010 9:51
-
Propagační kupony Google AdWords na 1000 Kč 3. 2. 2010 22:03
-
-
Pavel Tisnovsky (neregistrovaný)
Ano, canvas je moc pekny koncept, docela jsem byl prekvapen, ze se vlastne objevil tak pozde, protoze cesta od webovych formularu ke skutecne grafickym aplikacim byla zrejma. Jen doufejme, ze neujde na ubyte tak, jako SVG (i kdyz to je relativni, na Intranetech se pouziva docela casto), ktere ma v oblasti 2D plusminus ty stejne moznosti.
-
Martin Hassman (neregistrovaný)
Pavel Tisnovsky: S tím srovnáním s SVG jsem docela optimistický. Zatímco ani po pěti letech po vydání SVG specifikace nedošlo k jeho rozšíření na webu (ano, můžeme si ukazovat prstem na viníky), tak canvas se začíná používat už teď víc než SVG a to není jeho specifikace ještě oficiálně dokončena (k tomu srovnání např. Yahoo Pipes používá canvas, nevšiml jsem si, že by nějaký podobný velký hráč kdy použil SVG). Jedním z důvodů bude i možnost ho částečně emulovat v IE, která pro základní použití postačí (pro šílenosti typu Wolfenstein už samozřejmě ne). Nevypovídá to samozřejmě nijak o kvalitách obou technologií, ale o tom, jaká je čeká budoucnost již trochu ano. Canvas budoucnost má už dnes, u SVG si ještě musíme počkat a uvidíme.
-
Martin Hassman (neregistrovaný)
estonto: Z pohledu vývojářů je přímo obrovská změna, když mohou pracovat pomocí technologií a knihoven, které již dávno znají. Očekávám aspoň o jeden až dva řády větší zájem o vývoj s canvasem než pro vyvíjení podobných věcí pro různá jiná prostředí.
A třeba už to, že výsledek je součást stránky a bude se chovat jako "živý" obrázek, ale stále obrázek (viz přístup FF3, který na venek canvas skutečně prezentuje jako obrázek ve stránce) je krok, který se pluginům nikdy nepodařil.
V tuhle chvíli má Flash se svou více jak desetiletou historií náskok. A při pohledu výše to skutečně vypadá, že canvas dělá něco, co Flash někdy dělal taky, ano dělá. Myslím, že nebude trvat dlouho (v horizontu let) a situace se změní. Jakmile canvas už nebudou jen experimenty zmiňované v článku, ale reálné nástroje, budou si vývojáři vždy klást otázku, kdy mají použít Flash a kdy si bohatě vystačí s canvasem.
Určitě tu budou oblasti, kde Flash zůstane prioritou, na druhou stranu v řadě případů se z použití Flashe stane zbytečný luxus.
-
Jirka (neregistrovaný)
Dost stare a ani vlastne nevim, jak je to udelane. Ale je to pekne:
http://www.elizium.nu/scripts/lemmings/ -
Martin Hassman (neregistrovaný)
Jirka: Díky, to jsem neznal. Jak koukám, je dělané celkem drsně. Např. ty pohybující se postavičky jsou malé divy, které mají jako pozadí animovaný gif chodící postavičky (jeden gif pro pohyb doprava, druhý gif pro pohyb doleva) a vše se řeší pozicováním na úrovni DOMu.
-
jet (neregistrovaný)
nevim jak vy, ale ja flash z duse nenavidim. Ktery jiny plugin vas kazdou chvili presvedcuje aby se nainstalovala nova verze? Ktery jiny plugin dokaze sezrat 99% processoru a nejde killnout jinak nez SIGTERMem? A oficialni podpora tohoto pluginu je desna. Neexistuje flash pro powerpc, problemy s 64bitama (alespon donedavna). Proste des.
-
xurwha (neregistrovaný)
Mno, SVG umí taky zajímavé věci, viz např.: http://srufaculty.sru.edu/david.dailey/svg/clipdrag12.svg
-
Martin Hassman (neregistrovaný)
Honza: Ale Java se tenkrát na webu zrovna příliš neujala, že ne? (V budoucnu se to může změnit a Sun se o to snaží.)
Určitě to bude méně přenositelné? Co si pamatuji, tak interoperabilita u javovských appletů zrovna moc silnou stránkou nebyla, problémy mezi MS Javou v IE a Javou od Suny nebyly zrovna výjimkou. Já bych si tipnul, že u canvasu bude přenositelnost lepší než tenkrát u javovských appletů, ostatně není problém si výše uvedené příklady spustit v různých prohlížečích, které canvas implementovaly a porovnat výsledky.
