楕円の衝突で処理ウィンドウが白く（瞬間的に）変わる

Question

私は、この奇妙な例では、楕円のグリッドが互いに崩壊し、爆発的な衝突の一種を作成します。これは興味深い効果ですが、小さな楕円の滑らかな移行が画面の中心に近づき、「爆発」を作り出すこととは逆にゆっくりと移行するにつれ、大きくなるようにしたいと考えています。なぜこのようなことが起こっているのか、私はどこから始めるべきかわかりません。助言がありますか？

私はスクリーンショットを撮ろうとしましたが、爆発をキャプチャするのはかなり難しいです。基本的に、8つの楕円がすべて1つの中心点に入ってから急速に成長すると想像できれば、残りのウィンドウは白くなります。

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の値に注意してください：

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 

：あなたは mアウトを印刷する場合

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

は、あなたがこのようなものが表示されます

あなたの省略記号を作成していますHUGE、これは画面いっぱいになります。そのため画面全体が白くなります。

これらの大きな値を排除するためにコードをリファクタリングする必要があります。 updateSizeとmap()の機能を使って何をしようとしているのか分かりませんが、これはあまりにも複雑です。しかし、そのような大きな値を生成しないように、コードを変更する必要があります。

ifステートメントを使用して値を上書きすることもできますが、実際の答えはサイズを変更するロジックを単純化することだと思います。