Show HN: fontBomb - Stylishly destroy the web(fontbomb.ilex.ca)
fontbomb.ilex.ca
Show HN: fontBomb - Stylishly destroy the web
http://fontbomb.ilex.ca
91 comments
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.
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.
Yeah, beautiful and charmingly funny video.
Does anyone know what the waltz used was? Strauss?
Does anyone know what the waltz used was? Strauss?
Reminds me of V for Vendetta
Here is that scene: http://www.youtube.com/watch?v=zYAoq3cFY9U
(Skip to 2:20).
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
Source is here: https://github.com/plehoux/fontBomb/tree/master/src/coffee
Siiick!!
So awesome. Spent 10 min blowing the hell out of hn. Now instead of raging against trolls I can simply blow them up.
Just curious, why it so faster in Safari then in Chrome?
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.
The bottleneck here is not javascript, it is the browser rendering system when applying all those css 2d transform.
Yep. Safari runs a 3D CSS demo/benchmark/unrealistic-stress-test I made much smoother than Chrome.
Thanks!
In Firefox 13, the explosions don't correspond to the clicked locations/where the bombs are placed.
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.
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.
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.
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!
I might add different velocity depending on the mousedown event duration. The longer you press, the bigger the explosion get.
Tks for your comments!
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!
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!
Seems like this is calling out for a ClojureScript implementation, too.
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).
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.
hm. seems like something that the browser should handle for you... don't see why every website should have its own debouncing code.
Ah, 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.
Much 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.
Especially considering most web dev's will just implement jquery-ui or somesuch draggable library that will handle the proper 3px drag fix for them.
thanks for that
Why are you using a wacom tablet to browse the web? Isn't that for drawing?
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.
Never used a tablet, but I guess you have to build muscle memory to correctly map tablet -> screen coordinates, right?
It takes about an hour of use to get there, honestly; it's not quite like keyboard chording. And you adjust very quickly when things change — I have no trouble going back and forth between a large Intuos (12x8" active area) and the Bamboo Connect (5.8x3.6") I carry around in my laptop bag (except that I really miss the spinner and buttons).
> It takes about an hour of use to get there, honestly
I assume you have a great deal of previous drawing experience? In my experience, people without tens of thousands of hours of drawing experience find it extremely difficult to adapt to using a wacom tablet to control the mouse. I’m sure it can be done, but an hour is an incredibly optimistic time estimate.
I assume you have a great deal of previous drawing experience? In my experience, people without tens of thousands of hours of drawing experience find it extremely difficult to adapt to using a wacom tablet to control the mouse. I’m sure it can be done, but an hour is an incredibly optimistic time estimate.
I've been using tablets since 1995 or so, and I can hardly write legibly, let alone draw. My motivation was realizing how much I preferred the trackpad on my PowerBook to a mouse, and the lack of any decent desktop trackpads at the time. So I tried the tablet, which worked even better!
One tip: try the various sizes of tablet, as tastes differ; some find the larger tablets tiring, others find the smaller tablets fidgety, and, in my own experience, display size also plays an important role (the "large" Intuos is perfect paired with a 27" display, for instance, while the "small" feels more natural paired with a MacBook Air; while you can compensate by restricting the active area on the tablet, I've never been a big fan of doing so, nor with spanning the tablet area across multiple displays).
One tip: try the various sizes of tablet, as tastes differ; some find the larger tablets tiring, others find the smaller tablets fidgety, and, in my own experience, display size also plays an important role (the "large" Intuos is perfect paired with a 27" display, for instance, while the "small" feels more natural paired with a MacBook Air; while you can compensate by restricting the active area on the tablet, I've never been a big fan of doing so, nor with spanning the tablet area across multiple displays).
Strange, as I've got used to my Wacom Bamboo in less than half a day without much drawing experience.
For the record, I'm a photographer, not a graphic artist. Sure, I doodled a bit as a kid and have tried my hand at drawing from time to time (who hasn't?) but tens of thousands of hours is at least an order of magnitude off as an estimate, and the time I did put in wasn't consistent or contiguous.
Can you go into more detail about the benefits of using a Wacom tablet instead of a mouse? I know absolutely nothing about Wacom tablets, but this sounds interesting and I'd love to hear more.
Wacoms use a pretty natural hand-eye coordination that your brain is wired for. Styuli have been used by humans for a few millenia now with no real issues, until one prominent human decided he didn't "want a little scribble thing" and subsequently wiped out the market for them.
If you're using touchpads, going from touchpad to stylus is exactly the same switch as going from finger paint to pen. If you're using a mouse, then using a stylus allows for less awkward wrist motion.
Absolute positioning is AWESOME for static or mostly static UI elements: menu bars, browser tabs, buttons on websites since your brain can calculate 'ahead of time' how much it needs to move. It's also much more accurate when performing small motor movements (hence why it's used for drawing, but this also comes in to play for highlighting text). It does not perform as well when scrolling, which is where relative positioning works better.
If you're using touchpads, going from touchpad to stylus is exactly the same switch as going from finger paint to pen. If you're using a mouse, then using a stylus allows for less awkward wrist motion.
Absolute positioning is AWESOME for static or mostly static UI elements: menu bars, browser tabs, buttons on websites since your brain can calculate 'ahead of time' how much it needs to move. It's also much more accurate when performing small motor movements (hence why it's used for drawing, but this also comes in to play for highlighting text). It does not perform as well when scrolling, which is where relative positioning works better.
I used a Wacom Bamboo tablet full time at my last job for about two years, even whilst coding and browsing. I noticed a marked decrease in wrist pain and fatigue compared to using a mouse all day. It's a much more natural position for your wrist.
In 1998 I would have said, "because it's elite."
In 2012 it's because I got swag.
In 2012 it's because I got swag.
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
I've always wondered if these sorts of tools could be a useful gimmick for traffic-generation
Wow this one is impressive!
Related: this bookmarklet turns the page into a game of Asteroids. http://kickassapp.com/
[deleted]
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!
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!
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!
Congratulations and keep up the good ideas!
By the way, nice to see a fellow Canadian hacking it up!
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.
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.
"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?
I don't understand your problem. Can't you drag and drop the link to your favorites bar?
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 :-)
dazbradbury -- Host a local copy of http://fontbomb.ilex.ca/js/main.js and you should be good to go :-)
I 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 . Sry!
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 . Sry!
You 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-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
EDIT: _jb's right regarding the security concern though; the server-hosted code could be changed to something malicious after everyone has installed it
To solve the security issue, the bookmarklet could perform some sort of hash checking on the source and refuse to run if it's changed.
The question is, can a hash function and verification logic be made small enough for this to be viable?
The question is, can a hash function and verification logic be made small enough for this to be viable?
[deleted]
Use MD5, very secure snickers
There's also a security concern. OP could change the code to a malicious script without anyone noticing.
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
Ctheick hasntherewhere on this phasge to pthehasnt bombs. To btheow up other websites, ofrhasg hasnof ofrop this theink fontBomb to thereour fhasvorites bhasr
Tks just updated the code with : <meta name="google" value="notranslate">
I found something similar to this a few months back... very cool trick.
http://kickassapp.com/
http://kickassapp.com/
That IS kickass
Inception time, try fontBomb on fontBomb code! http://fontbomb.ilex.ca/js/main.js
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???
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.
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.
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?
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?
I 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.
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.
Thanks!
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?
Would love to see a gallery of what people have come up with.
Is it possible to see source code?
[deleted]
nice, thanks. will check it out.
Fun stuff right there. Any particular reason for choice of poem as demo?
This is brilliant. I will never surf the web the same way again!
That's so cool. The music adds much more fun to it. Great job!
Sweet. I am eager to go through the source code.
The author should release it in its original, CoffeeScript form..! ;-)
This is awesome!
Wow, this is so much fun to play with.
This things works nicely on the iphone!
Kudos
Kudos
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.
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!
So it is impossible to scroll without planting bombs!
Why DOM specifically? Aren't both canvas and WebGL well suited for 2D/3D? re: three.js, etc.?
Because 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.
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.
So cool, Good work Phil
It did not entertain me. Sorry. Nice work though.
Combine http://kickassapp.com/, http://kathack.com/ and font bomb for hours of fun.
That sense of timing would improve a lot of e.g. paid-for product demo movies.