By femdev on Skatehive
Learn Creative Coding (#33) - Drawing Shapes with Signed Distance Functions Last episode we built the bridge between JavaScript and GLSL -- uniforms. Resolution, time, mouse position. The three values that make a shader alive. We set up a reusable template, made pulsing rings, interactive glows, a breathing background. Good foundations. But everything we drew was based on distance from a point. length(uv) gives you a circle. length(uv - mouse) gives you a circle around the mouse. And... that's kind of it? Rings, glows, gradients -- they're all variations of "how far from the center." If you want to draw a rectangle, a triangle, a star, a rounded box, a heart, literally anything that isn't a circle -- you need a different approach. That approach is signed distance functions. SDFs. And once you get them, shaders stop being "fancy gradient generators" and start being a legitimate drawing tool. You can build anything. What is a signed distance function? Here's the concept. For any point in