From example-skills
Creates interactive p5.js generative art with deterministic randomness, noise fields, particles, flows for algorithmic art, flow fields, particle system requests.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-3 --plugin marcelleon-skills-zhThis skill uses the workspace's default tool permissions.
算法哲学是计算美学运动，通过代码来表达。输出 .md 文件（哲学理念）、.html 文件（交互式查看器）和 .js 文件（生成算法）。
Applies Acme Corporation brand guidelines including colors, fonts, layouts, and messaging to generated PowerPoint, Excel, and PDF documents.
Builds DCF models with sensitivity analysis, Monte Carlo simulations, and scenario planning for investment valuation and risk assessment.
Calculates profitability (ROE, margins), liquidity (current ratio), leverage, efficiency, and valuation (P/E, EV/EBITDA) ratios from financial statements in CSV, JSON, text, or Excel for investment analysis.
算法哲学是计算美学运动，通过代码来表达。输出 .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>
<!-- p5.js 从 CDN - 始终可用 -->
<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 最佳实践和代码结构原则的参考。
关键提醒：