uji

uji

极简主义生成艺术工具激发创意与沉浸体验

UJI 是一款基于浏览器的生成艺术工具,采用极简设计理念。通过直观的按钮和滑块界面,创作者可以轻松探索和生成独特的数字艺术作品。该工具提供多种预设选项和可调参数,支持多格式导出,并可通过 URL 分享作品。UJI 旨在营造一个探索性的创意环境,同时带来沉浸式体验。无需安装,适合艺术爱好者和设计师探索数字艺术的多样可能。

UJI生成艺术图像生成交互界面参数调整Github开源项目
<div align="center"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/9f54fc05-625f-4a66-a956-dc69456e29c5.svg" width="48" align="center">

<br>一个极简主义的生成艺术工具 –<br>按下按钮,玩转滑块!

</div>

这个界面的设计(或者说,刻意不设计)旨在通过玩耍来探索——无论是对你这个用户,还是对我这个制作这个奇怪界面的人来说都是如此。它的目的是营造一个模糊的冥想和创意环境。

顺便说一下,这不仅限于桌面设备!

顶部的平铺按钮是预设——用它们作为起点,或者点击浏览它们,看看有哪些可能性,然后再自己重新开始。<kbd></kbd>预设将所有选项设置为默认值,所以在你玩了一会儿之后,这是一个很好的起点。

滑块决定了生成图像的所有方面。将鼠标悬停在滑块旁边的图标上(这些图标使用了帝国亚拉姆语腓尼基语的字形),可以查看每个滑块的功能描述。你还可以通过滑块旁边的文本输入直接编辑选项,可以方便地用<kbd>tab</kbd>键浏览。当鼠标指针悬停在滑块上时,按<kbd>+</kbd><kbd></kbd><kbd></kbd>键会增加其值(按<kbd>-</kbd><kbd></kbd><kbd></kbd>键则会减少)。同时按住<kbd>shift</kbd>键可以进行10倍大的调整。

🎨 在doersino.github.io/uji/上尝试各种选项吧!

如果你发现稍微改变一个滑块会轻微修改你预期应该由其他滑块控制的行为:让我们就说这是一个旨在引导你的创造力走向新路径的限制(而不是懒惰实现细节的结果)。

在侧边栏底部,有几个按钮:首先,带有人字形图标的连体按钮提供了撤销/重做功能(常用的键盘快捷键也可以使用)。点击不言自明的"导出"按钮后,你将看到可用格式的选择:PNG、JPEG、SVG和JSON,后两种适用于绘图仪。相邻的**"分享"按钮会显示一个编码了你选项的可分享URL**,如果你想向其他人展示你用UJI制作的东西,这个功能非常方便。(如果你在点击任一按钮时按住<kbd>alt</kbd>键,将在每种情况下执行默认操作——PNG下载URL复制到剪贴板。)

你的公寓只需一个简单的技巧就能变成这样!(这个技巧就是:用这个工具制作东西。)

关于名字:我可以假装它指的是禅宗佛教中的uji概念,但实际上,这些字母只是很适合做一个漂亮的logo,我之前用我的绘图仪工具Brachiosaurus拼凑了一个初始版本,后来用Markdeep Diagram Drafting Board制作了最终的logo(以及撤销重做导出分享图标)。

📓 在我的博客上阅读关于算法的介绍,并查看大量示例!

注意事项

设置

这只是一些HTML、JavaScript、一张图片和几个网络字体 - 所以无需设置!如果你想在本地运行这个工具,只需git clone这个仓库或下载ZIP文件,然后在你喜欢的浏览器中打开index.html。当然,在这种情况下,链接分享就没有太大意义了,但其他功能应该可以正常工作。

我想添加但没有添加的功能,因为我会对此感到厌烦并最终永远不会发布这个东西

也许我以后会在有动力的时候完成其中的一些。(更新:已经完成了不少,但总是还有更多!)同时,如果你真的想要实现其中的某个功能,随时可以提出issue(或者你自己动手实现并发送pull request!)。

  • 一种在不断生成垃圾的同时随机化选项的方法,参见这里
  • 使用WebGL渲染以提高性能 – 尽管混合模式和模糊效果在那里可能不太容易实现,而且当前基于<canvas>的方法仍然需要作为后备方案。
  • 将生成过程导出为视频,参见这里 – 这可能值得以后重新考虑,因为这个功能最近才变得可能。[类似地,"元滑块"可以生成像这样的短动画。但从用户界面的角度来看,这似乎太复杂了(而且即使只是预览,渲染所有帧也会非常慢),所以这真的只是一个遥不可及的梦想。]
  • 由于早期的一个疏忽,对于圆形/方形/三角形的线条,线条在其起点处会稍微短一些 – 线段数越少,这种现象就越明显。这并不是一个难以修复的问题,但它会微妙地改变先前通过分享URL访问的绘图的外观 – 对于其中一些绘图来说,当前的行为可能构成了重要的视觉兴趣点 – 因此,如果要解决这个问题,就需要在分享URL和下载的文件名中添加某种绘图算法版本控制方案。
  • 能够将先前创建的绘图重新导入UJI并继续修改参数(从文件名中提取)。

已知bug

Chrome倾向于绘制出比其他浏览器更不清晰/明亮的线条。

许可证

你可以根据定制的这是MIT许可证,但你不能制作NFT,除非你用收益来喂鸟并给我发送它们的照片许可证使用本仓库的内容,详见LICENSE

然而,fonts/子目录包含具有自己许可证的第三方网络字体

  • Renzhi Li的Iosevka Aile,整个界面使用的字体,根据SIL开放字体许可证1.1版授权使用,详见这里
  • Google的Noto Sans,提供用于预设和滑块标签的古代文字字形,也是根据其SIL开放字体许可证1.1版使用,详见这里

此外,笔记本电脑的库存照片Howard Bouchevereau拍摄,展示椅子和相框的照片由Christopher Burns拍摄,两者均来自Unsplash

最后 – 这与许可无关,但我想提一下 – 整体布局改编自Markdeep Diagram Drafting BoardCrop Circles,这两个都是我之前的项目。

编辑推荐精选

Vora

Vora

免费创建高清无水印Sora视频

Vora是一个免费创建高清无水印Sora视频的AI工具

Refly.AI

Refly.AI

最适合小白的AI自动化工作流平台

无需编码,轻松生成可复用、可变现的AI自动化工作流

酷表ChatExcel

酷表ChatExcel

大模型驱动的Excel数据处理工具

基于大模型交互的表格处理系统,允许用户通过对话方式完成数据整理和可视化分析。系统采用机器学习算法解析用户指令,自动执行排序、公式计算和数据透视等操作,支持多种文件格式导入导出。数据处理响应速度保持在0.8秒以内,支持超过100万行数据的即时分析。

AI工具酷表ChatExcelAI智能客服AI营销产品使用教程
TRAE编程

TRAE编程

AI辅助编程,代码自动修复

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
AIWritePaper论文写作

AIWritePaper论文写作

AI论文写作指导平台

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

AI辅助写作AI工具AI论文工具论文写作智能生成大纲数据安全AI助手热门
博思AIPPT

博思AIPPT

AI一键生成PPT,就用博思AIPPT!

博思AIPPT,新一代的AI生成PPT平台,支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等,内置海量精美PPT模板,涵盖商务、教育、科技等不同风格,同时针对每个页面提供多种版式,一键自适应切换,完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命,一站式智能商拍平台

潮际好麦深耕服装行业,是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌,以及国内10万+淘宝、天猫、京东等主流平台的品牌商家,为卖家节省将近85%的出图成本,提升约3倍出图效率,让品牌能够快速上架。

iTerms

iTerms

企业专属的AI法律顾问

iTerms是法大大集团旗下法律子品牌,基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构,帮助企业扫清合规障碍,筑牢风控防线,成为您企业专属的AI法律顾问。

SimilarWeb流量提升

SimilarWeb流量提升

稳定高效的流量提升解决方案,助力品牌曝光

稳定高效的流量提升解决方案,助力品牌曝光

Sora2视频免费生成

Sora2视频免费生成

最新版Sora2模型免费使用,一键生成无水印视频

最新版Sora2模型免费使用,一键生成无水印视频

下拉加载更多