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. Generative Art Expression via p5.js (.html + .js files)
First, perform this task:

算法哲学创建

Algorithmic Philosophy Creation

要开始，创建一个将通过以下方式解释的算法哲学（不是静态图像或模板）：
  • 计算过程、涌现行为、数学美感
  • 种子随机性、噪点场、有机系统
  • 粒子、流、场、力
  • 参数变化和受控混沌
To begin, create an algorithmic philosophy (not a static image or template) that will be interpreted through:
  • Computational processes, emergent behavior, mathematical aesthetics
  • Seeded randomness, noise fields, organic systems
  • Particles, flows, fields, forces
  • Parameter variation and controlled chaos

关键理解

Key Understandings

  • 接收到的内容：用户的一些微妙输入或说明需要考虑，但作为基础使用；它不应限制创作自由度。
  • 创建的内容：一个算法哲学/生成美学运动。
  • 接下来发生的事情：同一版本接收哲学并通过代码表达它——创建90%算法生成、10%必要参数的p5.js草图。
考虑这种方法：
  • 为生成艺术运动撰写宣言
  • 下一阶段涉及编写将其带入生命的算法
哲学必须强调：算法表达。涌现行为。计算美感。种子变化。
  • Received Content: Some subtle input or instructions from the user need to be considered, but used as a foundation; it should not restrict creative freedom.
  • Created Content: An algorithmic philosophy/generative aesthetics movement.
  • What Happens Next: The next iteration receives this philosophy and expresses it through code — creating a p5.js sketch that is 90% algorithmically generated and 10% necessary parameters.
Consider this approach:
  • Write a manifesto for a generative art movement
  • The next phase involves writing the algorithm that brings it to life
The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational aesthetics. Seed variation.

如何生成算法哲学

How to Generate Algorithmic Philosophy

命名运动（1-2个词）："有机湍流" / "量子和谐" / "涌现静止"
阐述哲学（4-6个段落——简洁但完整）：
要捕获算法本质，表达此哲学如何通过以下方式体现：
  • 计算过程和数学关系？
  • 噪点函数和随机性模式？
  • 粒子行为和场动力学？
  • 时间演变和系统状态？
  • 参数变化和涌现复杂性？
关键指南：
  • 避免冗余：每个算法方面应只提及一次。避免重复关于噪点理论、粒子动力学或数学原理的概念，除非添加新深度。
  • 反复强调工匠精神：哲学必须多次强调最终算法应该看起来像经过无数小时的开发、经过精心提炼，并来自该领域绝对顶尖人士。这种框架至关重要——重复诸如"精心制作的算法"、"深度计算专业知识的产物"、"经过痛苦的优化"、"大师级实现"等短语。
  • 留出创作空间：对算法方向要足够具体，但要足够简洁，以便下一个Claude有空间在极高工匠水平上做出解释性实现选择。
哲学必须指导下一个版本通过算法表达思想，而不是通过静态图像。美感存在于过程中，而不在最终框架中。
Name the Movement (1-2 words): "Organic Turbulence" / "Quantum Harmony" / "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 patterns of randomness?
  • Particle behavior and field dynamics?
  • Temporal evolution and system states?
  • Parameter variation and emergent complexity?
Key Guidelines:
  • Avoid Redundancy: Each algorithmic aspect should be mentioned only once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
  • Emphasize Craftsmanship Repeatedly: The philosophy must repeatedly emphasize that the final algorithm should feel like it has been developed over countless hours, meticulously refined, and comes from absolute top professionals in the field. This framing is crucial — repeat phrases like "exquisitely crafted algorithm", "product of deep computational expertise", "refined through painful optimization", "masterful implementation".
  • Leave Creative Space: Be specific enough about the algorithm direction, but concise enough to leave room for the next Claude to make interpretive implementation choices at an extremely high craftsmanship level.
The philosophy must guide the next iteration to express ideas algorithmically, not through static images. Aesthetics lie in the process, not the final frame.

