处理窗口在椭圆碰撞时变为白色（瞬间）

Question

我有这个奇怪的例子，其中一个椭圆网格全部相互坍塌并产生一种爆炸性碰撞，这是一种有趣的效果，但不是很理想。我真的只想要一个平滑过渡的小椭圆变大他们靠近屏幕的中心然后慢慢地过渡而不是创造一个“爆炸”。我不知道从哪里开始为什么会发生这种情况。有什么建议？

我试图截取屏幕截图，但捕获爆炸非常困难。基本上，如果你可以想象所有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);
  }
}

Answer 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

你正在制作你的椭圆巨大，它会填满整个屏幕，这就是整个屏幕变白的原因。

您需要重构代码以消除这些巨大的价值。我真的不明白你要对updateSize和map()函数做些什么，这似乎过于复杂。但是您将不得不修改该代码，因此它不会生成如此大的值。

您也可以使用if语句限制值，但我认为真正的答案是简化逻辑以更改大小。