Implementing a HTML5 canvas-based, tilt sensing snow globe

Left the snowglobe open for about 10 minutes in a tab and Firefox hit 2GB of memory usage. :-( Not necessarily your fault, but definitely hampers the charm... pretty demo, regardless. Wish I had a device with support for HTML orientation events so I could try it out there.

Nicely done!

I recently made a snowglobe generator where people can create there own.

http://www.snowglobecreator.com/

It's very basic though and also in Flash so it won't run on iphone etc. =/ Yet it was fun too watch what people did with it so far. Like my friend who did a series of videogame styled globes like this one. http://www.snowglobecreator.com/?uid=52#featured

While the post itself talks briefly about implementing the snow algorithm and the tilting, more advanced people can go directly through the code over at github: https://gist.github.com/716215

Rotation of my iPhone seemed to really throw it off. All the snowflakes suddenly zoomed off to the left, and then there were no flakes left in the globe.

After I returned back to portrait orientation there will still no flakes :(

EDIT: iPhone 4 with iOS 4.2.1

Really nice one! Love the "gracefull degrade" implementation where if you dont have tilting device, it uses the mouse instead ;)

Pretty cool ... how about some mobile safari accelerometer support?

https://developer.apple.com/library/safari/#documentation/Sa...

Hmm for some reason on my macbook pro if I tilt to the right the snow goes to the left and vice versa...

But snowglobes are terrorist devices!

http://www.flickr.com/photos/laughingsquid/4767715025/sizes/...

I guess virtual ones will be all we can have now.

(but seriously, impressive work!)

very cool! I hope you get good valuable traction with this stylish hack!

Very nice, congrats :)

pretty cool Fred!

now thats the kind of stuff I'd expect on hacker news... what is interesting about this? clearly it must be the advanced physics engine.