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.
Reminds me of V for Vendetta
Show HN: fontBomb - Stylishly destroy the web
61–70 of 92 posts
Re: Show HN: fontBomb - Stylishly destroy the web
#62Earlier quoted context omitted.
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).
Re: Show HN: fontBomb - Stylishly destroy the web
#63It did not entertain me. Sorry. Nice work though.
Re: Show HN: fontBomb - Stylishly destroy the web
#64Inception time, try fontBomb on fontBomb code! http://fontbomb.ilex.ca/js/main.js
Re: Show HN: fontBomb - Stylishly destroy the web
#65I'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
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!
Re: Show HN: fontBomb - Stylishly destroy the web
#66Earlier quoted context omitted.
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 chan…
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?
Use MD5, very secure snickers
Re: Show HN: fontBomb - Stylishly destroy the web
#67This things works nicely on the iphone! 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!
Re: Show HN: fontBomb - Stylishly destroy the web
#68I'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
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 t…
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!
Re: Show HN: fontBomb - Stylishly destroy the web
#69Serious 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 tag. + Some hacks, to keep withespace.
2. I iterate trough all 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.
Re: Show HN: fontBomb - Stylishly destroy the web
#70I'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
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!
Seems like this is calling out for a ClojureScript implementation, too.