When I first started playing with Javascript in the 90s I used it almost exclusively for onMouseOver and onMouseOut events for a clickable pseudo-3d button or image on my first webpages. I also used Javascript with image-maps, onClick events, or to validate input before a form was submitted. But that was about it. In the end I had a small collection of functions, but most of the time, the Javascript code was really just embedded inside the HTML markup, far from any structure or being readable or reusable.

Eventually I began to use Javascript for more extensive tasks. The inline Javascript disappeared and instead of replacing images I now worked with stylesheets and the document object model. I also organized Javascript code in dedicated Javascript files and attempted to make the code as reusable as possible. Some examples included a tree-menu that was populated with values from a database. That was actually before Ajax became a buzz-word and common practice. I had to use several tricks to transport data. On the server side I created a function that initialized a few data exchange variables…somewhat resembling JSON. With other tricks I managed to load more data dynamically, just in time, as you expanded the tree-menu. At that time it was quite an undertaking because Internet Explorer and Netscape/Mozilla had much more issues with each other than today. Although Internet Explorer still doesn’t behave as it should, web development has become much easier nowadays.

Impressed by what could be done with Javascript I once wrote a client-/server chess-game in I think late 1999, using Javascript, PHP and HTML. The Javascript functions would validate a move before it was sent to the server. The exchange of moves as well as (semi-)instant messages between the two players were handled by an invisible frame that was refreshed automatically in a certain interval. This chess program was nothing but a challenge to see if I could do that with nothing but Javascript, PHP and HTML. It all worked well and looked nice, but it really still was nothing but a bunch of Javascript functions.

In the beginning of the new millenium I found that you could actually create much more complex applications with Javascript. By sticking to some conventions and using the concept of prototypes you were able to use Javascript almost like other object-oriented languages. Instead of collecting a bunch of functions that would float around in a text file, you could organize and use them as real objects with real properties and methods. When I discovered this I couldn’t believe that I never used Javascript that way before.

I immediately had that vision to create a framework of reusable components and plugins that follow the same conventions on both the server-side with PHP (at that time it was still PHP4) and the client-side with Javascript. That was the my era of making Javascript go “Enterprise” :) The support of Javascript in IE vs Mozilla was not so much an issue anymore, and I could make the code work on both platforms without tearing my hair out. Not only could I create a neat software architecture in Javascript, but also take advantage of all the events available including key-strokes without getting a problem with code becoming impossible to read or maintain.

I worked many months–in fact closer to two years–on this idea and framework, but I wasn’t the only one. Other companies were faster and published a series of new technologies that were much better and more powerful than my silly unfinished solution. A good part of my own code became somewhat obsolete after learning about JSON and libraries like Prototype and Script.aculo.us. With the new PHP5 release many of my semi-object-oriented workarounds became obsolete. There also was Microsoft who brought their .Net platform onto the market. And Google who began to offer rich and excellent web-applications like Gmail or Google Maps, and released packages like the Google Web Toolkit for developers. I figured it wouldn’t make sense to continue to work with an idea that soon would become completely obsolete with the new wave of technologies. So I dropped the idea of the Javascript/PHP “Enterprise” framework and worked on some smaller Javascript files to explore the power of Javascript as a “real” programming language instead.

I tried to take some of the old game and demo source codes in C and C++ and rewrite them in Javascript. I thought it would be fun to have some nice animations in two or three dimensions. By adding some interaction there was the potential to create some nice Javascript based games. I moved forward well, but the output became a problem. I tried to simulate a virtual “Javascript-screen” and render pixels found in a Javascript screen buffer, but it was way, way too slow. It worked for a static image, but you couldn’t use that for animations at all. Eventually I gave up and focused on Ajax and Java instead… and then I had to put more time into paid graphic design jobs than programming, which I always found much more interesting and fun, but didn’t pay the bills.

