Posted
by
timothy
on Thursday August 06, 2009 @12:40AM
from the faux-phlash dept.

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.

I'm guessing that could be graphics card or driver related? Try making the window really small - if that makes it fast, it's a fill rate issue and you're probably doing all the drawing in software.

I really, really want to start playing with this for casual game development now. I loved the old embedded Java Applet style but it grew too heavyweight and the Java API became too unstable and turdy. The same thing back with the original simplicity plus more speed and no runtime needed? Sign me up!

The only problem with game development is that javascript doesn't support sound. You can use background music with , but the only way games have been using sound in canvas so far is by using an additional flash applet controlled by javascript =\

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

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.

My system is a laptop with 2.8GHz core 2 duo, and dual WUXGA, running XP pro SP3.
Using Opera 9.64, it pushed the cpu to about 30% (i.e. Opera used about half of one core).
Using Firefox 3.5.1, it pushed the cpu to over 50% (i.e. Firefox used all of one core).
Both appeared to be smooth enough. So there's a browser dependency in the cpu load.

It is even more fun if you are feeding sound into a stereo system playing music and a random sound comes on loud enough to deafen you. This is why I disable sound on any program possible.

Lost a speaker once because even with the volume controls on the stereo and computer turned to almost maximum whatever was playing was extremely quiet, all of a sudden either a program or website (I forget) started playing sound unexpectedly.

Yes windows allows per program control and pulse audio on linux probably allows co

One of the whole points of moving audio and video out of plugins like flash, and into native browser implementations is that it'll allow things like volume control or mute per tab, or a firefox setting/plugin which can adjust volume based on the site's domain, etc. It frees up the content for more potential control on the user's end.

Probably, but why? Unless it's a vector animation to begin with, converting video to SVG will just increase its size several times if you want to maintain any quality at all. Continuously fetching a JPEG frame would probably be faster/better quality (and in fact that is what some webcam sites do at the moment).

Well, remember the utility of Flash 10 years ago? It was basically a 400MB flash applet that loaded to play some crappy downloaded metal song while spinning some text 360 degrees. No doubt this will be abused to high hell before it gets some pretty useful utility. I prefer this demo rather than those stupid angelfire sites that crippled my computer because someone had a hardon for spinning text and Fear Factory.

Personally I find it not so much impressive, but worrying that the current state of the art is "a 2GHz box struggling to play a stripped-down wolfenstein at 320x200 at 30fps", and this is after the browser makers have had an arms race resulting in javascript being 100x as fast as a simple reference implementation...

WTF is up with javascript as a language that means the latest most advanced researchers can't bring it within an order of magnitude of software rendering in C? And why is everyone in such a rus

..what are the advantages of doing this in HTML? If HTML 5 can obviate a bunch of complex, unrelated web technologies that make programming for the Web today such a mess, then great... but if it just adds to the pile, and doesn't build on expertise in "classical" HTML, then it's just adding to the problem.

The demo uses processing.js - essentially a Java library. Whether this has any more utility than Flash (remembering that the flash of today is not the monstrosity most of/. seems to remember and think it still is) could be debated, but it's definitely more in line with standards compliance.

I did read it, the difference between you and I is that I understood what I was reading.

The original particle engine was ported from a Flex/AS3 project that weâ(TM)ve created to javascript. Weâ(TM)re using processing.js for particle rendering on canvas which is a very useful graphics library created by John Resig.

Processing.js is used to render Processing code, a subset of Java, not JavaScript. FFS, if you're going to accuse someone of not RTFM, at least be sure you did so yourself.

Is eliminating Flash not enough? HTML5 is open and (being) standardised; anyone is free to implement it. (And you can see there are already several competing implementations in progress) Flash is a proprietary platform and you are solely dependant on the whims of Adobe. If even just for the lack of choice, Flash is a worse platform. Nothing's forcing Adobe to fix their player, while the HTML5 browsers definitely have some competition going on and are improving at an amazing rate - and in fact when HTML5 starts to pick up, Adobe will be forced to do something, as HTML5 itself will be competition to Flash.

Some people complain about how fast that thing runs (or how much CPU usage it takes), but I bet a flash version would not be even twice as fast, and Flash has existed for how long compared to browser support for HTML5 technologies?

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

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.

