如何在处理中绘制指向鼠标的线

Question

我正在尝试制作一个程序，其中网格中的线条像磁铁一样指向鼠标。我是 Processing 的初学者，有人可以指点我如何操作的教程或给我一些代码并解释它的作用吗？

int x1 = 0;
int x2 = 0;
int y1 = 0;
int y2 = 0;

void setup() {
  size(200, 200);
}

void draw() {
  background(255, 255, 0);
  x1 = (mouseX + 100) / 2;
  y1 = (mouseY + 100) / 2;
  x2 = -1 * x1 + 200;
  y2 = -1 * y1 + 200;
  line(x1, y1, x2, y2);
}

Answer 1

这个项目有很多解决方案。最简单的方法之一是使用 Processing 的 PVector class.

The PVector class can be used for two or three dimensional vectors. A vector is an entity that has both magnitude and direction. The PVector class, however, stores the components of the vector (x,y for 2D, and x,y,z for 3D). The magnitude and direction are calculated from the components and can be accessed via the methods mag() and heading().

Processing中的一个二维向量是通过x和ycomponents:

定义的

PVector v = new PVector(xComponent, yComponent);

通过一些数学公式，您可以使用 x 和 y 分量确定大小和方向。但是我们不需要确定这些。

下面，我附上了完整的解决方案代码。其中大部分应该对您有意义。但值得了解 PVector.

发生了什么

void draw() 中的嵌套 for 循环包含 x 和 y 变量，代表每个网格顶点的坐标。

我们首先将PVector v定义为由mouseX - x的x分量给出的向量，或者鼠标的x位置与每个网格点之间的差异。同样，mouseY - y给出的y分量也有同样的区别。

创建一个从 v.setMag(15) 初始化的变量 PVector u 持有一个 PVector 与 v 具有相同的方向，但是长度只有 15.

现在画线。向量表示 偏移量，而不是位置（在本例中），因此从网格点到网格点的偏移量画一条线是关键。

因此 line(x, y, x + u.x, y + u.y)，其中 u.x 和 u.y 是向量 u.

的 x 和 y 分量

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.
    }
  }
}

Answer 2

Ben Myers已经给出的答案非常好！下面的代码有一些小的修改：

网格线的两个 for 循环已合并（因为宽度和高度相等）；
向量的构造与设置量级相结合；
颜色和评论的一些细微变化。

修改后的代码：

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

void draw() {
  // There are 10x10 grid cells that each have a size of 60x60 pixels.
  int gridSize = width / 10;

  // Set the background color to anthracite and the stroke color to orange.
  background(56, 62, 66);
  stroke(235, 113, 52);

  // Draw vertical and horizontal grid lines.
  for (int lineIndex = 0; lineIndex < gridSize; lineIndex++) {
    line(lineIndex * gridSize, 0, lineIndex * gridSize, height);
    line(0, lineIndex * gridSize, width, lineIndex * gridSize);
  }

  // Set the stroke color to blue.
  stroke(0, 139, 225);

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

      // Draw a line from the grid point to the end point using the vector.
      line(x, y, x + vector.x, y + vector.y);
    }
  }
}

如何在处理中绘制指向鼠标的线

How to draw lines pointing to mouse in Processing

java

processing