5 ms·
Cool water vapor effect in HTML5 Canvas
- onion2k 13y agoIt'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 13y agoAgreed, 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 13y agoOh 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...
- ygra 13y agoInteresting. Neither Chrome nor IE or Firefox on Win 8 go above 3 % CPU utilisation here
- adventured 13y agoSame here. Firefox + Win8 and it stays at 2.5% to 3%.
- robmcm 13y agoYeah HTML 5 is such a resource hog! Brign back flash :p
- tjoff 13y agoThe biggest advantage of flash is that it is easy to disable and you don't loose out on disabling it. Yes, I'm prepared to miss they days of flash.
- vanderZwan 13y agoIt's because they don't understand how to properly use canvas, as was pointed out here: https://news.ycombinator.com/item?id=5957101 https://news.ycombinator.com/item?id=5957101
- demallien 13y agoOn a Macbook Air 2012 running Mavericks it sits at 1-2% CPU usage...
- benjamincburns 13y agoWhat browser?
- demallien 13y agoAhhh, good question. Safari.
- dan1234 13y agoSafari on 10.8.4 and the CPU usage is only 2-3% higher with that tab open. (iMac/2012)
- adcuz 13y agoIndeed, I've played with it a bit to demonstrate: http://s3.amazonaws.com/clouds-reverse-engineered/index.html http://s3.amazonaws.com/clouds-reverse-engineered/index.html
- w_t_payne 13y agoGah! Now I understand how it works, it does not look nearly as cool as it did before!
- skion 13y agoGah! It does look cooler in a geeky way now. Nice!
- arnarbi 13y agoI think it looks even cooler because of its simplicity.
- CodeCube 13y agoHah! the funny part is that at first glance, I had almost convinced myself that they had implemented a full fluid dynamics system because I was like, "it's even causing a little localized vortex!" :P
- beeglebug 13y agoI 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_reala 13y ago…which makes me wonder if CSS animation on stacked divs would be more efficient too?
- martin-adams 13y ago...or an animated GIF
- PavlovsCat 13y agoIf you layer several animations with varying and carefully selected run times over each other, the result never exactly repeats itself. Good luck recreating that with one GIF animation :D
- tvararu 13y agoAn animated GIF would weigh a lot more.
- kilian 13y agoMaybe they found it performed better, like Adrian Holovaty found for soundslide: http://www.holovaty.com/writing/in-defense-of-canvas/ http://www.holovaty.com/writing/in-defense-of-canvas/ (see "stacking canvases")
- robin_reala 13y agoStacking 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 13y agoGoes 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 13y agoThis is much like how particle systems in games work
- Aldipower 13y agoDoesn't work with my resolution of 1280x1920 px. ;)
- SeanDav 13y agoTook about 2 minutes before the animation actually started, but clever effect.
- kevrone 13y agoCpu: 42%