HTML5: seriously, it's not just for video
By Joshua Topolsky 
posted May 28th 2010 2:15PM
posted May 28th 2010 2:15PM
Note: Your best experiences for the links below will be in Chrome or Safari. You can get some of this working in Firefox, but as Chris Ziegler just remarked, "It's mega slow."
- These will absolutely blow your mind. Mr.doob's Chrome experiments -- Ball Pool and Google Gravity.
- Here's a roundup of experiments from Ben Joffe, including a rudimentary 3D shooter, a 3D functions plotter, and an HTML5 color picker.
- Some of my personal favorites, KesieV's Akihabara game room. The Legend of Sadness is where it's at.
- Exploding, real-time video.
- WPilot -- a multiplayer shooter. Like Asteroids meets Quake.
- A giant, color-cycling canvas. Weirdly addictive to play with.
- 3D molecules. 'Nuff said.
- Mega Man intro. In HTML5.
Mega Man FTW!!!!
@Snarf101 Mega man is awesome. That said, I think Engadget should avoid referring to thing as being, for instance, "in HTML 5". The way it is being compared to Flash etc, and this kind of reference - neither are constructive towards making people aware that it is a markup language, not a programming language- and as such, is levering other technologies to achieve these results. Just try to avoid confusion! It also isn't a 'format'.
@Snarf101 Doesnt do anything....
@Snarf101 Thats Zelda FOOL!
@Snarf101
BTW This also works flawlessly on Opera!
But I guess you just forgot to mention ;-)
@JustThatNerdyGuy
He's referring to the Mega Man intro FOOL!
@adarkn
Confirmed: Engadget conspires against Opera.
j/k guys...
@Snarf101
IronicSans is a blog I like and a while ago he made a dynamic volume control thing using HTML5. Not as flashy as some other examples but it's still cool. Essentially, instead of going from quiet to loud, moving the volume bar makes the audio go from whisper to shout. Check it out, here's a link:
http://www.ironicsans.com/2010/03/idea_a_new_kind_of_volume_cont.html
@Snarf101
for those of you who have upgraded to Google chrome there are alot more experiments like those.
they are created by programming languages such as HTML5, canvas and SVG
link: http://www.chromeexperiments.com/
for those who haven't upgraded yet you can add this to the list of why you should.
@mr88
That pun with "flashy" was not at all intentional and I didn't even realize until after I posted haha. All I meant was that it isn't as creative or cool of an example as the others. :-)
@Dsi2play ...it's a markup language, such as the current HTML. What goes on inside those canvas tags is just javascript.
@fast
That zelda clone is a game created by the owner of zawaung.co.uk/
He has other games that use that overlay compatible with touch devices only, mainly the iphone (or ipod touch)
Besides Zelda clone, he has tetris, a vertical shooter, pacman, platformer game and I think another but I cant remember.
@Dsi2play
"they are created by programming languages such as HTML5, canvas and SVG"
Pssst. Your complete lack of programming knowledge is showing.
@Technologeee Ahem... Saying the truth seems that my games finished there without credits to the original project. Thank you for pointing me to this :) The original project URL is that one in the article (http://www.kesiev.com/akihabara/) and sources are available on Github (http://github.com/kesiev/akihabara).
Oh... and "fast" was right :)
Yeah, google's pac-man tribute header last week was all HTML5, except for the audio...
@kirkh
it wasn't HTML 5.
@kirkh No, that was in JS.
@N900 Yeah, most HTML5 elements use Javascript. Canvas and SVG do, which is what I am guessing they made it in. Can't think of any other HTML technologies they could have used. It was almost 100% definitely a HTML5 technology.
@chaddledee it was html5, i read an article last week where they interviewed some google people responsible for the game and they say the game was html5 and the audio was flash. i would find the article for you but i dont feel like it lrn2google
@saturnblackhole http://lmgtfy.com/?q=Google+Pac+Man+HTML5
@kirkh
Oh god, I really want to comment here and clear this whole html5 thing up, but why bother?
@kirkh
Show me something Flash CANNOT do...
That is, other than actually running on iMobile Devices...
@kapanak
1) run well on non-Windows platforms.
2) run on platforms that Adobe doesn't feel are worth supporting.
3) Run in browsers Adobe doesn't feel are worth supporting.
HTML 5 is the future!
Now I only wish my mobile phone could HTML 5....
@pankomputerek
what phone is it? nokia 3310... :P
@pankomputerek
The 3d shooter works on my palm pre.
@mielech I've got satio =] but no html 5 browser actually work well that's I'm working on android hack...
@pankomputerek
What about the iPhone/iPad, aren't they suppose to be supporting HTML 5 now? Has anyone tried?
I'm trying from my iPod Touch but no luck yet...
@Plazmic Flame
Mega Man intro worked on iPod Touch Safari browser, although it was a little glitchy graphically.
@Plazmic Flame
I tried Legend of sadness on my 3g and it was really Slow. Seeing what Flash does on other mobile platforms I am pretty sure even html5 wont be the perfect candidate for mobile Devices for a long time.
@pankomputerek
Is the future supposed to slowdown Chrome with 3 of those sites in different tabs?
@Arkv2 Don't worry, in the future you will have a better PC.
@Plazmic Flame
i tried all of them on my 3GS and was actually a little surprised by a few of them. Most notably, the Legend of Whatever game. It ran very well! The only issue is that you can't see the whole dpad and the whole game screen at once. He should have put the dpad and buttons to the sides of the canvas.
Most of the demos worked, but some of them ran very slow on the 3GS (to be expected I suppose), and many of them didn't function due to requiring a keyboard where there is no way to bring up a virtual keyboard. Some that involved clicking and dragging didn't work correctly because it would scroll the screen instead of interacting with objects.
@elitist
yeah the shooter rocks, i fragged all the walls.
Who's your daddy and what does he do?
HTML5 is o.k.
It is still eons behind Flash, and when it does catch up, Flash will be used on every single device, besides Apple's of course.
@furquanatique
By the way, that "3D Molecules" demo cripples my desktop Core i7 when I open 5+ molecule windows.
@furquanatique Same here on my Core 2. And Josh complains about Flash's CPU usage...
@furquanatique same here, but check out your CPU usage, it is barely tapping our i7. I imagine if it did, I'd expect all 15 of the windows I opened to be running smoothly. (Not to mention chucking some of that over to my GPU...)
@trong
Perhaps u guys need a new browser or new hardware :-)
@drh Core i9 and Firefox 5???
@trong I guess it was not just me who noticed John and his Flash Hate
@drh http://i47.tinypic.com/35849dd.jpg
Running a recent Core 2 with 4 GB of RAM and Chrome 6. Laptop hardware doesn't get much newer than this...
@furquanatique
Tried some of the games (I have a core 2 duo, running firefox). The multiplayer game was laggy (although it may have to do with the location of the servers). Some of the games didn't take my key presses. The higher res examples are also a bit laggy. I remember some benchmarks that show Flash outperformed HTML5 in animation, although some optimizations may change this. Part of the problem is that javascript has to be used to drive the canvas, and javascript is slow, which means Flash may actually outperform it (despite all the hoopla being made about how inefficient Flash is). It is cool you can do this on canvas without plug-ins though.
@jakey I disagree with you on pretty much everything you said.
First what is the definition of "plugin"? If Google squeezes flash so deep in the browser, is it still a plugin?
Second javascript is not slow anymore, google did terrific job in past couple years, let's talk two years down the road how slow javascript is.
Third, HTML5 is very very new technology, flash has been out there forever. give it a year or two and then run comparisons.
Flash is terrible technology, the scripting behind it is simply horribly done, I really hope most of the websites are not going to use it for video playback in the near future. Flash is certainly not the future of the internet.
@Jimbojones
Notice how you said two years. Where will Flash be in two years? It directly illustrates that point that HTML5 isn't ready yet, so why not use Flash in the mean time?
Yes, the javascript performance of the V8 engine is amazing (due to compiling to native code vs actionscript compiled to bytecode + JIT compiler introduced in Flash 9), but for the large majority of the market, the javascript is still interpreted, and that means slow code.
HTML5 is the future of the web, no one says it isn't, but the key word is future. But I want to view the web now, and that means Flash.
@Jimbojones
Javascript is still slower than Actionsript though.
And while JIT-compilers for JS are optimized all the time, so is Flash.
The problem is that JS in it current state has disadvantages that means that it will by nature be slower.
Both JS and AS are based on ECMAScript, but JS uses an older version of the standard. It lack a lot of functionality that AS provides making it a lot less suitable for anything but small simple scripts.
And it also does not have strict typing, which does help a JIT compiler a lot when it comes to delivering optimal performance. Also a JIT compiler for JS will work on the script code directly, while with Flash you first compile AS into bytecode for the Flash Player. The JIT compiler in the Flash Player will then compile machinecode from that bytecode. That also makes for better performance.
So unless JS get's updated to follow later standards of ECMAScript and is pre-compiled it just will not catch up with Flash.
The main area where a lot of these demos struggle is probably not the actual scripting though, but the rendering of graphics using canvas or SVG. That is certainly an area where browsers will improve, but currently it's obvious how much Flash rocks in that area. The rendering in the Flash Player is many times faster than competing technologies, and while they might catch up there is very little basis for assuming that will happen in the foreseeable future.
@Jimbojones Its true that most flash content on the internet today is coded apaulingly. However I somehow doubt your gonna get better results through JS once you have the same number of developers.
AS3 is a much more robust language than JS in its current state - coding in JS after learning AS3 feels like I have to revert several years into the past. I essentially have to force myself to code like I did when I first started learning AS2.
+ Like others have stated AS is developing as a language at a much faster pace, by the time JS and other related technologies catch up to the capabilities and the performance that is currently possible with flash the flash platform would have (hopefully) moved eons ahead.
Lets all hope that by the end of this decade (or maybe sooner) the need for plugins would have disappeared all together. However, right now flash is still the best solution for a good number of scenarios so I see no reason to give up on it yet.
@drh
yet, to play flash items, i dont need new hardware or software
i wonder which i prefer, a software that lags the shit out of everything even once youve brought your new hardware or software, or a software that only has issues if people code it horrificly that doesnt require me to buy new hardware/software
hmm...
hard decision
Yep, as others have said, AS3 is really a robust an elegant modern language. I think the language it most resembles is C# and in many ways is far nicer than Java. To say the scripting behind Flash is bad is to show that you don't understand it.
Some programmers who prefer other syntactical styles (Ruby/Obj-C, Python, etc) might not like it, but from the Java/JS/ECMAScript/C++/Curly bracket/dot syntax world, it is definitely a fantastic modern language.
Some nice advantages: A good built-in event architecture, event bubbling, deep object copying, reflection, inheritance, polymorphism, elegant getters and setters (for help in encapsulation), consistent and good cohesion in the API.