Slashdot Mirror

← Back to Stories (view on slashdot.org)

HTML 5 Canvas Experiment Hints At Things To Come

Posted by timothy on 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.

17 of 321 comments (clear)

  1. I just checked it out with Firefox 3.5.2 by rampant+mac · · Score: 4, Funny

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

    "HTML 5 Canvas Experiment Hints At Things To Come"

    Seizures?

    --
    I like big butts and I cannot lie.
    1. Re:I just checked it out with Firefox 3.5.2 by sumdumass · · Score: 5, Insightful

      I was sort of thinking the same things.

      Now I'm wondering if the things I hate about Flash wasn't the actual software but what people were doing with it.

  2. Re:Awesome by moredots · · Score: 4, Funny

    Regardless of what the answer is to this question, I am wondering if HTML 5 can provide most of the functionality of Javascript without posing as much of a security risk.

  3. Awesomely CPU Hungry by The+Real+Nem · · Score: 4, Insightful

    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.

  4. How do I mute the audio? by ender- · · Score: 3, Insightful

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

    --
    Nothing to see here
  5. Dots? by Spikeles · · Score: 5, Interesting

    How about some actual cool examples like this instead?

    --
    I don't need to test my programs.. I have an error correcting modem.
  6. Re:I dunno... by actionbastard · · Score: 3, Funny

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

    --
    Sig this!
  7. Re:Works great in Opera 10.... by MichaelSmith · · Score: 3, Funny

    I stared at this thing much longer than any sane person should have.

    Programming is complete. Return to your normal activities. You will receive instructions when required.

    --
    http://michaelsmith.id.au
  8. Compared to flash... by timeOday · · Score: 3, Insightful

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

    1. Re:Compared to flash... by LiquidFire_HK · · Score: 5, Insightful

      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?

    2. Re:Compared to flash... by Fallen+Seraph · · Score: 4, Interesting

      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

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

  9. To my very pleasant surprise... by SilasMortimer · · Score: 5, Interesting

    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.

    --
    Omnes tuae crepidines sunt nobis sunt. Ascendo tuum!
    1. Re:To my very pleasant surprise... by TeXMaster · · Score: 4, Informative

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

      --
      "I'm never quite so stupid as when I'm being smart" (Linus van Pelt)
  10. Re:No audio here thank god by Red+Alastor · · Score: 5, Insightful

    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.

    --
    Slashdot anagrams to "Sad Sloth"
  11. Extremely impressive indeed! by johannesg · · Score: 4, Funny

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

  12. FPS? by SickLittleMonkey · · Score: 3, Interesting

    Come now, that's merely a toy!
    Explore the raw power of the canvas on an Apple II emulated in Javascript!

    http://scripple-2.appspot.com/
    Paste this in and press enter:
    10 TEXT : HGR
    20 HCOLOR=3
    30 FOR I = 0 to 279 step 4
    40 HPLOT I,0 TO 279-I,191
    50 NEXT I
    RUN

    (Only hires is on the canvas.)

    SLM

    --
    main() {1;} // zen app
  13. Re:Slideshow by PouletFou · · Score: 4, Funny

    Runs fine here on my pentium 3 with windows ME and netscape 4.