Sprites.Maths

Arithmetic over reactive values. Each operator reads its arguments and returns a reactive value that follows them, so a sum or a product built from several values stays live and composes with the reactive structure. Every argument is a constant or a reactive value, so the operators nest.

Sprites.Maths

Sprites.Maths.Add Sprites.Reactive.Value

Sprites.Maths.Add(a, b)

The sum of two values. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe first value.
bNumber or Sprites.Reactive.ValueThe second value.

Returns a read-only Sprites.Reactive.Value holding the sum.

const a = Sprites.Reactive.Value(3);
const b = Sprites.Reactive.Value(4);
const sum = Sprites.Maths.Add(a, b);
Sprites.Ui.Input.Number(a);
Sprites.Ui.Input.Number(b);
Sprites.Ui.Dom.Text(' sum = ', sum);
Change either number and the sum recomputes.

Sprites.Maths.Subtract Sprites.Reactive.Value

Sprites.Maths.Subtract(a, b)

The difference of two values, a less b. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to subtract from.
bNumber or Sprites.Reactive.ValueThe value to subtract.

Returns a read-only Sprites.Reactive.Value holding the difference.

const a = Sprites.Reactive.Value(9);
const b = Sprites.Reactive.Value(4);
const difference = Sprites.Maths.Subtract(a, b);
Sprites.Ui.Input.Number(a);
Sprites.Ui.Input.Number(b);
Sprites.Ui.Dom.Text(' difference = ', difference);
The difference follows both numbers.

Sprites.Maths.Multiply Sprites.Reactive.Value

Sprites.Maths.Multiply(a, b)

The product of two values. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe first value.
bNumber or Sprites.Reactive.ValueThe second value.

Returns a read-only Sprites.Reactive.Value holding the product.

const width = Sprites.Reactive.Value(8);
const aspect = Sprites.Reactive.Value(2);
const span = Sprites.Maths.Multiply(width, aspect);
Sprites.Ui.Input.Number(width);
Sprites.Ui.Input.Number(aspect);
Sprites.Ui.Dom.Text(' span = ', span);
A width stretched by the pixel aspect.

Sprites.Maths.Divide Sprites.Reactive.Value

Sprites.Maths.Divide(a, b)

The quotient of two values, a over b. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to divide.
bNumber or Sprites.Reactive.ValueThe value to divide by.

Returns a read-only Sprites.Reactive.Value holding the quotient.

const a = Sprites.Reactive.Value(6);
const b = Sprites.Reactive.Value(4);
const quotient = Sprites.Maths.Divide(a, b);
Sprites.Ui.Input.Number(a);
Sprites.Ui.Input.Number(b);
Sprites.Ui.Dom.Text(' quotient = ', quotient);
Six over four reads one and a half.

Sprites.Maths.Modulo Sprites.Reactive.Value

Sprites.Maths.Modulo(a, b)

The remainder of a divided by b. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to divide.
bNumber or Sprites.Reactive.ValueThe value to divide by.

Returns a read-only Sprites.Reactive.Value holding the remainder.

const index = Sprites.Reactive.Value(10);
const width = Sprites.Reactive.Value(4);
const column = Sprites.Maths.Modulo(index, width);
Sprites.Ui.Input.Number(index);
Sprites.Ui.Input.Number(width);
Sprites.Ui.Dom.Text(' column = ', column);
The column of a cell index, wrapped by the width.

Sprites.Maths.Floor Sprites.Reactive.Value

Sprites.Maths.Floor(a)

A value rounded down to the nearest whole number. The argument may be a constant or a reactive value, so the result follows it.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to round down.

Returns a read-only Sprites.Reactive.Value holding the whole number.

const index = Sprites.Reactive.Value(7);
const width = Sprites.Reactive.Value(4);
const quotient = Sprites.Maths.Divide(index, width);
const row = Sprites.Maths.Floor(quotient);
Sprites.Ui.Input.Number(index);
Sprites.Ui.Input.Number(width);
Sprites.Ui.Dom.Text(' row = ', row);
The row of a cell index, rounded down.

Sprites.Maths.Ceiling Sprites.Reactive.Value

Sprites.Maths.Ceiling(a)

A value rounded up to the nearest whole number. The argument may be a constant or a reactive value, so the result follows it.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to round up.

Returns a read-only Sprites.Reactive.Value holding the whole number.

const total = Sprites.Reactive.Value(10);
const perPage = Sprites.Reactive.Value(4);
const quotient = Sprites.Maths.Divide(total, perPage);
const pages = Sprites.Maths.Ceiling(quotient);
Sprites.Ui.Input.Number(total);
Sprites.Ui.Input.Number(perPage);
Sprites.Ui.Dom.Text(' pages = ', pages);
The page count for a list, rounded up.

