Möbius Transformations in a Tangle

By: on March 31, 2012

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:

  <div id="moebius">
    <span data-var="f1_r" class="TKAdjustableNumber" data-min="-2" data-max="2" data-step="0.0625"></span>

declaring the variable, its range and its resolution. The corresponding Tangle is then

  function setUpTangle() {
    var element = document.getElementById("moebius");

    var tangle = new Tangle(element, {
      initialize: function () {
        this.f1_r = 0;
        // Set up the other variables here in a similar fashion.
      update: function () {
        // this.f1_i and friends are set up just like f1_r
        var f1c = complex(this.f1_r, this.f1_i);
        var f3c = complex(this.f3_r, this.f3_i);
        var f4c = complex(this.f4_r, this.f4_i);

        // Do anything else we might want to do

        // Now that this.a_r is declared and initialised we can
        // now refer to a variable "a_r" within the HTML. this.a_r
        // represents the real component of the numerator's
        // z co-efficient:
        this.a_r = f4c[0];

We can now render our mutated “output” variables thusly:

Finally, let’s play!


Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>