Slashdot Mirror
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.
Purty.
Is a slideshow on my old Dell D820 (core duo, 2 gigs of ram, FF 3.5, Ubuntu Hardy)
apt-get install redhat please god - Me (take it easy, I love Debian)
I just played around with that for at least five minutes. I'm so hyped up for HTML 5 now! Could you do that solely with Javascript though?
Websites that (successfully) make noise at me are one of my pet hates.
The animationy stuff sure is purdy though.
...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.
I don't hear any sound. :(
The animation was smooth, the audio played without a hitch, it was great.
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.
...you insensitive clod!!
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
Is compiling a bunch of "tweets" really the best use of all the great new HTML5 capabilities?
#DeleteChrome
It might be interesting to setup an AJAX movie feed with streaming SVG data. Just have to preprocess the MPG to SVG.
Camping on quad since 1996.
This demo reminds me of fancy flash sites with horrible usability.
Quick preferences (F12) -> uncheck "Enable Sound in Web Pages"
One that hath name thou can not otter
How about some actual cool examples like this instead?
I don't need to test my programs.. I have an error correcting modem.
How about a freakin' Chrome 1.0 for the Mac!
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?
..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.
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!
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...
Aren't new web technologies supposed to first appear on porn sites and move into the mainstream from there?
Fascism trolls keeping me up every night. When I starts a preachin', he HITS ME WITH HIS REICH!
Firefox 3.0.13 works fine as well in that perspective.
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)?
--
make install -not war
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;}
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 PowerBook, but now drops frames and really struggles. The BBC iPlayer is the same - that used to run fine in high quality mode full screen on a 1.3GHz PowerBook, but now is unwatchable except in low quality mode - this all happened after a recent upgrade done to Flash...
Oolite: Elite-like game. For Mac, Linux and Windows
The canvas tag was something that Safari put in their browser, before it was specified in HTML 5. So don't think HTML 5 invented it, they just embraced and extended it.
Why? Why not? I suspect converting to JS could yield some pretty good compression. I may try out some tests this weekend.
Camping on quad since 1996.
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.
And then there's hackers like this one:
http://logand.com/sw/wps/index.html
Rendering that Tiger isn't quick right now, but for a demonstration of what Javascript can do right now I find that quite impressive.
I should think, combined with HTML5 to provide sound and audio, in about 5 years a lot of games, and even applications, should be in plain Javascript either right online from the Web or even for download.
AMD x2 64 @ 3000 on win xp 64.
4 gb ram
firefox 3.5.2 1280x1024
By default it was utilizing both cores, but even when I forced it to one it rarely went over 10%, with the average under 6%.
And as you tread the halls of sanity, You feel so glad to be, Unable to go beyond. I have a message, From another time..
I remember this, a million years ago, when IE 5.5 supported HTML + time.
At least i can block flash. Will I be able to block HTML tags?
This will be more misused and a worse user experience than the blink tag.
And I see a whole new generation of advertisements I can't prevent from cluttering up my screen.
"Why not" is a fair enough reason.
I highly doubt it will yield any decent compression though. Maybe you can prove me wrong. :)
I would rather be presented with a list. Less fun, more practical.
Oh yes, I also want to be able to right click and control what is on the screen rather than have the website take over my browser.
I don't need it.
More crap to distract from presenting information in a hyperlinked environment.
More crap to have to have a control to switch off.
More crap that won't work on X amount of browser combinations.
More crap that'll stop working due to mysterious bugs and stop me being able to actually do what I want on a website (as it is, Javascripts on at least one network sometimes "capture" the entire mouse click anywhere on a page and use it to open up a link... it's rare and probably just a bug but it pisses me off. Also, those sites where they mess up the framing, or don't take account of layering etc. and you end up fighting to click on the thing you want)
More crap that'll just get in the way of parsing a HTML for relevant links, related images etc. and displaying them in a search engine.
More crap that's been possible for YEARS if you really wanted to do it, you just had to be clever and write a bit yourself or steal someone's code.
More crap that'll slow my average web browsing session with 20+ tabs down to the speed of a Commodore 64.
More crap that'll just make me stop visiting your website. It's very simple.
Got sound and everything in Safari 3.2.1. No sound in Firefox 3.0.13
-- Boycott Shell
You don't hear too many Photoshop 1.0 users complaining about the lack of Camera RAW support, or Windows 3.1 users lamenting the paltry selection of video codecs.
People who use older software when there is newer, safer, more feature-rich options that are free have absolutely nothing to bitch about.
As you say... fuck 'em.
All I see is a bunch of bubbles with "@"s sprinkled all over them. To really get off the ground, this "HTML5" doohickey needs a real video tag with a real codec and plugin from MacroMedia, and good, effective DRM.
My turnips listen for the soft cry of your love
Try to hit the demo with IE and you get this error-
oh noez - please get yourself a sophisticated browser :)
---"What did I say that sounded like 'Tell me about your day?'"---
Totally agree that people should upgrade, but... they just don't.
And websites don't want to chance losing business because a potential customer hit their site and it didn't work.
It's amazing how far people will go to NOT upgrade. I remember going to a Ford plant once setting up favorites on a few people's machines pointing to an old IIS3 ASP app we wrote. They sent me over to one dark corner of the plant where the engineer had a PC running Windows 3.1 and an ancient version of Netscape.
If your website can survive without the IE6 consumers, you can get rid of them:
http://www.ie6nomore.com/
No, it's more like about par with an old-school Amiga demo. All that's missing is a starfield and a scrolltext, but I guess they didn't have any raster left :-p
Anything above 5% CPU for some moving points to music is absolutely ridiculous, as is your idea that this should take more cycles than decoding HD video.
I think we'll have to wait for webgl.
Belief is the currency of delusion.
Works fine on my Ubuntu 9.04 box at home (2.66GHz core 2 quad, ATI 4850 dual head, blah blah). All of the installed browsers seem to render it smoothly, even though they are not necessarily the newest versions. Here are their cpu usage figures:
15% Opera 9.64
14% Firefox 3.0.13
14% Epiphany 2.26.1
So each needed a bit over half a core on a 2.66GHz quad core. In all cases, xorg cpu usage was in low single digits.
Interestingly, the cpu usage differed between Opera and Firefox on my Windows XP work PC (2.8GHz core 2 duo, blah blah), which I posted elsewhere:
30% Opera 9.64
50% Firefox 3.5.1
So Opera needed a bit over half a core at 2.8GHz, while Firefox needed a whole core. Of course, this Firefox is a newer version than the one I run at home...
Those who can make you believe absurdities can make you commit atrocities. - Voltaire
It's nice to see such advances in standards.
Unluckily, implementations (all of them) will either be partial or buggy or even both.
There's still little support for a tag as old as the COL. We can imagine what will happen: more browser incompatibilities.
What if this wonderful standards committee would ask for some commitment from the (main) implementers?
Just see how much the standards are taken into account by authors:
The R.I.P.E.
MIcrosoft
Maybe Computers will never be as intelligent as Humans.
For sure they won't ever become so stupid. [VR-1988]
Got a Samsung X360 with 3G RAM / Intel Centrino 2 / Vista ...
I get a black screen that says "Loading..." even after it's finished pageload....
: |
------ The best brain training is now totally free : )
Well done, we slashdotted twitter
74.117.115.116 32.97.110.111 116.104.101.114 32.80.101.114 108.32.104.97 99.107.101.114
Here is hoping Google can get there new windowing system up and running. Maybe we can use it to get rid of the monstrosity that is X on the desktop. X is the probably the single application that is holding Linux back wider adoption.
Has anybody examined the relationship between this demo and the DOS reported on cnn.com? Thousands of SlashDotters accessing a page that hits twitter 500 times?
Now we finally have the technology to experience the richness of an enhanced web 2.0 version of the ever popular mouse trails.
I am becoming gerund, destroyer of verbs.
Camping on quad since 1996.
Here's my latest HTML5 canvas demo: http://3.paulhamill.com/html_canvas_animation
Should work fine on recent Firefox, Safari, Chrome, iPhone browsers. Animates with glacial slowness and lower quality on IE since this uses excanvas.js emulation. Non-functional on Konqueror.
More canvas demos: http://www.canvasdemos.com
Yet, I've used a 1ghz with 512mb ram that worked quite nicely (~ 55% cpu usage, no lag; it is smoother on the same box than many flash sites), intel graphics card yada... It would seem that there is something else going on for those that are finding it too be laggy and high cpu usage. Linux or Windows? the above box is a debian box.
Semi-automatic amateur armchair Australian philosopher; conjecture ready at any moment...
The slashdot summary reads "With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome, browsers support some great new features including canvas and the new audio/video tags".
The original summary from the linked site reads, "With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome and Opera, browsers support some great new features including canvas and the new audio/video tags".
Why has the poster or Timothy gone to the trouble of editing out 'Opera'?
No Flash needed anymore to bring the (already CPU-heavy) Firefox to kill your machine's CPU load.
Now any and all sites will be able to do it!
I was more impressed by this raytracer:
http://labs.flog.co.nz/raytracer/
I found that working through the different javascript benchmarking systems.