加工中的径向波

问题描述

我现在有点卡住了！让我们说，有一个形状网格（嵌套的 For-Loop），我想使用波浪来为其设置动画。波浪应该有一个偏移量。到目前为止，我可以实现它。目前偏移会影响 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,60,300);      
      float sin = sin(radians(frameCount + waveOffset));
      float wave = map(sin,-1,1,tileSize);
      fill(0);
      nostroke();
      pushmatrix();
      translate(tileSize/2,tileSize/2);
      ellipse(x*tileSize,y*tileSize,wave,wave);
      popMatrix();
    }
  }
}

我尝试了不同的东西——比如rotate()；功能等，但我无法组合它！感谢您的任何帮助！

解决方法

现在，您正在根据 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));

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,tileSize);
      fill(0);
      noStroke();
      pushMatrix();
      translate(tileSize/2,tileSize/2);
      ellipse(x*tileSize,y*tileSize,wave,wave);
      popMatrix();
    }
  }
}

loops nested processing processing processing