Окно обработки становится белым (на мгновение) при столкновении эллипсов

У меня есть этот странный случай, когда сетка эллипсов сжимается друг к другу и создает своего рода взрывное столкновение, которое является интересным эффектом, но не желаемым.Я действительно просто хочу плавный переход меньших эллипсов, увеличивающихся по мере того, как они приближаются к центру экрана, а затем медленно переходят друг на друга, чем создавая «взрыв». Я не знаю, с чего начать, почему это может происходить. Есть предложения?

Я пытался сделать скриншот, но запечатлеть взрыв довольно сложно. В основном, если вы можете представить, что все 8 эллипсов входят в одну центральную точку, а затем быстро растут, таким образом, делая остальную часть окна белой.

Взрыв Эллипса

ArrayList<RotatingEllipse> ellipses = new ArrayList<RotatingEllipse>();

float updateSize = 1;
float minSize = 1;
float maxSize = 10;
float sizeSpeed = 0.015;



void setup() {
  size(500, 500);
  noStroke();
  smooth();

  ellipses.add(new RotatingEllipse(width*.25, height*.25));
  ellipses.add(new RotatingEllipse(width*.75, height*.25));
  ellipses.add(new RotatingEllipse(width*.75, height*.75));
  ellipses.add(new RotatingEllipse(width*.25, height*.75));

  ellipses.add(new RotatingEllipse(width/2, height*.25)); 
  ellipses.add(new RotatingEllipse(width/2, height*.75)); 

  ellipses.add(new RotatingEllipse(width*.25, height/2)); 
  ellipses.add(new RotatingEllipse(width*.75, height/2));
}

void draw() {
  background(#202020);


  for (RotatingEllipse e : ellipses) {
    e.stepAndDraw();

    updateSize = map(sin(frameCount * sizeSpeed), -1.0, 1.0, minSize, maxSize);

  }
}

class RotatingEllipse {

  float rotateAroundX;
  float rotateAroundY;
  float distanceFromRotatingPoint;
  float angle;

  public RotatingEllipse(float startX, float startY) {

    rotateAroundX = (width/2 + startX)/2;
    rotateAroundY = (height/2 + startY)/2;

    distanceFromRotatingPoint = dist(startX, startY, rotateAroundX, rotateAroundY);

    angle = atan2(startY-height/2, startX-width/2);
  }

  public void stepAndDraw() {

    angle += PI/128;

    float x = rotateAroundX + cos(angle)*distanceFromRotatingPoint;
    float y = rotateAroundY + sin(angle)*distanceFromRotatingPoint;

    float distance = dist(x, y, width/2, height/2);
    float diameter = 50*(200-distance)/500;
    float m = map ( updateSize, 0, distance, 1, diameter);

    ellipse(x, y, m, m);
  }
}

1 ответ

  1. Обратите внимание на значенияm, которые вы используете:

    float m = map ( updateSize, 0, distance, 1, diameter);
    println(m);
    ellipse(x, y, m, m);
    

    Если вы mраспечатаете, вы увидите что-то вроде этого:

    60.552975
    85.61453
    85.42698
    85.440994
    85.46013
    120.79626
    120.83713
    120.847946
    120.81186
    4292781.0
    4282823.5
    611831.94
    234653.25
    1730522.2
    448653.88
    336490.44
    2018942.4
    85.23538
    85.03087
    85.0165
    84.99791
    120.24554
    120.20372
    120.19415
    120.23001
    42.533062
    

    Вы делаете свои эллипсы огромными, которые заполняют экран, поэтому весь экран становится белым.

    Вам нужно рефактировать код, чтобы исключить эти огромные значения. Я действительно не понимаю, что вы пытаетесь сделать с функцией updateSizeandmap(), которая кажется слишком сложной. Но вам придется изменить этот код, чтобы он не генерировал такие большие значения.

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