Sprites.Maths.Round Sprites.Reactive.Value

Sprites.Maths.Round(a)

A value rounded to the nearest whole number. The argument may be a constant or a reactive value, so the result follows it.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to round.

Returns a read-only Sprites.Reactive.Value holding the whole number.

const a = Sprites.Reactive.Value(7);
const b = Sprites.Reactive.Value(2);
const quotient = Sprites.Maths.Divide(a, b);
const nearest = Sprites.Maths.Round(quotient);
Sprites.Ui.Input.Number(a);
Sprites.Ui.Input.Number(b);
Sprites.Ui.Dom.Text(' nearest = ', nearest);
Seven halves round to the nearest whole.

Sprites.Maths.Power Sprites.Reactive.Value

Sprites.Maths.Power(a, b)

A raised to the power b. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe base.
bNumber or Sprites.Reactive.ValueThe exponent.

Returns a read-only Sprites.Reactive.Value holding the power.

const base = Sprites.Reactive.Value(2);
const bits = Sprites.Reactive.Value(3);
const colours = Sprites.Maths.Power(base, bits);
Sprites.Ui.Input.Number(base);
Sprites.Ui.Input.Number(bits);
Sprites.Ui.Dom.Text(' colours = ', colours);
Two to the bit depth gives the colour count.

Sprites.Maths.Min Sprites.Reactive.Value

Sprites.Maths.Min(a, b)

The smaller of two values. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe first value.
bNumber or Sprites.Reactive.ValueThe second value.

Returns a read-only Sprites.Reactive.Value holding the smaller value.

const wanted = Sprites.Reactive.Value(16);
const slots = Sprites.Reactive.Value(8);
const colours = Sprites.Maths.Min(wanted, slots);
Sprites.Ui.Input.Number(wanted);
Sprites.Ui.Input.Number(slots);
Sprites.Ui.Dom.Text(' colours = ', colours);
A colour count capped at the slots on hand.

Sprites.Maths.Max Sprites.Reactive.Value

Sprites.Maths.Max(a, b)

The larger of two values. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe first value.
bNumber or Sprites.Reactive.ValueThe second value.

Returns a read-only Sprites.Reactive.Value holding the larger value.

const pages = Sprites.Reactive.Value(0);
const atLeastOne = Sprites.Maths.Max(pages, 1);
Sprites.Ui.Input.Number(pages);
Sprites.Ui.Dom.Text(' pages = ', atLeastOne);
A page count held at one or more.

Sprites.Maths.Clamp Sprites.Reactive.Value

Sprites.Maths.Clamp(value, min, max)

A value held within the range min to max. A value below min, or not a number, settles at min; a value above max settles at max. Each argument may be a constant or a reactive value, so the result follows them all.

InputTypeDescription
valueNumber or Sprites.Reactive.ValueThe value to hold in range.
minNumber or Sprites.Reactive.ValueThe lowest allowed value.
maxNumber or Sprites.Reactive.ValueThe highest allowed value.

Returns a read-only Sprites.Reactive.Value holding the value clamped to the range.

const page = Sprites.Reactive.Value(8);
const pages = Sprites.Reactive.Value(5);
const shown = Sprites.Maths.Clamp(page, 1, pages);
Sprites.Ui.Input.Number(page);
Sprites.Ui.Input.Number(pages);
Sprites.Ui.Dom.Text(' shown = ', shown);
The page stays between one and the last page.

Sprites.Maths.GreaterOrEqual Sprites.Reactive.Value

Sprites.Maths.GreaterOrEqual(a, b)

True when a is greater than or equal to b. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to compare.
bNumber or Sprites.Reactive.ValueThe value to compare against.

Returns a read-only Sprites.Reactive.Value, true while a is greater than or equal to b.

const page = Sprites.Reactive.Value(3);
const pages = Sprites.Reactive.Value(5);
const atEnd = Sprites.Maths.GreaterOrEqual(page, pages);
Sprites.Ui.Input.Number(page);
Sprites.Ui.Input.Number(pages);
Sprites.Ui.Dom.Text(' atEnd = ', atEnd);
True once the page reaches the last one.

Sprites.Maths.Greater Sprites.Reactive.Value

Sprites.Maths.Greater(a, b)

True when a is greater than b. Either may be a constant or a reactive value, so the result follows both.

InputTypeDescription
aNumber or Sprites.Reactive.ValueThe value to compare.
bNumber or Sprites.Reactive.ValueThe value to compare against.

Returns a read-only Sprites.Reactive.Value, true while a is greater than b.

const pages = Sprites.Reactive.Value(3);
const manyPages = Sprites.Maths.Greater(pages, 1);
Sprites.Ui.Input.Number(pages);
Sprites.Ui.Dom.Text(' manyPages = ', manyPages);
True once there is more than one page.