Yesterday I learned about Latin square. An
n x n matrix
n distinct elements are arranged so that each one appears once in each row and column.
I happened to find an easy way to construct the Latin square in css-doodle,
cycle and combined with several other functions.
The following code generates the grid above:
It's pretty nice to show a color palette in the square. (click to randomize)
For more complex scenarios, using
function may not get the ideal result.
Though It's possible to save a desired seed value after some random generations.
Example with random shapes.
I've been experimenting with the
@dy in the grid.
They are numbers in the cells relative to the center.
Compute the distance with Math.hypot.
Animation delays. (click to toggle animation)
There's another demo in which the
margin of each cell changes
according to its distance to the center. The decorating dots are generated with different
(The code is kinda messy so I'll keep it to myself at the moment.)