This is such a great introduction to SDFs – I’ve seen a lot of SDF posts that are basically “boolean operations are wild” and stop there. But I think this is the first one I’ve seen that walks through using a variety of operations to actually build up to a non-trivial non-abstract image. (I know there are some YouTube videos in that genre, but as an old person I appreciate being able to read this. And the interactiveness is so nice!)
Did you use ShapeUp or something similar to help compose this? I feel like this is the sort of work where “interactive editing” really helps.
If you haven’t seen it before, check out https://www.shadertoy.com/! People have done a lot of cool things with webgl, and you can click any of them to live-edit the code (in kind of the worst editor ever but what’re you gonna do).
This is such a great introduction to SDFs – I’ve seen a lot of SDF posts that are basically “boolean operations are wild” and stop there. But I think this is the first one I’ve seen that walks through using a variety of operations to actually build up to a non-trivial non-abstract image. (I know there are some YouTube videos in that genre, but as an old person I appreciate being able to read this. And the interactiveness is so nice!)
Did you use ShapeUp or something similar to help compose this? I feel like this is the sort of work where “interactive editing” really helps.
This is outstanding.
I think this is the JavaScript code that renders your code into a shader: https://danielchasehooper.com/js/inline_shader.045635d41daab899cd75ecede84b8ee51d86f2114f50d3dd60dc9abdf7ffca76745bb8bcf9de1d56dd1901d626a1dbec377b7215b7b576789c20ca2a6e061c72.js
Thank you!
It is, why do you mention it? Did you notice something wrong?
No, I was just furiously curious as to how it all worked!
Any chance you might post it on GitHub? I’d love to link people to it with a more stable URL.
Looks like it uses this new-to-me web API - https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext -
const gl = canvas.getContext("webgl2");Just noticed I said “your code into a shader” - by that I meant “renders user-provided code into a shader”.
Here’s a github gist: https://gist.github.com/danielchasehooper/72da5d9c286e5e94fdfb8e82bea288cc Let me know if you post about it or something!
Just wrote about it here https://simonwillison.net/2025/Feb/4/animating-rick-and-morty-one-pixel-at-a-time/
If you haven’t seen it before, check out https://www.shadertoy.com/! People have done a lot of cool things with webgl, and you can click any of them to live-edit the code (in kind of the worst editor ever but what’re you gonna do).
I had no idea this was possible and came here to ask the same thing. Thanks!
This is beyond impressive! Kudos!
[Comment removed by author]