处理：如何使 for() 循环中的多个元素移动到一个位置然后返回？

Question

我有一个由两个 for() 循环生成的椭圆网格。我想做的是在 mousePressed == true 时将所有这些椭圆简化为 mouseX 和 mouseY，否则返回它们在网格中的位置。我该怎么办？我从这个模板开始，它不起作用，因为我不知道如何影响椭圆的位置，但是设置了缓动。

float x;
float y;
float easeIn = 0.01;
float easeOut = 0.08;
float targetX;
float targetY;

void setup() {
  size(700, 700);
  pixelDensity(2);
  background(255);
  noStroke();
}

void draw() {
  fill(255, 255, 255, 80);
  rect(0, 0, width, height);

  for (int i = 50; i < width-50; i += 30) {
    for (int j = 50; j < height-50; j += 30) {

      fill(0, 0, 0);
      ellipse(i, j, 5, 5);

      if (mousePressed == true) {

        // go to mouseX
        targetX = mouseX; 
        // ease in
        float dx = targetX - x;
        if (abs(dx) > 1) {
          x += dx * easeIn;
        }

        //go to mouseY
        targetY = mouseY;
        // ease in
        float dy = targetY - y;
        if (abs(dy) > 1) {
          y += dy * easeIn;
        }
      } else {

        // return to grid
        targetX = i;
        // ease out
        float dx = targetX - x;
        if (abs(dx) > 1) {
          x += dx * easeOut;
        }

        // return to grid
        targetY = j;
        // ease out
        float dy = targetY - y;
        if (abs(dy) > 1) {
          y += dy * easeOut;
        }
      }
    }
  }
}

任何帮助将不胜感激。我不确定按什么顺序做事/循环中应该包含哪些元素。

谢谢！

Answer 1

您将必须跟踪每个点的一些信息：它的“起始”位置、当前位置、速度等。

最简单的方法是创建一个class，封装所有信息单个点。然后你只需要一个 ArrayList 类的实例，并迭代它们以更新或绘制它们。

这是一个例子：

ArrayList<Dot> dots = new ArrayList<Dot>();

void setup() {
  size(700, 700);
  background(255);
  noStroke();

  //create your Dots
  for (int i = 50; i < width-50; i += 30) {
    for (int j = 50; j < height-50; j += 30) {
      dots.add(new Dot(i, j));
    }
  }
}

void draw() {
  background(255);

  //iterate over your Dots and move and draw each
  for (Dot dot : dots) {
    dot.stepAndRender();
  }
}

class Dot {

  //the point to return to when the mouse is not pressed
  float homeX;
  float homeY;

  //current position
  float currentX;
  float currentY;

  public Dot(float homeX, float homeY) {
    this.homeX = homeX;
    this.homeY = homeY;
    currentX = homeX;
    currentY = homeY;
  }

  void stepAndRender() {

    if (mousePressed) {
      //use a weighted average to chase the mouse
      //you could use whatever logic you want here
      currentX = (mouseX+currentX*99)/100;
      currentY = (mouseY+currentY*99)/100;
    } else {
      //use a weighted average to return home
      //you could use whatever logic you want here
      currentX = (homeX+currentX*99)/100;
      currentY = (homeY+currentY*99)/100;
    }

    //draw the ellipse
    fill(0, 0, 0);
    ellipse(currentX, currentY, 5, 5);
  }
}

请注意，我只是使用加权平均值来确定每个椭圆的位置，但您可以将其更改为任何您想要的。你可以给每个椭圆一个不同的速度，或者使用你的缓动逻辑，无论如何。但想法是一样的：将你需要的一切都封装到一个类中，然后将一个点的逻辑放入该类中。

我建议先让这个为单个点工作，然后再继续让它与多个点一起工作。然后，如果您还有其他问题，您可以只发布一个点而不是一堆的代码。祝你好运。