28 ms·

Wub - Cool Javascript effect

55 points by nickb 18y ago

revicon 18y ago
Neat!
axod 18y ago
This leaves blue "snow" artifacts on Safari 3.2.1. Seems like there's a bug in Safari's rendering. Cool effect though.
- kqr2 18y ago
  I see some of the blue snow artifacts on firefox 3.0.5 too so it's probably not a bug in Safari.
ideamonk 18y ago
Wow!! this is amazing... waiting for Doom II clone in Javascript :)
MoeDrippins 18y ago
it. made. my. machine. very. slow. 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.
- siculars 18y ago
  hey mate, don't be a hater. it's an uber cool effect.
- mkn 18y ago
  It may be premature to say that it's neat just for the sake of neatness. It may not have a direct UI usage, but we could probably learn something about mouse events and drawing by examining the code, for example. Also, from a UI perspective, you migh be able to make mousing more efficient by dragging UI elements around in a cloud around the mouse. (You could fade them out so that they were just barely visible, for example, until you right-clicked or shift-right-clicked to pin them down and use them.) It looked, at first glance, like the effect was running on a Canvas, so I don't know how easy it would be to do outside of one. 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)
  - contextmenu 18y ago
    We have that, it's called a context menu.
    - sutro 18y ago
      We've all heard of single serving sites: http://news.ycombinator.com/item?id=399941 http://news.ycombinator.com/item?id=399941. Here the parent commenter is pioneering the latest incarnation of the trend: the single serving HN account.
      - captainobvious 18y ago
        Someone quick! Find a phone and call captain obvious.
    - mkn 18y ago
      I guess my point was that it would be a translucent cloud of items that followed the mouse. This way, you'd be able to see/read what was under the cloud but could switch your attention to the translucent cloud to see what was there. 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.
  - jyothi 18y ago
    this can get close to iphone interface of google earth on a normal browser.
  - MoeDrippins 18y ago
    In this case, "you" IS me in particular. I'm slow on the uptake more often than I'd prefer. =) Thanks for the comment; I hadn't thought of much of that.
- Shamiq 18y ago
  Yea, my proc usage went through the roof. Is it because of the "hit detection"?
- nickb 18y ago
  What browser are you using? If you try the latest Safari or Firefox nightly, you'll be amazed how fast that thing is. Javascript VMs are progressing at an amazing rate.
  - MoeDrippins 18y ago
    Firefox 3.0.5. I haven't played around with the nightly's much, but I might. Thanks. 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.
  - khafra 18y ago
    I tried it on Chrome running in Virtualbox seamless on a year-old box, and it was pretty zippy.
- tlrobinson 18y ago
  i. hate. gratuitous. periods.
- palish 18y ago
  The effect has to be adjusted slightly to be used in a UI context. If it is changed so that the item nearest the mouse cursor snaps to the cursor, then suddenly you'd be able to precisely and easily select an item from a group of tightly-packed items. So the UI advantage might be that you can see a lot of items, but can precisely select any of them. 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.
axod 18y ago
This bit is quite funny: Function to work out approximate width of a word based on Arial font letter widths. 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; }
- andreyf 18y ago
  Why not just do it with an object of letter -> width key/pairs? then... fontWidth(word) { return sum(map(word.split(''), function (l) letterWidth[l])); } I bet it would be faster in firefox.
zzzmarcus 18y ago
It's funny, now that Javascript interpreters are getting fast and decent effects can be written in Javascript you start seeing lots pages like this. 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.
- gb 18y ago
  My thoughts exactly, I was also involved in Flash experiments from the days of Flash 4 even, when it was horrendous to "code" in. 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. ;)
old-gregg 18y ago
This is so awesome that we get to reimplement the same graphics effects we did on first PCs from the mid 80s, but this time - fully loading CPUs on machines that would have been cosidered supercomputers back then! It's called progress. And because of it, we programmers will never be out of work.
- gruseom 18y ago
  Although you seem to mostly be talking about new platforms, I'd add another reason for this perpetual reimplementation: the amazing lack of knowledge transfer from one generation of programmers to the next. Nearly everybody seems to start from scratch, and of course we all think our ideas and programs are original and far superior to what came earlier. 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!
  - albertcardona 18y ago
    Great point about the "undecipherable tables" that any program eventually becomes as languages, platforms and OSes change. 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.
- notauser 18y ago
  On my machine (latest stable firefox shipped with Ubuntu, 2 year old MBP) it 'only' loads the CPU by about 5%, which isn't great but considering that: - 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.
btw0 18y ago
Have you guys checked out http://monstropolis.org http://monstropolis.org, I think it's from the same guy. EDIT: I found more: http://monstropolis.org/intro http://monstropolis.org/intro[1-11].html, replace [1-11] with any number between 1 and 11.
tlrobinson 18y ago
It makes it kind of hard to click the green links.
12354 18y ago
kbjjjjjjjjjjjjjjjjjjjjj

