Woooooooooormhoooooole!

August 7, 2010 8:09 PM

An undulating 3D tunnel in under 1k of JavaScript - requires a browser which supports the CANAVS tag.
posted by Artw (76 comments total)

the waht now?
posted by unSane at 8:11 PM on August 7, 2010 [2 favorites]

Anything not IE8 or utterly ancient.
posted by Artw at 8:13 PM on August 7, 2010

Welcome to the future, where a simple polygon 3D simulation slows my dual-core 2.2 GHz machine to a crawl.

I have mixed feelings about this—I do think it is cool, but man, does JavaScript ever waste a lot of cycles.
posted by grouse at 8:15 PM on August 7, 2010 [3 favorites]

The internet is going to be ridiculous in ten years.
posted by danb at 8:15 PM on August 7, 2010 [7 favorites]

Needs an FPS counter. Seems quite a lot smoother on Safari than Firefox on OS X, though.
posted by jedicus at 8:20 PM on August 7, 2010

Core i7, FF 3.6.8 and it crawled. The future needs MOAR POWER
posted by msbutah at 8:21 PM on August 7, 2010

JS performance in FF is kind of nasty in it's current version - expect huge improvements with Firefox 4.
posted by Artw at 8:24 PM on August 7, 2010

If you wait long enough does Tom Baker's face appear?
posted by Babblesort at 8:26 PM on August 7, 2010 [17 favorites]

I'm really looking forward to the performance improvements in general FF4, but for now I have to stick with Chrome and V8 (which displays this all silky and smoothy on my 2ghz Core Duo (!Core 2 Duo) machine.
posted by Cat Pie Hurts at 8:27 PM on August 7, 2010

macbook pro handled it just fine...2.4 dual core..
posted by HuronBob at 8:27 PM on August 7, 2010

Yeah, this hammered Firefox so hard I couldn't even get the "Back" button to work. I tried it in Chrome, and it was fine.

I really hope FF4 fixes some of the performance issues. I've pretty much decided to switch to Chrome; I just haven't done it yet. (Need to find some development tools to replace the ones I use in Firefox.)
posted by ixohoxi at 8:29 PM on August 7, 2010

supports the CANAVS tag

Is that what the kids are calling it these days? In my day we called it "loco on the demon weed," plain and simple.
posted by eritain at 8:30 PM on August 7, 2010 [2 favorites]

It's going to be more of a browser thing than a processor thing - on my box it zips along in Chrome while it merely chugs in FF, though in a way that is still impressive because LOOK PEOPLE! 1K!
posted by Artw at 8:30 PM on August 7, 2010

HuronBob, what browser were you using? That's as important, if not more so, than your hardware. JavaScript is an interpreted language, and there have been big advances lately in interpreting it quickly and efficiently.

Some browsers (like Chrome and Safari) are at the leading edge of that trend, and others (like Firefox and, especially, IE) are kind of crap (but working to catch up).

On preview, what Artw said.
posted by ixohoxi at 8:32 PM on August 7, 2010

msbutah: "Core i7, FF 3.6.8 and it crawled. The future needs MOAR POWER"

Chrome is much faster with it
posted by MrLint at 8:33 PM on August 7, 2010

To be fair, Firefox's current Javascript engine (a direct descendant of SpiderMonkey, the original JS engine from Netscape) is pretty far behind most modern interpreters. Works quite nicely in Chrome or Safari.
posted by xthlc at 8:34 PM on August 7, 2010

Apparently if you want the fastest of the fast you want Opera, but nobody really gives a rats ass about Opera so it's not amongst the browsers I regularly look at things in.
posted by Artw at 8:35 PM on August 7, 2010

I can see Persis Khambatta staring at that thing while receiving communications from V'Ger.
posted by RobotVoodooPower at 8:37 PM on August 7, 2010 [1 favorite]

I've known that Chrome rendered faster than FF but I didn't realize until just now how much faster Chrome's interpreter was. The tunnel runs OK for me in FF but the FPS visibly jumps up in Chrome.
posted by Babblesort at 8:37 PM on August 7, 2010 [1 favorite]

Works on the iPhone. Very, very, very slowly, but it works.
posted by hincandenza at 8:38 PM on August 7, 2010 [1 favorite]

Chrome, at least, multi-threads it.
posted by Confess, Fletch at 8:41 PM on August 7, 2010

On FF with a multi-core CPU, the app is running entirely on a single virtual CPU which maxes out at 100% and slows to a crawl.
posted by stbalbach at 8:43 PM on August 7, 2010

omg the winamp days are flashing back on me.
posted by BurN_ at 8:49 PM on August 7, 2010 [1 favorite]

