Whole new worlds come into life when the creative coding and technical madness of the Demoscene meet the breadth of optimization techniques of the web platform.

In this talk we will step back from our day job, twist best practices, abuse JavaScript and web browsers, use good old smoke and mirrors to create a monster Audio-Visual demo in a handful of bytes.

Why go to such length? Because it’s damn rewarding to create these small pieces of art! Try.

• » Norway / Oslo
• » Website
• » Github
• » Twitter

Transcript

>> Mathieu 'p01' Henri: Thank you, so, hi, first off, thanks a lot for having me, it's my first JSConf 2014, and first time in Berlin, it's really really nice, I really like it. So does my daughter, she's having a blast right now. As he said, my name is Mathieu 'p01' Henri, I'm a JavaScript developer, I've been there for nine years now. I mostly work on the desktop router. But most people know me as PO 1, this is the name I've gone by for about 25 years. This is also how I got into opera, I entered a contest and someone contacted me if I wanted to join them, I said, sure, let's go. Then you might be wondering what is the demo scene that I'm talking about. Demo scene was born here in Berlin 30 years ago.  ‑‑ very, very talented hackers, they take commercial software, reverse engineer them, remove the protections so we can use them for free. Back in the '80s we were only ‑‑ high score tables, if it was a game look Pac M A N or anything, or in the splash ‑‑ of a program we are cracking. But in '84, Berlin cracking service did something really unique, they added their own introto program they would crack. No emission, no sound, we're showing the emblem ‑‑ it started a revolution, soon the crack started with this. Became more fancy, it became so cool, these little demos were released independently of cracks. Basically it's a group of creative people that make real‑time audio‑visual animations they try to push the technical and creative limits, it's about pushing the boundaries. Because it's born from that cracking scene, it's very social, very competitive the social part you can really see it in the fact that every year at least 50 events all around the world, mostly in Europe, but also in the states, Japan. Some in Australia as well. We have live concerts, seminars a bit like here, we explain techniques and various things. But, most of all, competitions in many quality I goes, the queen category is the demo competition where you have 65‑megabytes 124‑megabytes to make the most amazing real‑time animation you can, this goes down to seven size constraints, 64, and down to insane 264 bytes, it's not just about programming competitions, it's also more artistic competitions like music and ‑‑ sorry ‑‑ music and graphics, so graphic competitions and also short movies and animations, and uses many, many platforms. It's also Amega ‑‑ >> Amega! It's also on 8 birth computers, C 64, but it also goes on mobile phone, video game consoles modern ones and old ones like Vetrix, or genesis. But people also make demos on the most crazy platforms, they make demos on Oscoscops, some make their own custom hardware just for the heck of it. This goes far, really far. The most insane, I think in my mind is also demos on OHP, overhead display we saw in high school, junior high school, big lightbulb on mirror, with plastic sheets people make demos with that, it's just bizarre. And ‑‑ sorry ‑‑ back then, back in the '80s the main distribution platform for demos was you take a stack of disks, send them by mail and few weeks later you would get your floppy disks back and stamps back with more demos, and it would go on and on, then came the BBSes in the '80s, '90s but now everything is done on the internet. The crazy crazy thing, which is not so crazy for you guys is the web is a viable platform to make demos. And, really it's about pushing limits, and one of them is size, so how could we go about making a small demo on the web? Well, first of all you need to start from an idea, a concept. So, your concept for your small demo can be simple like just an idea or a word or sketches. I have really like to sketch my ideas on small story boards, here you can see a couple of steps like, the top, one, two, three, four, five, steps. And something that I do now a bit more is to make a mood wall. I just go on‑line and save images over time and sometimes I see some images inspire me and that could work well together if I just combine them and animate them this is the mood board for one project I'm working on. We will see where this goes. And once you have your concept, it's time to prototype it. The idea of prototyping is really to see if your concept works, if it's possible in the constraints you have. It's also about finding the right technique to display your demo. The web, first many way to draw things, if you just want to do simple overlays, the DOM is perfect, if you want to do street view kind of things where you have a static observer that looks around CSS 3D is good for that theD canvas is okay, and for heavy duty stuff againGL is king. Here's ‑‑ web GL is king. I'm going to show you a preview of a project I'm working on. So hopefully this should be finished in a couple of week and we'll have sound sin crow anytion and it should be, yeah, good. Still lots of work to do, but I'll get there. So once you have done your prototypes and you have ‑‑ you can do your ID, optimize it. When you want to draw things to make animations you will play a bit with numbers and a bit of trigonometry, so, there's a couple of cheep approximations of pie's and fractions of pie's that can save you some bytes. It sounds crazy but when you try to do something in 2 $56 bytes that helps, you need it. Numbers in JavaScript you know they're actually floating ‑‑ numbers, so the first two at the top, increments by point one will end up with I being equal toll 10.09999 something this is because 0.1 cannot be expressed in power of ‑‑ power of two. The second loop, since the increment is one over eight, every number in this loop can be expressed exactly so a loop ends with ten, looks like nothing, it means during this loop you can use modular and the modular will launch exactly, so you can, in a cheap way nest two loops by just using the right increment, so that can save you a lot of bytes also. But, really what you should do is try to reduce your function footprint, so one thing that J S told us you should use a function signature. In this we have two functions, next one doesn't need these arguments but by using the same function signature, they will compress better, so, just add a little bit of ‑‑ but, they will compress better in the end. But, something else you can do is also you can try oshadow things, in the case of functions we have these two functions, two things, we can combine them together, we can make one function that takes two arguments, and if one argument is passed we do something, no argument is passed ‑‑ we do the second function. The same goes for code blocks, so you can have one loop with us, yeah, but, checks with value of one property, small square and then put the next position, typically that's in two loops, first would complete the position and the second one would do things, but you can do them together . But these things are ‑‑ they're nice but what you should really do is simplify your idea. Simplify your technique and how you will do things. I had the project a few months back which was called Minami district one thousand buildings in one thousand bites and spin around. It looks a bit like this, one common problem or one big challenge I had was how coI know which window to actually draw for each building, so the common way would be the look at one building and for each window compute the normal vector for the window, but tells me where this window is facing, if a Z coordinate is positive it means it's facing towards the camera if it's negative it's awhat. It's little bit difficult to do with one K. So another way I looked at it is think about how I draw these windows one side of the window to the next one if you follow the numbers, one, two, three, four, if a number actually go towards your right ‑‑ towards your left, sorry it means that the window is facing the camera, so I draw it, if a difference in X from one edge to the next one is positive I draw it, if it's negative I don't draw it, it's facing away, it was much more compact. So this other project, which I called Matraka I wanted to display some kind of crazy surface crazy object with lighting and I tried many formulas to describe the surface, I tried to use soft code as surface, but, the best one was actually the most simple, it was just Cos X Cos Y. Very small bumps and the very nice thing about this is that since it's very simple formula, it's very simple derivative, and the derivative gives me the curvature of this surface by ‑‑ curvature so I know what is ‑‑ which light is ‑‑ so I just take this value and it gives me light office at a given point. If you ‑‑ in the mood board that I showed you, like one ‑‑ many, many triangles, and, how you would do that normally is you would process all your triangles together and check the coordinate of the Lee points and solve them, to know which order to ‑‑ if the triangles are small enough, you can think of them as ‑‑ and just approximate the particular so you just saw the triangle individually and not ‑‑ and it's much more simple to solve this. But, this simplification are often not enough, you often need to go ahead and fake it and you need to fake many things like graphics you often want to figure out how to light your objects and in 76 Jim came up with this idea of environment map, what it does is basically look at ‑‑ in every possible direction that the object can be facing check what is your light, what can be seen in every possible direction and makes a measure of it. So, this is the image you see on the left, well, you're basically sitting in the center of the room and looks in every possible direction, and you see in this direction you see the window and this you see a door. And when we want to render this kind of pea pot on the other side you check what is the direction that is the teapot facing at avarice point of the surface and you pick and imagine, just put it here and you're done. And you can also extend this idea so when you ‑‑ the image contains ‑‑ sorry that contains the color that you would see in every possible direction you can also store your position of your small triangle or your reference of coordinate system, so, you would store the color and also the position of the small triangle in space as if it was oriented in this direction, so you have at all possible directions, which means if you want to display a big amount of triangles and have it with light and even with multiple lights you can just do like one little cap and you have the light and position of the triangle and it's almost for free, so you can do all this, all these kinds of cheating and you often want to cast shadows to make things look a bit more realistic and shot shadows, it's nice to make it all soft and more simple way to do it, as your draw your elements in your fame, you draw ‑‑ on the floor in a separate canvas, smaller resolution like a quarter or divide your resolution by four or sixteen or thirty two, when you're done you just expand your smaller canvas behind your canvas where you draw all your things, and by stretching it it becomes all smooth and blurry I's very cheep and does the trick, it really does the trick. And once you have done that, well, good job, you have your visual, it's time to think about the audio. And on the web there's basically two ways to do sound, web audio API and audio element. Audio API is super powerful. It can do real‑time sound analysis but it's a bit very bows, and also regular 1 can and 4 K demos start with a black screen and then the visual kicks in. And that feeds very well with the audio element because we have that much code, less than 200 bytes, you can generate sound and play it. That's all you need. So, when you generate sound you is to think about the Nyyuist frequency. The Nyquist frequency, yeah, very Techi oh, it's the lowst frequency at which you can sample or generate music without getting audio glitches. And it's basically twice the frequency of your highest note in your music, so when you generate music, generate at least twice the frequency of your highest note, you can generate higher, the lower the frequency, means the less data you need to generate the faster your introwill start. You will get slightly lower sound quality, but your intro will start maybe five or ten seconds sooner. That can be nice. How do you make music with that. You start with small building blocks, you need to build instruments, so, if you want to do, I don't know, something simple like a ‑‑ you start with the first line which gives you pure noise and the second line ‑‑ decay, with a second and third line, of course, it adds that to your music. And then, it's nice, but, when since we generalsh rate the music before the animations, how do we do sin crow anytion with that? It's not that hard, when you general rate the sound, you foe exactly at which position in the sound you have, so you can store in a separate area, which notes you're actually playing at which position and which volume. During your animation, you can check the current time of your audioment, multiply by sixty and you know where in your sin crow anytion buffer you need to pick to know which notes are playing and then which volume so can do, you can really be in Sync with your music, and once you've done that, well done. But you haven't even started to come press it. So ... the normal way to come press is with JS packet, look at your code as a string, look at the repeat patterns and just replace them by a single character. So if we have many archings if declarations they would be registered to just one character this is very nice, you get about 25 percent compression ratio and mini if Id code or on the code I tend to write and you need about 70 bytes to decompress that, so it's pretty powerful. But web parcels actually very nice, we can ‑‑ and this support GZIP in the form of PNG images and we can bootstrap PNG images the idea of boot strapping PNG, it relatively new, you load your JavaScript code will be gray scale image you save as PNG, and when you load that and say, hey, that's foo ‑‑ I willowed that as HTML, so at the end of PNG meta data you add HTML bootstrap that look asbit like this. So, what it does is basically it puts an image but loads harsh ‑‑ per page, the image and loads it, puts the fix sells on the canvas ‑‑ and with that you get about 40 percent compression ratio, the impact here is about 160, 170 bytes, but it compresses at 40 percent so at 1 K you get ‑‑ I've seen 4‑kilo byte intros that were actually 20‑kilo bytes when not compressed with this technique. Once you have compressed your demo, it's time to bring it to 11, so if you are above your target size, it's time to really get dirty and to arrange your code and trick it. You need to move the code around and to try to increase number of patterns so that the code come presses better, sometimes just moving things around how you set some CSS propertytion or different values, just moving them around makes a difference of five to ten bytes in the compressed ratio. So it's ‑‑ yeah, if you're above your target you need to really shuffle things around and sighe so how it goes, if you're below your target size, also you have enough bytes to actually work on the show, so it's nice to try to not give everything away in the first ten seconds. So, try to work on the timeline, on the camera, so it's pretty boring to see like 3 D objects, distant through ‑‑ for 2 minutes nice to move the camera around, makes it a bit more interesting, try to change your color over time and space, to again make things a bit more live and just not give everything away too quickly. So now, I think it's about demo time. So, here's a project I did a few months back and ‑‑ yeah. Here it goes this is one kilo byte. just (Applause). >> So, now this is your turn. I mentioned many things, but it's actually lots of small things, it's not black magic, you can build these things with many, many small things and just playing around with things, so don't be afraid, this is not ‑‑ this is really not black magic, you can do it. And it's super rewarding to do these kind of things. As I said there's many demo parties, throughout the year. The next one that I can think of are function in Budapest in one month. Deadline here in Berlin if one month and Demojs in Paris in five weeks you have no excuse to not make something and send them a mail, and, some of these democrat mow parties have a live stream where you can watch them compose live. And it's awesome. Seeing your demos on the big screen and hearing the audience applaud and screen, it's like blowing your mind, do it. It's so cool. Here's a couple of web sites to get to know a bit more about the demo scene. Yeah. Just visit them you will ‑‑ the last one, it can take thick skin to take jokes there, so, again, thank you very much for having me. It's a pleasure (Applause). Edit transcript via pull request.