NEJA

670 words ~ 3-6 mins

My first JavaScript demo, presented at the Assembly 2005 where it ranked #4

This is my first full fledged demo in JavaScript. Moonove aka Djamm/Bomb composed the music for which I wrote a tiny player in 376 bytes of Flash. Everything else is made in JavaScript, without <canvas>. All effects are running in real time.

Techniques

Until now JavaScript demos were mostly made of sprite or big tables of changing colors. Neja, went beyond in two ways:

DOM techniques

Several DOM and CSS techniques to achieve demoscene effects and style.

Throughout the demo you can see dark and colorful overlays zooming out, obscuring and coloring the visuals underneath. The animated fractal tree is done with scaled animated sprites using the canvas technique from 3D TOMB II. Finally, the classic silhouette city is done using CSS border slants.

Magic

Until 2004-2005, colorful effects in JavaScript demos used a big <table> and changing the background-color of hundreds of <td> elements. While this worked, this was quite slow and very low resolution. Remember that this was years before the Canvas element was available across browsers, let alone ImageData.

Neja made a little breakthrough there by showcasing one of the holy grail of JavaScript circa 2004: real time image generation.

One year before Neja I devised a simple technique to generate images on the fly at a decent framerate.

At the time the most simple and cross browser image format was BMP 24bits and 8bits. It was fairly easy to build a BMP header, append an array of RGB values and generate a data:URI to use in an IMG element or as background.

Most effects in Neja are rendered to an internal RGB buffer and converted on the fly to a 24bits or 8bits BMP image.

Raytracing and raymarching

The 3D effects are raytraced. This allow to get perspective correct texture mapping. The last scene showing a world made of cubes, akin to Minecraft is raymarched using fixed steps. This could be significantly faster and more accurate using classic raycasting technique in 3D but I simply ran out of time as the deadline came close.

Textures and images

The textures in Neja are stored at full brightness. The different shades and levels of fog necessary for each effect are computed while the music is preloading.

Interactive effects

Both the water simulation and the 2D bump light follow the mouse cursor when the user starts to move it. The viewport of the demo is sized in em and can be resized by adjusting the font-size.

Feedback

This was my first time at the Assembly. That's quite quite an experience to see the demo I poured more than 3 months of work into on a massive PA to a mixed audience of over 4,000 demosceners and gamers.

Neja was one of the three JavaScript demos, competing against Flash and Java demos. At the time almost hardly anyone was taking JavaScript seriously as a demo platform. Neja took people by surprise with its style, textured 3D, shading, etc... and got a good round of applause during the competition.

Eventually Redbug by Shingebis aka Matthew 'Gasmanic' Westcott took a well deserved first place.

Neja missed the podium and only ranked #4. This was disapointing as I put a lot of efforts in this production and flew to Finland to enter the competition. However this step back fell a bit less sour as many people, much more talented than me, said it was their favorite entry

Of course you can find Neja on Pouet.net

Kudos to Redbug

The other production that impressed me in the competition was Redbug by Shingebis. I have always been fan of Matt's flair. His technique to draw arbitrary shapes in 3D with gouraud shading was nothing short of brilliant.

In a nutshell, for each scanline, an image featuring a gradient from black to full brightness and back to black is streched and cliped to match the lighting intensity and colour needed on both edges of the scanline. Simple and brilliant.


Other recent projects

There are many experiments and projects like NEJA to discover other here.


Let's talk

Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.