There Is(Ǝ) – Such That (∋)：一种基于向量与过程的时钟可视化语言

背景

这篇文章源自 Hacker News 社区，介绍了一款名为 There Is(Ǝ) – Such That (∋) 的创意编程工具。作者目前正参与 Recurse Center 为期六周的编程集训营。其初衷是为“Impossible Day”（不可能之日）活动制作一种能生成时钟的语言。在初步原型开发后，作者进一步提炼了概念，开发了第二个原型，并最终形成了这款基于浏览器的可视化编辑工具。

该工具的核心设计理念是将时间抽象为向量空间，通过组合不同的数学元素（向量、标量）和视觉元素（字形、栖息地），让用户能够“编织”出独特的程序化时钟。

核心内容

There Is(Ǝ) – Such That (∋) 不仅仅是一个时钟生成器，更是一个基于节点图（Node Graph）的可视化编程语言。它构建在一个正方形的画布上，画布内切一个半径为 $\rho$ 的最大圆，所有计算均围绕这一几何中心展开。

1. 基础数据类型：时间与向量

该语言的核心是“时间向量”。时间被分解为不同层级的向量：

• 乌鸦 (Raven)：代表小时向量。
• 渡鸦 (Crow)：代表分钟向量。
• 喜鹊 (Mag-pi)：代表秒向量。
• 原点 (Origin)：代表零向量。

这些向量构成了时钟运动的基础。

2. 数学运算：标量与向量变换

向量可以通过运算转化为标量 (Scalars)，即单一数值。所有标量均通过画布半径 $\rho$ 进行归一化处理：

• 归一化点积：./ρ²，用于衡量两个向量的关系。
• 归一化模长：||˙||/ρ。
• 归一化水平/垂直分量：→/ρ 和 ↑/ρ。

标量之间可以进行标准的四则运算：

• ⊞ 加法
• − 减法
• ⊠ 乘法
• ⊡ 除法

同时，向量本身也可以进行加法、减法、旋转和乘法运算，形成“修改后的向量”，它们同样拥有水平和垂直分量，类似于坐标系中的点或位置。

3. 视觉呈现：字形与栖息地

• 字形 (Glyphs)：负责将数据可视化。它们接收向量作为输入，并在画布上输出图形。例如，月亮、太阳和星星位于向量的坐标点上，线条则连接两个向量。每个字形都可以进行参数调整。
• 栖息地 (Habitats)：用于增加画面的层次感和复杂性，它们不仅绘制点，而是“涂抹”整个画布。栖息地包括草地、树木、星云、元轨迹、蛋、焦点（舷窗）和苔藓等。向量输入会轻微改变栖息地的动态效果。

4. 全局调优 (Tuning ◍)

用户可以通过参数调整整个作品的呼吸感和节奏：

• 每日周期数：时钟在24小时内循环的次数。
• 每周期小时数：乌鸦循环的基础。
• 默认呼吸深度与速度：所有元素继承的静止节奏。
• 默认线条粗细。
• 主题：包括氛围、单色、对比度、cividis、tri、植物等配色方案。
• 颜色设置：背景色、默认线条色、默认形状色。
• 帧率。

5. 编辑器架构：织布机 (Loom) 与编织 (Weave)

该工具采用无文字（或极少文字）的界面设计，主要依靠符号和手绘图标：

• 织布机 (Loom)：这是编辑界面，持有组成时钟的所有节点、箭头和全局变量。
• 节点 (Nodes)：代表上述的数据类型（向量、标量等）。用户可以从调色板拖拽节点到 Loom，并用箭头连接它们。
• 编织 (Weave)：编译引擎。它将 Loom 中的节点图编译成 p5.js 草图，并在预览 iframe 中实时渲染。
• 实时反馈：Loom 中的任何更改都会立即重新编织（re-weave）预览中的时钟。

6. 技术栈与导出

• 前端框架：使用 Svelte 5（利用 runes、snippets、事件属性），配合 TypeScript、ESLint 和 svelte-check。
• 构建工具：Vite。
• 节点图库：Svelte Flow。
• 渲染引擎：p5.js，用于在画布上渲染时钟。
• 自包含导出：导出的 HTML 文件内嵌所有资源，支持离线打开。用户可以将其托管在个人网站（如 /clock 路径）。
• 数据存储：使用 localStorage 进行自动保存、撤销历史、节点位置及偏好设置。

7. 设计哲学与特性

• 无文字界面：按钮使用符号（Sigils），节点使用手绘 PNG 图标，仅在头部操作栏保留文字标签。工具提示可根据用户反馈开关。
• 程序化时钟：虽然编辑界面使用静态图标，但导出的时钟完全由 p5 原语和随机性生成，确保每次渲染都是动态的。
• 单一时间真理：编译后的草图中只有一个 dayFraction 函数，用于计算一天中的位置。所有鸟类的角度都由此派生。修改 cyclesPerDay 或 hoursPerCycle 即可重新调整时钟节奏。
• 可视化调试模式：点击 ⌖ 可开启调试模式，出现滑块可 scrub（拖动）遍历全天，选中的节点会高亮显示。
• 命名含义：
  • Ǝ (There is / 存在)：代表编辑侧（Loom），即“存在”这些组件。
  • ∋ (Such that / 使得)：代表渲染侧（Weave），即“使得”这些组件成为可见的时钟。

关键要点

• 向量化时间观：该语言将时间抽象为小时、分钟、秒的向量，并通过归一化标量进行数学运算，实现了时间与几何空间的统一。
• 可视化编程：基于 Svelte Flow 的节点图编辑器，通过连接“织布机”中的节点来构建逻辑，无需编写传统代码。
• 实时编译与预览：利用 p5.js 和 Weave 引擎，实现编辑即预览，所有更改即时反映在画布上。
• 自包含的 HTML 输出：导出的文件是独立的 HTML，内嵌所有逻辑和样式，便于分享和离线使用，非常适合嵌入博客或个人网站。
• 极简主义 UI：采用符号和手绘图标，减少文字干扰，强调视觉直觉。
• 高度可定制性：通过“栖息地”、“字形”和“调优参数”，用户可以创造出从极简几何到复杂自然主义风格的各类时钟。
• 技术栈现代：基于 Svelte 5、TypeScript 和 Vite，保证了开发体验和性能。

意义与影响

There Is(Ǝ) – Such That (∋) 代表了创意编程（Creative Coding）领域的一个有趣趋势：将复杂的程序逻辑转化为直观的视觉隐喻。

1. 降低创意编程门槛：通过节点图和数学向量，它让非程序员也能理解时间、运动和空间的关系，并通过组合简单的元素创造出复杂的视觉效果。
2. 个人化表达的新载体：时钟作为日常物品，通常具有标准化的外观。该工具允许用户将时间感知个性化，创造出具有独特美学和节奏的“不可能之日”时钟，成为个人数字身份的一种表达。
3. Web 原生创意工具：完全基于浏览器运行，无需安装软件，且导出为自包含 HTML，体现了 Web