`@<Math>`

Every function and constant of JavaScript's Math, prefixed with @: @sin, @cos, @abs, @pow, @max, @PI, @E, …

Syntax

@sin(<expression>)
@max(<expression>, <expression>)
@PI, π

Each argument is evaluated as an expression, and the result is a number without a unit.

Cell values

Arguments are plain numbers, in radians for the trig functions. Cell values need their @ functions, as in @sin(@x / 2); a bare x reads as 0:

@grid: 12 / 60vmin _1px;
background: #000;
opacity: @abs(@sin(@x / 2) * @cos(@y / 2));

Open in playground

Live values

With a live value such as @t or @ux in the arguments, the result is CSS math for the browser, so it keeps changing: @sin(@ts) is calc(sin((var(--cssd-utime) / 1000))). Only some functions have a CSS form; they are listed below.

@grid: 1x60 / 60vmin;
@size: 65% 1px;
margin: auto;
background: #000;
opacity: @iI;
rotate: -15deg;
translate: calc(@sin(@ts + @i / 4) * π * 5%);

Open in playground

Reference

With a live value

Becomes	Functions
the CSS function of the same name	`sin`, `cos`, `tan`, `asin`, `acos`, `atan`, `atan2`, `sqrt`, `exp`, `log`, `pow`, `hypot`, `abs`, `sign`, `min`, `max`
CSS `round()`	`round`, `floor`, `ceil` and `trunc`, rounding to the nearest whole number, down, up or toward zero
`0`	the others

See Live values for what else carries over.

Numbers

A unit makes an argument 0, so @sin(30deg) is 0. Write @sin(radians(30)), or $(sin(30deg)), where deg and turn inside a call are angles. A bare π is replaced by the number. Next to a digit or after a name, as in 2π or kπ, it is left as is, so 2π means twice pi inside an expression such as @sin(2π / 4), but not in a plain value.

Inside $()

Inside $() the same names work without @, and can be chained: $(abs.sin(@i)) is $(abs(sin(@i))). $() also has mod, fract, clamp, mix, step, smoothstep, radians and degrees, which have no @ form.

@<Math>