体验链接在下面
我记录了实现它的完整过程，包括灵感来源，实现方法，收获与思考。
用到的工具是豆包和Cursor，大模型选择的是 Claude-4-sonnet。
实际上用其他模型实现的效果应该是一样的，因为它是一段固定代码。
下面是完整的过程：
来源：
https://x.com/yuruyurau/status/1927373647125119025
a=(x,y,d=mag(k=9*cos(x/8),e=y/8-12.5)**2/99+sin(t)/6+.5)=>point((q=99-e*sin(atan2(k,e)*7)/d+k*(3+cos(d*d-t)*2))*sin(c=d/2+e/69-t/16)+200,(q+19*d)*cos(c)+200)t=0,draw=$=>{t||createCanvas(w=400,w);background(9).stroke(w,66);for(t+=PI/45,i=1e4;i--;)a(i 0,i/55)}
没有教程，在评论区获得了一点有用的信息：
视频中的动画是使用 Processing 编程语言创建的
实践
我在 Cursor 中用 Claude-4-sonnet 实现了它。
只需要2步。
第一步
首先，我问了豆包什么是Processing 编程语言，以及它的文件名后缀是什么。
https://www.doubao.com/thread/w3891560527998a9c
Processing 是一种开源编程语言和环境，专为电子艺术、计算机图形和交互设计而创建。它简化了图形编程的复杂度，让艺术家、设计师和学生能够快速实现创意想法。以下是 Processing 的主要特点：
1. 简单易学- 类 Java 语法：基于 Java，但简化了许多概念（如不需要主类或main()方法）。
- 内置图形函数：直接支持 2D/3D 渲染、动画和交互，无需复杂配置。
- 图形库丰富：内置PApplet类提供绘图函数（如rect()、ellipse()）和颜色处理。
- 实时反馈：修改代码后立即看到结果，适合快速迭代。
- 多平台支持：Windows、macOS、Linux 均可运行。
- Web 集成：可导出为 HTML5/JavaScript（Processing.js）或 Android 应用。
- 活跃社区：大量教程、示例和开源项目。
- 扩展库：支持音频、视频、机器学习（如 ML5.js）、Arduino 等功能。
- 教学工具：广泛用于高校艺术、设计和编程课程。
- 低门槛：无需深入理解计算机图形学即可创作视觉效果。
Processing 适合对创意编程、数据可视化、互动艺术感兴趣的用户，尤其适合初学者快速上手图形编程。
Processing 程序的标准文件扩展名是 .pde（Processing Development Environment 的缩写）
第二步
打开Cursor，新文件夹 - 创建文件 processing.pde
a=(x,y,d=mag(k=9*cos(x/8),e=y/8-12.5)**2/99+sin(t)/6+.5)=>point((q=99-e*sin(atan2(k,e)*7)/d+k*(3+cos(d*d-t)*2))*sin(c=d/2+e/69-t/16)+200,(q+19*d)*cos(c)+200)t=0,draw=$=>{t||createCanvas(w=400,w);background(9).stroke(w,66);for(t+=PI/45,i=1e4;i--;)a(i 0,i/55)}我选择了 Claude-4-sonnet 模型
输入指令：
用Processing编程语言实现 @processing.pde 的动画效果，并创建 .html 预览
它直接生成了一个 html 预览，并调用了 edgeone MCP 服务，完成了线上部署。
效果展示：
https://mcp.edgeone.site/share/c_cFv7zp43Df6YmnBSF1b
追问
我们已经实现了那个神奇的动画效果，但是那段函数到底是什么意思呢？
继续问豆包：https://www.doubao.com/thread/w1b9bb1548964d8d0
整体结构
这是一个自执行的动画程序，包含两个主要部分：
- 箭头函数 a：定义每个粒子的位置计算逻辑
- draw 函数：主循环，每帧更新画布并调用 a 函数绘制粒子
关键变量与数学
- 时间变量 t：
- 每帧递增 PI/45，控制动画速度
- 影响所有三角函数，使图形随时间变化
- 坐标转换：
- x 和 y 是循环索引，通过 i 0 和 i/55 转换为网格坐标
- 使用 mag() 计算两点间距离，生成径向对称效果
- 三角函数嵌套：
- sin(atan2(k, e)*7)：将极坐标角度放大 7 倍，产生旋转效果
- cos(d*d - t)：随时间变化的震荡函数，控制图案收缩扩张
- 背景与线条：黑色背景 (background(9)) 和白色半透线 (stroke(255, 66))
- 粒子分布：10,000 个点按数学规律分布，形成复杂几何图案
- 动态效果：
- 整体旋转与缩放
- 随时间变化的对称性破缺
- 类似流体或星云的扩散效果
- 隐式全局变量：createCanvas、background、stroke、point 是 Processing 内置函数
- 箭头函数：ES6 语法简化函数定义
- 链式调用：background().stroke() 风格符合 Processing 的 API 设计
视觉效果
Processing.js 特性
核心函数解析
// 定义粒子位置计算函数a = (x, y, d = mag(k = 9*cos(x/8), e = y/8-12.5)**2/99 + sin(t)/6 + 0.5) => point( (q = 99 - e*sin(atan2(k, e)*7)/d + k*(3 + cos(d*d - t)*2)) * sin(c = d/2 + e/69 - t/16) + 200, (q + 19*d) * cos(c) + 200 )// 初始化变量并定义主循环t = 0, draw = $ => { t || createCanvas(w = 400, w); // 初始化画布（仅第一次执行） background(9).stroke(w, 66); // 设置背景色和线条样式 for(t += PI/45, i = 1e4; i--;) // 更新时间并循环10,000次 a(i 0, i/55); // 计算并绘制每个粒子}Cursor技术实现：
收获 & 思考
人不可能知道自己不知道某个完全没听过的概念。
人看不见自己看不见的东西。
科学发展真正的起点，是认识到自己的无知。
在看到“processing编程语言”这个概念之前，我不知道它的存在，就不可能想到去了解和学习它。
所以人要广涉猎，尽可能多的了解一些概念，以及这些概念的适用场景。
这样在我们遇到问题时才能想到更多的解决方案，这样才能避免重复造轮子。
我经常看到有人说“我想到一个好点子”、“我发现一个新问题”，其实这些点子和问题是几百年前就提出并解决过的了。
知其有，方可研习之。
概念是人类认识世界的工具，它通过高度抽象和概括，将复杂的客观世界和主观经验转化为人类思维可处理的 “信息单元”。
你不知道的概念，AI知道，想要更好的使用AI，就必须让自己掌握的概念与AI对齐。
如果你不知道什么是“响应式布局”，就不可能用它来给AI下达指令。
AI到目前为止依然是人们能力的放大器，它可以帮我们快速学习，提高认知底线，善于利用AI工具的人能看到更广阔的世界。
下面是另一个动画效果，大家如果感兴趣可以试试。
a=(x,y,d=abs(e=cos(k=x/8-12.5)+sin(y/24)+cos(k/2)))=>point((q=x/4+90+d*k*(1+cos(d*4-t*2+y/72)))*cos(c=y*e/594-t/8+d/6)+200,(q/2+99*cos(c/2))*sin(c)+e*6+200)t=0,draw=$=>{t||createCanvas(w=400,w);background(6).stroke(w,36);for(t+=PI/60,i=4e4;i--;)a(i 0,i/200)}