55 points by nickb 18y ago

revicon 18y ago

Neat!

axod 18y ago

This leaves blue "snow" artifacts on Safari 3.2.1. Seems like there's a bug in Safari's rendering. Cool effect though.

kqr2 18y ago
I see some of the blue snow artifacts on firefox 3.0.5 too so it's probably not a bug in Safari.

ideamonk 18y ago

Wow!! this is amazing... waiting for Doom II clone in Javascript :)

MoeDrippins 18y ago

it. made. my. machine. very. slow. 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.

siculars 18y ago
hey mate, don't be a hater. it's an uber cool effect.
mkn 18y ago
It may be premature to say that it's neat just for the sake of neatness. It may not have a direct UI usage, but we could probably learn something about mouse events and drawing by examining the code, for example. Also, from a UI perspective, you migh be able to make mousing more efficient by dragging UI elements around in a cloud around the mouse. (You could fade them out so that they were just barely visible, for example, until you right-clicked or shift-right-clicked to pin them down and use them.) It looked, at first glance, like the effect was running on a Canvas, so I don't know how easy it would be to do outside of one. 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)
- contextmenu 18y ago
  We have that, it's called a context menu.
  - sutro 18y ago
    We've all heard of single serving sites: http://news.ycombinator.com/item?id=399941 http://news.ycombinator.com/item?id=399941. Here the parent commenter is pioneering the latest incarnation of the trend: the single serving HN account.
    - captainobvious 18y ago
      Someone quick! Find a phone and call captain obvious.
  - mkn 18y ago
    I guess my point was that it would be a translucent cloud of items that followed the mouse. This way, you'd be able to see/read what was under the cloud but could switch your attention to the translucent cloud to see what was there. 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.
- jyothi 18y ago
  this can get close to iphone interface of google earth on a normal browser.
- MoeDrippins 18y ago
  In this case, "you" IS me in particular. I'm slow on the uptake more often than I'd prefer. =) Thanks for the comment; I hadn't thought of much of that.
Shamiq 18y ago
Yea, my proc usage went through the roof. Is it because of the "hit detection"?
nickb 18y ago
What browser are you using? If you try the latest Safari or Firefox nightly, you'll be amazed how fast that thing is. Javascript VMs are progressing at an amazing rate.
- MoeDrippins 18y ago
  Firefox 3.0.5. I haven't played around with the nightly's much, but I might. Thanks. 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.
- khafra 18y ago
  I tried it on Chrome running in Virtualbox seamless on a year-old box, and it was pretty zippy.
tlrobinson 18y ago
i. hate. gratuitous. periods.
palish 18y ago
The effect has to be adjusted slightly to be used in a UI context. If it is changed so that the item nearest the mouse cursor snaps to the cursor, then suddenly you'd be able to precisely and easily select an item from a group of tightly-packed items. So the UI advantage might be that you can see a lot of items, but can precisely select any of them. 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.

axod 18y ago

This bit is quite funny: Function to work out approximate width of a word based on Arial font letter widths. 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; }

andreyf 18y ago
Why not just do it with an object of letter -> width key/pairs? then... fontWidth(word) { return sum(map(word.split(''), function (l) letterWidth[l])); } I bet it would be faster in firefox.

zzzmarcus 18y ago

It's funny, now that Javascript interpreters are getting fast and decent effects can be written in Javascript you start seeing lots pages like this. 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.

gb 18y ago
My thoughts exactly, I was also involved in Flash experiments from the days of Flash 4 even, when it was horrendous to "code" in. 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. ;)

old-gregg 18y ago

This is so awesome that we get to reimplement the same graphics effects we did on first PCs from the mid 80s, but this time - fully loading CPUs on machines that would have been cosidered supercomputers back then! It's called progress. And because of it, we programmers will never be out of work.

gruseom 18y ago
Although you seem to mostly be talking about new platforms, I'd add another reason for this perpetual reimplementation: the amazing lack of knowledge transfer from one generation of programmers to the next. Nearly everybody seems to start from scratch, and of course we all think our ideas and programs are original and far superior to what came earlier. 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!
- albertcardona 18y ago
  Great point about the "undecipherable tables" that any program eventually becomes as languages, platforms and OSes change. 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.
notauser 18y ago
On my machine (latest stable firefox shipped with Ubuntu, 2 year old MBP) it 'only' loads the CPU by about 5%, which isn't great but considering that: - 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.

btw0 18y ago

Have you guys checked out http://monstropolis.org http://monstropolis.org, I think it's from the same guy. EDIT: I found more: http://monstropolis.org/intro http://monstropolis.org/intro[1-11].html, replace [1-11] with any number between 1 and 11.

tlrobinson 18y ago

It makes it kind of hard to click the green links.

12354 18y ago

kbjjjjjjjjjjjjjjjjjjjjj