Changing the coordinate system in P5.js

Question

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

Answer 1

Use translate() to translate the origin to the center. Use scale to flip the y axis:

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

    // [...] 
}

Note, width and height is the width and height of the canvas.
translate(width/2, height/2) moves everything by the half width and height. It moves the objects of the scene from the top left to the center of the canvas.

---

This approach will cause that text is flipped. the text again, each text must be inserted in a push() / pop() block that reverses the flip::

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