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.
FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
WOLFENSTEINY An homage to Wolfenstein 3D in 251 bytes of HTML5 on October 15th, 2013
TV NOISE Fall 2011, another meme struck Pouet.net. TV NOISE. Over the course of a few weeks, every single platform went psssh. There you go open web platform: TV noise in 128 bytes. on November 13th, 2011
ASAHIKAWA Flyby the city of Asahikawa in 64 bytes. on January 21st, 2007
TERRA A voxel landscape rendered using a plasma in a valid 480bytes Atari bootsector. TERRA ranked #2 at Outline 2006 on June 6th, 2006
OOMA The winning bootsector of Outline 2005, featuring two images zooming with experimental music in a valid 480bytes Atari bootsector. on March 30th, 2005
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.