用 map() 解释坐标的计算

Question

谁能解释一下 value/position 的意思：300-400/2+10。我知道这使得红色圆圈不会超出正方形但我真的不明白计算..？有没有我可以阅读它是如何工作的页面，因为我个人会这样做

float  redCircle = map(mouseX,0,width,116,485);
circle(redCircle,map(mouseY,0,height,114,485),20);

只有一个数字位置，而不是像代码中那样的计算。我试图理解它，但我没有。如果有人能解释一下过程，我将不胜感激。

    void setup() {
        size(600, 600);
      surface.setTitle("Mapping");
      surface.setLocation(CENTER, CENTER);
    }
    
    void draw() {
      background(0);
      stroke(255);
    
      fill(255, 255, 255);//weißer Kreis
      circle(mouseX, mouseY, 20);
      mouseMoved();
      text("Maus X/Y:"+mouseX+"/"+mouseY, 250, 300); //Text für weiße Position
    
     
      fill(255, 0, 0); //Roter Kreis
      float posFromMouseX = map(mouseX, 0, width, 300-400/2+10, 300-400/2+400-10);
      float posFromMouseY = map(mouseY, 0, height, 300-400/2+10, 300-400/2+400-10);
      ellipse(posFromMouseX, posFromMouseY, 20, 20);
      text("map to: "+posFromMouseX+" / "+posFromMouseY, 255, 320); //Text für rote Position
      
      // Transparentes Rechteck in der Mitte
      noFill();
      rect(300-400/2, 300-400/2, 400, 400); 
    }

Answer 1

map() 将根据范围相应地调整数字的比例。

例如，如果您有这些值：

MouseX: 200
width: 1000

你可以很容易地计算出，如果屏幕的宽度为 2000，你的鼠标 X 位置需要为 400 才能成比例。

但这是一个简单的例子。在您粘贴在这里的代码中，发生了同样的事情，但比较的坐标是：

整个window
白色矩形

map() function 需要 5 个参数：

map(value, start1, stop1, start2, stop2)

value: float: 待转换的传入值
start1: float: 值当前范围的下限
stop1: float: 值当前范围的上限
start2：浮点数：值目标范围的下限
stop2: float: 值目标范围的上限

所以...你完全可以不用计算就写出这一行：

float posFromMouseX = map(mouseX, 0, width, 110, 300-400/2+400-10);
// is the same thing than:
float posFromMouseX = map(mouseX, 0, width, 110, 490);

这样写的可能原因是：

作者可能不想做简单的数学运算
稍后作者可能想知道这些数字的来源（了解它们的计算方式将在这方面有所帮助）
作者可能想更改变量的硬编码数字，并在以后使他的白色矩形的大小动态变化

希望对您有所帮助。玩得开心！

用 map() 解释坐标的计算

Explaining coordinate's calculation with map()

processing

position