Radial Waves in Processing

1
votes

I am currently a bit stuck! Lets say, have a grid of shapes (nested For-Loop) and I want to use a wave to animate it. The wave should have an offset. So far, i can achieve it. Currently the offset affects the Y-axis … But how can I manage to have a RADIAL offset – you know – like the clock hand, or a radar line… I really would like the offset to start from (width/2, height/2) – and then walks around clockwise. Here is my code and the point where I am stuck:

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

I tried different things – like the rotate(); function etc. but I can't manage to combine it! Thank you for any kind of help!

2
loopsnestedprocessing

2 Answers

2
votes

Right now, you're defining the size of the ellipses based on a transformation of sin(y). A transformation means it looks like a * sin(b * y + c) + d, and in this case you have

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

If you want to do a different pattern, you need to use a transformation of sin(theta) where theta is the "angle" of the dot (I put "angle" in quotes because it's really the angle from the vector from the center to the dot and some reference vector).

I suggest using the atan2() function.

Solution:

float waveOffset = 2*(atan2(y - tiles/2, x - tiles/2));
float sin = sin((frameCount/20.0 + waveOffset));
1
votes
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();
    }
  }
}