Блог

Может ли кто-нибудь объяснить значение этого значения / положения : 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); 
    }
  

map() отрегулирует масштаб числа в соответствии с диапазоном.

Для примера, если у вас есть эти значения:

 MouseX: 200
width: 1000
  

Вы можете легко рассчитать, что, если бы экран имел ширину 2000, ваша позиция мыши X должна была бы быть 400, чтобы быть пропорциональной.

Но это простой пример. В коде, который вы вставили сюда, происходит то же самое, но сравниваемые координаты:

1. Все окно
2. Белый прямоугольник

Функция map() принимает 5 аргументов:

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

1. значение: float: входящее значение, подлежащее преобразованию
2. start1: float: нижняя граница текущего диапазона значений
3. stop1: float: верхняя граница текущего диапазона значений
4. start2: float: нижняя граница целевого диапазона значений
5. 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);
  

Вероятными причинами для его написания являются:

1. Возможно, автор не хотел выполнять простую математику
2. Автор может захотеть узнать, откуда берутся эти цифры позже (просмотр того, как они были рассчитаны, поможет в этом вопросе)
3. Автор может захотеть изменить жестко заданные числа для переменных и позже сделать размер своего белого прямоугольника динамическим

Надеюсь, это имеет смысл для вас. Получайте удовольствие!