A few months ago I discovered how Lee Semel solved the display problem with his version of the old first-person shooter Wolfenstein in Javascript. Size: only 5K! As a “display” he creates XBM images, a monochrome image format that unlike other binary image formats is actually a C-style ASCII text format that can dynamically created with Javascript. I found this solution very impressive, and especially its small size. Unfortunately, this format is not supported by IE or Windows anymore.

But wait, it gets even better. Just recently I discovered Nihilogic, a blog with a focus on Javascript. There you can find Javascript versions of Super Mario Kart (11K), Wolfenstein 3D, 3D Chess, Super Mario (14k) in color! He has a 3D-renderer, a 3D Particle Generator or tools to manipulate images in Javascript. This is just amazing, far beyond anything I dreamed of in my Javascript days.

Instead of XBM images he uses the canvas element that is part of HTML5 and supported by both Opera and Mozilla. Not surprisingly, IE doesn’t support canvas (it doesn’t even support SVG), but there are solutions like ExplorerCanvas to bring the same functionality to IE.

I’m truly impressed by what can be done with a scripting language that essentially started as a simple onMouseOver event. I think I should take some time and play with the possibilities of the new canvas element. Of course SVG and Flash/ActionScript, and Java are good and valid candidates for user interfaces still… but Javascript presents a fun challenge, and it doesn’t require any large frameworks or third party plugins.

The demos have all been very impressive again. Some explored different ideas than the usual animations and particle- or plasma-effects in 3D. Instead they were designed around two-dimensional, scissor-cut, flower, comic-book-like or retro-Commodore 64/Amiga-looking elements.

I’m attaching a few of my favorites below with video and a link for further details and download. Demos and intros should really be experienced in real-time. These video clips can only reflect a tiny fraction of the whole experience. A complete list of the Breakpoint 2008 entries can be found here.

Masagin by Farbrausch & Neuro [download/details]

Metamorphosis by ASD [download/details]

theBeauty by einklang.net [download/details]

Challenger Deep by Traction and Brainstorm [download/details]

64k: Invoke by Still and Conspiracy [download/details]

4k: Atrium by TBC and Loonies [download/details]

[Four kilobytes? How is that possible?]

4k: h4vok by Archee [download/details]

