Slashdot Mirror

HTML5 vector animation has three drawbacks: Speed The Flash version of this Flash vs. SVG benchmark runs at 22-23 fps on a laptop with an Atom N450 CPU, which is nearly four times the speed of SVG (6 fps) in Firefox 29 on the same laptop. Set quality to low and it shoots up to 31-32 fps. Tools The page you linked on creativedroplets.com mentions Edge Animate. But second-hand copies of old versions of Flash are widely available, while Edge Animate is available only by subscription. Content A lot of authors of existing SWF vector animations, such as popular videos on Newgrounds, Dagobah, and Albino Blacksheep, either are no longer contactable or lack the time, tools, and inclination to convert their old productions to HTML5.

I just, like many others, wish someone would actually fucking *elaborate* on *concrete* *technical* hurdles of HTML5.

HTML5 has no guaranteed audio or video codec. Some browsers support only free codecs from Xiph and On2, others only patented codecs from Dolby and MPEG-LA. HTML5 implementations in use provide no consistent way for the application to request access to the camera and microphone. Neither IE nor Safari implements the Stream API at all, and Firefox and Chrome implement prefixed (that is, proprietary) versions of it. And on my laptop in Firefox 28, this particle system runs at 20 fps in Flash, 9 fps in HTML5 Canvas, and 5 fps in SVG. Unlike HTML5 JavaScript, ActionScript has static typing and class-style inheritance, and some developers prefer those. Finally, copies of old versions of Flash for making vector animations are sold on the secondary market; Edge Animate is available only on a rental basis through Creative Cloud. I'd be interested to see what workarounds you recommend for these.

I ran this particle system on a desktop PC running Windows XP and Firefox 12. For DHTML, I get 10 fps. For Canvas, I get about 20 fps. For SVG, I get less than 3 fps. For SWF, I get a solid 40 fps.

I ran this particle system on a desktop PC running Windows XP and Firefox 12. For DHTML, I get 10 fps. For Canvas, I get about 20 fps. For SVG, I get less than 3 fps. For SWF, I get a solid 40 fps.

I ran this particle system on a desktop PC running Windows XP and Firefox 12. For DHTML, I get 10 fps. For Canvas, I get about 20 fps. For SVG, I get less than 3 fps. For SWF, I get a solid 40 fps.

I ran this particle system on a desktop PC running Windows XP and Firefox 12. For DHTML, I get 10 fps. For Canvas, I get about 20 fps. For SVG, I get less than 3 fps. For SWF, I get a solid 40 fps.

I ran this particle system on a desktop PC running Windows XP and Firefox 12. For DHTML, I get 10 fps. For Canvas, I get about 20 fps. For SVG, I get less than 3 fps. For SWF, I get a solid 40 fps.

That's funny because for me, with Win7/Firefox 11 on a Core i5 CPU with a recent Nvidia GPU, for a 2000 particle run I get 40fps in Flash and about 45fps using canvas.

http://themaninblue.com/experiment/AnimationBenchmark/flash/?particles=2000
http://themaninblue.com/experiment/AnimationBenchmark/canvas/?particles=2000

So I guess YMMV.

That's funny because for me, with Win7/Firefox 11 on a Core i5 CPU with a recent Nvidia GPU, for a 2000 particle run I get 40fps in Flash and about 45fps using canvas.

http://themaninblue.com/experiment/AnimationBenchmark/flash/?particles=2000
http://themaninblue.com/experiment/AnimationBenchmark/canvas/?particles=2000

So I guess YMMV.

you need to test scripted svg.

Result of same benchmark with SVG: eight times slower than Canvas.

i would rather see HTML-5 make plugins like flash obsolete

So would I. But first, someone must fix these problems:

• Make vector animations in web browsers implementing HTML5 Canvas play as fast as they do in Flash Player. This benchmark gives about 40 fps for Flash on my computer and 20 fps for Canvas in Firefox.
• Make a tool to author vector animations.
• Make a way to reliably convert existing vector animated series, such as Weebl and Bob and Homestar Runner, so that they can be played through an implementation of HTML5. Smokescreen goes part of the way toward this.

