<canvas>. All effects are running in real time.
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.
<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.
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.
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.
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.
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 experiments
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.
- BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks.
- TERRA A voxel landscape rendered using a plasma in a valid 480bytes Atari bootsector. TERRA ranked #2 at Outline 2006
- OOMA The winning bootsector of Outline 2005, featuring two images zooming with experimental music in a valid 480bytes Atari bootsector.
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.