[Again: 4 kilobytes? I'm just speechless...]

For those who haven’t heard anything about demos and its scene yet, here is a brief history: It all started in the old days of home computers like Commodore 64 or Amiga, back when we used to share floppy disks and cassette tapes with our favorite games. Just like today, companies tried to stop people from sharing their favorites and invented one clever copy protection method after another. But soon somebody would find a way to crack it, proudly add a little signature to the cracked game and share it with his friends. Eventually people got together in groups and started to create breathtaking animated intros with superb music. It not only was a way to make themselves known, greet friends and show off their artistic or coding skills, it sometimes also sweetened the long time some games would take to load, especially from cassette tapes. And sometimes the animated intro would even become more impressive than the game itself.

Eventually groups started to compete against each other. Their little works of coding-art soon attracted a lot of fans, and the demo-parties were born. I was a huge fan myself…the old intros inspired me to learn assembly language on the Commodore 64, and write my first programs with a graphical user interface and a mouse-pointer you could control with the joystick. My old C64 applications were in no way as impressive as what the demo-groups produced, but they were what fired my interest in programming early on and became quite a passion in my early pc-days.

For many years the demo-scene’s preferred platforms were C64 and Amiga computers and it took much longer to find its way into the ibm-pc arena. Although personal computers had a much faster CPU and more memory available than a C64, it just wasn’t the right platform for demos. The hardware wasn’t suited for extensive and fast animations with graphics and sound. The sound cards for office computers were poor and people often had monochrome monitors before the first small color displays became affordable. There also was a gap between the average office user and the gaming-community.

This changed later when Soundblaster and especially the Gravis Ultrasound added superior sound to the old office computer. Sound, better and more colorful graphics paved the way for games, demos and music-software on the ibm-platform. And with better hardware the user-community began to merge and drive the multimedia capacities forward.

One popular way to create music on the ibm-computer actually originated from the Amiga world: The MOD sound format was a bit of a mix between midi-files and wave-audio. It allowed you to define wave-samples and play them as instruments in a tracker-table. These files were perfect for demo-soundtracks because they were almost as small as midi, but sounded as great as fully recorded wave-tracks. The Finland based demo-group Future Crew created Scream Tracker, at that time one of the best tools to create MOD and S3M files with up to 32 channels.

The Future Crew was probably the most prominent demo group in the early 90s. What they created with their demos Unreal and Second Reality just blew me away. Every year, Future Crew and other demo groups presented their demos at international competitions like the Assembly in Finland, The Party in Denmark and other events around. The competitions took place in several disciplines: C64, Amiga or PC, music, graphics/art, 4k intros, 64k intros and larger sized demos. The goal was and is simple: To push the limits and achieve the most impressive results possible with the hardware available. While limits are not so much given with the existing hardware nowadays, the files have to be as small as possible. But even today, hardware can matter on devices like cell-phones or Gameboy Advance.

To save space, graphics, effects and animations are not rendered into huge video-files—they are calculated live during runtime. Demos are a wonderful artistic mix of coding skill, algorithms, mathematics, physics , and 3d-graphic principles on the one side, and art, story, drama, cinematography, choreography, lights, music and sound effects on the other. They show what a computer is really capable of—something that often falls into oblivion after days of word processing, web-browsing or dealing with business applications.

After several years of working real jobs, studying, web and the “serious” code I lost touch with the demo-scene and I had no idea that it indeed continued to live on and evolve in all these years. Perhaps I didn’t think they could become even more impressive than back in the 90s. How wrong I was…

When I read that article yesterday I got curious and wanted to see what the demo scene is like today. I downloaded a few demos, and… When I started the first demo I got goosebumps all over and had tears in my eyes. What I saw there was truly unbelievable… really breathtaking! I can’t believe my old heart can still get as excited as 15 years ago. I think I have to start programming for fun again!

The following are a few examples of what they are like today. I’m not sure if this is your cup of tea, or if there are better demos out there, but I’m very impressed and think they deserve all respect.

fr-041: debris, by farbrausch, download 177k
What you get to see and hear for only 177 kilobyte is just unbelievable. It doesn’t surprise me it made the first place in the pc-demo category. The camera work including the hand-camera effects are beautiful, the scenery and animation very well done. I really liked the sound, too. There are just a few minor things that I felt offered room for improvement, but hey, it’s only 177k! It’s smaller than this blog-post!

Fairytale, by Traction and Brainstorm, download 8,620k
This is much larger than debris above, but not any less impressive. It is an extremely beautiful demo with a great score that reminded me a bit of Porcupine Tree. I loved the aesthetics, animation and play with lights and curves, all very fluent and harmonic. Brilliant!

Above, by lkcc and Bauknecht, download 9,282k
Aithein, by mfx, download 16,905kb
I love the vintage and organic look, feel and sound of this demo. It was a bit of a Boards of Canada experience. Very nice!

Threespace, by Rebels, download 591kb (64k pc-intro and demos for mac & linux)

The Prophecy – Project Nemesis by Conspiracy, download 86kb
I saved the best for last and humbly bow before The Prophecy…I cannot believe that this demo is really only 64k! Armageddon filmed in 65,024 bytes? It is pure magic. How did they do it? I have done a bit of programming in the past, in two or three dimensions, with audio, in different languages, but this exceeds my wildest imagination. Landscapes, objects, buildings, music, animation, choreography, special effects, textures, credits…all this coded into a single file of 64k? I really would love to see a “making-of”. Check out the screenshots or watch the video clip below, or even better: download and start the intro. The live-demos look much better than youtube or google-videos.