Question

我想在每次崩溃时实现缓慢的褪色。换句话说，当圆圈处于最大值时，椭圆的尺寸将最大，反之则相反。到目前为止，我试图通过从中心点的距离重新映射cSize来实现这种效果，但是在某个地方出现问题。目前，我在椭圆尺寸上从小到大缓慢过渡，但内椭圆明显变大。我希望所有椭圆中的大小相等于中心点距离。

我已经将代码简化为4个省略号而不是椭圆行数组，以便有希望简化此示例。这是在for（int x = -50; x＆lt; = 50; x + = 100 ）中完成的。

我已经看到一两个例子略微做了我想要的，但或多或少是静态的。这个例子有点类似，因为椭圆尺寸相对于鼠标位置变得更小或更大

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变量是每个椭圆与圆心的距离，但是每个椭圆对于每个椭圆都是静态的，因为您正在使用{{ 1}}功能到＆＃34;移动＆＃34;圆圈，从未实际移动过。这仅基于rotate()变量，您永远不会用它来计算省略号的大小。

换句话说，省略号的位置及其大小在您的代码中完全不相关。

您需要重构代码，以便大小基于距离。我看到了两个主要的选择：

选项1：现在，您正在使用frameCount和translate()功能在屏幕上移动圈子。您可以将此视为相机移动，而不是椭圆移动。因此，如果您希望将椭圆的大小基于距离某个点的距离，则必须获得变换点的距离，而不是原点。

幸运的是，Processing会为您提供rotate()和screenX()函数，用于确定转换后点的位置。

以下是您如何使用它的示例：

screenY()

选项2 ：停止使用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(); } }和translate()，并直接使用省略号的位置。

您可以创建一个类，它封装了移动和绘制椭圆所需的一切。然后只需创建该类的实例并迭代它们。你需要一些基本的触发来计算出位置，但你可以直接使用它们。

以下是这样做的一个小例子：

rotate()

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

计算与距中心点

1 个答案: