4 ms·

Implementing a HTML5 canvas-based, tilt sensing snow globe

92 points by fredoliveira 16y ago

fredoliveira 16y ago
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 https://gist.github.com/716215
fbatista 16y ago
Really nice one! Love the "gracefull degrade" implementation where if you dont have tilting device, it uses the mouse instead ;)
colinprince 16y ago
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 16y ago
  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.
  - jaaron 16y ago
    Orientation events are new in mobile safari as of iOS 4.2. The orientation works on the iPad, for example.
    - noisebleed 16y ago
      Yes, but there's been a common workaround using window.orientation for a while: http://stackoverflow.com/questions/2313194/can-i-trigger-a-css-event-in-mobile-safari-upon-iphone-orientation-change http://stackoverflow.com/questions/2313194/can-i-trigger-a-c...
  - windsurfer 16y ago
    This page works great on my N900 :)
    - fredoliveira 16y ago
      Now that is something I honestly didn't expect - but that I like hearing.
  - colinprince 16y ago
    Yes it was kindof slow
obneq 16y ago
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.
franciscocosta 16y ago
very cool! I hope you get good valuable traction with this stylish hack!
nunomorgadinho 16y ago
Very nice, congrats :)
kevingadd 16y ago
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 16y ago
  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!
- timtadh 16y ago
  I didn't leave the page open but I did notice that it pegged a processor [Firefox 4 beta8pre].
callmeed 16y ago
Pretty cool ... how about some mobile safari accelerometer support? https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html https://developer.apple.com/library/safari/#documentation/Sa...
fduffner 16y ago
Nicely done! I recently made a snowglobe generator where people can create there own. http://www.snowglobecreator.com/ 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 http://www.snowglobecreator.com/?uid=52#featured
sergiorebelo 16y ago
pretty cool Fred!
ck2 16y ago
But snowglobes are terrorist devices! http://www.flickr.com/photos/laughingsquid/4767715025/sizes/l/ http://www.flickr.com/photos/laughingsquid/4767715025/sizes/... I guess virtual ones will be all we can have now. (but seriously, impressive work!)
icefox 16y ago
Hmm for some reason on my macbook pro if I tilt to the right the snow goes to the left and vice versa...
deleted 16y ago
[deleted]

92 points by fredoliveira 16y ago

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 https://gist.github.com/716215

fbatista 16y ago

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

colinprince 16y ago

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 16y ago
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.
- jaaron 16y ago
  Orientation events are new in mobile safari as of iOS 4.2. The orientation works on the iPad, for example.
  - noisebleed 16y ago
    Yes, but there's been a common workaround using window.orientation for a while: http://stackoverflow.com/questions/2313194/can-i-trigger-a-css-event-in-mobile-safari-upon-iphone-orientation-change http://stackoverflow.com/questions/2313194/can-i-trigger-a-c...
- windsurfer 16y ago
  This page works great on my N900 :)
  - fredoliveira 16y ago
    Now that is something I honestly didn't expect - but that I like hearing.
- colinprince 16y ago
  Yes it was kindof slow

obneq 16y ago

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.

franciscocosta 16y ago

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

nunomorgadinho 16y ago

Very nice, congrats :)

kevingadd 16y ago

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 16y ago
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!
timtadh 16y ago
I didn't leave the page open but I did notice that it pegged a processor [Firefox 4 beta8pre].

callmeed 16y ago

Pretty cool ... how about some mobile safari accelerometer support? https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html https://developer.apple.com/library/safari/#documentation/Sa...

fduffner 16y ago

Nicely done! I recently made a snowglobe generator where people can create there own. http://www.snowglobecreator.com/ 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 http://www.snowglobecreator.com/?uid=52#featured

sergiorebelo 16y ago

pretty cool Fred!

ck2 16y ago

But snowglobes are terrorist devices! http://www.flickr.com/photos/laughingsquid/4767715025/sizes/l/ http://www.flickr.com/photos/laughingsquid/4767715025/sizes/... I guess virtual ones will be all we can have now. (but seriously, impressive work!)

icefox 16y ago

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

deleted 16y ago

[deleted]