Latin Square
Yesterday I learned about Latin square. An n x n
matrix
in which 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,
by using cycle
and combined with several other functions.
The following code generates the grid above:
@grid: 3 / 160px;
@content: @pn.once.m3.pn.cycle(1, 2, 3);
It's pretty nice to show a color palette in the square. (click to randomize)
@grid: 7 / 200px;
background: @pn.once.m7.pd.cycle(
magenta, indigo, gold, crimson,
bisque, teal, black
);
For more complex scenarios, using cycle
function may not get the ideal result.
Though It's possible to save a desired seed value after some random generations.
@grid: 7 / 200px;
@seed: 1676870616099;
--c: magenta, indigo, gold, crimson,
bisque, teal, black;
--c1: @once.m7.pd.cycle(--c);
--c2: @once.m7.pd.cycle(--c);
background:
linear-gradient(@pn(--c1), @lp)
50%/50% 50% no-repeat
@pn(--c2);
Example with random shapes.
@grid: 7 / 200px;
background-color: @pn.once.m7.pd.cycle(
magenta, indigo, gold, crimson,
bisque, teal, black
);
/* shape definitions skipped */
background-image: @pn.once.m7.pd.cycle(
var(--s1), var(--s2), var(--s3),
var(--s4), var(--s5), var(--s6),
var(--s7)
);
Grid numbers
I've been experimenting with the @dx
and @dy
in the grid.
They are numbers in the cells relative to the center.
@grid: 7 / 200px;
@content: @dx, @dy;
Compute the distance with Math.hypot.
@grid: 7 / 200;;
@content: @round.hypot(@dx, @dy);
Absolute sums.
@grid: 9 / 200px;
@content: @calc(abs(@dx) + abs(@dy));
Animation delays. (click to toggle animation)
@grid: 7 / 200px;
--n: @calc(abs(@dx) + abs(@dy));
animation: scale 2s ease infinite;
animation-delay: calc(var(--n) * -.2s);
@keyframes scale {
50% { transform: scale(0) }
}
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
stroke-dasharray
values.
(The code is kinda messy so I'll keep it to myself at the moment.)