The browser makers will have to work just as furiously. Right now Adobe's implementation of SWF is twice as fast as Firefox's implementation of HTML5 canvas on my machine at this benchmark.

With what do you plan to replace Flash for playing web cartoons? If with JavaScript and the HTML5 canvas, then authoring tools will have to become as mature as Flash CS series, and canvas implementations will have to become at least twice as efficient as they are today (see benchmark of SWF vs. canvas).

I'm sure it used to be truth that flash was faster than native browser's javascript

The ActionScript interpreter isn't the only part of Flash. The other part is the rendering engine, and Flash is still a bit faster at that than Firefox's canvas and far faster than Firefox's SVG.

Can you care to point me to a recent benchmarks to make sure you're correct?

This benchmark on Firefox 8.0 on Windows gives canvas at 21 FPS, SVG at 3 fps, and Flash at 40 FPS on my PC.

CANVAS is now viable for use, even with IE.

Here's a benchmark of SWF, HTML 4 DOM, SVG DOM, and HTML5 <canvas>. How fast does IE render <canvas> compared to Flash Player? Or did you mean Chrome Frame?

Also,just as mini me mentioned in reply to you, Smokescreen can just convert it directly from the SWF to browser-based implementation.

Then you're still using Flash format, just with a different player. Some HTML5 partisans want to get away from Adobe software entirely.

There is also the Gordon library.

(Google gordon library) You don't mean the WPI George C. Gordon Library or the Gordon Community Library and Museum. (Google gordon library javascript) Nor do you mean the E. Allen Gordon Library. Oh, you meant this Gordon, which does much the same thing as Smokescreen.

Saying that Flash performance is "smoother" than HTML5 is a joke. It blows it out of the water. Don't believe it? Do some research.

Research done...you lose.

HTML ~40fps

Canvas ~90fps

SVG ~40fps

Flash ~110fps

So no, HTML5 technologies don't "It blow it out of the water", in fact in this test Flash is significantly smoother. Of course this is not enough to say the converse is true, in fact it probably isn't, but it's enough to prove your claim is idiotic and false.

Saying that Flash performance is "smoother" than HTML5 is a joke. It blows it out of the water. Don't believe it? Do some research.

Research done...you lose.

HTML ~40fps

Canvas ~90fps

SVG ~40fps

Flash ~110fps

So no, HTML5 technologies don't "It blow it out of the water", in fact in this test Flash is significantly smoother. Of course this is not enough to say the converse is true, in fact it probably isn't, but it's enough to prove your claim is idiotic and false.

Saying that Flash performance is "smoother" than HTML5 is a joke. It blows it out of the water. Don't believe it? Do some research.

Research done...you lose.

HTML ~40fps

Canvas ~90fps

SVG ~40fps

Flash ~110fps

So no, HTML5 technologies don't "It blow it out of the water", in fact in this test Flash is significantly smoother. Of course this is not enough to say the converse is true, in fact it probably isn't, but it's enough to prove your claim is idiotic and false.

Saying that Flash performance is "smoother" than HTML5 is a joke. It blows it out of the water. Don't believe it? Do some research.

Research done...you lose.

HTML ~40fps

Canvas ~90fps

SVG ~40fps

Flash ~110fps

So no, HTML5 technologies don't "It blow it out of the water", in fact in this test Flash is significantly smoother. Of course this is not enough to say the converse is true, in fact it probably isn't, but it's enough to prove your claim is idiotic and false.

On one PC I tried, I get roughly 50 fps on Flash and 20 fps on HTML5 Canvas running this demo.

What versions of the browser and Flash, and OS? Using Flash 10 on Ubuntu 9.10, I get 25-40 FPS in Chrome 5 (dev channel) for Flash, and 50 FPS in the HTML test. (Canvas and SVG are slower than HTML, but as fast as Flash or faster.) Opera 10.50 also performs somewhat faster on canvas than on Flash, although its HTML doesn't work right (the balls are square . . .) and SVG is slower than Flash. Firefox (3.6 and 3.7a5) does seem to do best on Flash, though.

You will. I've seen demo.s, and they where fine.

On one PC I tried, I get roughly 50 fps on Flash and 20 fps on HTML5 Canvas running this demo.

