Winning 1kb intro released at Assembly 2015 | Hacker News Reader

Winning 1kb intro released at Assembly 2015

p01.org

222 pointsjoeyspn64 comments

Anybody interested in a well written history of the scene that really helps explain it as a cultural phenomenon should probably read the demoscene chapter in "The Future Was Here", a book about the Amiga. It's probably one of the best written synopsis of the scene I've ever read and really places it well as both a technical and artistic movement and helps provide context for this kind of work.

Also, a fantastic visual guide is the documentary film "Moleman 2" (2011). It's freely available to watch on YouTube; highly recommended: https://www.youtube.com/watch?v=iRkZcTg1JWU

Here is the UNPACKED source.

function u() { requestAnimationFrame(u);

    for (g = p ? B.currentTime * 60 : (B = 'RIFFdataWAVEfmt ' + atob('EAAAAAEAAQAAeAAAAHgAAAEACAA') + 'data', b.style.background = 'radial-gradient(circle,#345,#000)', b.style.position = 'fixed', b.style.height = b.style.width = '100%', b.height = 720, h = b.style.left = b.style.top = A = f = C = 0, 6177); g > f; h *= f % 1 ? 1 : .995)
        for (s = Math.pow(Math.min(f / 5457, 1), 87) + Math.pow(1 - Math.min(f / 5457, 1), 8), f == [b.width = 1280, 1599, 2175, 2469, 2777, 3183, 3369, 3995, 4199, 4470, 4777, 5120][C] && (C++, h = 640), f += p ? (c.translate(640, 360 + h / 45 * Math.random()), c.rotate(A / 5457 - h / 5457), c.scale(1 + s * 8, 1 + s * 8), 1) : (B += T((1 + s * 8) * Math.random() + (1 - s) * (h / 45 * (f * (2 + C / 3 % 1) & 1) + (C > 3) * 8 * (f * (2 + (f / 8 & 3)) % 1)) | 1), 1 / 512), i = p.length; i;) y = p[i -= 7], x = p[i ^= 1], r = p[i + 4], l = p[i + 6], s = 2 * Math.random() + 1, t = s * 4, a = 122, 640 > r ? (640 > Math.abs(p[i ^= 1] += p[i + 2]) || (p[i + 2] *= -1), 640 > Math.abs(p[i ^= 1] += p[i + 2]) || (p[i + 2] *= -1), t = Math.random() > p[i + 7] || p[i + 7] == '22312131212313' [C] & h == 640, w = x - A, p[i + 2] || r * r / 3 > w * w && (t = s * (r - Math.abs(w)) / 45 + 2, a = 2 * Math.random() + 5, p.push(A, 0, s * Math.sin(a += 599), s * Math.sin(a - 11), s * t, C + s, 640, .995), s = 2 * Math.random() + 1, a = 2 * Math.random() + 5, p.push(A, 0, s * Math.sin(a += 599), s * Math.sin(a - 11), s * t, C + s, 640, .995), s = 2 * Math.random() + 1, a = 2 * Math.random() + 2, p.push(A, 0, s * Math.sin(a += 599), s * Math.sin(a - 11), s * t, C + s, 640, .995)), a = p[i + 2] * y / 45, l = p[i + 6] = t ? 640 : .9 * l, t = r) : A = p[i] ++, g > f || (s = r, c.beginPath(), c.lineTo(x + s * Math.sin(a += 599), y - s * Math.sin(a - 11)), s = t, c.lineTo(x + s * Math.sin(a += 599), y - s * Math.sin(a - 11)), c.lineTo(x + s * Math.sin(a += 599), y - s * Math.sin(a - 11)), c.shadowBlur = r, s = l, x = s * 2, a = p[i + 5], c.shadowColor = c.fillStyle = 'rgb(' + [x + s * Math.sin(a += 599) | 1, x + s * Math.sin(a += 599) | 1, x + s * Math.sin(a += 599) | 1] + ')', c.fill());
    p ? c.fillText('BLCK4777', 90, 99) : (B = new Audio('data:Audio/WAV;base64,' + btoa(B))).play(p = [f = C = 0, 0, 0, 0, 180, 2, 0, 1, -360, 0, 0, 0, 99, 1, 0, 2, 360, 0, 0, 0, 99, 1, 0, 3, -2880, 0, 0, 0, 1280, 0, 1280, 0])

};

