PICO-8 has been my obsession for the last few months but math is my always obsession and lately I've been having a lot of fun playing around with various aspects of geometry so when I hit a weird bug in my other project I decided to take a break and shift gears a bit. So I threw together a little interface for working with 2D signed distance fields/functions.
It's fairly hefty at a little over 500 tokens so probably not super useful generally speaking but pretty fun to play with, if I do say so myself.
Here are a couple series of images I've created so far. In each, all of the images are made from the same SDF and just messing with how colours are assigned based on the distance.
![](/media/54967/moon.png)
That last one is my attempt at a ripply/watery reflection which, I think, didn't come out too badly.
And some hearts.
![](/media/54967/heartish.png)
If you're not familiar with them, SDFs are frequently used with a ray marching technique to render 3D scenes as a faster alternative to ray tracing. (See Inigo Quilez's work for some stunning examples of this in action. Or basically anything on shadertoy.) Anyway, ray marching is basically just a collision detection algorithm so, apart from making pretty pictures, an SDF can also double as actual level geometry.
In the cart below I took the same SDF that was used to generate the image and used it to turn the pool/fountain thing into a collide-able part of the scenery. (In fairness, I'm not actually using ray marching here I'm really just checking for when the distance goes from positive to negative. But you could do better/smarter things if you really wanted to.)
In this one I just threw together a bunch of random geometry. Move around with the arrow keys and press Z to cycle which distance field(s) are visible: none, interior, exterior, or both.
![](/gfx/set_like0.png)
![](/gfx/top_drop.png)
![](/media/54967/2_wave_0.gif)
It's a shame I can only render these things pixel-by-pixel because I think I could get some really interesting effects if it were possible to draw them faster. I grabbed screenshots of each frame and combined them into a gif to get an idea of what it would look like in real-time.
![](/media/54967/morph.gif)
[Please log in to post a comment]