A minimalist generative art thing – press the buttons and play with the sliders!
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 options directly through the text inputs next to the sliders, which you're able to conveniently tab through. And pressing +, →, or ↑ while your mouse pointer's hovering over a slider will increase its value (-, ←, or ↓ will decrease it instead). Press shift at the same time to adjust in 10× larger increments.
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).
At the bottom of the sidebar, there's a couple of buttons: Firstly, the conjoined buttons sporting chevron icons provide undo/redo functionality (the usual keyboard shortcuts work as well). Upon clicking the self-explantory "Export" button, you'll be presented with a choice of available formats: PNG, JPEG, SVG, and JSON, the latter two of which are intended for pen plotting. The adjacent "Share" button reveals a shareable URL that encodes your options, which comes in real handy if you want to show a thing you've made with UJI to someone else. (If you press alt while clicking either button, the default action is performed in each case – PNG download slash URL-to-clipboard-copying.)
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 undo, redo, export, and share icons) using the Markdeep Diagram Drafting Board.
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.
Perhaps I'll knock some of those down at some point if motivation strikes. (Update: Done quite a few, but there's always more!) 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!).
<canvas>
-based approach would still be needed as a fallback.Chrome tends to draw less distinct/clear/bright lines than other browsers.
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 & Send Me Pictures of Them license, see LICENSE
.
However, the subdirectory fonts/
contains third-party webfonts with their own licenses:
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.