Skip to content

Latest commit

 

History

History
54 lines (44 loc) · 2.33 KB

README.md

File metadata and controls

54 lines (44 loc) · 2.33 KB

Houdini Clouds NPM Version Test Status

A CSS Houdini PaintWorklet to fill a background with clouds, and an experiment in deterministic RNG for Houdini.

Screenshot demonstrating the effect of Houdini Clouds

☁ 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.

❤️⛅