Back to Details

algorithmic-art

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
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).
This happens in two steps:
  1. Algorithmic Philosophy Creation (.md file)
  2. Express by creating p5.js generative art (.html + .js files)
First, undertake this task:
算法理念是通过代码表达的计算美学流派。输出.md文件（理念文档）、.html文件（交互式查看器）和.js文件（生成算法）。
创作分为两个步骤：
  1. 算法理念构建（.md文件）
  2. 通过创建p5.js生成艺术来表达理念（.html + .js文件）
首先，执行以下任务：

ALGORITHMIC PHILOSOPHY CREATION

算法理念构建

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
  • Computational processes, emergent behavior, mathematical beauty
  • Seeded randomness, noise fields, organic systems
  • Particles, flows, fields, forces
  • Parametric variation and controlled chaos
首先，构建一套算法理念（而非静态图像或模板），需通过以下维度诠释：
  • 计算流程、涌现行为、数学美感
  • 种子随机性、噪声场、有机系统
  • 粒子、流、场、力
  • 参数变化与受控混沌

THE CRITICAL UNDERSTANDING

核心认知

  • What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
  • What is created: An algorithmic philosophy/generative aesthetic movement.
  • What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential 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 beauty. Seeded variation.
  • 输入内容：用户提供的细微输入或指令作为基础，但不应限制创作自由。
  • 产出内容：一套算法理念/生成美学流派。
  • 后续流程：基于该理念，通过代码将其表达出来——创建p5.js草图，其中90%为算法生成，10%为关键参数。
可采用以下思路：
  • 撰写生成艺术流派的宣言
  • 下一阶段编写将理念落地的算法
理念必须强调：算法表达、涌现行为、计算美感、种子变体。

HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

如何生成算法理念

