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

你必须为每个点跟踪一些事情：它＆＃34; home＆＃34;位置，当前位置，速度等。

最简单的方法是创建一个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);
  }
}

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

我建议首先让这个工作为一个点，然后向上移动以使其与多个点一起工作。然后，如果您有另一个问题，您可以只为一个点而不是一堆发布代码。祝你好运。

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

1 个答案: