<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 projects
There are many experiments and projects like NEJA to discover other here.
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- COTTON CANDY First stab at webGL, in 1k between two nappy changes. It's glitchy and tiny but I quite like this puppy. It ranked #3 at DemoJS.
- TILT SHIFT A very fast & simple tilt-shift effect in Canvas.
- DEFENDER OF THE FAVICON The brilliant arcade game Defender now playable inside the favicon of your browser! The idea was to push the concept of generated favicons far and beyond and pack a thrilling retro shooter in 16×16 pixels.
- ASAHIKAWA Flyby the city of Asahikawa in 64 bytes.
- 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.