⚡

算法艺术生成 algorithmic-art

算法艺术生成技能：使用p5.js创建交互式生成艺术，基于算法哲学、种子随机性和参数控制。此技能适用于前端开发、数字艺术和AIGC应用，支持SEO关键词：算法艺术、生成式艺术、p5.js、交互式设计、前端开发、AIGC。

AIGC 0 次安装 0 次浏览 更新于 3/8/2026

名称: 算法艺术 描述: 使用p5.js通过种子随机性和交互式参数探索创建算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创建原创算法艺术，而不是复制现有艺术家的作品以避免版权侵犯。 许可证: 完整条款在LICENSE.txt中

算法哲学是通过代码表达的计算美学运动。输出.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文件。

推导概念种子

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

基本原则： 概念是嵌入算法本身的细微、小众引用——不总是字面，总是复杂的。熟悉该主题的人应直观感受，而其他人仅体验大师级生成组合。算法哲学提供计算语言。推导的概念提供灵魂——编织到参数、行为和涌现模式中的安静概念DNA。

这非常重要：引用必须如此精细，以增强作品深度而不自我宣布。像爵士音乐家通过算法和声引用另一首歌——只有知情者能捕捉，但每个人都欣赏生成美。

P5.JS实现

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

第0步：先阅读模板

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

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

避免：

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

遵循这些实践：

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

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

要创建生动呼吸的画廊级计算艺术，使用算法哲学作为基础。

技术要求

种子随机性（艺术块模式）：

// 始终使用种子以实现可重复性
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或任何浏览器中工作——无需设置。内嵌一切。

关键：固定与可变

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

固定（始终完全包括）：

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

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

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

每件艺术品应有独特参数和算法！ 固定部分提供一致UX——其余表达独特愿景。

必需功能

1. 参数控件

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

2. 种子导航

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

3. 单制品结构

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js来自CDN – 始终可用 -->
  <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控件
    • 文件中的详细注释标记完全什么保持 vs 替换

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

    • 展示如何组织参数、使用种子随机性、构建类
    • 非模式菜单 – 使用这些原理构建独特算法
    • 内嵌算法到HTML制品中（不创建单独.js文件）

关键提醒：

  • 模板是起点，非灵感
  • 算法是创造独特之处
  • 不要复制流场示例 – 构建哲学所需
  • 但保持模板的精确UI结构和Anthropic品牌