Descent

This is an entry for @sableRaph's weekly creative coding challenge. The theme for this week was "void," so I created a creepy loop inspired by horror games like Amnesia: The Dark Descent.

Depth of Field Blur

In a previous sketch, I used a method of blurring that only allowed objects to have uniform amounts of blur. For this sketch, I wanted a ladder to stretch up to infinity, so this constraint would not do.

Instead, I spent a lot of time working on a one-pass blur shader that operates on the whole canvas at once, reading depth information directly from the WebGL depth buffer. This is not something that easily fits into p5's WebGL pipeline, so I had to hack support into p5 for rendering to a framebuffer where I can get access to the depth buffer. If you are interested in the details of getting framebuffers working in p5 and the blur algorithm involved, I made a writeup of the process.

The final sketch renders in two passes:

1. Draw the un-blurred image to a framebuffer (the ladder is made of cylinders, and there is a big white sphere at the top instead of doing actual lighting)
2. Draw a blurred image to the main framebuffer using a shader which controls the amount of blur at each pixel by reading the depth from the previous framebuffer