Flash 10 noticeably improved the performance on my old G4 DP 1.25. What you're saying honestly reads more like FUD, as it doesn't add up. Prior to my Intel MacBook Pros, I had Titanium 1Ghz Powerbooks and they ran Flash content -- like games - well enough for the most part.

Here, try a few HTML 5 examples, they runs MUCH slower on a Mac than the same type of demos done in Flash;
http://www.themaninblue.com/writing/perspective/2010/03/22/

My G4 Gets about 27 fps on all "Flash" examples, including 500 particles with shadows. With HTML 5, it averages about 12 fps 'without' shadows and about 4fps with shadows. The Flash examples are about 2 - 7x faster on average with my "PPC" running Flash Player 10. My UniBody 17" averages about 100 fps faster on all examples for reference.

With "heavy" HTML 5 content -- the link below -- on my MBpro unibody 17" in Safari and Firefox, the browser becomes almost unresponsive and the animation is very choppy. With the same type of content in Flash, my browser responds without hesitation and the animation is smooth;
Flash: http://mrdoob.com/46/Depth_of_Field_Test_07
HTML 5: http://mrdoob.com/97/Depth_of_Field_HTML5

I won't attempt this HTML 5 example on my G4 as it gives newer Mac a heavy work out.

What you're saying is more inline with what Jobs wants the world to believe instead of what's actually a reality. Please, stop regurgitating his talking points. He's not spreading FUD about Flash because it's the right thing for us as consumers, but because it stands to benefit his closed off platforms if consumers are OK with using iTunes/Quicktime as a gateway to all entertainment instead of a popular alternative like Flash, or any plug-in for that matter.

Javascript + svg?

Photo demo
Blobular

Photo demo converted to video demo
Info on video demo

What are some CSS-only techniques?

This guy has quite a few of them: http://themaninblue.com/experiment/InForm/margin.htm

I generally avoid using the "horizontal" layouts because <select> boxes tend to be a pixel or two taller than a corresponding text input box, meaning that if you try to mix them up on the same line without compensating for this, you run the risk of ending up with a "stair-step" display since inputs will hang up on that one pixel instead of wrapping all the way to the margin.

I'm up in the air about whether I liked Nikola's or Dino's more.
The calligraphy look on Nikola's looks nice and is fairly readable, but I also like the way Dino emphasized the large letters.

I'm up in the air about whether I liked Nikola's or Dino's more.
The calligraphy look on Nikola's looks nice and is fairly readable, but I also like the way Dino emphasized the large letters.

Features an apostrophe that's pretty freaking huge!

http://www.themaninblue.com/articles/handwritten_typographers/images/handwriting_eduardo_thumb.jpg

As a developer who works with CSS every day, I find one complication that continues to bother me in my daily work. Support for CSS has always been good on the horizontal scope, but vertical positioning has always been quite complicated. Alone the procedure to affix a footer to the bottom of a screen in dependance of the amount of content is unnecessarily difficult, spawning hackish solutions such as "footerStickAlt". Centering an object in the dead center of a page also requires strange procedures such as this one, which still aren't ideal (try making the viewport really small). The old table method provided much easier methods for this. What are your thoughts on this and do you see improvement following in future CSS revisions?

Designing a liquid two-column with header and footer layout using CSS is a nightmare

Actually, it's really simple. But Internet Explorer doesn't support that bit of CSS. So really, it's Internet Explorer that has to improve, not CSS.

Just having the footer at the bottom of the page, and not just behind the body is (AFAIK) impossible with CSS.

Not true. Here's one technique.

Pixelfest is cooler.

I remove the choice of people being able to cram that shit in my face.

I remove the choice of companies to take some of the money I've spent on a product and use it for advertising.

I remove the choice of Bush to invade another country in the name of God.

Sometimes it helps you too see the light of day if some of the choices have been removed.

Personally I hate shopping, I can't be bothered to choose anything. Blue cloths that look a bit like a medic, fine by me, after all blue's everyone's favourite colour.

The fellow @ www.themaninblue.com has an excellent javascript/dhtml version available online.

see here

I just stumbled upon it the other day, looking for ways to practice to beat my mother-in-law ;)