12 is good too
posted by East Manitoba Regional Junior Kabaddi Champion '94 at 8:49 PM on August 7, 2010 [1 favorite]

Looking through the whole list of demos, a lot of the graphics stuff there reminds me of the screensavers that ship with X11's xlock, which I suppose means the state of the art in javascript graphics today approximates the state of the art in framebuffer BITBLTing in the late 1980s.

I'm not sure if that's good or bad.
posted by mendel at 8:50 PM on August 7, 2010 [2 favorites]

Yeah. Runs okay on my iPhone 4 - some significant fraction of the speed Safari on a recent MacBookPro can run it, but it runs without difficulty.

This really needs a looping techno track and some l33t5p3ak shoutouts flying by in 3d letters to be a proper demo, but for 1k this is damn impressive.
posted by ardgedee at 8:51 PM on August 7, 2010 [2 favorites]

I guess it's worth emphasizing, too, that although a lot of these demos look like screensavers from 20 years ago, those screensavers were written in languages a lot more terse than Javascript, and weren't necessarily limited to 1 KB.

In Javascript, you could easily use 1 KB with a "Hello World".
posted by ardgedee at 8:56 PM on August 7, 2010

I just put the source in JSBeautifier. A couple of interesting tricks. Some things that sacrifice performance for conciseness to fit in 1K of code, which might explain the crappy FFox performance.

For example, the author uses a function to create each point object, so a point is "p(x1,y1,z1)" instead of "{x:x1,y:y1,z:z1}". This is shorter in terms of source length, but probably destroys the frame rate, since there's a lot of overhead in function calls in Javascript.
posted by xthlc at 8:58 PM on August 7, 2010 [4 favorites]

Is this the Katie Couric or the Harry Smith?
posted by Sys Rq at 8:59 PM on August 7, 2010

I'm using chrome... I spent the last week making the transition... well worth it.
posted by HuronBob at 9:01 PM on August 7, 2010

Or does it hook up to a Habitrail in Richard Gere's livingroom?
posted by Sys Rq at 9:09 PM on August 7, 2010

Sorry, can someone explain wny this is good?
posted by doublehappy at 9:29 PM on August 7, 2010

Like, I logged into the internet, man, and it was this big never ending tube!




Weird....
posted by mazola at 9:39 PM on August 7, 2010 [1 favorite]

Chrome handles it gorgeously. And I too am on a Mac, not a platform known for speedy video rendering.
posted by middleclasstool at 9:45 PM on August 7, 2010

Whilst awesome, this post misses the larger scope of the link. The wormhole is part of js1k, an entire collection of neato JavaScript demos that size in at under 1kB.
posted by spamguy at 9:48 PM on August 7, 2010 [1 favorite]

The degree to which Chrome humiliates Safari on these demos on my 2008-vintage Mac is really impressive.
posted by pts at 9:51 PM on August 7, 2010

IT'S NOT A HIGHWAY IT'S A SERIES OF TUBES
posted by nathancaswell at 10:00 PM on August 7, 2010

Runs...slowly...on...i...pad.
posted by furtive at 10:01 PM on August 7, 2010 [1 favorite]

clearly someone needs to relearn their definition of "canavs."
posted by shmegegge at 10:11 PM on August 7, 2010

Very pretty (on a MacBook Air + Safari).

Call me an unreconstructed Luddite, but why is this a source of so much interest?
posted by marvin at 10:12 PM on August 7, 2010

Call me an unreconstructed Luddite, but why is this a source of so much interest?

find a 1kb .jpg and check it out
posted by nathancaswell at 10:13 PM on August 7, 2010 [8 favorites]

Wow a monochrome, 1987-C64-quality animation of the inside of a butthole. And it uses all my computer's resources!

Take *that* Flash!
posted by drjimmy11 at 10:14 PM on August 7, 2010 [3 favorites]

here, actually, i found one for you.
posted by nathancaswell at 10:14 PM on August 7, 2010

Wow a monochrome, 1987-C64-quality animation of the inside of a butthole. And it uses all my computer's resources!

Take *that* Flash!

I hate how fucking partisan technology is sometimes. Cool is cool. This, for 1kb, is cool. It's not the fucking Crusades.
posted by nathancaswell at 10:18 PM on August 7, 2010 [5 favorites]

Wow a monochrome, 1987-C64-quality animation of the inside of a butthole.

Yeah, but it's my butthole.

(I wiped)
posted by dirigibleman at 10:34 PM on August 7, 2010

This one reminds me of Elaine watching the rotating tires on Seinfeld.
posted by blueberry at 11:07 PM on August 7, 2010

I wiped

And bleached, by the look of it.
posted by ryanrs at 11:54 PM on August 7, 2010