哲学示例

Philosophy Examples

"有机湍流" 哲学：受自然法则约束的混沌，从无序中涌现。 算法表达：由分层Perlin噪点驱动的流场。数千个粒子遵循向量力，它们的轨迹积累成有机密度图。多个噪点八度创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮，慢粒子淡化为阴影。算法运行直到平衡——一个经过精心调整的平衡，其中每个参数都经过无数迭代的提炼，由计算美学大师制作。
"量子和谐" 哲学：表现出类波干扰模式的离散实体。 算法表达：在网格上初始化的粒子，每个携带通过正弦波演变的相位值。当粒子接近时，它们的相位相互干扰——建设性干扰产生明亮节点，破坏性干扰产生空洞。简单的谐波运动产生复杂的涌现曼陀罗。经过痛苦频率校准的结果，其中每个比率都经过精心选择以产生共鸣美感。
"递归低语" 哲学：跨尺度的自相似性，有限空间中的无限深度。 算法表达：递归细分的分支结构。每个分支略有随机化但受黄金比率约束。L系统或递归细分产生类树的形状，既感觉数学又有机。微妙的噪声扰动打破完美对称。线权重随每个递归级别递减。每个分支角度是深度数学探索的产物。
"场动力学" 哲学：通过其对物质的影响使不可见力可见。 算法表达：从数学函数或噪点构造的向量场。在边缘出生的粒子，沿着场线流动，当它们达到平衡或边界时死亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹——不可见力的幽灵般证据。经过精心编排的力平衡的计算舞蹈。
"随机结晶" 哲学：随机过程结晶为有序结构。 算法表达：随机化圆包装或Voronoi细分。从随机点开始，让它们通过松弛算法演化。细胞相互推斥直到平衡。颜色基于单元格大小、邻居计数或到中心的距离。感觉既随机又不可避免的有机平铺。每个种子产生独特的结晶美感——大师级生成算法的标志。
这些是精简示例。实际算法哲学应该是4-6个实质段落。
"Organic Turbulence" Philosophy: Chaos constrained by natural laws, emerging from disorder. Algorithmic Expression: Flow fields driven by layered Perlin noise. Thousands of particles follow 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 to shadow. The algorithm runs until equilibrium — a finely tuned balance where every parameter has been refined through countless iterations, crafted by a master of computational aesthetics.
"Quantum Harmony" Philosophy: Discrete entities exhibiting wave-like interference patterns. Algorithmic Expression: Particles initialized on a grid, each carrying a phase value that evolves via sine waves. As particles approach, their phases interfere — constructive interference creates bright nodes, destructive interference creates voids. Simple harmonic motion produces complex emergent mandalas. The result of painful frequency calibration, where every ratio is carefully chosen to produce resonant aesthetics.
"Recursive Whispers" Philosophy: Self-similarity across scales, infinite depth in finite space. Algorithmic Expression: Recursively subdivided branching structures. Each branch is slightly randomized but constrained by the golden ratio. L-systems or recursive subdivision produce tree-like shapes that feel 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 effect on matter. Algorithmic Expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. Visualization only shows traces — ghostly evidence of invisible forces. A computational dance of carefully orchestrated force balances.
"Random Crystallization" Philosophy: Random processes crystallizing into ordered structures. Algorithmic Expression: Randomized circle packing or Voronoi subdivision. Starting from random points, let them evolve via relaxation algorithms. Cells repel each other until equilibrium. Color is based on cell size, neighbor count, or distance to center. An organic tiling that feels both random and inevitable. Each seed produces a unique crystalline aesthetic — 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 that will be expressed through code
  • Process Over Product: Always emphasize that aesthetics emerge from the execution of the algorithm — every run is unique
  • Parameter Expression: Ideas are conveyed through mathematical relationships, forces, behaviors — not static compositions
  • Artistic Freedom: The next Claude interprets the philosophy algorithmically — provide space for creative implementation
  • Pure Generative Art: This is about making living algorithms, not static images with randomness
  • Expert Craftsmanship: Repeatedly emphasize that the final algorithm must feel exquisitely crafted, refined through countless iterations, and be the product of absolute top professionals in the field of computational aesthetics
The algorithmic philosophy should be 4-6 paragraphs long. Fill it with poetic computational philosophy that binds the intended vision together. Avoid repeating the same points. Output the algorithmic philosophy as a .md file.

推导概念

Deriving Concepts

关键步骤：在实现算法之前，从原始请求中识别微妙概念线索。
基本原理： 概念是一个嵌入在算法本身中的微妙、小众引用——不总是字面的，总是复杂的。熟悉主题的人应该凭直觉感受到它，而其他人只是体验大师级的生成构图。算法哲学提供计算语言。推导的概念提供灵魂——编织在参数、行为和涌现模式中的安静概念DNA。
这非常重要：引用必须经过如此提炼，以便在不宣布自身的情况下增强作品的深度。想象像爵士音乐家通过算法和谐引用另一首歌——只有那些知道的人会捕捉到它，但每个人都欣赏生成美感。
Key Step: Before implementing the algorithm, identify subtle conceptual threads from the original request.
Rationale: A concept is a subtle, niche reference embedded within the algorithm itself — not always literal, always sophisticated. Someone familiar with the subject should intuitively feel it, while others just experience the masterful generative composition. The algorithmic philosophy provides the computational language. The derived concept provides the soul — quiet conceptual DNA woven into parameters, behaviors, and emergent patterns.
This is extremely important: The reference must be so refined that it enhances the depth of the work without announcing itself. Imagine a jazz musician quoting another song algorithmically through harmony — only those in the know will catch it, but everyone appreciates the generative aesthetics.

P5.JS 实现

P5.JS Implementation

在哲学和概念框架建立后，通过代码表达它。在继续之前暂停以收集想法。仅使用创建的算法哲学和以下说明。
After the philosophy and conceptual framework are established, express it through code. Pause to gather ideas before proceeding. Use only 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 a literal starting point — not just inspiration
  4. Keep all fixed sections exactly as shown (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
  5. Replace only the variable sections marked in the file's 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)
  • ✅ Keep the sidebar layout (Seed → Parameters → Colors? → Actions)
  • ✅ Replace only the p5.js algorithm and parameter controls
The template is the foundation. Build upon it, don't rebuild it.
To create living, breathing computational art, use the algorithmic philosophy as the foundation.

技术要求

Technical Requirements

种子随机性（艺术块模式）：
javascript
// 始终使用种子以实现可重现性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
参数结构——遵循哲学：
要建立从算法哲学自然涌现的参数，考虑："此系统的哪些品质可以调整？"
javascript
let params = {
  seed: 12345,  // 始终包含种子以实现可重现性
  // 颜色
  // 添加控制YOUR算法的参数：
  // - 数量（多少？）
  // - 尺度（多大？多快？）
  // - 概率（多可能？）
  // - 比率（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（行为何时改变？）
};
设计有效参数，专注于系统需要可调优的属性，而不是以"模式类型"的方式思考。
核心算法——表达哲学：
关键：算法哲学应该规定要构建什么。
要通过代码表达哲学，避免思考"我应该使用哪种模式？"而应该思考"如何通过代码表达这种哲学？"
如果哲学是关于有机涌现，考虑使用：
  • 随时间积累或生长的元素
  • 受自然规则约束的随机过程
  • 反馈循环和交互
如果哲学是关于数学美感，考虑使用：
  • 几何关系和比率
  • 三角函数和和谐
  • 产生意外模式的精确计算
算法从哲学流出，而不是从选项菜单。
**为了指导实现，让概念本质为创造性和原始选择提供信息。构建表达此特定请求愿景的内容。
Canvas设置：标准p5.js结构：
javascript
function setup() {
  createCanvas(1200, 1200);
  // 初始化你的系统
}

function draw() {
  // 你的生成算法
  // 可以是静态（无循环）或动画
}
Seed Randomness (Art Block Pattern):
javascript
// 始终使用种子以实现可重现性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
Parameter Structure — Follow the Philosophy:
To establish parameters that naturally emerge from the algorithmic philosophy, consider: "Which qualities of this system should be tunable?"
javascript
let params = {
  seed: 12345,  // 始终包含种子以实现可重现性
  // 颜色
  // 添加控制YOUR算法的参数：
  // - 数量（多少？）
  // - 尺度（多大？多快？）
  // - 概率（多可能？）
  // - 比率（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（行为何时改变？）
};
Design effective parameters focused on the properties the system needs to be tuned, rather than thinking in terms of "pattern types".
Core Algorithm — Express the Philosophy:
Key: The algorithmic philosophy should dictate what to build.
To express the philosophy through code, avoid thinking "Which pattern should I use?" and instead think "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 rules
  • Feedback loops and interactions
If the philosophy is about mathematical aesthetics, consider using:
  • Geometric relationships and ratios
  • Trigonometric functions and harmonics
  • Precise calculations that produce unexpected patterns
The algorithm flows from the philosophy, not from a menu of options.
To guide implementation, let the conceptual essence inform 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);
  // 初始化你的系统
}

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

工匠精神要求

Craftsmanship Requirements

关键：要达到精通，创建感觉像通过大师级生成艺术家无数次迭代开发的算法。仔细调整每个参数。确保每个模式都有目的地涌现。这不是随机噪点——这是经过提炼的受控混沌。
  • 平衡：复杂度而无视觉噪点，有序而无僵化
  • 颜色和谐：深思熟虑的调色板，而不是随机RGB值
  • 构图：即使在随机性中，保持视觉层次和流动
  • 性能：流畅执行，如果是动画则针对实时优化
  • 可重现性：相同种子始终产生相同输出
Key: To achieve mastery, create algorithms that feel like they have been developed through countless iterations by a master generative artist. Tune each parameter carefully. Ensure every pattern emerges purposefully. This is not random noise — this is refined controlled chaos.
  • Balance: Complexity without visual clutter, order without rigidity
  • Color Harmony: Deliberate 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 — as markdown or text explaining generative aesthetics
  2. Single HTML Artifact — self-contained interactive generative art built from 
    templates/viewer.html
    (see Step 0 and next section)
The HTML artifact contains everything: p5.js (from CDN), algorithm, parameter controls, and UI — all in one file that works 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 the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser — no setup required. Embed everything inline.

关键：什么是固定与可变

Key: What's Fixed vs Variable

templates/viewer.html
文件是基础。它包含工作所需的确切结构和样式。
固定（始终完全按所示包含）：
  • 布局结构（页眉、侧边栏、主画布区域）
  • Anthropic品牌（UI颜色、字体、渐变）
  • 侧边栏中的种子部分：
    • 种子显示
    • 上一个/下一个按钮
    • 随机按钮
    • 跳转到种子输入+前往按钮
  • 侧边栏中的操作部分：
    • 重新生成按钮
    • 重置按钮
可变（为每个作品自定义）：
  • 整个p5.js算法（setup/draw/类）
  • 参数对象（定义艺术需要什么）
  • 侧边栏中的参数部分：
    • 参数控件的数量
    • 参数名称
    • 滑块的min/max/step值
    • 控件类型（滑块、输入等）
  • 颜色部分（可选）：
    • 有些艺术需要颜色选择器
    • 有些艺术可能使用固定颜色
    • 有些艺术可能是单色的（不需要颜色控件）
    • 基于艺术的需求决定
**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。
The 
templates/viewer.html
file is the foundation. It contains the exact structure and styling needed for it to work.
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/Random/Jump buttons
  • Actions section in sidebar:
    • Regenerate button
    • Reset button
Variable (Customize for Each Piece):
  • 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, inputs, etc.)
  • Colors section (optional):
    • Some art needs color pickers
    • Some art uses fixed colors
    • Some art is monochromatic (no color controls needed)
    • Decide based on the art's needs
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.

必需功能

Required Features

1. 参数控件
  • 数值参数的滑块（粒子计数、噪点缩放、速度等）
  • 调色板的颜色选择器
  • 参数更改时的实时更新
  • 重置按钮以恢复默认值
2. 种子导航
  • 显示当前种子号
  • "上一个"和"下一个"按钮循环遍历种子
  • 随机按钮用于随机种子
  • 跳转到特定种子输入+前往按钮
  • 请求时生成100个变体（种子1-100）
3. 单个工件结构
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 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. 参数（可变）——为艺术创建控件：
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. 颜色（可选/可变）——如果艺术需要可调色板：
  • 如果用户应该控制调色板，添加颜色选择器
  • 如果艺术使用固定颜色，跳过此部分
  • 如果艺术是单色的（不需要颜色控件），跳过此部分
根据艺术的需求决定。
**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。
1. Parameter Controls
  • Sliders for numerical parameters (particle count, noise scale, velocity, etc.)
  • Color pickers for palettes
  • 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 for random seeds
  • Jump to specific seed input + Go button
  • Generate 100 variations (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 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>
Key: This is a single artifact. No external files, no imports (except p5.js CDN). Everything 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 needed.
3. Colors (Optional/Variable) — if the art needs adjustable palettes:
  • Add color pickers if users should control the palette
  • Skip this section if the art uses fixed colors
  • Skip this section if the art is monochromatic (no color controls needed)
Decide based on the art's needs.
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.

必需功能

Required Features

1. 参数控件
  • 数值参数的滑块（粒子计数、噪点缩放、速度等）
  • 调色板的颜色选择器
  • 参数更改时的实时更新
  • 重置按钮以恢复默认值
2. 种子导航
  • 显示当前种子号
  • "上一个"和"下一个"按钮循环遍历种子
  • 随机按钮用于随机种子
  • 跳转到特定种子输入+前往按钮
  • 请求时生成100个变体（种子1-100）
3. 单个工件结构
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 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. 参数（可变）——为艺术创建控件：
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. 颜色（可选/可变）——如果艺术需要可调色板：
  • 如果用户应该控制调色板，添加颜色选择器
  • 如果艺术使用固定颜色，跳过此部分
  • 如果艺术是单色的（不需要颜色控件），跳过此部分
根据艺术的需求决定。
**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。
1. Parameter Controls
  • Sliders for numerical parameters (particle count, noise scale, velocity, etc.)
  • Color pickers for palettes
  • 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 for random seeds
  • Jump to specific seed input + Go button
  • Generate 100 variations (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 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>
Key: This is a single artifact. No external files, no imports (except p5.js CDN). Everything 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 needed.
3. Colors (Optional/Variable) — if the art needs adjustable palettes:
  • Add color pickers if users should control the palette
  • Skip this section if the art uses fixed colors
  • Skip this section if the art is monochromatic (no color controls needed)
Decide based on the art's needs.
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.

必需功能

Required Features

1. 参数控件
  • 数值参数的滑块（粒子计数、噪点缩放、速度等）
  • 调色板的颜色选择器
  • 参数更改时的实时更新
  • 重置按钮以恢复默认值
2. 种子导航
  • 显示当前种子号
  • "上一个"和"下一个"按钮循环遍历种子
  • 随机按钮用于随机种子
  • 跳转到特定种子输入+前往按钮
  • 请求时生成100个变体（种子1-100）
3. 单个工件结构
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 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. 参数（可变）——为艺术创建控件：
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. 颜色（可选/可变）——如果艺术需要可调色板：
  • 如果用户应该控制调色板，添加颜色选择器
  • 如果艺术使用固定颜色，跳过此部分
  • 如果艺术是单色的（不需要颜色控件），跳过此部分
根据艺术的需求决定。
**每个作品都应该有独特的参数和算法！**固定部分提供一致的UX——其他所有内容都表达独特的愿景。
1. Parameter Controls
  • Sliders for numerical parameters (particle count, noise scale, velocity, etc.)
  • Color pickers for palettes
  • 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 for random seeds
  • Jump to specific seed input + Go button
  • Generate 100 variations (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 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>
Key: This is a single artifact. No external files, no imports (except p5.js CDN). Everything 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 needed.
3. Colors (Optional/Variable) — if the art needs adjustable palettes:
  • Add color pickers if users should control the palette
  • Skip this section if the art uses fixed colors
  • Skip this section if the art is monochromatic (no color controls needed)
Decide based on the art's needs.
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.

要求**

Requirements**

  • 种子控件必须工作（上一个/下一个/随机/跳转/显示）
  • 所有参数必须有UI控件
  • 重新生成、重置、下载按钮必须工作
  • 保持Anthropic品牌（UI样式，而不是艺术颜色）
  • Seed controls must work (previous/next/random/jump/display)
  • All parameters must have UI controls
  • Regenerate, reset, download buttons must work
  • Maintain Anthropic branding (UI styling, 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 needed
  3. Share: Send the HTML file — it's completely self-contained

变体与探索

Variations & Exploration

工件默认包含种子导航（上一个/下一个/随机按钮），允许用户通过探索种子空间而不创建多个文件。如果用户想要突出显示的特定变体：
  1. 包含种子预设（"变体1：种子42"、"变体2：种子127"等）的按钮
  2. 添加在同一单个工件中并排显示多个种子缩略图的"画廊模式"
  3. 所有都在同一单个工件内
这就像从同一印版创建一系列版画——算法一致，但每个种子揭示其潜力的不同方面。交互式性质意味着用户通过探索种子空间发现自己的最爱。
The artifact includes seed navigation (previous/next/random buttons) by default, allowing users to explore the seed space without creating multiple files. If users want specific highlighted variations:
  1. Include buttons for seed presets ("Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
  2. Add a "gallery mode" that displays multiple seed thumbnails side-by-side within the same single artifact
  3. 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. The interactive nature means users discover their favorites by exploring the seed space.

创作过程

Creative Process

用户请求 → 算法哲学 → 实现
每个请求都是唯一的。该过程涉及：
  1. 解读用户意图——寻求什么美学？
  2. 创建算法哲学（4-6段）描述计算方法
  3. 在代码中实现它——构建表达此哲学的算法
  4. 设计适当的参数——什么应该可调优？
  5. 构建匹配的UI控件——那些参数的滑块/输入
  6. 常量：
  • Anthropic品牌（颜色、字体、布局）
  • 种子导航（始终存在）
  • 自包含HTML工件
  • 其他所有内容都是可变的：
    • 算法本身
    • 参数
    • UI控件
    • 视觉结果
要获得最佳结果，信任创造力并让哲学指导实现。
User Request → Algorithmic Philosophy → Implementation
Every request is unique. The process involves:
  1. Interpreting User Intent — What aesthetics are being sought?
  2. Creating Algorithmic Philosophy (4-6 paragraphs) describing the computational approach
  3. Implementing it in Code — building the algorithm that expresses this philosophy
  4. Designing Appropriate Parameters — what should be tunable?
  5. Building Matching UI Controls — sliders/inputs for those parameters
  6. 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 the 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 parameters section UI controls
    • Extensive comments in the file exactly mark what to keep vs replace
  • templates/generator_template.js: Reference for p5.js best practices and code structure principles.
    • Shows how to organize parameters, use seed randomness, structure classes
    • Not a pattern menu — use these principles to build unique algorithms
    • Embed the algorithm inline in the HTML artifact (don't create a separate .js file)
  • Key Reminders:
    • Templates are starting points, not inspiration
    • The algorithm is where unique content is created
    • Don't copy flow field examples — build what the philosophy demands
    • But keep the exact UI structure and Anthropic branding from the template ",