算法艺术

来源：内容改编自人类/技能（麻省理工学院）。

算法哲学是通过代码表达的计算美学运动。输出.md 文件（哲学）、.html 文件（交互式查看器）和.js 文件（生成算法）。

这分两步发生：

1. 算法哲学创造（.md 文件）
2. 通过创建 p5.js 生成艺术（.html +.js 文件）来表达

首先，承担这个任务：

算法哲学创造

首先，创建一个算法哲学（不是静态图像或模板），该哲学将通过以下方式进行解释：

• 计算过程、涌现行为、数学之美
• 种子随机性、噪声场、有机系统
• 粒子、流、场、力
• 参数变化和受控混沌

批判性理解

• 收到的内容：用户需要考虑的一些微妙的输入或指令，但用作基础；它不应该限制创作自由。
• 创造了什么：算法哲学/生成美学运动。
• 接下来会发生什么：相同的版本接受这一理念并用代码表达它 - 创建 p5.js 草图，其中 90% 是算法生成，10% 是基本参数。

考虑这种方法：

• 为生成艺术运动撰写宣言
• 下一阶段涉及编写使其变为现实的算法

哲学必须强调：算法表达。突发行为。计算之美。种子变异。

如何产生算法哲学

命名运动（1-2 个单词）：“有机湍流”/“量子谐波”/“紧急静止”

阐明理念（4-6 段 - 简洁但完整）：

为了捕捉算法的本质，请通过以下方式表达这一哲学的体现：

• 计算过程和数学关系？
• 噪声函数和随机性模式？
• 粒子行为和场动力学？
• 时间演化和系统状态？
• 参数变化和突发复杂性？

关键指南：

• 避免冗余：每个算法方面都应该提及一次。避免重复有关噪声理论、粒子动力学或数学原理的概念，除非增加新的深度。
• 重复强调工艺：这一理念必须多次强调，最终的算法应该看起来像是花了无数个小时来开发、经过精心改进，并且来自于该领域绝对顶尖的人。这个框架是必不可少的——重复诸如“精心设计的算法”、“深厚的计算专业知识的产物”、“艰苦的优化”、“大师级的实现”等短语。
• 留下创意空间：具体说明算法方向，但要足够简洁，以便下一个克劳德有空间以极高的工艺水平做出解释性的实现选择。

该哲学必须指导下一个版本以算法方式表达想法，而不是通过静态图像。美在于过程，而不是最终的画面。

哲学例子

“有机湍流” 哲学：混沌源于自然法则，秩序源于无序。 算法表达式：分层柏林噪声驱动的流场。数千个粒子遵循矢量力，它们的轨迹累积成有机密度图。多个噪声八度音阶创建动荡区域和平静区域。颜色是由速度和密度产生的——快的粒子燃烧明亮，慢的粒子褪色成阴影。该算法运行直至平衡——一种精心调整的平衡，其中每个参数都由计算美学大师通过无数次迭代进行细化。

“量子谐波” 原理：离散实体表现出波状干涉图案。 算法表达式：在网格上初始化的粒子，每个粒子都携带一个通过正弦波演变的相位值。当粒子靠近时，它们的相位会发生干涉——相长干涉会产生明亮的节点，相消干涉会产生空隙。简单的简谐运动会产生复杂的曼荼罗。经过精心频率校准的结果，每个比率都经过精心选择，以产生共鸣之美。

“递归耳语” 理念：跨尺度的自相似性，有限空间的无限深度。 算法表达式：递归细分的分支结构。每个分支都稍微随机化，但受到黄金比例的限制。 L-系统或递归细分生成树状形式，感觉既数学又有机。微妙的噪声扰动破坏了完美的对称性。线宽随着每个递归级别而减小。每个分支角度都是深入数学探索的产物。

“场动力学” 哲学：无形的力量通过对物质的影响而变得可见。 算法表达式：由数学函数或噪声构造的向量场。粒子在边缘诞生，沿着场线流动，在达到平衡或边界时死亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹——无形力量的幽灵般的证据。通过力平衡精心编排的计算舞蹈。

“随机结晶” 理念：随机过程结晶为有序结构。 算法表达：随机圆堆积或Voronoi镶嵌。从随机点开始，让它们通过松弛算法演化。细胞相互推开直至达到平衡。基于像元大小、邻居计数或距中心的距离的颜色。出现的有机瓷砖感觉既随机又不可避免。每一颗种子都会产生独特的水晶之美——这是大师级生成算法的标志。

这些是精简示例。实际的算法哲学应该是 4-6 个实质性段落。

基本原则

• 算法哲学：创建通过代码表达的计算世界观
• 过程重于产品：始终强调算法的执行带来的美感 - 每次运行都是独一无二的
• 参数表达：思想通过数学关系、力、行为进行交流 - 而不是静态组合
• ARTISTIC FREEDOM：下一个克劳德用算法诠释哲学——提供创意实现空间
• 纯粹的生成艺术：这是关于制作生活算法，而不是具有随机性的静态图像
• 专家工艺：反复强调最终算法必须经过无数次迭代精心制作和完善，是计算美学领域绝对顶尖的人深厚专业知识的产物

