{"id":13760847,"url":"https://github.com/doersino/uji","last_synced_at":"2025-04-04T22:05:00.405Z","repository":{"id":48673380,"uuid":"366686480","full_name":"doersino/uji","owner":"doersino","description":"A minimalist generative art thing – press the buttons and play with the sliders!","archived":false,"fork":false,"pushed_at":"2025-02-19T18:23:31.000Z","size":4557,"stargazers_count":191,"open_issues_count":2,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-04T11:48:18.822Z","etag":null,"topics":["art","canvas","generative-art","generative-design","javascript","minimalist","plotting","range-slider","sliders"],"latest_commit_sha":null,"homepage":"https://ghpages.noahdoersing.com/uji/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doersino.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-05-12T11:04:55.000Z","updated_at":"2025-03-14T03:42:20.000Z","dependencies_parsed_at":"2024-03-23T07:28:49.617Z","dependency_job_id":"6a5a11ce-b490-4f72-9773-7042fe764258","html_url":"https://github.com/doersino/uji","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doersino%2Fuji","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doersino%2Fuji/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doersino%2Fuji/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doersino%2Fuji/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doersino","download_url":"https://codeload.github.com/doersino/uji/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256110,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["art","canvas","generative-art","generative-design","javascript","minimalist","plotting","range-slider","sliders"],"created_at":"2024-08-03T13:01:24.082Z","updated_at":"2025-04-04T22:05:00.382Z","avatar_url":"https://github.com/doersino.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"logo.svg\" width=\"48\" align=\"center\"\u003e\n\n*\u003cbr\u003eA minimalist generative art thing –\u003cbr\u003epress the buttons and play with the sliders!*\n\n\u003c/div\u003e\n\nThe 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.\n\n![It's not desktop-only, by the way!](example-laptop.jpg)\n\nThe **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 \u003ckbd\u003e⌘\u003c/kbd\u003e preset has all options set to their defaults, so it's a good starting point once you've played around a bit.\n\nThe **sliders determine all aspects of the generated images**. Hover over the icons next to them (which feature glyphs from [Imperial Aramaic](https://en.wikipedia.org/wiki/Imperial_Aramaic#Unicode) and [Phoenician](https://en.wikipedia.org/wiki/Phoenician_alphabet#Unicode)) 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 \u003ckbd\u003etab\u003c/kbd\u003e through. And pressing \u003ckbd\u003e+\u003c/kbd\u003e, \u003ckbd\u003e→\u003c/kbd\u003e, or \u003ckbd\u003e↑\u003c/kbd\u003e while your mouse pointer's hovering over a slider will increase its value (\u003ckbd\u003e-\u003c/kbd\u003e, \u003ckbd\u003e←\u003c/kbd\u003e, or \u003ckbd\u003e↓\u003c/kbd\u003e will *de*crease it instead). Press \u003ckbd\u003eshift\u003c/kbd\u003e at the same time to adjust in 10× larger increments.\n\n#### [🎨 Play around with the various options at `ghpages.noahdoersing.com/uji/`!](https://ghpages.noahdoersing.com/uji/)\n\nIf 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).\n\nAt 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](https://github.com/doersino/uji/issues/3). 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 \u003ckbd\u003ealt\u003c/kbd\u003e while clicking either button, the default action is performed in each case – PNG download *slash* URL-to-clipboard-copying.)\n\n![This is how your apartment could look with one simple trick! (The trick is: Makin' stuff with this tool.)](example-frames.jpg)\n\n*About the name:* I could pretend that it's referring to the concept of [*uji* in Zen Buddhism](https://en.wikipedia.org/wiki/Uji_(Being-Time)), but really, the letters just lend themselves to a pretty logo, an [initial iteration](https://github.com/doersino/brachiosaurus/blob/24fb60c86e037053ed1003a356a7ca1d8135c5fd/examples.py#L413) of which I had previously cobbled together with my pen plotting tool [Brachiosaurus](https://github.com/doersino/brachiosaurus/) and later [made](https://twitter.com/doersino/status/1396194883304660997) the [final logo](https://gist.github.com/doersino/c2c4e3f110b75ac8eef3b46a8ee30d36) (along with the *undo*, *redo*, *export*, and *share* icons) using the [Markdeep Diagram Drafting Board](https://github.com/doersino/markdeep-diagram-drafting-board).\n\n#### [📓 Read about the algorithm and view a whole bunch of examples on my blog!](https://excessivelyadequate.com/posts/uji.html)\n\n\n## Notes\n\n### Setup\n\nIt'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](https://github.com/doersino/uji/archive/refs/heads/main.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.\n\n\n### 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\n\nPerhaps 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](http://github.com/doersino/uji/issues) if you really want one of them to be implemented (or do it yourself and send a pull request!).\n\n* Some way of randomizing options without constantly generating junk, see [here](https://github.com/doersino/uji/issues/1).\n* WebGL rendering for performance – although blend modes and blurring might not be so easy there, and the current `\u003ccanvas\u003e`-based approach would still be needed as a fallback.\n* Exporting the generation process as a video, see [here](https://stackoverflow.com/questions/19235286/convert-html5-canvas-sequence-to-a-video-file/62065826#62065826) – this might be worth revisiting later since it's only been made possible at all somewhat recently. [In a similar vein, \"meta sliders\" that enable the generation of [short animations like this one](https://www.reddit.com/r/generative/comments/nozv1a/one_way_portal_made_with_uji/). But that seems too complex from a user-interface perspective (and *prohibitively* slow to render all the frames for even just a preview), so this is really just a pipe dream.]\n* Due to an oversight early on, for circle/square/triangle-shaped lines, the line terminates a bit short of its origin – the lower the segment count, the more apparent this is. That's not a difficult fix, but it would subtly change the appearance of previously-created-and-then-accessed-through-share-URLs drawings – for some of which the present behavior may constitute a point of important visual interest – so, if this was to be addressed, some sort of drawing algorithm versioning scheme appended to share URLs and downloaded filenames would be required.\n* The ability to drop a previously-created drawing back into UJI and resume modifying the parameters (extracted from the filename).\n\n\n### Known bugs\n\nChrome tends to draw less distinct/clear/bright lines than other browsers.\n\n\n## License\n\nYou 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 \u0026 Send Me Pictures of Them* license, see `LICENSE`.\n\nHowever, the subdirectory `fonts/` contains **third-party webfonts with their own licenses**:\n\n* Renzhi Li's **Iosevka Aile**, the typeface used throughout the interface, is licensed under the *SIL Open Font License Version 1.1*, see [here](https://github.com/be5invis/Iosevka/blob/master/LICENSE.md).\n* 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](https://github.com/googlefonts/noto-fonts/blob/main/LICENSE).\n\nFurther, the **stock photo** of the laptop was taken by [Howard Bouchevereau](https://unsplash.com/photos/RSCirJ70NDM), the one showing the chair and the picture frames was captured by [Christopher Burns](https://unsplash.com/photos/BdVQU-NDtA8), and both have been sourced from [Unsplash](https://unsplash.com/).\n\nFinally – this isn't relevant of licensing but I'd like to mention it – the **general layout has been adapted from [Markdeep Diagram Drafting Board](https://github.com/doersino/markdeep-diagram-drafting-board) and [Crop Circles](https://github.com/doersino/cropcircles)**, both are previous projects of mine.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoersino%2Fuji","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoersino%2Fuji","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoersino%2Fuji/lists"}