While trying to read through my recent Instapaper articles, I was excited to come across Fabien Sanglard’s breakdown of Wolfenstein 3D’s FizzleFade function. It also reminded me to purchase his eBook, Game Engine Black Book: Wolfenstein 3D. Anyway, you should read the article; it’s short and explains the technique well.
After reading it, I wanted to recreate the C code in JavaScript. There’s not much more to it than that. See for yourself!
var screen = document.getElementById('screen');
var ctx = screen.getContext('2d');
function fizzle_pixel(x, y) {
setTimeout(function() {
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(x, y, 1, 1);
}, 10);
}
function fizzlefade() {
var randomValue = 1;
var x, y;
do {
// Y = low 8 bits
y = randomValue & 0x000FF;
// X = High 9 bits
x = (randomValue & 0x1FF00) >> 8;
// Get the output bit.
var leastSignificantBit = randomValue & 1;
// Shift register
randomValue >>= 1;
// If the output is 0, the xor can be skipped
if (leastSignificantBit !== 0) {
randomValue ^= 0x00012000;
}
// If x,y coordinate within the screen width/height, fizzle it!
if (x < 320 && y < 200) {
fizzle_pixel(x, y);
}
} while (randomValue != 1);
}
fizzlefade();
A live example of the code below.
Note: Mobile Safari is not liking the setTimeout, and instead jumps right to the end. Perhaps if I’d used requestAnimationFrame it would be more fluid.
If the above live example didn’t work, this gif ought to illustrate the effect:
