Create

Function

@R

A random value in a range, read from 2D noise at the cell's position. Unlike @r, neighbouring cells get similar values, so the grid changes smoothly from one area to the next.

Syntax

  • @R(<max>), @R(<min>, <max>)
  • @R(<min>, <max>, <frequency>, <scale>, <octave>)
  • @R(<min>, <max>, frequency=2, octave=3)
  • @R.t(<min>, <max>, …)
min, max
The output range, with an optional unit. One argument means 0 to that value. Two letters give a letter.
frequency
How fast the noise changes across the grid. Higher values give smaller patches. Default 1.
scale
Multiplies the result, bounds included: @R(100, 200, 1, 2) lands between 200 and 400. Default 1.
octave
Number of noise layers added together, 1 to 100. More octaves add finer detail. Default 1.

Arguments after the range can be named, in any order: from, to, frequency, scale, octave.

Each @R in the code reads its own noise field, so two calls in one rule do not match. The fields are seeded, so the seed reproduces them. Inside a @m sequence the step's position is sampled instead of the cell's. @rn is an alias.

Examples

@grid: 20 / 60vmin;
background: hsl(@R(0, 360), 70%, 60%);
Open in playground

A higher frequency gives smaller patches:

@grid: 20 / 60vmin;
background: #000;
scale: @R(0, 1, 3);
Open in playground

More octaves add finer detail:

@grid: 30 / 60vmin;
background: #000;
opacity: @R(0, 1, frequency=2, octave=4);
Open in playground

Letters:

@grid: 10 / 60vmin;
font-size: .8em;
@content: @R(a, z, 2);
Open in playground

Along an outline

@R.t takes the same arguments but gives an expression in t for @shape, such as r: @R.t(.6, 1) or edge: @R.t(-.05, .05). It reads the noise around a circle, so the outline closes on itself, and each cell reads a different circle. A higher frequency adds more bumps along the outline: 

@grid: 3 / 60vmin _2px;
background: #000;
clip-path: @shape(
  points: 200;
  r: @R.t(.6, 1, frequency=3);
);
Open in playground

See also