Daily Sketch 3 - Latin Square & Grid Numbers

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.)