Changing the coordinate system in P5.js

Question

As you know P5 coordinate system doesn't start from the middle of the canvas plus the y axis is flipped My question is how to change the coordinates of p5 so it became the same as the Cartesian coordinate system

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