Formula Grid Visualizer

This visualizer divides the rectangular canvas into a grid of r by c identical rectangular cells. Each cell has an integer x coordinate (starting from 1 in the leftmost column and increasing to the right), a y coordinate (starting from 1 in the top row and increasing as you go down), and a "spiral position" s that starts from 1 near the center of the rectangle and increases along a rectangular spiral path that visits every cell in the grid.

In each animation frame, Formula Grid will draw one or more shapes (from a variety of supported shapes) in each of the next group of consecutive cells in the grid, in whatever fill order is currently configured.

Some presets for the fill order of the cells are provided: the default is left-to-right, top-to-bottom. You can also easily select a spiral from the center and a triangular layout with one cell in the center of the top row, then two cells on its left and right in the second row, and so on. In addition, you can customize the fill order with a formula giving the coordinates of the k-th cell to be visited, starting from k = 1. Note that there is no requirement that a given cell in the grid is visited exactly once as a result of these formulas; it could equally well never be visited or be visited multiple times. For example, one can make a typical point plot of a sequence using the fill order formula [k, floor(r/2) - a]. Note that the y-coordinate in this formula is not simply a because the rows of the grid are numbered from 1 to r from top to bottom, rather than in typical Cartesian coordinate fashion with y increasing upwards.

The shapes drawn and the (RGBA) colors used for them are determined by the Fill formula. If it just returns a color or a value that can be converted to a color, the rectangular cell at the current fill position is filled with that color. For details on how formulas may create and manipulate colors, see the Chroma documentation, but note that a false value will be converted to the completely transparent color. In other words, whenever the fill formula returns false, nothing will be drawn. For convenience, if the formula returns an array that cannot otherwise be converted to a color, Formula Grid will attempt to convert each element to a color and take the (overlay) sum of the colors, which is equivalent to drawing each resulting color into the cell in the order they appear.

On the other hand, the fill formula may instead return a plain object with keys drawn from the list of supported shapes:

rectangle: Behaves the same as the default operation of the fill formula when it does not return an object.
square: Draws a square with side a configurable fraction of the shorter dimension of a cell, centered in the cell. The fraction is given by the Inset formula, documented below.
ellipse: Draws an ellipse with axes the horizontal and vertical center lines of the cell.
circle: Draws a circle with diameter a configurable fraction of the shorter dimension of a cell, centered in the cell. As with the square, the fraction is given by the Inset formula. This means that if you specify both circle and square, the circle is always inscribed in the square.

hexagon: Draws a hexagon twice the width and 4/3 the height of a cell, in which the current cell is inscribed. The resulting hexagons doubly cover the plane; if you take the odd cells horizontally in one row and the even cells in the next, those hexagons tile the plane. Note the Triangle pre-set fill order only visits such cells, making this shape ideal for use along with the Triangle fill order when you want to display the rows of a triangular array with one entry in the first row, two in the second, and so on. When the aspect ratio of a cell is 1/√3, the hexagons are regular. See the accompanying diagram for the layout of the hexagons; the underlying rectangular cells are blue, each inscribed in the corresponding hexagon shape, which are drawn in black with every other one having dotted perimeter.

triangle: Draws a triangle the height of a cell with horizontal base twice the width of a cell, centered on the current cell. On odd rows the odd triangles point up and the even triangles point down; on even rows the directions are reversed. The resulting triangles tile the plane. When the aspect ratio of a cell is 1/√3, the triangles are equilateral. See the accompanying diagram of the layout of the triangles, superimposed on the underlying rectangular grid, which is shown in blue. Each triangle is associated with the unique grid cell that it overlaps the most.
text: This key represents a special shape. The value of the associated formula will be converted into a string (if it is an array, the entries will be individually converted to strings and concatenated). This string will be written centered in the cell in a font size half the height of the cell if it has four or fewer characters, or a font size one quarter the height of the cell otherwise. The text color will be black or white, whichever has highest contrast with the cell color.
mouseover: Another special shape key. The value of the associated formula will be converted into a string and shown in a popup when the mouse pointer hovers over the cell.

Except for the special text shapes, the value associated to a key will be interpreted as a color in the same way as the default behavior, and the shape will be drawn in that color. If multiple keys are specified, the shapes are drawn successively in the order that they appear in the object returned.

