4 ms·

I'm the author, it works best in Safari and IE 9. Use the bookmarklet to destroy any website. Source is here: https://github.com/plehoux/fontBomb/tree/master/

by plehoux 14y ago

I'm the author, it works best in Safari and IE 9. Use the bookmarklet to destroy any website. Source is here: https://github.com/plehoux/fontBomb/tree/master/src/coffee https://github.com/plehoux/fontBomb/tree/master/src/coffee

tristanlabbe 14y ago
Siiick!!
bicknergseng 14y ago
So awesome. Spent 10 min blowing the hell out of hn. Now instead of raging against trolls I can simply blow them up.
tedjdziuba 14y ago
Seems to work great in Chrome, too.
alptrv 14y ago
Just curious, why it so faster in Safari then in Chrome?
- _jb 14y ago
  I'm kinda sure it has to do with hardware acceleration.
  - balloot 14y ago
    Would totally make sense given it works best in the two browsers most closely tied to the underlying OS.
    - plehoux 14y ago
      I was totally impress by the speed of IE 9 running in a virtualbox instance on my macbook pro. Times they are changing!
- plehoux 14y ago
  My guess is that Safari rendering system use hardware acceleration and Chrome doesn't. The bottleneck here is not javascript, it is the browser rendering system when applying all those css 2d transform.
  - TazeTSchnitzel 14y ago
    Yep. Safari runs a 3D CSS demo/benchmark/unrealistic-stress-test I made much smoother than Chrome.
septerr 14y ago
Thanks!
mozillarewind 14y ago
In Firefox 13, the explosions don't correspond to the clicked locations/where the bombs are placed.
- plehoux 14y ago
  I'm not using jquery and I had a lot of problems getting the position and offset of click and elements. I guess it still need more work.
mortenjorck 14y ago
Great fun. A couple of suggestions, speaking as a front-end designer / occasional indie-game artist: - I don't know how you're calculating it, but consider adding a bit of randomness to the effect radius. This way, you won't be blasting perfect circles each time. - If keeping the graphics CSS-only isn't a priority, consider some sprites! If you need a sooty blast scar or maybe a simple explosion sprite, I'd be glad to lend a hand.
- plehoux 14y ago
  Some randomness would effectively be great to add! As for the sprites, I really wanted to focus on font and simplicity. It is much more about the chaos of many destructions, than about a single explosion. I might add different velocity depending on the mousedown event duration. The longer you press, the bigger the explosion get. Tks for your comments!
danso 14y ago
This is cool... When I looked at your JS, I thought to myself "that is a reasonable amount of code for that kind of functionality...even a little less than I would've thought"...considering there's no dependencies to browser-taming libraries: https://github.com/plehoux/fontBomb/blob/master/js/particle.js https://github.com/plehoux/fontBomb/blob/master/js/particle.... And then I saw the CS: https://github.com/plehoux/fontBomb/blob/master/src/coffee/particle.coffee https://github.com/plehoux/fontBomb/blob/master/src/coffee/p... Nice!
- hoprocker 14y ago
  Seems like this is calling out for a ClojureScript implementation, too.

by plehoux 14y ago

tristanlabbe 14y ago

Siiick!!

bicknergseng 14y ago

So awesome. Spent 10 min blowing the hell out of hn. Now instead of raging against trolls I can simply blow them up.

tedjdziuba 14y ago

Seems to work great in Chrome, too.

alptrv 14y ago

Just curious, why it so faster in Safari then in Chrome?

_jb 14y ago
I'm kinda sure it has to do with hardware acceleration.
- balloot 14y ago
  Would totally make sense given it works best in the two browsers most closely tied to the underlying OS.
  - plehoux 14y ago
    I was totally impress by the speed of IE 9 running in a virtualbox instance on my macbook pro. Times they are changing!
plehoux 14y ago
My guess is that Safari rendering system use hardware acceleration and Chrome doesn't. The bottleneck here is not javascript, it is the browser rendering system when applying all those css 2d transform.
- TazeTSchnitzel 14y ago
  Yep. Safari runs a 3D CSS demo/benchmark/unrealistic-stress-test I made much smoother than Chrome.

septerr 14y ago

Thanks!

mozillarewind 14y ago

In Firefox 13, the explosions don't correspond to the clicked locations/where the bombs are placed.

plehoux 14y ago
I'm not using jquery and I had a lot of problems getting the position and offset of click and elements. I guess it still need more work.

mortenjorck 14y ago

Great fun. A couple of suggestions, speaking as a front-end designer / occasional indie-game artist: - I don't know how you're calculating it, but consider adding a bit of randomness to the effect radius. This way, you won't be blasting perfect circles each time. - If keeping the graphics CSS-only isn't a priority, consider some sprites! If you need a sooty blast scar or maybe a simple explosion sprite, I'd be glad to lend a hand.

plehoux 14y ago
Some randomness would effectively be great to add! As for the sprites, I really wanted to focus on font and simplicity. It is much more about the chaos of many destructions, than about a single explosion. I might add different velocity depending on the mousedown event duration. The longer you press, the bigger the explosion get. Tks for your comments!

danso 14y ago

This is cool... When I looked at your JS, I thought to myself "that is a reasonable amount of code for that kind of functionality...even a little less than I would've thought"...considering there's no dependencies to browser-taming libraries: https://github.com/plehoux/fontBomb/blob/master/js/particle.js https://github.com/plehoux/fontBomb/blob/master/js/particle.... And then I saw the CS: https://github.com/plehoux/fontBomb/blob/master/src/coffee/particle.coffee https://github.com/plehoux/fontBomb/blob/master/src/coffee/p... Nice!

hoprocker 14y ago
Seems like this is calling out for a ClojureScript implementation, too.