Houdini Clouds
A CSS Houdini PaintWorklet to fill a background with clouds, and an experiment in deterministic RNG for Houdini.
Many Houdini worklets use Math.random()
e.g. for generating noise. Subsequent paints therefore alter the generated image dramatically. This can be a neat effect, but also jarring. Houdini Clouds instead uses a simple random number generator based on C++11's minstd_rand0
, seeded with a configurable static value. Subsequent paints therefore have a more predictable result.
Use
Load the worklet:
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('https://unpkg.com/houdini-clouds/worklet.js');
}
Apply it in CSS:
@supports (background-image: paint(clouds)) {
.element {
background-image: paint(clouds);
}
}
Configure
Custom properties allow you to alter the appearance of the generated clouds:
.element {
--cloud-hue: 210;
--cloud-saturation: 100;
--cloud-lightness: 100;
--cloud-width: 200;
--cloud-density: 1;
--cloud-seed: 7;
background-image: paint(circles);
}
Property | Default | Description |
---|---|---|
--cloud-hue |
210 |
Hue of clouds |
--cloud-saturation |
100 |
Saturation of clouds |
--cloud-lightness |
100 |
Max lightness of clouds |
--cloud-width |
200 |
Max width of clouds in CSS pixels |
--cloud-density |
1 |
Multiplier to adjust number of clouds |
--cloud-seed |
7 |
Default seed for RNG |
Demo
You can play with the demo at https://redopop.com/houdini-clouds or clone this repo and npm run demo
to try it locally.