最近老是有人问我同一个问题AI Coding 都这么猛了还有必要花时间学 Processing 吗不管你是设计转编程、艺术生想玩生成艺术还是程序员想拓宽表达手段这个问题都绕不开。我的答案可能会让不少人意外有必要但学习的方式已经彻底变了。这句话不是劝你死磕语法也不是让你把 AI 当画师替你做作业。把这个问题拆开其实是三件事第一AI Coding 到底能替我们写掉多少代码第二Processing 这类“爷爷辈”的创意编程工具还有没有不可替代的价值第三在 AI 时代到底用什么姿势学才不算白费时间。我在过去一年里几乎每个项目都用 AI 辅助写 Processing / p5.js 代码踩了不少坑也有一些非常实用的心得这篇就展开聊聊。1. AI Coding 到底动了谁的“饭碗”1.1 AI Coding 现在能替创意编程者做多少事先说一个挺让人焦虑的事实AI Coding 在生成 Processing 代码这件事上完成度已经高到离谱。你让它写一个 200 个粒子的随机运动系统几秒钟它就能给你可运行的代码你让它把颜色从 RGB 改成 HSL或者把矩形边界改成圆形环绕它也能改得又快又完整。我用 GitHub Copilot 和 Claude 这类工具做过测试给一句“p5.js 粒子跟随鼠标移动并带有拖尾效果”它返回的代码几乎可以直接粘进编辑器跑起来。这意味着什么意味着过去一个新手要花两周才能写出来的“会动的图形”现在可能只要 20 分钟就有了。传统编程教程里那些“手写冒泡排序”、死记 API 名称的训练价值确实在被抽干。如果你学 Processing 的初衷只是想“做出一个粒子系统交作业”那 AI 确实已经让你失去了学习的必要性。但问题恰恰出在这里一个能运行的粒子系统只是一段代码它不是一段创作。我见过太多人让 AI 生成完代码后自己也说不清楚里面的 draw() 循环为什么每帧都要执行一次背景用的 background(0, 20) 为什么不透明度会有拖尾效果。能跑但不知道为什么能跑能做出来但控制不了变化。1.2 它替不了的部分审美、节奏与意外之美AI Coding 能替代的是“把想法翻译成代码”这一段体力活替代不了的是“决定想法本身是否值得被写出来”。创意编程的工作流程大致分三步构思视觉方向、实现动态逻辑、在反复调参中寻找惊喜。AI 在第二步很强但第一步和第三步它没有自己的判断力。你跟 AI 说“做一个有诗意感的光效”它可能给你一个中规中矩的径向渐变你说“要有暴风雨前夕的压迫感”它只能理解成文字里常见的暗色调模糊效果。更重要的是一种说不清的东西意外之美。做生成艺术很多最耐看的作品恰恰是代码出现“偏差”时阴差阳错出来的效果。比如粒子本应该沿着直线走结果 float 精度问题让轨迹发生了微弱的弯曲反而生成了一种类似星轨的纹理。AI 的强项是“准确”而创意编程的乐趣有一部分恰恰是从“不准确”里长出来的。这种判断力不亲手调过几百次参数是练不出来的。2. Processing 这类“老工具”为什么还没死2.1 它首先是创作环境其次才是编程语言Processing 这个项目很多人理解偏了以为它是一门精简版的 Java专门给新手练手用的。它真正的定位是一套“软件速写本”software sketchbook是给没有编程背景的艺术家、设计师提供的创作环境。它的核心结构特别简单——setup() 只执行一次负责初始化画布draw() 每帧执行一次负责不断更新画面。这两个函数构成一个持续运转的循环类似动画片一帧一帧往下放。你不需要理解消息循环、事件机制、观察者模式这些计算机概念只需要知道“我在 setup 里搭台子在 draw 里做动作”就够了。这种设计天然就是为了让人快速进入创作状态而不是被工程细节拖住。所以你现在回头看那些“AI 几分钟就能写一个 Processing 程序”的测试其实说明的不是 Processing 过时了而是它的表达元件图形、颜色、运动、交互已经被 AI 压缩成模块化的“彩笔”和“颜料”。问题是拿到彩笔和颜料的人还必不必须懂一点“怎么用笔”和“什么是构图”我的答案是很明确需要而且比以前更需要。2.2 即时反馈与算法思维电脑屏幕上的“手感”Processing 另外一个很难被替代的东西是它的即时反馈体验。改一个数字按一下运行窗口立刻给反应。这种“手与眼之间的闭环”特别接近做陶艺或者画画的状态只是媒介变成了代码。AI Coding 可以帮你生成一大段代码但它没办法给你这种肉身记忆型的反馈——你甚至不需要 AI按住 Processing 的“Tweak”模式鼠标滑过屏幕上的图形就能实时调位置、大小、速度这种手感跟对着终端改参数完全不同。更重要的一点Processing 培养的是算法思维。所谓算法思维不是背下几个算法模板而是能看懂一个循环怎样生成重复图案、噪声函数怎样让运动变得自然、向量加减怎样让物体朝目标靠近。这些东西放在任何编程语言里都是通用的底层逻辑。AI 可以帮你写一个 Recaman Sequence 的可视化但如果你自己没写过几版“用取余函数画同心圆”的代码你很难判断 AI 写出来的东西到底有没有“那种味道”。3. AI Coding 时代学 Processing 的正确姿势3.1 把 AI 当成结对编程搭子而不是代笔如果你手里有一台随时能写代码的 AI再跑去背 API 手册那确实有点傻。我建议的姿态是把 AI 当成一个经验丰富、但完全没有审美观的结对编程搭子。你需要做的是给它足够清晰的意图描述然后让它先出初稿你再来改。举个例子前几天我想做一个“粒子在画布上不断漂流、彼此靠近时连线的效果”。我没有直接让 AI 写“p5 粒子连线”因为这种描述太通用出来的东西大概率是网上烂大街的版本。我是这样描述的“在一个 800x600 的画布中有 60 个白点每个白点做缓慢的布朗运动当任意两个点之间距离小于 100 像素时画一条不透明度随距离递减的线整幅画面背景为接近黑色的深蓝。”然后 AI 给出了一版几乎能用的代码。这里的关键是你描述得越接近“视觉结果”AI 的初稿就越接近你的想法。这件事本身就需要练习而练习的方式恰恰是你先去理解代码里面的坐标、距离、透明度这些概念。否则你连“距离小于 100”都说不出来。3.2 怎么让 AI 帮你写“有方向”的代码AI 写代码能不能写得符合预期很大程度上取决于你会不会把“视觉意图”翻译成“代码提示词”。这不是什么玄学有几个很实用的技巧。第一先交代环境和核心对象。你是在用 Processing Java 模式还是 p5.js画布多大主要的视觉元素有哪些第二把抽象描述拆成“可计算的条件”。比如“画面要有呼吸感”不如说“每个圆的半径随时间做正弦波动周期在 8 到 12 秒之间”比如“粒子有种被中心吸引的感觉”不如说“粒子的速度每帧朝圆心方向加上一个很小的向量大小与距离成正比”。第三明确告诉 AI 你后续要改哪些地方。比如“把颜色部分单独抽成变量方便我之后统一调整”这样你拿到代码后才有手工发挥的余地。我向来不建议直接跟 AI 说“写一个无限球体”。这种项目 AI 确实能写但因为它不知道你后面要做什么装置、用投影还是 LED 屏产出的代码大概率不匹配你的实际需求。3.3 一个实战用 AI 生成初稿再手工改造粒子运动下面看看真实工作流。我让 AI 先写一个基础粒子系统它给出了这样的代码片段let particles []; function setup() { createCanvas(800, 600); for (let i 0; i 200; i) { particles.push(new Particle(random(width), random(height))); } } function draw() { background(0, 30); for (let p of particles) { p.update(); p.display(); } } class Particle { constructor(x, y) { this.pos createVector(x, y); this.vel p5.Vector.random2D().mult(random(0.5, 2)); this.r random(2, 6); } update() { this.pos.add(this.vel); if (this.pos.x 0 || this.pos.x width) this.vel.x * -1; if (this.pos.y 0 || this.pos.y height) this.vel.y * -1; } display() { fill(255, 220); noStroke(); ellipse(this.pos.x, this.pos.y, this.r); } }这段代码可以运行但很“平庸”就是随机直线运动加边缘反弹。真正让它变有趣的是我在 update() 里加入了一个简单的引力场update() { let mouse createVector(mouseX, mouseY); let dir p5.Vector.sub(mouse, this.pos); let d dir.mag(); if (d 30) { dir.setMag(0.15 * (300 / d)); this.vel.add(dir); } this.vel.limit(3); this.pos.add(this.vel); this.edges(); }这一小段代码加入了鼠标引力而且距离越远引力越小用 300/d 模拟衰减粒子就会被鼠标“卷”过来再飞开而不是直接射向鼠标。这个效果聊的是“应用中距离衰减”需要你对向量的基本运算有理解才能想到这么写。AI 不会替你产生这个创意它只会按你给定的公式执行。4. 创意编程路上的经典报错和 AI 一起 debug4.1 那些与 Processing 字体相关的连环坑搜索热词里有句话说得很典型报错叫 processing non-unicode truetype font。这几乎是每个用 Processing/p5.js 做过中文显示的人都会撞上的墙。你在程序里写了 text(你好创意编程, 100, 100)结果画面里的中文全变成方框或者控制台直接报错说字体不是 unicode 类型。原因通常很简单Processing 的默认字体里没有中文字形你需要加载一个 TTF 或 OTF 字体文件到 data 目录再用 loadFont() 把它引入。但问题是不是所有 TTF 都兼容。某些 Windows 下的旧版中文字体会被识别成 non-unicode 编码这时你可以用 FontForge 打开并重新导出为 Unicode TTF 格式或者更省事一点直接用 Google Fonts 下载 Noto Sans SC 的 TTF 文件然后把字体文件放到 assets 文件夹。正确的加载方式长这样let myFont; function preload() { myFont loadFont(assets/NotoSansSC-Regular.ttf); } function setup() { createCanvas(600, 400); textFont(myFont); textSize(28); fill(255); text(创意编程嚼, 100, 200); }这里有两个很容易被忽略的细节。一是文件名不要带空格和中文最好都用小写英文字母二是 preload() 要在 setup() 之前执行如果你在 setup 里才 loadFont字体没加载完就开始画照样出问题。这类报错恰好是最好的“学习红利”因为它逼你去理解一个项目文件的加载时机和执行顺序。4.2 AI 生成代码带来的“新式报错”AI 尤其喜欢在网络请求和外部服务这里制造麻烦。最近我在让 AI 写一个“把天气数据实时映射成背景颜色”的 p5.js 草图时控制台突然报了一个很唬人的错误I/O exception (java.net.SocketException) caught when processing request to ...。那一瞬间我还以为是 Processing 坏了后来才发现是 AI 生成的代码试图访问一个公开 API而那个接口在校园网环境下根本连不通。还有一次类似的场景是报 “stream disconnected before completion: an error occurred while processing request”。这通常是请求到了服务端但服务端在返回响应之前断开了连接典型的超时或者服务端崩溃。当你发现 AI 生成的代码里混入了 fetch()、loadJSON() 这类网络请求时第一个要判断的不是去改 API key而是先弄清楚你要访问的服务到底通不通做法也简单把报错里的 URL 单独复制到浏览器或 Postman 里访问一次如果浏览器能返回数据那问题多半在代码如果浏览器也报一样的错问题就在网络或服务端。在 Processing Desktop 模式里还得额外注意它是不是被防火墙拦截了。这种排查能力在没有 AI 帮助的时代反而不太重要因为那时候你不会自己写出一个请求外部 API 的 Processing 程序现在 AI 帮你写了你就必须学会判断“这锅是该我背还是该网络背”不然你就会在完全不相关的报错信息里白转两小时。4.3 一套实用的排查思路说了这么多我把这几年处理 Processing 报错的经验整理成一个速查表遇到问题直接对号入座。报错信息可能原因排查思路non-unicode truetype font字体编码格式不兼容把字体转成 Unicode TTF或换用 Noto Sans SCNullPointerException调用了未加载完的字体/图片确认 loadFont()/loadImage() 已在 preload() 中完成I/O exception (SocketException)网络请求目标不可达浏览器单独访问 URL查看服务端是否正常stream disconnected before completion请求超时或服务端主动断开加超时处理检查请求内容大小和数据格式p5.js says: 调用不存在的方法AI 幻觉或版本 API 不兼容去官方文档 Page 确认方法名留意版本差异排查的思路就一句话先看报错的第一行别被下面十几行的调用栈吓倒。Processing 的报错通常会把出错文件和第几行标出来先把那行代码单独拎出来看。如果信息不明确就在代码里加 println() 或 console.log() 打印关键变量的中间值。如果这步还定位不了用二分法——把代码块一半注释掉再试运行快速缩小出错范围。最后才轮到 AI把完整的报错信息 最小化复现代码贴给它不要直接贴一整段 300 行的项目文件否则它大概率也会看漏。5. AI 时代学 Processing 的组合拳工作流5.1 零成本上手的工具组合讲到工具我见过不少人还在纠结要不要装 MATLAB 2023a 或者研究 signal processing toolbox 怎么免费下载。如果你只是想像艺术家一样做生成视觉我劝你完全不用走那条路。Processing IDE 本身是免费的p5.js 也是开源的浏览器里跑根本不需要任何重型依赖。我的推荐组合分两条路线。一条是走 Processing Desktop 模式它适合做生成艺术、互动装置有独立窗口性能好完全离线另一条是 p5.js VS Code Live Server 插件优势是代码更好分享、更适合跟 AI 在线工具联动而且产物可以直接发布成网页。对新手我更推荐先走 p5.js 路线因为它出错时浏览器开发者工具给出的错误信息更友好AI 对 p5.js 的语料认识也更全面。工具链之外建立自己的工作流更重要。我目前每做一个创意项目都分成四步先在纸上画草图和状态机再把草图的“视觉变量”写成一则说明文本接着把说明文本丢给 AI 生成初稿最后我做两三轮手工调参和结构重构。AI 只解决“从描述到代码”这一段不是从零到一更不是从想法到作品。5.2 AI Coding“答题思路”的养成搜索热词里有一个说法很有意思AI coding 答题思路。在创意编程这个领域我更愿意把它解释成“让 AI 先讲思路再写答案”。你不要一上来就说“给我代码”而是先问“我想实现风吹过草地时草叶摆动的效果请帮我列出在 p5.js 里可能的实现思路不要写代码。”AI 会给你一些方向——例如用噪声生成风的强度用每个草叶的旋转角度受风力影响或者用粒子系统加弹簧约束模拟倒伏。拿到思路之后你再自己尝试写一版或者只让 AI 补其中的某一段。这样做的好处非常大你被迫在脑中过一遍逻辑再跟 AI 的答案对照哪种更高效、哪种会产生更好的视觉效果你会形成自己的判断。时间长了你会慢慢培养出一种“代码嗅觉”——不需要逐行读懂也能判断一段代码值不值得跑这比会背 API 值钱得多。我强烈建议每周至少做一次这个练习不给 AI 完整需求只给它一个含糊的视觉描述比如“午夜的城市灯光透过雨幕”然后让它先给出 5 种实现思路选一种自己动手实现。如果 AI 的第一选择跟你想的一样那恭喜你你已经能跟 AI 在同一波长上对话了如果不一样那更赚因为你看到了一个新方向。5.3 要不要继续学三条判断标准最后如果你还在犹豫“要不要学 Processing”我给你三条特别实在的判断标准对号入座就行。第一你是在享受“控制生成过程”这件事还是只想要一个最终的视频文件如果你毫无兴趣调参只想要成品那 AI 确实够了。第二你能不能接受“代码出 bug 后自己要读它”Processing 的报错经常很抽象如果零基础的人一看到报错就想把整个项目丢给 AI 重写那学习过程会非常煎熬但一旦跨过去AI 就成了你手里最强的提效工具而不是一个神秘黑箱。第三你在不在乎“风格独特性”AI 的训练数据让所有生成结果都带着明显的“平均味”而亲手写代码、折腾数据、调出意外效果的人更容易形成只属于自己的审美指纹。如果这三条里你有两条以上是肯定的那我毫不犹豫建议你继续学而且要认真学。不是为了找份工作是为了拥有一种在数字世界里自由表达自己的语言。语言这东西工具再先进你也得自己会说才能聊出想聊的内容。我个人在实际项目里最深的体会是AI Coding 让我敢去碰那些以前觉得“太过复杂”的想法。以前做一个多模态交互装置光是处理各种传感器数据就要花掉大半个周末现在 AI 可以把数据通路的骨架搭好我只需要专注于“这个映射关系是不是我想要的美学”。但前提是我心里得知道“我想要的美学”是什么而这恰恰是学 Processing 时一遍遍动手调图形调出来的。所以你看AI 和 Processing 从来不是对手AI 是油门Processing 是方向盘和刹车。你没有方向盘给再多油门也只是原地烧胎。这篇聊到这里如果你也准备开始先从画一个会动的圆开始吧然后让 AI 帮你想清楚这个圆要去向哪里。