Puzzle Rendering Widgets
2D Polyomino Pieces
Different Ways to Render
Polyomino pieces can be rendered via SVG, flexbox (CSS), or absolute positioning (CSS). They can be rendered on backend (left 3 in each row below) or frontend (right 3). Beyond captions and color differences, all six versions should look the same.
By default, views are 100x100px with content scaled to fit inside a 15px margin:
We can override width, height, cell size, or any combination of these if needed:
width: 70
width: 70 height: 70
height: 70
height: 130 cell: 10
cell: 10
width: 70 cell: 10
width: 70 height: 130 cell: 60
The examples above all show a Piece - a single monochrome polycube.
The same templates can render a Plot, which shows the arrangement of multiple pieces:
TODO: add grid lines (outer edge of pieces only)
Fixed display size
Transforms
Rotated by in-template filter.
Boards
The objective of a tiling puzzle is to use pieces to cover an area, without gaps or overlaps. We call this area the board.
Empty Boards
How can we depict an empty board? A uniform solid color is simple, but hard to parse. The dark shape below could be made up of 5 squares or many more. The checkerboard pattern makes the area of the board clear.
TODO: dotted-outline view of an empty board
TODO: apply checkerboard pattern in template
🗼 Template: polyomino
Partial and Complete Boards
🗼 Template: polyomino
Click the board to advance sequence, or any tab to skip around.
Color Shifting
These templates have the same input data, but with colors shifted by the template.
🗼 Template: polyomino
Annotated board
TODO: Face annotations (colors/emojis to highlight a face)
3D Pieces
2D Polyominos can be extended into 3D as polycubes.
See also: https://codepen.io/wmatthew/pen/ZEbNyVg
3D Piece
This shows a 3D piece in two orientations. Note the coloring change: the front side facing the user is still red, but it's a different side (3 red faces vs 5). This is because we modified the underlying list of coordinates passed to the template (before assigning colors to faces) instead of applying a CSS transform (after assigning colors to faces).
🗼 Template: piece3d
3D Piece, rotating
🗼 Template: piece3d
2D Representation of 3D Piece
This is an elevation map of the same piece as above. This map only labels elevations 2 and greater.
🗼 Template: pieceElevation
3D Boards
Recall that the objective of a (2D) tiling puzzle is to use pieces to cover a (2D) area, without gaps or overlaps. We call that area the board. What is the 3D equivalent?
There are two types of 3D 'tiling' puzzles I'm interested in:
- Fit all pieces into a 3D volume of space (pieces may or may not fill the space)
- Completely cover a 2D area (floor), with every piece touching the floor.
The goal is to represent an empty, partial, or completed board in a way that makes sense for either of these puzzle types.
Empty, Partial, Complete 3D Boards
Annotated 3D board
TODO: hide interior faces and unnecessary edges.
TODO: Override with custom face colors - for highlighting one face
TODO: symbols (emojis?) on a select group of faces
TODO: allow symbols to be aligned to edges of a face, to show matching rules
More Abstract Things
Sometimes it's useful to render other data on the same square-grid layout that we use to render tiles and boards. These abstract grids have distinct styling so it's clear we're not depicting pieces.
TODO: make sure all abstract grids have a distinct background color
Data Table
Render a table from JSON data. Tables have a light blue background.
🗼 Template: dataGrid
Abstract Grid of Solved Puzzles - hover to view
Display results for a series of questions (eg, "can x of this piece and y of this other piece tile a board of size z?") in a spatial layout. This is useful for higher-level reasoning about a large number of possible puzzle configurations (for what values of x is there a solution? is there ever a solution when x > z? etc.)
TODO: implement hovering
🗼 Template: polyomino
Puzzle Constraints
Constraint Template: This is an abstract template, partially specifying a puzzle setup. It does not specify a piece supply or board, so it cannot be solved without more information.
🗼 Template: constraints
Clones Tile A Rectangle - Simple Version
Copies of a single polycube tile a rectangle. Simplest config; no constraint flags.
Key: Clones_Tile_A_Square_Simple (Template)
Constraints: defaults.
Children: rect3x3_T, rect4x4_T, rect5x5_T, rect6x6_T, rect7x7_T, rect8x8_T
Constraint: This constraint instantiates the template above, specifying a piece supply and board. In this case, it also shows results from analysis:
🗼 Template: constraints
Clones Tile A Rectangle - Simple Version (rect4x4_T)
Copies of a single polycube tile a rectangle. Simplest config; no constraint flags.
Key: Clones_Tile_A_Square_Simple_rect4x4_T (Generated)
Parent: Clones_Tile_A_Square_Simple
Board: rect4x4
Pieces: T x ∞
Constraints: defaults.
Result
Found 1 solution.
In 0 seconds and 9 steps, solver v0.1.1 ran on 8/14/2024 and found 2 total solutions, which reduced to 1 unique solutions. Completed without bailing early.
Hidden content
🗼 Template: polyomino
Raw JSON
🗼 Template: jsonTextArea
Library Browser / Gallery
- TODO
Render Bugs
CSS grid: grid-auto-rows
CSS grid tables have intermittant artifacts on desktop chrome: thin horizontal white lines on some row boundaries. The relevant CSS attribute seems to be grid-auto-rows in the actualMap CSS class.