如何在处理中创建下面的grapher

Question

我想创建一个图形，其节点和线仅围绕圆周连接节点

我试过这个；它没有工作

for (int i = 0; i < nodeX.length; i++) {
    fill(0);
    ellipse(nodeX[i], nodeY[i], 10, 10);
}

或通过标记，必须有一个大小为 (600, 360) 的显示窗口，其中包含具有相同列数和行数（视频中为 10）的网格。您的程序应该可以在不同大小和/或数量的分区下正常工作。

您在 VERY TOP 处全局设置一个常量，如：

final int N_PARTITIONS = 10;

并在整个程序中使用它 (N_PARTITIONS)。即使标记将 N_PARTITIONS 的值更改为 5 或 8 或 15 或 ...，您的程序也应该工作（显然，当 N_PARTITIONS 更改为 15 时，应该有 15 行和 15 列）

当您单击显示窗口上的任意位置时，应在该点显示直径为 10 的圆（以下称为节点）。先前单击的节点应保留在屏幕上，并且应该有线条将每个节点与下一个节点连接起来（最后一个节点连接到第一个节点）。除了这些线（当然还有网格线）之外，应该没有其他线。

在(200, 400)到(300, 300)这三个点和线处应该有节点绘制； (300, 300) 至 (60, 100)；和 (60, 100) 到 (200, 400)。

Answer 1

从您对预期输出的描述来看，网格线和由线连接的节点似乎是不相关的。因此，您需要完成两项任务：

1. 使用N_PARTITIONS 行和列线绘制网格，并且
2. 通过鼠标点击绘制和连接直径为 10 的圆。

前者相对容易。给定

final int N_PARTITIONS = 10;

我们需要跨屏幕 10 行和屏幕下方 10 行。

在void setup() 内，使用size(600, 360); 将画布的大小设置为600x360 像素。

---

让我们首先在屏幕上绘制线条。我们将使用for 循环来完成此操作。

void draw() {
  int distVertLine = width / N_PARTITIONS; // This variable defines the distance between each subsequent vertical line.
  for(int i = distVertLine / 2; 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)
  }
}

上面，我们初始化了一个distVertLine变量来定义每条垂直线之间的水平距离。它的值是width / N_PARTITIONS，因为我们将画布的宽度分成给定数量的分区。

在for 循环中，i 被初始化为distVertLine / 2，因此网格线位于中心。

同样，我们可以用水平线做到这一点：

int distHorizLine = height / N_PARTITIONS; // This variable defines the distance between each subsequent vertical line.
for(int i = distHorizLine / 2; 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)
}

---

现在是节点和线。处理中的一个圆圈由circle(x, y, extent) 给出（查看文档here）。

当鼠标按下时，方法void mousePressed()被调用。每次按下时，我们希望将x 和y 值记录在一个数组中：

ArrayList nodeX = new ArrayList(); // ArrayLists are nice to use because they're expandable, unlike a Processing array.
ArrayList nodeY = new ArrayList(); // ArrayLists are nice to use because they're expandable, unlike a Processing array.

void mouseClicked() {
  nodeX.add(mouseX); // Adds the x-position of the mouse pointer to the nodeX list.
  nodeY.add(mouseY); // Adds the y-position of the mouse pointer to the nodeY list.
}

在void draw() 中，设置一个for 循环，在两个列表中的坐标处绘制圆圈：

stroke(0); // Set the circle's outline as black.
for(int i = 0; i < nodeX.size(); i++) {
  float xPos = (int)nodeX.get(i); // Grab the ith x-position from the list.
  float yPos = (int)nodeY.get(i); // Grab the ith y-position from the list.
  circle(xPos, yPos, 10);  // Draw a circle of diameter 10 at (xPos, yPos).
}

（注意，在void draw()的第一行我添加了

background(255); // Set the background color to white
stroke(125); // Set the stroke color as gray.

为了更容易看到圆圈）。

---

最后，我们需要用一条线连接每个圆圈。

stroke(0, 0, 255); // Make the connecting lines blue.
for(int i = 0; i < nodeX.size() - 1; i++) {
  float xPosA = (int)nodeX.get(i); // Grab the ith x-position from the list.
  float yPosA = (int)nodeY.get(i); // Grab the ith y-position from the list.
  float xPosB = (int)nodeX.get(i+1); // Grab the next x-position from the list.
  float yPosB = (int)nodeY.get(i+1); // Grab the next y-position from the list.
  line(xPosA, yPosA, xPosB, yPosB);
}
// And draw the connecting line.
if(nodeX.size() > 0) { // The code in this block will crash unless this condition is added to handle an empty list.
  int size = nodeX.size() - 1; // Get the index of the last item in nodeX/nodeY.
  float xPosA = (int)nodeX.get(0); // Grab the first x-position from the list.
  float yPosA = (int)nodeY.get(0); // Grab the first y-position from the list.
  float xPosB = (int)nodeX.get(size); // Grab the last x-position from the list.
  float yPosB = (int)nodeY.get(size); // Grab the last y-position from the list.
  line(xPosA, yPosA, xPosB, yPosB);
}