Cool water vapor effect in HTML5 Canvas

by w00kie • 13 years ago

113 34 13 years ago

onion2k• 13 years ago

It's 'just' a couple of scrolling images for the vertical and horizontal vapour, and a rotating image for the swirl where they meet. Very effective indeed. I'm impressed.

zaroth• 13 years ago

Agreed, when you know what to look you can see the components, but at first glance it looks very believable.

Too bad even such a simple visual hack was enough to get the fans spinning on my mac air (circa 2011)

sdoering• 13 years ago

Oh yes. My CPU-Meter jumped from 3-7% to 35 - 55% while the page was open and dropped back to the previous-level on closing the tab.

Too bad, as it really is a cool effect, done with relatively simple assets...

robmcm• 13 years ago

Yeah HTML 5 is such a resource hog! Brign back flash :p

vanderZwan• 13 years ago

It's because they don't understand how to properly use canvas, as was pointed out here: https://news.ycombinator.com/item?id=5957101

demallien2• 13 years ago

On a Macbook Air 2012 running Mavericks it sits at 1-2% CPU usage...

dan1234• 13 years ago

Safari on 10.8.4 and the CPU usage is only 2-3% higher with that tab open. (iMac/2012)

adcuz• 13 years ago

Indeed, I've played with it a bit to demonstrate: http://s3.amazonaws.com/clouds-reverse-engineered/index.html

w_t_payne• 13 years ago

Gah! Now I understand how it works, it does not look nearly as cool as it did before!

beeglebug• 13 years ago

I like the end result, but i'm not sure why they decided to use 14 canvas tags when 1 would have worked just as well.

It seems wasteful, canvas was designed specifically to allow drawing and manipulating multiple images on a single surface, these guys are using canvas as if it were a div with a background image.

robin_reala2• 13 years ago

…which makes me wonder if CSS animation on stacked divs would be more efficient too?

martin-adams• 13 years ago

...or an animated GIF

kilian• 13 years ago

Maybe they found it performed better, like Adrian Holovaty found for soundslide: http://www.holovaty.com/writing/in-defense-of-canvas/ (see "stacking canvases")

robin_reala2• 13 years ago

Stacking canvases makes sense when you have ones that either only need to be built on startup or change infrequently. If everything in your animation is moving (like this one) then there’s no performance benefit.

mhax• 13 years ago

Goes to show, you don't always need to do things the hard/proper/science way to make something like this convincing. Smoke and mirrors ftw. (although this particular set of smoke and mirrors could probably do with a little optimising. I'ts a good effect nonetheless)

talloaktrees• 13 years ago

This is much like how particle systems in games work

Aldipower2• 13 years ago

Doesn't work with my resolution of 1280x1920 px. ;)

bagosm• 13 years ago

Why are you so happy about it not working?

Aldipower2• 13 years ago

I am not happy about it, but should I be grumpy?

SeanDav• 13 years ago

Took about 2 minutes before the animation actually started, but clever effect.

kevrone• 13 years ago

Cpu: 42%

Cool water vapor effect in HTML5 Canvas

Related Stories