Back to Details

pattern-generator

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个词）：比如“有机湍流”/“量子谐波”/“涌现静谧”
阐述理念（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.
“有机湍流” 理念：受自然法则约束的混沌，从无序中涌现出秩序。 算法表达：由多层Perlin噪声驱动的流场。数千个粒子跟随向量力运动，其轨迹累积成有机密度图。多阶噪声创造出湍流区域与平静区域。颜色由速度和密度决定——快速粒子明亮耀眼，慢速粒子渐隐为阴影。算法运行至平衡状态——这是经过精心调校的平衡，每个参数都由计算美学大师经过无数次迭代优化而成。
“量子谐波” 理念：表现出类波干涉模式的离散实体。 算法表达：在网格上初始化粒子，每个粒子携带通过正弦波演化的相位值。当粒子靠近时，它们的相位会发生干涉——相长干涉产生明亮节点，相消干涉形成空白区域。简单的简谐运动生成复杂的涌现曼陀罗图案。这是经过煞费苦心的频率校准的成果，每个比率都经过精心选择以产生共振美感。
“递归低语” 理念：跨尺度的自相似性，有限空间中的无限深度。 算法表达：可递归细分的分支结构。每个分支略有随机化，但受黄金比例约束。L系统或递归细分生成兼具数学感与有机感的树状形态。细微的噪声扰动打破完美对称性。线条粗细随递归层级递减。每个分支角度都是深入数学探索的成果。
“场动力学” 理念：通过物质的作用将无形的力可视化。 算法表达：由数学函数或噪声构建的向量场。粒子在边缘诞生，沿场线流动，到达平衡状态或边界时消失。多个场可以吸引、排斥或旋转粒子。可视化仅显示轨迹——无形力量的幽灵般证据。这是一场通过力平衡精心编排的计算舞蹈。
“随机结晶” 理念：随机过程结晶为有序结构。 算法表达：随机圆堆积或 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品牌元素