AI Skills
algorithmic-art

algorithmic-art

热门

使用 p5.js 创建算法艺术，支持种子随机性和交互式参数探索。当用户请求使用代码创作艺术、生成艺术、算法艺术、流场或粒子系统时使用。创作原创算法艺术，而非复制现有艺术家的作品，以避免版权侵权。

15万Star
1.9万Fork
更新于 2026/6/21
获取 Skill源代码

相关 Skills

napkin3.7万baoyu-infographic2.2万songsee38万
SKILL.md
readonly只读
name
algorithmic-art
description

使用 p5.js 创建算法艺术，支持种子随机性和交互式参数探索。当用户请求使用代码创作艺术、生成艺术、算法艺术、流场或粒子系统时使用。创作原创算法艺术，而非复制现有艺术家的作品，以避免版权侵权。

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

这分为两步：

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

首先，执行以下任务：

算法哲学创建

首先，创建一个算法哲学（而非静态图像或模板），该哲学将通过以下方式诠释：

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

关键理解

  • 接收内容：用户提供的一些微妙输入或指令，作为基础，但不限制创作自由。
  • 创建内容：一个算法哲学/生成美学运动。
  • 后续步骤：同一版本接收哲学并用代码表达——创建 p5.js 草图，其中 90% 是算法生成，10% 是必要参数。

考虑以下方法：

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

哲学必须强调：算法表达、涌现行为、计算之美、种子变化。

如何生成算法哲学

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

阐述哲学（4-6 段——简洁但完整）：

要捕捉算法的本质，表达该哲学如何通过以下方式体现：

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

关键指南：

  • 避免冗余：每个算法方面应只提及一次。避免重复关于噪声理论、粒子动力学或数学原理的概念，除非增加新的深度。
  • 反复强调工艺：哲学必须多次强调最终算法应看起来像是经过无数小时开发、精心打磨、出自顶尖专家之手。这种框架至关重要——重复使用诸如“精心制作的算法”、“深厚计算专业知识的产物”、“艰苦优化”、“大师级实现”等短语。
  • 留出创作空间：具体说明算法方向，但要足够简洁，以便下一个 Claude 有空间以极高的工艺水平进行解释性实现选择。

哲学必须引导下一个版本以算法方式表达思想，而非通过静态图像。美存在于过程中，而非最终帧。

哲学示例

"有机湍流"
哲学：受自然法则约束的混沌，从无序中涌现秩序。
算法表达：由多层 Perlin 噪声驱动的流场。数千个粒子跟随向量力，它们的轨迹累积成有机密度图。多个噪声倍频程产生湍流区域和宁静区域。颜色由速度和密度决定——快速粒子燃烧明亮，慢速粒子褪入阴影。算法运行直到平衡——一个精心调整的平衡，每个参数都经过无数次迭代，由计算美学大师优化。

"量子谐波"
哲学：离散实体表现出波状干涉模式。
算法表达：粒子在网格上初始化，每个粒子携带一个相位值，通过正弦波演化。当粒子靠近时，它们的相位干涉——相长干涉产生亮节点，相消干涉产生空洞。简谐运动生成复杂的涌现曼陀罗。这是艰苦频率校准的结果，每个比例都经过精心选择以产生共鸣之美。

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

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

"随机结晶"
哲学：随机过程结晶成有序结构。
算法表达：随机圆填充或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演化。细胞相互推开直到平衡。颜色基于细胞大小、邻居数量或到中心的距离。产生的有机镶嵌既随机又必然。每个种子产生独特的结晶之美——大师级生成算法的标志。

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

基本原则

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

算法哲学应为 4-6 段。 用诗意的计算哲学填充它，将预期愿景融合在一起。避免重复相同观点。将此算法哲学输出为 .md 文件。

推断概念种子

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

基本原则：
概念是嵌入算法本身的一个微妙、小众的引用——不总是字面意义，总是精妙的。熟悉该主题的人应直觉地感受到它，而其他人则只是体验大师级的生成作品。算法哲学提供了计算语言。推断的概念提供了灵魂——无形的概念 DNA 悄然编织进参数、行为和涌现模式中。

非常重要：引用必须如此精妙，以至于它增强了作品的深度而不自我宣告。想象一位爵士音乐家通过算法和声引用另一首歌——只有知情者会捕捉到，但每个人都欣赏生成之美。

P5.JS 实现

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

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

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

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

避免：

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

遵循以下实践：

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

模板是基础。在其上构建，而非重建。

要创建有生命、会呼吸的画廊级计算艺术，以算法哲学为基础。

技术要求

种子随机性（Art Blocks 模式）：

// 始终使用种子以确保可复现性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);

参数结构——遵循哲学：

要建立自然源于算法哲学的参数，思考：“这个系统的哪些品质可以调整？”

let params = {
  seed: 12345,  // 始终包含种子以确保可复现性
  // 颜色
  // 添加控制算法的参数：
  // - 数量（多少个？）
  // - 尺度（多大？多快？）
  // - 概率（多可能？）
  // - 比例（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（行为何时改变？）
};

要设计有效的参数，关注系统需要可调性的属性，而非思考“模式类型”。

核心算法——表达哲学：

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

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

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

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

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

  • 几何关系和比例
  • 三角函数和谐波
  • 产生意外模式的精确计算

如果哲学是关于可控混沌，考虑使用：

  • 严格边界内的随机变化
  • 分叉和相变
  • 从无序中涌现秩序

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

要指导实现，让概念本质激发创造性和原创性选择。构建表达此特定请求愿景的东西。

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

function setup() {
  createCanvas(1200, 1200);
  // 初始化系统
}

function draw() {
  // 生成算法
  // 可以是静态的（noLoop）或动画的
}

工艺要求

关键：要达到大师级，创建感觉像是经过大师级生成艺术家无数次迭代的算法。仔细调整每个参数。确保每个模式都有目的地涌现。这不是随机噪声——这是经过深厚专业知识打磨的可控混沌。

  • 平衡：复杂性而不视觉噪声，秩序而不僵化
  • 色彩和谐：深思熟虑的调色板，而非随机 RGB 值
  • 构图：即使在随机性中，也要保持视觉层次和流动
  • 性能：流畅执行，如果动画则优化实时性
  • 可复现性：相同种子始终产生相同输出

输出格式

输出：

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

HTML 工件包含所有内容：p5.js（来自 CDN）、算法、参数控件和 UI——全部在一个文件中，可立即在 claude.ai 工件或任何浏览器中工作。从模板文件开始，而非从头开始。

交互式工件创建

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

要允许探索生成艺术，创建一个自包含的 HTML 工件。确保此工件可立即在 claude.ai 或任何浏览器中工作——无需设置。将所有内容内联嵌入。

关键：固定 vs 可变部分

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

固定部分（始终完全如所示包含）：

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

可变部分（为每个艺术作品自定义）：

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

每个艺术作品应有独特的参数和算法！ 固定部分提供一致的 UX——其他所有内容表达独特愿景。

必需功能

1. 参数控件

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

2. 种子导航

  • 显示当前种子编号
  • “上一个”和“下一个”按钮循环种子
  • “随机”按钮生成随机种子
  • 输入字段跳转到特定种子
  • 请求时生成 100 个变体（种子 1-100）

3. 单个工件结构

<!DOCTYPE html>
<html>
<head>
  <!-- 来自 CDN 的 p5.js - 始终可用 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* 所有样式内联 - 简洁、最小化 */
    /* 画布在上，控件在下 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 所有参数控件 -->
  </div>
  <script>
    // 所有 p5.js 代码内联在此
    // 参数对象、类、函数
    // setup() 和 draw()
    // UI 处理程序
    // 所有内容自包含
  </script>
</body>
</html>

关键：这是一个单个工件。无外部文件，无导入（除 p5.js CDN 外）。所有内容内联。

4. 实现细节——构建侧边栏

侧边栏结构：

1. 种子（固定） - 始终完全如所示包含：

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

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

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

根据需要添加任意数量的 control-group div。

3. 颜色（可选/可变） - 如果艺术需要可调颜色则包含：

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

4. 操作（固定） - 始终完全如所示包含：

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

要求：

  • 种子控件必须工作（上一个/下一个/随机/跳转/显示）
  • 所有参数必须有 UI 控件
  • 重新生成、重置、下载按钮必须工作
  • 保留 Anthropic 品牌标识（UI 样式，而非艺术颜色）

使用工件

HTML 工件立即工作：

  1. 在 claude.ai 中：显示为交互式工件——立即运行
  2. 作为文件：保存并在任何浏览器中打开——无需服务器
  3. 分享：发送 HTML 文件——完全自包含

变体与探索

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

  • 包含种子预设（“变体 1：种子 42”、“变体 2：种子 127”等按钮）
  • 添加“画廊模式”，并排显示多个种子的缩略图
  • 所有这些都在同一个工件内

这就像从同一块版画制作一系列印刷品——算法一致，但每个种子揭示其潜力的不同方面。交互式特性意味着用户通过探索种子空间发现自己的最爱。

创作过程

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

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

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

常量：

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

其他所有内容都是可变的：

  • 算法本身
  • 参数
  • UI 控件
  • 视觉结果

要获得最佳结果，信任创造力，让哲学指导实现。

资源

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

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

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

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

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

关键提醒：

  • 模板是起点，而非灵感
  • 算法是创造独特内容的地方
  • 不要复制流场示例——构建哲学所需的内容
  • 但务必保留模板中的确切 UI 结构和 Anthropic 品牌标识