在 P5.js 中更改坐标系

Question

如您所知，P5 坐标系不是从画布中间开始，加上 y 轴翻转我的问题是如何更改 p5 的坐标，使其与笛卡尔坐标系相同

Answer 1

使用translate()将原点平移到中心。 使用scale翻转 y 轴：

function draw() {
    translate(width/2, height/2); 
    scale(1, -1);

    // [...] 
}

注意， width和height是画布的宽度和高度。
translate(width/2, height/2)将所有内容移动一半的宽度和高度。 它将场景的对象从左上角移动到画布的中心。

---

这种方法会导致文本被翻转。 再次文本，每个文本必须插入一个push() / pop()块中，以反转翻转：

push();
scale(1, -1); // reverse the global flip
text(...);
pop();