在 P5.js 中更改坐标系

Question

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

Answer 1

使用translate() to translate the origin to the center. Use scale翻转y轴：

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

    // [...] 
}

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

的中心

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

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

Changing the coordinate system in P5.js