我要投稿

我用AI实现了一个自己以前都想象不到的动画效果

发布日期：2025-06-04 05:57:27 浏览次数： 1546 作者：画伞的AI学习笔记

体验链接在下面

我记录了实现它的完整过程，包括灵感来源，实现方法，收获与思考。

用到的工具是豆包和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%200,i/55)}

没有教程，在评论区获得了一点有用的信息：

视频中的动画是使用 Processing 编程语言创建的

实践

我在 Cursor 中用 Claude-4-sonnet 实现了它。

只需要2步。

第一步

首先，我问了豆包什么是Processing 编程语言，以及它的文件名后缀是什么。

https://www.doubao.com/thread/w3891560527998a9c

Processing 是一种开源编程语言和环境，专为电子艺术、计算机图形和交互设计而创建。它简化了图形编程的复杂度，让艺术家、设计师和学生能够快速实现创意想法。以下是 Processing 的主要特点：

1. 简单易学

类 Java 语法：基于 Java，但简化了许多概念（如不需要主类或main()方法）。
内置图形函数：直接支持 2D/3D 渲染、动画和交互，无需复杂配置。

2. 可视化导向

图形库丰富：内置PApplet类提供绘图函数（如rect()、ellipse()）和颜色处理。
实时反馈：修改代码后立即看到结果，适合快速迭代。

3. 跨平台兼容

多平台支持：Windows、macOS、Linux 均可运行。
Web 集成：可导出为 HTML5/JavaScript（Processing.js）或 Android 应用。

4. 社区与资源

活跃社区：大量教程、示例和开源项目。
扩展库：支持音频、视频、机器学习（如 ML5.js）、Arduino 等功能。

5. 教育友好

教学工具：广泛用于高校艺术、设计和编程课程。
低门槛：无需深入理解计算机图形学即可创作视觉效果。

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%200,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%200 和 i/55 转换为网格坐标
使用 mag() 计算两点间距离，生成径向对称效果

三角函数嵌套：

sin(atan2(k, e)*7)：将极坐标角度放大 7 倍，产生旋转效果
cos(d*d - t)：随时间变化的震荡函数，控制图案收缩扩张

视觉效果

背景与线条：黑色背景 (background(9)) 和白色半透线 (stroke(255, 66))
粒子分布：10,000 个点按数学规律分布，形成复杂几何图案
动态效果：

整体旋转与缩放
随时间变化的对称性破缺
类似流体或星云的扩散效果

Processing.js 特性

隐式全局变量：createCanvas、background、stroke、point 是 Processing 内置函数
箭头函数：ES6 语法简化函数定义
链式调用：background().stroke() 风格符合 Processing 的 API 设计

核心函数解析

// 定义粒子位置计算函数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%200, 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%200,i/200)}