Victor's Pictures | Tile Rotation App

Tile Rotation

 


 

The available tile designs are:

  • Arrows (tiles must touch on the same side of the arrow, i.e., left side of the arrow on one tile must touch the left side of the arrow on the neighbor tile) 
  • Arrows (tiles must touch head to head or tail to tail)
  • Gradient
  • Diagonal Gradient (tiles must touch with same color)
  • Diagonal Gradient with arcs (tiles must touch with same color causing arcs to line up into circles)
  • Male/Female symbols (male points to male and female points to female)
  • Wavy line with pink and blue (colors align with like colors
  • Basic pattern has a diagonal line. Color is dark on one side of line and light on other side. Tiles must touch with like colors. 
 

Phase 1

When the app first starts out, a rectangular area of the screen will be laid out with random tiles. 

All tiles on the board have the same design, but the orientation of the tiles is random. Here are some screen shots showing the available tile designs. The user can select the tile design by doing a long press. A long press changes to the next design and randomizes the board. For learning how the app works, it is suggested to use the last design shown. That design will be used in the rest of this document.

Here the last design, above, was selected by the user and tiles rotated. A tile is rotated clockwise by tapping it once.

A tile is rotated counterclockwise by double-tapping it.

Tiles surrounded above, below, and on each side by other tiles that touch with the same color are black and white. All other tiles have a red mask added. Any tile with a red mask is considered not to be in a completed state. It's possible that rotating that tile fixes the problem. However, more likely, the surrounding tiles must be rotated.

The board is also technically a torus: the top row connects to the bottom row, and the left column connects to the right column. Consider the second tile from the left on the trop row, for example. Let's name this tile (2,1), for 2 to the right, 1 down from the top. It abuts to (1,1) on the left, and where the two tiles meet, they are both light. It also abuts to (2,2), below, and where they meet, they are both light also. It abuts to (3,1) to the right, joining with dark. But there's one more side. The top of (2,1) abuts the bottom of (2,10) on the bottom row. The top of (2,1) is dark. The bottom of (2,10) is light, so they don't line up. Tile (2,1) consequently has a red mask added to it.

Consider, now, tile (3,2). It abuts (3,1) using the dark color, (4,2) using the light color, (3,3) using the light color, and (2,2) using the dark color, so the red mask is removed. Tile (3,2) is considered to be complete.

The board has been manipulated so that all tiles on the second row are touching all four of each of their neighbors using the same color. So none of them has a red mask.

The user's task is to rotate all other necessary tiles until all tiles touch using the same color. Following shows a progression of how this occurs. Note how the red mask is removed when tiles are completed.

When all tiles are touching their neighbors using the same color, the app moves into the next phase.

Phase 2

In Phase 2, when a tile is rotated, all tiles touching it, and tiles touching them, are rotated together in order that they stay touching with like colors. More than likely, some of the tiles will have a yellow mask. What is the yellow mask? When the app first starts, it calculates a random solution. The yellow mask is displayed on tiles that don't match the solution. The user must rotate tiles until there are no yellow masks.

Here is a sample sequence of what it might look like as the user rotates a whole row or column at a time. When all the yellow masks are removed by rotating the tiles appropriately, the game is considered complete, and the calculated score is logged in the Game Center. There are separate leaderboards for each tile design.

Phase 3

To enter phase 3, first get to Phase 2. Then do a long press. This is a kludgy way to enter this mode. The next version of the app will start out in Phase 3, possibly having the ability to start out in phase 1. Multi-user version of the app will use only phase 3.
 
Phase 3 currently is designed to allow testers to experiment with the rules of the board game. Following is a description of a sample set of rules. When phase 3 starts out, there are no masks over the tiles. There is a blank black stone, and a blank white stone that appear at the top of the screen, just above the board. The idea is that there are two players. One player moves white stones. The other moves black stones.
 
The first player can move either black or white, and can move it anywhere on the board. White stones automatically move to the white end of the tile. Black stones move to the black end of the tile. When a stone is placed, a mask is placed on the tiles adjacent to the tile the stone was placed on. The next player may not place his stone on any tile with a mask.
 
From here on, the app enforces alternating turns. When it's a player's turn, he may move a new stone onto the board, providing it is placed on a tile without a mask, OR he may move an existing stone. Currently, there are no edits to what stones can be moved. So a player can move his own stone or a stone of his opponent. Furthermore, stones may be moved to the trash can, which deletes them. This feature was added for testers who wish to test rules that involve captures.
 
Masks are added to the tiles surrounding the last two stones played. Note that in the third image, three tiles on the extreme right have masks. This is because since the board is a torus, those tiles are considered neighbors of the black stone's tile.
 
In the fourth image, masks added in the second image have been removed. Masks remain for two turns. 
 
At the bottom of the screen is a scoreboard. B indicates the score for black. W indicates the score for white. Scores are computed for stones that are on adjacent tiles connected by the same color. Strings of such connected tiles can be formed. The longer the string, the higher the score.
 
When there are only nine remaining tiles without a stone, no more masks are added, and users may place remaining stones on any tile where there is not already a stone.
 
When all tiles contain a stone, each player rotates the tiles to obtain a maximum possible score. The second to last image shows the tiles arranged by white for a high score. The last image shows the same tiles rotated for a high black score.
 
For this version of the app, it is suggested that each player be allowed to rotate tiles at will until they are satisfied that they maximized their score.
 
In the eventual multi-user version, each player will be using a different device. Stones will be arranged the same way on each device, but each player controls their own rotation. Thus each player may show a different board.

Just one final note about the tile designs. They're just different faces on the same tiles. The app logic remains the same. Here they are all together with the same orientation.

This is the basic face - black on one side, white on the other with a boundary from one corner to the opposite corner. Adjoining tiles must meet at the same color, i.e., black touches black at an edge and white touches white.
The first arrow design points along the edge of the basic tile. Left of the arrow corresponds to black on the basic tile. Right of the arrow corresponds to white on the tile. So, to solve the puzzle with this arrow design, keep the left sides of tiles touching each other and the right sides also touching right sides.
The other arrow design is perpendicular to the first arrow design. It can be distinguished by the quarter circle at the tail end. For this design, the circle end corresponds to the black of the basic tile, and the arrowhead corresponds to the white corner of the basic tile. So tiles that join should either share arrowheads or tails for a match.
This pattern is just a gradient, with green replacing black on the basic tile and red replacing white. The blue in the center helps to visualize diagonal patterns.
This pattern is simply the previous pattern with quarter circles added for a visual effect.
Here pink replaces black, and blue replaces white. These are meant to be the gender symbols. Pink and blue are the stereotype gender colors. Yellow is in the middle as a gender neutral color. Females align with females. Males with males.

The differences in this design are that the pink and blue portions are shifted away from the corners. The purpose of this is to present a better alignment for a different visual effect. Meanwhile, the quarter circles line up at the center of the edges to form a continuous wavy line.

Pink lines up with pink, and blue lines up with blue.

Finally, this gradient pattern is not aligned diagonally but vertically. A solid green edge can align with a solid green edged of a neighbor tile, or a solid red edge can align with the solid red edge on a neighbor tile.

Also, green can align with a gradient from green to red going clockwise. Solid red can align with red to green going clockwise.

Here is a sampling of tiles where the center tile is touched on all four sides by the appropriate edge of its neighbor tiles.

 

Color must match on adjoining edges (red mask does not matter)

The center tile and top tile meet on black edges. Note the top tile could rotate 90 degrees clockwise and still satisfy this condition.

The center tile and right tile meet on white edges.

The center tile and bottom tile meet on white edges.

The center tile and left tile meet on black edges.

 

Tiles must touch on the same SIDE of their respective arrows.

The left of the center arrow touches the left of the top arrow.

The right of the center arrow touches the right of the right arrow.

The right of the center arrow touches the right of the bottom arrow.

The left of the center arrow touches the left of the left arrow.

 

This is just perpendicular to the previous design. Adjoining tiles must meet on the same END of their respective arrows.

The center tile and top tile meet on an edge that intersects the tail of the arrow.

The center tile and the right tile meet on an edge that intersects the head of the arrow.

The center tile and the bottom tile meet on an edge that intersects the head of the arrow.

The center tile and the left tile meet on an edge that intersects the tail of the arrow.

Color must match on adjoining edges (red mask does not matter)

The center tile and top tile meet on green edges.

The center tile and right tile meet on red edges.

The center tile and bottom tile meet on red edges.

The center tile and left tile meet on green edges.

 

Color must match on adjoining edges (red mask does not matter)

The center tile and top tile meet on green edges.

The center tile and right tile meet on red edges.

The center tile and bottom tile meet on red edges.

The center tile and left tile meet on green edges.

Color must match on adjoining edges (red mask does not matter)

The center tile and top tile meet on pink edges.

The center tile and right tile meet on blue edges.

The center tile and bottom tile meet on blue edges.

The center tile and left tile meet on pink edges.

 

Non-yellow color of adjoining edges must match.

The center tile and top tile meet with an edge containing pink.

The center tile and right tile meet with an edge containing blue.

The center tile and bottom tile meet with an edge containing blue.

The center tile and left tile meet with an edge containing pink.

 

This design is a little different because the edges that can line up are either the same color, where the edge is a constant color along its length or the color if the leading edge (going clockwise around the tile).

The top edge of the center tile, looking clockwise starts green and turns to red. So it needs to join the top tile at either the top tile's green edge, or the edge that starts green, again clockwise relative to the top tile.

The right edge of the center tile is red, so the edge of the right tile next to it must be red or the starting edge going clockwise must be red.

The bottom edge of the center tile starts red, going clockwise on the center square, so it must join the bottom square at a red edge or an edge that starts red, going clockwise around the bottom tile.

The left edge of the center tile is green, so the left tile must touch it at an edge that is green or starts green, going clockwise around the left tile.