random()
The random()
API will give your deterministic pseudorandom values. Unlike the Math.random()
function, Remotions function takes in a seed which can be a number
or a string
. If the seed is the same, the output is always the same.
ts
import {random } from "remotion";constrand =random (1); // 0.07301638228818774constrand2 =random (1); // still 0.07301638228818774constrandomCoordinates = newArray (10).fill (true).map ((a ,i ) => {return {x :random (`random-x-${i }`),y :random (`random--${i }`),};}); // will always be [{x: 0.2887063352391124, y: 0.18660089606419206}, ...]// @ts-expect-errorrandom (); // Error: random() argument must be a number or a string
ts
import {random } from "remotion";constrand =random (1); // 0.07301638228818774constrand2 =random (1); // still 0.07301638228818774constrandomCoordinates = newArray (10).fill (true).map ((a ,i ) => {return {x :random (`random-x-${i }`),y :random (`random--${i }`),};}); // will always be [{x: 0.2887063352391124, y: 0.18660089606419206}, ...]// @ts-expect-errorrandom (); // Error: random() argument must be a number or a string
Use cases
Randomness can be used to create interesting visualizations, such as particle effect for example. Since Remotion renders a video on multiple threads and opens the website multiple times, the value returned by a Math.random()
call will not be the same across multiple threads, making it hard to create animations based on randomness. Using this API will ensure that the pseudorandom number will be the same always.
Accessing true randomness
Calling Math.random()
results in an ESLint warning in Remotion since often it leads to bugs in rendering. If you are sure you want a true random number, and want to bypass this message without adding an ignore comment, use random(null)
ts
// Passing null will result in a different value every time.random (null) ===random (null); // false
ts
// Passing null will result in a different value every time.random (null) ===random (null); // false