計算相對於距中心點的距離的橢圓尺寸

Question

我希望在每次崩潰時都能實現緩慢的尺寸衰減。換句話說，當圓圈最大時，橢圓的尺寸最大，反之則相反。到目前爲止，我正試圖通過從中心點的距離重新映射cSize來實現這種影響，但在某些地方出現問題。此刻，我在橢圓尺寸中從小到大變化緩慢，但內部橢圓明顯更大。我想要在所有橢圓中的中心點距離相等的大小分佈。

爲了有希望簡化這個例子，我將代碼簡化爲4個省略號而不是橢圓行數組。這是在for（int x = -50; x < = 50; x + = ）中完成的。

我見過一個或兩個示例，稍微做我想要的，但或多或​​少是靜態的。這個例子是一種類似的，因爲橢圓尺寸變小或與較大的鼠標位置

Distance2D

這裏是省略號我想創建的網格的附加圖，另外，我試圖通過中心點來縮放橢圓的「正方形網格」。

Multiple ellipses + Scale by center

任何指針？

float cSize; 
float shrinkOrGrow; 

void setup() { 
    size(640, 640); 
    noStroke(); 
    smooth(); 
    fill(255); 
} 

void draw() { 
    background(#202020); 
    translate(width/2, height/2); 

    if (cSize > 10) { 
     shrinkOrGrow = 0; 
    } else if (cSize < 1) { 
     shrinkOrGrow = 1; 
} 

    if (shrinkOrGrow == 1) { 
     cSize += .1; 
    } else if (shrinkOrGrow == 0) { 
     cSize -= .1; 
} 
    for (int x = -50; x <= 50; x+=100) { 
    for (int y = -50; y <= 50; y+=100) { 
    float d = dist(x, y, 0, 0);  
    float fromCenter = map(cSize, 0, d, 1, 10); 

    pushMatrix(); 
    translate(x, y); 
    rotate(radians(d + frameCount)); 
    ellipse(x, y, fromCenter, fromCenter); 
    popMatrix(); 
} 
} 
} 

Answer 1

你傳遞到map()函數的值不作很大的意義對我說：

float fromCenter = map(cSize, 0, d, 1, 100); 

的cSize變量反彈從1到10獨立的東西其他。 d變量是每個橢圓到圓的中心的距離，但是由於您使用rotate()函數來「移動」實際上沒有移動的圓，因此每個橢圓的距離都將是靜態的。這僅基於frameCount變量，您從不用它來計算橢圓的大小。

換句話說，橢圓的位置和它們的大小在代碼中是完全無關的。

您需要重構代碼，以便尺寸基於距離。我看到這樣做的兩個主要選項：

選項1：現在你在使用translate()和rotate()功能屏幕上移動的圓圈。您可以將此視爲相機移動，而不是橢圓移動。所以如果你想在橢圓的大小的基礎上，從某個點的距離，你必須得到變換點的距離，而不是原點。

幸運的是，處理爲您提供了screenX()和screenY()函數，用於計算轉換後點的位置。

這裏是如何使用它的一個例子：

for (int x = -50; x <= 50; x+=100) { 
    for (int y = -50; y <= 50; y+=100) { 
     pushMatrix(); 

     //transform the point 
     //in other words, move the camera 
     translate(x, y); 
     rotate(radians(frameCount)); 

     //get the position of the transformed point on the screen 
     float screenX = screenX(x, y); 
     float screenY = screenY(x, y); 

     //get the distance of that position from the center 
     float distanceFromCenter = dist(screenX, screenY, width/2, height/2); 

     //use that distance to create a diameter 
     float diameter = 141 - distanceFromCenter; 

     //draw the ellipse using that diameter 
     ellipse(x, y, diameter, diameter); 
     popMatrix(); 
    } 
    } 

選項2：使用translate()和rotate()停止，並直接使用橢圓的位置。

您可能會創建一個封裝需要移動和繪製橢圓的所有內容的類。然後只需創建該類的實例並遍歷它們。你需要一些基本的三角來找出位置，但是你可以直接使用它們。

這裏做這樣的一個小例子：

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

void setup() { 
    size(500, 500); 
    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)); 
} 

void draw() { 
    background(0); 

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

void mouseClicked() { 
    ellipses.add(new RotatingEllipse(mouseX, mouseY)); 
} 

void mouseDragged() { 
    ellipses.add(new RotatingEllipse(mouseX, mouseY)); 
} 

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/64; 

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

    float distance = dist(x, y, width/2, height/2); 
    float diameter = 50*(500-distance)/500; 

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

試着點擊或在這個例子中拖動。用戶交互對我來說使用這種方法更有意義，但是您選擇哪種選擇取決於最適合您的頭腦。