4 ms·

Ripple effect in HTML5 canvas

27 points by DanielRibeiro 16y ago

kreek 16y ago
While I appreciate the skill in creating it, it does bring my macbook to its knees. Also a bit java applet circa 1999.
hollerith 16y ago
There was a commercial on Hulu a few months ago that I accidentally clicked on, which took me to a page (that probably used Flash, not HTML 5 canvas) that had a better ripple effect than this (almeros.com) page has. It was really sexy, but I do not know how to find it again.
moron4hire 16y ago
Wow, it's 2011 and this effect is now poorly implemented in the browser. Way to go, HTML5, way to go.
- cryptoz 16y ago
  While I agree that this particular demo is poorly done and doesn't really showcase HTML5 very well (see mr doob), there's a lot to be said for why it's important that it's running in the browser. Pretty much every single computer that has a screen is capable of running this demo. Somewhere near a million new smartphones are being sold every day, collectively between the different platforms. Some of those run Java, some run Objective C, some run C#.... But they all run JavaScript. All desktop computers, all laptops, all tablets, all smartphones...they all can run this demo. HTML5/JavaScript is much better poised to be "write once run everywhere" than Java ever was.
  - pietro 16y ago
    My laptop is running the demo at 65% CPU. I'm pretty sure my iPad or phone wouldn't be able to run it for any meaningful definition of "run".
    - mcav 16y ago
      Tested on my iPhone 4: 1.2 fps. At least it doesn't crash.
    - cryptoz 16y ago
      Sure, but look at the future a bit. I highly doubt iOS will ever run Java and I highly doubt Android will ever run C#. But hardware will get faster, and as that happens the demos performance will improve. It may be a bit early to write 3D games or video editing software in JavaScript for iOS and Android and Windows all at the same time, so you've got to look to the future for that kind of excitement.
- pedrokost 16y ago
  Many people complained about flash poor performance and acclaimed HTML5 as a technology that will make the web better. Well, in some ways it has, but unfortunately it will replace Flash for such effects and possibly make it worse. Everyone can write javascript as it's free. Writing Flash effects like that required and additional step: getting the software, which is expensive. This will allow for many more 'funky effects' that will may make the web an awful experience. Note: The author created this as an experiment, which I strongly encourage. However the sentence "You could use it for nice cheesy banner effects or just to impress your site visitors" announces a misuse of the experiment. EDIT: Any explanation why this comment was downvoted?
  - mcav 16y ago
    I just assume that any comment is prone to random downvotes on HN these days. I liken it to cosmic rays: something that just happens.
  - abstractbill 16y ago
    Writing Flash effects like that required and additional step: getting the software, which is expensive. This is actually not true - it's quite easy to set up a development using free tools (actually free in both senses of the word). Take a look at haXe for example.
    - pedrokost 16y ago
      Indeed you're right. There is also Flex SDK, however most beginners don't know that, and think they need Flash Pro or Flash Builder to get started.
- soljin2000 16y ago
  Agreed I have had lots of performance problems with the canvas tag trying to simple things that ran blazingly fast in flash. HTML 5 (buzz) has a long way to go before it can really compete with flash. Similar demo running in flash. http://www.flash-filter.net/rain-drop-water-effect.phtml http://www.flash-filter.net/rain-drop-water-effect.phtml
  - wlievens 16y ago
    Same here. I built an isometric strategy game in canvas but had to abandon it because I couldn't get over 12 fps on firefox on a reasonably resolution.
- bane 16y ago
  I can't wait till all the flash adverts on every web page are replaced with even slower HTML5 adverts.
51Cards 16y ago
Another voice for a machine made to beg for mercy. Cool tech demo but my browser and system pretty much went to sleep running it. Nifty preview about 2-3 years too soon though this can be said for a lot of the HTML5 / Canvas demos coming out right now. This will date me but it's a familiar cycle. Back in the 80's there were crews coming up with graphics demos and pushing the tech to its limits. Your 286/386 would melt down but it was cool to 'fly' through a pseudo 3D 256 colour tunnel. It's deja vu for me... different time, different tech, same desire to push it faster than it's developing. Not a bad thing though, just not practical... yet.
- DanielRibeiro 16y ago
  Goot points. On this particular example, and in my experience, Google Chrome runs it quite smoothly on Linux. Firefox 3.6 has no hope of running it though.
  - mbrubeck 16y ago
    On my Ubuntu 10.04 laptop with a Core 2 Duo and Intel graphics, it's actually much smoother in Firefox 4 Beta than in Chrome 9 (29 fps in Firefox vs. 11 fps in Chrome). I don't have Chrome's dev or beta channels installed here. If I have time I'll try those out later...
    - DanielRibeiro 16y ago
      Yeah, I was using FF 3.6, which has really slow JS engine. Good to know FF 4 is really catching up.
  - melling 16y ago
    Works fine in FF4. There's no reason not to be using FF4 at this time. Just a few more bug fixes and it's done.
- bane 16y ago
  This will date me but it's a familiar cycle. Back in the 80's there were crews coming up with graphics demos and pushing the tech to its limits. Your 286/386 would melt down but it was cool to 'fly' through a pseudo 3D 256 colour tunnel. http://www.demoscene.tv/ http://www.demoscene.tv/
zrgiu 16y ago
works pretty well in chrome.
bane 16y ago
In flash http://flash-effects.com/swf/water_ripple_follow.swf http://flash-effects.com/swf/water_ripple_follow.swf

