【Hacker News搬运】展示HN：我为SIGGRAPH制作了一个交互式绘图仪艺术展览

[hackernews]

Title: Show HN: I built an interactive plotter art exhibit for SIGGRAPH

展示HN：我为SIGGRAPH制作了一个交互式绘图仪艺术展览

Text: I'm enthralled with using pen plotters to make generative art. Last August at SIGGRAPH, I built an interactive experience for others to see how code can be used to make visual art. The linked blog post is my trials and tribulations of linking a MIDI controller to one of these algorithms and sending its output to a plotter, so that people may witness the end-to-end experience.

I-；我着迷于使用笔式绘图仪制作生成艺术。去年8月，在SIGGRAPH，我为其他人建立了一个互动体验，让他们了解如何使用代码制作视觉艺术。链接的博客文章是我将MIDI控制器链接到其中一个算法并将其输出发送到绘图仪的经历，这样人们就可以见证端到端的体验。

hn link

Url: https://lostpixels.io/writings/building-interactive-plotter-art

标题：构建一个互动式绘图艺术装置
作者：未提供
发布日期：未提供
顶部图片链接：未提供
文本：

我有幸参加了在洛杉矶的SIGGRAPH 2023，我决定展示艺术、代码和笔式绘图仪如何融为一体。为此，我创建了一个互动式艺术装置，将这三者结合在一起。
构建一个互动式艺术装置需要仔细规划和应用架构。在这篇文章中，我将解释我的决策和我是如何到达这些决策的。
我的设计目标是简单的：一个人可以走上去，使用MIDI控制器进行操作，在屏幕上看到结果图像，然后将图像发送到笔式绘图仪。绘图仪绘制出他们独特的画作，他们可以将它带回家并框起来。
然而，实施过程中有很多细节需要注意：
应用程序必须快速。转动MIDI控制器的旋钮应该提供实时反馈。
与笔式绘图仪的兼容性。它只接受矢量资产。
处理艺术作品队列 - 在人群的情况下，所有人同时来到装置前。
绘图应在最多10分钟内完成。
生成算法
我开始在P5.JS中构思一些简单的生成算法。这些算法具有特定的主题（光线追踪、螺旋和箱子堆叠）并且是为了制作有趣但快速的绘图仪绘图而自定义调整的。
笔式绘图仪移动迅速，但仍可能被成千上万的笔移动所拖累。我的某些艺术作品需要机器绘制超过10个小时，这在西格码实验室的环境中是不行的，那里有各种各样的艺术和技术体验围绕着访客，他们会很快被其他事物吸引。如果我能让他们注意力集中超过5分钟，那将是一个胜利。
我通过一些技巧加快了绘图操作，注意限制每条线的独立性，通过组合它们来减少个人线条。我能够使用合理的速度设置在我的Axidraw上实现三个独立算法的亚10分钟绘图。
添加交互
通常，生成艺术是完全自主的，伪随机数生成器被调用以创建一组随机化的参数。对于AAS，我打算拔出随机性，并插入用户控制。
我评估了几种输入设备选项。我选择了Intech Grid系列MIDI控制器，因为它们的简单性和模块化。这些控制器旨在被拼接在一起，提供正确的输入数量，以鼓励愉快的探索而不会令人不知所措。
硬件和软件选定后，我开始将它们连接起来。WebMIDI API是一个很好的方式来与任何MIDI设备发送和接收数据，并且与JavaScript无缝接口。很快，我在我的P5.JS应用程序中接受MIDI信号并调整参数。
渲染和性能
当我制作绘图仪艺术时，我使用P5.JS和P5-SVG插件渲染我的图形为SVGs。这个工作流程允许我以矢量形式下载文件。然后，我可以将它们上传到Saxi，一个控制我的Axidraw笔式绘图仪的实用程序。代码艺术和笔式绘图仪之间的转换几乎是无缝的。
尽管如此，用这种方法渲染图形并以60FPS响应用户输入开始变得缓慢。我发现，更新DOM以新的SVG元素每秒60次并不是理想的。我回到了P5.JS典型的渲染方法，利用HTML画布。它立即解决了所有帧率问题，并使应用程序在旋转MIDI控制器时感觉更加流畅。
为了拥有画布的性能和SVG的兼容性，我创建了两个P5.JS实例，一个用于每个渲染目标。我只在应用程序传输到云作业管理器之前渲染矢量实例。
我需要构建应用程序UI以显示有用的提示、入门屏幕和一些提交步骤。为此，我引入了Svelte。尽管我本可以使用React，但我喜欢Svelte的易用性。React在这里感觉过于笨重，因为我不在乎组件重用或应用程序渲染性能在这一层。然而，React最终还是以某种方式进入了堆栈。
在研究MIDI时，我意识到我可以用这些信号告诉我的控制器改变其LED按钮的颜色，以指示不同的按钮交互，从而添加另一种用户了解过程的机制。
在应用程序的步骤和页面不断增长的同时，用户只从屏幕获得视觉反馈。我提出了一个主意，使用这些信号告诉我的控制器改变其LED按钮的颜色，以指示不同的按钮交互，从而添加另一种用户了解过程的机制。
通过API抓取
成功连接我的应用程序到MIDI后，我将操作移到了iPad上，它将是我安装的载体。我选择iPad是因为它们有高质量的显示屏、USB-C接口和相对快速的处理器。最重要的是，我已经拥有了两个iPad。
我意识到了一个重要的问题：iPad只支持Safari，而Safari不支持WebM

Post by: cosiiine

Comments:

blazerunner: This is a really nice pair of a physical plus digital interface. I like that the button actions are clear in the 'composition' mode but the faders and knobs are not - makes it a bit more playful as you need to watch as you adjust values to understand what's changing purely from an output perspective rather than thinking in terms of parameters.<p>Novation Circuit (at least the OG) did this with synth parameters with similar effect - you need to listen to hear the effect, as each patch you could be changing a different parameter (for better or worse).<p>Nice writeup and great-looking project, I wish I could play with it in real life!

blazerunner: 这是一对非常好的物理加数字接口。我喜欢按钮动作在；组成-7；模式，但音量控制器和旋钮不是-这让它更有意思，因为你需要观看调整值以了解；It’纯粹从产出的角度而不是从参数的角度来思考变化<p> Novation Circuit（至少是OG）使用具有类似效果的合成参数来实现这一点——你需要倾听效果，因为每个补丁都可能更改不同的参数（无论好坏）<p> 写得不错，项目也很好看，我希望我能在现实生活中使用它！

AstroJetson: You lucked out being able to get the plotters. <a href="https://www.evilmadscientist.com/2024/bantam-tools/" rel="nofollow">https://www.evilmadscientist.com/2024/bantam-tools/</a> Evil Mad Scientist has been acquired by bantam-tools so plotters are out of stock for awhile, along with some of the cool additions they made.

AstroJetson: 你很幸运能找到策划者<a href=“https://；&#x2F；www.evilmadnester.com/&#x2F！2024&#x2F：bantam tools&#x2F”rel=“nofollow”>https://&#x2F；www.evilmadnester.com/x2F；2024；bantam工具</a> 《邪恶疯狂科学家》已经被bantam工具收购，所以策划者和他们制作的一些很酷的补充都已经脱销了一段时间。

joemi: I love it. I've been thinking of generative art in the physical world somewhat along these lines for a while now but haven't actually gotten around to the "physical world" part of these dreams yet. Mostly just been having fun coming up with interesting generative stuff in Processing. Your system seems really well designed, and that UI is pretty great. I'm jealous both of the well-designed system you made, and that you can use it to make things (I have many bare walls I intend to one day fill with generative art I've made).

joemi: 我喜欢它；一段时间以来，我一直在思考物理世界中的生成艺术，但还没有；并没有真正抽出时间来讨论“；物理世界”；这些梦想的一部分。大多数人只是在处理中想出有趣的生成性东西。你的系统看起来设计得很好，UI也很棒。I-；我嫉妒你制作的精心设计的系统，也嫉妒你可以用它来制作东西（我有很多裸露的墙壁，我打算有一天用我制作的生成艺术来填充）。

beardicus: very nice work and documentation. i did a little "plotter photo booth" with a homemade pen plotter many years ago and it was a ton of fun. folks love to see things moving off-screen!

beardicus: 非常好的工作和文档。我做了一点“；绘图仪照相亭”；很多年前用自制的笔式绘图仪，非常有趣。人们喜欢看到屏幕上的东西移动！