6 ms·
Show HN: fontBomb - Stylishly destroy the web
- plehoux 14y agoI'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 agoSiiick!!
- bicknergseng 14y agoSo awesome. Spent 10 min blowing the hell out of hn. Now instead of raging against trolls I can simply blow them up.
- tedjdziuba 14y agoSeems to work great in Chrome, too.
- alptrv 14y agoJust curious, why it so faster in Safari then in Chrome?
- _jb 14y agoI'm kinda sure it has to do with hardware acceleration.
- plehoux 14y agoMy 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 agoYep. Safari runs a 3D CSS demo/benchmark/unrealistic-stress-test I made much smoother than Chrome.
- septerr 14y agoThanks!
- mozillarewind 14y agoIn Firefox 13, the explosions don't correspond to the clicked locations/where the bombs are placed.
- plehoux 14y agoI'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 agoGreat 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 agoSome 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 agoThis 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 agoSeems like this is calling out for a ClojureScript implementation, too.
- wickedchicken 14y agoThanks 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).
- plehoux 14y agoIt 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 14y agothanks for that
- radarsat1 14y agohm. seems like something that the browser should handle for you... don't see why every website should have its own debouncing code.
- jahewson 14y agoAh, but then 3px drags are not allowed, which might ruin your web-based diagram editor or game. Also the granularity of the denouncing will change depending on the size of the click target, so it's really app-specific.
- rwallace 14y agoMuch better to break the rare case of three pixel drags than the common case of, well, clicks! It's not realistic to expect every web programmer to start knowing about tablets. The default should be a reasonable amount of denoising, with a way for the page to change that default when needed.
- betterth 14y ago
- coreycollins 14y agoThis is awesome!
- ZenJosh 14y agoWorth 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!
- plehoux 14y agoTks just updated the code with : <meta name="google" value="notranslate">
- patio11 14y agoVery, 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 14y agoYeah, beautiful and charmingly funny video. Does anyone know what the waltz used was? Strauss?
- plehoux 14y agohttp://en.wikipedia.org/wiki/The_Nutcracker http://en.wikipedia.org/wiki/The_Nutcracker -> Waltz Of The Flowers
- kksmith 14y agohttp://www.arik-airline.com/ http://www.arik-airline.com/ - Book your flight with Arik Air UK from London Heathrow to Lagos, Abuja, Port Harcourt, Owerri, Calabar, Benin, Akure, Warri, Enugu, Sokoto, Yola, Jos, Kaduna, Kano, Katsina, Maiduguri, Gombe, West Africa: Accra, Cotonou, Freetown, Banjul, Dakar.
- mck- 14y agoReminds me of V for Vendetta
- Ideka 14y agoHere is that scene: http://www.youtube.com/watch?v=zYAoq3cFY9U http://www.youtube.com/watch?v=zYAoq3cFY9U (Skip to 2:20).
- reitzensteinm 14y agoTiming 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 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 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.
- dazbradbury 14y agoExcellent 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.
- plehoux 14y 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?
- gregsadetsky 14y agoPerhaps 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 http://fontbomb.ilex.ca/js/main.js and you should be good to go :-)
- plehoux 14y agoI get it, tks Greg. I originally did not hardcode the js function in the href bookmarklet attribute to ease development process. Since it's effectively a good concern, I will hardcode it. EDIT: Updating the code to escape parentheses is pain. I will leave it like that for the moment. Like greg said, your best option for now is to copy http://fontbomb.ilex.ca/js/main.js http://fontbomb.ilex.ca/js/main.js . Sry!
- gregsadetsky 14y agoYou shouldn't try to fit your code in that bookmarklet...! Updatability issues aside (your original, server-loaded approach is absolutely valid), there definitely are limits to a bookmarklet's size, just as there are browser-specific limits to URL length... See: http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url http://stackoverflow.com/questions/417142/what-is-the-maximu... EDIT: _jb's right regarding the security concern though; the server-hosted code could be changed to something malicious after everyone has installed it
- septerr 14y agoSweet. I am eager to go through the source code.
- gregsadetsky 14y agoThe author should release it in its original, CoffeeScript form..! ;-)
- plehoux 14y agoHere it is: https://github.com/plehoux/fontBomb/tree/master/src/coffee https://github.com/plehoux/fontBomb/tree/master/src/coffee
- valgaze 14y agoThis is an impressive one as well (basically a big snowball that grows bigger picking up page elements): http://kathack.com/ http://kathack.com/ I've always wondered if these sorts of tools could be a useful gimmick for traffic-generation
- kaybe888 14y agoSo cool, Good work Phil
- eragnew 14y agoDidn'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?
- deleted 14y ago[deleted]
- Scottopherson 14y agohttp://fontbomb.ilex.ca/js/main.js http://fontbomb.ilex.ca/js/main.js https://github.com/plehoux/fontBomb/tree/master/src/coffee https://github.com/plehoux/fontBomb/tree/master/src/coffee
- eragnew 14y agonice, thanks. will check it out.
- ya3r 14y agoThis things works nicely on the iphone! Kudos
- plehoux 14y agoTks, 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.
- gregsadetsky 14y agoWhy DOM specifically? Aren't both canvas and WebGL well suited for 2D/3D? re: three.js, etc.?
- plehoux 14y agoBecause you get functions to deal with collisions, positions, size, etc. for free. Instead of reimplementing everything on top of the canvas element. Of course frameworks will help with that. But by the end of the day, the hardware accelerated rendering system will be so good, I'm sure we gonna be able to render thousand of particles with the DOM.
- ya3r 14y agoBut 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 14y agoWow, this is so much fun to play with.
- dev1n 14y agoI found something similar to this a few months back... very cool trick. http://kickassapp.com/ http://kickassapp.com/
- mck- 14y agoThat IS kickass
- jonny_eh 14y agoThis is brilliant. I will never surf the web the same way again!
- plehoux 14y agoTks 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 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 14y agoThe 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 14y agoSerious 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???
- plehoux 14y agoI 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 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.
- dmak 14y agoI'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?
- emmelaich 14y agoI don't think you can, directly. You have to turn each letter into an element (a div or span typically) I'm reading the source, but can't see where he does this exactly. (I'm a javascript newbie) Edit: look in explosion.coffee, function explosifyText It uses string split and puts the chars in either a word or particle element.
- hkon 14y agoIt did not entertain me. Sorry. Nice work though.
- plehoux 14y agoInception time, try fontBomb on fontBomb code! http://fontbomb.ilex.ca/js/main.js http://fontbomb.ilex.ca/js/main.js
- loeschg 14y agoFacebook is bomb proof.
- SwaroopH 14y agoyou just need to reload the insecure script.
- songgao 14y agoThat's so cool. The music adds much more fun to it. Great job!
- 9k9 14y agoCombine http://kickassapp.com/ http://kickassapp.com/, http://kathack.com/ http://kathack.com/ and font bomb for hours of fun.
- torquebomb 14y agodoesn't work in opera thanks
- lechat0 14y agoFun stuff right there. Any particular reason for choice of poem as demo?