algorithmic-art - SKILL

shallwegzgdj

164人浏览 · 2026-09-06 12:18:45

shallwegzgdj · 2026-09-06 12:18:45 发布

name: algorithmic-art
description: “Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).”
risk: critical
source: community
date_added: “2026-02-27”

算法哲学是一种计算美学运动，然后通过代码表现出来。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。

这分两步进行：

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

首先，执行这个任务：

算法哲学创作

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

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

关键理解

收到的内容：用户提供的一些细微输入或指示，可作为考虑依据，但应用作基础；不应限制创作自由。
创造了什么：一种算法哲学/生成美学运动。
接下来发生的事情：同一个版本接受这种哲学并将其以代码表达——创建的 p5.js 草图中，90% 是算法生成，10% 是基本参数。

考虑这种方法：

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

哲学必须强调：算法表达。涌现行为。计算之美。基因变异。

如何生成算法哲学

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

阐述哲学（4-6段 - 简明但完整）

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

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

关键指南：

避免冗余：每个算法方面只应提及一次。除非增加新的深度，否则避免重复噪声理论、粒子动力学或数学原理的概念。
反复强调工艺：这一理念必须多次强调最终的算法应该看起来像是经过无数小时的开发、经过细心打磨，并且来自该领域顶尖专家。这种表述方式至关重要——重复使用诸如“精心制作的算法”、“深厚计算专业知识的产物”、“精益求精的优化”、“大师级实现”之类的短语。
留出创作空间：对算法方向保持具体，但要足够简明，使下一个Claude能够在极高的工艺水平上进行解释性实现选择。

这种理念必须指导下一版本通过算法化的方式表达思想，而不是通过静态图像。美存在于过程之中，而非最终画面。

哲学例子

“有机动荡”
哲学：混乱受自然法则约束，秩序从无序中产生。
算法表达：由分层柏林噪声驱动的流场。成千上万的粒子跟随矢量力，它们的轨迹积累成有机密度图。多重噪声倍频产生湍流区域和静谧区域。颜色由速度和密度生成——快速粒子明亮燃烧，缓慢粒子逐渐暗淡成影。算法运行直到达到平衡——一个经过精密调整的平衡，每个参数都经过计算美学大师通过无数次迭代精炼而成。

量子谐波
哲学：离散实体表现出类似波的干涉图案。
算法表达式：粒子在网格上初始化，每个粒子携带一个通过正弦波演变的相位值。当粒子接近时，它们的相位会相互干涉——建设性干涉产生明亮的节点，破坏性干涉产生空洞。简谐运动生成复杂的涌现曼陀罗。这是经过精心频率校准的结果，每一个比率都被仔细选择以产生共鸣的美感。

“递归低语”
哲学：跨尺度的自相似，有限空间中的无限深度。
算法表达：递归细分的分支结构。每个分支略有随机性，但受黄金比例约束。L系统或递归细分生成既具有数学感又有自然感的树状形态。微妙的噪声扰动打破完美对称。每次递归层级的线条粗细逐渐减小。每个分支角度都是深入数学探索的产物。

“场动力学”
哲学：通过它们对物质的影响使看不见的力量显现出来。
算法表达：由数学函数或噪声构建的向量场。粒子在边缘生成，沿着场线流动，当它们达到平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示轨迹——不可见力的幽灵般痕迹。一场通过力的平衡精心编排的计算舞蹈。

“随机结晶”
哲学：随机过程结晶为有序结构。
算法表达式：随机圆形填充或沃罗诺伊镶嵌。从随机点开始，通过松弛算法让它们演化。细胞相互推开直到达到平衡。根据细胞大小、邻居数量或距离中心的距离来着色。生成的有机铺砖既感觉随机又不可避免。每一个种子都会产生独特的晶体美——这是一种大师级生成算法的标志。

这些是简化的示例。实际的算法理念应该是4-6个实质性段落。

基本原则

算法哲学：创建一种通过代码表达的计算世界观
过程重于结果：始终强调美源自算法的执行——每一次运行都是独一无二的
参数表达：思想通过数学关系、力学、行为来传达——而非静态的组合
艺术自由：下一个克劳德以算法方式解读哲学——提供创造性的实现空间
纯生成艺术：这是关于创造活生生的算法，而不是带有随机性的静态图像
专业工艺：反复强调最终算法必须感觉精心制作，经过无数次迭代精炼，由处于计算美学领域顶尖的专家深厚专业知识所创造

算法哲学应为4-6段落。 用充满诗意的计算哲学来表达预期的愿景。避免重复相同的观点。将此算法哲学作为.md文件输出。

推导概念种子

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

基本原则：
这个概念是一个微妙的、嵌入算法本身的特定领域引用——不总是字面意义上的，总是非常精妙。熟悉这一主题的人应该能够直觉地感受到它，而其他人则只是体验到一场精湛的生成创作。算法哲学提供了计算语言。推导出的概念提供了灵魂——那种静静隐匿于参数、行为和涌现模式中的概念性DNA。

这是非常重要的：参考必须如此精致，以至于在不张扬自己的情况下提升作品的深度。像爵士乐手通过算法和声引用另一首歌曲一样思考——只有懂的人会察觉，但每个人都会欣赏这种生成的美感。

P5.JS 实现

在建立了哲学和概念框架之后，通过代码表达它。在继续之前暂停以整理思路。仅使用所创建的算法哲学和以下指令。

⚠️ 步骤 0：先阅读模板 ⚠️

关键：在编写任何 HTML 之前：

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

避免：

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

遵循以下做法：

✅ 复制模板的完整 HTML 结构
✅ 保持 Anthropic 品牌（Poppins/Lora 字体、浅色调、渐变背景）
✅ 保持侧边栏布局（种子 → 参数 → 颜色？ → 操作）
✅ 仅替换 p5.js 算法和参数控制

模板是基础。在它之上构建，而不是重建它。

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

技术要求

有种子随机性（Art Blocks 图案）：

// 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 值
构图：即使在随机性中，也要保持视觉层次和流动感
性能：执行流畅，如果是动画则针对实时进行了优化
可重复性：相同的种子总是产生相同的输出

输出格式

输出：

算法哲学 - 作为解释生成美学的 Markdown 或文本
单个 HTML 工件 - 自包含的互动生成艺术，基于 templates/viewer.html 构建（见步骤 0 和下一节）

该 HTML 工件包含所有内容：p5.js（来自 CDN）、算法、参数控制和用户界面——所有内容都在一个文件中，可立即在 claude.ai 工件或任何浏览器中使用。从模板文件开始，而不是从头开始。

互动文物创作

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

为了允许探索生成艺术，创建一个单一的、自包含的 HTML 文档。确保这个文档可以立即在 claude.ai 或任何浏览器中运行——无需设置。将所有内容内嵌。

关键：固定的 vs 可变的

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

已修复（始终按显示的方式包含）：

布局结构（头部、侧边栏、主画布区域）
Anthropic 品牌（UI 颜色、字体、渐变色）
侧边栏中的种子部分：
- 种子展示
- 上一页/下一页按钮
- 随机按钮
- 跳转到种子输入前往按钮
侧边栏中的操作部分：
- 重新生成按钮
- 重置按钮

变量（针对每件艺术品自定义）：

整个 p5.js 算法（setup/draw/类）
参数对象（定义艺术所需的内容）
侧边栏中的参数部分：
- 参数控制数量
- 参数名称
- 滑块的最小值/最大值/步长值
- 控件类型（滑块、输入框等）
颜色部分（可选）：
- 有些艺术需要颜色选择器
- 有些艺术可能使用固定颜色
- 有些艺术可能是单色的（不需要颜色控制）
- 根据艺术的需要作出决定

每件艺术作品都应该有独特的参数和算法！ 固定的部分提供一致的用户体验——其余的部分则表达独特的创意视角。

必需功能

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 按钮

要求:

种子控制必须工作（上一页/下一页/随机/跳转/显示）
所有参数都必须有用户界面控件
重新生成、重置、下载按钮必须可用
保留Anthropic品牌（UI样式，不包括艺术颜色）

使用该神器

HTML 工件立即工作：

在 claude.ai 中：显示为互动式工件——即时运行
作为文件：保存并在任何浏览器中打开 - 不需要服务器
分享：发送 HTML 文件——它是完全自包含的

变化与探索

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

包括种子预设（按钮用于“变体 1：种子 42”，“变体 2：种子 127”等）
添加一个“画廊模式”，可以并排显示多个种子的缩略图
全部在同一个单一的工件中

这就像从同一块版材上制作一系列版画——算法是一致的，但每一个种子都揭示了其潜力的不同方面。互动性意味着用户可以通过探索种子空间发现自己喜欢的内容。

创作过程

用户请求 → 算法哲学 → 实现

每个请求都是独特的。流程包括：

解读用户意图 - 正在追求什么样的审美？
创建一种算法哲学（4-6段）描述计算方法
在代码中实现它 - 构建能够表达这一理念的算法
设计适当的参数 - 应该可以调节哪些？
构建匹配的 UI 控件 - 为这些参数设置滑块/输入框

常量：

Anthropic 品牌（颜色、字体、布局）
种子导航（始终存在）
自包含的 HTML 工件

其他一切都是可变的：

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

为了取得最佳效果，相信创造力，并让哲学指导实施。

资源

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

templates/viewer.html：所有 HTML 工件的必需起点。
- 这是基础 - 包含确切的结构和Anthropic品牌
- 保持不变：布局结构、侧边栏组织、Anthropic 颜色/字体、种子控件、操作按钮
- 替换：Parameters 部分中的 p5.js 算法、参数定义和 UI 控件
- 文件中的详细注释明确标出应保留和替换的内容
templates/generator_template.js：p5.js 最佳实践和代码结构原则的参考。
- 展示如何组织参数、使用种子随机性、构建类结构
- 不是模式菜单 - 使用这些原则来构建独特的算法
- 将算法嵌入HTML文件中（不要创建单独的.js文件）