I actually think this is a better HTML5 example than the article. There you have video transparency, which can be a variable, you can selective audio based on the last thing you clicked, it can be moved, rotated, and resized freely by dragging the corners, etc. You can pause, play, mute, and adjust volume to each one completely independently of the other (though the volume control is blocked by the draggable corners, remember you can right click the video and click Show Controls in firefox). I once even saw a demo where the edges of video were distortable, allowing you to skew it, etc, and it was smoothly done too, better than most compiled applications I've seen. Not to mention effects like reflecting video content below the video in real-time (like it's on a glassy surface).

What'll be really impressive is when SVG is finally fully implemented, because that'll give us an open standard for filters and many other things (you can alter colors in a video on the fly, generate images, gradients, and effects dynamically, etc, as well as animations without any javascript at all.

What it comes down to is changing the notion of what's possible with just a browser... If you think that AJAX webapps are impressive now, just you wait...

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.

KDE4's Konqueror handled the page for me much better than did Firefox. I have Firefox 3.5.1 and Konqueror 4.2.98. While Konqueror gave me no sound and Firefox did, when I tried it with Firefox, it ate up so many resources that I couldn't even get my key combo for xkill to work. Fortunately, I was able to get to a virtual terminal and kill it, but it wound up crashing my window manager. Konqueror did much better. I need to try it with Opera (which I understand is supposed to be very good).

Anyway, it's pretty neat. I think I'll start making some pages for the heck of it and put it on my local network.

Canvas can't play video directly. The video tag is currently halted in the HTML 5 spec. Is there a way to deliver video in canvas anyway? Is there anything like a "video to SVG" converter that could give canvas some SVG to play instead? Or some other actual canvas feature that could be used (without resorting to ASCII art animation)?

For what looks like a demo that people did on 8 bit computers with 4MHz processors, Safari uses 80% CPU on a 1.3GHz PowerBook G4 (although the animation is smooth) to run this. Trying to draw stuff on the screen with fragments of HTML and JavaScript, HTML5 or not, seems to be enormously inefficient, setting us back to 80s levels of performance.

I also note that recently the YouTube flash player has become a lot less efficient, even in standard definition mode. It used to run completely smoothly on my PowerBo

It seems that a lot of people are viewing this as a way to get rid of flash. I don't think that will work. The only way it will dispense with flash, is if can be made to do all the annoying things that people hate flash for. 99% of the use for this will be annoying web apps that shouldn't be using all these features, advertisements, the occasional game, some streaming video...

Flash isn't that bad, it's just used very often for irritating purposes. Just as anything that could replace it will be.

A lot of commenters are saying that this saturates their CPU. I would suggest this is a good thing. With Flash, even on the fastest Mac or Linux machine, video and complex animation can stutter, because Adobe haven't got a around to writing a proper plugin yet. But a properly written Javascript engine (like Nitro in Web Kit) can properly utilise the CPU. The animation is smooth and responsive for me on a MacBook pro, and laggy (but still somewhat usable) on a Mac mini.

I am wondering if HTML 5 can provide most of the functionality of Javascript without posing as much of a security risk.

What are the security risks of Javascript? I grant that different interpreters often have buffer overrun issues/string parsing shenanigans, but Javascript, taken as a thing independent of the different interpreters, really doesn't expose enough of the client's resources to the server to pose a "security risk," as that term is defined by prevailing consensus.

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.

Only if your target browser supports the canvas tag. The canvas tag is only standardized in HTML5, but browsers starting with WebKit/Safari (around the time 10.4 came out -- Apple invented it for their Dashboard thing), and followed later by Opera, KHTML and FF, have suppported the tag ad hoc.

Lots of key sites (eg. youtube [techradar.com]) are dropping IE6 support. Use rates on most top sites have dropped below 10%. The web is not useable with IE6. Most sites in development now are not supporting it, except by accident. IE6 is dead. Hooray!!

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

That's why I think it's awesome that HTML5 includes sound. You can't block the sound from a plugin that's executable code that does whatever it wants, however browser makers (and extension writers) can put settings options to let you opt-out for the sounds. Or prevent things from playing until you switch to the tab that wants to play them.