Agent Skills
返回列表
🎨

p5.js 算法艺术生成

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @org-02qudk26/algorithmic-art-1。

技能介绍

解决什么

这个技能面向想把模糊主题转成可运行生成艺术作品的场景:不是生成一张静态图,而是先形成一个 algorithmic philosophy,再用 p5.js 把它表达为可交互的算法艺术。它强调计算过程、噪声场、粒子行为、种子随机性和参数化变化,适合工程师探索生成式视觉系统的表达边界。

如何工作

技能会分两步推进:概念设计和代码实现。它把用户提示当作概念种子,而不是固定模板约束。

  • 先根据用户输入生成一份 Markdown 哲学说明,命名一个算法运动,描述其计算过程、数学关系、噪声/随机性、粒子或场动力学等。
  • 再从 templates/viewer.html 出发创建单个 HTML 文件,内嵌 p5.js、算法、参数控件和交互界面。
  • 输出要求保持种子可复现,同一 seed 应产生一致结果,并支持实时动画、色彩协调和视觉层级控制。

适用边界

它适合生成浏览器可运行的交互式艺术草图、研究型可视化、算法演示和快速原型。若目标是严格品牌资产、印刷级构图或可批量导出的生产管线,需要额外处理版权、渲染一致性、导出流程和工程化测试。

使用场景

  • 为产品发布会准备一段浏览器端动态背景,把主题关键词转成可交互 p5.js 草图。
  • 把抽象概念变成带种子和参数面板的实验页面,用于验证噪声场或粒子系统的视觉表现。
  • 为课程作业制作一个可运行的算法艺术 demo,从主题哲学说明到 HTML 交互界面一次生成。
  • 在研究项目中把数学关系或涌现行为可视化,便于快速调参比较不同算法方向。

适合人员

  • 前端工程师:想把动态视觉元素做成可复现的 p5.js 原型,而不是静态 SVG。
  • 生成艺术创作者:需要把主题关键词提炼成算法哲学,再生成可交互草图用于快速迭代。
  • 可视化研究员:想用粒子、噪声场或参数面板表达数学模型,便于做方向对比。
  • 课程讲师:要为计算机艺术课准备可运行的浏览器端示例,并让学生调整种子和参数。