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!
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: