和 p5.js 打交道绕不开的永远是坐标系。我刚开始用这个库的时候最头疼的就是画出来的图形总是不在预期位置想让它出现在左上角结果它跑到右下角想让一个矩形绕着自身中心旋转结果它绕着画布角落疯狂打转。这些问题十有八九都是坐标系没吃透导致的。p5.js 的坐标系并不复杂但因为它默认的规则和我们从小认识的数学坐标系不太一样很多人默认就会踩坑。这篇内容不打算给你讲一堆抽象概念我就结合自己做过的实际案例把 p5.js 的坐标系、坐标变换、坐标映射这些底层逻辑一次讲透并附上可以直接照着跑的代码示例。不管你是刚入门 JavaScript、第一次用 p5.js 做创意编程的新手还是已经写过一些简单图形但始终绕不开“图形乱跑阵”的爱好者这篇文章都能帮你把坐标系这块地基打牢。1. 坐标系是p5.js的底层语言1.1 屏幕坐标系的三个规则p5.js 默认的坐标系是屏幕坐标系也叫画布坐标系。所有绘制函数像rect()、ellipse()、line()、beginShape()最终都要落到这套坐标规则上。这套规则其实只有三条但每一条都会在实操里产生连锁反应原点(0, 0)位于画布左上角。X 轴正方向朝右。Y 轴正方向朝下。看到第三条很多从数学平面直角坐标系走过来的人会非常不习惯。数学里 Y 轴是朝上的p5.js 里 Y 轴是朝下的。这意味着什么呢你画一个圆ellipse(200, 100, 50, 50)这个圆在画布上并不是“中上方偏左”而是靠近顶部。因为 Y 坐标从顶部开始往下增长y100对于高度为 400 的画布来说已经是很靠上的区域了。我一开始也习惯性地以为 Y 越大越靠上结果图形全跑到下方去了。你只要把“Y 轴向下”这个默认规则刻在脑子里后面很多事情都会顺很多。下面这段代码你可以在 p5.js 编辑器里直接跑感受一下这个方向规则function setup() { createCanvas(400, 400); background(220); // 三个圆y 坐标从 100 到 300 fill(255, 0, 0); ellipse(100, 100, 60, 60); fill(0, 255, 0); ellipse(100, 200, 60, 60); fill(0, 0, 255); ellipse(100, 300, 60, 60); }运行之后你会发现y100的红色圆在最上方y300的蓝色圆在最下方。这就是屏幕坐标系和数学坐标系的第一个核心差异记住了它你的图形位置至少不会“上下颠倒”。1.2 像素从0开始width与height的边界陷阱坐标系的范围和画布尺寸紧密相关。createCanvas(400, 400)创建的是宽 400、高 400 的画布。但像素是从 0 开始编号的所以 X 的有效范围是0 到 399Y 的有效范围也是0 到 399。你如果直接写ellipse(400, 400, 20, 20)这个圆实际上是画在画布之外的至少不会完整显示。这个细节在写循环的时候特别重要。比如你想画一条贯穿整个画布的垂直线很多人习惯写for (let x 0; x width; x) { point(x, height / 2); }x width这里当x等于 400 时已经超出画布最右边界了。虽然画布外的绘制通常不可见但如果你用的是points()批量绘制或者做像素级操作超边界可能会引起意想不到的数组越界。更稳妥的写法是x width。还有一个容易忽略的问题如果你在循环里用pixels[]数组做像素级操作边界判断错一个像素整个图像渲染就可能出现偏移或者错位。canvas 的宽度是width高度是height数组长度是width * height * 4这里的4是 RGBA 四个通道。处理像素时一定要小心边界我就在这里翻过车。2. 三个核心变换translate、rotate、scale2.1 translate先搬家还是后搬家顺序决定结果translate()函数做的事情特别简单把整个坐标系的原点移动到指定位置。这个移动是瞬间生效的后续绘制的所有内容都会基于新原点。一个最典型的用法是把原点移到画布中心然后以中心为基准绘制图形。function setup() { createCanvas(400, 400); } function draw() { background(220); translate(200, 200); // 画一个圆心在 (0, 0) 的圆实际显示在画布中心 ellipse(0, 0, 120, 120); // 画一个矩形实际中心也在画布中心 rectMode(CENTER); rect(0, 0, 80, 80); }你没看错ellipse(0,0)和rect(0,0)本来应该是画布左上角的坐标但因为translate(200, 200)原点被挪到了画布中心所以这两个图形都显示在画布中央。这里有个很多教程不会强调的重点translate 是累积的。你在一次 draw 里连续调用两次translate()效果是叠加的。translate(100, 0); // 先向右挪 100 translate(0, 50); // 再向下挪 50 // 最终原点在 (100, 50)这个叠加特性对做分组移动很方便但也容易造成混乱。我的建议是每个独立物体使用独立的 translate并在变换前用 push() 保状态、变换后用 pop() 还原状态这样不会互相干扰。具体怎么做下一章细说。2.2 rotate弧度制与控制旋转中心rotate()是另一个高频函数它会让坐标系绕当前原点旋转一个角度。这里有两个最重要的认知第一角度单位是弧度不是度。这是新手最容易踩的坑。写rotate(45)并不是转 45 度而是转 45 弧度——那几乎转了 8 圈多你会看到图形瞬间消失一样地飞转。正确写法是rotate(PI / 4)或者rotate(radians(45))。radians() 这个函数会把角度转成弧度很多人在代码里到处手动乘PI / 180其实直接用radians()更清晰。第二rotate 是绕原点旋转的。如果你不先translate()到某个位置直接rotate(PI/4)那图形会绕着画布左上角旋转。这通常不是你想要的。想要让图形绕自身中心转正确姿势是先把原点translate到图形中心再rotate最后在(0, 0)周围绘制图形。看一个经典旋转方块案例function draw() { background(220); // 把原点搬到画布中心 translate(width / 2, height / 2); // 用 frameCount 做动画增量 rotate(frameCount * 0.05); // 绘制一个以原点为中心的正方形 rectMode(CENTER); rect(0, 0, 100, 100); }这样正方形就会围绕自身中心平滑旋转。frameCount是 p5.js 内置的帧计数器从 0 开始每帧加 1。frameCount * 0.05的意思是每帧转 0.05 弧度大约每秒转动 3 弧度左右比较顺滑。如果你在旋转前不做translate比如直接写rotate(0.05); rect(100, 100, 100, 100);那这个矩形会绕着原点画布左上角在一个半径为 141 像素的轨道上旋转看起来像是在公转。理解了这个区别你就掌握了 p5.js 旋转动画的命门。2.3 scale整体伸缩带来的隐藏问题scale()函数用来放大或缩小整个坐标系。scale(2)表示后续所有坐标和尺寸都放大一倍。比如rect(0, 0, 50, 50)在scale(2)之后实际绘制出来的是一个 100 × 100 的矩形而且位置也整体偏移因为坐标也被放大了。这个函数做全局缩放动画特别好用但也隐藏着一个坑缩放会影响描边宽度。你在scale(2)之后画一条strokeWeight(1)的线条实际屏幕上的描边看起来是 2 像素。如果你只想缩放图形几何尺寸不想缩放描边得反向补偿push(); scale(2); strokeWeight(1 / 2); // 缩小一半描边抵消缩放影响 rect(0, 0, 100, 100); pop();另外一个更现代的方法是直接用 CSS 或者drawingContext的变换矩阵但这个复杂度没必要。做简单项目scale加反向strokeWeight就够了。3. push与pop变换状态的管理大师3.1 状态栈push/pop到底保存了什么push()和pop()是 p5.js 里我使用频率最高的两个函数没有之一。很多人以为它们只是用来“存一下坐标变换”实际上它保存的是整个绘制状态包括变换矩阵、填充颜色、描边颜色、描边宽度、文本样式、混合模式、坐标模式rectMode、ellipseMode等等。push()会把当前所有状态压入一个栈中pop()会把栈顶状态弹出并恢复为当前状态。每次push()和pop()之间写的代码无论怎么修改状态都不会影响外面。一个非常常见的场景你要画多个颜色不同、位置不同、旋转角度不同的图形。function draw() { background(220); // 第一个物体 push(); translate(100, 100); rotate(PI / 4); fill(255, 0, 0); rect(0, 0, 80, 80); pop(); // 第二个物体 push(); translate(300, 150); fill(0, 0, 255); ellipse(0, 0, 100, 100); pop(); }如果没有push()和pop()第二个物体虽然做了translate(300,150)但它依然会继承第一次的rotate(PI/4)导致蓝色圆也跟着被旋转了 45 度。你当然可以通过把旋转角度重置为rotate(0)来手动恢复但这样写多了很容易出错。push/pop就像给每个物体套了一层透明防护罩里面的状态不会污染外面。3.2 成对使用一条最容易犯的错push()和pop()必须成对出现这个原则我强调多少遍都不为过。如果你写了push()却忘了写pop()后面的所有绘制都会受到影响而且 bug 非常难定位。我踩过的一个真实教训是写一个粒子系统粒子每帧都要更新位置和旋转。我在粒子类里写了push()但在绘制函数末尾忘了pop()。结果第一帧所有粒子都正常第二帧开始所有粒子的坐标都叠加了上一帧的 translate粒子越跑越远整体呈现一种放射状飞散的效果。当时我以为是自己粒子的物理模拟公式写错了排查了整整一个下午最后发现只是少了一个pop()。从此我给自己定了一个规矩写完 push 之后立刻把 pop 补上再往里面填代码。这是从代码规范里学到的“先闭合再填充”思路大大减少了这类低级 bug。嵌套使用push/pop时也要注意层级对应push(); // 外层 translate(100, 100); push(); // 内层 rotate(PI / 6); rect(0, 0, 50, 50); pop(); // 先弹内层 pop(); // 再弹外层内层先弹外层后弹严格遵守后进先出原则。4. 坐标映射与数据可视化从数学坐标到屏幕坐标4.1 数学坐标系和屏幕坐标系的差异做数据可视化的时候我们经常要把数学上的点(x, y)绘制到屏幕上。比如你想画一条正弦曲线数学公式是y sin(x)。如果按数学坐标系来看sin函数的值在 -1 到 1 之间它应该是一条沿着 X 轴上下波动的曲线波峰在上方。但如果直接用 p5.js 默认的屏幕坐标系把y sin(x)的值直接传给point(x, y)你会看到波峰在屏幕下方因为 Y 轴向下而且曲线被挤压到画布最顶部因为sin的值范围只有 -1 到 1。解决办法有两个思路。第一个思路是平移原点把原点移动到你想作为“数学坐标系零点”的位置。function draw() { background(220); // 把原点移到画布左侧中部 translate(0, height / 2); // 画 X 轴 line(0, 0, width, 0); // 画正弦曲线y 方向放大 80 倍 stroke(0); for (let x 0; x width; x) { let y sin(x * 0.02) * 80; point(x, y); } }因为translate已经把原点放在画布中间此时 Y 轴方向依然是向下但sin产生的正负值会对称地分布在中间轴上下视觉上就已经很接近数学坐标系了。如果你想 Y 轴的正方向朝上还需要做一步翻转let y -sin(x * 0.02) * 80; // 负号翻转方向第二个思路是做映射用map()函数把数值范围映射到画布范围这是下一节的重点。4.2 自己动手画网格和坐标轴echarts没有告诉你的底层逻辑很多做前端可视化的人用过 echarts那个库的直角坐标系、网格、坐标轴是开箱即用的。但 p5.js 是一个“绘画环境”它并不给你提供现成的坐标轴组件一切都要自己画。这也恰恰是 p5.js 值得学的原因理解网格和坐标轴的底层逻辑后你就知道 echarts 的配置项背后到底在做什么。一个最简单的网格函数function drawGrid() { stroke(200); strokeWeight(1); // 纵向网格线 for (let x 0; x width; x 50) { line(x, 0, x, height); } // 横向网格线 for (let y 0; y height; y 50) { line(0, y, width, y); } }坐标轴其实就是在网格基础上加两条更粗、更黑的线再标注刻度文字。function drawAxes() { stroke(0); strokeWeight(2); // X 轴 line(0, height / 2, width, height / 2); // Y 轴 line(width / 2, 0, width / 2, height); // 刻度 fill(0); noStroke(); textAlign(CENTER, CENTER); for (let i -8; i 8; i) { let x width / 2 i * 50; text(i, x, height / 2 15); } }这里有一个值得注意的细节如果你要在一个需要多次重绘的动画里绘制网格最好把drawGrid()放在draw()的开头、任何变换操作之前调用。否则一旦网格绘制函数受到translate或rotate的影响整个网格系统都会偏移负责调试的坐标系反而帮了倒忙。4.3 map()函数与球坐标系的联动map()是 p5.js 内置的映射函数作用是把一个数值范围映射到另一个数值范围。它的五个参数分别是map(value, start1, stop1, start2, stop2)。做数据可视化时我经常用它把数据值映射成屏幕坐标let x map(i, 0, data.length - 1, 50, width - 50); let y map(data[i], minValue, maxValue, height - 50, 50);注意第二行的映射终点我写的是height - 50到50而不是50到height - 50。这是因为屏幕坐标系 Y 轴向下为了让数值大的数据点显示在图表上方必须把目标范围反向映射。很多做可视化的人第一次总觉得结果“上下颠倒”就是这个原因。再说到球坐标系。如果你接触过 HFSS 这类电磁仿真软件会看到它有球坐标系(r, theta, phi)的概念。在 p5.js 里虽然坐标转换需要自己写但转换公式并不复杂let x r * sin(phi) * cos(theta); let y r * sin(phi) * sin(theta); let z r * cos(phi);做点云可视化或者三维数据映射时这个公式可以直接套用。p5.js 的好处是它把底层的绘图逻辑都封装好了你只需要把数学世界中的坐标转换成屏幕坐标剩下的交给它。5. 局部坐标系思维从轮胎坐标系的启发说起5.1 什么是局部坐标系以轮胎坐标系为例熟悉汽车工程的人应该听说过“轮胎坐标系”。这个坐标系的原点一般放在轮胎与地面的接触中心X 轴沿车辆前进方向Y 轴垂直于地面向上Z 轴指向车辆右侧。在这个局部坐标系里描述力、位移和速度比在全局坐标系里描述要直观得多。这个思维在 p5.js 里同样适用。当你要绘制一个复杂的、带有旋转部件的小车模型时如果所有坐标都用画布全局坐标代码会非常冗长而且一旦拖动小车位置内部每个零件的坐标都得跟着改。正确做法是把整个小车放在一个局部坐标系里先translate到小车位置然后所有零件都在这个局部坐标系里绘制。举个例子一辆简易小车车身为矩形轮子为圆形轮子还要绕着自己的中心旋转。在全局坐标里算轮子位置很容易出错但在局部坐标里清晰很多function drawCar(x, y, wheelAngle) { push(); translate(x, y); // 车身 fill(0, 150, 255); rectMode(CENTER); rect(0, -10, 100, 30); // 左轮 push(); translate(-30, 15); rotate(wheelAngle); fill(50); ellipse(0, 0, 20, 20); pop(); // 右轮 push(); translate(30, 15); rotate(wheelAngle); fill(50); ellipse(0, 0, 20, 20); pop(); pop(); } function draw() { background(220); drawCar(100, 100, frameCount * 0.05); drawCar(300, 200, frameCount * 0.08); }这样写的好处是你完全不需要关心两个轮子在全局坐标里分别在哪只需要知道它们在“小车坐标系”中的相对位置。想移动小车就改drawCar的x, y。想让轮子转起来就传一个wheelAngle。局部坐标系把逻辑解耦得很干净。5.2 局部坐标系的嵌套太阳系与粒子系统局部坐标系嵌套最经典的练习就是太阳系模拟。太阳在太阳系坐标系的原点地球在太阳的局部坐标系里做公转月球又在地球的局部坐标系里做公转。function draw() { background(0); // 把原点移到画布中心作为太阳系中心 translate(width / 2, height / 2); // 太阳 fill(255, 200, 0); ellipse(0, 0, 60, 60); // 地球 push(); rotate(frameCount * 0.02); // 地球绕太阳公转 translate(150, 0); // 地球到太阳的距离 fill(0, 150, 255); ellipse(0, 0, 30, 30); // 月球 push(); rotate(frameCount * 0.08); // 月球绕地球公转 translate(40, 0); fill(200); ellipse(0, 0, 12, 12); pop(); pop(); }注意这里的嵌套顺序外层rotate让坐标系绕着太阳中心旋转然后translate(150, 0)把原点移到地球轨道上的某一点。此时内层再一次rotate和translate(40, 0)月球的位置是相对于地球的。这就是局部坐标系嵌套的魅力——每一层都只关心自己和父节点的相对关系。粒子系统同样受益于这种思维。每个粒子只需要维护自己在世界中的位置和速度绘制时translate到粒子位置再绘制粒子的内部结构比如火焰粒子的小尾巴完全不需要手动计算每个点的全局坐标。6. 3D坐标系与欧拉角从2D到3D的跨越6.1 WEBGL模式下的坐标系变化p5.js 支持 3D 绘制只需要在createCanvas时传入第三个参数WEBGLfunction setup() { createCanvas(600, 600, WEBGL); }在 WEBGL 模式下坐标系和 2D 模式有一个明显的区别默认原点在画布中心而不是左上角。这意味着你不需要手动translate(width/2, height/2)就能在中心画 3D 物体。同时坐标系变成了三维右手坐标系除了 X 和 Y还有指向屏幕方向的 Z 轴。一个最简单的 3D 场景function draw() { background(0); // 让立方体在 X、Y 两个方向上缓慢旋转 rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); box(100); }这段代码会展示一个在空间里自转的立方体非常直观。WEBGL 模式下box()、sphere()、plane()这些 3D 几何体函数才可用2D 的rect()、ellipse()也可以继续用但它们默认是绘制在一个平面上。从 2D 切到 3D 时坐标系的方向感容易混乱。我的调试习惯是先画一个坐标轴辅助物体通常用红绿蓝三种颜色的线段分别代表 X、Y、Z 方向。这在 p5.js 里可以用line()配合stroke()轻松完成花费不到十行代码却能帮你迅速建立空间方位感。6.2 rotateX、rotateY、rotateZ与欧拉角在 3D 模式下旋转不再是单一的rotate()而是拆成了rotateX()、rotateY()、rotateZ()三个函数分别对应绕 X 轴、Y 轴、Z 轴的旋转。这里就自然带出了“欧拉角”的概念。欧拉角本质上就是用一个三维向量(alpha, beta, gamma)来描述物体在三维空间中的姿态每个值分别代表绕某个轴的旋转角度。飞机和航天器上常说的俯仰角、偏航角、滚转角本质就是一组欧拉角。在 p5.js 里应用欧拉角时有一个核心注意点旋转顺序不同最终效果完全不同。这不是数学家的偏执而是实际存在的物理现象。// 先绕 X 轴旋转再绕 Y 轴旋转 rotateX(PI / 4); rotateY(PI / 4); // 和下面这个效果不一样 rotateY(PI / 4); rotateX(PI / 4);这是欧拉角系统的经典特性也是被广大程序员称为“万向锁问题”的根源。当你绕 X 轴旋转 90 度之后Y 轴的旋转会和 Z 轴的旋转产生混淆物体姿态变得不受控。如果你要做一个复杂的三维姿态动画单纯堆叠三个rotate函数很容易失控。我的经验是如果是简单的展示模型用rotateX/rotateY/rotateZ就够了但如果你要做一个需要精确控制姿态的 3D 项目最好改用四元数或者至少明白你当前的旋转顺序并在代码里固定顺序。p5.js 作为一个创意编程框架它的核心诉求是快速出效果所以做个旋转立方体、旋转球体完全够用不用一上来就上四元数。7. 常见问题与排查技巧实录7.1 调试坐标系的三板斧我给自己的坐标系问题总结了三个调试手段屡试不爽。第一板斧打印鼠标坐标。p5.js 内置了mouseX和mouseY你在draw()里加一句print(mouseX, mouseY)移动鼠标就能实时看到屏幕坐标。这能快速确认“我想画的点”和“鼠标点的位置”之间的偏差。第二板斧画网格辅助线。在调试阶段把整个画布网格线画出来尤其是每 50 像素一条的主网格。视觉上有了参照物你就可以一眼看出某个图形是否偏离了预期位置。注意记得让网格绘制不受任何变换影响最好在draw()的最开始调用。第三板斧逐步注释法。当出现无法理解的图形偏移或旋转时我会把所有translate、rotate、scale逐行注释掉然后每次只放开一个变换观察图形变化。这个方法虽然笨但能快速定位到底是哪一个变换出了问题。遇到三层以上的嵌套变换时这几乎是唯一高效的排查手段。7.2 一张排查速查表下面是我常用来快速定位坐标系问题的速查表你可以直接收藏现象可能原因解决办法图形位置整体上下颠倒使用了数学坐标系思维翻转 Y 坐标或用map()反向映射旋转角明显不对用了角度制rotate(radians(45))或设置angleMode(DEGREES)图形绕错误点旋转旋转前未平移原点先translate到旋转中心再rotate图形越画越偏缺少pop()检查push/pop是否配对描边粗细随缩放异常scale影响描边缩放后反向调整strokeWeight图形消失在画布外平移或缩放超范围用print打印坐标检查数值范围3D 物体姿态不受控欧拉角顺序问题固定旋转顺序或改用四元数这个表格不能覆盖所有情况但基本能覆盖日常使用 p5.js 绘图时 90% 的坐标系问题。7.3 CSS rotate与p5.js rotate的本质区别最后顺手讲一个容易混淆的点。如果你写过 JavaScript 操作页面元素可能见过类似设置video.style.rotate -90deg的写法这是 CSS 旋转。这里很容易产生一个误解既然都是 rotatep5.js 里应该也是类似效果吧其实完全不是一回事。CSS 的rotate是作用于 DOM 元素的盒模型变换它改变的是元素在页面文档流中的视觉形态属于布局层面的变换。而 p5.js 的rotate()是在画布上下文中修改坐标系的变换矩阵它影响的是后续所有绘制指令的坐标解释方式。一个是改元素外观一个是改坐标系规则。这个区别在调试中很关键。你在页面上看到一个视频旋转了 90 度用 CSS 设置一下就行但如果你想在 p5.js 里旋转一个图形并且希望它不影响后续图形就必须配合push/pop使用。理解了这个区别你就不会在两种“旋转”之间来回困惑了。我个人的建议是把 p5.js 的变换理解为“画家的手在移动画布”而不是“画出来的图案在旋转”。你移动画布的位置和角度然后画面上的内容自然跟着改变。这样想坐标系的一切行为都变得合理了。做 p5.js 项目这两三年我最大的体会就是坐标系知识不是锦上添花而是所有图形逻辑的地基。地基打牢了后面学粒子系统、物理模拟、三维渲染都会事半功倍。希望这篇关于坐标系的拆解能帮你少走一些我当初走过的弯路。