digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Javascript Rotating Cube Animation Slideshow Effect

kawa.net — Using some pretty crazy math, Yusuke Kawasaki managed to put together quite a nifty javascript "rotating cube" animation effect. There is a demonstration on the site, along with source code and the explination of how it was created. Fascinating!

Bury
show profanity settings
expand all
  • rappo, on 10/12/2007, -3/+7Awesome! I like how it shows the math behind it, too... nice find.

    Don't try making the minimum and maximum resolution 1... just a warning :P
  • burke, on 10/12/2007, -5/+19holy slowness batman. This is very, very cool, but its impracticality far exceeds the coolness. This is what flash is useful for.

    Great proof of concept though.
  • phore, on 10/12/2007, -2/+9this hogs a lot of CPU
    • jrbrewin, on 10/12/2007, -0/+8indeed. texture mapped cubes ran faster on my atari st
    • TheAttacks, on 10/12/2007, -28/+1yeah, i'd imagine that since it's on the front page, this server won't last much longer. the CPU on the server is going to DIE
    • ascheinberg, on 10/12/2007, -0/+24>the CPU on the server is going to DIE

      Maybe, but not because of the javascript. Javascript is processed on the CLIENT.
    • fudged71, on 10/12/2007, -1/+3good point, phore... javascript is all on the client side
    • SouthernDigger, on 10/12/2007, -0/+5i got up to 99% usage on a 1.2ghz pentium 4. good stuff, not practical though
    • antdude, on 10/12/2007, -1/+2And flickers a lot in my Mozilla v1.7.13 Web browser.
    • Mr.Scientist, on 10/12/2007, -0/+4Unfortunately the canvas tag doesn't support matrix operations except 2d scaling, 2d rotation and translation. The SVG standard does include full matrix transformation of the coordinates with a 3x3 matrix, but for bitmap operations this feature isn't implemented in the Gecko browser family (probably because it can't be done with Canvas). The consequence is that the effect has to be approximated by splitting the images into many small blocks which are scaled and arranged to create the impression of perspective shortening. The math is simple high school level trigonometry and has been used for similar effects in C64 demos back in the days of 8bit home computers. The real feat is the simulation of perspective deformation with an API that has no support for it. It's a nice stunt, but obviously the performance sucks donkey balls. This will become much more interesting when the SVG implementation is complete. AND FOR FUX SAKE CHANGE THE CAPTCHAS TO SOMETHING RECOGNIZABLE. DON'T MAKE ME GUESS IF THAT C (OR O,X,S) IS A CAPITAL LETTER OR NOT.
    • shinynew, on 10/12/2007, -0/+1the slower the more CPU i think it has topped 98% of my AMD 3500+ 64 when i put it going slow
  • Rice, on 10/12/2007, -10/+12I think OS X does it better. :)
    • mizike, on 10/12/2007, -3/+1ran like a pig on my G4....sometimes uselessness knows no boundaries....
    • stable, on 10/12/2007, -2/+2These Apple fanboys are really getting on my nerve.

      Compiz does it even better than OSX. While OSX PRETENDS to have a cube, Compiz DOES have a real (as real as a graphics card is concerned) cube (or any other kind of prism, depending on the number of workspaces the user wants to have) on which it renders the desktop, now please, PLEASE, could you STOP bragging? Nobody cares if your operating system does that, that's not the point of the article!
    • arizonagroove, on 10/12/2007, -0/+1Of course OS X does it better. Are you deliberately stating the bleedin' obvious or just displaying your ignorance? An effect done by an operating system cannot be compared to an attempt to do the same effect in Javascript.
  • artur.ventura, on 10/12/2007, -2/+14The effect is really cool but "...pretty crazy math..." its just high school math...

    • finnif, on 10/12/2007, -0/+8> The effect is really cool but "...pretty crazy math..." its just high school math...

      I think that tells you something about the audience for most of these Javascript tricks and effects.

  • Roger, on 10/12/2007, -1/+3Interesting, but very slow and the math is hardly "pretty crazy".
  • recon16, on 10/12/2007, -2/+2try Triple clicking the start button...
    • SouthernDigger, on 10/12/2007, -9/+3that got the usage up to 100% for sure. if that server was a person, steam would be coming out if its ears.
    • tidu, on 10/12/2007, -0/+2Try playing both at once...
    • Yarnage, on 10/12/2007, -0/+2SouthernDigger, JavaScript is CLIENT SIDE!
    • shinynew, on 10/12/2007, -0/+1i think thats the second person that thought that javascript runs on the server....
      its kinda sad.
  • D4r7h3v1l, on 10/12/2007, -0/+2coral cache:
    http://www.kawa.net.nyud.net:8090/works/js/animation/cube-e.html
  • joshfraz, on 10/12/2007, -5/+1I bet noone can take what he did and make it into a 3D cube...
  • Hellsadvocate, on 10/12/2007, -1/+1Crazy math? Oh well. I guess being a math major i never really understood programming in anything.
    But the math seems reasonable :D Hooray!
  • tricheco, on 10/12/2007, -0/+1Mmm, gecko and webkit offers Canvas that could accomplish that much better and faster. Saving us all those freakin math practice.
  • dshPls, on 10/12/2007, -4/+3Macromedia Flash
    • Karisson, on 10/12/2007, -0/+2He's proving a concept, not making a practical application. If he really wanted to integrate it smoothly into his website, he obviously would have used Flash.
  • Jeffeh, on 10/12/2007, -6/+1Does anyone have a flash slideshow but just for little thumbnails?
  • enzomedici, on 10/12/2007, -10/+3
    No digg. Too many jagged edges dude. Slow as *****.
    • drigz, on 10/12/2007, -0/+3It's up for being an impressive acheivement as opposed to being a useful thing to put on your website.

      The reason it's so slow is he has to process the images to transform them into trapezia in JavaScript, which is pretty slow, and making the edges less jagged just means more processing there...
  • Karisson, on 10/12/2007, -1/+8Wow. I had no idea JavaScript was capable of this kind of stuff. Then again, I can barely write a working loop.
  • estacado, on 10/12/2007, -0/+2At first I was going to report is as lame, because I thought it was Java, then I saw the title again and it was Javascript. Impressive to see that Javascript can do this. I'm into developing widgets, and this script can really be nifty to integrate into my widgets. It takes about 15% of CPU usage on my P4 2.8 machine.
    • GuineaPig, on 10/12/2007, -0/+2Unfortunately, on my P4 2.2 GHz machine using FF, it got as high as 80%. The Javascript is cool, but somehow it seems so daft to need a P4 to do something so trivial.
  • pkrumins, on 10/12/2007, -0/+4And where is the "the crazy math" part?
  • hello2usir, on 10/12/2007, -2/+0Complete waste of time.
  • edwardog, on 10/12/2007, -0/+1This is cool, but take a look at http://www.west.co.tt/matt/js/redbug/ if you're interested in what 3D javascript can be like.

    (Seen at the Assembly 2005 demo party.)
  • nikoniko, on 10/12/2007, -0/+0Plays smooth as butter on my PIII 650 using Opera on XP. Are the IE and Firefox javascript engines really that slow that you folks with faster machines are getting dogged performance on this? Sheesh. I've been an Opera fan for a long time, but you all just made me more of one.
  • whalesalad, on 10/12/2007, -1/+1Hah I dont know about all you guys, but my A64 3000+ reached a max of about 60% cpu usage with this thing, oh yeah 20 other tabs open in firefox, dreamweaver running, aim, notepad2, hydrairc, adobe photoshop, rss bandit, and itunes playing music.
  • lollerskates, on 10/12/2007, -0/+2Seriously, it's just trigonometry. Browse around Wolfram, now THAT'S crazy math.
  • joeyrutledge, on 10/12/2007, -0/+3"ouch" said my cpu.
  • datagod, on 10/12/2007, -0/+2My screen flickered so much I had a seizure.
  • fram3w0rk, on 10/12/2007, -0/+0nice script.. i might use this on my pcu based bill board signage.. i'll have this patented in no time
  • headzoo, on 10/12/2007, -0/+1Well, I *had* write a WordPress plugin using this JavaScript + Flickr. You can see it @ http://www.480x.com , and download it @ http://www.headzoo.com/flickrspinr . Yeah, a bit CPU heavy for some people, but still looks cool.
  • zachharkey, on 10/12/2007, -0/+0A chrome beveled nav bar can make you look just as cheesy without all the overhead. No Digg.
  • bobgb4, on 10/12/2007, -0/+1just needs to do some anti-aliasing to make it look a little better
  • dumky, on 10/12/2007, -0/+0More javascript fun: demos coded in javascript
    http://www.zwetan.com/blog/ECMAScript/JavaScript/Browser_demo_coding.html
  • mcdefjef, on 10/12/2007, -0/+0The geocities sitebuilder toolbox included a very similar script effect in about 1996 I think. Cool then. and now.
  • wintermute1974, on 10/12/2007, -0/+1I see that people are reporting browser performance on this one, so I'd like to add my report:
    The demos run nice and smooth on my aging 2500MHz Athlon PC and Opera 8.54 in Windows.

  • devn3t, on 10/12/2007, -1/+1I had one of these on my homepage in 1996. Funny how history repeats itself. I found them silly and obnoxious after I had it on the page for a few weeks. I took it down immediately.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.