Hlavní navigace

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

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