Menu
使用 p5.js 创建带有种子随机性和交互式参数探索的算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术，而不是复制现有艺术家的作品，以避免版权侵犯。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
将 Anthropic 官方品牌颜色和字体应用于任何可能需要 Anthropic 视觉风格的作品。适用于品牌颜色或样式指南、视觉格式化或公司设计标准的场景。
使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时，应使用此技能。创作原创视觉设计，切勿复制现有艺术家的作品以避免版权侵权。
引导用户通过结构化的工作流程来协作撰写文档。当用户想要撰写文档、提案、技术规格说明、决策文档或类似的结构化内容时使用。这个工作流程帮助用户高效地传递上下文信息、通过迭代优化内容，并验证文档对读者是否有效。当用户提到撰写文档、创建提案、起草规格说明或类似的文档任务时触发。
全面的文档创建、编辑和分析功能，支持修订追踪、批注、格式保留和文本提取。当 Claude 需要处理专业文档（.docx 文件）时使用：(1) 创建新文档，(2) 修改或编辑内容，(3) 处理修订追踪，(4) 添加批注，或其他任何文档任务
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
一套帮助我撰写各类内部沟通文档的资源，使用公司偏好的格式。当被要求撰写任何形式的内部沟通文档（状态报告、领导层更新、3P 更新、公司简报、常见问题解答、事件报告、项目更新等）时，Claude 应使用此技能。
| name | algorithmic-art |
| description | 使用 p5.js 创建带有种子随机性和交互式参数探索的算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术，而不是复制现有艺术家的作品，以避免版权侵犯。 |
| license | 完整条款见 LICENSE.txt |
算法哲学是计算美学运动，然后通过代码来表达。输出 .md 文件（哲学）、.html 文件（交互式查看器）和 .js 文件（生成算法）。
这分两步进行：
首先，执行以下任务：
开始时，创建一个算法哲学（不是静态图像或模板），它将通过以下方式诠释：
考虑这种方法：
哲学必须强调：算法表达。涌现行为。计算之美。种子变化。
命名运动（1-2个词）："有机湍流" / "量子谐波" / "涌现静止"
阐述哲学（4-6段——简洁但完整）：
为了捕捉算法本质，表达这种哲学如何通过以下方式体现：
关键指南：
哲学必须引导下一个版本以算法方式表达想法，而不是通过静态图像。美存在于过程中，而不是最终帧中。
"有机湍流" 哲学：混沌受自然法则约束，秩序从无序中涌现。 算法表达：由分层 Perlin 噪声驱动的流场。数千个粒子沿着矢量力流动，它们的轨迹累积成有机密度图。多个噪声八度创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮，慢速粒子逐渐暗淡。算法运行直到达到平衡——一种精心调整的平衡，每个参数都由计算美学大师经过无数次迭代精炼。
"量子谐波" 哲学：离散实体表现出波状干涉图案。 算法表达：粒子初始化在网格上，每个携带一个通过正弦波演化的相位值。当粒子靠近时，它们的相位干涉——建设性干涉创建明亮节点，破坏性干涉创建空洞。简单的谐波运动生成复杂的涌现曼陀罗。精心频率校准的结果，每个比率都经过仔细选择以产生共振之美。
"递归低语" 哲学：跨尺度的自相似性，有限空间中的无限深度。 算法表达：递归细分的分支结构。每个分支略有随机化，但受黄金比例约束。L系统或递归细分生成既数学又有机的树状形态。微妙的噪声扰动打破完美对称。线条粗细随每个递归层级减少。每个分支角度都是深度数学探索的产物。
"场动力学" 哲学：通过对物质的影响使不可见的力可见。 算法表达：由数学函数或噪声构建的矢量场。粒子在边缘诞生，沿场线流动，当达到平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示轨迹——不可见力的幽灵般证据。通过力平衡精心编排的计算舞蹈。
"随机结晶" 哲学：随机过程结晶成有序结构。 算法表达：随机圆填充或 Voronoi 镶嵌。从随机点开始，让它们通过松弛算法演化。单元相互推开直到平衡。颜色基于单元大小、邻居数量或与中心的距离。涌现的有机平铺感觉既随机又不可避免。每个种子产生独特的晶体之美——大师级生成算法的标志。
这些是精简示例。实际的算法哲学应该是4-6个实质性段落。
算法哲学应该是4-6段。 用诗意的计算哲学填充它，将预期愿景汇聚在一起。避免重复相同的观点。将此算法哲学输出为 .md 文件。
关键步骤：在实现算法之前，识别原始请求中的微妙概念线索。
基本原则： 概念是嵌入算法本身的微妙、小众参考——不总是字面的，始终是精致的。熟悉该主题的人应该能直觉地感受到它，而其他人只是体验到一个大师级的生成构图。算法哲学提供计算语言。推导出的概念提供灵魂——悄悄编织到参数、行为和涌现模式中的概念DNA。
这非常重要：参考必须如此精炼，以至于它在不宣布自己的情况下增强作品的深度。想想一个爵士音乐家通过算法和声引用另一首歌——只有知道的人才会捕捉到，但每个人都欣赏生成之美。
哲学和概念框架建立后，通过代码表达它。在继续之前暂停整理思路。仅使用创建的算法哲学和以下说明。
关键：在编写任何 HTML 之前：
templates/viewer.html 使用 Read 工具避免：
遵循以下做法：
模板是基础。在其上构建，不要重建它。
为了创建画廊级的计算艺术，让它活起来并呼吸，使用算法哲学作为基础。
种子随机性（Art Blocks 模式）：
// 始终使用种子以保证可重复性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
参数结构 - 遵循哲学：
建立从算法哲学中自然涌现的参数，考虑："这个系统的哪些特性可以调整？"
let params = {
seed: 12345, // 始终包含种子以保证可重复性
// 颜色
// 添加控制你的算法的参数：
// - 数量（多少个？）
// - 比例（多大？多快？）
// - 概率（可能性多大？）
// - 比率（什么比例？）
// - 角度（什么方向？）
// - 阈值（行为何时改变？）
};
设计有效参数时，专注于系统需要可调整的属性，而不是考虑"模式类型"。
核心算法 - 表达哲学：
关键：算法哲学应该决定构建什么。
通过代码表达哲学，避免思考"我应该使用哪种模式？"而是思考"如何通过代码表达这种哲学？"
如果哲学是关于有机涌现，考虑使用：
如果哲学是关于数学之美，考虑使用：
如果哲学是关于受控混沌，考虑使用：
算法从哲学流出，而不是从选项菜单中。
为了指导实现，让概念本质指导创意和原创选择。构建一些表达这个特定请求愿景的东西。
画布设置：标准 p5.js 结构：
function setup() {
createCanvas(1200, 1200);
// 初始化你的系统
}
function draw() {
// 你的生成算法
// 可以是静态的（noLoop）或动画的
}
关键：为了达到精通，创建感觉像是由生成艺术大师经过无数次迭代而涌现的算法。仔细调整每个参数。确保每个图案都有目的地涌现。这不是随机噪声——这是通过深厚专业知识精炼的受控混沌。
输出：
templates/viewer.html 构建的自包含交互式生成艺术（参见步骤 0 和下一节）HTML 工件包含一切：p5.js（来自 CDN）、算法、参数控件和 UI——全部在一个文件中，可立即在 claude.ai 工件或任何浏览器中工作。从模板文件开始，而不是从头开始。
提醒：templates/viewer.html 应该已经被阅读（参见步骤 0）。使用该文件作为起点。
为了允许探索生成艺术，创建一个单一的、自包含的 HTML 工件。确保此工件可立即在 claude.ai 或任何浏览器中工作——无需设置。内联嵌入所有内容。
templates/viewer.html 文件是基础。它包含所需的精确结构和样式。
固定（始终完全如所示包含）：
可变（为每个艺术作品自定义）：
每个艺术作品都应该有独特的参数和算法！ 固定部分提供一致的用户体验——其他一切都表达独特的愿景。
1. 参数控件
2. 种子导航
3. 单一工件结构
<!DOCTYPE html>
<html>
<head>
<!-- 来自 CDN 的 p5.js - 始终可用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* 所有样式内联 - 干净、极简 */
/* 画布在上，控件在下 */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<!-- 所有参数控件 -->
</div>
<script>
// 所有 p5.js 代码内联在这里
// 参数对象、类、函数
// setup() 和 draw()
// UI 处理程序
// 一切自包含
</script>
</body>
</html>
关键：这是单一工件。没有外部文件，没有导入（除了 p5.js CDN）。一切内联。
4. 实现细节 - 构建侧边栏
侧边栏结构：
1. 种子（固定） - 始终完全如所示包含：
2. 参数（可变） - 为艺术创建控件：
<div class="control-group">
<label>参数名称</label>
<input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
<span class="value-display" id="param-value">...</span>
</div>
添加与参数数量相同的 control-group div。
3. 颜色（可选/可变） - 如果艺术需要可调整的颜色则包含：
4. 操作（固定） - 始终完全如所示包含：
要求：
HTML 工件可立即工作：
工件默认包含种子导航（上一个/下一个/随机按钮），允许用户在不创建多个文件的情况下探索变体。如果用户想要突出显示特定变体：
这就像从同一块版上创建一系列版画——算法是一致的，但每个种子揭示其潜力的不同方面。交互性意味着用户通过探索种子空间发现他们自己的最爱。
用户请求 → 算法哲学 → 实现
每个请求都是独特的。过程包括：
常量：
其他一切都是可变的：
为了达到最佳结果，相信创造力并让哲学指导实现。
此技能包括有用的模板和文档：
templates/viewer.html：所有 HTML 工件的必需起点。
templates/generator_template.js：p5.js 最佳实践和代码结构原则的参考。
关键提醒：