Обработка: как я могу заставить несколько элементов в цикле for() перемещаться в одно место, а затем возвращаться?

У меня есть сетка эллипсов, созданная двумя циклами for(). Я бы хотел, чтобы все эти эллипсы превращались в mouseX и mouseY, когда mousePressed == true, в противном случае они возвращаются на свое место в сетке. Как я могу это сделать? Я начал с этого шаблона, который не работает, так как я не могу понять, как это влияет на положение эллипсов, но замедление настроено.

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

Любая помощь будет принята с благодарностью. Я не уверен, в каком порядке делать вещи/какие элементы должны содержаться в цикле.

Спасибо!


animation for-loop processing easing
person themessup    schedule 06.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно будет отслеживать несколько вещей для каждой точки: ее «исходное» положение, ее текущее положение, ее скорость и т. д.

Самый простой способ сделать это — создать 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);
  }
}

Обратите внимание, что я просто использую средневзвешенное значение для определения положения каждого эллипса, но вы можете изменить его на любое другое. Вы можете задать каждому эллипсу разную скорость или использовать свою логику замедления, что угодно. Но идея та же: инкапсулируйте все, что вам нужно, в класс, а затем поместите логику для одной точки в этот класс.

Я бы рекомендовал сначала заставить это работать с одной точкой, а затем перейти к работе с несколькими точками. Затем, если у вас есть другой вопрос, вы можете опубликовать код только для одной точки, а не для группы. Удачи.

person Kevin Workman    schedule 06.05.2016
comment
спасибо! Это работает отлично. Я пытаюсь перевести его в Интернет через p5.js, и он почти работает, за исключением цикла for-each при рисовании. Я никогда раньше не использовал цикл for-each, поэтому не знаю, как перевести синтаксис для работы в P5.js. Я могу получить ошибку SyntaxError: Неожиданный идентификатор «точка». Ожидается либо "in", либо "of" в синтаксисе перечисления. - person themessup; 07.05.2016
comment
@themessup Я бы порекомендовал поиск в Google, или вы могли бы просто использовать стандартный цикл for вместо цикла for each. - person Kevin Workman; 07.05.2016