Name the movement (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
Articulate the philosophy (4-6 paragraphs - concise but complete):
To capture the ALGORITHMIC essence, express how this philosophy manifests through:
  • Computational processes and mathematical relationships?
  • Noise functions and randomness patterns?
  • Particle behaviors and field dynamics?
  • Temporal evolution and system states?
  • Parametric variation and emergent complexity?
CRITICAL GUIDELINES:
  • Avoid redundancy: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
  • Emphasize craftsmanship REPEATEDLY: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
  • Leave creative space: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.
The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.
为流派命名（1-2个词）："Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
阐述理念（4-6段，简洁完整）：
为体现算法本质，需说明该理念如何通过以下方式呈现：
  • 计算流程与数学关系？
  • 噪声函数与随机模式？
  • 粒子行为与场动力学？
  • 时间演化与系统状态？
  • 参数变化与涌现复杂度？
核心准则：
  • 避免冗余：每个算法维度仅提及一次。除非增加新深度，否则勿重复噪声理论、粒子动力学或数学原理相关概念。
  • 反复强调工艺性：理念必须多次强调，最终算法应体现出历经无数小时开发、精心打磨、由该领域顶尖专家打造的质感。此表述至关重要——重复使用如“精心雕琢的算法”“深厚计算专业知识的成果”“煞费苦心的优化”“大师级实现”等措辞。
  • 预留创作空间：明确算法方向，但保持简洁，让后续的Claude能以极高工艺水平进行诠释性实现。
理念必须引导后续步骤以算法方式表达创意，而非通过静态图像。美感源于过程，而非最终帧。

PHILOSOPHY EXAMPLES

理念示例

"Organic Turbulence" Philosophy: Chaos constrained by natural law, order emerging from disorder. Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.
"Quantum Harmonics" Philosophy: Discrete entities exhibiting wave-like interference patterns. Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.
"Recursive Whispers" Philosophy: Self-similarity across scales, infinite depth in finite space. Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.
"Field Dynamics" Philosophy: Invisible forces made visible through their effects 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. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.
"Stochastic Crystallization" Philosophy: Random processes crystallizing into ordered structures. Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.
These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.
"Organic Turbulence" 理念：受自然法则约束的混沌，从无序中涌现的秩序。 算法表达：由多层Perlin noise驱动的流场。数千个粒子跟随向量力运动，轨迹累积成有机密度图。多阶噪声创造出湍流区域与平静区域。颜色由速度和密度决定——快速粒子明亮，慢速粒子渐变为阴影。算法运行至平衡状态——这是经过无数次迭代、由计算美学大师精心调校的参数平衡。
"Quantum Harmonics" 理念：呈现类波干涉模式的离散实体。 算法表达：在网格上初始化粒子，每个粒子携带通过正弦波演化的相位值。当粒子靠近时，相位产生干涉——相长干涉形成明亮节点，相消干涉形成空白区域。简谐运动生成复杂的涌现曼陀罗图案。这是经过煞费苦心的频率校准的成果，每个比例都经过精心选择以产生共振美感。
"Recursive Whispers" 理念：跨尺度的自相似性，有限空间中的无限深度。 算法表达：递归细分的分支结构。每个分支略有随机化，但受黄金比例约束。L-系统或递归细分生成兼具数学感与有机感的树状形态。细微的噪声扰动打破完美对称性。线宽随递归层级递减。每个分支角度都是深入数学探索的成果。
"Field Dynamics" 理念：通过对物质的作用使无形之力可视化。 算法表达：由数学函数或噪声构建的向量场。粒子从边缘诞生，沿场线运动，到达平衡状态或边界时消失。可视化仅展示轨迹——无形之力的幽灵般证据。这是通过力平衡精心编排的计算之舞。
"Stochastic Crystallization" 理念：随机过程结晶为有序结构。 算法表达：随机圆堆积或Voronoi镶嵌。从随机点开始，通过松弛算法演化。单元格相互推开直至平衡。根据单元格大小、邻居数量或距中心的距离上色。涌现的有机拼贴既随机又必然。每个种子都能产生独特的晶体美感——这是大师级生成算法的标志。
以上是精简示例。实际算法理念应为4-6段详实内容。

ESSENTIAL PRINCIPLES

核心原则

  • ALGORITHMIC PHILOSOPHY: Creating a computational worldview to be expressed through code
  • PROCESS OVER PRODUCT: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
  • PARAMETRIC EXPRESSION: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
  • ARTISTIC FREEDOM: The next Claude interprets the philosophy algorithmically - provide creative implementation room
  • PURE GENERATIVE ART: This is about making LIVING ALGORITHMS, not static images with randomness
  • EXPERT CRAFTSMANSHIP: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics
The algorithmic philosophy should be 4-6 paragraphs long. Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.
  • 算法理念：构建一套通过代码表达的计算世界观
  • 过程重于产物：始终强调美感源于算法的执行——每次运行都是独特的
  • 参数化表达：通过数学关系、力、行为传递创意，而非静态构图
  • 艺术自由：后续的Claude以算法方式诠释理念——提供创意实现空间
  • 纯粹生成艺术：这是打造“活的算法”，而非带有随机性的静态图像
  • 精湛工艺：反复强调最终算法必须给人以精心雕琢、历经无数次迭代、由计算美学领域顶尖专家凭借深厚专业知识打造的感觉
算法理念应长达4-6段。 用富有诗意的计算哲学填充内容，融合预期愿景。避免重复相同观点。将此算法理念输出为.md文件。

DEDUCING THE CONCEPTUAL SEED

推导概念种子

CRITICAL STEP: Before implementing the algorithm, identify the subtle conceptual thread from the original request.
THE ESSENTIAL PRINCIPLE: The concept is a subtle, niche reference embedded within the algorithm itself - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.
This is VERY IMPORTANT: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.
关键步骤：在实现算法之前，从原始请求中提炼出细微的概念主线。
核心原则： 该概念是嵌入算法本身的细微、小众参考——并非总是字面意义，而是始终精妙。熟悉该主题的人会直观感受到它，而其他人则只需体验大师级的生成作品。算法理念提供计算语言，推导的概念赋予灵魂——将无形的概念DNA巧妙融入参数、行为和涌现模式中。
这一点非常重要：参考必须足够精炼，以提升作品深度而不张扬。就像爵士乐手通过算法和声引用另一首歌——只有懂的人能捕捉到，但所有人都能欣赏生成的美感。

P5.JS IMPLEMENTATION

P5.JS实现

With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.
在确立理念与概念框架后，通过代码将其表达出来。在开始前先理清思路。仅使用已创建的算法理念和以下指令。

⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️

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

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 that file as the 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 styling or color schemes
  • ❌ Using system fonts or dark themes
  • ❌ Changing the sidebar structure
Follow these practices:
  • ✅ Copy the template's exact HTML structure
  • ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
  • ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
  • ✅ Replace only the p5.js algorithm and parameter controls
The template is the foundation. Build on it, don't rebuild it.
To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.
关键：在编写任何HTML之前：
  1. 阅读 
    templates/viewer.html
    （使用读取工具）
  2. 研究其精确结构、样式和Anthropic品牌标识
  3. 将该文件作为字面起点——而非仅作为灵感
  4. 完全保留所有固定部分（页眉、侧边栏结构、Anthropic颜色/字体、种子控件、操作按钮）
  5. 仅替换文件注释中标记的可变部分（算法、参数、参数UI控件）
避免：
  • ❌ 从头创建HTML
  • ❌ 自创自定义样式或配色方案
  • ❌ 使用系统字体或深色主题
  • ❌ 更改侧边栏结构
遵循以下规范：
  • ✅ 复制模板的精确HTML结构
  • ✅ 保留Anthropic品牌标识（Poppins/Lora字体、浅色、渐变背景）
  • ✅ 维持侧边栏布局（种子 → 参数 → 颜色？→ 操作）
  • ✅ 仅替换p5.js算法和参数控件
模板是基础。在其上构建，而非重建。
以算法理念为基础，打造画廊级的计算艺术作品，使其充满生命力。

TECHNICAL REQUIREMENTS

技术要求

Seeded Randomness (Art Blocks Pattern):
javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
Parameter Structure - FOLLOW THE PHILOSOPHY:
To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"
javascript
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?)
};
To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".
Core Algorithm - EXPRESS THE PHILOSOPHY:
CRITICAL: 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 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 a menu of options.
To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular 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
}
种子随机性（Art Blocks模式）：
javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
参数结构 - 遵循理念：
为建立从算法理念自然衍生的参数，思考：“该系统的哪些属性可调整？”
javascript
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结构：
javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

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

CRAFTSMANSHIP REQUIREMENTS

工艺要求

CRITICAL: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.
  • Balance: Complexity without visual noise, order without rigidity
  • Color Harmony: Thoughtful palettes, not random RGB values
  • Composition: Even in randomness, maintain visual hierarchy and flow
  • Performance: Smooth execution, optimized for real-time if animated
  • Reproducibility: Same seed ALWAYS produces identical output
关键：达到大师级水平，打造出仿佛由生成艺术大师历经无数次迭代而成的算法。精心调校每个参数。确保每个模式的涌现都有其目的。这不是随机噪声——这是经过深厚专业知识提炼的受控混沌。
  • 平衡：复杂但无视觉噪声，有序但不僵化
  • 色彩和谐：精心设计的调色板，而非随机RGB值
  • 构图：即使在随机性中，也保持视觉层次与流动感
  • 性能：执行流畅，若为动画则优化为实时运行
  • 可复现性：相同种子始终产生完全相同的输出

OUTPUT FORMAT

输出格式

Output:
  1. Algorithmic Philosophy - As markdown or text explaining the generative aesthetic
  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), the 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.
输出：
  1. 算法理念 - 以markdown或文本形式解释生成美学
  2. 单个HTML制品 - 基于
    templates/viewer.html
    构建的自包含交互式生成艺术（见步骤0和下一节）
HTML制品包含所有内容：p5.js（来自CDN）、算法、参数控件和UI——全部在一个文件中，可立即在claude.ai或任何浏览器中运行。从模板文件开始，而非从头创建。

INTERACTIVE ARTIFACT CREATION

交互式制品创建

REMINDER: 
templates/viewer.html
should have already been read (see STEP 0). Use that 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.
提醒：应已读取
templates/viewer.html
（见步骤0）。以此文件为起点。
为支持对生成艺术的探索，创建单个自包含的HTML制品。确保该制品可立即在claude.ai或任何浏览器中运行——无需设置。所有内容内联嵌入。

CRITICAL: WHAT'S FIXED VS VARIABLE

关键：固定内容与可变内容

The 
templates/viewer.html
file is the foundation. It contains the exact structure and styling needed.
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 + Go button
  • Actions section in sidebar:
    • Regenerate button
    • Reset button
VARIABLE (customize for each artwork):
  • The entire p5.js algorithm (setup/draw/classes)
  • The parameters object (define what the art needs)
  • The 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 might use fixed colors
    • Some art might be monochrome (no color controls needed)
    • Decide based on the art's needs
Every artwork should have unique parameters and algorithm! The fixed parts provide consistent UX - everything else expresses the unique vision.
templates/viewer.html
文件是基础，包含所需的精确结构和样式。
固定内容（完全按原样保留）：
  • 布局结构（页眉、侧边栏、主画布区域）
  • Anthropic品牌标识（UI颜色、字体、渐变）
  • 侧边栏中的种子部分：
    • 种子显示
    • 上一个/下一个按钮
    • 随机按钮
    • 跳转到种子输入框 + 跳转按钮
  • 侧边栏中的操作部分：
    • 重新生成按钮
    • 重置按钮
可变内容（为每件艺术品自定义）：
  • 整个p5.js算法（setup/draw/类）
  • 参数对象（定义艺术品所需的参数）
  • 侧边栏中的参数部分：
    • 参数控件数量
    • 参数名称
    • 滑块的最小值/最大值/步长
    • 控件类型（滑块、输入框等）
  • 颜色部分（可选）：
    • 部分艺术品需要颜色选择器
    • 部分艺术品可能使用固定颜色
    • 部分艺术品可能为单色（无需颜色控件）
    • 根据艺术品需求决定
每件艺术品都应有独特的参数和算法！ 固定部分提供一致的用户体验——其余部分表达独特愿景。

REQUIRED FEATURES

必备功能

1. Parameter Controls
  • Sliders for numeric parameters (particle count, noise scale, speed, etc.)
  • Color pickers for palette colors
  • Real-time updates when parameters change
  • Reset button to restore defaults
2. Seed Navigation
  • Display current seed number
  • "Previous" and "Next" buttons to cycle through seeds
  • "Random" button for random seed
  • Input field to jump to specific seed
  • Generate 100 variations when requested (seeds 1-100)
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>
CRITICAL: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
4. Implementation Details - BUILD THE SIDEBAR
The sidebar structure:
1. Seed (FIXED) - Always include exactly as shown:
  • Seed display
  • Prev/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 needs adjustable colors:
  • Add color pickers if users should control palette
  • Skip this section if the art uses fixed colors
  • Skip if the art is monochrome
4. Actions (FIXED) - Always include exactly as shown:
  • Regenerate button
  • Reset button
  • Download PNG button
Requirements:
  • Seed controls must work (prev/next/random/jump/display)
  • All parameters must have UI controls
  • Regenerate, Reset, Download buttons must work
  • Keep Anthropic branding (UI styling, not art colors)
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>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>
根据参数数量添加相应数量的control-group div。
3. 颜色（可选/可变） - 若艺术品需要可调颜色则包含：
  • 若用户需控制调色板则添加颜色选择器
  • 若艺术品使用固定颜色则跳过此部分
  • 若艺术品为单色则跳过
4. 操作（固定） - 完全按原样保留：
  • 重新生成按钮
  • 重置按钮
  • 下载PNG按钮
要求：
  • 种子控件必须可用（上一个/下一个/随机/跳转/显示）
  • 所有参数必须有UI控件
  • 重新生成、重置、下载按钮必须可用
  • 保留Anthropic品牌标识（UI样式，而非艺术品颜色）

USING THE ARTIFACT

制品使用

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. Sharing: Send the HTML file - it's completely self-contained
HTML制品可立即使用：
  1. 在claude.ai中：作为交互式制品显示——即时运行
  2. 作为文件：保存并在任何浏览器中打开——无需服务器
  3. 分享：发送HTML文件——完全自包含

VARIATIONS & EXPLORATION

变体与探索

The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:
  • Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
  • Add a "Gallery Mode" that shows 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 different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.
制品默认包含种子导航（上一个/下一个/随机按钮），用户无需创建多个文件即可探索变体。若用户希望突出显示特定变体：
  • 包含种子预设（如“变体1：种子42”“变体2：种子127”等按钮）
  • 添加“画廊模式”，并排显示多个种子的缩略图
  • 所有内容都在同一个单一制品中
这就像用同一个印版创作一系列版画——算法一致，但每个种子都展现出其潜力的不同方面。交互式特性意味着用户可通过探索种子空间发现自己喜欢的变体。

THE CREATIVE PROCESS

创作流程

User request → Algorithmic philosophy → Implementation
Each request is unique. The process involves:
  1. Interpret the user's intent - What aesthetic is being sought?
  2. Create an algorithmic philosophy (4-6 paragraphs) describing the computational approach
  3. Implement it in code - Build the algorithm that expresses this philosophy
  4. Design appropriate parameters - What should be tunable?
  5. Build matching UI controls - Sliders/inputs for those parameters
The constants:
  • Anthropic branding (colors, fonts, layout)
  • Seed navigation (always present)
  • Self-contained HTML artifact
Everything else is variable:
  • The algorithm itself
  • The parameters
  • The UI controls
  • The visual outcome
To achieve the best results, trust creativity and let the philosophy guide the implementation.
用户请求 → 算法理念 → 实现
每个请求都是独特的。流程包括：
  1. 解读用户意图 - 寻求何种美学风格？
  2. 创建算法理念（4-6段）描述计算方法
  3. 通过代码实现 - 构建表达该理念的算法
  4. 设计合适的参数 - 哪些属性应可调？
  5. 构建匹配的UI控件 - 为这些参数设计滑块/输入框
常量：
  • Anthropic品牌标识（颜色、字体、布局）
  • 种子导航（始终存在）
  • 自包含HTML制品
其余所有内容都是可变的：
  • 算法本身
  • 参数
  • UI控件
  • 视觉效果
为获得最佳结果，相信创造力，让理念引导实现过程。

RESOURCES

资源

This skill includes helpful templates and documentation:
  • templates/viewer.html: REQUIRED STARTING POINT for all HTML artifacts.
    • This is the foundation - contains the exact structure and Anthropic branding
    • Keep unchanged: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
    • Replace: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
    • The extensive comments in the file mark exactly 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 seeded randomness, structure classes
    • NOT a pattern menu - use these principles to build unique algorithms
    • Embed algorithms inline in the HTML artifact (don't create separate .js files)
Critical reminder:
  • The template is the STARTING POINT, not inspiration
  • The algorithm is where to create something unique
  • Don't copy the flow field example - build what the philosophy demands
  • But DO keep the exact UI structure and Anthropic branding from the template
此技能包含有用的模板和文档：
  • templates/viewer.html：所有HTML制品的必填起点
    • 这是基础——包含精确的结构和Anthropic品牌标识
    • 保持不变：布局结构、侧边栏组织、Anthropic颜色/字体、种子控件、操作按钮
    • 替换：p5.js算法、参数定义和参数部分的UI控件
    • 文件中的详细注释标记了需保留和替换的内容
  • templates/generator_template.js：p5.js最佳实践和代码结构原则的参考
    • 展示如何组织参数、使用种子随机性、构建类
    • 这不是模式菜单——使用这些原则构建独特算法
    • 将算法内联嵌入HTML制品中（勿创建单独的.js文件）
关键提醒：
  • 模板是起点，而非灵感
  • 算法是创作核心，需打造独特内容
  • 勿复制流场示例——构建理念所需的内容
  • 但务必保留模板中的精确UI结构和Anthropic品牌标识