Show HN: fontBomb - Stylishly destroy the web

http://fontbomb.ilex.ca

by plehoux • 14 years ago

489 85 14 years ago

fontbomb.ilex.ca

plehoux17• 14 years 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

tristanlabbe• 14 years ago

Siiick!!

bicknergseng• 14 years ago

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

alptrv• 14 years ago

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

_jb2• 14 years ago

I'm kinda sure it has to do with hardware acceleration.

plehoux17• 14 years 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.

septerr2• 14 years ago

Thanks!

mozillarewind• 14 years ago

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

plehoux17• 14 years 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• 14 years 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.

plehoux17• 14 years 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• 14 years 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....

And then I saw the CS: https://github.com/plehoux/fontBomb/blob/master/src/coffee/p...

Nice!

hoprocker• 14 years ago

Seems like this is calling out for a ClojureScript implementation, too.

wickedchicken3• 14 years ago

Thanks for making your site wacom-friendly. A lot of sites don't have any denoising for clicks, so if you try to click with a tablet it ends up dragging a tiny amount instead (twitter's lightbox is REALLY BAD in this respect).

plehoux17• 14 years ago

It is pretty simple to implement, you increment a variable on 'touchmove' event, and check on 'touchend' if the variable is less then 3. If it is, you can call your click function.

mrpollo• 14 years ago

thanks for that

radarsat1• 14 years ago

hm. seems like something that the browser should handle for you... don't see why every website should have its own debouncing code.

btipling• 14 years ago

Why are you using a wacom tablet to browse the web? Isn't that for drawing?

stan_rogers3• 14 years ago

Once you go absolute-position, it's hard to go back. With a mouse, you need to be aware of where the cursor is; with a tablet you just need to know where you want it to be.

wickedchicken3• 14 years ago

In 1998 I would have said, "because it's elite."

In 2012 it's because I got swag.

coreycollins• 14 years ago

This is awesome!

ZenJosh• 14 years ago

Worth noting - Chrome auto-translates from 'French' to 'English', turns:

  Click anywhere on this page to plant bombs. To blow up other websites, drag and drop this link fontBomb to your favorites bar

into:

  Ctheick hasntherewhere on this phasge to pthehasnt bombs. To btheow up other websites, ofrhasg hasnof ofrop this theink fontBomb to thereour fhasvorites bhasr

which, while hilarious, is probably something you want to check out. Other than that, its a fun little hack, nice job!

plehoux17• 14 years ago

Tks just updated the code with : <meta name="google" value="notranslate">

dazbradbury• 14 years ago

Excellent demo and smart implementation! Thanks for sharing.

It's a shame the code can't all fit in the bookmarklet though, rather than having to download an external source (which is subject to change). This is meant as a comment on large bookmarklets generally, rather than fontBomb in particular.

plehoux17• 14 years ago

"It's a shame the code can't all fit in the bookmarklet"

I don't understand your problem. Can't you drag and drop the link to your favorites bar?

gregsadetsky4• 14 years ago

Perhaps the GP wants to make sure that the code keeps working, regardless of the server's availability, etc...?

dazbradbury -- Host a local copy of http://fontbomb.ilex.ca/js/main.js and you should be good to go :-)

septerr2• 14 years ago

Sweet. I am eager to go through the source code.

gregsadetsky4• 14 years ago

The author should release it in its original, CoffeeScript form..! ;-)

plehoux17• 14 years ago

Here it is: https://github.com/plehoux/fontBomb/tree/master/src/coffee

patio11• 14 years ago

Very, very nice movie. (Watch it with the sound on.)

That sense of timing would improve a lot of e.g. paid-for product demo movies.

josscrowcroft• 14 years ago

Yeah, beautiful and charmingly funny video.

Does anyone know what the waltz used was? Strauss?

plehoux17• 14 years ago

http://en.wikipedia.org/wiki/The_Nutcracker -> Waltz Of The Flowers

mck-2• 14 years ago

Reminds me of V for Vendetta

Ideka• 14 years ago

Here is that scene: http://www.youtube.com/watch?v=zYAoq3cFY9U (Skip to 2:20).

reitzensteinm• 14 years ago

Timing animations with sound really does make a huge difference. The whole experience seems fuller and more well rounded, and it's usually not that hard to do.

Parks and Recreation, the TV show from the creators of the American version of The Office, has an intro that demonstrates this quite well.

The first intro times the introduction of the title text to the first jingle in the song, and then the beats to the frame transitions, which feels playful and fun:

http://www.youtube.com/watch?v=wI7f4CgATiE

Then in Season 3, they rearranged the sequence to fit the new characters in, and the whole thing feels boring and out of sync:

http://www.youtube.com/watch?v=YTgIJdcIpj0

I literally wince every time I watch it. I've always wondered whether it was the same people that worked on it, and what the story behind it was.

valgaze• 14 years ago

This is an impressive one as well (basically a big snowball that grows bigger picking up page elements): http://kathack.com/

I've always wondered if these sorts of tools could be a useful gimmick for traffic-generation

plehoux17• 14 years ago

Wow this one is impressive!

noahlt• 14 years ago

Related: this bookmarklet turns the page into a game of Asteroids. http://kickassapp.com/

kaybe888• 14 years ago

So cool, Good work Phil

eragnew2• 14 years ago

Didn't watch the movie, but I think the functionality is awesome :)

Would love to see a gallery of what people have come up with.

Is it possible to see source code?

Scottopherson• 14 years ago

http://fontbomb.ilex.ca/js/main.js

https://github.com/plehoux/fontBomb/tree/master/src/coffee

eragnew2• 14 years ago

nice, thanks. will check it out.

ya3r2• 14 years ago

This things works nicely on the iphone!

Kudos

plehoux17• 14 years ago

Tks, HTML 5 is on the verge of massively disrupting games. And my bet is that it will be with the DOM and not canvas or webGL.

gregsadetsky4• 14 years ago

Why DOM specifically? Aren't both canvas and WebGL well suited for 2D/3D? re: three.js, etc.?

ya3r2• 14 years ago

But there is one problem: on the iPhone, it can't distinguish between a touch event and a scroll event.

So it is impossible to scroll without planting bombs!

arrowgunz• 14 years ago

Wow, this is so much fun to play with.

dev1n• 14 years ago

I found something similar to this a few months back... very cool trick.

http://kickassapp.com/

mck-2• 14 years ago

That IS kickass

jonny_eh• 14 years ago

This is brilliant. I will never surf the web the same way again!

plehoux17• 14 years ago

Tks HN! fontBomb is getting viral! I'm now getting the same amount of traffic from others sources then HN. Have a look :

http://min.us/mEKGlLMaB

Really exciting! I feel that the week I invested in making it, is really paying off. At least in self-confidence!

By the way, tks Github for hosting it free of charge!

vecinu• 14 years ago

The idea pays for itself. You did a good job, people love it and you deserve the credit.

Congratulations and keep up the good ideas!

By the way, nice to see a fellow Canadian hacking it up!

potatohead23• 14 years ago

Serious question here, I see incredible stuff like this being done with JavaScript all the time, but I have never come across a tutorial or anything of the sort that even touches on things like this, where do I start learning how to use JS to manipulate webpages in this way???

plehoux17• 14 years ago

I think a good way to start would be to have a look I the source code, fork it and experiment on it: https://github.com/plehoux/fontBomb/tree/master/src/coffee

If you want to google your way out of it start with something like "CSS 2d transform".

There's a lot of differents technologies going on in the background, but it still fairly simple to understand.

1. I parse the the html to wrap each character in a <particle> tag. + Some hacks, to keep withespace.

2. I iterate trough all <particle> element and add velocity depending of bomb position.

3. Velocity is calculated with basic trigonometry. I then move the particules with css 2d transform.

ps. I putted a lot of effort in optimisation, no Math.sqrt, no objects in the loop (velocityX vs velocity.x), etc. But at the end the bottleneck is really the browser rendering.

dmak2• 14 years ago

I'm going to look through the code now.

What I don't understand is how do you manipulate letters like that? I always though font was this static thing that cannot be manipulated. This is mind opening. I am really interested and want to learn more about this. What technology is allowing you to grab a letter and just randomly blow it away?

hkon• 14 years ago

It did not entertain me. Sorry. Nice work though.

plehoux17• 14 years ago

Inception time, try fontBomb on fontBomb code! http://fontbomb.ilex.ca/js/main.js

loeschg• 14 years ago

Facebook is bomb proof.

SwaroopH• 14 years ago

you just need to reload the insecure script.

songgao• 14 years ago

That's so cool. The music adds much more fun to it. Great job!

9k9• 14 years ago

Combine http://kickassapp.com/, http://kathack.com/ and font bomb for hours of fun.

lechat0• 14 years ago

Fun stuff right there. Any particular reason for choice of poem as demo?

Show HN: fontBomb - Stylishly destroy the web

Related Stories