[css-values-5] seeded random values

[romainmenke]

To make pages more dynamic and whimsical I sometimes use seeded random values.
These are generated server-side and I will typically use the request url to compute the initial random seed. Each subsequent call to the random function returns a new value.
I find that this gives good dynamic results that are still deterministic.
Visiting the same page twice doesn't result in different outcomes.

But each individual page has their own distinct and seemingly random patterns.

This isn't currently possible with the random() function.

Could this be done with something like counters? Except that counter() returns a string, and not a number. So it can't currently be used a fixed <number>.

[dead-claudia]

Wouldn't it be better to just use var(--random-N) for each N you need, and then just inject them in the root element via, say, document.body.style.setProperty("--random-N", getRandomNumber())?

Or are you hoping for a mix of numeric-counter() (which I'd be very much a fan of seeing) plus something like GLSL's noise(seed)?

[romainmenke]

In php I have code like this:

function pseudo_shuffled_set() {
	// A set of options
	$options = array(
		'a',
		'b',
		'c',
		'd',
		'e',
		'f',
		'g',
		'h',
		'i',
		'j',
	);

	// use the request url as the random seed
	$request_seed = wp_unslash( $_SERVER['REQUEST_URI'] ?? '' );
	srand( crc32( $request_seed ) );

	// shuffle the array
	$copy        = array( ...$options );
	$copy_length = count( $copy ) > 0;
	$shuffled    = array();

	while ( $copy_length > 0 ) {
		// `rand` is seeded and will yield deterministic results
		$i           = rand( 0, count( $copy ) - 1 );
		$shuffled[]  = array_splice( $copy, $i, 1 )[0];
		$copy_length = count( $copy ) > 0;
	}

	return $shuffled;
}

Then when rendering a templates page I can create a shuffled set that is specific to that page and use it to add some visual variation to elements.

Each page will be different from every other page (to some degree), but rendering the same page twice will yield the same result.

The current random() function is too random in a way as each page refresh would yield a different result.

Or are you hoping for a mix of numeric-counter() (which I'd be very much a fan of seeing) plus something like GLSL's noise(seed)?

I not familiar with GLSL, but this does sound correct :)

[tabatkins]

Making the random values change on page load is definitely an intentional design decision for now, but allowing that aspect of the caching key to be overridden (currently there's no way to interacte with it) is definitely a possibility.

Something like adding a seed <string> to the sharing options, perhaps; you can use either JS or server-side code to set up a seed value in a variable on the root and then use that everywhere you're doing random stuff. (Or if you wanted it constant on every page, you can just put it into your static styles.)

[kizu]

Being able to “freeze” the seed between page loads would be invaluable for visual regression testing tools, as otherwise it will be tricky to make them stable when the random is involved.

[tabatkins]

Yup, definitely a fair argument.