算法哲学应该有 4-6 段长。 用诗意的计算哲学填充它，汇集预期的愿景。避免重复相同的要点。将此算法原理输出为.md 文件。

推论概念种子

关键步骤：在实现算法之前，从原始请求中识别微妙的概念线索。

基本原则： 这个概念是一个微妙的、嵌入算法本身的利基参考——并不总是字面意思，总是复杂的。熟悉该主题的人应该直观地感受到它，而其他人只是体验到精湛的生成构图。算法哲学提供了计算语言。推导的概念提供了灵魂——安静的概念DNA，无形地编织到参数、行为和涌现模式中。

这是非常重要：参考文献必须精炼，以增强作品的深度，但又不会暴露自己。就像爵士音乐家通过算法和声引用另一首歌一样思考 - 只有那些知道的人才能捕捉到它，但每个人都欣赏生成之美。

P5.JS 实现

建立哲学和概念框架后，通过代码表达它。在继续之前先停下来收集想法。仅使用创建的算法原理和以下说明。

第 0 步：首先阅读模板

重要：在编写任何 HTML 之前：

1. 使用读取工具读取templates/viewer.html
2. 研究确切的结构、样式和人性化品牌
3. 使用该文件作为文字起点 - 不仅仅是灵感
4. 保持所有固定部分完全如图所示（标题、侧边栏结构、人类颜色/字体、种子控件、操作按钮）
5. 仅替换文件注释中标记的 VARIABLE 部分（算法、参数、参数的 UI 控件）

避免：

• 从头开始创建 HTML
• 发明定制样式或配色方案
• 使用系统字体或深色主题
• 更改侧边栏结构

遵循这些做法：

• 复制模板的精确 HTML 结构
• 保留人类品牌（Poppins/Lora 字体、浅色、渐变背景）
• 维护侧边栏布局（种子 -> 参数 -> 颜色？ -> 操作）
• 仅替换p5.js算法和参数控件

模板是基础。建立在它的基础上，而不是重建它。

要创造具有生命力和呼吸的画廊品质的计算艺术，请以算法哲学为基础。

技术要求

种子随机性（艺术块图案）：

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

参数结构 - 遵循理念：

要建立从算法哲学中自然出现的参数，请考虑：“可以调整该系统的哪些质量？”

let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};

要设计有效的参数，请重点关注系统需要可调的属性，而不是考虑“模式类型”。

核心算法 - 表达哲学：

关键：算法哲学应该决定构建什么。

要通过代码表达哲学，请避免思考“我应该使用哪种模式？”而是思考“如何通过代码表达这种哲学？”

如果哲学是关于有机涌现，请考虑使用：

• 随着时间的推移积累或增长的元素
• 受自然规则约束的随机过程
• 反馈循环和交互

如果哲学是关于数学之美，请考虑使用：

• 几何关系和比率
• 三角函数和谐波
• 精确的计算创造出意想不到的模式

如果理念是关于受控混乱，请考虑使用：

• 严格范围内的随机变化
• 分岔和相变
• 从无序中产生秩序

算法源于哲学，而不是选项菜单。

为了指导实施，让概念本质告知创造性和原创性的选择。构建一些能够表达此特定请求的愿景的东西。

画布设置：标准 p5.js 结构：

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}

工艺要求

关键：为了达到精通，创建的算法感觉像是由生成艺术家大师通过无数次迭代而出现的。仔细调整每个参数。确保每种模式都有目的地出现。这不是随机噪音——这是通过深厚的专业知识精炼而成的受控混沌。

• 平衡：没有视觉噪音的复杂性，没有僵化的秩序
• 色彩和谐：深思熟虑的调色板，而不是随机的 RGB 值
• 构图：即使是随机的，也能保持视觉层次和流动
• 性能：流畅执行，针对动画实时进行优化
• 再现性：相同的种子总是产生相同的输出

输出格式

输出：

1. 算法哲学 - 作为降价或解释生成美学的文本
2. 单个 HTML Artifact - 从templates/viewer.html构建的独立交互式生成艺术（请参阅步骤 0 和下一节）

HTML 工件包含所有内容：p5.js（来自 CDN）、算法、参数控件和 UI - 所有这些都在一个文件中，可立即在 claude.ai 工件或任何浏览器中运行。从模板文件开始，而不是从头开始。

交互式工件创建

提醒：templates/viewer.html应该已被读取（参见步骤 0）。使用该文件作为起点。

为了探索生成艺术，请创建一个独立的 HTML 工件。确保此工件立即在 claude.ai 或任何浏览器中运行 - 无需设置。将所有内容嵌入内联。

关键：什么是固定的，什么是可变的

templates/viewer.html文件是基础。它包含所需的确切结构和样式。

已修复（始终包含如图所示的内容）：

• 布局结构（标题、侧边栏、主画布区域）
• 人性化品牌（UI 颜色、字体、渐变）
• 侧边栏中的种子部分：
  • 种子展示
  • 上一个/下一个按钮
  • 随机按钮
  • 跳转到种子输入 + Go 按钮
• 侧边栏中的操作部分：
  • 重新生成按钮
  • 重置按钮

变量（为每件艺术品定制）：

• 整个p5.js算法（设置/绘制/类）
• 参数对象（定义艺术需要什么）
• 侧栏中的参数部分：
  • 参数控制数量
  • 参数名称
  • 滑块的最小/最大/步长值
  • 控制类型（滑块、输入等）
• 颜色部分（可选）：
  • 有些艺术需要颜色选择器
  • 有些艺术可能使用固定颜色
  • 有些艺术可能是单色的（不需要颜色控制）
  • 根据艺术需求决定

每件艺术品都应该有独特的参数和算法！ 固定部分提供一致的用户体验 - 其他一切都表达了独特的视觉。

所需功能

1.参数控制

• 数字参数滑块（粒子数、噪声等级、速度等）
• 调色板颜色的颜色选择器
• 参数变化实时更新
• 重置按钮可恢复默认值

2.种子导航

• 显示当前种子数
• “上一个”和“下一个”按钮可循环浏览种子
• 随机种子的“随机”按钮
• 输入字段跳转到特定种子
• 根据要求生成 100 个变体（种子 1-100）

3.单一神器结构

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>

关键：这是一个单一的工件。没有外部文件，没有导入（p5.js CDN 除外）。一切都内联。

4.实施细节 - 构建侧边栏

侧边栏结构：

1.种子（已修复） - 始终包含如下所示的内容：

• 种子展示
• 上一个/下一个/随机/跳转按钮

2.参数（变量） - 为艺术创建控件：

<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>

添加与参数一样多的控制组 div。

3.颜色（可选/可变） - 包括艺术作品是否需要可调整的颜色：

• 如果用户应该控制调色板，请添加颜色选择器
• 如果艺术品使用固定颜色，请跳过此部分
• 如果艺术品是单色的则跳过

4.操作（已修复） - 始终完全包含所示内容：

• 重新生成按钮
• 重置按钮
• 下载 PNG 按钮

要求：

• 种子控制必须有效（上一个/下一个/随机/跳转/显示）
• 所有参数必须有 UI 控件
• 重新生成、重置、下载按钮必须有效
• 保持人性化品牌（UI 样式，而不是艺术颜色）

使用神器

HTML 工件立即生效：

1. 在 claude.ai 中：显示为交互式工件 - 立即运行
2. 作为文件：在任何浏览器中保存并打开 - 无需服务器
3. 共享：发送 HTML 文件 - 它是完全独立的

变化与探索

该工件默认包括种子导航（上一个/下一个/随机按钮），允许用户探索变体而无需创建多个文件。如果用户想要突出显示特定的变体：

• 包括种子预设（“变体 1：种子 42”、“变体 2：种子 127”等按钮）
• 添加“图库模式”，并排显示多个种子的缩略图
• 全部都在同一个工件内

这就像从同一个盘子创建一系列印刷品 - 算法是一致的，但每个种子都揭示了其潜力的不同方面。交互性意味着用户通过探索种子空间来发现自己的最爱。

创作过程

用户请求 -> 算法哲学 -> 实现

每个请求都是独一无二的。该过程涉及：

1. 解释用户的意图 - 正在寻求什么审美？
2. 创建算法哲学（4-6 段）描述计算方法
3. 用代码实现它 - 构建表达这一理念的算法
4. 设计适当的参数 - 什么应该是可调的？
5. 构建匹配的 UI 控件 - 这些参数的滑块/输入

常数：

• 人性化品牌（颜色、字体、布局）
• 种子导航（始终存在）
• 独立的 HTML 工件

其他一切都是可变的：

• 算法本身
• 参数
• 用户界面控件
• 视觉效果

要取得最佳结果，请相信创造力并让理念指导实施。

资源

此技能包括有用的模板和文档：

• templates/viewer.html：所有 HTML 工件的必需起点。

  • 这是基础 - 包含精确的结构和人性化品牌
  • 保持不变：布局结构、侧边栏组织、人择颜色/字体、种子控件、操作按钮
  • 替换：参数部分中的 p5.js 算法、参数定义和 UI 控件
  • 文件中的大量注释准确标记了要保留的内容和要替换的内容

• templates/generator_template.js：p5.js 最佳实践和代码结构原则的参考。

  • 展示如何组织参数、使用种子随机性、结构类
  • 不是模式菜单 - 使用这些原则来构建独特的算法
  • 在 HTML 工件中内嵌嵌入算法（不要创建单独的.js 文件）

重要提醒：

• 模板是起点，而不是灵感
• 算法是创造独特事物的地方
• 不要复制流场示例 - 构建哲学要求的内容
• 但请务必在模板中保留准确的 UI 结构和人性化品牌

资源文件

许可证.txt

下载LICENSE.txt

二进制资源

模板/generator_template.js

下载模板/generator_template.js

二进制资源

模板/viewer.html

下载模板/viewer.html

二进制资源

参见 GitHub

参见 GitHub