算法哲学是通过代码表达的计算美学运动。输出.md文件(哲学)、.html文件(交互式查看器)和.js文件(生成算法)。
此过程分两步:
- 创建算法哲学(.md文件)
- 通过创建p5.js生成艺术来表达(.html + .js文件)
首先,执行以下任务:
算法哲学创建
首先,创建一个将通过以下方式诠释的“算法哲学”(而非静态图像或模板):
- 计算过程、涌现行为、数学之美
- 种子随机性、噪声场、有机系统
- 粒子、流、场、力
- 参数化变化与受控混沌
关键理解
- 接收内容:用户给出的微妙输入或指令作为基础,但不限制创作自由。
- 创建内容:一种算法哲学/生成美学运动。
- 后续步骤:同一版本接收哲学并用代码表达——创建90%算法生成、10%关键参数的p5.js草图。
考虑以下方法:
- 撰写一份生成艺术运动宣言
- 下一阶段涉及编写实现该运动的算法
哲学必须强调:算法表达、涌现行为、计算之美、种子变化。
如何生成算法哲学
命名运动(1-2个词):"有机湍流" / "量子和声" / "涌现的静谧"
阐明哲学(4-6段——简洁但完整):
要捕捉算法本质,表达该哲学如何通过以下方式体现:
- 计算过程与数学关系?
- 噪声函数与随机模式?
- 粒子行为与场动态?
- 时间演化与系统状态?
- 参数化变化与涌现复杂性?
关键指南:
- 避免冗余:每个算法方面应只提及一次。避免重复噪声理论、粒子动力学或数学原理的概念,除非增加新的深度。
- 反复强调工艺性:哲学必须多次强调,最终算法应看起来像经历了无数小时的开发、精心打磨,出自顶尖专家之手。这种框架至关重要——重复使用诸如“精心制作的算法”、“深度计算专业知识的产物”、“痛苦的优化”、“大师级实现”等短语。
- 保留创意空间:具体说明算法方向,但要足够简洁,以便下一个Claude有空间以极高的工艺水平做出解释性的实现选择。
哲学必须引导下一版本以算法方式(而非静态图像)表达创意。美存在于过程中,而非最终帧。
哲学示例
"有机湍流" 哲学:受自然规律约束的混沌,从无序中涌现秩序。 算法表达:由多层Perlin噪声驱动的流场。数千粒子跟随向量力,其轨迹累积成有机密度图。多噪声倍频程创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮,慢速粒子淡入阴影。算法运行直至平衡——一个经过精心调校的平衡,每个参数都由计算美学大师通过无数次迭代精炼。
"量子和声" 哲学:表现出波状干涉图案的离散实体。 算法表达:粒子在网格上初始化,每个携带一个随时间通过正弦波演化的相位值。当粒子靠近时,它们的相位发生干涉——相长干涉产生亮节点,相消干涉产生空洞。简谐运动生成复杂的涌现曼陀罗。这是通过痛苦的频率校准的结果,每个比率都经过精心选择以产生共振之美。
"递归低语" 哲学:跨尺度的自相似性,有限空间中的无限深度。 算法表达:递归细分的分支结构。每个分支略有随机化,但受黄金比例约束。L系统或递归细分生成既数学又有机的树状形式。微妙的噪声扰动打破完美对称。线条权重随递归级别递减。每个分支角度都是深度数学探索的产物。
"场动力学" 哲学:通过其对物质的影响使不可见力变得可见。 算法表达:由数学函数或噪声构建的向量场。粒子在边缘诞生,沿场线流动,到达平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹——无形的力的幽灵般证据。通过力平衡精心编排的计算舞蹈。
"随机结晶" 哲学:随机过程结晶为有序结构。 算法表达:随机圆填充或Voronoi镶嵌。从随机点开始,让它们通过松弛算法演化。细胞相互推开直至平衡。基于细胞大小、邻居数量或到中心距离的颜色。涌现的有机镶嵌感觉既随机又不可避免。每个种子产生独特的晶体之美——大师级生成算法的标志。
这些是浓缩示例。实际的算法哲学应为4-6个实质性段落。
基本原则
- 算法哲学:创建要通过代码表达的计算世界观
- 过程胜过产品:始终强调美从算法执行中涌现——每次运行都是独特的
- 参数化表达:创意通过数学关系、力、行为来传达——而非静态构图
- 艺术自由:下一个Claude以算法方式解释哲学——提供创意实现空间
- 纯生成艺术:这是关于制作活的算法,而非带有随机性的静态图像
- 专家工艺性:反复强调最终算法必须感觉是精心制作的,经过无数次迭代精炼,是计算美学领域顶尖专家的深度专业知识的产物
算法哲学应为4-6段长。 用诗意的计算哲学填满它,将预期的愿景融合在一起。避免重复相同的要点。将此算法哲学输出为.md文件。
推导概念种子
关键步骤:在实现算法之前,识别原始请求中微妙的线索主线。
基本原则: 概念是嵌入在算法本身中的微妙的、小众的引用——不总是字面的,总是精妙的。熟悉该主题的人应该直觉地感受到它,而其他人只是体验到一个大师级的生成作品。算法哲学提供了计算语言。推导出的概念提供了灵魂——安静的概念DNA无形地编织进参数、行为和涌现模式中。
非常重要:引用必须如此精炼,以至于增强作品的深度而不宣告自身。想象一下爵士音乐家通过算法和声引用另一首歌——只有懂的人会捕捉到,但每个人都欣赏生成之美。
p5.js实现
在哲学和概念框架建立后,通过代码表达。暂停以收集思路后再继续。仅使用下面创建的算法哲学和指令。
⚠️ 步骤0:先读取模板 ⚠️
关键:在编写任何HTML之前:
- 使用Read工具读取
templates/viewer.html - 研究确切的结构、样式和Anthropic品牌
- 将该文件用作字面起点——而非仅仅是灵感
- 保持所有固定部分与模板一致(头部、侧边栏结构、Anthropic颜色/字体、种子控件、操作按钮)
- 仅替换文件中注释标记的可变部分(算法、参数、参数的UI控件)
避免:
- ❌ 从头创建HTML
- ❌ 发明自定义样式或配色方案
- ❌ 使用系统字体或暗色主题
- ❌ 更改侧边栏结构
遵循这些实践:
- ✅ 复制模板的确切HTML结构
- ✅ 保持Anthropic品牌(Poppins/Lora字体、浅色、渐变背景)
- ✅ 维持侧边栏布局(种子 → 参数 → 颜色? → 操作)
- ✅ 仅替换p5.js算法和参数控件
模板是基础。在此基础上构建,而非重写。
要创建画廊级、活生生的计算艺术,使用算法哲学作为基础。
技术要求
种子随机性(Art Blocks模式):
// 始终使用种子以确保可复现性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
参数结构——遵循哲学:
要建立自然从算法哲学中涌现的参数,思考:“该系统的哪些品质可以调整?”
let params = {
seed: 12345, // 始终包含种子以确保可复现性
// 颜色
// 添加控制 YOUR 算法的参数:
// - 数量(多少个?)
// - 尺度(多大?多快?)
// - 概率(多可能?)
// - 比率(什么比例?)
// - 角度(什么方向?)
// - 阈值(行为何时改变?)
};
要设计有效的参数,专注于系统需要可调优的属性,而非思考“模式类型”。
核心算法——表达哲学:
关键:算法哲学应支配要构建的内容。
要通过代码表达哲学,避免思考“我应该使用哪种模式?”,而是思考“如何通过代码表达这种哲学?”
如果哲学是关于有机涌现,考虑使用:
- 随时间累积或增长的元素
- 受自然规则约束的随机过程
- 反馈循环和交互
如果哲学是关于数学之美,考虑使用:
- 几何关系和比率
- 三角函数与和声
- 产生意外模式的精确计算
如果哲学是关于受控混沌,考虑使用:
- 严格边界内的随机变化
- 分岔和相变
- 从无序中涌现秩序
算法从哲学中流出,而非从选项菜单中。
为了指导实现,让概念本质告知创造性和原创性选择。构建表达此特定请求愿景的内容。
画布设置:标准p5.js结构:
function setup() {
createCanvas(1200, 1200);
// 初始化系统
}
function draw() {
// 生成算法
// 可以是静态的(noLoop)或动画的
}
工艺要求
关键:要达成大师级别,创建感觉像经过无数次迭代并由生成艺术大师反复打磨的算法。仔细调校每个参数。确保每个模式都有目的地涌现。这不是随机噪声——这是通过深度专业知识精炼的受控混沌。
- 平衡:复杂度而不视觉噪声,秩序而不僵化
- 色彩和谐:深思熟虑的调色板,而非随机RGB值
- 构图:即使在随机性中,也要保持视觉层次和流动
- 性能:流畅执行,如果是动画则优化为实时
- 可复现性:相同种子总是产生相同输出
输出格式
输出:
- 算法哲学 - 作为markdown或文本解释生成美学
- 单HTML工件 - 从
templates/viewer.html构建的自包含交互式生成艺术
HTML工件包含一切:p5.js(从CDN)、算法、参数控件和UI——全部在一个文件中,可立即在claude.ai工件或任何浏览器中运行。从模板文件开始,而非从头开始。
交互式工件创建
提醒templates/viewer.html应已读取。使用该文件作为起点。
为了允许探索生成艺术,创建一个单文件、自包含的HTML工件。确保此工件在claude.ai或任何浏览器中立即工作——无需设置。将所有内容嵌入内联。
关键:固定与可变部分
templates/viewer.html文件是基础。它包含所需的确切结构和样式。
固定(始终完全包含):
- 布局结构(头部、侧边栏、画布区域)
- Anthropic品牌(UI颜色、字体、渐变)
- 侧边栏中的种子部分:
- 种子显示
- 上一个/下一个按钮
- 随机按钮
- 跳转到种子输入 + Go按钮
- 侧边栏中的操作部分:
- 重新生成按钮
- 重置按钮
可变(为每个艺术品定制):
- 整个p5.js算法(setup/draw/classes)
- 参数对象(定义艺术所需的内容)
- 侧边栏中的参数部分:
- 参数控件的数量
- 参数名称
- 滑块的最小/最大/步进值
- 控件类型(滑块、输入等)
- 颜色部分(可选):
- 某些艺术需要颜色选择器
- 某些艺术可能使用固定颜色
- 某些艺术可能是单色的(无需颜色控件)
- 根据艺术需求决定
每个艺术品应有独特的参数和算法! 固定部分提供...