Cracked on 03/27/93 by Paradox

Tweet

spacer

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 spacer 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.

This entry was posted in Demoscene and tagged canvas, codef, cracktro, demo, intro, Web Audio by Richard Davey. (permalink). on Posted on by Richard Davey.
spacer

About Richard Davey

Richard (@photonstorm) is a full-time HTML5 game developer at Photon Storm. Gaming and the demo scene have been a passion of his since the 8-bit era, and he's extremely excited at seeing both of these charging into modern web technology. According to his wife he also collects an obsessive amount of retro gaming magazines, but he would claim they're just for research.

5 thoughts on “Cracked on 03/27/93 by Paradox

  1. spacer NoNameNo on said:

    Big Thanx for your nice feedback about CODEF spacer

    Reply
  2. spacer NoNameNo on said:

    BTW the BIG difference with flashtro website is that with wab you can : “Right Clic -> View Sources” to share and learn tricks spacer

    Reply
  3. Pingback: La demoscene est de retour en Javascript ! | Korben

  4. Pingback: La demoscene est de retour en Javascript !

  5. Pingback: La demoscene est de retour en Javascript ! - Le magazine des radioamateurs francophones

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a class="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>