thisway.js is a new demoscene production by Stravaganza, released at the start of 2014. It’s a remake of a 1990s demo, and as such the effects have a more old school look to them. But it’s a beautiful collection of WebGL powered visuals and audio as you’d expect, and a faithful conversion and slight upgrade.

Coder kile explains the history behind the demo:

“It all started as a test to try the mrdoob‘s frameworks three.js and frame.js and see if I could make a demo with the freedom I had in c++ years ago.

“This way” was the Euskal Party 2002 winner demo created by the demo group Stravaganza. It was one of the first demos I saw live at a party and it was also in that party when I met the stravaganza team members.

Three years later I joined the group and my first production was a remake of the original demo, but this time in 64kb.

So as this demo it’s very special for me I thought it would be interesting to do again a remake but this time in webgl / js. I knew this would be harder than creating a demo from scratch: when you create a new demo on a new platform you could be tempted to use the effects you’re getting while experimenting without a clear predefined look.

However to make a remake I should find a way to recreate exactly the effects that once we did in c++/opengl.

I was sending screenshots to Reality3D ^ RGBA during the process and he proposed to try to give a slightly more modern air to each scene.

I didn’t want to create a whole new demo that was completely different from the original, but since the demo was created 12 years ago (ouch!) some scenes looks so simple now so I tried to “improve” them a bit (Sorry Tekno O:)). Reality3D’s help was very important to achieve an acceptable aesthetic. Besides changes to some materials, he also modified some of the meshes that Tekno did for the original demo.

Regarding javascript / webgl / three.js / frame.js experience I think it would be worth writing a blogpost about it. I must admit it has been fairly easy to start painting something on screen, but then it was quite frustrating at times with more complex stuff, not to mention my problems while using geometry exporter :\

I think it’s funny how different it’s the release process compared to oldstyle c++ demos. When I was programming in c++/64k I could have the code full of hacks, but you just needed to compile and pack the .exe and you were done. Now that all your code is exposed and you upload it usually to github and so on, you should care about how it looks. I’ve had to do refactoring from time to time and force myself to remove the hacks I was putting while testing new effects

As overall conclusion, I’m pretty happy with the result, it wasn’t as easy as I thought but I think it also looks much better that I initially expected.

I wanted this demo to be a little gift to the people who got me and kept me in this world of demoscene: Ithaqua, TeKnO, Wonder, Herotyc, Reality3D and Trace.”

View thisway.js (requires WebGL, also works in Chrome for Android) or vote for it on pouet.

The source code is available here on github.

20 years ago Sanity released the Interference dentro on the Amiga and blew pretty much everyone away. It had a fantastic combination of excellent graphics, a superb soundtrack by Virgill and some very technically advanced coding (and cheating!). It’s little wonder it’s rated so highly in the Amiga demoscene.

20 years later one of the original coders Joerg Messner (Microforce / Sanity) has decided to recode it all in JavaScript / Canvas. The code is kept purely to the Canvas API with no WebGL or shaders being used. It’s interesting that Joerg doesn’t consider it a true demo, because when you have no limitations there’s no real technical challenge left, it’s just down to design and art, which I can appreciate for sure – but even so some of the canvas effects he manages to pull off in Interference are still top-notch, even 20 years on.

Personally I find it fascinating how many old sceners are using the browser as a means to express themselves creatively these days, and having a lot of fun while doing it. Sites like We Are Back now hold upwards of 240 HTML5 demos and is constantly growing.

So kick it back old-skool for a moment and view Interference Recoded. Joerg recommends Chrome but it ran fine in Firefox 25+ for me, and even mostly runs in IE11 other than one small part.

For a while now Chrome has supported the ability to inject colours into your console.log output. I use this to good effect when debugging my games. For some reason I decided to try and output an ANSI art style logo into the console. The concept was simple: just display a blank space and change of colour for every ‘pixel’ of the logo. After a few tests I had a nice colourful logo appearing in my console.log output.

