Pseudorandom

Chaos on a web page sounds bad, but just the right amount can tie everything together, like adding a pinch of salt to your pancakes.

The hotfx-pseudorandom element brings real random animations to your web pages. It’s like the forthcoming random() function coming to CSS, but as we shall see, kinda better.

Now that’s a chaotic ball! You can see it’s not even a constant speed but kinda slowing down and speeding up all the time.

Here’s how you can use this element on your own pages. First add this script:

Then wrap the elements you want to animate in a <hotfx-pseudorandom> tag and set a seed= attribute with a number you want to use as a seed (higher numbers make faster animations). The element then sets CSS variables for you to use in your style rules, like opacity: var(--hotfx-pseudorandom-1).

The variables are a unitless value that is constantly changing between 0 and 1. What can you do with a unitless value in CSS? Pretty much everything it turns out. In the bouncing ball demo, we’re applying the randomness with this CSS:

transform: translate(
  calc(100vw * var(--hotfx-pseudorandom-1)),
  calc(60vh * var(--hotfx-pseudorandom-2))
);
opacity: calc(.3 + .7 * var(--hotfx-pseudorandom-3));

Since --hotfx-pseudorandom-1 is any number between 0 and 1, the calc() expression moves the ball from 0 to 100vw horizontally. The other lines move it up and down and fade it in an out. The opacity prop uses a floor of .3 so it’s always 30% visible and the variability is from 30% to 100%.

With this technique, you can change make any number in your styles move around like crazy— or subtly change in a creepy, unpredictable way.

Now a brief interlude to watch some fireflies move through a dark forest.

What is Pseudorandom Anyway?

So, with the new random() function coming to CSS why would you need this custom element? Most things that start with pseudo sound bad or dodgy, like pseudoscience, pseudocode or pseudonym. But for the purposes of computer animation pseudorandom is often better.

The thing is, pseudorandom numbers are not actually random. They appear random to us because they are long decimals that seem to come out of nowhere, but they have some interesting properties that truly random numbers don’t have.

• Deterministic: Given the same seed number, the pseudorandom numbers will be the same every time your page loads.
• Continuous: This means that as time advances, we can expect numbers that are next to each other, making for smooth animations.
• Chaotic: A small change in the seed value will produce a big change in the output.

Many of the best computer graphics are built using different pseudorandom, generated with different formulas. Our pseudorandom element is built using a type of value noise and you can see exactly what you’re getting with a given seed using this graph.

How about another pretty demo to wash away some of that math.

To check out exactly how this works, you can read the source code. If you find any bugs or issues, please file an issue on GitHub.