Tetrascii 3

I took the plunge and animated the tetromino character set with each glyph made up of 25 pieces falling in order: https://chilliant.com/tetrascii.html

The final code to produce the animations is surprisingly concise, but the process of generating the data tables was a bit more involved.

Firstly, I originally drew each glyph in PowerPoint, so the construction wasn't very data-friendly. I had to screen-grab the slide and process the resultant image via JavaScript and HTML5 canvas elements.

Each screen-grabbed glyph was "pixel walked" to work out which of the 10x10 texels were directly connected to their neighbours. From the 100 texel neighbour data, I was able to reconstruct the shape, position and orientation of the 25 tetrominoes that made up the glyph. The pixel intensity was used to determine if a tetromino was foreground or background.

The 25 tetrominoes for each glyph were ordered so that they stacked correctly, from bottom to top. This involved finding candidates (pieces whose lower boundaries all fit exactly on top of existing pieces) and picking a random candidate. Note that this simple scheme disallows overhangs, so pieces can drop vertically.

The glyphs are string-encoded as 25 groups of three characters: "<letter><x><y>".

"<letter>" indicates the shape and orientation of the piece. Lowercase letters are background pieces, uppercase are foreground:

     +---- +---- cyan

AB   |#### |#

     |     |#

     |     |#

     |     |#

     +---- +---- +---- +---- orange

EFGH |###  |##   |  #  |#

     |#    | #   |###  |#

     |     | #   |     |##

     |     |     |     |

     +---- +---- +---- +---- blue

IJKL |###  | #   |#    |##

     |  #  | #   |###  |#

     |     |##   |     |#

     |     |     |     |

     +---- +---- +---- +---- purple

MNOP |###  | #   | #   |#

     | #   |##   |###  |##

     |     | #   |     |#

     |     |     |     |

     +---- +---- red

QR   |##   | #

     | ##  |##

     |     |#

     |     |

     +---- +---- green

UV   | ##  |#

     |##   |##

     |     | #

     |     |

     +---- yellow

Y    |##

     |##

     |

     |

"<x><y>" is the coordinate within the 10x10 glyph grid of the top-left corner of the piece.

The resultant 75-character encoding for each glyph therefore encapsulates:

• The order that the pieces fall
• The shape and orientation of each piece
• The column that each piece falls in
• The row that each piece comes to rest on
• The colour of each piece

A few more hoops have to be jumped through to convert this information into the final animated SVG elements, but that's because of the baroque relationships between SVG, HTML and CSS.