In p5, axis y points downwards. This code make it point upwads (and make the 0,0 the center)

type gridRange={
    xrange:{
        min: number,
        max: number,
    },
    yrange:{
        min: number,
        max: number,
    }
};



const setCoordinateSystem =(r :gridRange,p : p5) =>{
    let xscalingCoeff = window.innerWidth / (r.xrange.max - r.xrange.min);
    let yscalingCoeff = window.innerHeight / (r.yrange.max - r.yrange.min) * -1; // MAKE y points upwards
    let xcenter = r.xrange.max ;
    let ycenter = r.xrange.min ; //NOT AN ERROR!
    p.scale(xscalingCoeff, yscalingCoeff);
    p.translate(xcenter, ycenter);

};


function draw(p: p5): void {
  p.background(255)

 const r: gridRange = {
        xrange: {
            min: -25,
            max: 25,
        },
        yrange: {
            min: -25,
            max: 25,
        },
    };

    setCoordinateSystem(r,p)
}

It works I have a frame with x between -25 and 25, y between -25 and 25 with x and y pointing rightwards and upwards respectively.

But when I add in draw code to write a text.

  p.text('test', -25, 0); 

I the text in inverted. How can fix this problem