A couple of explanations of how the entries were created.

Hacker News also has a thread with some more discussion.
posted by Z303 at 12:05 AM on August 8, 2010 [2 favorites]

I was about to make some comment about how modern technology obsolesces so quickly since that animation was so slow on the poor little 1.8Ghz P4 in my laptop.

Ahem. Giddyup.
posted by Revvy at 12:27 AM on August 8, 2010

Yep, pretty stuttery (albeit stable) in Mac FF but slick as snot in Safari.
posted by brundlefly at 12:33 AM on August 8, 2010

Oh god, the Beeper King was right. Technology is cyclical. Time to get a car phone.
posted by The Lurkers Support Me in Email at 1:41 AM on August 8, 2010

That looked a lot better than I expected. 1KB only? Jesus... most emails are bigger. Most everything is bigger.
posted by codacorolla at 3:18 AM on August 8, 2010

Welcome to the future, where a simple polygon 3D simulation slows my dual-core 2.2 GHz machine to a crawl.

dual core? More cores and even if it runs slowly, it won't have much of an impact on the rest of the machine. Right now, JS can only run on one core.

Core i7, FF 3.6.8 and it crawled. The future needs MOAR POWER

things like this are much faster in chrome, which I keep around for sites that don't work well in FF (which is rare)
posted by delmoi at 3:34 AM on August 8, 2010

> Call me an unreconstructed Luddite, but why is this a source of so much interest?

With no more than 1024 characters of text, what's the most impressive thing you can make a browser window do? That's about 7 messages on Twitter: How comprehensive and articulate a message can you write with that kind of constraint?

Complicating this, like I snarked, is that Javascript is pretty verbose as programming languages go. Say you want to display "Hello World". In most languages, it requires little more than the single command that sends text to the screen. In the C language, that's 32 characters after stripping out unnecessary spaces:
main(){printf("Hello World\n");}
In Javascript, you have a couple problems. First, Javascript will need a document to modify to generate the output, so now you have HTML consuming some of those precious thousand characters. Second, many of Javascript's terms are built out of full English words mashed together. The "Hello World" below requires 80 characters, compared to C's 32:
<html><body><p><script>document.write('Hello World');</script></p></body></html>

The problem compounds if you want to do anything that modifies what's on the screen - which is how animation usually works. You have to continue creating objects and doing things to them, which requires more complete English words to make things and complete English words to describe what's done to them. To add an exclamation point after "Hello World", the count goes up to 141:
var p=document.getElementsByTagName('p')[0].innerHTML;p+='!';

So displaying "Hello World!" in Javascript in this way consumes over a tenth of the quota.

Now, once you've defined the objects you're going to be displaying and manipulating, you can get efficient. In the above example, we've got a 12 character message, "Hello World!", represented by a single character, p. Any time we want to refer to, manipulate, or add to "Hello World!", we can say p instead. Cool. But there's still that whacking huge overhead required in creating objects and defining what we intend to do with them, even if after those prologues are out of the way it's mostly math, which even in Javascript is reasonably concise.

xthlc's comment is about another challenge in demos like this: Making the thing run well. He points at an example where the demo author uses an 11 character expression in place of a 16 character expression. It liberates five characters for use elsewhere, possibly to make some other effect more awesome, but doing so means being inefficient in terms of how the script executes: Somewhat analogous to taking three left turns rather than one right turn.

Incidentally, this comment alone consumes somewhere over 3,123 characters, and is about 3 times the size of the demo the OP links to.
posted by ardgedee at 5:10 AM on August 8, 2010 [20 favorites]

There's nothing to shoot, what's the point?
posted by nomadicink at 5:27 AM on August 8, 2010 [1 favorite]

On my shitty netbookish 1.2ghz cpu, it ran fine in chrome, and hung firefox hard. I guess firefox isn't living in the future yet?
posted by jaymzjulian at 6:50 AM on August 8, 2010

JS performance in FF is kind of nasty in it's current version - expect huge improvements with Firefox 4.

Don't know whether they've implemented a new JS engine yet, but I've just tried this with beta 1 of Firefox 4 and there's hardly any improvement. The demo is still extremely impressive, but clearly there's a lot of work to do in this area. If processor-intensive Javascript stuff really takes off on the web, that might be my cue to switch to Chrome.
posted by ZsigE at 7:01 AM on August 8, 2010

Dear Browsers: Work smarter, not harder.
posted by blue_beetle at 7:06 AM on August 8, 2010

Pegs the CPU at in Safari on my 2008 MacBook, and so does The Guardian's script-heavy frontpage. Should I switch to Safari nightly builds? Anything else I can do to improve Javascript on Safari, or is it just screwed?

