1. 从零开始为什么Processing是创意编程的绝佳起点如果你对用代码画画、做动画或者搞点交互艺术感兴趣但又觉得传统编程环境太枯燥、门槛太高那你一定得了解一下Processing。我第一次接触它感觉就像发现了一个新大陆——原来写代码可以这么直观、这么好玩。Processing本质上是一个开源的编程语言和集成开发环境但它最核心的设计哲学就是让编程这件事变得可视化让艺术家、设计师、教育工作者甚至任何有创意想法的人都能快速上手把脑海里的图形和动态效果变成现实。它的语法基于Java但进行了大幅简化移除了很多复杂的面向对象概念和繁琐的配置让你能专注于“画”这件事本身。你不需要先花几个月去理解什么是类、什么是继承只需要知道几个最基本的函数比如size()设置画布大小background()设置背景色ellipse()画个圆就能立刻在屏幕上看到成果。这种即时反馈的成就感是学习编程初期最宝贵的动力。无论是绘制静态的几何图案还是创建复杂的动态视觉系统Processing都提供了一个极其友好和强大的起点。它模糊了编程和艺术创作的边界让代码成为一种新的创作媒介。2. 环境搭建与第一个图形从安装到“Hello, Circle”2.1 获取与安装ProcessingProcessing的官网是 processing.org下载过程非常简单直接。根据你的操作系统Windows, macOS, Linux选择对应的版本。我建议直接下载“Windows 64-bit”或“macOS”的版本它自带Java环境解压后就能用无需额外配置。下载完成后你会得到一个文件夹里面有一个名为processing.exeWindows或Processing.appmacOS的可执行文件双击它就能启动IDE。第一次打开Processing的IDE界面非常简洁上方是菜单栏和工具栏中间一大块白色区域是代码编辑器下方是黑色的控制台和信息区。整个布局就是为了让你能心无旁骛地写代码和看结果。在开始画图之前我们得先理解Processing程序的基本结构。每个Processing草图Sketch都至少包含两个函数setup()和draw()。setup()函数只在程序启动时运行一次。通常在这里设置画布尺寸、初始化变量、加载资源如图片、字体。它是你程序的“准备工作区”。draw()函数在setup()执行完毕后会以每秒60帧默认的速率反复、不停地执行。所有动画和持续的交互效果都是在这里通过每一帧的微小变化实现的。它是你程序的“主循环”或“动画引擎”。2.2 绘制第一个基本图形圆形让我们立刻动手画出一个最简单的图形——一个位于画布正中的圆。在代码编辑区输入以下代码void setup() { size(600, 400); // 设置画布宽600像素高400像素 } void draw() { background(220); // 每一帧都用浅灰色(220)清空背景 ellipse(300, 200, 100, 100); // 在坐标(300,200)处画一个宽高均为100的圆 }输入完成后点击工具栏上的运行按钮一个三角形的“播放”图标。几秒钟后会弹出一个600x400像素的窗口里面有一个灰色的圆。恭喜你你的第一个Processing图形诞生了我们来拆解一下这几行代码size(600, 400);在setup()中定义了我们“画布”的尺寸。这是必须的。background(220);在draw()的第一行。background()函数用于设置背景颜色。参数220是一个灰度值范围是0黑到255白。这里用的是浅灰色。非常重要的一点因为draw()每秒执行60次如果不每帧都重绘背景那么之前画的所有图形都会叠加在一起。所以background()通常放在draw()的开头起到“清屏”的作用。ellipse(300, 200, 100, 100);这是绘制椭圆当宽高相等时就是圆的函数。它的四个参数分别是圆心的x坐标、圆心的y坐标、椭圆的宽度、椭圆的高度。在我们的例子中圆心在(300, 200)正好是600x400画布的中心宽高都是100像素。注意Processing的坐标系原点(0,0)在画布的左上角x轴向右递增y轴向下递增。这和数学里常见的坐标系不同刚开始需要适应一下。记住“左上角是起点向右向下是正方向”这个原则。3. 图形绘制工具箱点、线、面与颜色掌握了画圆我们就打开了Processing图形世界的大门。接下来我们系统地学习一下其他基本图形绘制函数这是构建任何复杂视觉作品的基础。3.1 点的绘制point()点是最基本的图形元素。point(x, y)函数在指定坐标(x, y)处画一个像素点。默认情况下点很小你可以用strokeWeight()函数来改变点的粗细实际上也是改变了线的粗细。void setup() { size(600, 400); background(255); strokeWeight(5); // 设置点和线的粗细为5像素 point(100, 100); // 在(100,100)画一个点 point(500, 300); // 在(500,300)画一个点 }3.2 线的绘制line()线由两个端点定义。line(x1, y1, x2, y2)函数从点(x1, y1)到点(x2, y2)画一条直线。void draw() { background(255); strokeWeight(3); line(50, 50, 550, 350); // 从左上到右下画一条线 line(550, 50, 50, 350); // 从右上到左下画一条线形成一个“X” }3.3 矩形的绘制rect()与rectMode()矩形是界面和图形设计中极其常见的元素。rect(x, y, width, height)是最基本的用法其中(x, y)默认是矩形的左上角坐标。但有时候我们更希望(x, y)是矩形的中心点。这时就需要rectMode()函数来改变矩形的绘制模式。rectMode(CORNER)默认模式(x, y)是左上角。rectMode(CENTER)(x, y)是中心点。void draw() { background(255); // 模式1左上角定位 rectMode(CORNER); fill(255, 0, 0, 150); // 半透明的红色填充 rect(100, 100, 200, 100); // 左上角在(100,100)宽200高100 // 模式2中心点定位 rectMode(CENTER); fill(0, 0, 255, 150); // 半透明的蓝色填充 rect(300, 150, 200, 100); // 中心点在(300,150)宽200高100 // 画个十字标记中心点 stroke(0); line(295, 150, 305, 150); line(300, 145, 300, 155); }3.4 三角形的绘制triangle()三角形由三个顶点定义。triangle(x1, y1, x2, y2, x3, y3)函数按顺序连接这三个点形成一个三角形。triangle(300, 100, 200, 300, 400, 300); // 画一个顶点在上底边在下的等腰三角形3.5 四边形的绘制quad()四边形由四个顶点定义。quad(x1, y1, x2, y2, x3, y3, x4, y4)函数按顺序连接这四个点。注意这四个点必须按顺序顺时针或逆时针给出不能交叉否则会画出扭曲的“蝴蝶结”形状。quad(250, 100, 350, 100, 400, 200, 200, 200); // 画一个梯形3.6 颜色的设置stroke(),fill(),background()颜色是图形的灵魂。Processing使用RGB红绿蓝或HSB色相饱和度亮度颜色模型。最常用的是RGB。stroke(color)设置图形边框线的颜色。fill(color)设置图形内部填充的颜色。background(color)设置整个画布背景的颜色。noStroke()取消边框。noFill()取消填充。颜色参数有多种格式灰度一个参数0-255。fill(0)黑色fill(255)白色。RGB三个参数分别代表红、绿、蓝分量每个0-255。fill(255, 0, 0)纯红色fill(0, 255, 0)纯绿色fill(0, 0, 255)纯蓝色。RGBA四个参数前三个是RGB第四个是Alpha透明度0透明255不透明。fill(255, 0, 0, 127)半透明红色。void draw() { // 设置背景为浅灰色 background(240); // 画一个无边框、蓝色填充的圆 noStroke(); fill(0, 120, 255); ellipse(150, 200, 120, 120); // 画一个红色边框、黄色填充的矩形 stroke(255, 50, 50); strokeWeight(4); fill(255, 255, 0); rect(300, 140, 160, 120); // 画一个只有绿色边框、无填充的三角形 noFill(); stroke(50, 200, 50); strokeWeight(2); triangle(450, 140, 380, 260, 520, 260); }4. 从静态到动态让图形“活”起来只画静态图形还不够酷Processing的魅力在于让图形动起来。关键在于理解draw()函数的循环特性并引入变量。4.1 使用变量控制图形属性让我们让一个圆在屏幕上水平移动。我们需要一个变量来记录圆心的x坐标并且在每一帧draw()执行时改变这个变量的值。float circleX 0; // 声明一个浮点数变量circleX初始为0 void setup() { size(600, 400); } void draw() { background(220); // 在当前位置画圆 ellipse(circleX, 200, 50, 50); // 每帧将circleX的值增加2 circleX circleX 2; // 如果圆移出了画布右边界就让它回到左边界 if (circleX width) { circleX 0; } }这里有几个新概念float一种变量类型表示浮点数带小数点的数。图形坐标用float更精确。circleX circleX 2;这是一个赋值语句。先计算等号右边circleX 2的值然后把这个新值赋给左边的circleX。可以简写为circleX 2;。widthProcessing的系统变量代表画布的宽度我们在setup()中用size()设置的。同样height代表画布高度。使用它们而不是写死数字如600能让代码更通用。if语句用于条件判断。当circleX width成立即圆移出右边界时执行大括号{}里的代码将circleX重置为0。4.2 更复杂的运动速度和方向单一的直线移动有点单调。我们可以引入速度变量并且让运动方向可以改变比如碰到边界反弹。float x 100; // 球的x坐标 float y 100; // 球的y坐标 float speedX 2.5; // x方向速度 float speedY 1.5; // y方向速度 float diameter 50; // 球直径 void setup() { size(600, 400); } void draw() { background(220); // 更新位置 x x speedX; y y speedY; // 边界碰撞检测与反弹 if (x width - diameter/2 || x diameter/2) { speedX speedX * -1; // x方向速度取反 } if (y height - diameter/2 || y diameter/2) { speedY speedY * -1; // y方向速度取反 } // 绘制球 ellipse(x, y, diameter, diameter); }这段代码实现了一个在窗口内四处弹跳的小球。核心逻辑是x和y每帧根据speedX和speedY更新。当球的边缘x ± diameter/2碰到画布左右边界时speedX取反水平运动方向反转。当球的边缘碰到画布上下边界时speedY取反垂直运动方向反转。实操心得在碰撞检测中我们判断的是“球的边缘”是否碰到边界而不是“球的中心”。所以条件是x width - diameter/2右边界和x diameter/2左边界。这是初学者很容易忽略的细节直接判断x width会导致球的一半冲出画布才反弹看起来不自然。4.3 交互用鼠标控制图形让图形响应鼠标操作能立刻增加作品的趣味性。Processing提供了mouseX和mouseY这两个系统变量它们实时存储着当前鼠标光标在画布中的坐标。void setup() { size(600, 400); noCursor(); // 隐藏系统鼠标指针 } void draw() { background(180); // 用鼠标位置控制一个圆 fill(255, 100, 100); ellipse(mouseX, mouseY, 80, 80); // 在鼠标位置画一个十字准星替代隐藏的指针 stroke(0); strokeWeight(1); line(mouseX - 10, mouseY, mouseX 10, mouseY); line(mouseX, mouseY - 10, mouseX, mouseY 10); }现在你移动鼠标圆和十字准星会跟着移动。mouseX和mouseY让交互变得极其简单。你还可以用pmouseX和pmouseY上一帧的鼠标位置来计算鼠标移动的速度和方向从而画出更丰富的效果比如鼠标轨迹。5. 组合与创意用基本图形构建复杂图案掌握了单个图形的绘制和动态控制后我们就可以将它们组合起来利用循环创造出规律性、重复性的复杂图案。这是Processing创作从“小练习”迈向“作品”的关键一步。5.1 使用循环绘制网格图案for循环是生成重复图形的利器。比如我们想在画布上绘制一个10x10的圆点网格。void setup() { size(600, 600); background(255); noStroke(); fill(50, 100, 200); int gridSize 60; // 网格间距 int dotSize 20; // 圆点直径 // 外层循环控制行y坐标 for (int y gridSize; y height; y gridSize) { // 内层循环控制列x坐标 for (int x gridSize; x width; x gridSize) { ellipse(x, y, dotSize, dotSize); } } }这个例子中我们用了两层嵌套的for循环。外层循环变量y从gridSize60开始每次增加gridSize直到超过画布高度height。内层循环变量x同理。这样我们就得到了所有圆点的中心坐标(x, y)并逐一绘制。通过改变gridSize、dotSize甚至在每个点上使用不同的颜色或大小可以创造出无穷的变化。5.2 动态变化的图案结合循环与变量让静态网格动起来。我们可以让每个圆点的大小根据它与鼠标的距离或者某个正弦波函数来变化。void setup() { size(600, 600); noStroke(); } void draw() { background(255); int gridSize 30; int maxSize 40; for (int y gridSize; y height; y gridSize) { for (int x gridSize; x width; x gridSize) { // 计算当前点到鼠标的距离 float distance dist(x, y, mouseX, mouseY); // 距离越近圆点越小映射关系可调整 float size map(distance, 0, 400, maxSize, 5); size constrain(size, 5, maxSize); // 将大小限制在5到maxSize之间 // 根据距离设置颜色距离近偏暖远偏冷 float r map(distance, 0, 400, 255, 100); float b map(distance, 0, 400, 100, 255); fill(r, 100, b); ellipse(x, y, size, size); } } }这里引入了几个新函数dist(x1, y1, x2, y2)计算两点之间的直线距离。map(value, start1, stop1, start2, stop2)映射函数极其有用。它将value从原始范围[start1, stop1]线性映射到目标范围[start2, stop2]。例如map(distance, 0, 400, maxSize, 5)表示如果distance是0鼠标就在点上映射为maxSize40如果distance是400很远映射为5中间的值按比例计算。constrain(value, min, max)约束函数确保value不会超出[min, max]的范围。这段代码创造了一个交互式网格鼠标靠近时圆点变小且颜色偏红鼠标远离时圆点变大且颜色偏蓝。整个画面随着鼠标移动而产生波纹般的动态变化。5.3 绘制函数曲线利用for循环我们可以绘制任何数学函数的曲线。比如绘制一个正弦波。void setup() { size(800, 400); stroke(0, 100, 200); strokeWeight(2); noFill(); } void draw() { background(255); // 开始绘制连续线条 beginShape(); for (float x 0; x width; x) { // 计算y坐标使用正弦函数振幅100并加上画布中心Y坐标 float y height/2 sin(x * 0.02 frameCount * 0.05) * 100; vertex(x, y); // 添加一个顶点 } endShape(); }这里使用了beginShape()、vertex()和endShape()来绘制由一系列顶点定义的连续线条或不填充的形状。sin()是正弦函数它的参数是弧度。x * 0.02控制了正弦波的周期数字越小波形越“舒展”。frameCount是Processing的系统变量代表从程序开始运行起经过的帧数。加上frameCount * 0.05使得正弦波的相位随时间变化从而产生波动的动画效果。vertex(x, y)将计算出的每个点添加到形状中。运行后你会看到一条蓝色的正弦波在屏幕上平滑地波动。通过修改函数如cos(),tan()或组合多个函数可以创造出各种复杂的动态曲线图案。6. 常见问题与调试技巧实录在实际操作中你肯定会遇到各种预期之外的情况。下面是我在学习和教学过程中总结的一些典型问题和解决方法。6.1 图形不显示或显示异常问题描述代码运行了窗口也弹出了但该画的图形没出现或者颜色不对。排查步骤检查draw()中的background()这是最常见的原因。如果你希望图形持续显示而不是每帧被擦除就不应该在draw()里调用background()。反之如果你希望有动画效果却忘了加background()会导致图形拖影、叠加。检查填充和边框色默认的填充色是白色边框色是黑色。如果你在白色背景上画了一个白色填充的图形自然看不见。用fill()和stroke()明确设置颜色。如果只想画边框用noFill()如果只想画填充用noStroke()。检查坐标和尺寸确认你图形的坐标(x, y)和尺寸(width, height)是否在画布size()规定的范围内。一个坐标为(1000, 1000)的圆在600x400的画布上是看不见的。检查绘制顺序Processing的绘制是“后来居上”的后绘制的图形会覆盖在先绘制的图形之上。确保你的绘制顺序符合预期。6.2 动画卡顿或闪烁问题描述动画运行不流畅有明显的卡顿感或闪烁。可能原因与解决计算过于复杂在draw()循环中进行了大量复杂的数学运算如嵌套很深的循环、高精度的物理模拟。尝试优化算法或者降低画布分辨率size()。图形操作过多每一帧绘制成千上万个图形。可以考虑只绘制变化的部分或者使用PGraphics离屏缓冲技术将静态背景预先绘制好每帧只绘制动态元素。系统资源不足关闭其他占用大量CPU或显卡的程序。draw()中调用了阻塞性函数比如同步的文件读取、网络请求。应避免在draw()中进行这类操作或使用异步方式。6.3 变量作用域混淆问题描述在setup()里声明的变量在draw()里无法使用或者值没有被保存。核心要点在Processing中变量有全局变量和局部变量之分。全局变量在所有函数如setup,draw之外声明的变量。它们在整个程序生命周期内都存在所有函数都能访问和修改。用于存储需要跨帧保持的状态如小球的位置、速度。局部变量在某个函数内部声明的变量。只在该函数内部有效函数执行完毕后就被销毁。draw()每帧都重新执行其中的局部变量每帧都会重新初始化。错误示例与修正// 错误示例x是setup的局部变量draw无法使用 void setup() { int x 100; size(400, 300); } void draw() { ellipse(x, 150, 50, 50); // 编译错误找不到变量x } // 正确示例将x声明为全局变量 int x 100; // 全局变量 void setup() { size(400, 300); } void draw() { ellipse(x, 150, 50, 50); }6.4 使用println()进行调试当程序行为不符合预期时最有效的调试方法之一就是输出变量的值。Processing的println()函数可以将内容打印到IDE底部的控制台。float ballX, ballY; float speed 2; void setup() { size(400, 300); ballX width / 2; ballY height / 2; } void draw() { background(255); ballX speed; // 在控制台打印ballX的值观察其变化 println(Frame: frameCount , ballX: ballX); // 边界检查 if (ballX width || ballX 0) { speed * -1; // 反转方向 println(撞墙了速度变为: speed); } ellipse(ballX, ballY, 30, 30); }通过观察控制台的输出你可以清晰地看到ballX每一帧是如何变化的以及在碰撞发生时speed是否正确地取反。这是定位逻辑错误比如条件判断写错、变量更新错误的利器。7. 性能优化与进阶技巧当你的草图变得越来越复杂开始涉及数百上千个图形元素时性能优化就变得重要了。这里分享几个立竿见影的技巧。7.1 减少不必要的重绘noLoop()和redraw()默认情况下draw()会以60FPS的速度疯狂循环。如果你的作品是静态图像或者只在特定事件如鼠标点击后才需要更新这会造成大量的CPU资源浪费。noLoop()放在setup()或某个事件函数如mousePressed()中它会停止draw()的自动循环执行。redraw()当你需要手动触发一次画面更新时调用这个函数它会执行一次draw()。void setup() { size(600, 600); noLoop(); // 设置不自动循环 drawStaticPattern(); // 画一个静态图案 } void drawStaticPattern() { background(255); // ... 绘制复杂但静态的图案 ... } void mousePressed() { // 当鼠标点击时重新绘制一次例如换一种颜色方案 redraw(); }7.2 使用PGraphics离屏缓冲如果你的背景或某些静态元素非常复杂每帧都在draw()里重画它们会非常消耗性能。PGraphics允许你创建一个离屏的图形缓冲区可以先将这些静态内容画好保存起来然后在draw()里只需要用image()函数将这个缓冲区的图像贴到屏幕上效率极高。PGraphics pg; // 声明一个PGraphics对象 void setup() { size(600, 600); pg createGraphics(600, 600); // 创建一个和画布一样大的缓冲区 // 在缓冲区中绘制复杂的静态背景只执行一次 pg.beginDraw(); pg.background(0); pg.stroke(255, 50); pg.strokeWeight(1); for (int i 0; i 100000; i) { float x random(pg.width); float y random(pg.height); pg.point(x, y); } pg.endDraw(); } void draw() { // 主画布每帧只需绘制缓冲区的图像极快 image(pg, 0, 0); // 然后再在主画布上绘制动态元素比如跟随鼠标的圆 fill(255, 0, 0, 150); noStroke(); ellipse(mouseX, mouseY, 80, 80); }在这个例子中我们在setup()里用PGraphics绘制了10万个随机点作为星空背景。这个过程只执行一次。在draw()里我们只需要用image(pg, 0, 0)一句代码就把整个星空贴上来然后在此基础上画动态的红球。这样无论红球怎么动复杂的星空背景都不会成为性能负担。7.3 善用PShape存储复杂图形如果你需要重复绘制一个由很多顶点构成的复杂形状比如一个自定义的徽标、一个复杂的多边形使用PShape对象可以显著提升性能。PShape将图形的几何数据存储在显卡中渲染速度比用beginShape()/endShape()逐帧绘制快得多。PShape complexShape; void setup() { size(600, 600); // 创建并定义复杂形状 complexShape createShape(); complexShape.beginShape(); complexShape.fill(150, 200, 255); complexShape.noStroke(); // 添加大量顶点... for (int i 0; i 360; i 10) { float angle radians(i); float r 150 sin(angle * 5) * 30; // 创建一个星形 float x cos(angle) * r; float y sin(angle) * r; complexShape.vertex(x, y); } complexShape.endShape(CLOSE); } void draw() { background(255); translate(width/2, height/2); // 将坐标系原点移到画布中心 rotate(frameCount * 0.01); // 让形状旋转 shape(complexShape, 0, 0); // 绘制存储的形状效率很高 }PShape特别适合用于需要多次绘制、且本身不发生变化或仅发生整体变换如移动、旋转、缩放的复杂图形。从画一个简单的圆到创建交互式的动态网格再到运用离屏缓冲和图形对象进行优化Processing的基本图形绘制为你打开了一扇将代码转化为视觉表达的大门。这些基础是所有更高级创作粒子系统、物理模拟、图像处理、数据可视化的基石。我个人的体会是最好的学习方式就是多动手从模仿开始然后尝试修改参数看看会发生什么最后结合自己的想法进行创作。遇到问题善用println()调试多查阅官方参考文档Processing社区也有大量丰富的示例和讨论。记住编程在这里不是目的而是实现创意的工具。享受用代码“绘画”和“创造”的过程吧。
Processing创意编程入门：从图形绘制到动态交互的完整指南
发布时间：2026/7/28 6:46:08
1. 从零开始为什么Processing是创意编程的绝佳起点如果你对用代码画画、做动画或者搞点交互艺术感兴趣但又觉得传统编程环境太枯燥、门槛太高那你一定得了解一下Processing。我第一次接触它感觉就像发现了一个新大陆——原来写代码可以这么直观、这么好玩。Processing本质上是一个开源的编程语言和集成开发环境但它最核心的设计哲学就是让编程这件事变得可视化让艺术家、设计师、教育工作者甚至任何有创意想法的人都能快速上手把脑海里的图形和动态效果变成现实。它的语法基于Java但进行了大幅简化移除了很多复杂的面向对象概念和繁琐的配置让你能专注于“画”这件事本身。你不需要先花几个月去理解什么是类、什么是继承只需要知道几个最基本的函数比如size()设置画布大小background()设置背景色ellipse()画个圆就能立刻在屏幕上看到成果。这种即时反馈的成就感是学习编程初期最宝贵的动力。无论是绘制静态的几何图案还是创建复杂的动态视觉系统Processing都提供了一个极其友好和强大的起点。它模糊了编程和艺术创作的边界让代码成为一种新的创作媒介。2. 环境搭建与第一个图形从安装到“Hello, Circle”2.1 获取与安装ProcessingProcessing的官网是 processing.org下载过程非常简单直接。根据你的操作系统Windows, macOS, Linux选择对应的版本。我建议直接下载“Windows 64-bit”或“macOS”的版本它自带Java环境解压后就能用无需额外配置。下载完成后你会得到一个文件夹里面有一个名为processing.exeWindows或Processing.appmacOS的可执行文件双击它就能启动IDE。第一次打开Processing的IDE界面非常简洁上方是菜单栏和工具栏中间一大块白色区域是代码编辑器下方是黑色的控制台和信息区。整个布局就是为了让你能心无旁骛地写代码和看结果。在开始画图之前我们得先理解Processing程序的基本结构。每个Processing草图Sketch都至少包含两个函数setup()和draw()。setup()函数只在程序启动时运行一次。通常在这里设置画布尺寸、初始化变量、加载资源如图片、字体。它是你程序的“准备工作区”。draw()函数在setup()执行完毕后会以每秒60帧默认的速率反复、不停地执行。所有动画和持续的交互效果都是在这里通过每一帧的微小变化实现的。它是你程序的“主循环”或“动画引擎”。2.2 绘制第一个基本图形圆形让我们立刻动手画出一个最简单的图形——一个位于画布正中的圆。在代码编辑区输入以下代码void setup() { size(600, 400); // 设置画布宽600像素高400像素 } void draw() { background(220); // 每一帧都用浅灰色(220)清空背景 ellipse(300, 200, 100, 100); // 在坐标(300,200)处画一个宽高均为100的圆 }输入完成后点击工具栏上的运行按钮一个三角形的“播放”图标。几秒钟后会弹出一个600x400像素的窗口里面有一个灰色的圆。恭喜你你的第一个Processing图形诞生了我们来拆解一下这几行代码size(600, 400);在setup()中定义了我们“画布”的尺寸。这是必须的。background(220);在draw()的第一行。background()函数用于设置背景颜色。参数220是一个灰度值范围是0黑到255白。这里用的是浅灰色。非常重要的一点因为draw()每秒执行60次如果不每帧都重绘背景那么之前画的所有图形都会叠加在一起。所以background()通常放在draw()的开头起到“清屏”的作用。ellipse(300, 200, 100, 100);这是绘制椭圆当宽高相等时就是圆的函数。它的四个参数分别是圆心的x坐标、圆心的y坐标、椭圆的宽度、椭圆的高度。在我们的例子中圆心在(300, 200)正好是600x400画布的中心宽高都是100像素。注意Processing的坐标系原点(0,0)在画布的左上角x轴向右递增y轴向下递增。这和数学里常见的坐标系不同刚开始需要适应一下。记住“左上角是起点向右向下是正方向”这个原则。3. 图形绘制工具箱点、线、面与颜色掌握了画圆我们就打开了Processing图形世界的大门。接下来我们系统地学习一下其他基本图形绘制函数这是构建任何复杂视觉作品的基础。3.1 点的绘制point()点是最基本的图形元素。point(x, y)函数在指定坐标(x, y)处画一个像素点。默认情况下点很小你可以用strokeWeight()函数来改变点的粗细实际上也是改变了线的粗细。void setup() { size(600, 400); background(255); strokeWeight(5); // 设置点和线的粗细为5像素 point(100, 100); // 在(100,100)画一个点 point(500, 300); // 在(500,300)画一个点 }3.2 线的绘制line()线由两个端点定义。line(x1, y1, x2, y2)函数从点(x1, y1)到点(x2, y2)画一条直线。void draw() { background(255); strokeWeight(3); line(50, 50, 550, 350); // 从左上到右下画一条线 line(550, 50, 50, 350); // 从右上到左下画一条线形成一个“X” }3.3 矩形的绘制rect()与rectMode()矩形是界面和图形设计中极其常见的元素。rect(x, y, width, height)是最基本的用法其中(x, y)默认是矩形的左上角坐标。但有时候我们更希望(x, y)是矩形的中心点。这时就需要rectMode()函数来改变矩形的绘制模式。rectMode(CORNER)默认模式(x, y)是左上角。rectMode(CENTER)(x, y)是中心点。void draw() { background(255); // 模式1左上角定位 rectMode(CORNER); fill(255, 0, 0, 150); // 半透明的红色填充 rect(100, 100, 200, 100); // 左上角在(100,100)宽200高100 // 模式2中心点定位 rectMode(CENTER); fill(0, 0, 255, 150); // 半透明的蓝色填充 rect(300, 150, 200, 100); // 中心点在(300,150)宽200高100 // 画个十字标记中心点 stroke(0); line(295, 150, 305, 150); line(300, 145, 300, 155); }3.4 三角形的绘制triangle()三角形由三个顶点定义。triangle(x1, y1, x2, y2, x3, y3)函数按顺序连接这三个点形成一个三角形。triangle(300, 100, 200, 300, 400, 300); // 画一个顶点在上底边在下的等腰三角形3.5 四边形的绘制quad()四边形由四个顶点定义。quad(x1, y1, x2, y2, x3, y3, x4, y4)函数按顺序连接这四个点。注意这四个点必须按顺序顺时针或逆时针给出不能交叉否则会画出扭曲的“蝴蝶结”形状。quad(250, 100, 350, 100, 400, 200, 200, 200); // 画一个梯形3.6 颜色的设置stroke(),fill(),background()颜色是图形的灵魂。Processing使用RGB红绿蓝或HSB色相饱和度亮度颜色模型。最常用的是RGB。stroke(color)设置图形边框线的颜色。fill(color)设置图形内部填充的颜色。background(color)设置整个画布背景的颜色。noStroke()取消边框。noFill()取消填充。颜色参数有多种格式灰度一个参数0-255。fill(0)黑色fill(255)白色。RGB三个参数分别代表红、绿、蓝分量每个0-255。fill(255, 0, 0)纯红色fill(0, 255, 0)纯绿色fill(0, 0, 255)纯蓝色。RGBA四个参数前三个是RGB第四个是Alpha透明度0透明255不透明。fill(255, 0, 0, 127)半透明红色。void draw() { // 设置背景为浅灰色 background(240); // 画一个无边框、蓝色填充的圆 noStroke(); fill(0, 120, 255); ellipse(150, 200, 120, 120); // 画一个红色边框、黄色填充的矩形 stroke(255, 50, 50); strokeWeight(4); fill(255, 255, 0); rect(300, 140, 160, 120); // 画一个只有绿色边框、无填充的三角形 noFill(); stroke(50, 200, 50); strokeWeight(2); triangle(450, 140, 380, 260, 520, 260); }4. 从静态到动态让图形“活”起来只画静态图形还不够酷Processing的魅力在于让图形动起来。关键在于理解draw()函数的循环特性并引入变量。4.1 使用变量控制图形属性让我们让一个圆在屏幕上水平移动。我们需要一个变量来记录圆心的x坐标并且在每一帧draw()执行时改变这个变量的值。float circleX 0; // 声明一个浮点数变量circleX初始为0 void setup() { size(600, 400); } void draw() { background(220); // 在当前位置画圆 ellipse(circleX, 200, 50, 50); // 每帧将circleX的值增加2 circleX circleX 2; // 如果圆移出了画布右边界就让它回到左边界 if (circleX width) { circleX 0; } }这里有几个新概念float一种变量类型表示浮点数带小数点的数。图形坐标用float更精确。circleX circleX 2;这是一个赋值语句。先计算等号右边circleX 2的值然后把这个新值赋给左边的circleX。可以简写为circleX 2;。widthProcessing的系统变量代表画布的宽度我们在setup()中用size()设置的。同样height代表画布高度。使用它们而不是写死数字如600能让代码更通用。if语句用于条件判断。当circleX width成立即圆移出右边界时执行大括号{}里的代码将circleX重置为0。4.2 更复杂的运动速度和方向单一的直线移动有点单调。我们可以引入速度变量并且让运动方向可以改变比如碰到边界反弹。float x 100; // 球的x坐标 float y 100; // 球的y坐标 float speedX 2.5; // x方向速度 float speedY 1.5; // y方向速度 float diameter 50; // 球直径 void setup() { size(600, 400); } void draw() { background(220); // 更新位置 x x speedX; y y speedY; // 边界碰撞检测与反弹 if (x width - diameter/2 || x diameter/2) { speedX speedX * -1; // x方向速度取反 } if (y height - diameter/2 || y diameter/2) { speedY speedY * -1; // y方向速度取反 } // 绘制球 ellipse(x, y, diameter, diameter); }这段代码实现了一个在窗口内四处弹跳的小球。核心逻辑是x和y每帧根据speedX和speedY更新。当球的边缘x ± diameter/2碰到画布左右边界时speedX取反水平运动方向反转。当球的边缘碰到画布上下边界时speedY取反垂直运动方向反转。实操心得在碰撞检测中我们判断的是“球的边缘”是否碰到边界而不是“球的中心”。所以条件是x width - diameter/2右边界和x diameter/2左边界。这是初学者很容易忽略的细节直接判断x width会导致球的一半冲出画布才反弹看起来不自然。4.3 交互用鼠标控制图形让图形响应鼠标操作能立刻增加作品的趣味性。Processing提供了mouseX和mouseY这两个系统变量它们实时存储着当前鼠标光标在画布中的坐标。void setup() { size(600, 400); noCursor(); // 隐藏系统鼠标指针 } void draw() { background(180); // 用鼠标位置控制一个圆 fill(255, 100, 100); ellipse(mouseX, mouseY, 80, 80); // 在鼠标位置画一个十字准星替代隐藏的指针 stroke(0); strokeWeight(1); line(mouseX - 10, mouseY, mouseX 10, mouseY); line(mouseX, mouseY - 10, mouseX, mouseY 10); }现在你移动鼠标圆和十字准星会跟着移动。mouseX和mouseY让交互变得极其简单。你还可以用pmouseX和pmouseY上一帧的鼠标位置来计算鼠标移动的速度和方向从而画出更丰富的效果比如鼠标轨迹。5. 组合与创意用基本图形构建复杂图案掌握了单个图形的绘制和动态控制后我们就可以将它们组合起来利用循环创造出规律性、重复性的复杂图案。这是Processing创作从“小练习”迈向“作品”的关键一步。5.1 使用循环绘制网格图案for循环是生成重复图形的利器。比如我们想在画布上绘制一个10x10的圆点网格。void setup() { size(600, 600); background(255); noStroke(); fill(50, 100, 200); int gridSize 60; // 网格间距 int dotSize 20; // 圆点直径 // 外层循环控制行y坐标 for (int y gridSize; y height; y gridSize) { // 内层循环控制列x坐标 for (int x gridSize; x width; x gridSize) { ellipse(x, y, dotSize, dotSize); } } }这个例子中我们用了两层嵌套的for循环。外层循环变量y从gridSize60开始每次增加gridSize直到超过画布高度height。内层循环变量x同理。这样我们就得到了所有圆点的中心坐标(x, y)并逐一绘制。通过改变gridSize、dotSize甚至在每个点上使用不同的颜色或大小可以创造出无穷的变化。5.2 动态变化的图案结合循环与变量让静态网格动起来。我们可以让每个圆点的大小根据它与鼠标的距离或者某个正弦波函数来变化。void setup() { size(600, 600); noStroke(); } void draw() { background(255); int gridSize 30; int maxSize 40; for (int y gridSize; y height; y gridSize) { for (int x gridSize; x width; x gridSize) { // 计算当前点到鼠标的距离 float distance dist(x, y, mouseX, mouseY); // 距离越近圆点越小映射关系可调整 float size map(distance, 0, 400, maxSize, 5); size constrain(size, 5, maxSize); // 将大小限制在5到maxSize之间 // 根据距离设置颜色距离近偏暖远偏冷 float r map(distance, 0, 400, 255, 100); float b map(distance, 0, 400, 100, 255); fill(r, 100, b); ellipse(x, y, size, size); } } }这里引入了几个新函数dist(x1, y1, x2, y2)计算两点之间的直线距离。map(value, start1, stop1, start2, stop2)映射函数极其有用。它将value从原始范围[start1, stop1]线性映射到目标范围[start2, stop2]。例如map(distance, 0, 400, maxSize, 5)表示如果distance是0鼠标就在点上映射为maxSize40如果distance是400很远映射为5中间的值按比例计算。constrain(value, min, max)约束函数确保value不会超出[min, max]的范围。这段代码创造了一个交互式网格鼠标靠近时圆点变小且颜色偏红鼠标远离时圆点变大且颜色偏蓝。整个画面随着鼠标移动而产生波纹般的动态变化。5.3 绘制函数曲线利用for循环我们可以绘制任何数学函数的曲线。比如绘制一个正弦波。void setup() { size(800, 400); stroke(0, 100, 200); strokeWeight(2); noFill(); } void draw() { background(255); // 开始绘制连续线条 beginShape(); for (float x 0; x width; x) { // 计算y坐标使用正弦函数振幅100并加上画布中心Y坐标 float y height/2 sin(x * 0.02 frameCount * 0.05) * 100; vertex(x, y); // 添加一个顶点 } endShape(); }这里使用了beginShape()、vertex()和endShape()来绘制由一系列顶点定义的连续线条或不填充的形状。sin()是正弦函数它的参数是弧度。x * 0.02控制了正弦波的周期数字越小波形越“舒展”。frameCount是Processing的系统变量代表从程序开始运行起经过的帧数。加上frameCount * 0.05使得正弦波的相位随时间变化从而产生波动的动画效果。vertex(x, y)将计算出的每个点添加到形状中。运行后你会看到一条蓝色的正弦波在屏幕上平滑地波动。通过修改函数如cos(),tan()或组合多个函数可以创造出各种复杂的动态曲线图案。6. 常见问题与调试技巧实录在实际操作中你肯定会遇到各种预期之外的情况。下面是我在学习和教学过程中总结的一些典型问题和解决方法。6.1 图形不显示或显示异常问题描述代码运行了窗口也弹出了但该画的图形没出现或者颜色不对。排查步骤检查draw()中的background()这是最常见的原因。如果你希望图形持续显示而不是每帧被擦除就不应该在draw()里调用background()。反之如果你希望有动画效果却忘了加background()会导致图形拖影、叠加。检查填充和边框色默认的填充色是白色边框色是黑色。如果你在白色背景上画了一个白色填充的图形自然看不见。用fill()和stroke()明确设置颜色。如果只想画边框用noFill()如果只想画填充用noStroke()。检查坐标和尺寸确认你图形的坐标(x, y)和尺寸(width, height)是否在画布size()规定的范围内。一个坐标为(1000, 1000)的圆在600x400的画布上是看不见的。检查绘制顺序Processing的绘制是“后来居上”的后绘制的图形会覆盖在先绘制的图形之上。确保你的绘制顺序符合预期。6.2 动画卡顿或闪烁问题描述动画运行不流畅有明显的卡顿感或闪烁。可能原因与解决计算过于复杂在draw()循环中进行了大量复杂的数学运算如嵌套很深的循环、高精度的物理模拟。尝试优化算法或者降低画布分辨率size()。图形操作过多每一帧绘制成千上万个图形。可以考虑只绘制变化的部分或者使用PGraphics离屏缓冲技术将静态背景预先绘制好每帧只绘制动态元素。系统资源不足关闭其他占用大量CPU或显卡的程序。draw()中调用了阻塞性函数比如同步的文件读取、网络请求。应避免在draw()中进行这类操作或使用异步方式。6.3 变量作用域混淆问题描述在setup()里声明的变量在draw()里无法使用或者值没有被保存。核心要点在Processing中变量有全局变量和局部变量之分。全局变量在所有函数如setup,draw之外声明的变量。它们在整个程序生命周期内都存在所有函数都能访问和修改。用于存储需要跨帧保持的状态如小球的位置、速度。局部变量在某个函数内部声明的变量。只在该函数内部有效函数执行完毕后就被销毁。draw()每帧都重新执行其中的局部变量每帧都会重新初始化。错误示例与修正// 错误示例x是setup的局部变量draw无法使用 void setup() { int x 100; size(400, 300); } void draw() { ellipse(x, 150, 50, 50); // 编译错误找不到变量x } // 正确示例将x声明为全局变量 int x 100; // 全局变量 void setup() { size(400, 300); } void draw() { ellipse(x, 150, 50, 50); }6.4 使用println()进行调试当程序行为不符合预期时最有效的调试方法之一就是输出变量的值。Processing的println()函数可以将内容打印到IDE底部的控制台。float ballX, ballY; float speed 2; void setup() { size(400, 300); ballX width / 2; ballY height / 2; } void draw() { background(255); ballX speed; // 在控制台打印ballX的值观察其变化 println(Frame: frameCount , ballX: ballX); // 边界检查 if (ballX width || ballX 0) { speed * -1; // 反转方向 println(撞墙了速度变为: speed); } ellipse(ballX, ballY, 30, 30); }通过观察控制台的输出你可以清晰地看到ballX每一帧是如何变化的以及在碰撞发生时speed是否正确地取反。这是定位逻辑错误比如条件判断写错、变量更新错误的利器。7. 性能优化与进阶技巧当你的草图变得越来越复杂开始涉及数百上千个图形元素时性能优化就变得重要了。这里分享几个立竿见影的技巧。7.1 减少不必要的重绘noLoop()和redraw()默认情况下draw()会以60FPS的速度疯狂循环。如果你的作品是静态图像或者只在特定事件如鼠标点击后才需要更新这会造成大量的CPU资源浪费。noLoop()放在setup()或某个事件函数如mousePressed()中它会停止draw()的自动循环执行。redraw()当你需要手动触发一次画面更新时调用这个函数它会执行一次draw()。void setup() { size(600, 600); noLoop(); // 设置不自动循环 drawStaticPattern(); // 画一个静态图案 } void drawStaticPattern() { background(255); // ... 绘制复杂但静态的图案 ... } void mousePressed() { // 当鼠标点击时重新绘制一次例如换一种颜色方案 redraw(); }7.2 使用PGraphics离屏缓冲如果你的背景或某些静态元素非常复杂每帧都在draw()里重画它们会非常消耗性能。PGraphics允许你创建一个离屏的图形缓冲区可以先将这些静态内容画好保存起来然后在draw()里只需要用image()函数将这个缓冲区的图像贴到屏幕上效率极高。PGraphics pg; // 声明一个PGraphics对象 void setup() { size(600, 600); pg createGraphics(600, 600); // 创建一个和画布一样大的缓冲区 // 在缓冲区中绘制复杂的静态背景只执行一次 pg.beginDraw(); pg.background(0); pg.stroke(255, 50); pg.strokeWeight(1); for (int i 0; i 100000; i) { float x random(pg.width); float y random(pg.height); pg.point(x, y); } pg.endDraw(); } void draw() { // 主画布每帧只需绘制缓冲区的图像极快 image(pg, 0, 0); // 然后再在主画布上绘制动态元素比如跟随鼠标的圆 fill(255, 0, 0, 150); noStroke(); ellipse(mouseX, mouseY, 80, 80); }在这个例子中我们在setup()里用PGraphics绘制了10万个随机点作为星空背景。这个过程只执行一次。在draw()里我们只需要用image(pg, 0, 0)一句代码就把整个星空贴上来然后在此基础上画动态的红球。这样无论红球怎么动复杂的星空背景都不会成为性能负担。7.3 善用PShape存储复杂图形如果你需要重复绘制一个由很多顶点构成的复杂形状比如一个自定义的徽标、一个复杂的多边形使用PShape对象可以显著提升性能。PShape将图形的几何数据存储在显卡中渲染速度比用beginShape()/endShape()逐帧绘制快得多。PShape complexShape; void setup() { size(600, 600); // 创建并定义复杂形状 complexShape createShape(); complexShape.beginShape(); complexShape.fill(150, 200, 255); complexShape.noStroke(); // 添加大量顶点... for (int i 0; i 360; i 10) { float angle radians(i); float r 150 sin(angle * 5) * 30; // 创建一个星形 float x cos(angle) * r; float y sin(angle) * r; complexShape.vertex(x, y); } complexShape.endShape(CLOSE); } void draw() { background(255); translate(width/2, height/2); // 将坐标系原点移到画布中心 rotate(frameCount * 0.01); // 让形状旋转 shape(complexShape, 0, 0); // 绘制存储的形状效率很高 }PShape特别适合用于需要多次绘制、且本身不发生变化或仅发生整体变换如移动、旋转、缩放的复杂图形。从画一个简单的圆到创建交互式的动态网格再到运用离屏缓冲和图形对象进行优化Processing的基本图形绘制为你打开了一扇将代码转化为视觉表达的大门。这些基础是所有更高级创作粒子系统、物理模拟、图像处理、数据可视化的基石。我个人的体会是最好的学习方式就是多动手从模仿开始然后尝试修改参数看看会发生什么最后结合自己的想法进行创作。遇到问题善用println()调试多查阅官方参考文档Processing社区也有大量丰富的示例和讨论。记住编程在这里不是目的而是实现创意的工具。享受用代码“绘画”和“创造”的过程吧。
