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.

❤️⛅