HTML 5 Canvas Experiment Hints At Things To Come

An anonymous reader writes with an interesting and impressive demonstration of modern browsers' HTML 5 capabilities. "From the 9elements blog: 'HTML5 is getting a lot of love lately. With the arrival of Firefox 3.5, Safari 4 and the new 3.0 beta of Google Chrome, browsers support some great new features including canvas and the new audio/video tags. [...] We've created a little experiment which loads 100 tweets related to HTML 5 and displays them using a javascript-based particle engine.' The site warns "(beware: sophisticated browser needed)"; Firefox 3.5 seems to work fine.

No audio here thank god

[Anonymous Coward]

Websites that (successfully) make noise at me are one of my pet hates.

The animationy stuff sure is purdy though.

Re:I just checked it out with Firefox 3.5.2

[Anonymous Coward]

I'm using firefox 2 and see about the same. Clicking brings up the twats too. With the benefit of no forced audio, and no awful bar!

Re:Awesomely CPU Hungry

[Phroggy]

Weird. My iBook isn't fast enough to play YouTube videos, but handled this with no problem at all.

Re:Slideshow

[El_Muerte_TDS]

Runs quite well on my old Toshiba Satellite Pro M10 (Pentium M 1.5, 512MB RAM, FF3.5.2, Windws XP)

Re:Compared to flash...

[Dragonshed]

Processing is a Java library, parts of which has been ported to javascript.

http://en.wikipedia.org/wiki/Processing_(programming_language) [wikipedia.org]

Re:Awesome

[JuzzFunky]

Yeah, it's not even that hard. As mentioned in TFA, they use Processing.js [processingjs.org], which is a javascript port of Processing [processing.org]

Re:To my very pleasant surprise...

[TeXMaster]

Opera too. No sound, but smooth animations and low resource usages. I wonder why these browsers were not mentioned in the summary. ;-)

Re:Awesome

[xouumalperxe]

What the GP said is that Javascript doesn't expose enough of the client's resources to the server to be a problem in and of itself. As in, the server doesn't get to know stuff about the client that the client wouldn't want.

Alas, I somewhat disagree. The point is very much that Javascript makes it easy to find yourself typing personal information somewhere you shouldn't.

Re:Awesomely CPU Hungry

[t0y]

In simple terms, it'll go as smooth (framerate) as your CPU will allow. That's why it's maxing out.
It's not surprising since this is a tech demo, and in reality most javascript animations you see today already do this to maximize fluidness.

Re:Compared to flash...

[dave420]

Most folks don't give a crap about Adobe owning Flash - they just want stuff to work. If Adobe tanks, and no one buys them out, and they're stuck, then they'll start to care. But until then, don't expect anyone to lose any sleep over Flash being closed source. And yes, Flash is muuuch faster when it comes to particles. here is a demo [unitzeroone.com] that has over 300,000 particles, compared to the 100 or so in the HTML5 demo, and it runs faster, and with less CPU usage. So you're right - in this highly-arbitrary test you proposed it's not twice as fast, flash is at least 1,000 times as fast ;). I'm sure HTML5 will get better, but it's definitely not there yet. Flash is decent, if used correctly. Just like a car, just like a computer, just like an internet connection, just like everything else in the world.

Re:No audio here thank god

[IndieKid]

They do on Vista and Windows 7. In fact, every application has its own volume control.

See this link [msdn.com] on MSDN

Re:Canvas as Video Codec?

[dingen]

The video tag is not halted at all. They just decided not to mandate a specific codec, because they couldn't come to a consensus on which codec it should be.

Re:Compared to flash...

[Stan Vassilev]

More control for one. Flash is essentially a self contained program running in your browser. HTML5 will allow things like audio volume per tab, or per domain, more interaction between the page itself, the content, and the user.

The fact it's self-contained doesn't mean it's isolated from the page. It's in fact a benefit, because it quickly becomes a burden to serve your app as a hundred of tiny images and js files. The "minification" and "sprite" techniques the community is forced to use in JS/HTML/CSS apps, are tedious, limited and just a poor-man's compilation technique, a sign that in practice a compressed one-off-download container is the better choice for web apps.

There is also fast two-way connection between JS and Flash that works in all browsers today. Anything the browser provides as settings and per-tab controls and so on, which is accessible to JavaScript/DOM, is accessible to Flash as well. As an example of this feature in action, you can see the HTML5 features like canvas [ajaxian.com] and SVG [google.com] implemented transparently via Flash. You can also use most of the essential Flash features directly from JavaScript with libraries like Aflax [aflax.org].

Here's a fantastic example of the sorts of things this'll make possible, which simply can't be done with flash: http://www.double.co.nz/video_test/video.svg [double.co.nz] [double.co.nz]

Would you care to elaborate what is in that demo that Flash can't easily top today. I see scalable rotatable rectangles with transluccent video in them. Nothing Flash couldn't do few years ago. Today, in Flash you can also map videos like that on waving flags in 3D space or have full-blown alpha mask for dynamic compositing, if you wish. I shouldn't need to mention also that Flash provides consistent codec support (including H264/AAC) on all platforms and browsers in turns on, today. All this while even non-MS browser makers can't agree on a common codec to use (let alone Microsoft joining them any time soon).

You have true 3D engines with shader support [papervision3d.org] or full-blown music synthesis and sequencing applications [hobnox.com] built directly on top of the flash platform.

All in all, most arguments against Flash I've seen, are arguments out of ignorance and bias. I would be the first to call out a poor use of Flash when I see one, but it works the other way too. In the end, can't we have both instead of either? Who stands to win by "eliminating" either option when they both fill different, though partially overlapping roles?

Re:Awesome

[tolan-b]

YouTube are going to be dropping support for IE6 soon. Bet you see the numbers drop off rapidly then.

Re:Slideshow

[jorgevillalobos]

You can load a sound and have it buffer without playing it, but there's a limited media cache so it may require some juggling to have all the right sounds available at the right time. Probably enough to run a decent game :)

Source: https://developer.mozilla.org/En/HTML/Element/Audio [mozilla.org]