Problem Solving

Transition Effect Inspired by The Transformers and Harry Potter

Remember the scene under the Hoover Dam from the first Transformer movie? Bumblebee touched the corner of the Cube, and a myriad of little moving and folding cubes appeared on its surface as the colossal AllSpark quickly shrank in size. If you have not seen that movie, there was a similar scene in the first Harry Potter movie, where bricks shuffled around as a wall transformed into a gateway to Diagon Alley. Cool, innit?

I was really tempted to program a similar effect as a transition from one image to another. But I only had a rough idea of what it might look like, but not a clue about its underlying rules.

Below is the result, followed by the explanation of how I made it.

Problem 1 - Specifying a Fuzzy Problem:

I wanted a state of chaos with a lot of tiles moving asynchronously. To specify a programmable logic, I zoomed in, starting with the most basic building block: defining behavioral rules for a single tile. Then, I built up the complexity gradually adding new rules, each expanded on the previous rule, until the system was complete. Doing so helped keeping the logic cohesive.

In a nutshell, the first image is made up of a grid of tiles which will move around to eventually reveal the second image.

Rules concerning tile behaviors:

  1. There are two actions a tile can take: sliding to an adjacent tile position, or flipping at its current position.

  2. A tile randomly picks whether to slide or flip, but sliding is preferred when possible.

  3. Sliding direction is randomly picked among up, down, left, and right.

  4. Flipping direction is randomly picked between vertical or horizontal.

  5. When a tile slides away, a bit of the second image will be revealed at that position.

  6. When a tile flips, the backside will be from the second image.

  7. No action can start from a position where the second image has been revealed.

  8. No tile can slide towards a position where the second image has been revealed.

  9. No tile can slide towards a position that is occupied by an on-going action.

 A: First image. B: Second image.

A: First image. B: Second image.

Rules concerning video sequence:

  1. Both actions, sliding and flipping, take 10 frames to complete.

  2. Tiles start their actions in rounds. Within the same round, a group of tiles start and end their actions at the same time.

  3. The interval between kicking off each new round is 5 frames, so that the next group of tiles will start to move before the previous group finishes.

  4. In each round, the tiles are randomly selected from positions where the second image has yet been revealed.

  5. The number of tiles selected for each round increases quickly over time, stays on the peak for a short while, and then decreases again. (E.g., in the beginning, 2 tiles start to take actions at the same time, then 4, then 8, then 16, ....)

Derivative rules (based on combinations of previous rules):

  1. Once an action has initiated from a tile position, that position becomes permanently locked.

  2. During a sliding action, the target position becomes temporarily locked for 10 frames.

  3. There is no limit imposed on how many times a tile can slide, but it can only flip once.

Problem 2 - Turning the Rules into an Algorithm:

The complexity of the rules was the initial obstacle. But the entry point to the solution was not the rules, but what the algorithm needed to accomplish.

The overall objective is to paint a sequence of frames. The objective can be subdivided into four tasks.

  1. Select the tiles that will take actions.

  2. Check permissible actions and make a choice.

  3. Update frames.

  4. Update resources (tile data, grid data, etc.).

Preparation: Both first and the second image are pre-divided into tiles. A three-dimensional (tile column index, tile row index, frame number) Boolean array tracks whether certain tile position is currently locked.

Task 1: Every 5 frames, a round begins. A group of tiles are selected from positions that are not locked on the current frame. The number of tiles selected depends on the round index.

Task 2: A tile randomly chooses to slide or flip, but the former has a higher probability. If it decides to slide, it cannot slide to a locked adjacent position. If all four neighbors are locked, it must flip instead. After applying restrictions and randomization, the action type and direction are picked.

Task 3: Based a tile’s action, update the graphics of the affected area on the next 10 frames.

Task 4: Update the position of a tile that has moved. Clear a tile’s data if it has flipped, or if another tile has moved on top of it. Update the Boolean array to lock a position for either all subsequent frames (if an action is starting from this position), or for the next 10 frames (if another tile is sliding to this position).

These tasks loop until all the frames are finalized.

Mai Ao