
Implementing a HTML5 canvas-based, tilt sensing snow globe - fredoliveira
http://blog.webreakstuff.com/2010/11/building-a-canvas-snowglobe/
======
kevingadd
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.

~~~
fredoliveira
Ouch. Sorry - that is indeed a problem (not necessarily in this context - this
page goes away on monday - but in general)! Strangely, we are reusing our
objects, so I don't think it can be the javascript code itself. Could it
somehow be Firefox's implementation of canvas?

I will investigate. Thanks!

------
fduffner
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>

------
fredoliveira
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>

------
colinprince
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

~~~
fredoliveira
interesting - we tried it out (was it ultra slow for you too?) and while we
didn't see the snowflakes zoom to the left, we didn't get orientation events.
We didn't have a lot of time so we went with it, but we'll look into the code
and see what's up.

~~~
windsurfer
This page works great on my N900 :)

~~~
fredoliveira
Now _that_ is something I honestly didn't expect - but that I like hearing.

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

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

[https://developer.apple.com/library/safari/#documentation/Sa...](https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html)

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

------
ck2
But snowglobes are terrorist devices!

[http://www.flickr.com/photos/laughingsquid/4767715025/sizes/...](http://www.flickr.com/photos/laughingsquid/4767715025/sizes/l/)

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

(but seriously, impressive work!)

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

------
nunomorgadinho
Very nice, congrats :)

------
sergiorebelo
pretty cool Fred!

------
obneq
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.

