Kouzla s canvasem - libo šachy nebo Wolfensteina?

31. 5. 2008 11:37 (aktualizováno) | Martin Hassman

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á).

Screenshot hry Super Mario v JavaScriptu

Zahrát si Super Maria

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).

Screenshot 3D sachy v JavaScriptu

Spustit 3D šachy

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.

Wolfenstein v Javascriptu - screenshot

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.

Screenshot video prehravac v JavaScriptu

Spustit první video

Spustit druhé video

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ší.

Canvas a obrazkove filtry

Vyzkoušejte obrázkové filtry

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).

Logo Firefoxu v ASCII

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?

jQuery

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ě.

  • 5. 5. 2008 8:55

    estonto (neregistrovaný)

    V čem bude ta změna, kterou canvas přinese? Řekl bych, že tohle všechno umí dávno osvědčený flash, který běží asi v 98% prohlížečů. Navíc bych čekal, že javascript bude náročnější na zdroje.

  • 5. 5. 2008 8:56

    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.

  • 5. 5. 2008 9:45

    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.

  • 5. 5. 2008 10:01

    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.

  • 5. 5. 2008 10:44

    Jirka (neregistrovaný)

    Dost stare a ani vlastne nevim, jak je to udelane. Ale je to pekne:
    http://www.elizium.nu/scripts/lemmings/

  • 5. 5. 2008 11:00

    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.

  • 5. 5. 2008 13:01

    Rejpal (neregistrovaný)

    estonto: Myslíte ten Flash, který zřejmě bude brzy používat Tamarin VM, stejně jako některé webové prohlížeče, jako třeba Firefox? ;-)

  • 5. 5. 2008 17:57

    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.

  • 5. 5. 2008 17:58

    xurwha (neregistrovaný)

    Mno, SVG umí taky zajímavé věci, viz např.: http://srufaculty.sru.edu/david.dailey/svg/clipdrag12.svg

  • 5. 5. 2008 19:21

    Honza (neregistrovaný)

    Hm. Java applety v roce 1996 tohle vsechno umely, a ted zas vznika nejaka dalsi technologie, ktera se pokousi o totez, jen to bude 1000x narocnejsi a 10x mene prenositelne :-(

  • 5. 5. 2008 19:54

    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.

  • 13. 5. 2008 20:39

    lordhoven (neregistrovaný)

    No tak ten Wolfik je opravdu masakrální!

Přidávat nové názory je zakázáno.

120na80.cz: 3 možnosti, kde bude jizva

3 možnosti, kde bude jizva

Lupa.cz: Elektronika tajemství zbavená. Jak s ní začít?

Elektronika tajemství zbavená. Jak s ní začít?

Lupa.cz: Nechcete datacentrum? Jsou na prodej

Nechcete datacentrum? Jsou na prodej

DigiZone.cz: Slovak Telekom: kanály pro nový balíček

Slovak Telekom: kanály pro nový balíček

Root.cz: Legendární hra Quake slaví 20. narozeniny

Legendární hra Quake slaví 20. narozeniny

DigiZone.cz: Film+ a nevhodné snímky přes den

Film+ a nevhodné snímky přes den

Podnikatel.cz: Mění se pravidla pro rodičovskou

Mění se pravidla pro rodičovskou

Podnikatel.cz: Reverse – charge dopadá na další služby

Reverse – charge dopadá na další služby

Podnikatel.cz: Čauky mňauky. Proč hledají lidé tento výraz?

Čauky mňauky. Proč hledají lidé tento výraz?

Vitalia.cz: Lidl opakovaně nabízel falšované potraviny

Lidl opakovaně nabízel falšované potraviny

Podnikatel.cz: Kdy s příjmy není třeba platit zdravotko?

Kdy s příjmy není třeba platit zdravotko?

Vitalia.cz: Jak pít při sportu

Jak pít při sportu

Lupa.cz: Milý deníčku, teď mi tě bude psát aplikace

Milý deníčku, teď mi tě bude psát aplikace

Vitalia.cz: Kedlubna, neobyčejná zelenina

Kedlubna, neobyčejná zelenina

Vitalia.cz: I takové burgery nabídla Veggie náplavka

I takové burgery nabídla Veggie náplavka

Podnikatel.cz: Musí rentiér odvádět DPH?

Musí rentiér odvádět DPH?

Root.cz: Xiaomi má vlastní notebook podobný Macu

Xiaomi má vlastní notebook podobný Macu

Lupa.cz: Kdy se Estonec přihlásí k české datové schránce?

Kdy se Estonec přihlásí k české datové schránce?

Podnikatel.cz: SMS oznamují nedoplatek na dani, nic neplaťte

SMS oznamují nedoplatek na dani, nic neplaťte

Lupa.cz: Pirate Bay se drží 13 let. A bojuje s Hollywoodem

Pirate Bay se drží 13 let. A bojuje s Hollywoodem