Получить положение мыши в переведенном игровом мире: обработка. js

Question

Я делаю игру в обработке. js. Когда я увеличиваю масштаб моего игрового мира, положение мыши в игровом мире явно смещено. Как сделать так, чтобы положение мыши относилось к положению в игровом мире, а не к верхнему левому углу экрана (0,0) после использования масштаба (x, y) для увеличения относительно верхнего левого угла? Вот мой код, полный движения и масштабирования. Все, что мне нужно, это какой-то способ найти положение игровой мыши, чтобы я мог щелкнуть, чтобы расположить круги в любом месте карты.

pushMatrix();
translate(-pos.x*zoom+width/2, -pos.y*zoom+height/2);
scale(zoom);
for(var i = 0; i<circles.length; i++){
    circles[i].update();
}
if(clicked){
    circles.push(new Circle(mouseX-width/2,mouseY-width/2));//should i have this inside the translation? Outside? coordinates so far only work when zoom is 1 and pos.x and pos.y arent changed
}
popMatrix();//end of translation 

Answer 1

Я понял это! Вот код для добавления круга в масштабированном и переведенном мире в зависимости от положения мыши:

circles.push(new Circle((pos.x*zoom+mouseX-width/2)/zoom,(pos.y*zoom+mouseY-height/2)/zoom))

По сути, я умножаю x на увеличение и y на увеличение, и добавляю мышь x и y, разделенную на увеличить предыдущие результаты, деленные на увеличение. Наконец, я вычитаю ширину / 2, / zoom, чтобы центрировать все. Надеюсь, это поможет!