A bit prettier: https://gist.github.com/paulirish/21326986569181e47f21

And today, I was reading that facebook's mobile messenger has 18000 classes, and is about a 100mb, this doesn't take into account other dependencies it has on the OS. These demos are 100% standalone, no external libraries. Progress is a funny thing.

The only other dependencies would be assets and OS included libraries. All of the code executed is part of the binary or it is remote JS.

No, assets are included in the byte count of these demos!

Not sure what you mean by RemoteJS though. You aren't allowed to load more JS code from the web.

Different use case. Facebook is a communications application, with user inputs and networking, focused on getting the information to you as fast as possible for the best user experience, and being always working 24/7.

This is a one-off deterministic demo, without inputs or networking.

Still, a 1k demo like this is impressive. And 18000 classes is too much for a messenger. But you can't compare them.

This is a Javascript demo. So let's not discount the browser, Javascript engine, JIT, 3d acceleration libs, sound libs, and everything used from the OS that is involved here. Still it is a great effort.

Your argument fits better to a machine like the C64, where demos are really going directly to the hardware and the OS is basically inactive.

Well most of the things you named are inactive. It's using a very tiny bit of external 3d code, and external decompression, but almost everything else out of browser, javascript, libs, and OS is passthrough. The javascript engine exists but does not serve to make it smaller; the code is simple loops and subroutines that would probably be better as native code.

the 4kb winner is also amazing

http://archive.assembly.org/2015/4k-intro/hydrokinetics-by-p...

Here's a 256b web compo from 2002 (!) http://wildmag.de/compo/

A lot of the stuff looks almost trivial compared to what we do today. (And unfortunately a lot of these won't work anymore)

p01 does so much good stuff (http://www.p01.org/releases/) - the fact that he won Assembly 2015 with a JavaScript demo is testament to his skills!

other results: http://archive.assembly.org/2015

For Polish-speaking guys: Ha!art published a magazine about scene with some of good articles:

http://www.ha.art.pl/czasopismo/numery-czasopisma/4054-ha-ar...

This is one of my favourite demoscene's: https://www.youtube.com/watch?v=auagm5UBTwY

And a breakdown of how it was built:

http://iquilezles.org/www/material/function2009/function2009...

WebGL version, by iq himself: https://www.shadertoy.com/view/MdX3Rr

Nitpick: the demoscene is a community. You linked to one of your favourite demos.

(and insiders wouldn't call it a demo but an intro because it's small, and obviously the word "intro" signals something about file size)

I wonder if the bad performance is due to the <1kb requirement.

Almost certainly. It would be tempting just to pre-render this to an HD video otherwise.

In case you missed the link on the page, there's a 1080p version on YouTube https://www.youtube.com/watch?v=NnZUUSdpt-k

The point was that it is probably much less CPU intensive to decode such a stream in 1080p than to render it from a compressed 1k of Javascript.

Ah, I suppose. I like the performance aspect of it though. It feels like something my computer is doing live, as I watch it, instead of a recording of something done in the past.

Not sure the point of the comparison. Yes, some of our encoding technology beats some algorithmic generation of content in performance. If the goal is size of encoding, though, it doesn't come close.

Tricks like this can help show how less than a gig of data is enough to encode an operating system. Or a person.

I really hope you are right about encoding a person in less than a gig, but what about the associated genome (3000 megabases), episodic memories and/or neuron connectivity?! Surely this is data that would be essential, yet very hard to algorithmically encode?

I don't know enough to weigh in on if a person is just a gig. I'm just going off of this[1] presentation.

[1] http://www.infoq.com/presentations/We-Really-Dont-Know-How-T...

Hah, just found this 2006 thread via Twitter: "Coding routines for a non-interactive demo is just a special case of procedural video-compression anyway." http://ada.untergrund.net/?p=boardthread&id=200#msg1961

Why "intro"? As if "demo" wasn't confusing enough.

It is standard demoscene terminology for a small Demo.

An intro is a demo with a size limit.

The demoscene started out of the software piracy scene. An intro was a short thing like this one, that people put into the boot sequence of games they cracked or otherwise made available to the scene. Over time these got more elaborate and people started making them separate from the games to show off their prowess in coding, called demos. Nowadays the names serve to differentiate the runtime length and size of the program. Intro = short thing, demo = long full effort thing.

> Intro = short thing, demo = long full effort thing.

The problem is that that's not true anymore either. Many intros are equally "long full effort" as your average demo. Intro simply means "demo with a size limit", these days (and by "these days" i mean "the last 15 years")

Just wait until you get to the "megademo". :)

These already exists and are called wild demos:

From http://tomaes.32x.de/text/faq.php:

  A wild demo can be pretty much everything. Some possibilities:
  
   - It's any kind of film, usually available as divx/avi file
     (music videos, shorts, comedies, trash, prerendered animations...)
  
   - It's a demo that requires very rare/strange hardware to run
     (c64 with SCPUs, for example)
  
   - It's a demo that simply does not fit in any other competition (and the
     applying rules) of a given demoparty.
  
   - Sometimes, live performances count as 'wild' demos too. ;)
  
  However, in most cases, it IS a short movie (clip), either tradionally filmed
  or CG/animated.

