Pseudorandom numbers in Eleventyby Lea Rosema
This blog uses social preview images with some generative waves using the disability pride flag colors. In order to always have the same wave art on every build, I am not using
Math.random() to generate
random path coordinates but a pseudorandom number generator. It generates a deterministic series of numbers from a given seed value. This way it is ensured every build always generates the same image.
I wanted to use that in Eleventy, so I added a prng.js file inside my data directory.
prng provides a
prng.init(12345) function to provide a seed value, which you can use from Nunjucks/Liquid via double brackets.
To generate random numbers, prng.js provides a
random function and also a
randomgenerates float values between 0 and 1 (exclusive 1).
randInt(a, b)generated integer values between a and b (inclusive b)
curve()is a method to generate a bunch of random coordinates for SVG curve paths.
There is one little pitfall with this.
random is an impure function, which means it is not purely dependant on function parameters but relies on a variable outside the function scope. Before I implemented
prng.init as a function, it was just a property. But there's a special thing when using Eleventy as a dev server: it keeps the internal state of variables between builds. Using a function instead to initialize the seed value ensures the seed value is always initialized with the desired value on every build.
In order to provide the seed from frontmatter data, it is required to pass that also to the
The code for generating the waves is here.
The result looks like this: