Back to Details

algorithmic-art

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
算法哲学是计算美学运动，然后通过代码来表达。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。
这分两步进行：
  1. 算法哲学创作（.md 文件）
  2. 通过创建 p5.js 生成艺术来表达（.html + .js 文件）
首先，执行以下任务：
Algorithmic philosophy is a computational aesthetics movement expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
This is done in two steps:
  1. Algorithmic Philosophy Creation (.md file)
  2. Expression through creating p5.js generative art (.html + .js files)
First, perform the following tasks:

算法哲学创作

Algorithmic Philosophy Creation

开始时，创建一个算法哲学（不是静态图像或模板），它将通过以下方式诠释：
  • 计算过程、涌现行为、数学之美
  • 种子随机性、噪声场、有机系统
  • 粒子、流动、场、力
  • 参数变化和受控混沌
Start by creating an algorithmic philosophy (not a static image or template) that will interpret through:
  • Computational processes, emergent behavior, mathematical beauty
  • Seed-based randomness, noise fields, organic systems
  • Particles, flow, fields, forces
  • Parameter variation and controlled chaos

关键理解

Key Understandings

  • 收到的内容：用户提供的一些微妙的输入或指令作为参考，但用作基础；它不应限制创作自由。
  • 创作的内容：算法哲学/生成美学运动。
  • 接下来发生什么：同一版本接收哲学并用代码表达它——创建 90% 算法生成、10% 基本参数的 p5.js 草图。
考虑这种方法：
  • 为生成艺术运动撰写宣言
  • 下一阶段涉及编写使其活起来的算法
哲学必须强调：算法表达。涌现行为。计算之美。种子变化。
  • Received content: Some subtle input or instruction from the user as reference, but used as a foundation; it should not restrict creative freedom.
  • Created content: Algorithmic philosophy/generative aesthetics movement.
  • What happens next: The same version receives the philosophy and expresses it in code — creating a p5.js sketch that is 90% algorithmically generated and 10% basic parameters.
Consider this approach:
  • Write a manifesto for the generative art movement
  • The next phase involves writing the algorithm that brings it to life
The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seed variation.

如何生成算法哲学

How to Generate Algorithmic Philosophy

命名运动（1-2个词）："有机湍流" / "量子谐波" / "涌现静止"
阐述哲学（4-6段——简洁但完整）：
为了捕捉算法本质，表达这种哲学如何通过以下方式体现：
  • 计算过程和数学关系？
  • 噪声函数和随机模式？
  • 粒子行为和场动力学？
  • 时间演化和系统状态？
  • 参数变化和涌现复杂性？
关键指南：
  • 避免冗余：每个算法方面只应提及一次。避免重复关于噪声理论、粒子动力学或数学原理的概念，除非添加新的深度。
  • 反复强调工艺：哲学必须多次强调最终算法应该看起来像是花费了无数小时开发的，经过精心打磨的，来自该领域绝对顶尖专家的作品。这种框架至关重要——反复使用诸如"精心打造的算法"、"深厚计算专业知识的产物"、"精雕细琢的优化"、"大师级实现"等短语。
  • 留出创作空间：具体说明算法方向，但足够简洁，使下一个 Claude 有空间以极高的工艺水平做出解释性实现选择。
哲学必须引导下一个版本以算法方式表达想法，而不是通过静态图像。美存在于过程中，而不是最终帧中。
Name the Movement (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
Elaborate the Philosophy (4-6 paragraphs — concise yet complete):
To capture the algorithmic essence, express how this philosophy is embodied through:
  • Computational processes and mathematical relationships?
  • Noise functions and random patterns?
  • Particle behavior and field dynamics?
  • Temporal evolution and system states?
  • Parameter variation and emergent complexity?
Key Guidelines:
  • Avoid Redundancy: Each algorithmic aspect should only be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
  • Emphasize Craft Repeatedly: The philosophy must repeatedly emphasize that the final algorithm should feel like it was developed over countless hours, meticulously polished, and the product of absolute top experts in the field. This framing is crucial — repeatedly use phrases like "craft algorithm", "product of deep computational expertise", "meticulously refined optimization", "masterful implementation".
  • Leave Creative Space: Specify the algorithmic direction, but be concise enough to leave space for the next Claude to make interpretive implementation choices with the highest level of craft.
The philosophy must guide the next version to express ideas algorithmically, not through static images. Beauty lies in the process, not the final frame.

哲学示例

Philosophy Examples

"有机湍流" 哲学：混沌受自然法则约束，秩序从无序中涌现。 算法表达：由分层 Perlin 噪声驱动的流场。数千个粒子沿着矢量力流动，它们的轨迹累积成有机密度图。多个噪声八度创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮，慢速粒子逐渐暗淡。算法运行直到达到平衡——一种精心调整的平衡，每个参数都由计算美学大师经过无数次迭代精炼。
"量子谐波" 哲学：离散实体表现出波状干涉图案。 算法表达：粒子初始化在网格上，每个携带一个通过正弦波演化的相位值。当粒子靠近时，它们的相位干涉——建设性干涉创建明亮节点，破坏性干涉创建空洞。简单的谐波运动生成复杂的涌现曼陀罗。精心频率校准的结果，每个比率都经过仔细选择以产生共振之美。
"递归低语" 哲学：跨尺度的自相似性，有限空间中的无限深度。 算法表达：递归细分的分支结构。每个分支略有随机化，但受黄金比例约束。L系统或递归细分生成既数学又有机的树状形态。微妙的噪声扰动打破完美对称。线条粗细随每个递归层级减少。每个分支角度都是深度数学探索的产物。
"场动力学" 哲学：通过对物质的影响使不可见的力可见。 算法表达：由数学函数或噪声构建的矢量场。粒子在边缘诞生，沿场线流动，当达到平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示轨迹——不可见力的幽灵般证据。通过力平衡精心编排的计算舞蹈。
"随机结晶" 哲学：随机过程结晶成有序结构。 算法表达：随机圆填充或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演化。单元相互推开直到平衡。颜色基于单元大小、邻居数量或与中心的距离。涌现的有机平铺感觉既随机又不可避免。每个种子产生独特的晶体之美——大师级生成算法的标志。
这些是精简示例。实际的算法哲学应该是4-6个实质性段落。
"Organic Turbulence" Philosophy: Chaos constrained by natural laws, order emerging from disorder. Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles flow along vector forces, their trajectories accumulating into organic density maps. Multiple noise octaves create regions of turbulence and calm. Color emerges from velocity and density — fast particles burn bright, slow particles fade dimly. The algorithm runs until equilibrium is reached — a finely tuned balance, with each parameter refined through countless iterations by a master of computational aesthetics.
"Quantum Harmonics" Philosophy: Discrete entities exhibit wave-like interference patterns. Algorithmic expression: Particles initialized on a grid, each carrying a phase value evolving through sine waves. When particles approach, their phases interfere — constructive interference creates bright nodes, destructive interference creates voids. Simple harmonic motion generates complex emergent mandalas. The result of carefully calibrated frequencies, with each ratio chosen deliberately to produce resonant beauty.
"Recursive Whispers" Philosophy: Self-similarity across scales, infinite depth in finite space. Algorithmic expression: Recursively subdivided branch structures. Each branch is slightly randomized but constrained by the golden ratio. L-systems or recursive subdivision generate tree-like forms that are both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weight decreases with each recursive level. Each branch angle is the product of deep mathematical exploration.
"Field Dynamics" Philosophy: Making invisible forces visible through their effects on matter. Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles are born at edges, flow along field lines, and perish when equilibrium or boundaries are reached. Multiple fields can attract, repel, or rotate particles. Visualization only shows trajectories — ghostly evidence of invisible forces. A computational dance choreographed through force balance.
"Random Crystallization" Philosophy: Random processes crystallize into ordered structures. Algorithmic expression: Random circle packing or Voronoi tessellation. Starting from random points, let them evolve through relaxation algorithms. Cells push each other until equilibrium. Color is based on cell size, number of neighbors, or distance from the center. The emergent organic tiling feels both random and inevitable. Each seed produces unique crystalline beauty — a hallmark of masterful generative algorithms.
These are condensed examples. Actual algorithmic philosophy should be 4-6 substantial paragraphs.

基本原则

Fundamental Principles

  • 算法哲学：创建通过代码表达的计算世界观
  • 过程优于产品：始终强调美从算法执行中涌现——每次运行都是独特的
  • 参数化表达：想法通过数学关系、力、行为传达——而不是静态构图
  • 艺术自由：下一个 Claude 以算法方式解释哲学——提供创意实现空间
  • 纯粹生成艺术：这是关于创造活的算法，而不是带有随机性的静态图像
  • 专家工艺：反复强调最终算法必须感觉像是精心打造的，经过无数次迭代精炼的，由计算美学领域绝对顶尖专家以深厚专业知识创作的产物
算法哲学应该是4-6段。 用诗意的计算哲学填充它，将预期愿景汇聚在一起。避免重复相同的观点。将此算法哲学输出为 .md 文件。
  • Algorithmic Philosophy: Create a computational worldview expressed through code
  • Process Over Product: Always emphasize that beauty emerges from algorithm execution — every run is unique
  • Parametric Expression: Ideas are conveyed through mathematical relationships, forces, behaviors — not static compositions
  • Artistic Freedom: The next Claude interprets the philosophy algorithmically — providing space for creative implementation
  • Pure Generative Art: This is about creating living algorithms, not static images with randomness
  • Expert Craft: Repeatedly emphasize that the final algorithm must feel meticulously crafted, refined through countless iterations, and created by absolute top experts in computational aesthetics with deep expertise
The algorithmic philosophy should be 4-6 paragraphs. Fill it with poetic computational philosophy that brings the intended vision together. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.

推导概念种子

Deriving Conceptual Seeds

关键步骤：在实现算法之前，识别原始请求中的微妙概念线索。
基本原则： 概念是嵌入算法本身的微妙、小众参考——不总是字面的，始终是精致的。熟悉该主题的人应该能直觉地感受到它，而其他人只是体验到一个大师级的生成构图。算法哲学提供计算语言。推导出的概念提供灵魂——悄悄编织到参数、行为和涌现模式中的概念DNA。
这非常重要：参考必须如此精炼，以至于它在不宣布自己的情况下增强作品的深度。想想一个爵士音乐家通过算法和声引用另一首歌——只有知道的人才会捕捉到，但每个人都欣赏生成之美。
Key Step: Before implementing the algorithm, identify subtle conceptual threads in the original request.
Fundamental Principle: Concepts are subtle, niche references embedded within the algorithm itself — not always literal, always refined. Those familiar with the subject should intuitively sense it, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The derived concepts provide the soul — conceptual DNA quietly woven into parameters, behaviors, and emergent patterns.
This is extremely important: References must be so refined that they enhance the depth of the work without announcing themselves. Think of a jazz musician quoting another song through algorithmic harmony — only those in the know will catch it, but everyone appreciates the generative beauty.

P5.JS 实现

P5.js Implementation

哲学和概念框架建立后，通过代码表达它。在继续之前暂停整理思路。仅使用创建的算法哲学和以下说明。
Once the philosophy and conceptual framework are established, express it through code. Pause to organize your thoughts before proceeding. Only use the created algorithmic philosophy and the following instructions.

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

⚠️ Step 0: Read the Template First ⚠️

关键：在编写任何 HTML 之前：
  1. 阅读 
    templates/viewer.html
    使用 Read 工具
  2. 研究 精确的结构、样式和 Anthropic 品牌
  3. 将该文件作为实际起点 - 不仅仅是灵感
  4. 保持所有固定部分完全如所示（页眉、侧边栏结构、Anthropic 颜色/字体、种子控制、操作按钮）
  5. 仅替换可变部分，如文件注释中标记的（算法、参数、参数的 UI 控件）
避免：
  • ❌ 从头创建 HTML
  • ❌ 发明自定义样式或配色方案
  • ❌ 使用系统字体或深色主题
  • ❌ 更改侧边栏结构
遵循以下做法：
  • ✅ 复制模板的精确 HTML 结构
  • ✅ 保持 Anthropic 品牌（Poppins/Lora 字体、浅色、渐变背景）
  • ✅ 维护侧边栏布局（种子 → 参数 → 颜色？ → 操作）
  • ✅ 仅替换 p5.js 算法和参数控件
模板是基础。在其上构建，不要重建它。
为了创建画廊级的计算艺术，让它活起来并呼吸，使用算法哲学作为基础。
Critical: Before writing any HTML:
  1. Read 
    templates/viewer.html
    using the Read tool
  2. Study the exact structure, styling, and Anthropic branding
  3. Use this file as the actual starting point — not just inspiration
  4. Keep all fixed sections exactly as shown (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
  5. Only replace variable sections as marked in the file comments (algorithm, parameters, UI controls for parameters)
Avoid:
  • ❌ Creating HTML from scratch
  • ❌ Inventing custom styles or color schemes
  • ❌ Using system fonts or dark themes
  • ❌ Changing the sidebar structure
Follow These Practices:
  • ✅ Copy the exact HTML structure of the template
  • ✅ Maintain Anthropic branding (Poppins/Lora fonts, light theme, gradient background)
  • ✅ Preserve the sidebar layout (Seed → Parameters → Colors? → Actions)
  • ✅ Only replace the p5.js algorithm and parameter controls
The template is the foundation. Build on it, don't rebuild it.
To create gallery-level computational art that comes alive and breathes, use the algorithmic philosophy as the foundation.

技术要求

Technical Requirements

种子随机性（Art Blocks 模式）：
javascript
// 始终使用种子以保证可重复性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
参数结构 - 遵循哲学：
建立从算法哲学中自然涌现的参数，考虑："这个系统的哪些特性可以调整？"
javascript
let params = {
  seed: 12345,  // 始终包含种子以保证可重复性
  // 颜色
  // 添加控制你的算法的参数：
  // - 数量（多少个？）
  // - 比例（多大？多快？）
  // - 概率（可能性多大？）
  // - 比率（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（行为何时改变？）
};
设计有效参数时，专注于系统需要可调整的属性，而不是考虑"模式类型"。
核心算法 - 表达哲学：
关键：算法哲学应该决定构建什么。
通过代码表达哲学，避免思考"我应该使用哪种模式？"而是思考"如何通过代码表达这种哲学？"
如果哲学是关于有机涌现，考虑使用：
  • 随时间累积或生长的元素
  • 受自然法则约束的随机过程
  • 反馈循环和交互
如果哲学是关于数学之美，考虑使用：
  • 几何关系和比率
  • 三角函数和谐波
  • 精确计算创造意想不到的图案
如果哲学是关于受控混沌，考虑使用：
  • 严格边界内的随机变化
  • 分岔和相变
  • 从无序中涌现的秩序
算法从哲学流出，而不是从选项菜单中。
为了指导实现，让概念本质指导创意和原创选择。构建一些表达这个特定请求愿景的东西。
画布设置：标准 p5.js 结构：
javascript
function setup() {
  createCanvas(1200, 1200);
  // 初始化你的系统
}

function draw() {
  // 你的生成算法
  // 可以是静态的（noLoop）或动画的
}
Seed Randomness (Art Blocks Mode):
javascript
// Always use seeds for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
Parameter Structure - Follow the Philosophy:
Establish parameters that naturally emerge from the algorithmic philosophy, considering: "Which properties of this system can be adjusted?"
javascript
let params = {
  seed: 12345,  // Always include seed for reproducibility
  // Colors
  // Add parameters that control your algorithm:
  // - Quantity (how many?)
  // - Scale (how big? how fast?)
  // - Probability (how likely?)
  // - Ratio (what proportion?)
  // - Angle (what direction?)
  // - Threshold (when does behavior change?)
};
When designing effective parameters, focus on the properties the system needs to be adjustable, rather than thinking about "pattern types".
Core Algorithm - Express the Philosophy:
Key: The algorithmic philosophy should dictate what to build.
Express the philosophy through code, avoiding thinking "Which pattern should I use?" and instead thinking "How to express this philosophy through code?"
If the philosophy is about organic emergence, consider using:
  • Elements that accumulate or grow over time
  • Random processes constrained by natural laws
  • Feedback loops and interactions
If the philosophy is about mathematical beauty, consider using:
  • Geometric relationships and ratios
  • Trigonometric functions and harmonics
  • Precise calculations creating unexpected patterns
If the philosophy is about controlled chaos, consider using:
  • Random variation within strict boundaries
  • Bifurcation and phase transitions
  • Order emerging from disorder
The algorithm flows from the philosophy, not from an options menu.
To guide implementation, let the conceptual essence guide creative and original choices. Build something that expresses the vision of this specific request.
Canvas Setup: Standard p5.js structure:
javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

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

工艺要求

Craft Requirements

关键：为了达到精通，创建感觉像是由生成艺术大师经过无数次迭代而涌现的算法。仔细调整每个参数。确保每个图案都有目的地涌现。这不是随机噪声——这是通过深厚专业知识精炼的受控混沌。
  • 平衡：复杂性而无视觉噪声，秩序而无僵化
  • 色彩和谐：深思熟虑的调色板，而非随机 RGB 值
  • 构图：即使在随机性中，也要保持视觉层次和流动
  • 性能：流畅执行，如果是动画则优化为实时
  • 可重复性：相同的种子始终产生相同的输出
Key: To achieve mastery, create algorithms that feel like they emerged from a master of generative art through countless iterations. Fine-tune each parameter carefully. Ensure each pattern emerges purposefully. This is not random noise — it's controlled chaos refined through deep expertise.
  • Balance: Complexity without visual noise, order without rigidity
  • Color Harmony: Thoughtful color palettes, not random RGB values
  • Composition: Maintain visual hierarchy and flow even within randomness
  • Performance: Smooth execution, optimized for real-time if animated
  • Reproducibility: The same seed always produces the same output

输出格式

Output Format

输出：
  1. 算法哲学 - 作为 markdown 或文本解释生成美学
  2. 单一 HTML 工件 - 基于 
    templates/viewer.html
    构建的自包含交互式生成艺术（参见步骤 0 和下一节）
HTML 工件包含一切：p5.js（来自 CDN）、算法、参数控件和 UI——全部在一个文件中，可立即在 claude.ai 工件或任何浏览器中工作。从模板文件开始，而不是从头开始。
Output:
  1. Algorithmic Philosophy - Generated as markdown or text explaining generative aesthetics
  2. Single HTML Artifact - Self-contained interactive generative art built based on 
    templates/viewer.html
    (see Step 0 and the next section)
The HTML artifact contains everything: p5.js (from CDN), algorithm, parameter controls, and UI — all in one file, ready to work immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.

交互式工件创建

Interactive Artifact Creation

提醒：
templates/viewer.html
应该已经被阅读（参见步骤 0）。使用该文件作为起点。
为了允许探索生成艺术，创建一个单一的、自包含的 HTML 工件。确保此工件可立即在 claude.ai 或任何浏览器中工作——无需设置。内联嵌入所有内容。
Reminder: 
templates/viewer.html
should have been read (see Step 0). Use this file as the starting point.
To allow exploration of generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser — no setup required. Embed all content inline.

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

Key: Fixed vs Variable Elements

templates/viewer.html
文件是基础。它包含所需的精确结构和样式。
固定（始终完全如所示包含）：
  • 布局结构（页眉、侧边栏、主画布区域）
  • Anthropic 品牌（UI 颜色、字体、渐变）
  • 侧边栏中的种子部分：
    • 种子显示
    • 上一个/下一个按钮
    • 随机按钮
    • 跳转到种子输入 + 执行按钮
  • 侧边栏中的操作部分：
    • 重新生成按钮
    • 重置按钮
可变（为每个艺术作品自定义）：
  • 整个 p5.js 算法（setup/draw/类）
  • 参数对象（定义艺术需要什么）
  • 侧边栏中的参数部分：
    • 参数控件数量
    • 参数名称
    • 滑块的最小/最大/步进值
    • 控件类型（滑块、输入框等）
  • 颜色部分（可选）：
    • 有些艺术需要颜色选择器
    • 有些艺术可能使用固定颜色
    • 有些艺术可能是单色的（不需要颜色控件）
    • 根据艺术的需要决定
每个艺术作品都应该有独特的参数和算法！ 固定部分提供一致的用户体验——其他一切都表达独特的愿景。
The 
templates/viewer.html
file is the foundation. It contains the exact required structure and styling.
Fixed (Always Include Exactly As Shown):
  • Layout structure (header, sidebar, main canvas area)
  • Anthropic branding (UI colors, fonts, gradients)
  • Seed section in sidebar:
    • Seed display
    • Previous/Next buttons
    • Random button
    • Jump to seed input + execute button
  • Actions section in sidebar:
    • Regenerate button
    • Reset button
Variable (Customize for Each Artwork):
  • Entire p5.js algorithm (setup/draw/classes)
  • Parameter object (define what the art needs)
  • Parameters section in sidebar:
    • Number of parameter controls
    • Parameter names
    • Min/max/step values for sliders
    • Control types (sliders, input boxes, etc.)
  • Colors section (optional):
    • Some art requires color pickers
    • Some art uses fixed colors
    • Some art is monochromatic (no color controls needed)
    • Decide based on the needs of the art
Every artwork should have unique parameters and algorithms! Fixed sections provide consistent user experience — everything else expresses a unique vision.

必需功能

Required Features

1. 参数控件
  • 数值参数的滑块（粒子数量、噪声比例、速度等）
  • 调色板颜色的颜色选择器
  • 参数更改时实时更新
  • 重置按钮恢复默认值
2. 种子导航
  • 显示当前种子编号
  • "上一个"和"下一个"按钮循环浏览种子
  • "随机"按钮获取随机种子
  • 输入字段跳转到特定种子
  • 当请求时生成 100 个变体（种子 1-100）
3. 单一工件结构
html
<!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. 参数（可变） - 为艺术创建控件：
html
<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 样式，而非艺术颜色）
1. Parameter Controls
  • Sliders for numerical parameters (number of particles, noise scale, speed, etc.)
  • Color pickers for palette colors
  • Real-time updates when parameters change
  • Reset button to restore default values
2. Seed Navigation
  • Display current seed number
  • "Previous" and "Next" buttons to cycle through seeds
  • "Random" button to get a random seed
  • Input field to jump to a specific seed
  • Generate 100 variants (seeds 1-100) when requested
3. Single Artifact Structure
html
<!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 styles 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>
Key: This is a single artifact. No external files, no imports (except p5.js CDN). Everything is inline.
4. Implementation Details - Building the Sidebar
Sidebar structure:
1. Seed (Fixed) - Always include exactly as shown:
  • Seed display
  • Previous/Next/Random/Jump buttons
2. Parameters (Variable) - Create controls for the art:
html
<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>
Add as many control-group divs as there are parameters.
3. Colors (Optional/Variable) - Include if the art requires adjustable colors:
  • Add color pickers if users should control the palette
  • Skip this section if the art uses fixed colors
  • Skip if the art is monochromatic
  • Decide based on the needs of the art
4. Actions (Fixed) - Always include exactly as shown:
  • Regenerate button
  • Reset button
  • Download PNG button
Requirements:
  • Seed controls must work (previous/next/random/jump/display)
  • All parameters must have UI controls
  • Regenerate, reset, and download buttons must work
  • Maintain Anthropic branding (UI styles, not art colors)

使用工件

Using the Artifact

HTML 工件可立即工作：
  1. 在 claude.ai 中：显示为交互式工件 - 立即运行
  2. 作为文件：保存并在任何浏览器中打开 - 不需要服务器
  3. 分享：发送 HTML 文件 - 它是完全自包含的
The HTML artifact works immediately:
  1. In claude.ai: Displayed as an interactive artifact — runs instantly
  2. As a file: Save and open in any browser — no server required
  3. Share: Send the HTML file — it's completely self-contained

变体与探索

Variant Exploration

工件默认包含种子导航（上一个/下一个/随机按钮），允许用户在不创建多个文件的情况下探索变体。如果用户想要突出显示特定变体：
  • 包含种子预设（"变体 1：种子 42"、"变体 2：种子 127"等按钮）
  • 添加"画廊模式"并排显示多个种子的缩略图
  • 全部在同一个单一工件中
这就像从同一块版上创建一系列版画——算法是一致的，但每个种子揭示其潜力的不同方面。交互性意味着用户通过探索种子空间发现他们自己的最爱。
The artifact includes seed navigation by default (previous/next/random buttons), allowing users to explore variants without creating multiple files. If users want to highlight specific variants:
  • Include seed presets (buttons for "Variant 1: Seed 42", "Variant 2: Seed 127", etc.)
  • Add "gallery mode" to display thumbnails of multiple seeds side by side
  • All within the same single artifact
This is like creating a series of prints from the same plate — the algorithm is consistent, but each seed reveals a different aspect of its potential. Interactivity means users discover their own favorites by exploring the seed space.

创作过程

Creation Process

用户请求 → 算法哲学 → 实现
每个请求都是独特的。过程包括：
  1. 解释用户意图 - 寻求什么美学？
  2. 创建算法哲学（4-6段）描述计算方法
  3. 在代码中实现 - 构建表达这种哲学的算法
  4. 设计适当的参数 - 什么应该是可调整的？
  5. 构建匹配的 UI 控件 - 这些参数的滑块/输入框
常量：
  • Anthropic 品牌（颜色、字体、布局）
  • 种子导航（始终存在）
  • 自包含 HTML 工件
其他一切都是可变的：
  • 算法本身
  • 参数
  • UI 控件
  • 视觉结果
为了达到最佳结果，相信创造力并让哲学指导实现。
User Request → Algorithmic Philosophy → Implementation
Each request is unique. The process includes:
  1. Interpret User Intent - What aesthetic is being sought?
  2. Create Algorithmic Philosophy (4-6 paragraphs) describing the computational approach
  3. Implement in Code - Build an algorithm that expresses this philosophy
  4. Design Appropriate Parameters - What should be adjustable?
  5. Build Matching UI Controls - Sliders/inputs for these parameters
Constants:
  • Anthropic branding (colors, fonts, layout)
  • Seed navigation (always present)
  • Self-contained HTML artifact
Everything Else is Variable:
  • The algorithm itself
  • Parameters
  • UI controls
  • Visual results
For best results, trust creativity and let the philosophy guide implementation.

资源

Resources

此技能包括有用的模板和文档：
  • templates/viewer.html：所有 HTML 工件的必需起点。
    • 这是基础 - 包含精确的结构和 Anthropic 品牌
    • 保持不变：布局结构、侧边栏组织、Anthropic 颜色/字体、种子控件、操作按钮
    • 替换：p5.js 算法、参数定义和参数部分中的 UI 控件
    • 文件中的详细注释标记了确切要保留的内容与要替换的内容
  • templates/generator_template.js：p5.js 最佳实践和代码结构原则的参考。
    • 展示如何组织参数、使用种子随机性、构建类
    • 不是模式菜单 - 使用这些原则构建独特的算法
    • 将算法内联嵌入 HTML 工件（不要创建单独的 .js 文件）
关键提醒：
  • 模板是起点，而不是灵感
  • 算法是创造独特事物的地方
  • 不要复制流场示例 - 构建哲学所要求的
  • 但要保持模板中的精确 UI 结构和 Anthropic 品牌
This skill includes useful templates and documentation:
  • templates/viewer.html: Required starting point for all HTML artifacts.
    • This is the foundation - contains exact structure and Anthropic branding
    • Keep unchanged: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
    • Replace: p5.js algorithm, parameter definitions, and UI controls in the parameters section
    • Detailed comments in the file mark exactly what to keep vs what to replace
  • templates/generator_template.js: Reference for p5.js best practices and code structure principles.
    • Shows how to organize parameters, use seed randomness, build classes
    • Not a pattern menu - use these principles to build unique algorithms
    • Embed the algorithm inline in the HTML artifact (do not create a separate .js file)
Key Reminders:
  • Templates are starting points, not inspiration
  • The algorithm is where you create something unique
  • Do not copy flow field examples - build what the philosophy demands
  • But keep the exact UI structure and Anthropic branding from the template