And then an idea hit me. A really stupid idea. The sort of idea you only get at 3am after a night of coffee fuelled coding. I thought “what would happen if I could render a demo screen into the console?”. After a few hours and much experimenting later I had a result I was happy to share with the wider world.

For want of a better name I’m calling it console.logtro. You need to use Chrome as to my knowledge no other browser supports multi-coloured console output yet. The way it works is incredibly simple: The demo effects are rendered to a super tiny 50×30 pixel sized canvas. This canvas is then scanned each update and the colours are pushed into a long string based array. Once the whole canvas has been scanned I clear the console and log the new output. The end result is you get to see what would have appeared in the canvas rendered to your console.

Chrome takes a long time to clear the console, and while this is happening it appears plain white. this means that if you set a quite high refresh rate the demo flickers insanely. To my knowledge there is no way around this. You can mitigate the effect by setting the background of the demo to white.

There was absolutely no sane reason for wanting to do this of course. I just felt compelled to bring a demo screen to somewhere it had never been seen before and quite frankly that’s all the reason I needed.

Watch console.logtro here

This piece from Mathieu ‘P01′ Henri is a 3D city crammed into a mere 256 frikkin’ bytes of JS.

Having seen Jerome Etienne’s procedural city tutorial, itself inspired by mrdoob’s threejs city generator, Mathieu figured he’d see how low he could go…

Pretty low as it turns out.

Read the accompanying overview, weep over the source, respect the art

[UPDATE] Mini district is based on Mathieu’s earlier 1K demo Minami District – also worth checking out!

MINI DISTRICT
Overview
Jerome’s procedural city tutorial
mrdoob’s city generator

Every year I look forward to seeing what new demos will be released at Assembly and this year was no exception. It was great to see JavaScript well represented at the event and even more so to see a JavaScript demo walk away with the 1st place award in the 4k demo category.

Highway 4k is a lovely 3D trip through a glowing, pulsating, fully timed to the music Tron like world. As two Tron bikes race each other they reflect the environment around them as the camera masterfully pans and sweeps across the scene.

As with most JavaScript demos they achieve the insanely small file size using a method of packing the entire demo into a PNG file which is decompressed at runtime. The app JSexe is still the current favourite for doing this, indeed we’ve featured it a number of times in CreativeJS before.

If you wish to run this demo then the requirements are very high. For a start it only works in Firefox 22 (Chrome constantly crashes as the PNG tries to decompress) and you’ll need to close down a couple of “Slow running script” warnings that occur as it precalcs everything. But once it does actually run it’s a visual feast for sure and a marvel of 4k engineering.

Download Highway 4k and view the comments on Pouet.

obsidian is a WebGL powered demo released at the Euskal demo party by xpslv (Mr. doob + trace). I’m going to cheat slightly and insert a lot of the text from the readme below because it’s quite fascinating reading and easy to overlook if all you do is watch the demo and skip looking at the source code.

“This time I challenged myself to see if I could do a demo with just my ARM Chromebook. Not being able to “launch” ChromeOS with the –allow-file-access-from-files flag made things a bit harder. That means that I couldn’t use textures or models. Luckily three.js nowadays have a fair amount of primitives to play with.”

“It was also a great excuse to improve frame.js, which is a sequencer and editor I started back in November. So, initially I wasn’t really planning to do anything for Euskal. But just as I arrived I learnt that Navis was going to release so, even if I only had 2 days until the deadline, I decided to go for it.”

“Some months ago I found this great track by Om Unit and Lorn and I kept it on my folder of potential demo tunes. I decided to use that one because it was the shortest in the folder, even if I was scared of “wasting” it by doing a crappy demo.”

“The process was like with “Or so they say…” once again. I had no idea what the demo was going to look like. So I started building the first scene aiming to get something that matched the tune’s mood. Took a while but in 3 or 4 hours I had the first part – that’s 13 seconds done, 227 to go. Then, somehow, I came up with the idea of the always changing sphere that suited this rhythmic sound in the tune – probably influenced by the intro of Masaaki Yuasa’s Kaiba. The tune also felt like something was travelling, so I went with the classic idea of making it travel through a tunnel. The process continued for the whole day until I called it a day. I had 2 minutes filled (until the end of the title part) and 2 more to fill the next day, so that was encouraging.”

