计算椭圆尺寸与距中心点距离的关系

我想在每次崩溃时实现尺寸的缓慢消失。换句话说，当圆最大时，椭圆的尺寸也最大，反之，收缩时则相反。到目前为止，我试图通过从中心点的距离重新映射 cSize 来实现这种影响，但在此过程中的某个地方出了问题。目前，我的椭圆尺寸正在从小到大的缓慢过渡，但内部椭圆明显更大。我希望所有椭圆的大小相对于中心点距离均匀分布。

我已将代码简化为 4 个省略号，而不是省略号行数组，以便希望简化此示例。这是在 for (int x = -50; x 100).

我见过一两个例子，它们稍微满足了我的要求，但或多或​​少是静态的。此示例有点相似，因为椭圆尺寸相对于鼠标位置变得更小或更大

二维距离 https://i.stack.imgur.com/9UUdu.png

这是我试图创建的椭圆网格的附加图，此外，我试图按中心点缩放椭圆的“方形网格”。

多个椭圆+按中心缩放 https://i.stack.imgur.com/A5gq9.png

有什么指点吗？

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

您传递给的值map()函数对我来说没有多大意义：

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

The cSize变量反弹自1 to 10独立于其他任何事物。这d变量是每个椭圆到圆心的距离，但这对于每个人来说都是静态的因为你正在使用rotate()函数来“移动”圆圈，但圆圈实际上从未移动。这仅基于frameCount变量，您从不使用它来计算椭圆的大小。

换句话说，椭圆的位置及其大小在代码中完全无关。

您需要重构代码，以便大小基于距离。我看到执行此操作的两个主要选项：

选项1：现在您正在使用translate() and rotate()功能。您可以将其视为相机移动，而不是椭圆移动。因此，如果您想根据椭圆与某个点的距离来确定椭圆的大小，则必须获得变换点的距离，而不是原始点的距离。

幸运的是，Processing 为您提供了screenX() and 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() and 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);
  }
}

在此示例中尝试单击或拖动。使用这种方法对我来说用户交互更有意义，但是您选择哪个选项实际上取决于最适合您头脑的选项。