hirajanwin / uji Goto Github PK

A minimalist generative art thing –
press the buttons and play with the sliders!

The interface is designed (or, rather, deliberately not designed) for exploration through play – both for you, as the user, and me, as the person who made the weird-ass interface. It's intended to facilitate a vaguely meditative and creative environment.

The tiled buttons at the top are presets – use them as jumping-off points, or click your way through them to see what's possible before starting afresh by yourself. The ⌘ preset has all options set to their defaults, so it's a good starting point once you've played around a bit.

The sliders determine all aspects of the generated images. Hover over the icons next to them (which feature glyphs from Imperial Aramaic and Phoenician) for descriptions of what each slider does. You can also edit the option values directly through the text inputs next to the sliders.

🎨 Play around with the various options at doersino.github.io/uji/!

If you find that changing a slider slightly modifies some behavior you'd expect to be the domain of other sliders: Let's just say that's a constraint designed to send your creativity down fresh paths (and not a result of lazy implementation details).

About the name: I could pretend that it's referring to the concept of uji in Zen Buddhism, but really, the letters just lend themselves to a pretty logo, an initial iteration of which I had previously cobbled together with my pen plotting tool Brachiosaurus and later made the final logo (along with the download and share icons) using the Markdeep Diagram Drafting Board.

Notes

Setup

It's just some HTML, JavaScript, an image, and a few webfonts – so no setup is required! If you want to run this tool locally, simply git clone this repository or download a ZIP, then open index.html in your favorite browser. Of course, link sharing doesn't make a whole lot of sense in that context, but the rest should work just fine.

Features I wanted to add but didn't because I would've gotten bored of it and never released this thing in the first place

Perhaps I'll knock some of those down at some point if motivation strikes. In the meantime, feel free to file an issue if you really want one of them to be implemented (or do it yourself and send a pull request!).

• Allowing fine-grained adjustment of the options via keyboard shortcuts – when hovering over a slider, press + or - to increment and decrement its value according to its step attribute, perhaps with shift for a 10× larger change.
• Maintaining an undo/redo history. I think keeping the current action along with the last instance of optionValues should suffice? If a user keeps adjusting the same value, the history would stay constant, then. The thinking needs to a be a bit more fleshed out than this, though.
• Keeping option values in local storage and restoring them on load if no URL hash present.
• WebGL rendering (although blend modes and blurring might not be so easy there).
• Video export, see here – this might be worth revisiting later since it's only been made possible at all somewhat recently.
• The possibility to export the result as a minimal JavaScript file with all opts.* references in the render loop substituted? That might help folks adapt their results for, say, pen plotting.

Known bugs

Chrome tends to draw less distinct/clear/bright lines than other browsers.

License

You may use this repository's contents under the terms of the bespoke It's the MIT License Except You're Not Allowed to Make an NFT Unless You Use the Proceeds to Feed Birds, see LICENSE.

However, the subdirectory fonts/ contains third-party webfonts with their own licenses:

• Renzhi Li's Iosevka Aile, the typeface used throughout the interface, is licensed under the SIL Open Font License Version 1.1, see here.
• Google's Noto Sans, which provides the glyphs of the ancient scripts used for presets and slider labels, is also used in accordance with its SIL Open Font License Version 1.1, see here.

Further, the stock photo of the laptop was taken by Howard Bouchevereau, the one showing the chair and the picture frames was captured by Christopher Burns, and both have been sourced from Unsplash.

Finally – this isn't relevant of licensing but I'd like to mention it – the general layout has been adapted from Markdeep Diagram Drafting Board and Crop Circles, both are previous projects of mine.