We saw in a previous post a kind of transformation of complex values, a Möbius transformation. It turns out that we can decompose any Möbius transformation into a series of four separate transformations – a translation, an inversion, a dilation/rotation, and a final transformation. From a UX perspective, we saw that using input fields and a button to modify the transformation was not slick. Today we’re going to make things more slick.
The blogosphere/twitspace is all abuzz over Bret Victor’s recent demonstration Inventing on Principle. I’d come across Bret’s work through his Up and Down the Ladder of Abstraction active essay. (Bret calls these things “reactive documents”. The concept’s a lot older, of course, and Alan Kay would call these active essays. Given my personal history, I’ll also call them “active essays”.) One of the tricks that makes Ladders of Abstraction so engaging is the ability to, in real time, tweak the model under examination. I won’t pretend to have the taste that Bret shows, and will restrict myself to one tiny piece of the UX puzzle – TangleKit.
TangleKit exists for a single purpose: to allow the simple manipulation of one-dimensional input variables, and the chance to perform arbitrary calculations when those inputs change. The setup is simple: you have a
div within which your “active variables” (for want of a better term) are tangled together; you have some initialization function; you have some update function.
We have six variables in this demo, so let’s just confine ourselves to the real component of the first translation. The HTML looks like this:
declaring the variable, its range and its resolution. The corresponding Tangle is then
We can now render our mutated “output” variables thusly:
Finally, let’s play!