JavaScript的p5.js库坐标系图解

p5.js 坐标系统包括 2D 坐标系和 WEBGL 3D 坐标系，它是你理解 p5.js 一切绘图、变换、动画开发的核心前提之一。学懂p5.js库坐标系，才能画对位置，是你从"照抄代码的新手"蜕变成"能自主创作的开发者"的关键基础知识，是"知其然，更知其所以然"的核心一步。

【关于p5.js库初学者使用快速入门，可见https://blog.csdn.net/cnds123/article/details/156687856 ，本篇是对此文的系统补充。

p5.js 的官网https://p5js.org/ 可以切换中文。】

2D 模式

p5.js 的坐标系，在默认状态下（2D 模式），p5.js 的坐标系与原生 HTML5 Canvas 的坐标系在原点位置、轴的方向以及旋转方向上是完全一样的。

• X 轴：向右增加（和数学一样）。

• Y 轴：向下增加（和数学相反！）。

这意味着：Y 越大，物体越靠下。

验证代码如下：

html 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script>
    function setup() {
        createCanvas(400, 400); 
    }

    function draw() {
      background(240);fill(255,0,0);noStroke();
      rect(0, 0, 30, 30);  // 原点左上角：红色小方块 
      rect(100, 150, 50,50); // X=100(右) Y=150(下)：红色方块。X 越大越右，Y 越大越靠下。
    }
</script>

参见下图运行效果：

3D 模式

在 p5.js 支持3D 模式，若开启了 3D 模式：

createCanvas(400, 400, WEBGL);

3D 模式下，p5.js 的原点 (0,0,0) 在画布的最中心（而不是左上角），x轴右+左-，y轴下+上-，z轴前(出屏幕)+后- 。坐标系类型是左手 Y-Down【注意："手性"（Chirality）可以用来帮助确定三个轴之间的相对关系，大拇指（x）、食指（y）、中指（z），而不是确定轴在这个世界里的绝对朝向。关于手性的更多情况，可参见 https://blog.csdn.net/cnds123/article/details/156716324 一文的有关部分】。

3D 模式验证代码

html 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script>
    function setup() {
        createCanvas(400, 400, WEBGL);  // WEBGL启用3D 模式
    }

    function draw() {
      background(240); ambientLight(220); stroke(0);
      // 原点中心：黄色立方体
      push(); translate(0,0,0); ambientMaterial(255,255,0); box(30); pop();
      // X+右、Y+下、Z+前 → 红色立方体
      push(); translate(80,80,80); ambientMaterial(255,0,0); box(30); pop();
      // X-左、Y-上、Z-后 → 蓝色立方体
      push(); translate(-80,-80,-80); ambientMaterial(0,0,255); box(30); pop();
    }
</script>

其中，translate(x,y,z)：参数对应"x轴右+左-，y轴下+上-，z轴前(出屏幕)+后-"，参见下图运行效果：