CodePen is full of prototypes and loaded with full-blown art. Generative art is common, since hey, we’re working with code anyway, might as well make some of the code randomized and adjustable. There is a great project that has been around years and years that is purpose-built for giving users a UI to change values on-the-fly called dat.GUI. I once blogged about it right here on the CodePen Blog because I wanted to showcase how useful it can be for generative art Pens. While dat.GUI is still pretty cool and perfectly usable, there is a new player on the block.
Introducing Knobs by Yair Even Or! Demo first:
To me, the API and configuration is really clear and usable. I like how it is also modernized by using stuff like <input type="range"> for the sliders rather than re-inventing that. And the focus on changing CSS custom properties is very clever. Plus, you can style the controls themselves.
I snagged it and updated my Gray Burst idea from the other day to have a stroke-width knob:
I wish every generative art Pen had knobs!
The post Knobs for Demos appeared first on CodePen Blog.