“Initially my plan was to do random scenes and just sync them with the music – like most of demos are. But I seemed unable to do that, once I finished a scene I had to find a good way to follow it. As if I was forced to tell a story. I struggled a bit more the next day with what to do when the spheres collided. Actually, the idea of the colliding spheres came the second day, so I spent a long while improving what I had and running out of time for the last 2 minutes. Anyway, again, after I had the collision I guessed the obvious thing would be doing some sort of explosion. But I couldn’t stretch that idea for too long. Luckily then the idea for the city (another classic) came up and I wondered if I could stretch that part for a whole minute. Turns out it worked pretty well with the tension that tune has at that point.”

“I did most of the work at the hotel because the party place has become a meme-con and is impossible to do anything there. I was expecting the deadline for demos to be around 5pm on Saturday so I went to finish the demo at the party place. The deadline was at 12pm and they were pretty strict about it and I got disqualified (spain is different).”

“I finished in time for the demoshow and I got to enjoy it on the big screen. So did the 6,000 at the party place (even if they have no idea what this is all about. I also proved myself that I could do a demo with that laptop and I couldn’t stop to be amazed how this little device had pretty much the same power the big computer I used to carry around for parties 10 years ago had.”

Run obsidian in your browser (WebGL obviously required) or here’s a video if your browser can’t cope. Those curious can download the source code from github.

Elevated was originally released in 2009 at the Breakpoint demo party. Created by Rgba and TBC it took the viewer on a stunning trip around a beautiful mountain landscape, complete with music, rippling seas and lighting effects. All packed into a tiny 4k executable. A level of procedural generation that would make even Braben weep.

Fast forward to 2013 and the Japanese JavaScript gurus 301z have taken the PC original and converted it to just 28Kb worth of WebGL powered demo heaven. You’ll need Chrome or Firefox to view it with WebGL enabled, and it takes a while for it to calculate all of the textures, music and data at the beginning – but once done it’s a wonderful visual treat.

And if you can make head or tail of the JavaScript code, power to you

Watch Elevated in your browser at http://301.untergrund.net/elevated.html

There is also a 9Kb PNGinator version of the demo put together by gasmanic.

What’s the best way to kick off 2013? By emulating a 28 year old computer in your browser of course! SAE is the Scripted Amiga Emulator, an open source project created by Rupert Hausberger. His aim is ‘simply’ to make classic Amiga emulation possible in modern web browsers. And to that end he’s written an Amiga emulator in native JavaScript. Not a pre-compiled Java/C to JS hybrid, but basic JavaScript that anyone with the know-how can play with.

You do need a beast of a PC to run SAE at a decent frame rate right now. Naturally Chrome provides the best current experience with Firefox a close second. Don’t even think about trying it in a browser that doesn’t support WebGL, WebAudio, Typed Arrays and the FileReader API. So sorry IE and mobile browsers, hopefully your time will come.

But if your rig is capable then even this 0.7 release is quite something to behold. On its site you can pick and play from a range of games including classics such as Alien Breed, Another World, Blood Money, Pinball Dreams, Shadow of the Beast and Turrican 2. There are also demos to view and I personally enjoyed watching through a near faultless full-screen playback of Mental Hangover by Scoopex.

The biggest issues seem to be around audio right now, especially in the demos. The audio often distorts as the emulator struggles to maintain performance running at 100%. As a result some of the games appeared to work a lot better with audio disabled. Graphics use WebGL so thankfully the display size didn’t make a difference to performance at all, meaning I was able to run all the games in full-screen with no perceived loss of speed.

Quite frankly just getting any of this working at all is a magnificent achievement, even if it is confined to bleeding edge browsers for now. The source code is fascinating reading too. Cleanly broken down JS files open up to reveal a cornucopia of Commodore chip and instruction set design. The blitter js file alone is some 3000 lines of painstaking op code emulation. Hopefully more developers can get on board to help improve performance and compatibility.

Whatever comes of it SAE is testament to two things: First is that Rupert was capable of making JavaScript do this in the first place, and second is to the enduring and undying popularity of Commodores classic machine. If it’s possible to preserve it on the web  directly in your browser for future generations to experience, then that’s something worth celebrating the start of a New Year to.

Play with the Scripted Amiga Emulator or visit its github page.

If this article has perked your interest in the Commodore scene, both old and new, then you should check out Commodore Is Awesome for an endless supply of great news.

Microscopix was the winning demo entry at the TRSAC 2012 demo party held in Arhus, Denmark at the end of October 2012. Created by the recently re-formed group Litewerx  it’s a lovely combination of WebGL powered visuals smoothly synced to an ambient soundtrack. The scenes flow from what look like DNA strands, to blood cells to beautifully lit organisms, all supporting the ‘microscopic’ name. It’s short but well sequenced and relaxing to watch.

The demo launcher allows you to configure how you watch it, but it still needs a relatively decent spec machine to run. And as is usual for demos you really need to use Chrome or Firefox for performance.

After last years Anaemia demo it was great to see Litewerx return for a second helping of WebGL. I’m enjoying the way that web based technologies are becoming more and more common within the demo scene. It’s not that they allow coders to make better demos, but that the reality is that most developers are time-poor and struggle to balance their hobbies with real life, so it’s important for them to have as many means as possible to express their creativity and get it built fast. And if web technology allows for that then it’s surely a good thing.

View Microscopix here (WebGL required)

This CreativeJS post is a double-hit of retro demoscene nostalgia and the tools to make some yourself. NoNameNo have released a bundle of JS libs called codef which are specifically aimed at creating demoscene style effects. It uses a mash-up of three.js, flod for tracker playback and raw canvas blasting code to generate the effects in browser. Out of the box it has functions for such classics as vector balls, sine-waves, bitmap font scrollers, glenz vectors (faked of course), rasters, starfields and plenty more. There is also a basic sequencing system allowing you to chain effects together, or feed one into another. An examples folder provides plenty of source for you to get up to speed with and while the whole library certainly takes a very ‘hacked together’ approach, often flying in the face of any kind of web standard or best practise, it’s all just for fun anyway. Plus there’s something very rewarding about throwing a few lines of code together and seeing a large parallax scroll plane with some stars flying past.

The site We Are Back is then used to showcase the demos that get created with codef. They range from complete re-creations of classic intros and cracktros, such as those from the likes of Paradox and Crystal, to new demos inspired by the oldskool vibe. There are loads to watch and depending on your age they’ll either bring back waves of 16-bit nostalgia or be little more than audio-visual curios. The concept of such re-creations isn’t new of course and borrows heavily from the site Flashtro where they’ve been doing similar things for years. But it’s always nice to rekindle memories and maybe inspire a younger generation to have a go too.

This is not JavaScript for the faint of heart however. Zero tolerance is given to older web browsers or slow hardware. If your PC/Mac/browser can’t handle it then “tough luck” is their response (one I wish I could use in client work sometimes, but alas not!) Web Audio is used heavily and graphics are pushed around without mercy, expecting a GPU accelerated canvas to be present and do the heavy lifting. Forget about mobile too, you’ll receive a slightly unsubtle “warning” if you dare venture to the site from there.

There is of course some blissful irony that re-makes of demos that originally ran in just a few KB memory on 8Mhz hardware now require graphics cards with gigs of RAM But tech arrogance aside it’s still fascinating to see little pockets of creativity bubbling up like this. Demos and their kind may hail from a specific point in computing history, but for some reason their charm remains intact, much like the way 8-bit style games are still massively popular today.

If you’ve ever wanted to have a go at creating a demo then grab codef. Or if you just want to see what others have been making then trawl through wab.com – just be sure your kit is up to it first.