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.

Lupa.cz: Další Češi si nechali vložit do těla čip

Další Češi si nechali vložit do těla čip

Lupa.cz: Cimrman má hry na YouTube i vlastní doodle

Cimrman má hry na YouTube i vlastní doodle

Podnikatel.cz: Udělali jsme velkou chybu, napsal Čupr

Udělali jsme velkou chybu, napsal Čupr

120na80.cz: Na různou rýmu různá homeopatie

Na různou rýmu různá homeopatie

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

DigiZone.cz: Digi Slovakia zařazuje stanice SPI

Digi Slovakia zařazuje stanice SPI

Podnikatel.cz: Byla finanční manažerka, teď cvičí jógu

Byla finanční manažerka, teď cvičí jógu

DigiZone.cz: Wimbledon na Nova Sport až do 2019

Wimbledon na Nova Sport až do 2019

Podnikatel.cz: Poslanci chtějí sebrat majetek Bakalovi

Poslanci chtějí sebrat majetek Bakalovi

Lupa.cz: Jak levné procesory změnily svět?

Jak levné procesory změnily svět?

Lupa.cz: Jak se prodává firma za miliardu?

Jak se prodává firma za miliardu?

DigiZone.cz: Ginx TV: pořad o počítačových hráčích

Ginx TV: pořad o počítačových hráčích

Podnikatel.cz: Letáky? Lidi zuří, ale ony stále fungují

Letáky? Lidi zuří, ale ony stále fungují

Vitalia.cz: Test dětských svačinek: Tyhle ne!

Test dětských svačinek: Tyhle ne!

DigiZone.cz: Samsung EVO-S: novinka pro Skylink

Samsung EVO-S: novinka pro Skylink

DigiZone.cz: DVB-T2 ověřeno: seznam TV zveřejněn

DVB-T2 ověřeno: seznam TV zveřejněn

Vitalia.cz: Pryč se zastaralým stravováním ve školách

Pryč se zastaralým stravováním ve školách

Vitalia.cz: Jsou vegani a vyrábějí nemléko

Jsou vegani a vyrábějí nemléko

DigiZone.cz: Numan Two: rozhlasový přijímač s CD

Numan Two: rozhlasový přijímač s CD

Root.cz: Hořící telefon Samsung Note 7 zapálil auto

Hořící telefon Samsung Note 7 zapálil auto