如何在 p5.js 中使用“世界坐标”？ [重复]

Question

我在 1980 年代伴随着计算机图形学长大，在笛卡尔坐标系中思考，origin 在bottom left，垂直y 轴increasing 当你“向上”屏幕。但是几乎每个现代图形系统都使用与终端字符相同的像素坐标系，原点位于top left，垂直轴随着您的“向下”而增加。屏幕上的数字越大越低，这对我来说是违反直觉的。

此外，我想使用 world coordinates 独立于画布的当前尺寸（以像素为单位）来指定形状的位置等。例如，我可以说我的画布大小为 640 x 480 坐标，位置 320,440 应该始终位于画布的中心。

有什么方法可以设置 p5.js 来使用我的思维方式吗？

我尝试在setup函数中使用translate()和

scale()

，但这似乎没有效果。后来我看到Changing the coordinate system in P5.js这很接近，但我也想缩放世界坐标。

Answer 1

这个对“在 P5.js 中更改坐标系”的 SO 回答 接近我想要的：

• 翻转垂直轴
• 它将origin重新定位到屏幕的中心
• 它甚至指出文本需要取消翻转并显示如何
• 表明translate()和scale()应该从

  draw()

  中调用。事实上文档指出：

如果在 draw() 中调用了 scale()，当循环再次开始时，转换将被重置。

🙈

除了平移origin 和翻转y 轴，我来到这个问题寻找世界坐标的比例。

我想添加一些改进来满足我的特定需求：

1. 设置一些词坐标变量：

   let worldWidth = 640
   let worldHeight = 480
   let worldAspect = (worldHeight/worldWidth);
   

2. 在

   setup()

   调整画布到窗口的宽度，但保持世界纵横比：

   function setup() {
     createCanvas(windowWidth, windowWidth / worldAspect);
   }
   

3. 通过将

   origin

   翻译到左下角来开始draw()。要使用世界坐标，可以按画布

   height

   和

   width

   缩放，除以世界坐标（记住也可以使用负

   height

   垂直翻转）：

   function draw() {
     translate(0, height);
     scale(width / worldWidth, -height / worldHeight);
   
     # ...
   }
   

4. 对于取消翻转文本，如果您需要经常这样做，请编写一个包装 text() 的函数以暂时取消翻转：

   function wtext(message, x, y, size) {
     push();
     scale(1, -1);
     textSize(size);
     text(message, x, -y);
     pop();
   }
   

   这保持了世界坐标缩放，因为对 scale() 的连续调用是 cumulative。这也是我们想要按一缩放的原因。

5. 现在我们可以在世界坐标中思考，origin在左下角，垂直y轴up。例如，这将始终在右上角以正确的方式向上绘制“hi”：

   wtext("hi", 590, 430, 50);