Seems wrong in 2010 that a website can bring a nearly-new machine to its knees.
posted by GeorgeBickham at 7:19 AM on August 8, 2010

tried this in FF4.0 beta 1 and it was a tiny bit quicker than in FF 3.6.8. Also, CPU usage at 100%.

or what ZsigE said
posted by marienbad at 7:30 AM on August 8, 2010

ardgedee: Many thanks for the explanation.
posted by marvin at 8:08 AM on August 8, 2010

With no more than 1024 characters of text, what's the most impressive thing you can make a browser window do?

Probably this, at least for right now.

Of course, the 256 byte IBM.COM logo I've got lying around on one of these dust-covered floppies was pretty impressive, too. In 1985.
posted by Civil_Disobedient at 9:16 AM on August 8, 2010 [1 favorite]

Oh wait, you said browser window. I dunno, maybe this.
posted by Civil_Disobedient at 9:20 AM on August 8, 2010

I really hope FF4 fixes some of the performance issues. I've pretty much decided to switch to Chrome; I just haven't done it yet. (Need to find some development tools to replace the ones I use in Firefox.)

Chrome has awesome built in developer tools, including live CSS editing and JS execution. I'm commonly able to try out jquery for a page from the console. It's at least equivalent to, if not better than Firebug. Don't know what other tools you use - there's nothing like YSlow afaik, but the resource tracker is quite good. Also, it can run greasemonkey plugins natively (the greasemonkey guy works at google now and he's calling them "Userscripts" ). Chrome should really have just about everything you need.
posted by heathkit at 9:36 AM on August 8, 2010 [1 favorite]

Also, the demoscene has fascinated me for a while. Anyone know of some good repositories of example demo code? It's one of those things I have trouble googling for...
posted by heathkit at 9:42 AM on August 8, 2010

heathkit

Processing has some nice examples of Amiga/ST effects, plasma, fire, metaballs, unlimited bobs and would be a good platform to play with if your starting out.

An Introduction to Programming C-64 Demos seems to be great if you want to play on an old school platform.

Also The Demo Effects Collection, seems good if you are happy with C/C++. With Real-Time Rendering being a great resource for anything computer graphics related.

On the more hardcore level Iñigo Quilez's (he was one of the programmers of Elevated) site has lots of information as does IN4K for creating 4K demos.
posted by Z303 at 11:36 AM on August 8, 2010 [3 favorites]

Firefox 3.5 on an ancient 1.8 GHz Athlon XP and it's slow, but doesn't lock up the machine. What's wrong with your computers?
posted by rodgerd at 11:57 AM on August 8, 2010

1kb? Pfft. Back in my day, we did it in 256b.
posted by schmod at 12:44 PM on August 8, 2010 [1 favorite]

Maybe 2-3 fps on my Nexus One.
posted by fnerg at 2:27 PM on August 8, 2010

I'm seeing about 4fps on a 1.6G Vista box in FF3.6. Other tabs still responsive. Looks like there's framerate control in it.

Opening a copy in another window, on the other hand, not advised!
posted by Twang at 4:00 PM on August 8, 2010

I not on any kind of a beast of a machine. It's a >4 year old laptop that was the bottom of the barrel when I bought it. In Firefox, it runs and Firefox remains well behaved. Slower but still well behaved with two tabs running it.
posted by NortonDC at 5:57 PM on August 8, 2010

heathkit: "Also, the demoscene has fascinated me for a while. Anyone know of some good repositories of example demo code? It's one of those things I have trouble googling for..."

The Hornet Archive might be a good place to look. Just click the search button next to "/code" in the dropdown for a listing of example code.

pouet.net is a general repository of pretty much everything demoscene. Demos, example code, demo tools, people who make demos, etc
posted by promptcurry at 10:14 PM on August 8, 2010 [1 favorite]

Wow a monochrome, 1987-C64-quality animation of the inside of a butthole.

To be fair, it's using VIC-20 sized resources to animate your butthole at C64 quality.

First, Javascript will need a document to modify to generate the output, so now you have HTML consuming some of those precious thousand characters.

While everything you said is true in general, in this particular contest you get the HTML for free.
posted by robertc at 3:33 PM on August 9, 2010

Apparently FF4 has some hardware acceleration that is not enabled by default?

Firefox 4 as Psychedelic as IE9 with Direct2D enabled
posted by Artw at 2:37 PM on August 11, 2010

This page made wonder if anyone has tried the wormhole with a Direct2D enabled beta of Firefox.

Anyone?
posted by NortonDC at 4:29 AM on August 12, 2010

Hmm, sorry about that Artw. That's what you all get for letting me post early in the morning.
posted by NortonDC at 4:30 AM on August 12, 2010