处理中的径向波

Question

我现在有点卡住了！比方说，有一个形状网格（嵌套的 For 循环），我想用一个波浪来制作它的动画。波应该有一个偏移量。到目前为止，我可以实现它。目前，偏移量影响 Y 轴……但是我如何才能实现径向偏移——你知道——就像时钟指针或雷达线……我真的希望偏移量从 (width/2, height/2) – 然后顺时针走一圈。这是我的代码和我卡住的地方：

void setup() {
  size(600, 600);
}

void draw () {
  background(255);
  float tiles = 60;
  float tileSize = width/tiles;
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      float waveOffset = map(y, 0, 60, 0, 300);      
      float sin = sin(radians(frameCount + waveOffset));
      float wave = map(sin, -1, 1, 0, tileSize);
      fill(0);
      noStroke();
      pushMatrix();
      translate(tileSize/2, tileSize/2);
      ellipse(x*tileSize, y*tileSize, wave, wave);
      popMatrix();
    }
  }
}

我尝试了不同的东西——比如 rotate();功能等，但我无法将其结合起来！感谢您提供任何帮助！

Answer 1

现在，您正在根据 sin(y) 的变换定义椭圆的大小。转换意味着它看起来像 a * sin(b * y + c) + d，在这种情况下你有

a = tileSize / 2
b = 300 / 60 = 5
c = frameCount
d = tileSize / 2

如果你想做一个不同的图案，你需要使用 sin(theta) 的转换，其中 theta 是点的“角度”（我把“角度”放在引号中是因为它实际上是从中心到点的向量和一些参考向量的角度）。

我建议使用 atan2() 函数。

解决方案：

float waveOffset = 2*(atan2(y - tiles/2, x - tiles/2));
float sin = sin((frameCount/20.0 + waveOffset));

Answer 2

void setup() {
  size(600, 600);
}

void draw () {
  background(255);
  float tiles = 60;
  float tileSize = width/tiles;
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      float waveOffset = atan2(y - tiles/2, x - tiles/2)*0.5;      
      float sin = sin((frameCount*0.05 + waveOffset));
      float wave = map(sin, -1, 1, 0, tileSize);
      fill(0);
      noStroke();
      pushMatrix();
      translate(tileSize/2, tileSize/2);
      ellipse(x*tileSize, y*tileSize, wave, wave);
      popMatrix();
    }
  }
}

处理中的径向波

Radial Waves in Processing

processing

loops

nested