27 points by DanielRibeiro 16y ago

kreek 16y ago

While I appreciate the skill in creating it, it does bring my macbook to its knees. Also a bit java applet circa 1999.

There was a commercial on Hulu a few months ago that I accidentally clicked on, which took me to a page (that probably used Flash, not HTML 5 canvas) that had a better ripple effect than this (almeros.com) page has. It was really sexy, but I do not know how to find it again.

moron4hire 16y ago

Wow, it's 2011 and this effect is now poorly implemented in the browser. Way to go, HTML5, way to go.

cryptoz 16y ago
While I agree that this particular demo is poorly done and doesn't really showcase HTML5 very well (see mr doob), there's a lot to be said for why it's important that it's running in the browser. Pretty much every single computer that has a screen is capable of running this demo. Somewhere near a million new smartphones are being sold every day, collectively between the different platforms. Some of those run Java, some run Objective C, some run C#.... But they all run JavaScript. All desktop computers, all laptops, all tablets, all smartphones...they all can run this demo. HTML5/JavaScript is much better poised to be "write once run everywhere" than Java ever was.
- pietro 16y ago
  My laptop is running the demo at 65% CPU. I'm pretty sure my iPad or phone wouldn't be able to run it for any meaningful definition of "run".
  - mcav 16y ago
    Tested on my iPhone 4: 1.2 fps. At least it doesn't crash.
  - cryptoz 16y ago
    Sure, but look at the future a bit. I highly doubt iOS will ever run Java and I highly doubt Android will ever run C#. But hardware will get faster, and as that happens the demos performance will improve. It may be a bit early to write 3D games or video editing software in JavaScript for iOS and Android and Windows all at the same time, so you've got to look to the future for that kind of excitement.
pedrokost 16y ago
Many people complained about flash poor performance and acclaimed HTML5 as a technology that will make the web better. Well, in some ways it has, but unfortunately it will replace Flash for such effects and possibly make it worse. Everyone can write javascript as it's free. Writing Flash effects like that required and additional step: getting the software, which is expensive. This will allow for many more 'funky effects' that will may make the web an awful experience. Note: The author created this as an experiment, which I strongly encourage. However the sentence "You could use it for nice cheesy banner effects or just to impress your site visitors" announces a misuse of the experiment. EDIT: Any explanation why this comment was downvoted?
- mcav 16y ago
  I just assume that any comment is prone to random downvotes on HN these days. I liken it to cosmic rays: something that just happens.
- abstractbill 16y ago
  Writing Flash effects like that required and additional step: getting the software, which is expensive. This is actually not true - it's quite easy to set up a development using free tools (actually free in both senses of the word). Take a look at haXe for example.
  - pedrokost 16y ago
    Indeed you're right. There is also Flex SDK, however most beginners don't know that, and think they need Flash Pro or Flash Builder to get started.
soljin2000 16y ago
Agreed I have had lots of performance problems with the canvas tag trying to simple things that ran blazingly fast in flash. HTML 5 (buzz) has a long way to go before it can really compete with flash. Similar demo running in flash. http://www.flash-filter.net/rain-drop-water-effect.phtml http://www.flash-filter.net/rain-drop-water-effect.phtml
- wlievens 16y ago
  Same here. I built an isometric strategy game in canvas but had to abandon it because I couldn't get over 12 fps on firefox on a reasonably resolution.
bane 16y ago
I can't wait till all the flash adverts on every web page are replaced with even slower HTML5 adverts.

51Cards 16y ago

Another voice for a machine made to beg for mercy. Cool tech demo but my browser and system pretty much went to sleep running it. Nifty preview about 2-3 years too soon though this can be said for a lot of the HTML5 / Canvas demos coming out right now. This will date me but it's a familiar cycle. Back in the 80's there were crews coming up with graphics demos and pushing the tech to its limits. Your 286/386 would melt down but it was cool to 'fly' through a pseudo 3D 256 colour tunnel. It's deja vu for me... different time, different tech, same desire to push it faster than it's developing. Not a bad thing though, just not practical... yet.

DanielRibeiro 16y ago
Goot points. On this particular example, and in my experience, Google Chrome runs it quite smoothly on Linux. Firefox 3.6 has no hope of running it though.
- mbrubeck 16y ago
  On my Ubuntu 10.04 laptop with a Core 2 Duo and Intel graphics, it's actually much smoother in Firefox 4 Beta than in Chrome 9 (29 fps in Firefox vs. 11 fps in Chrome). I don't have Chrome's dev or beta channels installed here. If I have time I'll try those out later...
  - DanielRibeiro 16y ago
    Yeah, I was using FF 3.6, which has really slow JS engine. Good to know FF 4 is really catching up.
- melling 16y ago
  Works fine in FF4. There's no reason not to be using FF4 at this time. Just a few more bug fixes and it's done.
bane 16y ago
This will date me but it's a familiar cycle. Back in the 80's there were crews coming up with graphics demos and pushing the tech to its limits. Your 286/386 would melt down but it was cool to 'fly' through a pseudo 3D 256 colour tunnel. http://www.demoscene.tv/ http://www.demoscene.tv/

zrgiu 16y ago

works pretty well in chrome.

bane 16y ago

In flash http://flash-effects.com/swf/water_ripple_follow.swf http://flash-effects.com/swf/water_ripple_follow.swf