Selector

@match

Cells for which an expression over their position is true.

Syntax

  • @match(<expression>) { }
NameValue
x, y, zcolumn, row and depth, from 1
X, Y, Znumber of columns, rows and depth
i, Icell index from 1, and cell count
dx, dyoffset from the grid center, in cells
dr, dc, dmEuclidean, Chebyshev and Manhattan distance from the center
daangle from the center, in radians
dbdistance to the nearest edge, 0 on the border
randoma random number between 0 and 1

Arithmetic + - * / % ^, comparison < > <= >= = == != ≤ ≥ ≠, logic && || !, and bitwise & | << >>. All Math functions are available, plus gcd(a, b). Adjacent values multiply, so 2x is 2 * x. See Expressions for the full rules.

Examples

and stand for <= and >=, and = for ==:

@grid: 10 / 60vmin _1px;
@content: @i;
font-size: .5em;

@match(x  y) {
  background: #000;
  color: #fff;
}
@grid: 10 / 60vmin _1px;
@content: @i;
font-size: .5em;

@match(x = y) {
  background: #000;
  color: #fff;
}
@match(X - x + 1 == y) {
  background: #000;
  color: #fff;
}

Distances from the center:

@grid: 21 / 60vmin;

@match(dr < 4) {
  background: #000;
}
@match(dc = 7) {
  background: #e6437d;
}
@match(db = 0) {
  background: #000;
}

gcd on the coordinates, the cover of Apostol’s Introduction to Analytic Number Theory:

:doodle {
  @grid: 18 / 60vmin / #e14431 *x 180 noclip;
  font-size: 4px;
  box-shadow:
    @m30(@n(*-.05em) @n(*.05em) 0 .1em #e14431);
}
@match(gcd(x-1, y-1)  1) {
  background: #fff;
  z-index: @I(-@i);
  margin: -.125em 0 0 -.125em;
  box-shadow:
    inset 0 0 0 .25em #000,
    @m27(@n(*-.05em) @n(*-.05em) 0 .1em #000);
}

See also