Pseudorandom numbers in Eleventy

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.

A common JavaScript implementation for pseudorandom numbers is available in a gist by @blixt.

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 randInt function.

• random generates 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 prng.init function.

The code for generating the waves is here.

The result looks like this:

The process for auto-generating the preview images is described in detail by Bernard Nijenhuis and also integrated into eleventy-excellent by Lene Saile.