houdini-clouds v1.0.0
Houdini Clouds
A CSS Houdini PaintWorklet to fill a background with clouds, and an experiment in deterministic RNG for Houdini.
☁ Demo (requires a client with PaintWorklet support)
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.
❤️⛅