RE:FORM

Embedded Video

RE:FORM is a collaboration between me and Superogue (Marquee Design / Trepaan) made for Revision 2025, and it’s a 50 kb MicroW8 production.

Since I started playing around with MicroW8, I felt there was huge potential for making some late 90s style demos, with antialiased line effects and great pixel art. You could run them in the browser, and with today’s cpu power, it would also give new fun possibilities…

Project Timeline

Superogue and I started discussing and experimenting around this in July 2024. Early 2025 the pace increased, but much was still unclear. An important breakthrough was around late February when Superogue created the first draft of an RGB rendering framework and a bunch of raymarching scenes. MicroW8 only supports 256 colors, so in classic oldschool fashion he divided the palette into 4 ramps: R, G, B and Gray/Overlay. Over time, this also got optional scanline, filter, and mirror options that could be tweaked per scene.

Some initial pixel arrangement test, final version uses 2x2 RGBG Bayer

A few days later I made some successful tests using Micromod for music playback, so it seemed like a good approach to create a softsynth that is triggered by Micromod, and which also supports compressed samples. While I was looking into this, Superogue set up the main timeline, and edited a temporary music track, based on h0ffmans freerunner which he suggested had a good vibe/intensity. This was a bit stressful since I was struggling to just be able to export my very basic synth sounds to c source without compilation errors and sounding as intended. Also knowing I did not actually make a track in Fast Tracker II since the 90s. But it was great in the sense that Superogue could continue with the visuals, and have a sense of overall structure in place. After around 2 weeks I pivoted toward a vst solution instead, however, slowly realizing that would probably mean not finishing any demo for Revision, I backtrack and commit to Fast Tracker II.

Some days later (22 March), there is a first draft of some music and we also decide on the title RE:FORM. About a week later both logos are agreed on.

There is a lot of back and forth at all times, and during this time Superogue has been improving and switching in and out a lot of raymarched visuals. The break with the laser was one of the first scenes that stuck, but only as an idea, as it was later completely rewritten.

Two weeks before Revision, music is ca 80% done, and I start looking into tighter sync by using triggered notes. I found it harder than expected to apply sync to the existing raymarched scenes, I think this is partly because they already had interesting and complex movement. But there was also an issue with time jitter that was not solved until after the release.

Around this time I got the idea for the all-balls-touching scene, it also uses the Bayer filter, but it raytraces each subpixel individually making it very easy to throw in color dispersion. Caustic and shadow are entirely fake and just drawn as a part of the plane texture. I came up with a simple blur approx for stripes and checkers, this helps a lot with anti-alias for this scene. It is also used for some fake depth of field.

A new problem arised as this new scene looked too different, and I tried to adjust the colors to better match, but I guess it still sticks out a bit.

I really wanted some retro vectors in and a title animation seemed a good fit. For additive anti-aliased lines, I used Xiaolin Wu’s line algorithm (or close enough?) For polygons I just do watertight non-aa triangles, and then a separate pass of the aa-lines using max as blending function.

As always, last week was hectic, focus for me was mostly on the end part. For more intense sync, I needed more control and more of a timeline editing workflow, which I tried to achieve in C to the best of my abilities (and to the demise of code readability). But the changes also made it easy to do meta effects, that mix the different raymarching scenes in the same screen, which was fun…

Colors

One of the problems with using a Bayer arrangement with separate RGB ramps is that you lose a lot of brightness. Superogue had the great idea of using the Sweetie 16 palette to create the RGB ramps both to unify the look and as a subtle nod to TIC-80. There is a trade off, as you mix in other colors in the ramps, you gain brightness but lose saturation. We tweaked the amount of sweetie-16-ramps per scene.

The clipping also contributes to the look. Since half of the pixels are green, they have a larger intensity range, so as color ranges clip/max out, we allow it to tint slightly green (or yellow/orange depending on how much of the sweetie-16-ramps are used).

Raymarching

Superogue typically used two values (brightness / color) when raymarching, this both saves some cpu and helps making the look a bit more consistent. Some scenes (the intro tunnel, title background and the break with the laser) accumulates light inside the raymarching loop, giving a more glowy atmospheric style.

Realtime prototyping

Superogue used KodeLife for prototyping some visuals, and he also set up a shader-like C-api. But mostly he tweaked directly in microw8 because there was too big of a difference in visual output.

I did both the rasterizer and raytracer in js inside Mad Tea Lab. I then tried to coax LLMs into translating them into C for me, but yes, there is always painful debugging involved…

This is far from ideal, as when the code is in C, MicroW8 iteration times are much slower.

Notes on MicroW8 workflow