SDF stands for Signed Distance Function - a function which returns shortest distance between given input point and some surface. Sign of returned value indicates if point is inside, or outside that surface. Complex scenes can be defined in terms of SDFs and calculated using raymarching.
One of nicest properties of SDFs is ease of manipulating shapes with constructive solid geometry (CSG): intersection, union and difference can be represented as simple operations on distances from two surfaces: example of CSG operations with SDF-UI
For more explanation on SDFs visit:
You can read more about process behind making this project on the blog: building SDF-UI.
You can play with live version here: https://sdf-ui.firebaseapp.com/, it's good idea to open HELP if you are visiting for the first time.
Code is open sourced and available with MIT license here: szymonkaliski/SDF-UI.
This project was simpler than January's SDF-UI, and took 6 hours less to make (totaling in almost 24 hours of development time). There was a lot to figure out, and I ended up learning about webworkers, and implementing my first evolutionary algorithm after I finished college.
I've already built a few node-based UIs and I seem to quite like them (if you're curious about previous ones, you can read the intro to SDF-UI blogpost).
Next step was designing, and 3d-printing the case, since the boards were only connected by wires, the whole structure felt very fragile. As the case was a simple rectangle with holes for buttons and screws, I thought it would make sense to design it in code. I already played a with CSG (constructive solid geometry), some time ago while exploring thi.ng clojure libraries, and later while building SDF-UI.