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

Question

我有一个由两个 for() 循环生成的椭圆网格。我想做的是当 mousePressed == true 时，将所有这些省略号缓和到 mouseX 和 mouseY，否则 return 到它们在网格中的位置。我该怎么做？我从这个模板开始，它不起作用，因为我无法弄清楚如何影响省略号的位置，但是设置了缓动。

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

如有任何帮助，我们将不胜感激。我不确定 things/which 元素应该按什么顺序包含在循环中。

谢谢！

Answer 1

你将不得不跟踪每个点的一些事情：它的 "home" 位置、它的当前位置、它的速度等等。

最简单的方法是创建一个class，封装所有信息一个点.然后，您只需要 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);
  }
}

请注意，我只是使用加权平均值来确定每个椭圆的位置，但您可以将其更改为您想要的任何值。你可以给每个椭圆一个不同的速度，或者使用你的缓动逻辑，无论如何。但是思路是一样的：把你需要的所有东西封装到一个class里，然后把一个点的逻辑放到那个class.

里

我建议先让它对单个点起作用，然后再向上移动使其对多个点起作用。然后，如果您有其他问题，您可以 post 仅针对单个点而不是一堆的代码。祝你好运。

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

Processing: How can I make multiple elements in a for() loop move to one location then return?

processing

animation

for-loop

easing