Drawing nested For-Loop line by line with Processing

Question

I have a question concerning a nested For-Loop animation using Processing. Lets say I have a grid of shapes… And I want to draw them line by line over some time using frameCount. In words: First row X-Axis, Second row X-Axis… and so on... I thought I could achieve this by using a sine Wave and by letting it run through the grid with a waveOffset. But the math gives me headaches… This is what I came up with so far:

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

void draw () {
  background(255);
  float tiles = 30;
  float tileSize = width/tiles;
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      float waveOffset = map(y, 0, 600, 60, 0);      
      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();
    }
  }
}

How do I write the offset as thight so that it runs trough the first row X-Axis, then jumps to the second row, runs through X-Axis and so on… After the whole grid was drawn it starts of new…

Is there a better way than using a wave Function? Thank you for any kind of help!

All the best!

Answer 1

I don't really know what you mean by "run through nth row x-axis", but one idea is to make the outer for loop like this:

for (int x = 0; x < frameCount % tiles; x++) {

So each frame will draw an additional column of shapes.