Repetition and iteration

Let’s say you want to call some block of code three times. Let’s say that block of code happens to rotate a rectangle. OK, well, here’s some code that runs if you click it:

rect.rotate(60);

Do it three times! (This is the real JavaScript, by the way, using the Raphael JavaScript vector graphics library.)

That’s the equivalent of

rect.rotate(60);
rect.rotate(60);
rect.rotate(60); 

except that we get to see a nice spinning effect. Now, this repetition of code — as it is, just hard-coded to repeat three times — could be captured in an iteration:

var i, n = 3;
for (i = 0; i < n; i++ ) {
  rect.rotate(60)
} 

This code effectively says: “Set i to 0 and n to 3. If i is less than n, rotate the rectangle, and increment i. Repeat the ‘if’.”

If we wanted to rotate four times, we'd just need to change n.

Slightly more complex iteration

Now we want a rotation that applies itself to a copy of the previously rotated rectangle. The magical function that does this (implementation to be described below) can be clicked here:

doSomethingMagical();

Again, let’s say three times is our goal. How would we implement this?

Hard-coded, it might look like this:

var rect1 = paper.rect(0, 0, 10, 10); // Make a rect
var rect2 = paper.rect(0, 0, 10, 10).rotate(60); // Make a rect and rotate 60
var rect3 = paper.rect(0, 0, 10, 10).rotate(120); // Make a rect and rotate 120 

Pretty ugly, and not very reusable. (What if we’d rather it be 30 degrees, not 40?) An iterative procedure would look like:

var i, n = 3,
    lastRect = paper.rect(0, 0, 10, 10),
    currentRect;

for (i = 0; i < n; i ++) {
  currentRect = lastRect.clone().rotate(60);
  lastRect = currentRect;
} 

To understand this, you need to know that clone makes a new object that has the attributes of its “master”, including rotation.

In English this iteration is something like (excluding the initial state of variables): “If i is less than n, make a clone of lastRect and rotate it by 60 degrees. Assign the variable lastRect to the new clone, increment i, and repeat.”

Note that the iteration works by updating the variable lastRect to point to whatever the last rectangle created was, so that, when it loops for the next time, it’s copying the new rectangle.

Higher-order functions

The idea of iteratively applying a transformation to a graphic — and by “iteratively” here I mean, as above, making copies as you go — isn’t really tied to whether that transformation is a rotation or a translation or whatever. Ideally, we could give a function (called “iterate” below) a base object, the number of times to apply an iteration, and the transformation function to run; e.g.

var rect = paper.rect(0, 0, 10, 10);
var fn = function (obj) { obj.translate(20, 0); };

iterate(rect, 3, fn); 

Which would give us:

JavaScript nicely lets us capture the transformation function as a variable (“fn” above) and pass it as an argument to another function. The fact that iterate accepts a function as an argument means it is a “higher-order” function: a function which either accepts a function as input or produces one as output.

So, what would the implementation of iterate look like?

var iterate = function(obj, n, fn) {
  if (!(n > 0)) {
    return;
  }
  newObj = obj.clone();
  fn(newObj);
  iterate(newObj, n - 1, fn);
};
      

It’s similar in many ways to the for loops above. In English: “Return if n is not greater than 0. Make a clone of obj, and call fn passing in the newly created clone as an argument. Then iterate with the new object, 1 less than n, and fn.”

Iterate calls itself repeatedly until n is 0, and each time it does it creates a new object, transforming it.

Symmetry functions

It’s possible, then, to describe symmetries of these vector objects with some ease in JavaScript, though certain kinds of operations are much more simply described as a procedure than others. Translating, like above, is easy. “Pivoting” objects around a point is more difficult: it requires tracking that point across function calls and determining its relation to the current object with some trig functions.

With a bit more effort, it’s possible to wrap the symmetries produced in a object that can, itself, iterate. For instance, let’s say we have the following peculiar shape, produced by the following code:

var r = paper.partOfAnElizabethanStrap();
      

Remember that r is the base Raphael object. Now we call iterate, but note this is a different iterate than the one above:

var r1 = r.iterate(1, function() {
  this.scale(-1, 1); // Reflect over y-axis
  this.translate(100, 0);
});
      

In this implementation of iterate I’m doing something special. It accepts a number of iterations to perform and a function as its arguments. The function is called in the context of the cloned objects, and so I apply the transformations to this. The result of iterate I put in a variable r1.

r1 is not the cloned object that’s been moved and reflected. It’s the group of both of those objects; the result of the iteration. And the iteration can itself be iterated, which lets us say:

r2 = r1.iterate(1, function() {
  this.rotateAround(180, 50, -45);
  this.translate(-50, 0);
});
      

This pivots and translates the symmetry group r1 as a whole. The “pivoting” is done by a method called rotateAround. The result, which is all four objects, is stored in r2. To finish:

r3 = r2.iterate(4, function() {
  this.translate(100, 0);
});
      

You can see my implementation of iterate at Github. (There’s also an implementation of rotateAround). Note that it’s very proof-of-concept and experimental now. There’s currently some bugs when using multiple calls to rotate and rotateAround over iterations. If only I knew my trig.