Stacking property

,

This is an interactive short essay. I noticed an interesting stacking property of elements on a grid. I made some computer simulations to explore their behavior, followed by a discussion on interactive thinking tools.

Consider the following grid:

o o o x o
o o o y o
o o o o o
o o o o o

Let’s assume that:

Web designers will recognize the classic grid where new items are added at the start of the list. Now here’s what I find interesting: x will stay on top of y whenever we add a new item. In fact, all vertical stacking is conserved.

Here’s the grid after we add z:

z o o o x
o o o o y
o o o o o
o o o o o
o

Next we add 1:

1 z o o o
x o o o o
y o o o o
o o o o o
o o

Notice how x is still on top of y. And I bet that 1, x and y will remain vertically aligned as well. I find this remarkable! I noticed this behavior while I was adding new items on my homepage. I don’t have a proof for this, nor do I know of which general structure is this a property. This smells very mathy, and a generalization most certainly exists.

I’ll intentionally keep my naive perspective and explore this behavior with computer simulations.

Experiment 1

Let’s start with a grid of 5 x 10 elements, and color some of them black to display the letter A. What happens if we add a new element to the grid every given time?

Figure 1. Add one element to the grid every 80 milliseconds

Interesting! The letter A seems to move on an infinite Pacman-like grid while retaining its shape. Click “show” to see the new elements being added in grey. Note that previous elements get pushed out of the grid at the bottom.

Experiment 2

Now, could we move the shape A smoothly from top to bottom to get a scrolling effect? We could think of a shifting mechanism that would compensate for the lateral scrolling of the shape. But that would require additional logic to our setup. A simpler idea would be to play on the number of new elements we add at each step. Let’s try adding 5 new elements at each tick:

Figure 2. Add 5 elements to the grid every 80 milliseconds

There’s the scrolling effect! Notice that 5 is the width of the grid. We are effectively adding a new line at each step, which neatly shifts the shape the way we want.

But that is obvious. Yet, there is something intriguing that’s still puzzling me about the stability of the grid. What is it?

Experiment 3

Let’s unwrap the grid. Press “Unwrap” to lay out all elements over one contiguous line, then run experiments 1 & 2 on one dimension:

Figure 3. Display experiments 1 & 2 on one dimension

Oh! With this visual setup, we can see that:

I think this is what I find intriguing: when we move from a one dimensional line to a two dimensional grid, we can compose phenomenologically richer shapes, while still logically operating on a one dimensional infinite line.

Playground

We can try various behaviors on the grid below. Select a preset, or click any cell to toggle its color:

The grid is 14*14 elements, and we can specify the following:

The algorithm runs until the total amount of elements is added, then it removes all the added elements and goes back to the starting position.

Press “Play” to run. Press “Stop” to go back to the starting position. Press “Clear” to clear the grid.

Discussion

There are 2 aspects that these experiments make me think about.

1. Mathematics. While observing the spatial behavior of elements on a grid, I can see what keeps a mathematician awake: there is a mechanical necessity in the relations between the elements that begs to be resolved. We can feel that the behavior is not random, and that there must be a logical point of view from which the phenomenological results can be derived (phenomenologically means “how things appear”).

2. Thinking tools. Up until this point, I still don’t know which mathematical framework generalizes and captures the behavior I saw in the simulations. I wrote an algorithm and I ran a computer program with various parameters, which was fun, tedious (any programming is), and thought-provoking. But I still lack a deeper understanding of what is happening. This argument is developed by Evan Miller in a piece called Don’t Kill Math, in which he criticizes an article written by Bret Victor called Kill Math.

Evan Miller’s argument develops in two steps: 1) Bret Victor argues that mathematical writing and analytical symbolism are phenomenologically a poor medium, and therefore the richness of mathematical structures is reserved for a subset of population who have a weird knack for arcane notations. Bret Victor suggests that interactive computer simulations give a better discoverability and intuition of such structures. 2) Evan Miller then argues that computer simulations do not provide the deeper understanding that analytical forms do, because analytical forms distill the behavior into a pure and generalized form that tell us why and when such behavior is possible.

And indeed, playing with the simulations above is not enough to understand the system. Further creative thinking is required.

What would have a mathematician done? Maybe they would have setup different configurations to inform their own thinking, and guide them toward an analytical understanding of the system. A capable mathematician would do that, informed by a considerable knowledge and hooks that they have learned from experience.

What did I do with these computer simulations? I tried to make interesting animated sequences, because that’s what I love. My process was similar to what people do in computer graphics or in the demoscene world, where ingenious or serendipitous algorithms produce remarkable results. Even though we could compress a behavior into abstract logical rules, it doesn’t, in my view, capture nor describe the phenomenological experience we have of it. The latter is ultimately what matters the most to me.

The computer quite naturally turns the math back into phenomena. — Alan Kay

A lot of the value of computer simulations is in the setup. This setup is called the user interface. It includes the programming language, the environment it runs on, and how the output is displayed. The user interface both directs and mirrors the user’s thinking. We can go anywhere with computer simulations: we can use them to inform analytical thinking, to visualize an established body of knowledge, to produce an artistic result, or some combination of all of the above.

Links: