Algorithmic Art：p5.js 生成艺术创作

一句话总结

algorithmic-art 是使用 p5.js 创建生成艺术的 Skill——通过”算法哲学 → 代码实现”两阶段流程，用种子随机性和参数化控制创作可复现的交互式艺术作品。

核心能力

🎨 算法哲学创作：以 manifesto 形式定义生成艺术运动
✨ p5.js 生成艺术生成：从哲学理念到可执行代码的完整转化
🔢 种子随机性：基于 Art Blocks 模式的确定性随机（同一种子→完全相同的输出）
🎛 参数化控制：交互式滑块和颜色选择器，实时调整算法参数
🔄 种子导航：prev/next/random/jump 四重种子探索

触发场景

当用户请求”创建生成艺术”、“算法艺术”、“p5.js 视觉”、“粒子系统”、“流场”等时触发。

文件清单

One-Line Summary

algorithmic-art is a Skill for creating generative art with p5.js — using a two-phase “philosophy → code” process with seeded randomness and parametric control for reproducible, interactive artworks.

Core Capabilities

🎨 Algorithmic philosophy creation: defining generative art movements as manifestos
✨ p5.js generative art generation: complete pipeline from philosophy to executable code
🔢 Seeded randomness: deterministic randomization per Art Blocks pattern (same seed → identical output)
🎛 Parametric control: interactive sliders and color pickers for real-time algorithm adjustment
🔄 Seed navigation: prev/next/random/jump for exploring the seed space

Trigger Scenarios

Triggers when users request “generative art”, “algorithmic art”, “p5.js visuals”, “particle systems”, “flow fields”, etc.

File Inventory

algorithmic-art
- SKILL.md 主入口 · ~400 行 · Markdown
- LICENSE.txt Apache 2.0
- templates 模板文件 · 2 个
  - generator_template.js p5.js 最佳实践参考
  - viewer.html HTML 包装器模板 · ~400 行

目录结构分析

algorithmic-art 属于**“模板型”** Skill——核心逻辑在 SKILL.md 的指令中，模板文件提供可复用的结构和风格基线。

其结构非常精炼：

SKILL.md（约 400 行）：核心指令文件，定义了完整的”哲学→代码”两阶段创作流程
templates/generator_template.js：p5.js 编码参考，展示参数组织、种子随机性和类结构的最佳实践
templates/viewer.html：HTML 包装器模板，包含 Anthropic 品牌样式、种子导航 UI、和侧边栏布局——所有 HTML 作品都必须以此为基础

SKILL.md 结构解析

SKILL.md 的核心设计围绕两阶段创作过程展开：

阶段 1：算法哲学创作（Algorithmic Philosophy Creation）

Claude 首先创建 4-6 段的”算法哲学”（.md 文件），这是一份生成艺术运动的宣言。哲学必须涵盖：

命名运动（1-2 个词）：如 “Organic Turbulence”、“Quantum Harmonics”
算法表达方式：使用什么计算过程、数学关系和噪声函数
工匠精神强调：反复强调算法必须看起来经过无数次迭代和精心调优

阶段 2：p5.js 实现（p5.js Implementation）

哲学创建后，Claude 将其转化为代码。关键约束是：

必须先读取 templates/viewer.html 作为起点
保持 Anthropic 品牌样式（Poppins/Lora 字体、浅色主题、渐变背景）
只替换算法部分和参数控制，不重建 UI 结构

”宣言驱动”的设计哲学

这种”先写宣言，再写代码”的模式确保了生成的作品有统一的美学灵魂——算法哲学决定了使用什么数学关系（噪声场、分形、粒子系统），而具体实现则在哲学框架内自由发挥。

Directory Structure Analysis

algorithmic-art is a “Template-driven” Skill — core logic lives in SKILL.md instructions, while template files provide reusable structure and style baselines.

Its structure is lean:

SKILL.md (~400 lines): Core instruction file defining the complete two-phase “philosophy → code” creative process
templates/generator_template.js: p5.js coding reference showing best practices for parameter organization, seeded randomness, and class structure
templates/viewer.html: HTML wrapper template with Anthropic branding, seed navigation UI, and sidebar layout — all HTML works must use this as their starting point

SKILL.md Structure Analysis

The SKILL.md’s core design revolves around a two-phase creative process:

Phase 1: Algorithmic Philosophy Creation

Claude first creates a 4-6 paragraph “algorithmic philosophy” (.md file) as a manifesto for a generative art movement. The philosophy must cover:

Naming the movement (1-2 words): e.g., “Organic Turbulence”, “Quantum Harmonics”
Algorithmic expression: what computational processes, mathematical relationships, and noise functions to use
Emphasis on craftsmanship: repeatedly stressing the algorithm must look like it went through countless iterations

Phase 2: p5.js Implementation

After philosophy creation, Claude translates it into code. Key constraints:

Must read templates/viewer.html first as the starting point
Keep Anthropic branding (Poppins/Lora fonts, light theme, gradient backgrounds)
Only replace the algorithm and parameter controls, don’t rebuild the UI structure

”Manifesto-Driven” Design Philosophy

This “write the manifesto first, then the code” pattern ensures every generated piece has a unified aesthetic soul — the algorithmic philosophy dictates what mathematical relationships to use (noise fields, fractals, particle systems), while implementation stays free within that framework.

algorithmic-art
- SKILL.md 主入口 · ~400 行 · 两阶段指令
- LICENSE.txt Apache 2.0
- templates 模板文件 · 2 个
  - generator_template.js ~200 行 · p5.js 最佳实践参考
  - viewer.html ~400 行 · 必须作为 HTML 作品的起点

模块关系

SKILL.md 是唯一的”大脑”——它通过指令引导 Claude 完成哲学创作和代码实现。模板文件是被动参考，不包含可执行逻辑：

Module Relationships

SKILL.md is the sole “brain” — it guides Claude through philosophy creation and code implementation via instructions. Template files are passive references with no executable logic:

脚本清单

algorithmic-art 不包含独立的可执行脚本。它使用”模板驱动”模式——通过 SKILL.md 指令 + 两个模板文件实现所有功能。

模板即代码

这与脚本驱动型 Skill 不同：脚本是运行时的可执行文件，而模板是设计时的参考文件。Claude 在推理过程中根据模板生成最终代码。

generator_template.js 分析

这是一个 p5.js 参考文件，展示了生成艺术编码的几个关键模式：

Script Inventory

algorithmic-art does not contain standalone executable scripts. It uses a “template-driven” pattern — all functionality is implemented through SKILL.md instructions + two template files.

Templates as Code

This differs from script-driven Skills: scripts are runtime executables, while templates are design-time references. Claude generates the final code during inference based on the templates.

generator_template.js Analysis

This is a p5.js reference file demonstrating key patterns for generative art coding:

模板	用途	角色
`generator_template.js`	p5.js 编码参考	展示参数组织、种子随机性、类结构等最佳实践
`viewer.html`	HTML 包装器	提供完整的 UI 结构、品牌样式和交互控件

Template	Purpose	Role
`generator_template.js`	p5.js coding reference	Demonstrates parameter organization, seeded randomness, class structure best practices
`viewer.html`	HTML wrapper	Provides complete UI structure, brand styling, and interaction controls

generator_template.js — p5.js 编码模式

1 // Seeded Randomness (Art Blocks Pattern) 2 let seed = 12345; 3 randomSeed(seed); 4 noiseSeed(seed); 5 6 // Parameter Structure 7 let params = { 8 seed: 12345, 9 particleCount: 500, 10 noiseScale: 0.003, 11 speed: 0.5, 12 hueRange: 360, 13 }; 14 15 // Canvas Setup 16 function setup() { 17 createCanvas(1200, 1200); 18 colorMode(HSB, 360, 100, 100, 1.0); 19 noLoop(); // Static by default, animated when needed 20 } 21 22 function draw() { 23 randomSeed(params.seed); 24 noiseSeed(params.seed); 25 // Core algorithm following the philosophy 26 }

代码解读

L1 Art Blocks 模式：使用 randomSeed() + noiseSeed() 确保种子一致性。同一种子永远产生完全相同的输出——这是生成艺术的可复现性基础。 L7 参数对象将所有可调参数集中管理。遵循 Art Blocks 的"Parameterizable"模式——slider 控件直接映射到这些参数。 L15 canvas 大小为 1200x1200，是生成艺术的标准正方形尺寸。colorMode(HSB) 更适合生成艺术中的色彩渐变。 L16 noLoop() 表示静态输出。如果是动画，则移除 noLoop() 并使用 draw() 循环。 L20 在 draw() 开头重置随机种子，保证每次绘制完全相同。这是"确定性随机"的关键。

viewer.html 分析

viewer.html 是约 400 行的完整 HTML 模板。其核心架构是”固定部分 + 可变部分”——固定部分保持不变，可变部分根据算法哲学替换：

固定部分（保持不变）：

页面布局结构（header、sidebar、main canvas area）
Anthropic 品牌样式（Poppins 字体、浅色主题、渐变背景）
种子控制区（display、prev/next/random/jump）
操作按钮（Regenerate、Reset、Download PNG）

可变部分（根据作品替换）：

p5.js 算法（setup/draw/classes）
参数定义和对应的 UI 控件（sliders、color pickers）
Colors 区域（可选：取决于作品是否需要颜色控制）

这种”固定模板 + 可变算法”的模式既保证了交互体验的一致性，又为每件作品留下了充分的创意空间。

viewer.html Analysis

viewer.html is a ~400 line complete HTML template. Its core architecture follows a “fixed + variable” pattern — fixed parts stay unchanged, variable parts are replaced per the algorithmic philosophy:

Fixed (keep unchanged):

Page layout (header, sidebar, main canvas area)
Anthropic branding (Poppins fonts, light theme, gradient backgrounds)
Seed controls (display, prev/next/random/jump)
Action buttons (Regenerate, Reset, Download PNG)

Variable (replace per artwork):

p5.js algorithm (setup/draw/classes)
Parameter definitions and corresponding UI controls (sliders, color pickers)
Colors section (optional: depends on whether the artwork needs color control)

This “fixed template + variable algorithm” pattern ensures consistent interaction experience while leaving ample creative space for each piece.

设计亮点

“哲学优先”模式（Philosophy First）：先写算法哲学宣言，再实现代码——确保每件作品有统一的美学理念。哲学决定了算法选择（噪声场 vs 分形 vs 粒子），而不是从菜单中挑一个”模式”
两阶段生成流程：哲学创建（.md）→ 代码实现（.html + .js），同一 Claude 实例在两个阶段间无缝切换
种子确定性随机：采用 Art Blocks 模式的 randomSeed() + noiseSeed()，确保完全可复现性
模板基座模式：viewer.html 作为强制起点，固定部分保证一致体验，可变部分允许创意自由
Artifacts 原生支持：生成自包含的 HTML 文件，可在 claude.ai 中直接运行

可复用模式

移植思路

“如果你想为另一个创意编码工具创建类似的 Skill…”

保留”哲学优先”模式：先写创作宣言，再实现代码——这是最核心的创意工作流
替换 p5.js 为目标工具：将 p5.js 引用替换为 Three.js、Canvas API、Processing 等
保留模板基座模式：创建一个”固定 UI + 可变算法”的模板
替换种子导航逻辑：保持种子随机性概念，但适配目标工具的随机 API
添加目标工具独有的功能：如 3D 渲染、WebGL shader 等

常见坑

⚠️ 不要跳过模板读取步骤： SKILL.md 明确要求先读取 viewer.html，但 Claude 可能跳过此步骤直接从头创建 HTML——导致缺少 Anthropic 品牌样式

⚠️ 不要生成静态 gif/视频： 生成艺术的核心在于交互式的实时生成——静态输出失去了”每个种子都不同”的价值

⚠️ 算法不能太简单： 如果算法哲学承诺了”emergent complexity”，但代码只是画了几条线——理念和实现不匹配

⚠️ 种子 UI 必须完整： prev/next/random/jump 四个功能缺一不可——缺少任何一个都会降低探索体验

⚠️ 避免使用 system-ui 字体： viewer.html 固定使用 Poppins/Lora——不要试图改为系统字体

Design Highlights

“Philosophy First” Pattern: Write the algorithmic philosophy manifesto before implementing code — ensuring every piece has a unified aesthetic concept. Philosophy dictates algorithm choice (noise fields vs fractals vs particles), not picking from a menu
Two-Phase Generation Process: Philosophy creation (.md) → code implementation (.html + .js), seamlessly switching between phases within the same Claude instance
Seeded Deterministic Randomness: Art Blocks pattern using randomSeed() + noiseSeed() for full reproducibility
Template Base Pattern: viewer.html as mandatory starting point — fixed parts ensure consistent UX, variable parts allow creative freedom
Native Artifact Support: Self-contained HTML files work directly in claude.ai artifacts

Reusable Patterns

Porting Guide

“If you want to create a similar Skill for another creative coding tool…”

Keep “Philosophy First”: Write the creative manifesto first, then implement — the core creative workflow
Replace p5.js: Swap p5.js references for Three.js, Canvas API, Processing, etc.
Keep Template Base: Create a “fixed UI + variable algorithm” template
Replace Seed Navigation: Keep seeded randomness concept, adapt to target tool’s random API
Add Tool-Specific Features: 3D rendering, WebGL shaders, etc.

Common Pitfalls

⚠️ Don’t skip the template reading step: SKILL.md explicitly requires reading viewer.html first, but Claude may skip this and create HTML from scratch — missing Anthropic branding

⚠️ Don’t generate static gifs/videos: The core value of generative art is interactive real-time generation — static output loses the “every seed is different” value

⚠️ Algorithm must match philosophy: If the philosophy promises “emergent complexity” but the code just draws a few lines — concept and implementation are mismatched

⚠️ Seed UI must be complete: All four functions (prev/next/random/jump) are required — missing any reduces the exploration experience

⚠️ Don’t use system-ui fonts: viewer.html fixed to Poppins/Lora — don’t override with system fonts

模式	说明	适用于...
哲学优先	先写宣言/哲学，再实现代码	任何需要统一美学方向的创意生成任务
两阶段生成	同一个 Claude 会话中，先输出理念文档，再实现代码	设计、艺术、品牌类 skill
模板基座	固定模板 + 可变算法，保证 UX 一致的同时允许创意变化	任何需要输出结构化 HTML 的 skill
种子随机性	确定性随机 + 种子导航 UI	生成艺术、A/B 测试、变异探索
自包含 HTML	单文件包含所有样式、脚本和 CDN 引用	可在 claude.ai 中作为 artifact 运行的 any skill

Pattern	Description	Applies to...
Philosophy First	Write manifesto/philosophy first, then implement code	Any creative generation task needing unified aesthetic direction
Two-Phase Generation	Output concept doc first, then implementation — same session	Design, art, branding skills
Template Base	Fixed template + variable algorithm, consistent UX	Any skill outputting structured HTML
Seeded Randomness	Deterministic randomness + seed navigation UI	Generative art, A/B testing, variation exploration
Self-Contained HTML	Single file with all styles, scripts, and CDN refs	Any skill running as claude.ai artifact