Phosphene is a truchet tile board with a selection of tile shapes, colors, and board sizes from 4×4 to 32×32. The image below is a screenshot; please visit the link for the live program.
Instructions: I hope the interface is visually self-explanatory, but exploring by clicking is safe (reload the page to reset everything), and the program page has instructions at the bottom. To supplement these: Click a board tile to rotate it one-quarter turn. Use the buttons at lower left to rotate groups of tiles in rows, columns, or checker patterns, or to toggle-swap the sets of tiles rotated by each button. The remaining buttons just below the board select the behavior of clicking (counterclockwise quarter-turn, half-turn, clockwise quarter turn); reset the board and randomly scramble the board; toggle the preferences (heart) and the instructions (question mark).
Preferences: Nine tile shapes, eight colors, and six board sizes are available, as shown.
About the Math: Phosphene has a geometric aspect and an algebraic aspect.
Geometrically, each tile has the same shape. Nonetheless, by rotating tiles (even in regular groups with the buttons), possibly-surprising board patterns are created. In principle, it is impossible to get too lost if you use only the seven row/column/checker buttons. In practice, clicking a few of these then trying to return to the solved state may be a pleasant meditative challenge. Further, the character of each board pattern can change dramatically with tile shape. This may be a valuable object lesson regarding mathematical form, how a single abstract structure can look different when surface details change. Finally, varying the board size may convey something about emergence, how large numbers of discrete elements “become continuous” and take on a different qualitative character when there are a lot of them.
Algebraically, the state of each tile may be viewed as an integer mod 4. The state of the board is an array of integers mod 4. (In fancy terms, the board state is a “vector” in a suitable module over the integers mod 4. The tile shape marked 0 shows these values. The “solved” state of the board is the zero vector.) Clicking a button adds 1 (by default) to selected components. Clicking a button four times therefore has no effect (or, is the identity mapping), and the actions of any two buttons commute (clicking in either order has the same effect).
About the Software: Phosphenes are patterns of light and color created non-visually, such as what we see in a dark room. The program Phosphene is one of my earliest coding attempts, written in JavaScript (including jQuery) and HTML4. At the time (2012), SVG seemed not to be fully implemented. Instead, the program uses a table of png images to render the board.