Follow Slashdot stories on Twitter

 


Forgot your password?
Close
typodupeerror
×
Graphics Software

HTML 5 Canvas Experiment Hints At Things To Come 321

Posted by timothy 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.
This discussion has been archived. No new comments can be posted.

HTML 5 Canvas Experiment Hints At Things To Come More

HTML 5 Canvas Experiment Hints At Things To Come

Comments Filter:

  • Slideshow (Score:2, Insightful)

    by slick_rick ( 193080 ) *

    Is a slideshow on my old Dell D820 (core duo, 2 gigs of ram, FF 3.5, Ubuntu Hardy)

    • 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!

      • Re: (Score:3, Interesting)

        by binkzz ( 779594 )
        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 =\

    • Works fine on my old Athlon XP running Windows 2000 with 1GB of RAM and a 7800GS.

    • Re: (Score:3, Informative)

      by El_Muerte_TDS ( 592157 )

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

    • Gotta be something wrong with your machine then.. since it runs just fine on my Sempron 3500 laptop with a GeForce Go 6150, 1.5 gigs of ram, ff 3.0.13, ubuntu jaunty.

    • It runs smooth on my 1.2GHz Toshiba Satellite Pro with 1GB ram, XP.

    • It runs alright on this laptop with an intel chip running Debian... pretty hearts and stuff. In Konqueror, though, not firefox.

    • A slideshow? A SLIDESHOW? Oh, what I wouldn't give to have a slideshow. Bloody favouritism.

      I've got Firefox 3.5.2 on Fedora 11 and it won't even get beyond a black page with "Loading" on it and lots of brief "transferring data" messages :\

    • Why is this modded offtopic?
      I get the same effect, and no my computer is not slow at all. I have Ubuntu, Firefox was updated yesterday.

  • I just checked it out with Firefox 3.5.2 (Score:5, Funny)

    by rampant mac ( 561036 ) on Thursday August 06, 2009 @01:50AM (#28968319)

    ...And I see a lot of floating dots.

    "HTML 5 Canvas Experiment Hints At Things To Come"

    Seizures?

  • The animation was smooth, the audio played without a hitch, it was great.

  • Awesomely CPU Hungry (Score:5, Insightful)

    by The Real Nem ( 793299 ) on Thursday August 06, 2009 @01:54AM (#28968347) Homepage

    It was so awesome it pegged a whole core on my E8400. I expect to web to fuel larger hard drives, but faster CPUs? That's gettinga little out of hand.

    • Re: (Score:2, Interesting)

      by Microlith ( 54737 )

      It's sad that it has to eat an entire core's worth of processing time, the whole time I was on the page I had an extremely powerful GPU sitting idle.

      I think before anything like that can truly take off, they need a means of taking advantage of the hardware we have.

    • Re: (Score:2)

      by Trepidity ( 597 )

      Works fine on my 5-year-old PowerBook G4, so I'm guessing it's not really the CPU that's the problem...

    • Re: (Score:3, Informative)

      by Phroggy ( 441 )

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

    • Yep 60% total load on a core2duo 6400. 1080p video uses less than that so I don't know what the hell they are doing.

    • Re: (Score:2, Informative)

      by t0y ( 700664 )
      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.

  • How do I mute the audio? (Score:3, Insightful)

    by ender- ( 42944 ) on Thursday August 06, 2009 @01:56AM (#28968357) Homepage Journal
    This is great, but it really needs a way to mute the audio. Or better yet, make the audio optional [opt-in] from the start.

    And no, I don't want to just turn off my speakers. Maybe I'm listening to some music, now all of a sudden I've got some cheezy web-site music blaring in my headphones or out my speakers. Not cool...

    • Re: (Score:2, Insightful)

      by Jared555 ( 874152 )

      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

    • Re: (Score:2)

      by Ma8thew ( 861741 )
      When the audio tag becomes more widespread, browser authors will probably provide a per tab volume control. This is something which cannot be done with Flash.

  • I dunno... (Score:2, Insightful)

    by 93 Escort Wagon ( 326346 )

    Is compiling a bunch of "tweets" really the best use of all the great new HTML5 capabilities?

    • Re: (Score:3, Funny)

      by actionbastard ( 1206160 )
      "Is compiling a bunch of "tweets" really the best use of all the great new HTML5 capabilities?"/em>

      It's the only use for it.

    • Is compiling a bunch of "tweets" really the best use of all the great new HTML5 capabilities?

      Oh, come on, think of the amazing new advertising possibilities!

  • It might be interesting to setup an AJAX movie feed with streaming SVG data. Just have to preprocess the MPG to SVG.

    • 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).

      And then of course there's always the video element...

      • Why? Why not? I suspect converting to JS could yield some pretty good compression. I may try out some tests this weekend.

  • This demo reminds me of fancy flash sites with horrible usability.

    • Re: (Score:2, Interesting)

      by infinityxi ( 266865 )

      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.

    • Only far more resource demanding this time.

      • Indeed this does seem odd.

        Vomit inducing graphics: Check
        Vomit inducing music: Check
        Runaway CPU usage: Check

        All it needs is the random browser crashes and you've reinvented Flash. Except this time it's built into the browser and you can't turn the damned thing off.

    • Yep, but at least we can dump flash now, and have the potential for a browser to make things (say links) accessible anyway, by ignoring the animation/css and just looking at the structured HTML.

  • Dots? (Score:5, Interesting)

    by Spikeles ( 972972 ) on Thursday August 06, 2009 @02:03AM (#28968427)
    How about some actual cool examples like this [myopera.com] instead?

  • Each particle represents a tweet - click on one of them and it'll appear on the screen.

    Is it just me or does it seem to pick a random one regardless of where you click?

  • Compared to flash... (Score:4, Insightful)

    by timeOday ( 582209 ) on Thursday August 06, 2009 @02:34AM (#28968635)
    ..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.

    • Re: (Score:3, Interesting)

      by dyefade ( 735994 )

      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.

    • Re:Compared to flash... (Score:5, Insightful)

      by LiquidFire_HK ( 952632 ) on Thursday August 06, 2009 @02:50AM (#28968717)

      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?

      • Re: (Score:3, Informative)

        by dave420 ( 699308 )
        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

        • Re: (Score:3, Insightful)

          by Jeppe Salvesen ( 101622 )

          That demo is so quick it was done before rendering on FF 3.5.2 on Centos 5.3, with 64bit flash.

          Hoooray for Flash.

    • Re:Compared to flash... (Score:5, Interesting)

      by Fallen Seraph ( 808728 ) on Thursday August 06, 2009 @03:40AM (#28968959)
      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.

      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]

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

      • Re: (Score:3, Informative)

        by Stan Vassilev ( 939229 )

        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 tha

  • To my very pleasant surprise... (Score:5, Interesting)

    by SilasMortimer ( 1612867 ) <pandarsson@gmail.com> on Thursday August 06, 2009 @02:36AM (#28968649) Journal
    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.

  • Extremely impressive indeed! (Score:5, Funny)

    by johannesg ( 664142 ) on Thursday August 06, 2009 @03:14AM (#28968827)

    In fact, it looks just like an Amiga demo from 20+ years ago!

  • 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)?

    • Re: (Score:2, Informative)

      by dingen ( 958134 )
      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.

  • 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

  • vs Flash (Score:3, Insightful)

    by Toonol ( 1057698 ) on Thursday August 06, 2009 @05:15AM (#28969431)
    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.

Slashdot Top Deals

A morsel of genuine history is a thing so rare as to be always valuable. -- Thomas Jefferson

Close