The fill formula may use any of the variables described above: x, y (coordinates), r (rows), c (columns), and s (spiral position); their values will be supplied by the visualizer. It may also use any of the following additional variables:

k -- the serial number of the cell in the order they are filled in, starting from 1

m -- the minimum (first) index of the current sequence being visualized

M -- the Maximum (last) index of the current sequence (may be infinite)

n = k - 1 + m -- the index of the sequence entry associated with the current cell

a -- the value of the current sequence at index n

f -- the frame number of the current drawing pass; this is the greatest integer in the quantity k divided by the current drawing speed.

You may also use the symbol A as a function symbol in your formula, and it will provide access to the value of the sequence being visualized for any index. For example, the formula (a + A(n+1) + A(n+2))/3 would provide a three-element running average of the current sequence starting from the current entry. The FormulaGrid visualizer also defines a function symbol spiral that takes a positive integer k and returns a two-element array of the coordinates of the k-th position in the spiral path from the center.

Being the heart of this visualizer, there is a lot of information that is packed into the Fill formula, and it can get relatively complicated. So here are a few illustrative examples, all assuming By_Rows fill order:

A black/red checkerboard: (x+y) % 2 ? red : black
Every 7th cell is filled with white, and every 11th cell has an inner red square: {rectangle: (k % 7) == 1, square: not(k % 11) and red}
Tile the plane with hexagons in a rainbow given by their distance from the center of the grid; note we only color every other position, by alternately setting the opacity to 1 or 0, because the hexagons overlap to cover every pixel twice. Also, we display the distance on mouseover.
```
{ hexagon:
    rainbow(10*sqrt((x-c/2)^2 + (y-r/2)^2), (x+y) % 2),
  mouseover:
    [sqrt((x-c/2)^2 + (y-r/2)^2), ' units from center']
}
```

Parameters

Dimensions: the number of rows and columns in the grid. Note that you may leave this blank, in which case FormulaGrid will try to choose suitable values to display the selected sequence, or you may specify just the number of rows, in which case FormulaGrid will choose the number of columns to fill the canvas. Or you may explicitly specify both the number of rows and number of columns in the grid, separated by a space or comma.
Cell aspect: the aspect ratio (width/height) of each cell in the grid. Defaults to the value that will fill the available space in the canvas. If this cell aspect is set and at least the number of columns is unspecified, the dimensions will be chosen to fill the canvas. If this parameter is set and both dimensions are set, the aspect ratio of the portion of the canvas used by FormulaGrid will be set accordingly. For convenience, the special aspect ratio 1/√3 that makes the hexagon and triangle shapes be regular can be entered simply as the character r (for "regular ratio").
Fill order: the path through the grid in which cells should be filled. Defaults to 'By_Rows', which fills them left-to-right and top-to-bottom. May also be 'Spiral', which makes a rectangular spiral filling the grid, or 'Triangle', which visits cells starting with the top center, then the two immediately left and right in the next row, then three in the middle of the third row, etc. Finally, if this parameter is set to 'Custom', an entry box for the Path formula parameter will pop up, allowing you to explicit specify the x and y coordinates of the k-th cell visited in order to create custom paths, scatter plots, etc.
Path formula: A formula giving the x and y coordinates of the k-th cell to be visited as the visualization is drawn. It is only shown/used if Fill order is 'Custom'. The value may be a two-element array giving the x and y coordinates in that order, or a plain object with keys x and y giving the coordinates. For example, if you want to fill the cells starting from the upper left corner and then proceeding down each column in turn, you could write [ceil(k/r), k % r + 1], or equivalently {x: ceil(k/r), y: k % r + 1}. The formula may use any of the variables listed in the description above, where the inputs x, y, and s are calculated as if the fill order were the default 'By_Rows'. This latter convention is useful if you want to tweak the default fill order.
Background color: The color of the background.
Speed: Cells filled per animation frame.
Fill formula: This parameter specifies the core behavior of Formula Grid, directing what is drawn in each cell as the visualization reaches it. As such, it is documented fully in the overview above.
Inset formula: An expression giving the side length of the 'square' shape and/or diameter of the 'circle' shape, as a multiple of the shorter dimension of a cell. The value is allowed to be greater than one, in which case the shapes may overlap. This parameter has no effect on any shapes other than circle and square.