Show HN: fontBomb - Stylishly destroy the web
fontbomb.ilex.ca
fontbomb.ilex.ca
That sense of timing would improve a lot of e.g. paid-for product demo movies.
Does anyone know what the waltz used was? Strauss?
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.
Source is here: https://github.com/plehoux/fontBomb/tree/master/src/coffee
The bottleneck here is not javascript, it is the browser rendering system when applying all those css 2d transform.
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.
I might add different velocity depending on the mousedown event duration. The longer you press, the bigger the explosion get.
Tks for your comments!
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!
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.
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).
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.
In 2012 it's because I got swag.
I've always wondered if these sorts of tools could be a useful gimmick for traffic-generation
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!
Congratulations and keep up the good ideas!
By the way, nice to see a fellow Canadian hacking it up!
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.
I don't understand your problem. Can't you drag and drop the link to your favorites bar?
dazbradbury -- Host a local copy of http://fontbomb.ilex.ca/js/main.js and you should be good to go :-)
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: _jb's right regarding the security concern though; the server-hosted code could be changed to something malicious after everyone has installed it
The question is, can a hash function and verification logic be made small enough for this to be viable?
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
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.
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'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.
Would love to see a gallery of what people have come up with.
Is it possible to see source code?
Kudos
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 it is impossible to scroll without planting bombs!