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:
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.
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....
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.
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.
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.
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'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).
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.
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.
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.
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!
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
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!
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???
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?
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.
That sense of timing would improve a lot of e.g. paid-for product demo movies.