Wub - Cool Javascript effect
rolyn.co.uk
rolyn.co.uk
It's called progress. And because of it, we programmers will never be out of work.
I've often wondered about this. Part of it may be that the real practice of programming is totally divorced from the schools that (supposedly) teach it. Another part is obviously that the quick succession of languages and platforms reduces earlier work to the equivalent of ancient indecipherable tablets (if it's even available). On that last point, one of the unexpected pleasures of working in Common Lisp is being able to easily read 20-year old code. It turns out they weren't as stupid back then as we might think!
Beyond PR and vested interests, the full backward compatilibity of java (even when it hurts) and of Windows (up to XP) account for their survival a lot more than anyone would ever suspect at first thought.
- The machine is still fully usable, and you buy a fast CPU in case you need to run demanding code.
- JS VMs are still improving.
- Complex JS getting more and more cross platform.
- 3D library hooks from JS are likley in the future.
All of the advanced JS effects really are quite promising for growth into seriously rich web apps in the future.
Probably possible to do by putting the word in an offscreen div with style set so it's only as wide as content, then checking the size of the div...
function fontWidth(word){
// arial font
var S = "a68b68c68d68e68f31g68h68i31j31k68l31m108\
n68o68p68q68r39s68t39u68v50w90x68y68z68A\
90B90C90D90E90F78G98H90I28J59K90L68M108N\
90O98P90Q98R90S90T68U90V90W130X68Y90Z68'\
30.42!29?68-41/41=72";
var l = word.length;
var s = 0;
var x = 0;
var c = 0;
for(i=0;i<l;i++){
c = word.charAt(i);
x = S.indexOf(c);
if(c>="0" && c<="9")s+=69;
else
if(x>=0)s+=parseInt(S.substring(x+1,x+4));
else s+=68;
}
return s/10;
} fontWidth(word) {
return sum(map(word.split(''), function (l) letterWidth[l]));
}
EDIT: I found more: http://monstropolis.org/intro[1-11].html, replace [1-11] with any number between 1 and 11.
I say it's funny because it reminds me of the explosion of similar animations that were created in Flash a few years around the time that Flash 5 and 6 came out. Animations that were mostly cool and revolutionary-seeming because of the technology rather than the actual content.
I'm not knocking this type of creation--I was really fun time to be working in Flash with so many 'breakthroughs.' Now it's cool to see a similar surge in creativity happening in a language that is even more ubiquitous than ActionScript.
I can't help but find it slightly irritating when people remake these in Javascript these days to have praise heaped upon them for interesting new experiments. ;)
Interesting, I guess. What purpose though other than "neat"? I'm trying to come up with a UI need it would fulfill, but can't.
Mind you, I love neat for the sake of it, and if that's the intent, well and good. But wondered if there was something else I was overlooking.
And yeah, to the Javascript VMs progressing. I don't think I've seen as much buzz about performance upgrades as in the JS space.
Waiting for it to hit the server side in a big(ger) way.
Also, call it mkn's first law: There's always something you're overlooking. (Where 'you' is the hypothetical you, not you in particular.) :o)
Context menus are invisible until you right-click. Also, there's been some evidence that we remember the locations of things better if they're arranged radially (like the demo approximates) rather than orthogonally (like in a context menu). A combination of a translucent constant reminders of tasks available plus a radial arrangement of those tasks floating around the mouse might make it easy to remember what's available after a right-click. It might be distracting as hell, for all I know.
One thing's for sure, it would be more than just a context menu as we know them now.
Thanks for the comment; I hadn't thought of much of that.
Also, for UI purposes, it might be beneficial to remove the "springy" effect on the items. When the mouse isn't moving, the items shouldn't be animating. In other words, the animation should be driven by mouse movement, with no elasticity.
Cool effect though.