在 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();