Как рисовать линии, указывающие на мышь в Обработка - PullRequest
Новая
       6

Как рисовать линии, указывающие на мышь в Обработка

0 голосов
/ 30 октября 2019

Я пытаюсь создать программу, в которой в сетке есть линии, указывающие на мышь, как магниты. Я новичок в обработке, кто-то может указать мне на учебник о том, как это сделать, или дать мне код и объяснить, что он делает?

1 Ответ

0 голосов
/ 03 ноября 2019

Существует множество решений для этого проекта. Одним из самых простых является использование класса PVector класса Processing.

A vector похож на число, но он содержит два значения: величину и направление.

Вектор в обработке определяется с помощью x и y компонентов : 

PVector v = new PVector(xComponent, yComponent);

С помощью некоторых математических формул вы можете определить величину и направление, используя x-и у-компоненты. Но нам не нужно это определять.

Ниже я приложил завершенный код решения. Большая часть этого должна иметь смысл для вас. Но стоит понять, что происходит с PVector.

Вложенный цикл for внутри void draw() содержит x и y переменных, которые представляют координаты каждой вершины сетки.

Сначала мы определим PVector v как вектор, заданный x-компонентом mouseX - x, или разностью между x-позициями мыши и каждой точки сетки. Аналогично, y-компонент, заданный mouseY - y, имеет ту же разницу.

Создание переменной PVector u, инициализированной из v.setMag(15), содержит PVector, который имеет то же направление , что иv, но с длиной всего 15.

Теперь нарисуем линии. Векторы представляют смещение , а не позицию (в данном случае), поэтому ключевое значение имеет рисование линии от точки сетки до смещения точки сетки.

Следовательно, line(x, y, x + u.x, y + u.y), гдеu.x и u.y являются x- и y-компонентами вектора u. 

void setup() {
  size(600, 600); // Set the size of the canvas to 600x600.
}

void draw() {
  background(255);
  stroke(200); // Set the stroke color to black

  int distVertLine = width / 10; // This variable defines the distance between each subsequent vertical line.
  for(int i = 0; i < width; i += distVertLine) {
    line(i, 0, i, height); // Draw a line at x=i starting at the top of the canvas (y=0) and going to the bottom (y=height)
  }

  int distHorizLine = height / 10; // This variable defines the distance between each subsequent vertical line.
  for(int i = 0; i < width; i += distHorizLine) {
    line(0, i, width, i); // Draw a line at y=i starting at the left of the canvas (x=0) and going to the right (x=width)
  }

  stroke(0); // Set the stroke to black.

  // Use a nested for loop to iterate through all grid vertices.
  for(int x = 0; x <= width; x += width/10) {
    for(int y = 0; y <= height; y += height/10) {
      PVector v = new PVector(mouseX - x, mouseY - y); // Define a vector that points in the direction of the mouse from each grid point.
      PVector u = v.setMag(15); // Make the vector have a length of 15 units.

      line(x, y, x + u.x, y + u.y); // Draw a line from the grid vertex to the terminal point given by the vector.
    }
  }
}
...