Not quite. Megademos are simply really big demos, the very first example of which being Second Reality by Future Crew.

https://www.youtube.com/watch?v=KTjnt_WSJu8

Nowadays megademos might be put into the wild demo compo, but from what i know parties put length restrictions on those as well. The primary purpose of wild demo compos however is to allow platforms that do not compare well with the classic demo platforms, such as the various ARM mini computers, game consoles or really old computers.

While Second Reality is a classic. It was not the first megademo. I remember the term not being new in the late 80's on the Amiga and ST

http://www.pouet.net/prod.php?which=1331 http://www.pouet.net/prod.php?which=3119 http://www.pouet.net/prod.php?which=3242 http://www.pouet.net/prod.php?which=3972

I stand corrected, my wording was absolutely wrong and i should've written "one of the earlier". Thanks for the examples too! :D

Some even use overhead projectors https://youtu.be/LCIsIfEOEI8

Cute, but doesn't really compare to non-js stuff: https://www.youtube.com/watch?v=qQNIKOD6WnY

Ha, I love that you are so condescending about what he made, and one of the first comments on the video you linked to was "Yawn. We did better in 256 byte microcode strings in 1986."

Yes, sorry. Just missing the golden days ;)

Yeah, my first reaction: since when JS is a valid target for demos? ;).

I didn't read it as condescension, but observation: old demos were able to take advantage of a lot that's not available to JavaScript.

But isn't the whole challenge of a demo to make the most of limited resources?

Ouh that was cute. The dragon curve part felt like cube ^^ inception. I'd pay to see that in an IMAX theater.

Different limitations (source vs compiled file size).

Indeed, astonishing how that fit all into just 1kB (plus a copy of Microsoft Windows).

Which of course does not really compare to the C=64: https://www.youtube.com/watch?v=jGAsiHY1VCs

Arbitrary limitations, art, it is all very subjective in the end.

Youtube is being slow for me today. If only there were a way to compress the video smaller...

i used to collect future crew's demos

^^^ Now you're just showing your age! No but seriously, "Second Reality" by Future Crew in 1993 was voted one of the top 10 hacks of all time by Slashdot.org. I remember watching this thing on a very low end 386, with something like 4MB of RAM and maybe 512K of video memory and I was mesmerized. They might as well be showing you this demo in 3D holography today, you'd be just as impressed as I was, it was borderline magic back then. It gets hella good after about 1:50. SECOND REALITY - BY FUTURE CREW, '93

https://www.youtube.com/watch?v=rFv7mHTf0nA

https://en.wikipedia.org/wiki/Second_Reality

Oh man, I remember this one. These are truly incredible.

How to unpack the compressed html file? I see a lot of binaries in there starts with "PNG".

crashed my browser(chrome latest,win 8.1) but there is a video capture linked .

Works fine in Safari 8.0.8, OS X 10.10.5

Stunning.

how does one even begin to figure out the techniques used to write intros or demos like this?

If you're interested in doing C64 demos, here's a decent starting point: http://www.antimon.org/code/Linus/

Read up on Computer graphics. this EdX course looks a decent starting point

https://www.edx.org/course/computer-graphics-uc-san-diegox-c...

So Javascript is now Assembly?

No, Assembly is an annual demoparty in Finland.

iTerm is also pretty great, because you can split terminal tabs into panes and there are some new neat features allowing you to click on filename strings etc in Finder!

I think you meant to comment on https://news.ycombinator.com/item?id=10069521

Reply on news.ycombinator.com